Home Page - Copy this React, Tailwind Component to your project
Import { FaFacebook, FaTwitter, FaInstagram, FaLinkedin } from "react icons/fa"; import { useState } from "react"; const Home = () => { const [isPrivacyOpen, setIsPrivacyOpen] = useState(false); const togglePrivacy = () => { setIsPrivacyOpen(!isPrivacyOpen); }; return ( <div className="min h screen flex flex col"> {/* Added Header */} <header className="bg blue 800 text white py 4 px 4"> <div className="container mx auto flex justify between items center"> <div className="text 2xl font bold">Travel Expense Splitter</div> <div className="space x 4"> <button className="bg transparent hover:bg blue 700 text white font semibold py 2 px 4 border border white rounded transition duration 300"> Login </button> <button className="bg white hover:bg gray 100 text blue 800 font semibold py 2 px 4 rounded transition duration 300"> Sign Up </button> </div> </div> </header> <main className="flex grow flex flex col items center justify center bg gray 50 px 4"> <h1 className="text 4xl font bold text blue 800 mb 6">Welcome to Travel Expense Splitter</h1> <p className="text lg text gray 600 mb 8 text center max w 2xl"> The smart way to manage and split your travel expenses with friends and family. </p> <button className="bg blue 600 hover:bg blue 700 text white font semibold py 3 px 8 rounded lg transition duration 300 shadow lg hover:shadow xl"> Get Started </button> </main> <footer className="bg blue 800 text white py 8 px 4"> <div className="container mx auto"> <div className="flex flex col md:flex row justify between items center space y 4 md:space y 0"> <div className="text center md:text left"> <p className="text sm">© {new Date().getFullYear()} Travel Expense Splitter, All Rights Reserved.</p> </div> <div className="flex items center space x 4"> <button onClick={togglePrivacy} className="text sm hover:text blue 200 transition duration 300" > Privacy Policy </button> <div className="flex items center space x 4"> <a href="#" className="hover:text blue 200 transition duration 300" aria label="Facebook" > <FaFacebook size={20} /> </a> <a href="#" className="hover:text blue 200 transition duration 300" aria label="Twitter" > <FaTwitter size={20} /> </a> <a href="#" className="hover:text blue 200 transition duration 300" aria label="Instagram" > <FaInstagram size={20} /> </a> <a href="#" className="hover:text blue 200 transition duration 300" aria label="LinkedIn" > <FaLinkedin size={20} /> </a> </div> </div> </div> </div> {isPrivacyOpen && ( <div className="fixed inset 0 bg black bg opacity 50 flex items center justify center p 4 z 50"> <div className="bg white text gray 800 p 8 rounded lg max w 2xl w full max h [80vh] overflow y auto"> <h2 className="text 2xl font bold mb 4">Privacy Policy</h2> <div className="mb 6"> <p className="mb 4"> This Privacy Policy describes how Travel Expense Splitter collects, uses, and protects your personal information. </p> <p className="mb 4"> We are committed to ensuring that your privacy is protected. Any information you provide will only be used in accordance with this privacy statement. </p> </div> <button onClick={togglePrivacy} className="bg blue 600 hover:bg blue 700 text white font semibold py 2 px 6 rounded transition duration 300" > Close </button> </div> </div> )} </footer> </div> ); }; export default Home; in react js add new features on this page . also add footer and header
