399 lines
21 KiB
TypeScript
399 lines
21 KiB
TypeScript
/**
|
|
* Modern SaaS Header - Estilo Techwind
|
|
* Navbar responsive con dropdown menus, theme switcher y animaciones
|
|
*/
|
|
|
|
import React, { useState, useEffect } from 'react'
|
|
import { useScrollSticky } from '../hooks/useScrollSticky'
|
|
|
|
const ModernSaasHeader: React.FC = () => {
|
|
const isScrolled = useScrollSticky()
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
|
|
const [activeDropdown, setActiveDropdown] = useState<string | null>(null)
|
|
const [isDarkMode, setIsDarkMode] = useState(false)
|
|
|
|
useEffect(() => {
|
|
// Verificar el tema guardado en localStorage
|
|
const savedTheme = localStorage.getItem('theme')
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
|
|
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
|
|
setIsDarkMode(true)
|
|
document.documentElement.classList.add('dark')
|
|
} else {
|
|
setIsDarkMode(false)
|
|
document.documentElement.classList.remove('dark')
|
|
}
|
|
|
|
// Removed scroll listener - now handled by useScrollSticky hook
|
|
}, [])
|
|
|
|
const toggleTheme = () => {
|
|
if (isDarkMode) {
|
|
document.documentElement.classList.remove('dark')
|
|
localStorage.setItem('theme', 'light')
|
|
setIsDarkMode(false)
|
|
} else {
|
|
document.documentElement.classList.add('dark')
|
|
localStorage.setItem('theme', 'dark')
|
|
setIsDarkMode(true)
|
|
}
|
|
}
|
|
|
|
const toggleDropdown = (menu: string) => {
|
|
setActiveDropdown(activeDropdown === menu ? null : menu)
|
|
}
|
|
|
|
return (
|
|
<nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
|
|
isScrolled
|
|
? 'bg-white/90 dark:bg-slate-900/90 backdrop-blur-md shadow-md'
|
|
: 'bg-transparent'
|
|
}`}>
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex items-center justify-between h-20">
|
|
{/* Logo */}
|
|
<a href="/" className="flex items-center space-x-1.5 group">
|
|
<img
|
|
src="/logo_avanzacast.svg"
|
|
alt="AvanzaCast"
|
|
className="w-14 h-14 transition-transform duration-300 group-hover:scale-110"
|
|
/>
|
|
<span className={`text-2xl transition-colors duration-300 ${
|
|
isScrolled ? 'text-slate-900 dark:text-white' : 'text-slate-900 dark:text-white'
|
|
}`} style={{ fontFamily: 'Requiner, sans-serif' }}>
|
|
Avanza<span className="font-bold">Cast</span>
|
|
</span>
|
|
</a>
|
|
|
|
{/* Desktop Menu */}
|
|
<div className="hidden lg:flex items-center space-x-8">
|
|
<a href="/" className={`font-medium transition-colors duration-300 ${
|
|
isScrolled
|
|
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
|
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
|
}`}>
|
|
Inicio
|
|
</a>
|
|
|
|
{/* Características Dropdown */}
|
|
<div className="relative group">
|
|
<button className={`font-medium transition-colors duration-300 flex items-center ${
|
|
isScrolled
|
|
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
|
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
|
}`}>
|
|
Características
|
|
<i className="uil uil-angle-down ml-1 transition-transform group-hover:rotate-180 duration-300"></i>
|
|
</button>
|
|
<div className="absolute left-0 mt-2 w-64 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform group-hover:translate-y-0 translate-y-2">
|
|
<div className="bg-white dark:bg-slate-800 rounded-xl shadow-xl py-3 border border-slate-100 dark:border-slate-700">
|
|
<a href="#multistreaming" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
|
|
<div className="flex items-center">
|
|
<div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
|
|
<i className="uil uil-broadcast text-indigo-600"></i>
|
|
</div>
|
|
<span className="font-medium">Multistreaming</span>
|
|
</div>
|
|
</a>
|
|
<a href="#recording" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
|
|
<div className="flex items-center">
|
|
<div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
|
|
<i className="uil uil-video text-indigo-600"></i>
|
|
</div>
|
|
<span className="font-medium">Grabación en la Nube</span>
|
|
</div>
|
|
</a>
|
|
<a href="#studio" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
|
|
<div className="flex items-center">
|
|
<div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
|
|
<i className="uil uil-cube text-indigo-600"></i>
|
|
</div>
|
|
<span className="font-medium">Estudio Virtual</span>
|
|
</div>
|
|
</a>
|
|
<a href="#analytics" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
|
|
<div className="flex items-center">
|
|
<div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
|
|
<i className="uil uil-chart-line text-indigo-600"></i>
|
|
</div>
|
|
<span className="font-medium">Analytics</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="#pricing" className={`font-medium transition-colors duration-300 ${
|
|
isScrolled
|
|
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
|
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
|
}`}>
|
|
Precios
|
|
</a>
|
|
|
|
{/* Recursos Dropdown */}
|
|
<div className="relative group">
|
|
<button className={`font-medium transition-colors duration-300 flex items-center ${
|
|
isScrolled
|
|
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
|
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
|
}`}>
|
|
Recursos
|
|
<i className="uil uil-angle-down ml-1 transition-transform group-hover:rotate-180 duration-300"></i>
|
|
</button>
|
|
<div className="absolute left-0 mt-2 w-64 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform group-hover:translate-y-0 translate-y-2">
|
|
<div className="bg-white dark:bg-slate-800 rounded-xl shadow-xl py-3 border border-slate-100 dark:border-slate-700">
|
|
<a href="#blog" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
|
|
<div className="flex items-center">
|
|
<div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
|
|
<i className="uil uil-book-open text-indigo-600"></i>
|
|
</div>
|
|
<span className="font-medium">Blog</span>
|
|
</div>
|
|
</a>
|
|
<a href="#tutorials" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
|
|
<div className="flex items-center">
|
|
<div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
|
|
<i className="uil uil-graduation-cap text-indigo-600"></i>
|
|
</div>
|
|
<span className="font-medium">Tutoriales</span>
|
|
</div>
|
|
</a>
|
|
<a href="#help" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
|
|
<div className="flex items-center">
|
|
<div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
|
|
<i className="uil uil-question-circle text-indigo-600"></i>
|
|
</div>
|
|
<span className="font-medium">Centro de Ayuda</span>
|
|
</div>
|
|
</a>
|
|
<a href="#api" className="block px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:text-indigo-600 transition-colors rounded-lg mx-2">
|
|
<div className="flex items-center">
|
|
<div className="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
|
|
<i className="uil uil-code-branch text-indigo-600"></i>
|
|
</div>
|
|
<span className="font-medium">API Docs</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="#contact" className={`font-medium transition-colors duration-300 ${
|
|
isScrolled
|
|
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
|
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400'
|
|
}`}>
|
|
Contacto
|
|
</a>
|
|
</div>
|
|
|
|
{/* CTA Buttons */}
|
|
<div className="hidden lg:flex items-center space-x-4">
|
|
{/* Theme Switcher */}
|
|
<button
|
|
onClick={toggleTheme}
|
|
className={`size-9 inline-flex items-center justify-center tracking-wide align-middle duration-500 text-base text-center rounded-full transition-all ${
|
|
isScrolled
|
|
? 'bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700'
|
|
: 'bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700'
|
|
}`}
|
|
aria-label="Cambiar tema"
|
|
>
|
|
{isDarkMode ? (
|
|
<i className={`uil uil-sun text-xl ${isScrolled ? 'text-yellow-500' : 'text-yellow-500'}`}></i>
|
|
) : (
|
|
<i className={`uil uil-moon text-xl ${isScrolled ? 'text-slate-700' : 'text-slate-700'}`}></i>
|
|
)}
|
|
</button>
|
|
|
|
<a href="/auth/login" className={`font-medium transition-colors duration-300 ${
|
|
isScrolled
|
|
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
|
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
|
}`}>
|
|
Iniciar Sesión
|
|
</a>
|
|
<a href="/auth/register" className="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-all duration-300 inline-flex items-center shadow-lg hover:shadow-xl font-medium">
|
|
Empecemos
|
|
<i className="uil uil-arrow-right ml-2"></i>
|
|
</a>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
className={`lg:hidden transition-colors duration-300 ${
|
|
isScrolled ? 'text-slate-700 dark:text-slate-300' : 'text-slate-700 dark:text-slate-300'
|
|
}`}
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
>
|
|
<i className={`uil text-3xl transition-transform duration-300 ${isMobileMenuOpen ? 'uil-times rotate-90' : 'uil-bars'}`}></i>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{isMobileMenuOpen && (
|
|
<div className={`lg:hidden py-4 border-t transition-colors duration-300 ${
|
|
isScrolled
|
|
? 'border-slate-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md'
|
|
: 'border-slate-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md'
|
|
}`}>
|
|
<div className="space-y-4">
|
|
<a href="/" className={`block py-2 font-medium transition-colors ${
|
|
isScrolled
|
|
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
|
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
|
}`}>
|
|
Inicio
|
|
</a>
|
|
|
|
{/* Características Mobile */}
|
|
<div>
|
|
<button
|
|
onClick={() => toggleDropdown('features')}
|
|
className={`flex items-center justify-between w-full py-2 font-medium transition-colors ${
|
|
isScrolled
|
|
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
|
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
|
}`}
|
|
>
|
|
Características
|
|
<i className={`uil uil-angle-down transition-transform ${activeDropdown === 'features' ? 'rotate-180' : ''}`}></i>
|
|
</button>
|
|
{activeDropdown === 'features' && (
|
|
<div className="mt-2 ml-4 space-y-2">
|
|
<a href="#multistreaming" className={`block py-2 text-sm transition-colors ${
|
|
isScrolled
|
|
? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
|
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
|
}`}>
|
|
<i className="uil uil-broadcast mr-2"></i>Multistreaming
|
|
</a>
|
|
<a href="#recording" className={`block py-2 text-sm transition-colors ${
|
|
isScrolled
|
|
? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
|
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
|
}`}>
|
|
<i className="uil uil-video mr-2"></i>Grabación en la Nube
|
|
</a>
|
|
<a href="#studio" className={`block py-2 text-sm transition-colors ${
|
|
isScrolled
|
|
? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
|
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
|
}`}>
|
|
<i className="uil uil-cube mr-2"></i>Estudio Virtual
|
|
</a>
|
|
<a href="#analytics" className={`block py-2 text-sm transition-colors ${
|
|
isScrolled
|
|
? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
|
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
|
}`}>
|
|
<i className="uil uil-chart-line mr-2"></i>Analytics
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<a href="#pricing" className={`block py-2 font-medium transition-colors ${
|
|
isScrolled
|
|
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
|
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
|
}`}>
|
|
Precios
|
|
</a>
|
|
|
|
{/* Recursos Mobile */}
|
|
<div>
|
|
<button
|
|
onClick={() => toggleDropdown('resources')}
|
|
className={`flex items-center justify-between w-full py-2 font-medium transition-colors ${
|
|
isScrolled
|
|
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
|
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
|
}`}
|
|
>
|
|
Recursos
|
|
<i className={`uil uil-angle-down transition-transform ${activeDropdown === 'resources' ? 'rotate-180' : ''}`}></i>
|
|
</button>
|
|
{activeDropdown === 'resources' && (
|
|
<div className="mt-2 ml-4 space-y-2">
|
|
<a href="#blog" className={`block py-2 text-sm transition-colors ${
|
|
isScrolled
|
|
? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
|
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
|
}`}>
|
|
<i className="uil uil-book-open mr-2"></i>Blog
|
|
</a>
|
|
<a href="#tutorials" className={`block py-2 text-sm transition-colors ${
|
|
isScrolled
|
|
? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
|
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
|
}`}>
|
|
<i className="uil uil-graduation-cap mr-2"></i>Tutoriales
|
|
</a>
|
|
<a href="#help" className={`block py-2 text-sm transition-colors ${
|
|
isScrolled
|
|
? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
|
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
|
}`}>
|
|
<i className="uil uil-question-circle mr-2"></i>Centro de Ayuda
|
|
</a>
|
|
<a href="#api" className={`block py-2 text-sm transition-colors ${
|
|
isScrolled
|
|
? 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
|
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600'
|
|
}`}>
|
|
<i className="uil uil-code-branch mr-2"></i>API Docs
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<a href="#contact" className={`block py-2 font-medium transition-colors ${
|
|
isScrolled
|
|
? 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
|
: 'text-slate-700 dark:text-slate-300 hover:text-indigo-600'
|
|
}`}>
|
|
Contacto
|
|
</a>
|
|
|
|
<div className="pt-4 space-y-2 border-t border-slate-200 dark:border-slate-700">
|
|
{/* Theme Switcher Mobile */}
|
|
<button
|
|
onClick={toggleTheme}
|
|
className={`w-full flex items-center justify-between px-4 py-3 rounded-lg transition-colors ${
|
|
isScrolled
|
|
? 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300'
|
|
: 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300'
|
|
}`}
|
|
>
|
|
<span className="font-medium">Tema</span>
|
|
{isDarkMode ? (
|
|
<i className="uil uil-sun text-xl text-yellow-500"></i>
|
|
) : (
|
|
<i className={`uil uil-moon text-xl ${isScrolled ? 'text-slate-700' : 'text-slate-700'}`}></i>
|
|
)}
|
|
</button>
|
|
|
|
<a href="/auth/login" className={`block text-center px-5 py-3 border rounded-lg transition-colors font-medium ${
|
|
isScrolled
|
|
? 'border-indigo-600 text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20'
|
|
: 'border-indigo-600 text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20'
|
|
}`}>
|
|
Iniciar Sesión
|
|
</a>
|
|
<a href="/auth/register" className="block text-center px-5 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors font-medium shadow-lg">
|
|
Empecemos
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default ModernSaasHeader
|