100 lines
3.6 KiB
TypeScript
100 lines
3.6 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { useState } from 'react'
|
|
import LanguageSwitcher from '@/components/LanguageSwitcher'
|
|
import SeoIcon from '@/components/seo/SeoIcon'
|
|
import type { Lang } from '@/lib/i18n'
|
|
import { localeHome } from '@/lib/localeRoutes'
|
|
import { seoTemplateCopy } from '@/lib/seoTemplateCopy'
|
|
|
|
interface SeoNavbarProps {
|
|
locale: Lang
|
|
methodologyHref?: '#methodology' | '#comparison'
|
|
showDevelopers?: boolean
|
|
}
|
|
|
|
export default function SeoNavbar({ locale, methodologyHref = '#methodology', showDevelopers = false }: SeoNavbarProps) {
|
|
const [menuOpen, setMenuOpen] = useState(false)
|
|
const copy = seoTemplateCopy[locale]
|
|
|
|
const links = [
|
|
{ href: '#advantage', label: copy.nav.features },
|
|
{ href: methodologyHref, label: copy.nav.tech },
|
|
{ href: '#faq', label: copy.nav.faq },
|
|
{ href: methodologyHref, label: copy.nav.how },
|
|
...(showDevelopers ? [{ href: '/developers', label: 'Developers' }] : []),
|
|
{ href: '/support', label: copy.nav.support },
|
|
]
|
|
|
|
return (
|
|
<nav className="fixed top-0 w-full z-50 bg-ink text-white border-b border-ink-line">
|
|
<div className="flex justify-between items-center px-6 py-4 max-w-[1200px] mx-auto">
|
|
<Link
|
|
href={localeHome[locale]}
|
|
className="font-display text-2xl font-bold tracking-widest text-white"
|
|
aria-label="GreenLens Home"
|
|
>
|
|
GREENLENS
|
|
</Link>
|
|
|
|
{/* Desktop */}
|
|
<div className="hidden lg:flex items-center gap-6">
|
|
{links.map((link) =>
|
|
link.href.startsWith('#') ? (
|
|
<a key={link.label} className="text-white/80 hover:text-white transition-colors text-sm font-semibold" href={link.href}>
|
|
{link.label}
|
|
</a>
|
|
) : (
|
|
<Link key={link.label} className="text-white/80 hover:text-white transition-colors text-sm font-semibold" href={link.href}>
|
|
{link.label}
|
|
</Link>
|
|
),
|
|
)}
|
|
<div className="ml-2">
|
|
<LanguageSwitcher variant="seo" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<a
|
|
className="hidden md:inline-flex bg-white text-ink px-6 py-2 rounded-full font-bold shadow-lg hover:bg-gray-200 transition-colors duration-300"
|
|
href="#download"
|
|
>
|
|
{copy.nav.download}
|
|
</a>
|
|
<button
|
|
className="lg:hidden text-white p-2"
|
|
aria-label={menuOpen ? 'Close menu' : 'Open menu'}
|
|
aria-expanded={menuOpen}
|
|
onClick={() => setMenuOpen((open) => !open)}
|
|
>
|
|
<SeoIcon name={menuOpen ? 'close' : 'menu'} className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile */}
|
|
{menuOpen && (
|
|
<div className="lg:hidden bg-ink border-t border-ink-line px-6 py-6 flex flex-col gap-4">
|
|
{links.map((link) =>
|
|
link.href.startsWith('#') ? (
|
|
<a key={link.label} className="text-white/80 hover:text-white text-sm font-semibold" href={link.href} onClick={() => setMenuOpen(false)}>
|
|
{link.label}
|
|
</a>
|
|
) : (
|
|
<Link key={link.label} className="text-white/80 hover:text-white text-sm font-semibold" href={link.href} onClick={() => setMenuOpen(false)}>
|
|
{link.label}
|
|
</Link>
|
|
),
|
|
)}
|
|
<a className="text-white/80 hover:text-white text-sm font-semibold" href="#download" onClick={() => setMenuOpen(false)}>
|
|
{copy.nav.download}
|
|
</a>
|
|
<LanguageSwitcher variant="seo" />
|
|
</div>
|
|
)}
|
|
</nav>
|
|
)
|
|
}
|