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,98 @@
+"use client";
+
+import { useActionState } from "react";
+import { useFormStatus } from "react-dom";
+import { motion } from "framer-motion";
+import { Spinner } from "../ui/Spinner";
+import { subscribe, type SubscribeState } from "@/app/actions/subscribe";
+import { EASE_OUT_EXPO } from "@/lib/motion";
+
+const initialState: SubscribeState = { status: "idle", message: "" };
+
+function SubmitButton() {
+  const { pending } = useFormStatus();
+  return (
+    <button
+      type="submit"
+      disabled={pending}
+      className="sheen relative inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden bg-accent px-6 py-3 font-display text-sm tracking-widest text-background transition duration-200 ease-out hover:-translate-y-0.5 hover:bg-foreground hover:shadow-[0_14px_30px_-14px_rgba(196,184,150,0.6)] active:scale-[0.97] disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:translate-y-0 disabled:hover:shadow-none"
+    >
+      {pending && <Spinner />}
+      {pending ? "SENDING…" : "SUBSCRIBE"}
+    </button>
+  );
+}
+
+type Props = {
+  variant?: "default" | "compact";
+};
+
+export function Newsletter({ variant = "default" }: Props) {
+  const [state, formAction] = useActionState(subscribe, initialState);
+
+  const wrapperClass =
+    variant === "compact"
+      ? "w-full max-w-lg"
+      : "w-full max-w-lg mx-auto";
+
+  return (
+    <form
+      action={formAction}
+      className={wrapperClass}
+      aria-describedby="newsletter-status"
+    >
+      {/* honeypot for bots */}
+      <input
+        type="text"
+        name="website"
+        tabIndex={-1}
+        autoComplete="off"
+        className="hidden"
+        aria-hidden
+      />
+      <label htmlFor="newsletter-email" className="sr-only">
+        Email address
+      </label>
+      <div className="flex flex-col sm:flex-row gap-3">
+        <input
+          id="newsletter-email"
+          type="email"
+          name="email"
+          required
+          placeholder="your@email.com"
+          className="flex-1 min-w-0 bg-surface border border-border px-4 py-3 text-sm text-foreground placeholder:text-foreground-muted focus:outline-none focus:border-accent transition-colors duration-200"
+        />
+        <SubmitButton />
+      </div>
+
+      {/* The paragraph itself never unmounts — a live region that is replaced
+          on every state change is one a screen reader may not announce. Only
+          the text inside it is keyed, and that is what animates. */}
+      <p
+        id="newsletter-status"
+        role="status"
+        aria-live="polite"
+        className={`text-xs tracking-widest mt-3 ${
+          variant === "compact" ? "" : "text-center"
+        } ${
+          state.status === "success"
+            ? "text-accent"
+            : state.status === "error"
+              ? "text-red-400"
+              : "text-foreground-muted"
+        }`}
+      >
+        <motion.span
+          key={state.message || "idle"}
+          initial={{ opacity: 0, y: -4 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3, ease: EASE_OUT_EXPO }}
+          className="inline-block"
+        >
+          {state.message ||
+            "No spam. One devblog email per major update. Unsubscribe anytime."}
+        </motion.span>
+      </p>
+    </form>
+  );
+}