140 lines
6.0 KiB
TypeScript
140 lines
6.0 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef } from 'react';
|
|
import Link from 'next/link';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
type props = {
|
|
locale: string;
|
|
title: string;
|
|
description: string;
|
|
category: string;
|
|
date: string;
|
|
readTime?: string;
|
|
cover?: string;
|
|
};
|
|
|
|
export function ArticleHero({ locale, title, description, category, date, readTime, cover }: props) {
|
|
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 * 100);
|
|
});
|
|
}, []);
|
|
|
|
const formatted = new Date(date).toLocaleDateString(locale === 'fr' ? 'fr-FR' : 'en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
});
|
|
|
|
return (
|
|
<section
|
|
ref={ref}
|
|
className="w-full min-h-[calc(100vh-(2*11px))] rounded-[10px] bg-brand-brown text-brand-beige flex flex-col overflow-hidden relative"
|
|
>
|
|
{cover && (
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<img
|
|
src={cover}
|
|
alt=""
|
|
aria-hidden="true"
|
|
className="w-full h-full object-cover opacity-[0.08]"
|
|
style={{ filter: 'grayscale(100%)' }}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-brand-brown/60 via-brand-brown/40 to-brand-brown/90" />
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className="relative z-10 shrink-0 flex items-end px-8 md:px-14 lg:px-20 pb-4"
|
|
style={{ height: 'clamp(120px, 15vh, 160px)' }}
|
|
>
|
|
<div
|
|
className="hero-reveal"
|
|
style={{ opacity: 0, transform: 'translateY(20px)', transition: 'opacity 500ms ease, transform 500ms cubic-bezier(0.22,1,0.36,1)' }}
|
|
>
|
|
<Link
|
|
href={`/${locale}/blog`}
|
|
className="group inline-flex items-center gap-2 font-sans text-xs uppercase tracking-[0.18em] text-brand-beige/50 hover:text-brand-beige transition-colors duration-200"
|
|
>
|
|
<svg className="w-4 h-4 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16l-4-4m0 0l4-4m-4 4h18" />
|
|
</svg>
|
|
{t('backToBlog')}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative z-10 flex flex-col flex-1 items-center justify-center px-8 md:px-14 lg:px-20 text-center">
|
|
<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" />
|
|
{category}
|
|
{readTime && (
|
|
<>
|
|
<span className="w-1 h-1 rounded-full bg-brand-beige/20" />
|
|
{readTime}
|
|
</>
|
|
)}
|
|
<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(36px,5.5vw,88px)] leading-[0.92] text-brand-beige max-w-4xl uppercase">
|
|
{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-xl leading-relaxed">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className="hero-reveal mt-6"
|
|
style={{ opacity: 0, transform: 'translateY(20px)', transition: 'opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
|
|
>
|
|
<span className="font-sans text-xs text-brand-beige/30 tracking-wide">
|
|
{formatted}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative z-10 flex justify-center pb-8 text-brand-beige/30">
|
|
<div className="flex flex-col items-center gap-1.5">
|
|
<span className="font-sans text-[10px] uppercase tracking-[0.15em]">{t('scrollPrompt')}</span>
|
|
<svg
|
|
className="w-4 h-4"
|
|
style={{ animation: 'arrowBounce 1.8s ease-in-out infinite' }}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
aria-hidden="true"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|