Ajoute une couche de micro-animations sur tout le site

Deux courbes partagées dans lib/motion.ts, pour que le CSS et Framer aient le même feeling, et quatre primitives que Tailwind ne sait pas exprimer : reflet de bouton, halo qui suit le curseur, soulignement qui se dessine, secousse d'erreur. Nouveaux composants : Stagger (les collections se distribuent une par une), Spotlight (trouve son parent tout seul, donc les cartes restent des composants serveur), ScrollProgress, BackToTop, Parallax, Spinner, CheckMark. Reveal accepte maintenant une direction. Côté rendu : le trait de nav glisse d'un onglet à l'autre, les cartes se soulèvent, le hero réagit au scroll, les piliers entrent en zig-zag, la lightbox glisse dans le sens demandé et les formulaires répondent. prefers-reduced-motion est respecté partout : Framer coupe via useReducedMotion, le CSS via la media query déjà en place. Le commit embarque aussi la réorganisation des composants par domaine qui était en cours dans l'arbre de travail — les deux étaient trop imbriquées pour être séparées proprement. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-02 16:04:41 +02:00
parent 8fd9ca88cc
commit 9b6638eb00
66 changed files with 3938 additions and 1469 deletions
@@ -0,0 +1,70 @@
+import { Section } from "../ui/Section";
+import { SectionHeading } from "../ui/SectionHeading";
+import { ButtonLink } from "../ui/ButtonLink";
+import { Reveal } from "../ui/Reveal";
+import { Newsletter } from "../forms/Newsletter";
+import { PostFeature } from "../devblog/PostFeature";
+import type { DevblogPost } from "@/lib/devblog";
+
+type Props = {
+  /** The single most recent post, or null while the devblog is empty. */
+  latest: DevblogPost | null;
+};
+
+/**
+ * The last band before the footer, and the only conversion point on the page.
+ *
+ * It replaces the old "follow the journey" block, which framed a full section
+ * — eyebrow, display title, lead, button — around a list that currently holds
+ * one entry, and so read as an empty section. Here the latest post is a single
+ * deliberate panel next to the newsletter form: it looks intentional with one
+ * post, and stays correct once there are twenty.
+ */
+export function Dispatch({ latest }: Props) {
+  return (
+    <div className="relative isolate overflow-hidden border-t border-border">
+      <div
+        aria-hidden
+        className="absolute inset-x-0 top-0 -z-10 h-[60%] bg-[radial-gradient(70%_100%_at_50%_0%,rgba(196,184,150,0.09),transparent_70%)]"
+      />
+
+      <Section>
+        <Reveal>
+          <SectionHeading
+            eyebrow="DEVBLOG"
+            title="BUILT IN THE OPEN"
+            lead="Design decisions, milestones and the occasional mistake, written down as they happen."
+            action={
+              <ButtonLink href="/devblog" variant="outline">
+                ALL POSTS
+              </ButtonLink>
+            }
+          />
+        </Reveal>
+
+        <Reveal delay={0.1}>
+          <div className="mt-12 grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
+            {latest && <PostFeature post={latest} />}
+
+            <div
+              className={`flex flex-col justify-center rounded-2xl border border-border bg-surface p-8 lg:p-10 ${
+                latest ? "" : "lg:col-span-2"
+              }`}
+            >
+              <h3 className="font-display text-2xl tracking-wider sm:text-3xl">
+                GET IT BY EMAIL
+              </h3>
+              <p className="mt-4 leading-relaxed text-foreground-muted">
+                One mail per major update. No launch countdowns, no noise, just
+                the build as it happens.
+              </p>
+              <div className="mt-8">
+                <Newsletter variant="compact" />
+              </div>
+            </div>
+          </div>
+        </Reveal>
+      </Section>
+    </div>
+  );
+}