\"{text}\"

\n {name}\n {location}\n

\n );\n}\n\nfunction PropertyCarousel() {\n const [currentIndex, setCurrentIndex] = useState(0);\n\n const properties = [\n {\n id: 1,\n imageUrl: \"https://maxm-imggenurl.web.val.run/modern-luxury-apartment-lagos-nigeria\"\n },\n {\n id: 2,\n imageUrl: \"https://maxm-imggenurl.web.val.run/suburban-family-home-nigeria\"\n },\n {\n id: 3,\n imageUrl: \"https://maxm-imggenurl.web.val.run/commercial-property-nigeria\"\n }\n ];\n\n const nextProperty = () => {\n setCurrentIndex((prevIndex) => \n (prevIndex + 1) % properties.length\n );\n };\n\n const prevProperty = () => {\n setCurrentIndex((prevIndex) => \n (prevIndex - 1 + properties.length) % properties.length\n );\n };\n\n useEffect(() => {\n const slideInterval = setInterval(nextProperty, 30000); // 30 seconds\n return () => clearInterval(slideInterval);\n }, []);\n\n const currentProperty = properties[currentIndex];\n\n return (\n

\n \n \n

\n $\"Property$ \n

\n \n \n

\n {properties.map((_, index) => (\n setCurrentIndex(index)}\n />\n ))}\n

\n );\n}\n\nfunction ServiceCard({ icon, title, description, onClick }) {\n return (\n

{icon}

{title}

{description}

\n Learn More\n

\n );\n}\n\nfunction LandingPage({ setCurrentPage }) {\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n const toggleMenu = () => {\n setIsMenuOpen(!isMenuOpen);\n };\n\n const closeMenu = () => {\n setIsMenuOpen(false);\n };\n\n return (\n

🏠

\n DAN\n FAITH\n

\n SHELTERS\n LIMITED\n

\n \n

\n \n \n \n

\n \n

\n\n

Your Dream Home Awaits

Trusted Real Estate Solutions in Your Community

\n \n

\n Get Started\n

\n\n

Our Services

\n setCurrentPage('property-sales')}\n />\n setCurrentPage('property-management')}\n />\n setCurrentPage('investment-consulting')}\n />\n

\n\n

About Danfaithsheltersltd

\n We are a dedicated real estate company committed to helping \n clients find their ideal properties and make smart investment \n decisions. With years of local market experience, we provide \n personalized service that turns your real estate dreams into reality.\n

\n\n

What Our Clients Say

\n \n \n \n

\n\n

Contact Us

\n \n

\n\n \n

