Main Page - Copy this React, Tailwind Component to your project
Import React, { useState, useEffect } from "react"; import { FaFacebook, FaTwitter, FaInstagram, FaPhone, FaEnvelope, FaMapMarkerAlt, FaChevronLeft, FaChevronRight, FaStar, FaQuoteRight, FaTools, FaBolt, FaCar, FaPaintRoller, FaWrench, FaUser } from "react icons/fa"; const MainPage = () => { const [currentSlide, setCurrentSlide] = useState(0); const [isMenuOpen, setIsMenuOpen] = useState(false); const professionals = [ { id: 1, name: "Carlos Martínez", specialty: "Gasfitero", rating: 4.8, reviews: 128, projects: 45, experience: "5 años", icon: <FaTools className="text 6xl text white" /> }, { id: 2, name: "Ana Silva", specialty: "Electricista", rating: 4.9, reviews: 156, projects: 62, experience: "7 años", icon: <FaBolt className="text 6xl text white" /> }, { id: 3, name: "Roberto Pérez", specialty: "Mecánico", rating: 4.7, reviews: 98, projects: 38, experience: "4 años", icon: <FaCar className="text 6xl text white" /> }, { id: 4, name: "Lucía Fernández", specialty: "Carpintera", rating: 4.6, reviews: 112, projects: 50, experience: "6 años", icon: <FaPaintRoller className="text 6xl text white" /> }, { id: 5, name: "Miguel Ángel", specialty: "Pintor", rating: 4.5, reviews: 90, projects: 40, experience: "5 años", icon: <FaWrench className="text 6xl text white" /> } ]; const testimonials = [ { id: 1, name: "María González", text: "Excelente servicio, muy profesional y puntual.", rating: 5 }, { id: 2, name: "Juan Pérez", text: "Encontré al profesional perfecto para mi proyecto.", rating: 4.5 }, { id: 3, name: "Laura Soto", text: "La plataforma es muy fácil de usar y los profesionales son confiables.", rating: 5 } ]; const nextSlide = () => { setCurrentSlide((prev) => (prev + 1) % professionals.length); }; const prevSlide = () => { setCurrentSlide((prev) => (prev 1 + professionals.length) % professionals.length); }; const getSlideWidth = () => { if (window.innerWidth < 768) { return 100; } return 100 / 3; }; useEffect(() => { const timer = setInterval(nextSlide, 5000); return () => clearInterval(timer); }, []); return ( <div className="font inter"> {/* Header remains the same */} <header className="bg white shadow md fixed w full z 50"> <div className="container mx auto px 4 py 4 flex items center justify between"> <div className="flex items center"> <img src="https://images.unsplash.com/photo 1633409361618 c73427e4e206" alt="Logo" className="h 8 w 8 md:h 10 md:w 10 object contain" /> <span className="ml 2 text lg md:text xl font bold text blue 600">ChiloéPro</span> </div> <nav className={`${isMenuOpen ? "flex" : "hidden"} md:flex absolute md:relative top 16 md:top 0 left 0 md:left auto w full md:w auto bg white md:bg transparent flex col md:flex row space y 4 md:space y 0 space x 0 md:space x 6 p 4 md:p 0 shadow lg md:shadow none`}> <a href="#" className="text gray 600 hover:text blue 600">Inicio</a> <a href="#" className="text gray 600 hover:text blue 600">Servicios</a> <a href="#" className="text gray 600 hover:text blue 600">Profesionales</a> <a href="#" className="text gray 600 hover:text blue 600">Contacto</a> </nav> <div className="flex items center space x 4"> <button className="bg blue 600 text white px 4 md:px 6 py 2 text sm md:text base rounded full hover:bg blue 700 transition colors"> Encuentra un profesional </button> <button className="hidden md:flex items center bg transparent border 2 border blue 600 text blue 600 px 4 md:px 6 py 2 text sm md:text base rounded full hover:bg blue 600 hover:text white transition colors" > <FaUser className="mr 2" /> Iniciar sesión </button> <button className="hidden md:flex items center bg blue 600 text white px 4 md:px 6 py 2 text sm md:text base rounded full hover:bg blue 700 transition colors" > Regístrate como profesional </button> <button className="md:hidden text gray 600" onClick={() => setIsMenuOpen(!isMenuOpen)} > <svg className="w 6 h 6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> {isMenuOpen ? ( <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> ) : ( <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /> )} </svg> </button> </div> </div> </header> {/* Hero Section remains the same */} <section className="pt 28 md:pt 32 pb 12 bg gradient to r from blue 500 to blue 700"> <div className="container mx auto px 4 text center text white"> <h1 className="text 3xl sm:text 4xl md:text 6xl font bold mb 4 animate fade in leading tight"> Encuentra a los mejores profesionales en Chiloé </h1> <p className="text lg sm:text xl md:text 2xl mb 8 opacity 90 px 2 md:px 0"> Conectamos a clientes con gasfiteros, electricistas, mecánicos y más </p> <div className="max w 3xl mx auto mb 8 px 4 md:px 0"> <input type="text" placeholder="¿Qué servicio necesitas?" className="w full px 4 md:px 6 py 3 md:py 4 rounded full text gray 800 focus:outline none focus:ring 2 focus:ring blue 400 text sm md:text base" /> </div> <div className="flex flex col sm:flex row justify center gap 4 px 4 md:px 0"> <button className="text sm md:text base bg white text blue 600 px 6 md:px 8 py 3 rounded full hover:bg gray 100 transition colors w full sm:w auto"> Buscar ahora </button> <button className="text sm md:text base bg transparent border 2 border white text white px 6 md:px 8 py 3 rounded full hover:bg white hover:text blue 600 transition colors w full sm:w auto"> Regístrate como profesional </button> </div> </div> </section> {/* Updated Carousel Section with Background Color and Icons */} <section className="py 12 md:py 16 bg gray 50"> <div className="container mx auto px 4"> <h2 className="text 2xl md:text 3xl font bold text center mb 8 md:mb 12">Profesionales Destacados</h2> <div className="relative overflow hidden"> <button onClick={prevSlide} className="absolute left 0 top 1/2 translate y 1/2 bg white p 3 rounded full shadow lg z 10 hover:bg blue 50 transition colors" > <FaChevronLeft className="text blue 600 text xl" /> </button> <div className="flex transition transform duration 500" style={{ transform: `translateX( ${currentSlide * getSlideWidth()}%)`, }} > {professionals.map((professional) => ( <div key={professional.id} className="w full md:w 1/3 flex shrink 0 p 2" > <div className="bg white rounded xl shadow lg overflow hidden h full transform transition all duration 300 hover:scale 105"> <div className="relative bg blue 600 h 48 md:h 64 flex items center justify center"> {professional.icon} <div className="absolute bottom 0 left 0 right 0 bg gradient to t from black/70 to transparent p 4"> <h3 className="text xl font bold text white mb 1">{professional.name}</h3> <p className="text gray 200">{professional.specialty}</p> </div> </div> <div className="p 6"> <div className="flex items center justify between mb 4"> <div className="flex items center"> {[...Array(5)].map((_, i) => ( <FaStar key={i} className={`${i < professional.rating ? "text yellow 400" : "text gray 300"} text lg`} /> ))} <span className="ml 2 text gray 600 font semibold">{professional.rating}</span> </div> <span className="text gray 500 text sm">{professional.reviews} reseñas</span> </div> <div className="grid grid cols 2 gap 4 mb 6"> <div className="text center p 2 bg blue 50 rounded lg"> <p className="text blue 600 font bold text lg">{professional.projects}</p> <p className="text gray 600 text sm">Proyectos</p> </div> <div className="text center p 2 bg blue 50 rounded lg"> <p className="text blue 600 font bold text lg">{professional.experience}</p> <p className="text gray 600 text sm">Experiencia</p> </div> </div> <button className="w full bg blue 600 text white py 3 rounded lg hover:bg blue 700 transition colors text base font semibold"> Contactar Ahora </button> </div> </div> </div> ))} </div> <button onClick={nextSlide} className="absolute right 0 top 1/2 translate y 1/2 bg white p 3 rounded full shadow lg z 10 hover:bg blue 50 transition colors" > <FaChevronRight className="text blue 600 text xl" /> </button> </div> </div> </section> {/* Rest of the sections remain the same */} <section className="py 12 md:py 16 bg white"> <div className="container mx auto px 4"> <h2 className="text 2xl md:text 3xl font bold text center mb 8 md:mb 12">Lo que dicen nuestros clientes</h2> <div className="grid grid cols 1 sm:grid cols 2 md:grid cols 3 gap 6 md:gap 8"> {testimonials.map((testimonial) => ( <div key={testimonial.id} className="bg gray 50 p 4 md:p 6 rounded lg relative"> <FaQuoteRight className="text blue 100 text 3xl md:text 4xl absolute top 4 right 4" /> <p className="text gray 600 mb 4 text sm md:text base">{testimonial.text}</p> <div className="flex items center"> <div> <p className="font bold text sm md:text base">{testimonial.name}</p> <div className="flex items center"> {[...Array(5)].map((_, i) => ( <FaStar key={i} className={`${i < testimonial.rating ? "text yellow 400" : "text gray 300"} text xs md:text sm`} /> ))} </div> </div> </div> </div> ))} </div> </div> </section> {/* Footer remains the same */} <footer className="bg gray 800 text white py 8 md:py 12"> <div className="container mx auto px 4"> <div className="grid grid cols 1 sm:grid cols 2 md:grid cols 4 gap 8"> <div> <h4 className="text lg md:text xl font bold mb 4">ChiloéPro</h4> <p className="text gray 400 text sm md:text base">Conectando profesionales con clientes en Chiloé</p> </div> <div> <h4 className="text lg md:text xl font bold mb 4">Enlaces útiles</h4> <ul className="space y 2 text sm md:text base"> <li><a href="#" className="text gray 400 hover:text white">Términos y condiciones</a></li> <li><a href="#" className="text gray 400 hover:text white">Política de privacidad</a></li> <li><a href="#" className="text gray 400 hover:text white">FAQ</a></li> </ul> </div> <div> <h4 className="text lg md:text xl font bold mb 4">Contacto</h4> <ul className="space y 2 text sm md:text base"> <li className="flex items center"> <FaPhone className="mr 2" /> <span>+56 9 1234 5678</span> </li> <li className="flex items center"> <FaEnvelope className="mr 2" /> <span>contacto@chiloepro.cl</span> </li> <li className="flex items center"> <FaMapMarkerAlt className="mr 2" /> <span>Chiloé, Chile</span> </li> </ul> </div> <div> <h4 className="text lg md:text xl font bold mb 4">Síguenos</h4> <div className="flex space x 4"> <a href="#" className="text xl md:text 2xl hover:text blue 400"><FaFacebook /></a> <a href="#" className="text xl md:text 2xl hover:text blue 400"><FaTwitter /></a> <a href="#" className="text xl md:text 2xl hover:text blue 400"><FaInstagram /></a> </div> </div> </div> <div className="border t border gray 700 mt 8 pt 8 text center"> <p className="text gray 400 text sm md:text base">© 2024 ChiloéPro. Todos los derechos reservados.</p> </div> </div> </footer> </div> ); }; export default MainPage;
