Cesar Mendivil
c7a4f163b2
- Introduced a new Logo component in TypeScript that supports different sizes and optional text display. - Added hover effects for the logo image. - Included a new SVG logo asset for AvanzaCast.
262 lines
13 KiB
TypeScript
262 lines
13 KiB
TypeScript
/**
|
|
* Modern SaaS Footer - Estilo Techwind
|
|
* Footer completo con newsletter, links y redes sociales
|
|
*/
|
|
|
|
import React, { useState } from 'react'
|
|
import { Logo } from '../../../../shared/components/Logo'
|
|
|
|
const ModernSaasFooter: React.FC = () => {
|
|
const [newsletter, setNewsletter] = useState('')
|
|
|
|
const handleNewsletterSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
console.log('Newsletter subscription:', newsletter)
|
|
setNewsletter('')
|
|
}
|
|
|
|
return (
|
|
<footer className="footer bg-slate-900 relative text-gray-200 dark:text-gray-200">
|
|
{/* Newsletter Section */}
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid grid-cols-1">
|
|
<div className="relative py-16">
|
|
{/* Newsletter Card */}
|
|
<div className="relative w-full">
|
|
<div className="grid md:grid-cols-12 grid-cols-1 items-center gap-[30px]">
|
|
<div className="lg:col-span-8 md:col-span-7">
|
|
<div className="lg:text-start text-center">
|
|
<h3 className="mb-4 md:text-3xl text-2xl md:leading-normal leading-normal font-semibold text-white">
|
|
Suscríbete a nuestro newsletter
|
|
</h3>
|
|
<p className="text-slate-300 max-w-xl">
|
|
Recibe las últimas noticias, tutoriales y ofertas especiales directamente en tu bandeja de entrada.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="lg:col-span-4 md:col-span-5">
|
|
<form className="text-end" onSubmit={handleNewsletterSubmit}>
|
|
<div className="relative">
|
|
<input
|
|
type="email"
|
|
id="newsletter"
|
|
name="email"
|
|
value={newsletter}
|
|
onChange={(e) => setNewsletter(e.target.value)}
|
|
className="py-4 pe-40 ps-6 w-full h-[50px] outline-none text-black dark:text-white rounded-full bg-white dark:bg-slate-900 shadow dark:shadow-gray-800"
|
|
placeholder="Tu email..."
|
|
required
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="py-2 px-5 inline-block font-semibold tracking-wide align-middle duration-500 text-base text-center absolute top-[2px] end-[3px] h-[46px] bg-indigo-600 hover:bg-indigo-700 border border-indigo-600 hover:border-indigo-700 text-white rounded-full"
|
|
>
|
|
Suscribirse <i className="uil uil-arrow-right"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer Content */}
|
|
<div className="py-[30px] px-0 border-t border-slate-800">
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid md:grid-cols-12 grid-cols-1 gap-[30px]">
|
|
{/* Company Info */}
|
|
<div className="lg:col-span-4 md:col-span-12">
|
|
<Logo
|
|
size="sm"
|
|
showText={true}
|
|
className="mb-4 text-white"
|
|
href="/"
|
|
/>
|
|
<p className="text-slate-300 mb-6">
|
|
La plataforma profesional de multistreaming que transforma la manera en que creas y compartes contenido en vivo.
|
|
</p>
|
|
<ul className="list-none flex items-center space-x-2">
|
|
<li>
|
|
<a href="#" className="size-10 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-700 rounded-md hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
|
|
<i className="uil uil-facebook-f align-middle"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="size-10 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-700 rounded-md hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
|
|
<i className="uil uil-instagram align-middle"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="size-10 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-700 rounded-md hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
|
|
<i className="uil uil-twitter align-middle"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="size-10 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-700 rounded-md hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
|
|
<i className="uil uil-linkedin align-middle"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="size-10 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center border border-gray-700 rounded-md hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600">
|
|
<i className="uil uil-youtube align-middle"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Company Links */}
|
|
<div className="lg:col-span-2 md:col-span-4">
|
|
<h5 className="tracking-[1px] text-white font-semibold mb-4">Compañía</h5>
|
|
<ul className="list-none footer-list space-y-3">
|
|
<li>
|
|
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
|
<i className="uil uil-angle-right-b me-1"></i> Acerca de
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
|
<i className="uil uil-angle-right-b me-1"></i> Servicios
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
|
<i className="uil uil-angle-right-b me-1"></i> Equipo
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
|
<i className="uil uil-angle-right-b me-1"></i> Precios
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
|
<i className="uil uil-angle-right-b me-1"></i> Proyecto
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
|
<i className="uil uil-angle-right-b me-1"></i> Carreras
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Useful Links */}
|
|
<div className="lg:col-span-3 md:col-span-4">
|
|
<h5 className="tracking-[1px] text-white font-semibold mb-4">Enlaces Útiles</h5>
|
|
<ul className="list-none footer-list space-y-3">
|
|
<li>
|
|
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
|
<i className="uil uil-angle-right-b me-1"></i> Términos de Servicio
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
|
<i className="uil uil-angle-right-b me-1"></i> Política de Privacidad
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
|
<i className="uil uil-angle-right-b me-1"></i> Documentación
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
|
<i className="uil uil-angle-right-b me-1"></i> Changelog
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
|
<i className="uil uil-angle-right-b me-1"></i> Componentes
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Newsletter Info */}
|
|
<div className="lg:col-span-3 md:col-span-4">
|
|
<h5 className="tracking-[1px] text-white font-semibold mb-4">Recursos</h5>
|
|
<ul className="list-none footer-list space-y-3">
|
|
<li>
|
|
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
|
<i className="uil uil-angle-right-b me-1"></i> Blog
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
|
<i className="uil uil-angle-right-b me-1"></i> Tutoriales
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
|
<i className="uil uil-angle-right-b me-1"></i> Centro de Ayuda
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
|
<i className="uil uil-angle-right-b me-1"></i> Soporte
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="text-slate-300 hover:text-slate-400 duration-500 ease-in-out inline-flex items-center">
|
|
<i className="uil uil-angle-right-b me-1"></i> API
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer Bottom */}
|
|
<div className="py-[30px] px-0 border-t border-slate-800">
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid md:grid-cols-2 items-center gap-6">
|
|
<div className="md:text-start text-center">
|
|
<p className="mb-0 text-slate-300">
|
|
© {new Date().getFullYear()} AvanzaCast. Diseñado con <i className="mdi mdi-heart text-red-600"></i> por{' '}
|
|
<a href="#" target="_blank" rel="noopener noreferrer" className="text-reset">
|
|
Nextream
|
|
</a>
|
|
</p>
|
|
</div>
|
|
|
|
<ul className="list-none md:text-end text-center space-x-2 md:space-x-4">
|
|
<li className="inline">
|
|
<a href="#">
|
|
<img src="/images/payments/american-ex.png" className="max-h-6 inline" title="American Express" alt="American Express" />
|
|
</a>
|
|
</li>
|
|
<li className="inline">
|
|
<a href="#">
|
|
<img src="/images/payments/discover.png" className="max-h-6 inline" title="Discover" alt="Discover" />
|
|
</a>
|
|
</li>
|
|
<li className="inline">
|
|
<a href="#">
|
|
<img src="/images/payments/master-card.png" className="max-h-6 inline" title="Master Card" alt="Master Card" />
|
|
</a>
|
|
</li>
|
|
<li className="inline">
|
|
<a href="#">
|
|
<img src="/images/payments/paypal.png" className="max-h-6 inline" title="Paypal" alt="Paypal" />
|
|
</a>
|
|
</li>
|
|
<li className="inline">
|
|
<a href="#">
|
|
<img src="/images/payments/visa.png" className="max-h-6 inline" title="Visa" alt="Visa" />
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|
|
|
|
export default ModernSaasFooter
|