Spaces:
Sleeping
Sleeping
File size: 2,330 Bytes
c715979 adb0589 5beb8a2 c715979 5beb8a2 c715979 5beb8a2 c715979 adb0589 c715979 adb0589 c715979 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | import { motion } from 'framer-motion'
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import Logo from './ui/Logo'
import LanguageSwitcher from './LanguageSwitcher'
import './Header.css'
function Header() {
const { t } = useTranslation()
const navLinks = [
{ label: t('header.nav.features'), href: '#features' },
{ label: t('header.nav.howItWorks'), href: '#how-it-works' },
{ label: t('header.nav.privacySecurity'), href: '#privacy' },
{ label: t('header.nav.contact'), href: '#contact' },
]
return (
<motion.header
className="header"
initial={{ y: -100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.8, ease: 'easeOut' }}
>
<div className="header-container">
<Link to="/">
<Logo variant="header" />
</Link>
<nav className="nav">
<ul className="nav-list">
{navLinks.map((link, index) => (
<motion.li
key={link.label}
className="nav-item"
initial={{ y: -20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.1 * index, duration: 0.5 }}
>
<motion.a
href={link.href}
className="nav-link"
whileHover={{ scale: 1.1, color: '#4a7c59' }}
transition={{ type: 'spring', stiffness: 300 }}
>
{link.label}
</motion.a>
</motion.li>
))}
</ul>
</nav>
<motion.div
className="header-actions"
initial={{ x: 100, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{ delay: 0.5, duration: 0.6 }}
>
<LanguageSwitcher />
<motion.div
whileHover={{ scale: 1.08, boxShadow: '0 8px 25px rgba(74, 124, 89, 0.3)' }}
whileTap={{ scale: 0.95 }}
transition={{ type: 'spring', stiffness: 400, damping: 10 }}
>
<Link to="/login" className="book-session-btn">
{t('header.cta')}
</Link>
</motion.div>
</motion.div>
</div>
</motion.header>
)
}
export default Header
|