\n );\n}\n\nfunction PropertySalesPage() {\n return

Property Sales Page

;\n}\n\nfunction PropertyManagementPage() {\n return

Property Management Page

;\n}\n\nfunction InvestmentConsultingPage() {\n return

Investment Consulting Page

;\n}\n\nfunction App() {\n const [currentPage, setCurrentPage] = useState('home');\n\n const renderPage = () => {\n switch(currentPage) {\n case 'property-sales':\n return ;\n case 'property-management':\n return ;\n case 'investment-consulting':\n return ;\n default:\n return ;\n }\n };\n\n return (\n

\n {renderPage()}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Danfaithsheltersltd - Real Estate Solutions\n \n \n \n \n \n

\n \n \n \n \n `, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody, html {\n margin: 0;\n padding: 0;\n font-family: 'Arial', sans-serif;\n line-height: 1.6;\n color: #333;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 15px;\n}\n\nheader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 0;\n background-color: #f4f4f4;\n}\n\n.logo {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n font-weight: bold;\n}\n\n.logo-container {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.logo-icon {\n font-size: 36px;\n margin-right: 10px;\n}\n\n.logo-text {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.logo-brand {\n display: flex;\n font-size: 24px;\n}\n\n.logo-brand .dan {\n color: #28a745; /* Green */\n margin-right: 5px;\n}\n\n.logo-brand .faith {\n color: #ffc107; /* Gold */\n}\n\n.logo-subtitle {\n display: flex;\n font-size: 16px;\n}\n\n.logo-subtitle .shelters {\n color: #dc3545; /* Red */\n margin-right: 5px;\n}\n\n.logo-subtitle .limited {\n color: #dc3545; /* Red */\n}\n\nnav ul {\n display: flex;\n list-style: none;\n gap: 20px;\n}\n\nnav a {\n text-decoration: none;\n color: #333;\n transition: color 0.3s;\n}\n\nnav a:hover {\n color: #007bff;\n}\n\n.menu-toggle {\n display: none;\n flex-direction: column;\n cursor: pointer;\n}\n\n.menu-toggle span {\n height: 3px;\n width: 25px;\n background-color: #333;\n margin: 4px 0;\n transition: all 0.3s ease;\n}\n\n.menu-toggle.open span:nth-child(1) {\n transform: rotate(-45deg) translate(-5px, 6px);\n}\n\n.menu-toggle.open span:nth-child(2) {\n opacity: 0;\n}\n\n.menu-toggle.open span:nth-child(3) {\n transform: rotate(45deg) translate(-5px, -6px);\n}\n\n.hero {\n text-align: center;\n padding: 50px 0;\n background: linear-gradient(135deg, #28a745 0%, #ffc107 100%);\n color: white;\n}\n\n.hero h1 {\n font-size: 48px;\n margin-bottom: 20px;\n}\n\n.hero-cta {\n margin-top: 30px;\n}\n\n.property-carousel {\n width: 100%;\n margin: 0 auto;\n position: relative;\n}\n\n.carousel-container {\n display: flex;\n align-items: center;\n background-color: white;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n overflow: hidden;\n}\n\n.carousel-nav {\n background: rgba(0,0,0,0.5);\n color: white;\n border: none;\n padding: 10px 15px;\n font-size: 24px;\n cursor: pointer;\n transition: background 0.3s;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 10;\n}\n\n.carousel-nav.prev {\n left: 10px;\n}\n\n.carousel-nav.next {\n right: 10px;\n}\n\n.carousel-nav:hover {\n background: rgba(0,0,0,0.7);\n}\n\n.carousel-content {\n width: 100%;\n}\n\n.carousel-image {\n width: 100%;\n}\n\n.carousel-image img {\n width: 100%;\n height: 500px;\n object-fit: cover;\n}\n\n.carousel-indicators {\n display: flex;\n justify-content: center;\n margin-top: 10px;\n}\n\n.indicator {\n width: 10px;\n height: 10px;\n background-color: #ddd;\n border-radius: 50%;\n margin: 0 5px;\n cursor: pointer;\n}\n\n.indicator.active {\n background-color: #007bff;\n}\n\n.cta-button {\n display: inline-block;\n background-color: #007bff;\n color: white;\n padding: 12px 24px;\n text-decoration: none;\n border-radius: 5px;\n transition: background-color 0.3s;\n}\n\n.cta-button:hover {\n background-color: #0056b3;\n}\n\n.services, .about, .contact, .testimonials {\n padding: 50px 0;\n text-align: center;\n}\n\n.service-grid {\n display: flex;\n justify-content: space-around;\n gap: 20px;\n margin-top: 30px;\n}\n\n.service-detail-card {\n background-color: #f8f9fa;\n padding: 30px;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n width: 300px;\n text-align: center;\n cursor: pointer;\n transition: transform 0.3s;\n}\n\n.service-detail-card:hover {\n transform: scale(1.05);\n}\n\n.testimonials-grid {\n display: flex;\n justify-content: space-around;\n gap: 20px;\n margin-top: 30px;\n}\n\n.testimonial-card {\n background-color: #f8f9fa;\n padding: 30px;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n width: 300px;\n text-align: left;\n}\n\n.testimonial-text {\n font-style: italic;\n margin-bottom: 15px;\n}\n\n.testimonial-author {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.testimonial-author span {\n color: #6c757d;\n font-size: 0.9em;\n}\n\nform {\n display: flex;\n flex-direction: column;\n max-width: 500px;\n margin: 0 auto;\n gap: 15px;\n}\n\ninput, textarea, button {\n padding: 12px;\n border: 1px solid #ddd;\n border-radius: 5px;\n}\n\nbutton {\n background-color: #28a745;\n color: white;\n border: none;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\nbutton:hover {\n background-color: #218838;\n}\n\nfooter {\n background-color: #333;\n color: white;\n text-align: center;\n padding: 20px;\n}\n\n.source-link {\n color: #007bff;\n text-decoration: none;\n margin-top: 10px;\n}\n\n@media (max-width: 768px) {\n .service-grid, .testimonials-grid {\n flex-direction: column;\n align-items: center;\n }\n \n nav ul {\n flex-direction: column;\n align-items: center;\n }\n\n .menu-toggle {\n display: flex;\n }\n\n .nav-menu {\n display: none;\n }\n\n .nav-menu.active {\n display: flex;\n }\n\n .carousel-image img {\n height: 250px;\n }\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/Cysoft/danfaithsheltersltdLandingPage/code/main.tsx","extension","actionData","errors"]