406 lines
22 KiB
TypeScript
406 lines
22 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { ProjectCard } from '@/components/ui/ProjectCard';
|
|
import { ContactFormModal } from '@/components/ui/ContactFormModal';
|
|
import { Project } from '@/lib/projects/types';
|
|
|
|
type props = {
|
|
projects: Project[];
|
|
locale: string;
|
|
};
|
|
|
|
export default function FreelanceClient({ projects, locale }: props) {
|
|
const t = useTranslations('freelancePage');
|
|
|
|
const [contactOpen, setContactOpen] = useState(false);
|
|
|
|
const heroRef = useRef<HTMLElement>(null);
|
|
const belowFoldRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const section = heroRef.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);
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const container = belowFoldRef.current;
|
|
if (!container) return;
|
|
|
|
const sections = container.querySelectorAll<HTMLElement>('[data-reveal-section]');
|
|
const observers: IntersectionObserver[] = [];
|
|
|
|
sections.forEach((section) => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.querySelectorAll<HTMLElement>('.reveal').forEach((el, i) => {
|
|
setTimeout(() => el.classList.add('visible'), i * 100);
|
|
});
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.1 }
|
|
);
|
|
observer.observe(section);
|
|
observers.push(observer);
|
|
});
|
|
|
|
return () => observers.forEach((o) => o.disconnect());
|
|
}, []);
|
|
|
|
const needs = [
|
|
{ title: t('needs.item1Title'), text: t('needs.item1Text') },
|
|
{ title: t('needs.item2Title'), text: t('needs.item2Text') },
|
|
{ title: t('needs.item3Title'), text: t('needs.item3Text') },
|
|
{ title: t('needs.item4Title'), text: t('needs.item4Text') },
|
|
];
|
|
|
|
const services = [
|
|
{
|
|
title: t('services.service1Title'),
|
|
desc: t('services.service1Desc'),
|
|
ideal: t('services.service1Ideal'),
|
|
examples: t('services.service1Examples').split(' · '),
|
|
},
|
|
{
|
|
title: t('services.service2Title'),
|
|
desc: t('services.service2Desc'),
|
|
ideal: t('services.service2Ideal'),
|
|
examples: t('services.service2Examples').split(' · '),
|
|
},
|
|
{
|
|
title: t('services.service3Title'),
|
|
desc: t('services.service3Desc'),
|
|
ideal: t('services.service3Ideal'),
|
|
examples: t('services.service3Examples').split(' · '),
|
|
},
|
|
];
|
|
|
|
const methodSteps = Array.from({ length: 5 }, (_, i) => ({
|
|
title: t(`method.step${i + 1}Title`),
|
|
text: t(`method.step${i + 1}Text`),
|
|
}));
|
|
|
|
const whyArgs = Array.from({ length: 4 }, (_, i) => ({
|
|
title: t(`why.arg${i + 1}Title`),
|
|
text: t(`why.arg${i + 1}Text`),
|
|
}));
|
|
|
|
const heroCards = [
|
|
{ num: '01', label: t('hero.card1Label') },
|
|
{ num: '02', label: t('hero.card2Label') },
|
|
{ num: '03', label: t('hero.card3Label') },
|
|
];
|
|
|
|
return (
|
|
<main className="bg-brand-beige text-brand-brown flex flex-col">
|
|
<ContactFormModal isOpen={contactOpen} onClose={() => setContactOpen(false)} />
|
|
|
|
{/* ── Hero ── */}
|
|
<section
|
|
ref={heroRef}
|
|
className="w-full min-h-[calc(100vh-(2*11px))] rounded-[10px] bg-brand-brown text-brand-beige flex flex-col overflow-hidden"
|
|
>
|
|
<div className="shrink-0" style={{ height: 'clamp(120px, 15vh, 160px)' }} />
|
|
|
|
<div className="flex flex-col lg:flex-row flex-1 items-center px-8 md:px-14 lg:px-20 gap-16 lg:gap-0">
|
|
|
|
{/* Left — text */}
|
|
<div className="flex flex-col justify-center lg:w-[55%] lg:pr-20 gap-10 lg:gap-12">
|
|
|
|
<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="font-sans text-[11px] uppercase tracking-[0.25em] text-brand-beige/40">
|
|
{t('hero.label')}
|
|
</span>
|
|
</div>
|
|
|
|
<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,80px)] text-brand-beige">
|
|
{t('hero.title')}
|
|
</h1>
|
|
</div>
|
|
|
|
<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-[15px] font-light text-brand-beige/55 max-w-sm leading-[1.75]">
|
|
{t('hero.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className="hero-reveal flex flex-col sm:flex-row gap-5"
|
|
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)' }}
|
|
>
|
|
<button
|
|
onClick={() => setContactOpen(true)}
|
|
className="inline-flex items-center justify-center gap-2 font-sans text-[13px] tracking-wide text-brand-brown bg-brand-beige rounded-lg px-7 py-3.5 hover:bg-brand-beige/90 transition-colors duration-200 cursor-pointer"
|
|
>
|
|
{t('hero.cta1')}
|
|
</button>
|
|
<button
|
|
onClick={() => document.getElementById('works')?.scrollIntoView({ behavior: 'smooth' })}
|
|
className="group inline-flex items-center gap-2 font-sans text-[13px] text-brand-beige/45 hover:text-brand-beige transition-colors duration-200 cursor-pointer"
|
|
>
|
|
<span className="relative">
|
|
{t('hero.cta2')}
|
|
<span className="absolute bottom-0 left-0 w-full h-px bg-brand-beige/30 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300" />
|
|
</span>
|
|
<svg className="w-3.5 h-3.5 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>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right — service list, editorial style */}
|
|
<div
|
|
className="hero-reveal lg:w-[45%] lg:pl-16 w-full border-t border-brand-beige/10"
|
|
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)' }}
|
|
>
|
|
{heroCards.map((card, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex items-baseline gap-6 py-5 border-b border-brand-beige/10"
|
|
>
|
|
<span className="font-sans text-[10px] text-brand-beige/20 tracking-widest shrink-0 w-6">{card.num}</span>
|
|
<span className="font-serif text-brand-beige text-[clamp(1rem,1.6vw,1.25rem)] leading-snug">{card.label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="shrink-0" style={{ height: 'clamp(60px, 8vh, 80px)' }} />
|
|
</section>
|
|
|
|
{/* ── Below fold ── */}
|
|
<div ref={belowFoldRef} className="px-8 md:px-14 lg:px-20">
|
|
|
|
{/* ── Needs ── */}
|
|
<section data-reveal-section className="w-full py-24 md:py-36">
|
|
<div className="reveal flex items-center gap-6 mb-16 md:mb-20">
|
|
<span className="font-sans text-[10px] uppercase tracking-[0.25em] text-brand-brown/35 shrink-0">
|
|
{t('needs.sectionLabel')}
|
|
</span>
|
|
<span className="flex-1 h-px bg-brand-brown/10" />
|
|
</div>
|
|
|
|
{/* Grid "mortier" — les lignes de séparation sont le fond du container */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-px bg-brand-brown/10">
|
|
{needs.map((item, i) => (
|
|
<div
|
|
key={i}
|
|
className="reveal flex flex-col gap-5 p-8 md:p-10 bg-brand-beige hover:bg-white/80 transition-colors duration-300 cursor-default"
|
|
style={{ transitionDelay: `${i * 80}ms` }}
|
|
>
|
|
<span className="font-sans text-[10px] text-brand-brown/20 tracking-[0.25em]">
|
|
{String(i + 1).padStart(2, '0')}
|
|
</span>
|
|
<h3 className="font-serif text-brand-brown text-[clamp(1.2rem,1.8vw,1.5rem)] leading-snug">
|
|
{item.title}
|
|
</h3>
|
|
<p className="font-sans text-sm text-brand-brown/55 leading-[1.75]">
|
|
{item.text}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── Services — catalogue ── */}
|
|
<section data-reveal-section className="w-full py-24 md:py-36 border-t border-brand-brown/8">
|
|
<div className="reveal flex items-center gap-6 mb-16 md:mb-20">
|
|
<span className="font-sans text-[10px] uppercase tracking-[0.25em] text-brand-brown/35 shrink-0">
|
|
{t('services.sectionLabel')}
|
|
</span>
|
|
<span className="flex-1 h-px bg-brand-brown/10" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-brand-brown/10">
|
|
{services.map((service, i) => (
|
|
<div
|
|
key={i}
|
|
className="reveal flex flex-col bg-brand-beige hover:bg-white/80 transition-colors duration-300 cursor-default group"
|
|
style={{ transitionDelay: `${i * 100}ms` }}
|
|
>
|
|
{/* En-tête catalogue */}
|
|
<div className="flex items-baseline justify-between px-7 pt-7 pb-5 border-b border-brand-brown/8">
|
|
<span className="font-sans text-[10px] text-brand-brown/20 tracking-[0.25em]">
|
|
{String(i + 1).padStart(2, '0')}
|
|
</span>
|
|
<span className="font-sans text-[10px] uppercase tracking-[0.18em] text-brand-brown/25">
|
|
{t('services.sectionLabel')}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Corps */}
|
|
<div className="flex flex-col gap-5 px-7 py-6 flex-1">
|
|
<h3 className="font-serif text-brand-brown text-[clamp(1.25rem,1.8vw,1.6rem)] leading-tight group-hover:text-brand-accent transition-colors duration-300">
|
|
{service.title}
|
|
</h3>
|
|
<p className="font-sans text-sm text-brand-brown/60 leading-[1.8] flex-1">
|
|
{service.desc}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Pied catalogue */}
|
|
<div className="px-7 pb-7 pt-5 border-t border-brand-brown/8 flex flex-col gap-4">
|
|
<div>
|
|
<span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/30">
|
|
{t('services.idealLabel')}
|
|
</span>
|
|
<p className="font-sans text-[13px] text-brand-brown/50 mt-1.5 leading-relaxed">
|
|
{service.ideal}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{service.examples.map((ex, j) => (
|
|
<span
|
|
key={j}
|
|
className="font-sans text-[11px] text-brand-brown/40 border border-brand-brown/12 rounded-full px-2.5 py-0.5"
|
|
>
|
|
{ex}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── Method — liste structurée ── */}
|
|
<section data-reveal-section className="w-full py-24 md:py-36 border-t border-brand-brown/8">
|
|
<div className="reveal flex items-center gap-6 mb-16 md:mb-20">
|
|
<span className="font-sans text-[10px] uppercase tracking-[0.25em] text-brand-brown/35 shrink-0">
|
|
{t('method.sectionLabel')}
|
|
</span>
|
|
<span className="flex-1 h-px bg-brand-brown/10" />
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
{methodSteps.map((step, i) => (
|
|
<div
|
|
key={i}
|
|
className="reveal grid grid-cols-[40px_1fr] lg:grid-cols-[64px_1fr_2fr] items-start gap-x-8 gap-y-1.5 py-8 border-b border-brand-brown/8 last:border-b-0 cursor-default"
|
|
style={{ transitionDelay: `${i * 80}ms` }}
|
|
>
|
|
<span className="font-sans text-[11px] text-brand-brown/20 tracking-widest pt-0.5">
|
|
{String(i + 1).padStart(2, '0')}
|
|
</span>
|
|
<h3 className="font-serif text-brand-brown text-[clamp(1.05rem,1.4vw,1.2rem)] leading-snug">
|
|
{step.title}
|
|
</h3>
|
|
<p className="font-sans text-sm text-brand-brown/55 leading-[1.75] col-start-2 lg:col-start-3 lg:row-start-1">
|
|
{step.text}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── Works ── */}
|
|
<section id="works" className="w-full py-24 md:py-36 border-t border-brand-brown/8">
|
|
<div data-reveal-section className="mb-12 md:mb-16">
|
|
<div className="reveal flex items-center gap-6">
|
|
<span className="font-sans text-[10px] uppercase tracking-[0.25em] text-brand-brown/35 shrink-0">
|
|
{t('works.sectionLabel')}
|
|
</span>
|
|
<span className="flex-1 h-px bg-brand-brown/10" />
|
|
</div>
|
|
</div>
|
|
|
|
{projects.map((project, i) => (
|
|
<ProjectCard
|
|
key={project.slug}
|
|
project={project}
|
|
locale={locale}
|
|
index={i}
|
|
isTheLast={i === projects.length - 1}
|
|
/>
|
|
))}
|
|
</section>
|
|
|
|
{/* ── Why ── */}
|
|
<section data-reveal-section className="w-full py-24 md:py-36 border-t border-brand-brown/8">
|
|
<div className="reveal flex items-center gap-6 mb-16 md:mb-20">
|
|
<span className="font-sans text-[10px] uppercase tracking-[0.25em] text-brand-brown/35 shrink-0">
|
|
{t('why.sectionLabel')}
|
|
</span>
|
|
<span className="flex-1 h-px bg-brand-brown/10" />
|
|
</div>
|
|
|
|
<div className="flex flex-col lg:flex-row gap-16 lg:gap-24">
|
|
<div className="reveal lg:w-2/5">
|
|
<p className="font-sans text-base text-brand-brown/65 leading-[1.85]">
|
|
{t('why.intro')}
|
|
</p>
|
|
</div>
|
|
{/* Grille "mortier" identique à Needs */}
|
|
<div className="lg:w-3/5 grid grid-cols-1 sm:grid-cols-2 gap-px bg-brand-brown/10">
|
|
{whyArgs.map((arg, i) => (
|
|
<div
|
|
key={i}
|
|
className="reveal flex flex-col gap-3 p-7 bg-brand-beige hover:bg-white/80 transition-colors duration-300 cursor-default"
|
|
style={{ transitionDelay: `${i * 80}ms` }}
|
|
>
|
|
<h4 className="font-serif text-brand-brown text-[1.05rem] leading-snug">{arg.title}</h4>
|
|
<p className="font-sans text-sm text-brand-brown/55 leading-[1.7]">{arg.text}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── CTA final ── */}
|
|
<section data-reveal-section className="w-full py-24 md:py-36 border-t border-brand-brown/8">
|
|
<div className="flex justify-center">
|
|
<div className="reveal w-full max-w-2xl flex flex-col items-center text-center gap-10 p-10 md:p-14 rounded-2xl border border-brand-brown/8 bg-white/40">
|
|
<h2 className="font-serif text-brand-brown text-[clamp(1.5rem,2.8vw,2.2rem)] leading-[1.15]">
|
|
{t('cta.title')}
|
|
</h2>
|
|
<p className="font-sans text-sm text-brand-brown/55 leading-[1.8] max-w-md">
|
|
{t('cta.text')}
|
|
</p>
|
|
<div className="flex flex-col items-center gap-5">
|
|
<button
|
|
onClick={() => setContactOpen(true)}
|
|
className="inline-flex items-center gap-2.5 font-sans text-[13px] tracking-wide text-brand-beige bg-brand-brown rounded-lg px-8 py-3.5 hover:bg-brand-brown/85 transition-colors duration-200 cursor-pointer"
|
|
>
|
|
{t('cta.button')}
|
|
<svg className="w-3.5 h-3.5" 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>
|
|
</button>
|
|
<div className="flex flex-col gap-1.5">
|
|
<span className="font-sans text-xs text-brand-brown/35">{t('cta.note1')}</span>
|
|
<span className="font-sans text-xs text-brand-brown/35">{t('cta.note2')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|