blog

2026-04-17 12:02:41 +02:00
parent 1899335e60
commit 3c8dbade41
12 changed files with 595 additions and 1 deletions
@@ -0,0 +1,59 @@
+'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>
+    );
+}