replacing elements in page directories
This commit is contained in:
@@ -1,160 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export default function TimelineSection() {
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const t = useTranslations('about');
|
||||
|
||||
const lineTop = '58%';
|
||||
|
||||
const steps = [
|
||||
{
|
||||
title: t('step1.title'),
|
||||
text: t('step1.text'),
|
||||
year: '2019',
|
||||
position: 'top' as const,
|
||||
left: '16%',
|
||||
},
|
||||
{
|
||||
title: t('step2.title'),
|
||||
text: t('step2.text'),
|
||||
year: '2022',
|
||||
position: 'bottom' as const,
|
||||
left: '50%',
|
||||
},
|
||||
{
|
||||
title: t('step3.title'),
|
||||
text: t('step3.text'),
|
||||
year: '2026',
|
||||
position: 'top' as const,
|
||||
left: '84%',
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const section = sectionRef.current;
|
||||
if (!section) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setVisible(true);
|
||||
section.querySelectorAll('.reveal').forEach((el) => el.classList.add('visible'));
|
||||
observer.unobserve(section);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.12 }
|
||||
);
|
||||
|
||||
observer.observe(section);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section id="about" ref={sectionRef} className="w-full py-24 md:py-36 bg-brand-brown/3 rounded-2xl px-6 md:px-12 lg:px-20">
|
||||
{/* Label */}
|
||||
<div className="reveal flex items-center gap-3 mb-6">
|
||||
<span className="w-8 h-px bg-brand-brown/40" />
|
||||
<span className="font-sans text-[11px] uppercase tracking-[0.2em] text-brand-brown/45">{t('sectionLabel')}</span>
|
||||
</div>
|
||||
|
||||
<h2 className="reveal font-serif text-[clamp(48px,7vw,100px)] leading-none text-brand-brown mb-16 md:mb-24">
|
||||
{t('title')}
|
||||
</h2>
|
||||
|
||||
{/* Mobile layout */}
|
||||
<div className="flex flex-col gap-5 md:hidden">
|
||||
{steps.map((step, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="reveal rounded-xl border border-brand-brown/12 border-l-4 border-l-brand-brown bg-white/60 p-6 backdrop-blur-sm"
|
||||
style={{ transitionDelay: `${i * 100}ms` }}
|
||||
>
|
||||
<span className="font-sans text-[11px] uppercase tracking-widest text-brand-brown/40 mb-3 block">{step.year}</span>
|
||||
<h3 className="font-serif text-2xl text-brand-brown mb-3">{step.title}</h3>
|
||||
<p className="font-sans text-sm leading-relaxed text-brand-brown/65">{step.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Desktop timeline */}
|
||||
<div className="hidden md:block relative h-[440px]">
|
||||
{/* Background track */}
|
||||
<div
|
||||
className="absolute left-0 right-0 h-px bg-brand-brown/12 rounded-full"
|
||||
style={{ top: lineTop }}
|
||||
/>
|
||||
|
||||
{/* Animated progress line */}
|
||||
<div
|
||||
className="absolute left-0 h-px bg-brand-brown/50 rounded-full"
|
||||
style={{
|
||||
top: lineTop,
|
||||
width: visible ? '95%' : '0%',
|
||||
transition: 'width 1400ms cubic-bezier(0.22, 1, 0.36, 1)',
|
||||
transitionDelay: '200ms',
|
||||
}}
|
||||
/>
|
||||
|
||||
{steps.map((step, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute -translate-x-1/2"
|
||||
style={{ left: step.left, top: lineTop }}
|
||||
>
|
||||
{/* Dot */}
|
||||
<div
|
||||
className="absolute left-1/2 -translate-x-1/2 -translate-y-1/2"
|
||||
style={{ top: 0 }}
|
||||
>
|
||||
<div
|
||||
className="h-4 w-4 rounded-full border-2 border-brand-beige bg-brand-brown shadow-[0_0_0_3px_rgba(44,30,22,0.2)]"
|
||||
style={{
|
||||
opacity: visible ? 1 : 0,
|
||||
transform: visible ? 'scale(1)' : 'scale(0)',
|
||||
transition: 'opacity 400ms ease, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1)',
|
||||
transitionDelay: `${600 + i * 200}ms`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Year label */}
|
||||
<div
|
||||
className="absolute left-1/2 -translate-x-1/2 font-sans text-[10px] uppercase tracking-widest text-brand-brown/35"
|
||||
style={{
|
||||
[step.position === 'top' ? 'top' : 'bottom']: '18px',
|
||||
opacity: visible ? 1 : 0,
|
||||
transition: 'opacity 400ms ease',
|
||||
transitionDelay: `${800 + i * 200}ms`,
|
||||
}}
|
||||
>
|
||||
{step.year}
|
||||
</div>
|
||||
|
||||
{/* Card */}
|
||||
<div
|
||||
className={[
|
||||
'absolute left-1/2 w-[260px] -translate-x-1/2 rounded-xl border border-brand-brown/12 border-l-4 border-l-brand-brown bg-white/80 p-5 text-left shadow-sm backdrop-blur-sm',
|
||||
step.position === 'top' ? 'bottom-10' : 'top-10',
|
||||
].join(' ')}
|
||||
style={{
|
||||
opacity: visible ? 1 : 0,
|
||||
transform: visible
|
||||
? 'translateY(0)'
|
||||
: step.position === 'top' ? 'translateY(10px)' : 'translateY(-10px)',
|
||||
transition: 'opacity 600ms ease, transform 600ms cubic-bezier(0.22,1,0.36,1)',
|
||||
transitionDelay: `${700 + i * 180}ms`,
|
||||
}}
|
||||
>
|
||||
<h3 className="font-serif text-xl text-brand-brown mb-2">{step.title}</h3>
|
||||
<p className="font-sans text-sm leading-relaxed text-brand-brown/65">{step.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect } from 'react';
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export default function ApproachSection() {
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
const t = useTranslations('approach');
|
||||
|
||||
const features = [
|
||||
{
|
||||
imagePath: '/icons/brain.svg',
|
||||
title: t('feature1.title'),
|
||||
text: t('feature1.text'),
|
||||
},
|
||||
{
|
||||
imagePath: '/icons/building.svg',
|
||||
title: t('feature2.title'),
|
||||
text: t('feature2.text'),
|
||||
},
|
||||
{
|
||||
imagePath: '/icons/people.svg',
|
||||
title: t('feature3.title'),
|
||||
text: t('feature3.text'),
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const section = sectionRef.current;
|
||||
if (!section) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.querySelectorAll('.reveal').forEach((el) => {
|
||||
el.classList.add('visible');
|
||||
});
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.15 }
|
||||
);
|
||||
|
||||
observer.observe(section);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section ref={sectionRef} className="w-full py-24 md:py-36">
|
||||
{/* Section label */}
|
||||
<div className="reveal flex items-center gap-3 mb-12 md:mb-16">
|
||||
<span className="w-8 h-px bg-brand-brown/40" />
|
||||
<span className="font-sans text-[11px] uppercase tracking-[0.2em] text-brand-brown/45">{t('sectionLabel')}</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-6 lg:gap-16">
|
||||
{features.map((feature, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="reveal group flex flex-col items-center p-8 rounded-2xl border border-brand-brown/8 bg-white/40 hover:bg-white/70 hover:border-brand-brown/15 transition-all duration-300 cursor-default"
|
||||
style={{ transitionDelay: `${i * 120}ms` }}
|
||||
>
|
||||
{/* Icon container */}
|
||||
<div className="w-20 h-20 rounded-2xl bg-brand-brown/5 flex items-center justify-center mb-6 group-hover:bg-brand-brown/8 transition-colors duration-300">
|
||||
<img className="w-10 h-10" src={feature.imagePath} alt="" aria-hidden="true" />
|
||||
</div>
|
||||
|
||||
<div className="font-serif text-brand-brown text-center leading-[1.1] text-[clamp(1.4rem,2.2vw,1.65rem)] mb-4">
|
||||
{feature.title}
|
||||
</div>
|
||||
|
||||
<div className="font-sans text-sm text-center text-brand-brown/60 leading-relaxed">
|
||||
{feature.text}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,139 +0,0 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
@@ -1,237 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Article } from '@/lib/blog/types';
|
||||
|
||||
type props = {
|
||||
locale: string;
|
||||
articles: Article[];
|
||||
};
|
||||
|
||||
function FeaturedCover({ cover, title, category }: { cover?: string; title: string; category: string }) {
|
||||
const [hidden, setHidden] = useState(false);
|
||||
if (!cover || hidden) return null;
|
||||
return (
|
||||
<div className="relative w-full md:w-[58%] h-64 md:h-auto overflow-hidden flex-shrink-0">
|
||||
<Image src={cover} alt={title} fill className="object-cover group-hover:scale-105 transition-transform duration-700 ease-out" onError={() => setHidden(true)} />
|
||||
<div className="absolute top-5 left-5">
|
||||
<span className="bg-brand-beige/90 backdrop-blur-sm font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/60 px-3 py-1.5 rounded-full">
|
||||
{category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MediumCover({ cover, title, category }: { cover?: string; title: string; category: string }) {
|
||||
const [hidden, setHidden] = useState(false);
|
||||
if (!cover || hidden) return null;
|
||||
return (
|
||||
<div className="relative h-52 overflow-hidden flex-shrink-0">
|
||||
<Image src={cover} alt={title} fill className="object-cover group-hover:scale-105 transition-transform duration-700 ease-out" onError={() => setHidden(true)} />
|
||||
<div className="absolute top-4 left-4">
|
||||
<span className="bg-brand-beige/90 backdrop-blur-sm font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/60 px-3 py-1.5 rounded-full">
|
||||
{category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ThumbnailCover({ cover, title }: { cover?: string; title: string }) {
|
||||
const [hidden, setHidden] = useState(false);
|
||||
if (!cover || hidden) return null;
|
||||
return (
|
||||
<div className="relative w-full sm:w-24 h-16 sm:h-16 rounded-[4px] overflow-hidden flex-shrink-0">
|
||||
<Image src={cover} alt={title} fill className="object-cover group-hover:scale-105 transition-transform duration-500" onError={() => setHidden(true)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ArticleList({ locale, articles }: props) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const t = useTranslations('blogPage');
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
el.querySelectorAll('.reveal').forEach((node, i) => {
|
||||
setTimeout(() => node.classList.add('visible'), i * 100);
|
||||
});
|
||||
observer.unobserve(el);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.05 }
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
if (!articles.length) {
|
||||
return (
|
||||
<section className="py-24 px-8 md:px-14 lg:px-20 text-center">
|
||||
<p className="font-sans text-sm text-brand-brown/40">{t('noArticles')}</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const formatDate = (dateStr: string) =>
|
||||
new Date(dateStr).toLocaleDateString(locale === 'fr' ? 'fr-FR' : 'en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
|
||||
const [featured, ...rest] = articles;
|
||||
const secondRow = rest.slice(0, 2);
|
||||
const remaining = rest.slice(2);
|
||||
|
||||
return (
|
||||
<section ref={ref} className="py-20 px-8 md:px-14 lg:px-20 max-w-[1100px] mx-auto">
|
||||
<div className="flex flex-col gap-5">
|
||||
|
||||
{/* Featured — most recent article, full width */}
|
||||
<Link
|
||||
href={`/${locale}/blog/${featured.slug}`}
|
||||
className="reveal group relative overflow-hidden rounded-[8px] border border-brand-brown/10 flex flex-col md:flex-row cursor-pointer"
|
||||
>
|
||||
<FeaturedCover cover={featured.cover} title={featured.title} category={featured.category} />
|
||||
|
||||
<div className="flex-1 flex flex-col justify-between p-8 md:p-12 bg-brand-beige">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
|
||||
{formatDate(featured.date)}
|
||||
</span>
|
||||
{featured.readTime && (
|
||||
<>
|
||||
<span className="w-1 h-1 rounded-full bg-brand-brown/20" />
|
||||
<span className="font-sans text-[10px] text-brand-brown/30">
|
||||
{featured.readTime}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="font-serif text-[clamp(20px,2.2vw,32px)] leading-tight text-brand-brown uppercase mb-5 group-hover:opacity-70 transition-opacity duration-200">
|
||||
{featured.title}
|
||||
</h2>
|
||||
<p className="font-sans text-sm text-brand-brown/55 leading-relaxed line-clamp-3">
|
||||
{featured.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 font-sans text-xs uppercase tracking-[0.15em] text-brand-brown/40 group-hover:text-brand-brown transition-colors duration-200 mt-8">
|
||||
{t('readArticle')}
|
||||
<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="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Second row — 2 medium cards */}
|
||||
{secondRow.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
{secondRow.map((article, i) => (
|
||||
<Link
|
||||
key={article.slug}
|
||||
href={`/${locale}/blog/${article.slug}`}
|
||||
className="reveal group overflow-hidden rounded-[8px] border border-brand-brown/10 flex flex-col cursor-pointer bg-brand-beige"
|
||||
style={{ transitionDelay: `${(i + 1) * 80}ms` }}
|
||||
>
|
||||
<MediumCover cover={article.cover} title={article.title} category={article.category} />
|
||||
|
||||
<div className="flex flex-col flex-1 justify-between p-7">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
|
||||
{formatDate(article.date)}
|
||||
</span>
|
||||
{article.readTime && (
|
||||
<>
|
||||
<span className="w-1 h-1 rounded-full bg-brand-brown/20" />
|
||||
<span className="font-sans text-[10px] text-brand-brown/30">
|
||||
{article.readTime}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="font-serif text-[clamp(18px,2.2vw,26px)] leading-tight text-brand-brown uppercase mb-3 group-hover:opacity-70 transition-opacity duration-200">
|
||||
{article.title}
|
||||
</h2>
|
||||
<p className="font-sans text-sm text-brand-brown/55 leading-relaxed line-clamp-2">
|
||||
{article.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 font-sans text-xs uppercase tracking-[0.15em] text-brand-brown/40 group-hover:text-brand-brown transition-colors duration-200 mt-6">
|
||||
{t('readArticle')}
|
||||
<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="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Remaining — compact horizontal list */}
|
||||
{remaining.length > 0 && (
|
||||
<div className="rounded-[8px] border border-brand-brown/10 overflow-hidden bg-brand-beige divide-y divide-brand-brown/8">
|
||||
{remaining.map((article, i) => (
|
||||
<Link
|
||||
key={article.slug}
|
||||
href={`/${locale}/blog/${article.slug}`}
|
||||
className="reveal group flex flex-col sm:flex-row sm:items-center gap-5 p-6 md:p-7 hover:bg-brand-brown/3 transition-colors duration-200 cursor-pointer"
|
||||
style={{ transitionDelay: `${(i + 3) * 80}ms` }}
|
||||
>
|
||||
<ThumbnailCover cover={article.cover} title={article.title} />
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-1.5">
|
||||
<span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
|
||||
{article.category}
|
||||
</span>
|
||||
<span className="w-1 h-1 rounded-full bg-brand-brown/20" />
|
||||
<span className="font-sans text-[10px] text-brand-brown/30">
|
||||
{formatDate(article.date)}
|
||||
</span>
|
||||
{article.readTime && (
|
||||
<>
|
||||
<span className="w-1 h-1 rounded-full bg-brand-brown/20" />
|
||||
<span className="font-sans text-[10px] text-brand-brown/30">
|
||||
{article.readTime}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="font-serif text-[clamp(16px,1.8vw,20px)] leading-tight text-brand-brown uppercase mb-1 group-hover:opacity-70 transition-opacity duration-200">
|
||||
{article.title}
|
||||
</h2>
|
||||
<p className="font-sans text-sm text-brand-brown/50 leading-relaxed line-clamp-1">
|
||||
{article.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 font-sans text-xs uppercase tracking-[0.15em] text-brand-brown/40 group-hover:text-brand-brown transition-colors duration-200 flex-shrink-0">
|
||||
{t('readArticle')}
|
||||
<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="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
type props = {
|
||||
items: string[];
|
||||
};
|
||||
|
||||
export function ArticleSummary({ items }: props) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const t = useTranslations('blogPage');
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
el.querySelectorAll('.reveal').forEach((node, i) => {
|
||||
setTimeout(() => node.classList.add('visible'), i * 80);
|
||||
});
|
||||
observer.unobserve(el);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div ref={ref} className="mb-14 border border-brand-brown/12 rounded-xl p-8 bg-brand-brown/[0.03]">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<span className="w-5 h-px bg-brand-brown/30" />
|
||||
<span className="font-sans text-[10px] uppercase tracking-[0.22em] text-brand-brown/40">
|
||||
{t('summary.label')}
|
||||
</span>
|
||||
</div>
|
||||
<ol className="flex flex-col gap-3">
|
||||
{items.map((item, i) => (
|
||||
<li key={i} className="reveal flex items-baseline gap-4" style={{ transitionDelay: `${i * 60}ms` }}>
|
||||
<span className="font-serif text-base text-brand-brown/25 tabular-nums flex-shrink-0 w-4 text-right">
|
||||
{String(i + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<span className="font-sans text-sm text-brand-brown/65 leading-relaxed">
|
||||
{item}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
@@ -1,140 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export default function HeroSection() {
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
const t = useTranslations('hero');
|
||||
|
||||
useEffect(() => {
|
||||
const section = sectionRef.current;
|
||||
if (!section) return;
|
||||
|
||||
const items = section.querySelectorAll<HTMLElement>('.hero-reveal');
|
||||
items.forEach((el, i) => {
|
||||
setTimeout(() => {
|
||||
el.style.opacity = '1';
|
||||
el.style.transform = 'translateY(0)';
|
||||
}, 120 + i * 110);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section
|
||||
id="home"
|
||||
ref={sectionRef}
|
||||
className="w-full min-h-[calc(100vh-(2*11px))] rounded-[10px] bg-brand-brown text-brand-beige flex flex-col overflow-hidden relative"
|
||||
>
|
||||
{/* Spacer: clears the fixed header (~91px) + mirrors the bottom bar height (~52px)
|
||||
so justify-center lands on the visual centre of the viewport below the header */}
|
||||
<div className="shrink-0" style={{ height: 'clamp(120px, 15vh, 160px)' }} />
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex flex-col lg:flex-row flex-1 items-center px-8 md:px-14 lg:px-20 gap-10 lg:gap-0">
|
||||
|
||||
{/* Left — editorial text */}
|
||||
<div className="flex flex-col justify-center lg:w-[55%] lg:pr-12 gap-8 lg:gap-10">
|
||||
|
||||
{/* Label */}
|
||||
<div
|
||||
className="hero-reveal"
|
||||
style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 font-sans text-xs uppercase tracking-[0.2em] text-brand-beige/50">
|
||||
<span className="w-6 h-px bg-brand-beige/30" />
|
||||
{t('sectionLabel')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Headline */}
|
||||
<div
|
||||
className="hero-reveal"
|
||||
style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
|
||||
>
|
||||
<h1 className="font-serif leading-[0.95] text-[clamp(36px,5.5vw,88px)] text-brand-beige">
|
||||
{t('title')}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div
|
||||
className="hero-reveal"
|
||||
style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
|
||||
>
|
||||
<p className="font-sans text-base font-light text-brand-beige/60 max-w-md leading-relaxed">
|
||||
{t('subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<div
|
||||
className="hero-reveal"
|
||||
style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
|
||||
>
|
||||
<a
|
||||
href="/#works"
|
||||
className="group inline-flex items-center gap-2 font-sans text-sm text-brand-beige/80 hover:text-brand-beige transition-colors duration-200 cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
document.getElementById('works')?.scrollIntoView({ behavior: 'smooth' });
|
||||
}}
|
||||
>
|
||||
<span className="relative">
|
||||
{t('cta')}
|
||||
<span className="absolute bottom-0 left-0 w-full h-px bg-brand-beige/40 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300" />
|
||||
</span>
|
||||
<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="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right — portrait */}
|
||||
<div
|
||||
className="hero-reveal relative flex items-center justify-center lg:w-[45%]"
|
||||
style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 900ms cubic-bezier(0.22,1,0.36,1), transform 900ms cubic-bezier(0.22,1,0.36,1)' }}
|
||||
>
|
||||
<div className="relative rounded-[10px] overflow-hidden" style={{ width: 'clamp(260px, 32vw, 420px)', height: 'clamp(320px, 40vw, 520px)' }}>
|
||||
<img
|
||||
src="/images/pofile.png"
|
||||
alt="Mathéo Guilbert, développeur Full Stack"
|
||||
className="w-full h-full object-cover object-top"
|
||||
style={{ filter: 'sepia(8%) brightness(0.95) contrast(1.02)' }}
|
||||
/>
|
||||
{/* Subtle vignette */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-brand-brown/30 via-transparent to-transparent pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom bar — scroll indicator */}
|
||||
<div className="flex justify-center items-center px-8 md:px-14 lg:px-20 pb-8">
|
||||
|
||||
{/* Scroll arrow */}
|
||||
<div
|
||||
className="hero-reveal flex flex-col items-center gap-1.5 text-brand-beige/40"
|
||||
style={{
|
||||
opacity: 0,
|
||||
transform: 'translateY(28px)',
|
||||
transition: 'opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1)',
|
||||
animationDelay: '1s'
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
type props = {
|
||||
locale: string;
|
||||
projects: {
|
||||
slug: string;
|
||||
title: string;
|
||||
description: string;
|
||||
cover: string;
|
||||
}[];
|
||||
};
|
||||
|
||||
export function OtherProjects({ locale, projects }: props) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const t = useTranslations('projectPage.otherProjects');
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
el.querySelectorAll('.reveal').forEach((node, i) => {
|
||||
setTimeout(() => node.classList.add('visible'), i * 120);
|
||||
});
|
||||
observer.unobserve(el);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
if (!projects.length) return null;
|
||||
|
||||
return (
|
||||
<section ref={ref} className="pt-6 pb-20">
|
||||
{/* Divider */}
|
||||
<div className="w-full h-px bg-brand-brown/10 mb-14" />
|
||||
|
||||
{/* Label */}
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<span className="w-6 h-px bg-brand-brown/40" />
|
||||
<span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
|
||||
{t('sectionLabel')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 className="reveal font-serif text-[clamp(48px,6vw,80px)] leading-none text-brand-brown mb-12">
|
||||
{t('title')}
|
||||
</h2>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{projects.map((project, i) => (
|
||||
<Link
|
||||
key={project.slug}
|
||||
href={`/${locale}/works/${project.slug}`}
|
||||
className="reveal group block cursor-pointer"
|
||||
style={{ transitionDelay: `${i * 100}ms` }}
|
||||
>
|
||||
{/* Image */}
|
||||
<div className="w-full h-[240px] rounded-xl overflow-hidden bg-brand-brown/5 mb-5">
|
||||
<img
|
||||
src={project.cover}
|
||||
alt={project.title}
|
||||
className="w-full h-full object-cover transition-all duration-700 group-hover:scale-[1.04] group-hover:brightness-105"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Text */}
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="font-serif text-2xl text-brand-brown uppercase mb-1.5">
|
||||
{project.title}
|
||||
</h3>
|
||||
<p className="font-sans text-sm text-brand-brown/55 leading-relaxed">
|
||||
{project.description}
|
||||
</p>
|
||||
</div>
|
||||
<svg
|
||||
className="w-5 h-5 text-brand-brown/30 flex-shrink-0 mt-1 group-hover:translate-x-1 group-hover:text-brand-brown/60 transition-all duration-200"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,130 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
type props = {
|
||||
title: string;
|
||||
description: string;
|
||||
dateLabel: string;
|
||||
locale: string;
|
||||
cover?: string;
|
||||
};
|
||||
|
||||
export function ProjectHero({ title, description, dateLabel, locale, cover }: props) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const t = useTranslations('projectPage.hero');
|
||||
|
||||
useEffect(() => {
|
||||
const section = ref.current;
|
||||
if (!section) return;
|
||||
const items = section.querySelectorAll<HTMLElement>('.hero-reveal');
|
||||
items.forEach((el, i) => {
|
||||
setTimeout(() => {
|
||||
el.style.opacity = '1';
|
||||
el.style.transform = 'translateY(0)';
|
||||
}, 80 + i * 100);
|
||||
});
|
||||
}, []);
|
||||
|
||||
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"
|
||||
>
|
||||
{/* Background cover image */}
|
||||
{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>
|
||||
)}
|
||||
|
||||
{/* Top zone: clears the fixed header (~91px) + anchors the back link */}
|
||||
<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}#works`}
|
||||
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 cursor-pointer"
|
||||
>
|
||||
<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('backToProjects')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content — centred in the remaining visible area */}
|
||||
<div className="relative z-10 flex flex-col flex-1 items-center justify-center px-8 md:px-14 lg:px-20 text-center">
|
||||
{/* Category pill */}
|
||||
<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-2 font-sans text-[11px] uppercase tracking-[0.2em] text-brand-beige/45">
|
||||
<span className="w-5 h-px bg-brand-beige/30" />
|
||||
{dateLabel}
|
||||
<span className="w-5 h-px bg-brand-beige/30" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<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(40px,6vw,96px)] leading-[0.92] text-brand-beige max-w-4xl uppercase">
|
||||
{title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<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>
|
||||
|
||||
{/* Scroll indicator */}
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect } from 'react';
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
type props = {
|
||||
dateLabel: string;
|
||||
category: string;
|
||||
roles: string[];
|
||||
client: string;
|
||||
};
|
||||
|
||||
function MetaItem({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
|
||||
{label}
|
||||
</span>
|
||||
<div className="font-sans text-sm text-brand-brown/80 leading-relaxed">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProjectMeta({ dateLabel, category, roles, client }: props) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const t = useTranslations('projectPage.meta');
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
el.classList.add('visible');
|
||||
observer.unobserve(el);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.2 }
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section ref={ref} className="reveal py-12 md:py-16">
|
||||
{/* Top divider */}
|
||||
<div className="w-full h-px bg-brand-brown/10 mb-10" />
|
||||
|
||||
<div className="grid grid-cols-2 gap-8 md:grid-cols-4 md:gap-12">
|
||||
<MetaItem label={t('year')}>{dateLabel}</MetaItem>
|
||||
<MetaItem label={t('category')}>{category}</MetaItem>
|
||||
<MetaItem label={t('roles')}>
|
||||
<div className="flex flex-col gap-1">
|
||||
{roles.map((role) => (
|
||||
<span key={role}>{role}</span>
|
||||
))}
|
||||
</div>
|
||||
</MetaItem>
|
||||
<MetaItem label={t('client')}>{client}</MetaItem>
|
||||
</div>
|
||||
|
||||
{/* Bottom divider */}
|
||||
<div className="w-full h-px bg-brand-brown/10 mt-10" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect } from 'react';
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
type props = {
|
||||
technologies: string[];
|
||||
};
|
||||
|
||||
export function ProjectTechnologies({ technologies }: props) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const t = useTranslations('projectPage.technologies');
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
el.querySelectorAll('.reveal').forEach((node, i) => {
|
||||
setTimeout(() => node.classList.add('visible'), i * 60);
|
||||
});
|
||||
observer.unobserve(el);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.2 }
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section ref={ref} className="pb-14">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<span className="w-6 h-px bg-brand-brown/40" />
|
||||
<span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
|
||||
{t('sectionLabel')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2.5">
|
||||
{technologies.map((tech) => (
|
||||
<span
|
||||
key={tech}
|
||||
className="reveal font-sans text-xs uppercase tracking-[0.12em] text-brand-brown/70 border border-brand-brown/20 rounded-full px-4 py-1.5 hover:border-brand-brown/50 hover:text-brand-brown transition-colors duration-200 cursor-default"
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect } from 'react';
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import { Project } from "@/lib/projects/types";
|
||||
import { ProjectCard } from "../ui/ProjectCard";
|
||||
|
||||
type props = {
|
||||
projects: Project[];
|
||||
locale: string;
|
||||
};
|
||||
|
||||
export default function WorksSection({ projects, locale }: props) {
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
const t = useTranslations('works');
|
||||
|
||||
useEffect(() => {
|
||||
const section = sectionRef.current;
|
||||
if (!section) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.querySelectorAll('.reveal').forEach((el, i) => {
|
||||
setTimeout(() => el.classList.add('visible'), i * 120);
|
||||
});
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.08 }
|
||||
);
|
||||
|
||||
observer.observe(section);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section id="works" ref={sectionRef} className="w-full flex flex-col items-start justify-start pt-20 md:pt-28">
|
||||
{/* Section label */}
|
||||
<div className="reveal flex items-center gap-3 mb-4">
|
||||
<span className="w-8 h-px bg-brand-brown/40" />
|
||||
<span className="font-sans text-[11px] uppercase tracking-[0.2em] text-brand-brown/45">{t('sectionLabel')}</span>
|
||||
</div>
|
||||
|
||||
<h2 className="reveal font-serif text-[clamp(56px,8vw,112px)] text-brand-brown leading-none mb-12 md:mb-16">
|
||||
{t('title')}
|
||||
</h2>
|
||||
|
||||
<div className="w-full">
|
||||
{projects.map((project, index) => (
|
||||
<ProjectCard
|
||||
key={project.slug}
|
||||
project={project}
|
||||
locale={locale}
|
||||
isTheLast={index === projects.length - 1}
|
||||
index={index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user