60 lines
2.4 KiB
TypeScript
60 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
export function BlogHero() {
|
|
const ref = useRef<HTMLElement>(null);
|
|
const t = useTranslations('blogPage');
|
|
|
|
useEffect(() => {
|
|
const section = ref.current;
|
|
if (!section) return;
|
|
section.querySelectorAll<HTMLElement>('.hero-reveal').forEach((el, i) => {
|
|
setTimeout(() => {
|
|
el.style.opacity = '1';
|
|
el.style.transform = 'translateY(0)';
|
|
}, 80 + i * 120);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<section
|
|
ref={ref}
|
|
className="w-full rounded-[10px] bg-brand-brown text-brand-beige flex flex-col overflow-hidden"
|
|
style={{ minHeight: 'clamp(320px, 45vh, 480px)' }}
|
|
>
|
|
<div className="flex flex-col flex-1 items-center justify-center px-8 md:px-14 lg:px-20 text-center py-24">
|
|
<div
|
|
className="hero-reveal mb-6"
|
|
style={{ opacity: 0, transform: 'translateY(20px)', transition: 'opacity 600ms ease, transform 600ms cubic-bezier(0.22,1,0.36,1)' }}
|
|
>
|
|
<span className="inline-flex items-center gap-3 font-sans text-[11px] uppercase tracking-[0.2em] text-brand-beige/45">
|
|
<span className="w-5 h-px bg-brand-beige/30" />
|
|
{t('hero.sectionLabel')}
|
|
<span className="w-5 h-px bg-brand-beige/30" />
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
className="hero-reveal"
|
|
style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
|
|
>
|
|
<h1 className="font-serif text-[clamp(56px,8vw,110px)] leading-none text-brand-beige uppercase">
|
|
{t('hero.title')}
|
|
</h1>
|
|
</div>
|
|
|
|
<div
|
|
className="hero-reveal mt-8"
|
|
style={{ opacity: 0, transform: 'translateY(24px)', transition: 'opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
|
|
>
|
|
<p className="font-sans text-base font-light text-brand-beige/55 max-w-lg leading-relaxed">
|
|
{t('hero.subtitle')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|