// 228 FILMS · Hero
// Adapté du proto ACADEMY V1 (sceau monumental + triplet + signature + tuiles).
// Sceau monumental remplacé par DRONE vue de dessus (mirror box 3 groupe228.com,
// en version monumentale). Reste : grammaire ACADEMY préservée.
//
// Composition :
// · stage flex (max 1400, padding 6rem 5rem 4rem)
// · drone monumental absolu (820×820, right -10rem top 1rem)
// · signature trait + label JetBrains Mono bronze · « Architecture cinématique »
// · triplet Inter 500 clamp(56px, 9.2vw, 132px), rise word animation
// · sous-paragraphe Inter 300 max 620, fade-up
// · cta-block : primary noir + 2 tertiary
// · grille 3 tuiles univers (Entreprises / Immobilier / Drone FPV)
function Hero() {
const tr = useTr();
const { t: tw } = useTweaksLive();
return (
);
}
// ─────────────────────────────────────────────────────────────
// Drone monumental · vue de dessus
// Bras croisés + corps central tourné 45° + œil caméra + 4 rotors animés
// + cible/réticule subtile en arrière-plan + 4 cardinaux signature.
// Mirror géométrie box 3 groupe228.com (200x200) portée en 460x460 monumental.
// ─────────────────────────────────────────────────────────────
function HeroDroneMonumental() {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current; if (!el) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
let raf;
const update = () => {
const y = window.scrollY;
const drift = Math.min(80, y * 0.12);
el.style.transform = `translate3d(0, ${drift}px, 0)`;
raf = null;
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
update();
window.addEventListener('scroll', onScroll, { passive: true });
return () => {
window.removeEventListener('scroll', onScroll);
if (raf) cancelAnimationFrame(raf);
};
}, []);
return (
{/* Axes croisés subtils */}
{/* Bras croisés · structure principale */}
{/* Rotor TR (354,106) · spin counter-clockwise */}
{/* Rotor BR (354,354) · spin clockwise */}
{/* Rotor BL (106,354) · spin counter-clockwise */}
);
}
// ─────────────────────────────────────────────────────────────
// Signature kicker · trait bronze + label JetBrains Mono · « Architecture cinématique »
// ─────────────────────────────────────────────────────────────
function Signature() {
return (
Architecture cinématique
Cinematic architecture
);
}
// ─────────────────────────────────────────────────────────────
// Triplet · Élever. Créer. Délivrer. · Inter 500
// Points noirs intouchables (verrou). Rise word animation décalée.
// NOTE : 3e mot placeholder (à locker — alternatives en discussion).
// ─────────────────────────────────────────────────────────────
function Triplet() {
const lines = [
{ fr: 'Élever.', en: 'Elevate.' },
{ fr: 'Créer.', en: 'Create.' },
{ fr: 'Livrer.', en: 'Deliver.' },
];
return (
{lines.map((line, i) => (
{line.fr}
{line.en}
))}
Nous concevons et réalisons vos films, du tournage classique au drone FPV, pour vous donner des images qui élèvent vos lieux, vos marques et vos œuvres.
We design and shoot your films, from classic filming to FPV drone, so you get images that elevate your places, your brands and your work.
);
}
// ─────────────────────────────────────────────────────────────
// CTA block · primary noir (Voir les mandats)
// + 2 tertiary (Parcours immobilier · Cadrage en 5 questions)
// ─────────────────────────────────────────────────────────────
function CtaBlock() {
return (
Immobilier & architecture
Real estate & architecture
Demander une soumission
Request a quote
);
}
function PrimaryCTA() {
const [hover, setHover] = React.useState(false);
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{
background: TOK.ink, color: TOK.ivory,
border: 0, padding: '15px 28px 15px 26px', borderRadius: 999,
fontFamily: TOK.sans, fontSize: 15, fontWeight: 500,
letterSpacing: '0.005em', cursor: 'pointer', textDecoration: 'none',
display: 'inline-flex', alignItems: 'center', gap: 12,
boxShadow: hover
? '0 14px 38px rgba(0,0,0,0.18), 0 0 0 6px rgba(139,111,31,0.18)'
: '0 1px 0 rgba(0,0,0,0.04), 0 6px 22px rgba(0,0,0,0.10)',
transition: 'box-shadow .25s, transform .25s',
}}>
Voir les mandats
See the engagements
→
);
}
function CtaMeta() {
return (
Mandats récurrents Recurring engagements Trimestriel Quarterly FR + EN
);
}
const metaStyle = {
fontFamily: TOK.mono, fontSize: 11,
letterSpacing: '0.14em', color: TOK.inkMed,
textTransform: 'uppercase',
};
function TertiaryCTA({ children, target }) {
const [hover, setHover] = React.useState(false);
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{
background: 'transparent', border: 0, cursor: 'pointer', textDecoration: 'none',
display: 'inline-flex', alignItems: 'center', gap: 8,
fontFamily: TOK.sans, fontSize: 14, fontWeight: 500, color: TOK.ink,
borderBottom: `1px solid ${hover ? TOK.bronze : TOK.ink22}`,
padding: '0 0 4px 0', transition: 'border-color .2s',
}}>
{children}
→
);
}
// ─────────────────────────────────────────────────────────────
// 3 tiles · univers FILMS · libellés verrou
// ─────────────────────────────────────────────────────────────
function Tiles({ tw }) {
const tiles = [
{
id: 'mandats', state: 'ouvert',
name: { fr: 'mandats récurrents', en: 'recurring engagements' },
stateLabel: { fr: 'entreprises · trimestriel', en: 'companies · quarterly' },
Icon: IconMandats,
},
{
id: 'immobilier', state: 'ouvert',
name: { fr: 'immobilier & architecture', en: 'real estate & architecture' },
stateLabel: { fr: 'agents et architectes', en: 'agents and architects' },
Icon: IconImmobilier,
},
{
id: 'drone', state: 'ouvert',
href: '#contact',
name: { fr: 'drone cinématique et FPV', en: 'cinematic and FPV drone' },
stateLabel: { fr: 'sur demande', en: 'on request' },
Icon: IconDroneFPV,
},
];
return (
{tiles.map((t) =>
);
}
function Tile({ tile, tw }) {
const [hover, setHover] = React.useState(false);
const ouvert = tile.state === 'ouvert';
const Wrapper = ouvert ? 'a' : 'div';
const href = tile.href || `#${tile.id}`;
const wrapperProps = ouvert
? { href, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }
: {};
const nameFamily = tw.tileNameFamily === 'garamond' ? TOK.garamond : TOK.sans;
const nameWeight = tw.tileNameFamily === 'garamond' ? 500 : 300;
return (
{/* Marque d'angle bronze top-right */}
{ouvert && (
)}
{tile.name.fr}
{tile.name.en}
{tile.stateLabel.fr}
{tile.stateLabel.en}
);
}
// ─────────────────────────────────────────────────────────────
// Tile icons · 3 univers FILMS (88px, color: currentColor = bronze)
// ─────────────────────────────────────────────────────────────
const iconStyle = { width: 88, height: 88, color: 'var(--bronze)', display: 'block', marginBottom: 6 };
function IconMandats() {
// Lemniscate (signe d'infini ∞) · cadence récurrente sans fin.
// Clin d'œil 228 : le 8 couché = ∞. Point central accent (bronze pulse au hover).
return (
{/* ∞ · 2 boucles Bézier symétriques qui se croisent au centre */}
);
}
function IconImmobilier() {
// Toit pignon + façade simple · trait architectural. Lit comme bâtiment/lieu.
return (
);
}
function IconDroneFPV() {
// Drone vue de dessus minimaliste · mirror box 3 groupe228.com.
return (
);
}
// ─────────────────────────────────────────────────────────────
// Section « Architecture cinématique »
// Manifeste de la philosophie 228 FILMS · placée sur home après Hero.
// Kicker + H2 + lead + 3 piliers (Cadrage / Captation / Finition).
// ─────────────────────────────────────────────────────────────
function ArchitectureCinema() {
const tr = useTr();
const { isMobile } = useViewport();
const piliers = [
{
n: '01',
title: { fr: 'Pré-production', en: 'Pre-production' },
body: {
fr: 'Le projet, l\'usage final, le budget. Nous écoutons avant de filmer.',
en: 'The project, the final use, the budget. We listen before we shoot.',
},
},
{
n: '02',
title: { fr: 'Captation', en: 'Capture' },
body: {
fr: 'Tournage classique, drone, FPV. Nous adaptons l\'outil à l\'intention.',
en: 'Classic filming, drone, FPV. We match the tool to the intent.',
},
},
{
n: '03',
title: { fr: 'Finition', en: 'Finishing' },
body: {
fr: 'Montage et étalonnage. Nous tenons l\'image jusqu\'au rendu final.',
en: 'Edit and color. We hold the image all the way to the final delivery.',
},
},
];
return (
{tr({ fr: 'Architecture cinématique', en: 'Cinematic architecture' })}
{tr({
fr: 'L\'intention\navant l\'image.',
en: 'Intent\nbefore image.',
}).split('\n').map((line, i) => {line}
)}
{tr({
fr: 'Nous tenons l\'intention du projet, du repérage au rendu final, pour vous donner des images qui distinguent vos lieux, vos marques et vos œuvres.',
en: 'We hold the intent of the project, from scouting to final delivery, to give you images that set your places, your brands and your work apart.',
})}
{/* Diagramme · 3 piliers verticaux */}
{tr({ fr: 'Trois temps', en: 'Three moments' })}
{piliers.map((p, i) => (
{p.n}
{tr(p.title)}
{tr(p.body)}
))}
);
}
Object.assign(window, { Hero, ArchitectureCinema });