126 lines
6.5 KiB
TypeScript
126 lines
6.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
|
|
const NewFooter: React.FC = () => {
|
|
const [selectedLanguage, setSelectedLanguage] = useState('es');
|
|
|
|
return (
|
|
<footer className="bg-gray-900 text-gray-300 py-16">
|
|
<div className="max-w-[1280px] mx-auto px-5">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-12">
|
|
{/* Logo y descripción */}
|
|
<div className="col-span-2 md:col-span-4 lg:col-span-1">
|
|
<img src="/images/logo-white.svg" alt="AvanzaCast" className="h-10 mb-4" />
|
|
<p className="text-sm text-gray-400">
|
|
La plataforma de streaming profesional para creadores y empresas.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Producto */}
|
|
<div>
|
|
<h3 className="text-white font-bold mb-4">Producto</h3>
|
|
<ul className="space-y-3 text-sm">
|
|
<li><a href="/features" className="hover:text-white transition-colors no-underline">Características</a></li>
|
|
<li><a href="/pricing" className="hover:text-white transition-colors no-underline">Precios</a></li>
|
|
<li><a href="/integrations" className="hover:text-white transition-colors no-underline">Integraciones</a></li>
|
|
<li><a href="/updates" className="hover:text-white transition-colors no-underline">Novedades</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Comunidad */}
|
|
<div>
|
|
<h3 className="text-white font-bold mb-4">Comunidad</h3>
|
|
<ul className="space-y-3 text-sm">
|
|
<li><a href="/blog" className="hover:text-white transition-colors no-underline">Blog</a></li>
|
|
<li><a href="/tutorials" className="hover:text-white transition-colors no-underline">Tutoriales</a></li>
|
|
<li><a href="/forum" className="hover:text-white transition-colors no-underline">Foro</a></li>
|
|
<li><a href="/events" className="hover:text-white transition-colors no-underline">Eventos</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Empresa */}
|
|
<div>
|
|
<h3 className="text-white font-bold mb-4">Empresa</h3>
|
|
<ul className="space-y-3 text-sm">
|
|
<li><a href="/about" className="hover:text-white transition-colors no-underline">Acerca de</a></li>
|
|
<li><a href="/careers" className="hover:text-white transition-colors no-underline">Carreras</a></li>
|
|
<li><a href="/contact" className="hover:text-white transition-colors no-underline">Contacto</a></li>
|
|
<li><a href="/partners" className="hover:text-white transition-colors no-underline">Partners</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Legal */}
|
|
<div>
|
|
<h3 className="text-white font-bold mb-4">Legal</h3>
|
|
<ul className="space-y-3 text-sm">
|
|
<li><a href="/terms" className="hover:text-white transition-colors no-underline">Términos de Servicio</a></li>
|
|
<li><a href="/privacy" className="hover:text-white transition-colors no-underline">Política de Privacidad</a></li>
|
|
<li><a href="/cookies" className="hover:text-white transition-colors no-underline">Cookies</a></li>
|
|
<li><a href="/dmca" className="hover:text-white transition-colors no-underline">DMCA</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom bar */}
|
|
<div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
|
<p className="text-sm text-gray-400">
|
|
© 2025 AvanzaCast. Todos los derechos reservados.
|
|
</p>
|
|
|
|
{/* Social links */}
|
|
<div className="flex gap-6">
|
|
<a href="https://twitter.com/avanzacast" className="text-gray-400 hover:text-white transition-colors" aria-label="Twitter">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/>
|
|
</svg>
|
|
</a>
|
|
<a href="https://facebook.com/avanzacast" className="text-gray-400 hover:text-white transition-colors" aria-label="Facebook">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/>
|
|
</svg>
|
|
</a>
|
|
<a href="https://youtube.com/avanzacast" className="text-gray-400 hover:text-white transition-colors" aria-label="YouTube">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M22.54 6.42a2.78 2.78 0 00-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 00-1.94 2A29 29 0 001 11.75a29 29 0 00.46 5.33A2.78 2.78 0 003.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 001.94-2 29 29 0 00.46-5.25 29 29 0 00-.46-5.33z"/>
|
|
<polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" fill="#fff"/>
|
|
</svg>
|
|
</a>
|
|
<a href="https://linkedin.com/company/avanzacast" className="text-gray-400 hover:text-white transition-colors" aria-label="LinkedIn">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/>
|
|
<circle cx="4" cy="4" r="2"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
{/* Language selector */}
|
|
<div className="relative">
|
|
<select
|
|
value={selectedLanguage}
|
|
onChange={(e) => setSelectedLanguage(e.target.value)}
|
|
className="bg-gray-800 border border-gray-700 text-gray-300 px-4 py-2 rounded-lg appearance-none cursor-pointer hover:bg-gray-700 transition-colors pr-10"
|
|
>
|
|
<option value="es">🇪🇸 Español</option>
|
|
<option value="en">🇺🇸 English</option>
|
|
<option value="pt">🇧🇷 Português</option>
|
|
<option value="fr">🇫🇷 Français</option>
|
|
</select>
|
|
<svg
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
>
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default NewFooter;
|