feat: complete agency site build (Phases 1-7)

Full Next.js 16 + Payload CMS 3.x agency site with:
- Homepage: Hero, TrustBar, Services, Configurator wizard, Process,
  Selected Works, Philosophy, CTA Banner
- Sub-pages: /services (3 pillars + AI Layer), /work/[slug] (case
  studies), /about (philosophy + story)
- Configurator: 3-step wizard with AI brief generation API
- i18n: Full EN/FR bilingual with next-intl
- Design system: Cormorant Garamond + Inter, celestial blue palette,
  glassmorphism nav, Framer Motion animations
- Payload CMS collections: Projects, Services, Submissions, Media

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/sections/Configurator.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { motion } from 'framer-motion';
+import { revealVariants, staggerContainer, viewportOnce } from '@/lib/animations';
+import WizardContainer from '@/components/configurator/WizardContainer';
+
+// ─── Step indicator dot ───────────────────────────────────────────────────────
+
+interface StepDotProps {
+  index: number;
+  label: string;
+}
+
+function StepDot({ index, label }: StepDotProps) {
+  return (
+    <motion.div variants={revealVariants} className="flex items-center gap-3">
+      <div className="w-5 h-5 rounded-full border border-outline-variant/60 bg-surface-high flex items-center justify-center flex-shrink-0">
+        <span className="text-[10px] font-semibold text-outline">{index}</span>
+      </div>
+      <span className="text-sm text-outline">{label}</span>
+    </motion.div>
+  );
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export default function Configurator() {
+  const t = useTranslations('configurator');
+
+  const steps = [
+    t('step1.title'),
+    t('step2.title'),
+    t('step3.title'),
+  ];
+
+  return (
+    <section id="configure" className="bg-surface-low py-24">
+      <div className="container mx-auto px-6">
+        <div className="grid grid-cols-1 gap-12 lg:grid-cols-12">
+
+          {/* ── Left: Sticky context panel ─────────────────────────────── */}
+          <div className="lg:col-span-5">
+            <div className="lg:sticky lg:top-24">
+              <motion.div
+                variants={staggerContainer}
+                initial="hidden"
+                whileInView="visible"
+                viewport={viewportOnce}
+                className="flex flex-col gap-6"
+              >
+                {/* Eyebrow */}
+                <motion.span
+                  variants={revealVariants}
+                  className="label-md text-primary"
+                >
+                  {t('eyebrow')}
+                </motion.span>
+
+                {/* H2 */}
+                <motion.h2
+                  variants={revealVariants}
+                  className="font-serif text-4xl font-semibold tracking-headline text-on-surface leading-tight md:text-5xl"
+                >
+                  {t('title')}
+                </motion.h2>
+
+                {/* Description */}
+                <motion.p
+                  variants={revealVariants}
+                  className="text-base text-outline leading-relaxed max-w-sm"
+                >
+                  {t('description')}
+                </motion.p>
+
+                {/* Step indicators */}
+                <motion.div
+                  variants={revealVariants}
+                  className="flex flex-col gap-3 pt-2"
+                >
+                  <p className="text-xs font-semibold uppercase tracking-label text-outline/70">
+                    How it works
+                  </p>
+                  <div className="flex flex-col gap-2.5">
+                    {steps.map((step, i) => (
+                      <StepDot key={i} index={i + 1} label={step} />
+                    ))}
+                  </div>
+                </motion.div>
+
+                {/* Trust signal */}
+                <motion.div
+                  variants={revealVariants}
+                  className="pt-2 flex items-center gap-2.5"
+                >
+                  <div className="h-px flex-1 bg-outline-variant/40" />
+                  <p className="text-xs text-outline">No commitment required</p>
+                  <div className="h-px flex-1 bg-outline-variant/40" />
+                </motion.div>
+              </motion.div>
+            </div>
+          </div>
+
+          {/* ── Right: Wizard ───────────────────────────────────────────── */}
+          <div className="lg:col-span-7">
+            <div className="rounded-2xl bg-surface-high shadow-subtle p-6 sm:p-8">
+              <WizardContainer />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}