iron-edge 1.0.0

package/skills/lp-cinematico/SKILL.md

@@ -0,0 +1,774 @@
+# MEGA-PROMPT TEMPLATE — One-Shot Cinematic Landing Page (Video Scroll-Scrub)
+
+> Fill every `{{PLACEHOLDER}}` below, then paste the whole document into your generating model (Lovable, v0, Cursor, Claude, etc.) as a SINGLE prompt. Do NOT split it. The model must produce a working Vite app in one shot.
+
+---
+
+## 0. BRIEF (read first, do not skip)
+
+You are building a premium, single-page marketing site in the spirit of Apple's AirPods Pro page, Stripe's landing, and Sony Bravia launch sites. The signature interaction is a **scroll-scrubbed video rendered as a canvas frame sequence** in the hero. The rest of the page is editorial, cinematic, liquid-glass, Google-Stitch-tier quality.
+
+**Target stack — non-negotiable:**
+- Vite + React 18 + TypeScript
+- Tailwind CSS v4 (with `@theme` directive)
+- shadcn/ui (button, accordion)
+- Framer Motion (`motion/react`) for text + element animations
+- lucide-react for icons
+- `@fontsource/*` for self-hosted fonts
+
+**Language of the site UI copy:** `{{LANG}}` (e.g. `fr-CH`, `en-US`).
+
+**Design intent (re-read before every section you build):**
+- Editorial, premium, cinematic. Think fashion-magazine meets SaaS.
+- "Google Stitch"-tier polish: every spacing, every corner radius, every weight must feel intentional.
+- No generic AI-slop: no emoji decorations, no default violet gradients, no stock-looking drop shadows, no `text-center` on everything, no placeholder lorem left behind.
+- Mobile first but optimized for desktop narrative (1440px is the primary canvas).
+- Dark theme by default. Light surfaces are ivory/cream, not pure white.
+
+**What success looks like:** `npm run dev` starts on first try, all 9 sections render, the hero frame-sequence scrubs smoothly with scroll, the marquees loop seamlessly, the FAQ accordion opens, no console errors, LCP < 2.5s on a 10 Mbps connection.
+
+---
+
+## 1. PLACEHOLDERS LEGEND
+
+Fill every entry in this table before submitting. The table is the single source of truth — every placeholder in the sections below is defined here.
+
+| Placeholder | Type | Example | Default |
+|---|---|---|---|
+| `{{LANG}}` | BCP-47 code | `fr-CH` | `fr-CH` |
+| `{{BRAND_NAME}}` | string | `ABP` | `Atelier` |
+| `{{BRAND_TAGLINE}}` | 3-6 words | `Déménagement d'exception` | `Built for what's next` |
+| `{{LOGO_PATH}}` | image path | `/logo.svg` | `/logo.svg` |
+| `{{NAV_ITEMS}}` | array of {label,href} | `[{"label":"Services","href":"#services"},...]` | 4-5 items |
+| `{{CTA_LABEL}}` | 1-3 words | `Devis gratuit` | `Get Started` |
+| `{{CTA_HREF}}` | anchor/url | `#devis` | `#cta` |
+| `{{FRAMES_PATH}}` | public path prefix | `/frames` | `/frames` |
+| `{{FRAME_COUNT}}` | integer | `240` | `240` |
+| `{{FRAME_EXT}}` | `jpg` or `webp` | `jpg` | `jpg` |
+| `{{FPS}}` | integer | `30` | `30` |
+| `{{HERO_HEADLINE}}` | 2-5 words | `Bouger, sans bruit.` | `Move, quietly.` |
+| `{{HERO_SUB}}` | 1-2 sentences | `Du studio au penthouse. L'art du déménagement, signé {{BRAND_NAME}}.` | `One move. Zero friction.` |
+| `{{HERO_CTA_PRIMARY}}` | 1-3 words | `Devis gratuit` | `Start now` |
+| `{{HERO_CTA_SECONDARY}}` | 1-3 words | `Voir le film` | `Watch film` |
+| `{{PARTNERS}}` | array of 5-6 strings | `["Christie's","Sotheby's","Piaget"]` | 5 brand names |
+| `{{SERVICES}}` | array of 6 {icon,title,body} | see Section 13 | 6 entries |
+| `{{REASONS}}` | array of 4 {icon,title,body} | see Section 14 | 4 entries |
+| `{{PROCESS_STEPS}}` | array of 3-4 {n,title,body} | see Section 15 | 4 entries |
+| `{{STATS}}` | array of 4 {value,label} | `[{"value":"2500+","label":"déménagements"}]` | 4 entries |
+| `{{STATS_BG_VIDEO}}` | HLS or MP4 URL | `https://stream.mux.com/xxx.m3u8` | placeholder URL |
+| `{{TESTIMONIALS}}` | array of ≥6 {quote,name,role} | see Section 17 | 6 entries |
+| `{{FAQ_ITEMS}}` | array of 5-8 {q,a} | see Section 18 | 6 entries |
+| `{{CTA_BG_VIDEO}}` | HLS or MP4 URL | `https://stream.mux.com/yyy.m3u8` | placeholder URL |
+| `{{CTA_HEADLINE}}` | 4-7 words | `Prêts à partir ?` | `Ready to move?` |
+| `{{CTA_SUB}}` | 1 sentence | `Un entretien. Un plan. Un déménagement.` | `One call. Done.` |
+| `{{FOOTER_LINKS}}` | array of {label,href} | `[{"label":"Mentions","href":"/legal"}]` | 4 entries |
+| `{{COPYRIGHT}}` | string | `© 2026 {{BRAND_NAME}} SA. Tous droits réservés.` | `© 2026 {{BRAND_NAME}}. All rights reserved.` |
+| `{{COLOR_INK}}` | HSL triplet | `20 15% 9%` | `20 15% 9%` |
+| `{{COLOR_CREAM}}` | HSL triplet | `40 30% 90%` | `40 30% 90%` |
+| `{{COLOR_OCHRE}}` | HSL triplet | `32 55% 65%` | `32 55% 65%` |
+| `{{COLOR_TERRA}}` | HSL triplet | `14 55% 31%` | `14 55% 31%` |
+| `{{FONT_DISPLAY}}` | Google-Font family | `Oswald` | `Oswald` |
+| `{{FONT_BODY}}` | Google-Font family | `Inter` | `Inter` |
+
+---
+
+## 2. PRE-STEP — VIDEO → JPG FRAME PIPELINE
+
+The hero uses a scroll-scrubbed frame sequence, not a `<video>` tag. The user supplies ONE short video (5-15s is ideal) which is extracted into still frames that the canvas swaps per scroll position. This is the pattern Apple uses on AirPods Pro / MacBook marketing pages.
+
+**Instructions the generating model MUST include in the project README:**
+
+```bash
+# 1. Drop the source video at /input/source.mp4 in the project root.
+mkdir -p input public/frames
+
+# 2. Extract frames with ffmpeg (requires ffmpeg installed locally).
+ffmpeg -i input/source.mp4 \
+  -vf "fps={{FPS}},scale='min(1920,iw)':'-2':flags=lanczos" \
+  -q:v 3 \
+  public/frames/frame_%04d.{{FRAME_EXT}}
+
+# 3. Count the frames and paste the number into FRAME_COUNT in App.tsx.
+ls public/frames | wc -l
+
+# Optional: convert to WebP for smaller payload (~40% size drop, same visual quality).
+# for f in public/frames/*.jpg; do
+#   cwebp -q 82 "$f" -o "${f%.jpg}.webp" && rm "$f"
+# done
+```
+
+**Rules for the model:**
+- Do NOT hardcode a specific frame count. Read it from the `FRAME_COUNT` constant at the top of `App.tsx`, which is a `{{FRAME_COUNT}}` placeholder.
+- Filenames MUST be zero-padded 4-digit (`frame_0001.jpg` … `frame_NNNN.jpg`). If the user chooses WebP, same pattern with `.webp`.
+- `/input` stays gitignored. `/public/frames` ships.
+- If the build target is a platform with a 25 MB limit (Vercel hobby), warn the user in the README if total frame size exceeds 20 MB.
+
+**Fallback (no ffmpeg on the user's machine):** document a Node script using `@ffmpeg/ffmpeg` (WASM) as a `scripts/extract-frames.mjs` that does the same extraction. Do not implement it unless the user asks; just mention its existence in the README.
+
+---
+
+## 3. PROJECT BOOTSTRAP
+
+Run these commands in order. Every command is exact.
+
+```bash
+npm create vite@latest . -- --template react-ts
+npm install
+npm install -D tailwindcss@next @tailwindcss/vite @tailwindcss/postcss autoprefixer
+npm install motion lucide-react
+npm install @fontsource/{{FONT_DISPLAY | lower}} @fontsource/{{FONT_BODY | lower}}
+
+# shadcn/ui
+npx shadcn@latest init -d
+npx shadcn@latest add button accordion
+```
+
+**vite.config.ts:** import `@tailwindcss/vite` plugin and wire it. Add a `@` path alias to `src/`.
+
+**tsconfig.json:** add `"paths": { "@/*": ["./src/*"] }` and the matching `"baseUrl": "."`.
+
+File structure the model must create:
+
+```
+src/
+  App.tsx
+  main.tsx
+  index.css
+  components/
+    ScrubSequence.tsx     # the canvas frame renderer
+    Navbar.tsx
+    Hero.tsx
+    ServicesBento.tsx
+    Pourquoi.tsx
+    Process.tsx
+    Stats.tsx
+    Testimonials.tsx
+    Faq.tsx
+    CtaFooter.tsx
+    BlurText.tsx          # reusable word-stagger animation
+    ui/
+      button.tsx
+      accordion.tsx
+  lib/
+    utils.ts
+    constants.ts          # FRAME_COUNT, FRAMES_PATH, etc. — single source of truth
+public/
+  frames/                 # frame_0001.{{FRAME_EXT}} ... frame_NNNN.{{FRAME_EXT}}
+  {{LOGO_PATH}}
+```
+
+---
+
+## 4. DESIGN TOKENS (index.css)
+
+Add at the top of `src/index.css`, ABOVE the Tailwind import:
+
+```css
+@import "@fontsource/{{FONT_DISPLAY | lower}}/300.css";
+@import "@fontsource/{{FONT_DISPLAY | lower}}/400.css";
+@import "@fontsource/{{FONT_DISPLAY | lower}}/500.css";
+@import "@fontsource/{{FONT_DISPLAY | lower}}/600.css";
+@import "@fontsource/{{FONT_DISPLAY | lower}}/700.css";
+@import "@fontsource/{{FONT_BODY | lower}}/300.css";
+@import "@fontsource/{{FONT_BODY | lower}}/400.css";
+@import "@fontsource/{{FONT_BODY | lower}}/500.css";
+@import "@fontsource/{{FONT_BODY | lower}}/600.css";
+
+@import "tailwindcss";
+
+:root {
+  --ink:    {{COLOR_INK}};
+  --cream:  {{COLOR_CREAM}};
+  --ochre:  {{COLOR_OCHRE}};
+  --terra:  {{COLOR_TERRA}};
+
+  --background:        var(--ink);
+  --foreground:        var(--cream);
+  --card:              var(--ink);
+  --card-foreground:   var(--cream);
+  --popover:           var(--ink);
+  --popover-foreground:var(--cream);
+  --primary:           var(--ochre);
+  --primary-foreground: var(--ink);
+  --secondary:         var(--terra);
+  --secondary-foreground: var(--cream);
+  --muted:             240 4% 16%;
+  --muted-foreground:  40 6% 72%;
+  --accent:            var(--ochre);
+  --accent-foreground: var(--ink);
+  --destructive:       0 72% 51%;
+  --destructive-foreground: var(--cream);
+  --border:            40 30% 90% / 0.18;
+  --input:             40 30% 90% / 0.18;
+  --ring:              var(--ochre);
+  --radius:            0.75rem;
+
+  --font-display: "{{FONT_DISPLAY}}", "Impact", "Arial Narrow", sans-serif;
+  --font-body:    "{{FONT_BODY}}", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
+
+  --gutter: clamp(20px, 4.2vw, 56px);
+  --max:    1440px;
+}
+
+html, body, #root { background: hsl(var(--background)); color: hsl(var(--foreground)); }
+html { scroll-behavior: smooth; }
+body {
+  font-family: var(--font-body);
+  font-size: 16px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  overflow-x: hidden;
+}
+.font-display { font-family: var(--font-display); }
+.font-body    { font-family: var(--font-body); }
+```
+
+---
+
+## 5. LIQUID-GLASS UTILITIES
+
+```css
+@layer components {
+  .liquid-glass {
+    background: rgba(255, 255, 255, 0.01);
+    background-blend-mode: luminosity;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    border: none;
+    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
+    position: relative;
+    overflow: hidden;
+  }
+  .liquid-glass::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1.4px;
+    background: linear-gradient(180deg,
+      rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
+      rgba(255,255,255,0)    40%, rgba(255,255,255,0)    60%,
+      rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+            mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  .liquid-glass-strong {
+    background: rgba(255, 255, 255, 0.01);
+    background-blend-mode: luminosity;
+    backdrop-filter: blur(50px);
+    -webkit-backdrop-filter: blur(50px);
+    border: none;
+    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05),
+                inset 0 1px 1px rgba(255, 255, 255, 0.15);
+    position: relative;
+    overflow: hidden;
+  }
+  .liquid-glass-strong::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1.4px;
+    background: linear-gradient(180deg,
+      rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.20) 20%,
+      rgba(255,255,255,0)    40%, rgba(255,255,255,0)    60%,
+      rgba(255,255,255,0.20) 80%, rgba(255,255,255,0.50) 100%);
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+            mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  .gradient-fade-t {
+    background: linear-gradient(to top, transparent 0%, hsl(var(--background)) 100%);
+  }
+  .gradient-fade-b {
+    background: linear-gradient(to bottom, transparent 0%, hsl(var(--background)) 100%);
+  }
+
+  .noise::after {
+    content: "";
+    position: absolute; inset: 0;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
+    opacity: .5; mix-blend-mode: overlay; pointer-events: none;
+  }
+}
+```
+
+---
+
+## 6. TAILWIND v4 CONFIG (inside index.css)
+
+```css
+@theme {
+  --color-background:       hsl(var(--background));
+  --color-foreground:       hsl(var(--foreground));
+  --color-card:             hsl(var(--card));
+  --color-card-foreground:  hsl(var(--card-foreground));
+  --color-popover:          hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary:          hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary:        hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted:            hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent:           hsl(var(--accent));
+  --color-accent-foreground:hsl(var(--accent-foreground));
+  --color-destructive:      hsl(var(--destructive));
+  --color-border:           hsl(var(--border));
+  --color-input:            hsl(var(--input));
+  --color-ring:             hsl(var(--ring));
+
+  --font-display: "{{FONT_DISPLAY}}", sans-serif;
+  --font-body:    "{{FONT_BODY}}", sans-serif;
+
+  --radius-sm:  calc(var(--radius) - 4px);
+  --radius-md:  calc(var(--radius) - 2px);
+  --radius-lg:  var(--radius);
+  --radius-xl:  calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 10px);
+  --radius-3xl: calc(var(--radius) + 18px);
+
+  --animate-marquee: marquee 28s linear infinite;
+  --animate-marquee-rev: marquee-rev 32s linear infinite;
+  --animate-fade-up: fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+@keyframes marquee      { from { transform: translateX(0) } to { transform: translateX(-50%) } }
+@keyframes marquee-rev  { from { transform: translateX(-50%) } to { transform: translateX(0) } }
+@keyframes fade-up {
+  from { opacity: 0; transform: translate3d(0, 24px, 0); filter: blur(6px); }
+  to   { opacity: 1; transform: translate3d(0,  0, 0); filter: blur(0); }
+}
+```
+
+---
+
+## 7. SHADCN BUTTON VARIANTS
+
+Open `src/components/ui/button.tsx` (generated by `npx shadcn add button`). Add these three variants in the `buttonVariants` cva `variants.variant` block:
+
+```ts
+hero: "bg-primary text-primary-foreground rounded-full px-7 py-3.5 text-base font-medium tracking-[-0.01em] hover:bg-primary/90 transition-colors",
+heroGlass: "liquid-glass-strong text-foreground rounded-full px-7 py-3.5 text-base font-normal tracking-[-0.01em] hover:bg-white/5 transition-colors",
+heroSolid: "bg-foreground text-background rounded-full px-7 py-3.5 text-base font-medium tracking-[-0.01em] hover:bg-foreground/90 transition-colors",
+```
+
+---
+
+## 8. SCRUB SEQUENCE COMPONENT — src/components/ScrubSequence.tsx
+
+```tsx
+import { useEffect, useRef } from "react";
+
+export type ScrubSequenceProps = {
+  framesPath: string;
+  frameCount: number;
+  ext?: "jpg" | "webp";
+  className?: string;
+  scrollTargetRef: React.RefObject<HTMLElement>;
+};
+
+const pad4 = (n: number) => String(n).padStart(4, "0");
+
+export function ScrubSequence({
+  framesPath,
+  frameCount,
+  ext = "jpg",
+  className,
+  scrollTargetRef,
+}: ScrubSequenceProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const imagesRef = useRef<HTMLImageElement[]>([]);
+  const rafRef    = useRef<number | null>(null);
+  const visible   = useRef(true);
+  const prefersReduced = useRef(
+    typeof window !== "undefined" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+
+  useEffect(() => {
+    const imgs: HTMLImageElement[] = [];
+    const urls = Array.from(
+      { length: frameCount },
+      (_, i) => `${framesPath}/frame_${pad4(i + 1)}.${ext}`
+    );
+    const first = new Image();
+    first.src = urls[0];
+    // @ts-ignore
+    first.fetchPriority = "high";
+    imgs[0] = first;
+    urls.slice(1).forEach((src, i) => {
+      const img = new Image();
+      img.src = src;
+      imgs[i + 1] = img;
+    });
+    imagesRef.current = imgs;
+  }, [framesPath, frameCount, ext]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const resize = () => {
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      canvas.width  = window.innerWidth  * dpr;
+      canvas.height = window.innerHeight * dpr;
+      canvas.style.width  = "100%";
+      canvas.style.height = "100%";
+      drawFrame(currentIndex());
+    };
+    resize();
+    window.addEventListener("resize", resize);
+    return () => window.removeEventListener("resize", resize);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const el = scrollTargetRef.current;
+    if (!el) return;
+    const io = new IntersectionObserver(
+      ([entry]) => { visible.current = entry.isIntersecting; },
+      { threshold: 0 }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [scrollTargetRef]);
+
+  useEffect(() => {
+    const tick = () => {
+      if (visible.current && !prefersReduced.current) {
+        drawFrame(currentIndex());
+      }
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    tick();
+    return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (prefersReduced.current) {
+      const mid = Math.floor(frameCount / 2);
+      const img = imagesRef.current[mid];
+      if (img?.complete) drawImage(img);
+      else img?.addEventListener("load", () => drawImage(img), { once: true });
+    }
+  }, [frameCount]);
+
+  const currentIndex = () => {
+    const el = scrollTargetRef.current;
+    if (!el) return 0;
+    const rect = el.getBoundingClientRect();
+    const total = el.offsetHeight - window.innerHeight;
+    const progress = total > 0
+      ? Math.min(1, Math.max(0, -rect.top / total))
+      : 0;
+    return Math.min(frameCount - 1, Math.floor(progress * (frameCount - 1)));
+  };
+
+  const drawFrame = (idx: number) => {
+    const img = imagesRef.current[idx];
+    if (img && img.complete && img.naturalWidth > 0) drawImage(img);
+  };
+
+  const drawImage = (img: HTMLImageElement) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const cw = canvas.width, ch = canvas.height;
+    const iw = img.naturalWidth, ih = img.naturalHeight;
+    const scale = Math.max(cw / iw, ch / ih);
+    const dw = iw * scale, dh = ih * scale;
+    const dx = (cw - dw) / 2, dy = (ch - dh) / 2;
+    ctx.clearRect(0, 0, cw, ch);
+    ctx.drawImage(img, dx, dy, dw, dh);
+  };
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={className}
+      aria-hidden="true"
+      style={{ transform: "translateZ(0)", willChange: "contents" }}
+    />
+  );
+}
+```
+
+---
+
+## 9. BLURTEXT COMPONENT — src/components/BlurText.tsx
+
+```tsx
+import { motion, useInView } from "motion/react";
+import { useRef } from "react";
+
+type Props = {
+  text: string;
+  className?: string;
+  delay?: number;
+  startDelay?: number;
+  as?: keyof JSX.IntrinsicElements;
+};
+
+export function BlurText({
+  text,
+  className = "",
+  delay = 0.07,
+  startDelay = 0,
+  as: Tag = "h2",
+}: Props) {
+  const ref = useRef<HTMLElement>(null);
+  const inView = useInView(ref, { once: true, amount: 0.3 });
+  const words = text.split(" ");
+
+  return (
+    <Tag ref={ref as any} className={className}>
+      {words.map((w, i) => (
+        <motion.span
+          key={i}
+          className="inline-block will-change-[filter,transform,opacity]"
+          initial={{ filter: "blur(10px)", opacity: 0, y: 24 }}
+          animate={inView ? { filter: "blur(0)", opacity: 1, y: 0 } : undefined}
+          transition={{
+            duration: 0.7,
+            ease: [0.22, 1, 0.36, 1],
+            delay: startDelay + i * delay,
+          }}
+        >
+          {w}
+          {i < words.length - 1 ? "\u00A0" : ""}
+        </motion.span>
+      ))}
+    </Tag>
+  );
+}
+```
+
+---
+
+## 10. CONSTANTS FILE — src/lib/constants.ts
+
+```ts
+export const FRAMES_PATH = "{{FRAMES_PATH}}";
+export const FRAME_COUNT = {{FRAME_COUNT}};
+export const FRAME_EXT   = "{{FRAME_EXT}}" as const;
+```
+
+---
+
+## SECTION 1 — NAVBAR (floating liquid-glass pill)
+
+File: `src/components/Navbar.tsx`
+
+- Container: `fixed top-4 left-1/2 -translate-x-1/2 z-50 w-[min(1200px,calc(100vw-32px))]`.
+- Inner: `liquid-glass rounded-full px-2 py-2 flex items-center justify-between gap-4`.
+- Left: logo + `{{BRAND_NAME}}` in `font-display text-lg tracking-tight`.
+- Center: `hidden md:flex` nav links from `{{NAV_ITEMS}}`.
+- Right: `<Button variant="heroSolid">{{CTA_LABEL}}</Button>`.
+- Mobile: hamburger icon opens a full-screen liquid-glass sheet.
+- On scroll > 40px: apply `backdrop-blur-xl` + reduce `top-4` → `top-2`.
+
+---
+
+## SECTION 2 — HERO (scrub sequence + headline + CTAs)
+
+File: `src/components/Hero.tsx`
+
+```tsx
+<section ref={scrollRef} className="relative h-[250vh] bg-background">
+  <div className="sticky top-0 h-screen w-full overflow-hidden">
+    <ScrubSequence
+      framesPath={FRAMES_PATH}
+      frameCount={FRAME_COUNT}
+      ext={FRAME_EXT}
+      scrollTargetRef={scrollRef}
+      className="absolute inset-0 w-full h-full z-0"
+    />
+    <div className="absolute inset-0 z-[1] bg-[radial-gradient(120%_80%_at_50%_60%,transparent_40%,rgba(0,0,0,0.55)_100%)]" />
+    <div className="absolute bottom-0 inset-x-0 h-[40vh] z-[2] gradient-fade-b" />
+    <div className="absolute inset-0 z-10 flex flex-col items-center justify-center text-center px-6">
+      {/* badge */}
+      <BlurText text="{{HERO_HEADLINE}}" as="h1"
+        className="mt-6 font-display uppercase text-[clamp(56px,9vw,144px)] leading-[0.92] tracking-[-0.02em] text-foreground max-w-[14ch]"
+        delay={0.09} startDelay={0.15} />
+      {/* sub, CTAs, partners */}
+    </div>
+  </div>
+</section>
+```
+
+---
+
+## SECTION 3 — SERVICES BENTO
+
+File: `src/components/ServicesBento.tsx`
+
+Asymmetric bento (1 tall + 3 small + 1 wide + 1 full-width). Every card is `liquid-glass rounded-2xl`, hover-lifts with `whileHover={{ y: -4 }}`.
+
+**`{{SERVICES}}` shape:**
+```ts
+[
+  { icon: "Truck",    title: "...", body: "..." },
+  { icon: "Package",  title: "...", body: "..." },
+  { icon: "Warehouse",title: "...", body: "..." },
+  { icon: "Globe",    title: "...", body: "..." },
+  { icon: "Building2",title: "...", body: "..." },
+  { icon: "Sparkles", title: "...", body: "..." },
+]
+```
+
+---
+
+## SECTION 4 — POURQUOI NOUS (4-column "why us" grid)
+
+File: `src/components/Pourquoi.tsx`
+
+Grid: `grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5`. Each card: `liquid-glass rounded-2xl p-7 flex flex-col gap-5 min-h-[260px]`. Bottom accent: `h-px w-10 bg-gradient-to-r from-primary to-transparent`.
+
+**`{{REASONS}}` shape (4 entries, each `{icon, title, body}`).**
+
+---
+
+## SECTION 5 — PROCESS STEPS (horizontal numbered flow)
+
+File: `src/components/Process.tsx`
+
+`grid grid-cols-1 md:grid-cols-4 gap-0`. Large step numbers `font-display text-[140px] leading-none text-primary/25`. Connector lines between steps. `{{PROCESS_STEPS}}` shape: `{n, title, body}[]`.
+
+---
+
+## SECTION 6 — STATS BAND
+
+File: `src/components/Stats.tsx`
+
+- Background: desaturated `<video autoPlay loop muted playsInline>` with `filter: saturate(0)`.
+- Inner card: `liquid-glass rounded-3xl p-10 md:p-14`.
+- Grid: `grid-cols-2 md:grid-cols-4`. Values: `font-display italic text-5xl md:text-7xl`. Count-up animation when in view.
+- `{{STATS}}` shape: `{value, label}[]` (exactly 4).
+
+---
+
+## SECTION 7 — TESTIMONIALS MARQUEE
+
+File: `src/components/Testimonials.tsx`
+
+Two rows scrolling in opposite directions. Mask: `[mask-image:linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]`. Pause on hover. Cards: `liquid-glass rounded-2xl p-7 w-[340px] md:w-[400px] shrink-0`. `{{TESTIMONIALS}}` shape: `{quote, name, role}[]` (≥6).
+
+---
+
+## SECTION 8 — FAQ ACCORDION
+
+File: `src/components/Faq.tsx`
+
+Two-column: sticky title on left, `<Accordion type="single" collapsible>` on right. `AccordionTrigger`: `font-display uppercase text-lg md:text-xl tracking-tight data-[state=open]:text-primary`. `{{FAQ_ITEMS}}` shape: `{q, a}[]` (5-8).
+
+---
+
+## SECTION 9 — CTA + FOOTER
+
+File: `src/components/CtaFooter.tsx`
+
+- `min-h-[100vh]`, cinematic video background `brightness(0.55)`.
+- `<BlurText as="h2" text="{{CTA_HEADLINE}}" className="font-display italic text-[clamp(56px,10vw,180px)] ...">`
+- Two CTAs: `<Button variant="hero">` + `<Button variant="heroGlass">`.
+- Footer bar: `border-t border-border/40`, copyright + footer links.
+
+---
+
+## 20. GLOBAL ANIMATION PRIMITIVES (use only these five)
+
+1. **BlurText** — section headings, word-stagger, 0.07s between words, 0.7s per word.
+2. **Fade-up-on-view** — subtext/CTAs, `opacity:0 y:16 blur:8px` → `opacity:1 y:0 blur:0`, `once:true`.
+3. **Scroll-scrub canvas** — hero only.
+4. **Marquee** — 28s / 32s reverse, gradient mask, pause on hover.
+5. **Liquid-glass ::before mask border** — every card/pill/button. Never a plain `border`.
+
+---
+
+## 21. PAGE COMPOSITION — src/App.tsx
+
+```tsx
+import { useRef } from "react";
+import { Navbar }        from "@/components/Navbar";
+import { Hero }          from "@/components/Hero";
+import { ServicesBento } from "@/components/ServicesBento";
+import { Pourquoi }      from "@/components/Pourquoi";
+import { Process }       from "@/components/Process";
+import { Stats }         from "@/components/Stats";
+import { Testimonials }  from "@/components/Testimonials";
+import { Faq }           from "@/components/Faq";
+import { CtaFooter }     from "@/components/CtaFooter";
+
+export default function App() {
+  const heroRef = useRef<HTMLElement>(null);
+  return (
+    <div className="bg-background text-foreground min-h-screen">
+      <Navbar />
+      <main>
+        <Hero scrollRef={heroRef} />
+        <ServicesBento />
+        <Pourquoi />
+        <Process />
+        <Stats />
+        <Testimonials />
+        <Faq />
+        <CtaFooter />
+      </main>
+    </div>
+  );
+}
+```
+
+---
+
+## 22. ANTI-SLOP GUARDRAILS
+
+1. No emoji anywhere.
+2. No default violet/purple gradients. Palette: ochre + terra + cream + ink.
+3. No `shadow-2xl` on cards.
+4. No `rounded-3xl` on buttons. Buttons: `rounded-full`. Cards: `rounded-2xl`.
+5. No `lorem ipsum`. Unfilled placeholders: `[TODO: {{PLACEHOLDER_NAME}}]`.
+6. No `text-center` on body paragraphs except hero and CTA section.
+7. Headings: `font-display uppercase` OR `font-display italic` — never both, never sentence-case serif on dark.
+8. Every section: badge + BlurText heading + sub (except hero and footer).
+9. No icons outside lucide-react.
+10. No `<video>` in the hero. Canvas only.
+11. No transition `duration > 0.9s`.
+12. No console.log, commented-out code, empty files, unused imports.
+13. Site language is `{{LANG}}`. Do not auto-translate.
+14. Mobile 375px: no horizontal scroll, everything must render.
+15. Accessibility: focus rings on all interactive elements. Canvas: `aria-hidden="true"` + `.sr-only` sibling.
+
+---
+
+## 23. VERIFICATION CHECKLIST
+
+- [ ] `npm run dev` — no error, prints localhost URL
+- [ ] `npm run build` — no TS/Vite error
+- [ ] First frame renders within 300ms
+- [ ] Scroll scrubs canvas smoothly
+- [ ] Marquee rows loop seamlessly
+- [ ] FAQ accordion opens/closes
+- [ ] Navbar reduces `top-4` → `top-2` on scroll > 40px
+- [ ] Mobile 375px: no overflow, bento collapses, marquee animates
+- [ ] No React warnings in console
+- [ ] No 404s on frame URLs
+- [ ] Lighthouse Performance >= 85 desktop
+- [ ] LCP < 2.5s (frame_0001 preloaded in index.html)
+
+---
+
+## 24. FINAL NOTE
+
+You receive this entire document as one prompt. Do not ask clarifying questions. Do not trim sections. Do not substitute Next.js for Vite. Do not swap Framer Motion for GSAP. Do not skip the scroll-scrub canvas — that is the difference between a great site and a generic one.
+
+If a `{{PLACEHOLDER}}` is empty, output a clearly visible `[TODO]` marker. Do not invent filler.
+
+**Build it.**