Next Home Section - 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 home section make it look better like Justdial or poyo and responsive
