Untitled
unknown
plain_text
5 months ago
4.1 kB
5
Indexable
function Footer() { return ( <footer className="bg-gradient-to-br from-zinc-900 via-zinc-800 to-black py-16 relative overflow-hidden"> {/* Decorative elements */} <div className="absolute inset-0 opacity-5"> <div className="absolute top-0 left-0 w-64 h-64 bg-legal-gold rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2"></div> <div className="absolute bottom-0 right-0 w-64 h-64 bg-legal-gold rounded-full blur-3xl translate-x-1/2 translate-y-1/2"></div> </div> <div className="container-m mx-auto px-4 relative"> {/* Header */} <a href="/" className='flex justify-center'> <img src="../../src/assets/logo.svg" alt="logo studio legale basta" width="50" height="50" /> </a> <div className="text-center mb-16 text-white"> <ul className="text-2xl"> <li className="italic"> <h5 className='text-lg md:text-2xl'>Studio Legale</h5> <h2 className='text-2xl md:text-4xl'><span className="font-sans text-legal-gold">Avv.</span> Rocco Basta</h2> </li> </ul> </div> <div className='w-3/4 h-px mx-auto mt-10 mb-10 md:w-full bg-legal-gold'></div> {/* Contact Grid */} <div className="grid md:grid-cols-3 gap-7 max-w-5xl mx-auto"> {/* Email */} <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6 group hover:bg-white/10 transition-all"> <div className="text-center"> <div className="w-12 h-12 bg-legal-gold/10 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-legal-gold/20 transition-all"> <FontAwesomeIcon icon={faEnvelope} className="text-legal-gold text-xl" /> </div> <h3 className="text-white text-lg mb-4">Email</h3> <a href="mailto:studiolegalebasta@gmail.com" className="text-gray-300 text-sm hover:text-legal-gold transition-colors"> studiolegalebasta@gmail.com </a> </div> </div> {/* Locations */} <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6 group hover:bg-white/10 transition-all"> <div className="text-center"> <div className="w-12 h-12 bg-legal-gold/10 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-legal-gold/20 transition-all"> <FontAwesomeIcon icon={faLocationDot} className="text-legal-gold text-xl" /> </div> <h3 className="text-white text-lg mb-4">Sedi</h3> <div className="space-y-2"> <Link to="/contatti#info-sedi" className="block text-gray-300 text-sm hover:text-legal-gold transition-colors"> Via Pitagora 14, 87062 - Cariati (CS) </Link> <Link to="/contatti#info-sedi?teggiano" className="block text-gray-300 text-sm hover:text-legal-gold transition-colors"> Via Prato IV, SNC 84039 - Teggiano (SA) </Link> </div> </div> </div> {/* Phone */} <div className="bg-white/5 backdrop-blur-sm rounded-lg p-6 group hover:bg-white/10 transition-all"> <div className="text-center"> <div className="w-12 h-12 bg-legal-gold/10 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-legal-gold/20 transition-all"> <FontAwesomeIcon icon={faPhone} className="text-legal-gold text-xl" /> </div> <h3 className="text-white text-lg mb-4">Telefono</h3> <div className="space-y-1 text-gray-300 text-sm"> <p>333/3308933 cell</p> <p>0983/544049 - Cariati</p> <p>0975/207205 - Teggiano</p> </div> </div> </div> </div> </div> </footer> ); } // Export both designs export default Footer;
Editor is loading...
Leave a Comment