180 lines
7.7 KiB
TypeScript
180 lines
7.7 KiB
TypeScript
import React, { useState } from 'react';
|
|
|
|
// Iconos SVG
|
|
const MenuIcon = () => (
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
</svg>
|
|
);
|
|
|
|
const CloseIcon = () => (
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
);
|
|
|
|
const ChevronDown = () => (
|
|
<svg 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>
|
|
);
|
|
|
|
const IconMic = () => (
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
|
|
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
|
|
<line x1="12" y1="19" x2="12" y2="23"></line>
|
|
<line x1="8" y1="23" x2="16" y2="23"></line>
|
|
</svg>
|
|
);
|
|
|
|
const IconUsers = () => (
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="9" cy="7" r="4"></circle>
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87m-3-12a4 4 0 0 1 0 7.75"></path>
|
|
</svg>
|
|
);
|
|
|
|
const IconVideo = () => (
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M23 7l-7 5 7 5V7z"></path>
|
|
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
|
|
</svg>
|
|
);
|
|
|
|
const NewHeader: React.FC = () => {
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
const [isProductDropdownOpen, setIsProductDropdownOpen] = useState(false);
|
|
const [isBusinessDropdownOpen, setIsBusinessDropdownOpen] = useState(false);
|
|
|
|
const toggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);
|
|
|
|
return (
|
|
<header className="sticky top-0 bg-white border-b border-gray-200 z-50 shadow-sm">
|
|
<div className="max-w-[1280px] mx-auto px-5">
|
|
<div className="flex items-center justify-between h-20">
|
|
{/* Logo */}
|
|
<a href="/" className="flex items-center">
|
|
<img src="/images/logo.svg" alt="AvanzaCast" className="h-10 w-auto" />
|
|
</a>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden lg:flex items-center gap-8">
|
|
<ul className="flex items-center gap-8 list-none m-0 p-0">
|
|
{/* Producto Dropdown */}
|
|
<li
|
|
className="relative"
|
|
onMouseEnter={() => setIsProductDropdownOpen(true)}
|
|
onMouseLeave={() => setIsProductDropdownOpen(false)}
|
|
>
|
|
<a href="#" className="flex items-center gap-1 text-gray-700 hover:text-blue-600 transition-colors no-underline">
|
|
Producto
|
|
<ChevronDown />
|
|
</a>
|
|
{isProductDropdownOpen && (
|
|
<ul className="absolute top-full left-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-lg min-w-[220px] p-2">
|
|
<li>
|
|
<a href="#" className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 rounded text-gray-700 no-underline">
|
|
<IconMic />
|
|
<span>Grabación</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 rounded text-gray-700 no-underline">
|
|
<IconVideo />
|
|
<span>Multistream</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 rounded text-gray-700 no-underline">
|
|
<IconUsers />
|
|
<span>Invitados</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
)}
|
|
</li>
|
|
|
|
<li><a href="#" className="text-gray-700 hover:text-blue-600 transition-colors no-underline">Contacto</a></li>
|
|
<li><a href="#" className="text-gray-700 hover:text-blue-600 transition-colors no-underline">Precios</a></li>
|
|
<li><a href="#" className="text-gray-700 hover:text-blue-600 transition-colors no-underline">Novedades</a></li>
|
|
|
|
{/* Para Empresas Dropdown */}
|
|
<li
|
|
className="relative"
|
|
onMouseEnter={() => setIsBusinessDropdownOpen(true)}
|
|
onMouseLeave={() => setIsBusinessDropdownOpen(false)}
|
|
>
|
|
<a href="#" className="flex items-center gap-1 text-gray-700 hover:text-blue-600 transition-colors no-underline">
|
|
Para empresas
|
|
<ChevronDown />
|
|
</a>
|
|
{isBusinessDropdownOpen && (
|
|
<ul className="absolute top-full left-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-lg min-w-[220px] p-2">
|
|
<li>
|
|
<a href="#" className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 rounded text-gray-700 no-underline">
|
|
Soluciones empresariales
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 rounded text-gray-700 no-underline">
|
|
Casos de uso
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
)}
|
|
</li>
|
|
|
|
<li><a href="/auth/login" className="text-gray-700 hover:text-blue-600 transition-colors no-underline">Accede</a></li>
|
|
</ul>
|
|
|
|
<a
|
|
href="/auth/register"
|
|
className="bg-blue-600 text-white px-8 py-4 rounded-lg hover:bg-blue-700 transition-colors no-underline font-medium"
|
|
>
|
|
Empecemos
|
|
</a>
|
|
</nav>
|
|
|
|
{/* Mobile Menu Toggle */}
|
|
<button
|
|
className="lg:hidden p-2 text-gray-700 hover:text-blue-600"
|
|
onClick={toggleMobileMenu}
|
|
aria-label="Toggle menu"
|
|
>
|
|
{isMobileMenuOpen ? <CloseIcon /> : <MenuIcon />}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{isMobileMenuOpen && (
|
|
<nav className="lg:hidden py-4 border-t border-gray-200">
|
|
<ul className="flex flex-col gap-4 list-none m-0 p-0">
|
|
<li><a href="#" className="block py-2 text-gray-700 hover:text-blue-600 no-underline">Producto</a></li>
|
|
<li><a href="#" className="block py-2 text-gray-700 hover:text-blue-600 no-underline">Contacto</a></li>
|
|
<li><a href="#" className="block py-2 text-gray-700 hover:text-blue-600 no-underline">Precios</a></li>
|
|
<li><a href="#" className="block py-2 text-gray-700 hover:text-blue-600 no-underline">Novedades</a></li>
|
|
<li><a href="#" className="block py-2 text-gray-700 hover:text-blue-600 no-underline">Para empresas</a></li>
|
|
<li><a href="/auth/login" className="block py-2 text-gray-700 hover:text-blue-600 no-underline">Accede</a></li>
|
|
<li>
|
|
<a
|
|
href="/auth/register"
|
|
className="block bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors no-underline text-center font-medium"
|
|
>
|
|
Empecemos
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default NewHeader;
|