Home - Copy this React, Tailwind Component to your project
"use client"; import React, { useState, useEffect } from 'react'; import Navbar from '../components/Navbar'; import SideMenu from '../components/SideMenu'; import Footer from '../components/Footer'; import './styles.css'; // Import the CSS file const Page = () => { const [isSideMenuOpen, setIsSideMenuOpen] = useState(false); const [isLoggedIn, setIsLoggedIn] = useState(false); const [isLoading, setIsLoading] = useState(true); const toggleSideMenu = () => { setIsSideMenuOpen(!isSideMenuOpen); }; const handleLogin = () => { setIsLoggedIn(true); }; useEffect(() => { // Simulate a loading delay const timer = setTimeout(() => { setIsLoading(false); }, 2000); // Adjust the delay as needed return () => clearTimeout(timer); }, []); return ( <div className="flex flex col min h screen"> <Navbar toggleSideMenu={toggleSideMenu} isLoggedIn={isLoggedIn} handleLogin={handleLogin} /> <SideMenu isOpen={isSideMenuOpen} toggleSideMenu={toggleSideMenu} /> <main className="flex grow flex flex col"> <section className="bg blue 500 text white text center p 8 md:p 16"> <h1 className="text 3xl md:text 5xl font bold mb 4">Welcome to Our Site</h1> <p className="text lg md:text xl mb 6">Discover amazing places and experiences with us.</p> <a href="#explore" className="bg white text blue 500 px 4 py 2 rounded full font semibold">Explore More</a> </section> <section className="p 8 md:p 16 text center"> <h2 className="text 2xl md:text 4xl font bold mb 4">Our Services</h2> <p className="text lg md:text xl mb 6">We offer a variety of services to help you get the most out of your experience.</p> <div className="grid grid cols 1 md:grid cols 3 gap 8"> <div className="bg gray 100 p 4 rounded lg"> <h3 className="text xl font semibold mb 2">Service One</h3> <p className="text gray 700">Description of the first service we offer. Highlight key benefits and features.</p> </div> <div className="bg gray 100 p 4 rounded lg"> <h3 className="text xl font semibold mb 2">Service Two</h3> <p className="text gray 700">Description of the second service. What makes it unique and valuable.</p> </div> <div className="bg gray 100 p 4 rounded lg"> <h3 className="text xl font semibold mb 2">Service Three</h3> <p className="text gray 700">Overview of the third service. Key points and why it stands out.</p> </div> </div> </section> </main> <Footer /> </div> ); }; export default Page; it's my next js app home lage donnot change imports and the header and footer the home sectiok makenit beetr responsive and look good simple and minimalistic style the app is about the lodge information and the contact infoe where you can get the lodges information and contact info in thise app
