Claude (Beletage)
df35ee6632
Astro 6 + Tailwind 4 + Three.js + GSAP/Lenis stack. - Hero with animated procedural 3D Maramures house silhouette - Six typology sections (Maramures, cula, sasesc, interbelic, comunist, contemporan), each with a low-poly Three.js model and interactive drag-to-rotate - 5-question quiz that recommends a typology, with native + social share - Beletage backlinks throughout: footer, header CTA, dedicated section, quiz result, share strip - Full SEO: dynamic OG image, JSON-LD WebSite/Organization/Article, sitemap (i18n), robots, canonical, hreflang - RO primary, EN landing variant - Romanian-warm palette (terra/wood/sky-mist/bone), Fraunces + Inter fonts - Lazy-init Three scenes via IntersectionObserver, prefers-reduced-motion respected Static output, ready for Cloudflare Pages. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
56 lines
1.9 KiB
Plaintext
56 lines
1.9 KiB
Plaintext
---
|
|
const navItems = [
|
|
{ href: '#poveste', label: 'Povestea' },
|
|
{ href: '#tipologii', label: 'Tipologii' },
|
|
{ href: '#quiz', label: 'Quiz' },
|
|
{ href: '#beletage', label: 'Beletage' },
|
|
];
|
|
---
|
|
|
|
<header
|
|
class="fixed inset-x-0 top-0 z-40 transition-all duration-300"
|
|
data-header
|
|
>
|
|
<div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4 lg:px-12">
|
|
<a href="/" class="group flex items-center gap-2 text-bone-50">
|
|
<span class="grid h-9 w-9 place-items-center rounded-md bg-terra-600/90 font-display text-sm font-bold backdrop-blur transition group-hover:bg-terra-500">2D<span class="text-terra-200">3D</span></span>
|
|
<span class="hidden font-display text-base text-bone-50 sm:inline">Arhitectura României</span>
|
|
</a>
|
|
|
|
<nav class="hidden items-center gap-2 md:flex">
|
|
{navItems.map((item) => (
|
|
<a
|
|
href={item.href}
|
|
class="rounded-full px-4 py-2 text-sm text-bone-50/85 transition hover:bg-bone-50/10 hover:text-bone-50"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<a
|
|
href="https://beletage.ro"
|
|
rel="dofollow"
|
|
class="hidden items-center gap-2 rounded-full bg-bone-50 px-4 py-2 text-sm font-medium text-ink-900 transition hover:bg-terra-200 sm:inline-flex"
|
|
>
|
|
Beletage.ro <span aria-hidden>→</span>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<script>
|
|
const header = document.querySelector('[data-header]') as HTMLElement | null;
|
|
if (header) {
|
|
const onScroll = () => {
|
|
const y = window.scrollY;
|
|
if (y > 80) {
|
|
header.classList.add('bg-wood-900/80', 'backdrop-blur-md', 'border-b', 'border-bone-50/10', 'shadow-lg');
|
|
} else {
|
|
header.classList.remove('bg-wood-900/80', 'backdrop-blur-md', 'border-b', 'border-bone-50/10', 'shadow-lg');
|
|
}
|
|
};
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
|
onScroll();
|
|
}
|
|
</script>
|