website poc

apps/website/components/landing/AlternatingSection.tsx

@@ -0,0 +1,88 @@
+import { ReactNode } from 'react';
+import Container from '@/components/ui/Container';
+
+interface AlternatingSectionProps {
+  heading: string;
+  description: string | ReactNode;
+  mockup: ReactNode;
+  layout: 'text-left' | 'text-right';
+  backgroundImage?: string;
+}
+
+export default function AlternatingSection({
+  heading,
+  description,
+  mockup,
+  layout,
+  backgroundImage
+}: AlternatingSectionProps) {
+  return (
+    <section className="relative overflow-hidden bg-deep-graphite px-6 py-24 sm:py-32 lg:px-8">
+      {backgroundImage && (
+        <div
+          className="absolute inset-0 bg-cover bg-center"
+          style={{
+            backgroundImage: `url(${backgroundImage})`,
+            maskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.06) 40%, transparent 70%)',
+            WebkitMaskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.06) 40%, transparent 70%)'
+          }}
+        />
+      )}
+      <Container size="lg" className="relative z-10">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
+          {layout === 'text-left' ? (
+            <>
+              {/* Text Content - Left */}
+              <div className="space-y-6">
+                <h2 className="text-3xl sm:text-4xl font-semibold text-white leading-tight">
+                  {heading}
+                </h2>
+                <div className="text-lg text-slate-400 font-light leading-relaxed space-y-4">
+                  {description}
+                </div>
+              </div>
+
+              {/* Mockup - Right (fade right) */}
+              <div className="relative">
+                <div
+                  className="w-full h-[400px] lg:h-[500px]"
+                  style={{
+                    maskImage: 'linear-gradient(to right, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)',
+                    WebkitMaskImage: 'linear-gradient(to right, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)'
+                  }}
+                >
+                  {mockup}
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              {/* Mockup - Left (fade left) */}
+              <div className="relative order-2 lg:order-1">
+                <div
+                  className="w-full h-[400px] lg:h-[500px]"
+                  style={{
+                    maskImage: 'linear-gradient(to left, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)',
+                    WebkitMaskImage: 'linear-gradient(to left, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)'
+                  }}
+                >
+                  {mockup}
+                </div>
+              </div>
+
+              {/* Text Content - Right */}
+              <div className="space-y-6 order-1 lg:order-2">
+                <h2 className="text-3xl sm:text-4xl font-semibold text-white leading-tight">
+                  {heading}
+                </h2>
+                <div className="text-lg text-slate-400 font-light leading-relaxed space-y-4">
+                  {description}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </Container>
+    </section>
+  );
+}

apps/website/components/landing/EmailCapture.tsx

@@ -3,24 +3,26 @@
 import { useState, FormEvent } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
+type FeedbackState =
+  | { type: 'idle' }
+  | { type: 'loading' }
+  | { type: 'success'; message: string }
+  | { type: 'error'; message: string; canRetry?: boolean; retryAfter?: number }
+  | { type: 'info'; message: string };
+
 export default function EmailCapture() {
   const [email, setEmail] = useState('');
-  const [isValid, setIsValid] = useState(true);
-  const [submitted, setSubmitted] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [errorMessage, setErrorMessage] = useState('');
+  const [feedback, setFeedback] = useState<FeedbackState>({ type: 'idle' });
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     
     if (!email) {
-      setIsValid(false);
-      setErrorMessage('Email is required');
+      setFeedback({ type: 'error', message: "That email doesn't look right." });
       return;
     }
 
-    setIsSubmitting(true);
-    setErrorMessage('');
+    setFeedback({ type: 'loading' });
 
     try {
       const response = await fetch('/api/signup', {
@@ -34,47 +36,80 @@ export default function EmailCapture() {
       const data = await response.json();
 
       if (!response.ok) {
-        setIsValid(false);
-        setErrorMessage(data.error || 'Failed to submit email');
+        if (response.status === 429) {
+          setFeedback({
+            type: 'error',
+            message: data.error,
+            retryAfter: data.retryAfter
+          });
+        } else if (response.status === 409) {
+          setFeedback({ type: 'info', message: data.error });
+          setTimeout(() => setFeedback({ type: 'idle' }), 4000);
+        } else {
+          setFeedback({
+            type: 'error',
+            message: data.error || 'Something broke. Try again?',
+            canRetry: true
+          });
+        }
         return;
       }
 
-      setSubmitted(true);
+      setFeedback({ type: 'success', message: data.message });
       setEmail('');
+      setTimeout(() => setFeedback({ type: 'idle' }), 5000);
     } catch (error) {
-      setIsValid(false);
-      setErrorMessage('Network error. Please try again.');
+      setFeedback({
+        type: 'error',
+        message: 'Something broke. Try again?',
+        canRetry: true
+      });
       console.error('Signup error:', error);
-    } finally {
-      setIsSubmitting(false);
     }
   };
 
+  const getMessageColor = () => {
+    if (feedback.type === 'success') return 'text-performance-green';
+    if (feedback.type === 'info') return 'text-gray-400';
+    if (feedback.type === 'error' && feedback.retryAfter) return 'text-warning-amber';
+    if (feedback.type === 'error') return 'text-red-400';
+    return '';
+  };
+
+  const getGlowColor = () => {
+    if (feedback.type === 'success') return 'shadow-[0_0_80px_rgba(111,227,122,0.15)]';
+    if (feedback.type === 'info') return 'shadow-[0_0_80px_rgba(34,38,42,0.15)]';
+    if (feedback.type === 'error' && feedback.retryAfter) return 'shadow-[0_0_80px_rgba(255,197,86,0.15)]';
+    if (feedback.type === 'error') return 'shadow-[0_0_80px_rgba(248,113,113,0.15)]';
+    return 'shadow-[0_0_80px_rgba(25,140,255,0.15)]';
+  };
+
   return (
     <section id="early-access" className="relative py-24 bg-gradient-to-b from-deep-graphite to-iron-gray">
       <div className="max-w-2xl mx-auto px-6">
         <AnimatePresence mode="wait">
-          {submitted ? (
+          {feedback.type === 'success' ? (
             <motion.div
               key="success"
-              initial={{ opacity: 0, scale: 0.95 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ duration: 0.3 }}
-              className="relative rounded-xl bg-gradient-to-br from-iron-gray via-deep-graphite to-iron-gray p-12 text-center border border-charcoal-outline shadow-[0_0_80px_rgba(111,227,122,0.15)]"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.25 }}
+              className={`relative rounded-xl bg-gradient-to-br from-iron-gray via-deep-graphite to-iron-gray p-12 text-center border border-charcoal-outline ${getGlowColor()}`}
             >
               <motion.div
                 initial={{ scale: 0 }}
                 animate={{ scale: 1 }}
-                transition={{ delay: 0.2, type: 'spring', stiffness: 200 }}
+                transition={{ delay: 0.15, type: 'spring', stiffness: 200, damping: 15 }}
                 className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-performance-green/20 mb-6"
               >
                 <svg className="w-8 h-8 text-performance-green" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                 </svg>
               </motion.div>
-              <h2 className="text-3xl font-semibold text-white mb-4">You&apos;re on the list!</h2>
+              <h2 className="text-3xl font-semibold text-white mb-4">{feedback.message}</h2>
               <p className="text-base text-gray-400 font-light">
-                Check your email for confirmation. We&apos;ll notify you when GridPilot launches.
+                I'll send updates as I build. Zero spam, zero BS.
               </p>
             </motion.div>
           ) : (
@@ -82,48 +117,72 @@ export default function EmailCapture() {
               key="form"
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
-              className="relative rounded-xl bg-gradient-to-br from-iron-gray via-deep-graphite to-iron-gray p-8 md:p-16 border border-charcoal-outline shadow-[0_0_80px_rgba(25,140,255,0.15)]"
+              className={`relative rounded-xl bg-gradient-to-br from-iron-gray via-deep-graphite to-iron-gray p-8 md:p-16 border border-charcoal-outline transition-shadow duration-300 ${getGlowColor()}`}
             >
               <div className="text-center mb-10">
-                <h2 className="text-4xl md:text-5xl font-semibold text-white mb-3">
-                  Join the Waitlist
+                <h2 className="text-3xl md:text-4xl font-semibold text-white mb-3">
+                  Let me know if this resonates
                 </h2>
                 <div className="w-32 h-1 bg-gradient-to-r from-primary-blue to-neon-aqua mx-auto mb-6 rounded-full" />
-                <p className="text-lg text-gray-400 font-light max-w-lg mx-auto">
-                  Be among the first to experience GridPilot when we launch early access.
+                <p className="text-lg text-gray-400 font-light max-w-lg mx-auto mb-4">
+                  I'm building GridPilot because I got tired of the chaos. If this resonates with you, drop your email.
+                </p>
+                <p className="text-base text-gray-400/80 font-light max-w-lg mx-auto">
+                  It means someone out there cares about the same problems. That keeps me going.
                 </p>
               </div>
 
               <form onSubmit={handleSubmit} className="space-y-6">
                 <div className="flex flex-col sm:flex-row gap-4">
-                  <div className="flex-1">
+                  <div className="flex-1 relative">
                     <input
                       type="email"
                       value={email}
                       onChange={(e) => {
                         setEmail(e.target.value);
-                        setIsValid(true);
-                        setErrorMessage('');
+                        if (feedback.type !== 'loading') {
+                          setFeedback({ type: 'idle' });
+                        }
                       }}
                       placeholder="your@email.com"
-                      disabled={isSubmitting}
+                      disabled={feedback.type === 'loading'}
                       className={`w-full px-6 py-4 rounded-lg bg-iron-gray text-white placeholder-gray-500 border transition-all duration-150 ${
-                        !isValid
+                        feedback.type === 'error' && !feedback.retryAfter
                           ? 'border-red-500 focus:ring-2 focus:ring-red-500'
+                          : feedback.type === 'error' && feedback.retryAfter
+                          ? 'border-warning-amber focus:ring-2 focus:ring-warning-amber/50'
                           : 'border-charcoal-outline focus:border-neon-aqua focus:ring-2 focus:ring-neon-aqua/50'
                       } hover:scale-[1.01] disabled:opacity-50 disabled:cursor-not-allowed`}
                       aria-label="Email address"
                     />
-                    {!isValid && errorMessage && (
-                      <p className="mt-2 text-sm text-red-400">{errorMessage}</p>
-                    )}
+                    <AnimatePresence>
+                      {(feedback.type === 'error' || feedback.type === 'info') && (
+                        <motion.p
+                          initial={{ opacity: 0, y: -10 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          exit={{ opacity: 0 }}
+                          transition={{ duration: 0.15 }}
+                          className={`mt-2 text-sm ${getMessageColor()}`}
+                        >
+                          {feedback.message}
+                          {feedback.type === 'error' && feedback.retryAfter && (
+                            <span className="block mt-1 text-xs text-gray-500">
+                              Retry in {feedback.retryAfter}s
+                            </span>
+                          )}
+                        </motion.p>
+                      )}
+                    </AnimatePresence>
                   </div>
-                  <button
+                  <motion.button
                     type="submit"
-                    disabled={isSubmitting}
-                    className="px-8 py-4 rounded-full bg-gradient-to-r from-primary-blue to-neon-aqua text-white font-semibold transition-all duration-150 hover:shadow-glow-strong hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 whitespace-nowrap"
+                    disabled={feedback.type === 'loading'}
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                    transition={{ duration: 0.15 }}
+                    className="px-8 py-4 rounded-full bg-gradient-to-r from-primary-blue to-neon-aqua text-white font-semibold transition-all duration-150 hover:shadow-glow-strong active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 whitespace-nowrap"
                   >
-                    {isSubmitting ? (
+                    {feedback.type === 'loading' ? (
                       <span className="flex items-center gap-2">
                         <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
                           <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
@@ -132,9 +191,9 @@ export default function EmailCapture() {
                         Joining...
                       </span>
                     ) : (
-                      'Get Early Access'
+                      'Count me in'
                     )}
-                  </button>
+                  </motion.button>
                 </div>
               </form>
 
@@ -148,19 +207,19 @@ export default function EmailCapture() {
                   <svg className="w-4 h-4 text-performance-green" fill="currentColor" viewBox="0 0 20 20">
                     <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                   </svg>
-                  <span>No spam, ever</span>
+                  <span>I'll send updates as I build</span>
                 </div>
                 <div className="flex items-center gap-2">
                   <svg className="w-4 h-4 text-performance-green" fill="currentColor" viewBox="0 0 20 20">
                     <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                   </svg>
-                  <span>Early feature access</span>
+                  <span>You can tell me what matters most</span>
                 </div>
                 <div className="flex items-center gap-2">
                   <svg className="w-4 h-4 text-performance-green" fill="currentColor" viewBox="0 0 20 20">
                     <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                   </svg>
-                  <span>Priority support</span>
+                  <span>Zero spam, zero BS</span>
                 </div>
               </motion.div>
             </motion.div>

apps/website/components/landing/Footer.tsx

@@ -16,16 +16,6 @@ export default function Footer() {
           <div>
             <h4 className="text-sm font-semibold text-white mb-4">Product</h4>
             <ul className="space-y-3">
-              <li>
-                <a href="#features" className="text-sm text-gray-400 hover:text-primary-blue transition-colors duration-150 font-light">
-                  Features
-                </a>
-              </li>
-              <li>
-                <span className="text-sm text-gray-400 font-light cursor-not-allowed opacity-50">
-                  Pricing <span className="text-xs">(coming soon)</span>
-                </span>
-              </li>
               <li>
                 <span className="text-sm text-gray-400 font-light cursor-not-allowed opacity-50">
                   Roadmap <span className="text-xs">(coming soon)</span>
@@ -52,11 +42,6 @@ export default function Footer() {
                   Terms <span className="text-xs">(coming soon)</span>
                 </span>
               </li>
-              <li>
-                <span className="text-sm text-gray-400 font-light cursor-not-allowed opacity-50">
-                  Status <span className="text-xs">(coming soon)</span>
-                </span>
-              </li>
             </ul>
           </div>
         </div>

apps/website/components/landing/Hero.tsx

@@ -5,8 +5,18 @@ import Heading from '@/components/ui/Heading';
 export default function Hero() {
   return (
     <section className="relative overflow-hidden bg-deep-graphite px-6 py-24 sm:py-32 lg:px-8">
+      {/* Background image layer */}
+      <div
+        className="absolute inset-0 bg-cover bg-center"
+        style={{
+          backgroundImage: 'url(/images/porsche.jpeg)',
+          maskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.08) 40%, transparent 70%)',
+          WebkitMaskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.08) 40%, transparent 70%)'
+        }}
+      />
+      
       {/* Subtle radial gradient overlay */}
-      <div className="absolute inset-0 bg-gradient-radial from-primary-blue/10 via-transparent to-transparent opacity-40" />
+      <div className="absolute inset-0 bg-gradient-radial from-primary-blue/10 via-transparent to-transparent opacity-40 pointer-events-none" />
       
       {/* Optional motorsport grid pattern */}
       <div className="absolute inset-0 opacity-[0.015]" style={{
@@ -15,14 +25,39 @@ export default function Hero() {
         backgroundSize: '40px 40px'
       }} />
       
-      <Container size="sm" center>
+      <Container size="sm" center className="relative z-10">
         <Heading level={1} className="text-white leading-tight tracking-tight">
-          Where iRacing League Racing Finally Comes Together
+          League racing is incredible. What's missing is everything around it.
         </Heading>
-        <p className="mt-8 text-lg leading-relaxed text-slate-400 font-light">
-          No more Discord chaos. No more spreadsheets. No more manual standings.
-          GridPilot is the dedicated home for serious iRacing leagues that want structure over chaos.
-        </p>
+        <div className="mt-8 text-lg leading-relaxed text-slate-400 font-light">
+          <p>
+            If you've been in any league, you know the feeling:
+          </p>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-6 max-w-2xl mx-auto">
+            <div className="flex items-center gap-3">
+              <span className="text-primary-blue text-xl">•</span>
+              <span>Results scattered across Discord</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className="text-primary-blue text-xl">•</span>
+              <span>No long-term identity</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className="text-primary-blue text-xl">•</span>
+              <span>No career progression</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className="text-primary-blue text-xl">•</span>
+              <span>Forgotten after each season</span>
+            </div>
+          </div>
+          <p className="mt-8">
+            The ecosystem isn't built for this.
+          </p>
+          <p className="mt-4">
+            <strong className="text-white">GridPilot gives your league racing a real home.</strong>
+          </p>
+        </div>
         <div className="mt-12 flex items-center justify-center">
           <Button as="a" href="#early-access" className="shadow-glow hover:shadow-glow-strong transition-shadow duration-300">
             Get Early Access

apps/website/components/mockups/CareerProgressionMockup.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { motion, useReducedMotion } from 'framer-motion';
+
+export default function CareerProgressionMockup() {
+  const shouldReduceMotion = useReducedMotion();
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: { staggerChildren: shouldReduceMotion ? 0 : 0.08 }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, x: shouldReduceMotion ? 0 : -20 },
+    visible: { opacity: 1, x: 0 }
+  };
+
+  return (
+    <div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-8 overflow-hidden">
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="space-y-6"
+      >
+        {/* Driver Header */}
+        <motion.div variants={itemVariants} className="flex items-center gap-4 pb-6 border-b border-charcoal-outline">
+          <div className="h-16 w-16 bg-charcoal-outline rounded-full border-2 border-primary-blue/30"></div>
+          <div className="flex-1">
+            <div className="h-4 w-40 bg-white/10 rounded mb-2"></div>
+            <div className="flex items-center gap-3">
+              <div className="h-3 w-24 bg-primary-blue/20 rounded"></div>
+              <div className="h-3 w-20 bg-performance-green/20 rounded"></div>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Career Stats */}
+        <motion.div variants={itemVariants}>
+          <div className="text-sm font-semibold text-white/60 mb-3">Career Overview</div>
+          <div className="grid grid-cols-3 gap-3">
+            {[1, 2, 3].map((i) => (
+              <motion.div
+                key={i}
+                className="bg-iron-gray rounded-lg p-3 border border-charcoal-outline"
+                whileHover={shouldReduceMotion ? {} : {
+                  y: -2,
+                  boxShadow: '0 4px 16px rgba(0,0,0,0.3)',
+                  transition: { duration: 0.15 }
+                }}
+              >
+                <div className="h-6 w-12 bg-primary-blue/30 rounded mb-2 font-mono"></div>
+                <div className="h-2 w-16 bg-white/5 rounded"></div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Season Timeline */}
+        <motion.div variants={itemVariants}>
+          <div className="text-sm font-semibold text-white/60 mb-3">Season History</div>
+          <div className="space-y-2">
+            {[1, 2, 3].map((i) => (
+              <motion.div
+                key={i}
+                className="flex items-center gap-3 bg-iron-gray rounded-lg p-3 border border-charcoal-outline"
+                whileHover={shouldReduceMotion ? {} : {
+                  x: 4,
+                  boxShadow: '0 2px 12px rgba(25,140,255,0.2)',
+                  transition: { duration: 0.15 }
+                }}
+              >
+                <div className="h-8 w-8 bg-charcoal-outline rounded border border-primary-blue/20"></div>
+                <div className="flex-1">
+                  <div className="h-2.5 w-32 bg-white/10 rounded mb-1.5"></div>
+                  <div className="h-2 w-24 bg-white/5 rounded"></div>
+                </div>
+                <div className="flex gap-2">
+                  <div className="h-6 w-8 bg-performance-green/20 rounded text-center font-mono"></div>
+                  <div className="h-6 w-8 bg-primary-blue/20 rounded text-center font-mono"></div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Multi-League Badge */}
+        <motion.div variants={itemVariants}>
+          <div className="flex items-center gap-2 bg-charcoal-outline rounded-lg p-3 border border-primary-blue/30">
+            <div className="flex -space-x-2">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="h-6 w-6 bg-iron-gray rounded-full border-2 border-charcoal-outline"></div>
+              ))}
+            </div>
+            <div className="h-2 w-32 bg-white/5 rounded"></div>
+          </div>
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+}

apps/website/components/mockups/CompanionAutomationMockup.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { motion, useReducedMotion } from 'framer-motion';
+
+export default function CompanionAutomationMockup() {
+  const shouldReduceMotion = useReducedMotion();
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: { staggerChildren: shouldReduceMotion ? 0 : 0.12 }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 10 },
+    visible: { opacity: 1, y: 0 }
+  };
+
+  return (
+    <div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-8 overflow-hidden">
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="space-y-6"
+      >
+        {/* Companion App Header */}
+        <motion.div variants={itemVariants}>
+          <div className="flex items-center gap-3 mb-6">
+            <div className="h-10 w-10 bg-primary-blue/20 rounded-lg border border-primary-blue/40 flex items-center justify-center">
+              <div className="h-5 w-5 bg-primary-blue/60 rounded"></div>
+            </div>
+            <div>
+              <div className="text-sm font-semibold text-white">GridPilot Companion</div>
+              <div className="text-xs text-white/50">Session Creator</div>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Configuration Card */}
+        <motion.div 
+          variants={itemVariants}
+          className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline"
+        >
+          <div className="flex items-center justify-between mb-3">
+            <div className="text-xs text-white/60">Session Template</div>
+            <div className="h-5 w-20 bg-performance-green/30 rounded-full flex items-center justify-center">
+              <div className="text-xs text-performance-green">Ready</div>
+            </div>
+          </div>
+          
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <div className="h-2 w-2 bg-primary-blue rounded-full"></div>
+              <div className="h-2 w-32 bg-white/10 rounded"></div>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="h-2 w-2 bg-primary-blue rounded-full"></div>
+              <div className="h-2 w-28 bg-white/10 rounded"></div>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="h-2 w-2 bg-primary-blue rounded-full"></div>
+              <div className="h-2 w-36 bg-white/10 rounded"></div>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Browser Automation Visual */}
+        <motion.div 
+          variants={itemVariants}
+          className="relative bg-charcoal-outline rounded-lg p-4 border border-primary-blue/30 overflow-hidden"
+        >
+          {/* Browser Window Mockup */}
+          <div className="space-y-3">
+            <div className="flex items-center gap-2 pb-3 border-b border-white/10">
+              <div className="h-2 w-2 bg-white/20 rounded-full"></div>
+              <div className="h-2 w-2 bg-white/20 rounded-full"></div>
+              <div className="h-2 w-2 bg-white/20 rounded-full"></div>
+              <div className="flex-1 h-2 bg-white/5 rounded ml-2"></div>
+            </div>
+            
+            {/* Automation Steps */}
+            <div className="space-y-2">
+              {[1, 2, 3, 4].map((step, index) => (
+                <motion.div
+                  key={step}
+                  className="flex items-center gap-2"
+                  initial={{ opacity: 0, x: -10 }}
+                  animate={{ 
+                    opacity: 1, 
+                    x: 0,
+                    transition: { delay: shouldReduceMotion ? 0 : 0.5 + (index * 0.15) }
+                  }}
+                >
+                  <motion.div
+                    className="h-3 w-3 bg-performance-green/40 rounded-full flex items-center justify-center"
+                    animate={shouldReduceMotion ? {} : {
+                      scale: index === 3 ? [1, 1.2, 1] : 1,
+                      opacity: index === 3 ? [0.4, 1, 0.4] : 1
+                    }}
+                    transition={{ duration: 1.5, repeat: Infinity }}
+                  >
+                    <div className="h-1.5 w-1.5 bg-performance-green rounded-full"></div>
+                  </motion.div>
+                  <div className="h-2 w-full bg-white/5 rounded"></div>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+
+          {/* Automation Running Indicator */}
+          <motion.div
+            className="absolute top-2 right-2 flex items-center gap-2 bg-deep-graphite/80 backdrop-blur-sm px-3 py-1.5 rounded-full border border-primary-blue/30"
+            animate={shouldReduceMotion ? {} : {
+              boxShadow: [
+                '0 0 8px rgba(25,140,255,0.2)',
+                '0 0 16px rgba(25,140,255,0.4)',
+                '0 0 8px rgba(25,140,255,0.2)'
+              ]
+            }}
+            transition={{ duration: 2, repeat: Infinity }}
+          >
+            <motion.div
+              className="h-2 w-2 bg-primary-blue rounded-full"
+              animate={shouldReduceMotion ? {} : {
+                opacity: [1, 0.5, 1]
+              }}
+              transition={{ duration: 1.5, repeat: Infinity }}
+            />
+            <div className="text-xs text-primary-blue">Running</div>
+          </motion.div>
+        </motion.div>
+
+        {/* One-Click Action */}
+        <motion.div 
+          variants={itemVariants}
+          className="flex items-center justify-center"
+        >
+          <motion.div
+            className="bg-primary-blue/20 text-primary-blue px-6 py-2.5 rounded-lg border border-primary-blue/40 text-sm font-semibold"
+            whileHover={shouldReduceMotion ? {} : {
+              scale: 1.03,
+              boxShadow: '0 4px 24px rgba(25,140,255,0.3)',
+              transition: { duration: 0.15 }
+            }}
+          >
+            Create Session
+          </motion.div>
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+}

apps/website/components/mockups/RaceHistoryMockup.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { motion, useReducedMotion } from 'framer-motion';
+
+export default function RaceHistoryMockup() {
+  const shouldReduceMotion = useReducedMotion();
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: { staggerChildren: shouldReduceMotion ? 0 : 0.15 }
+    }
+  };
+
+  const raceCardVariants = {
+    hidden: { opacity: 0, x: shouldReduceMotion ? 0 : -20 },
+    visible: { opacity: 1, x: 0 }
+  };
+
+  const profileSectionVariants = {
+    hidden: { opacity: 0, x: shouldReduceMotion ? 0 : 20 },
+    visible: { 
+      opacity: 1, 
+      x: 0,
+      transition: { delay: shouldReduceMotion ? 0 : 0.2 }
+    }
+  };
+
+  const connectionLineVariants = {
+    hidden: { scaleX: 0, opacity: 0 },
+    visible: {
+      scaleX: 1,
+      opacity: 0.3,
+      transition: { duration: 0.6 }
+    }
+  };
+
+  return (
+    <div className="relative w-full h-full bg-gradient-to-br from-deep-graphite via-iron-gray to-deep-graphite rounded-lg p-8 overflow-hidden flex items-center justify-center">
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="relative w-full max-w-4xl"
+      >
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+          {/* Left: Race Result Card */}
+          <motion.div variants={raceCardVariants} className="relative">
+            <div className="bg-iron-gray rounded-lg p-6 border border-primary-blue/40 shadow-[0_0_24px_rgba(25,140,255,0.2)]">
+              <div className="flex items-center gap-4 mb-4">
+                <div className="h-16 w-16 bg-charcoal-outline rounded-lg border border-primary-blue/30 flex items-center justify-center">
+                  <div className="text-white text-2xl font-bold">P3</div>
+                </div>
+                <div className="flex-1">
+                  <div className="text-lg font-semibold text-white mb-1">Watkins Glen</div>
+                  <div className="text-sm text-white/50">GT3 Sprint • Race 8</div>
+                </div>
+              </div>
+              <div className="space-y-2 pt-4 border-t border-charcoal-outline">
+                <div className="flex justify-between text-sm">
+                  <span className="text-white/50">Finish</span>
+                  <span className="text-white font-medium">3rd of 24</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-white/50">Incidents</span>
+                  <span className="text-performance-green font-medium">0x</span>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+
+          {/* Connection Arrow */}
+          <motion.div 
+            variants={connectionLineVariants}
+            className="hidden lg:block absolute left-1/2 top-1/2 -translate-y-1/2 w-16 h-0.5 bg-gradient-to-r from-primary-blue to-performance-green origin-left"
+            style={{ transformOrigin: 'left center' }}
+          >
+            <div className="absolute right-0 top-1/2 -translate-y-1/2">
+              <div className="w-2 h-2 bg-performance-green rotate-45 transform translate-x-1"></div>
+            </div>
+          </motion.div>
+
+          {/* Right: Unified Profile Preview */}
+          <motion.div variants={profileSectionVariants} className="relative">
+            <div className="bg-iron-gray/80 backdrop-blur-sm rounded-lg p-6 border border-charcoal-outline space-y-4">
+              <div className="text-sm font-semibold text-white/70 mb-3">Updates Your Profile</div>
+              
+              {/* Stats Section */}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between py-2 px-3 bg-deep-graphite/50 rounded border border-primary-blue/20">
+                  <span className="text-xs text-white/50">Career Stats</span>
+                  <div className="flex items-center gap-2">
+                    <div className="h-1.5 w-16 bg-primary-blue/40 rounded"></div>
+                    <span className="text-xs text-performance-green">↑</span>
+                  </div>
+                </div>
+
+                {/* Team Points */}
+                <div className="flex items-center justify-between py-2 px-3 bg-deep-graphite/50 rounded border border-performance-green/20">
+                  <span className="text-xs text-white/50">Team Points</span>
+                  <div className="flex items-center gap-2">
+                    <div className="h-1.5 w-12 bg-performance-green/40 rounded"></div>
+                    <span className="text-xs text-performance-green">+18</span>
+                  </div>
+                </div>
+
+                {/* Rating */}
+                <div className="flex items-center justify-between py-2 px-3 bg-deep-graphite/50 rounded border border-subtle-neon-aqua/20">
+                  <span className="text-xs text-white/50">Rating</span>
+                  <div className="flex items-center gap-2">
+                    <div className="h-1.5 w-10 bg-subtle-neon-aqua/40 rounded"></div>
+                    <span className="text-xs text-performance-green">+12</span>
+                  </div>
+                </div>
+
+                {/* Season History */}
+                <div className="flex items-center justify-between py-2 px-3 bg-deep-graphite/50 rounded border border-white/10">
+                  <span className="text-xs text-white/50">Season Record</span>
+                  <div className="flex items-center gap-2">
+                    <div className="h-1.5 w-14 bg-white/20 rounded"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </motion.div>
+    </div>
+  );
+}

apps/website/components/mockups/SimPlatformMockup.tsx

@@ -0,0 +1,89 @@
+export default function SimPlatformMockup() {
+  return (
+    <div className="relative w-full max-w-3xl mx-auto">
+      <div className="bg-iron-gray border border-charcoal-outline rounded-lg p-6 shadow-2xl">
+        <div className="space-y-4">
+          <div className="flex items-center justify-between pb-4 border-b border-charcoal-outline">
+            <div className="text-sm font-semibold text-slate-300">Platform Support</div>
+            <div className="text-xs text-slate-500">Active: 1 | Planned: 3</div>
+          </div>
+          
+          <div className="grid grid-cols-2 gap-3">
+            {/* iRacing - Active */}
+            <div className="bg-deep-graphite border-2 border-primary-blue rounded-lg p-4 relative overflow-hidden">
+              <div className="absolute top-2 right-2">
+                <div className="w-2 h-2 rounded-full bg-performance-green animate-pulse" />
+              </div>
+              <div className="flex items-center gap-3">
+                <div className="w-12 h-12 rounded bg-primary-blue/10 flex items-center justify-center">
+                  <span className="text-2xl font-bold text-primary-blue">iR</span>
+                </div>
+                <div>
+                  <div className="font-semibold text-white">iRacing</div>
+                  <div className="text-xs text-performance-green">Active</div>
+                </div>
+              </div>
+              <div className="mt-3 text-xs text-slate-400">
+                Full integration
+              </div>
+            </div>
+
+            {/* ACC - Future */}
+            <div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-4 opacity-40">
+              <div className="flex items-center gap-3">
+                <div className="w-12 h-12 rounded bg-slate-700/20 flex items-center justify-center">
+                  <span className="text-2xl font-bold text-slate-600">AC</span>
+                </div>
+                <div>
+                  <div className="font-semibold text-slate-500">ACC</div>
+                  <div className="text-xs text-slate-600">Planned</div>
+                </div>
+              </div>
+              <div className="mt-3 text-xs text-slate-600">
+                Coming later
+              </div>
+            </div>
+
+            {/* rFactor 2 - Future */}
+            <div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-4 opacity-40">
+              <div className="flex items-center gap-3">
+                <div className="w-12 h-12 rounded bg-slate-700/20 flex items-center justify-center">
+                  <span className="text-2xl font-bold text-slate-600">rF</span>
+                </div>
+                <div>
+                  <div className="font-semibold text-slate-500">rFactor 2</div>
+                  <div className="text-xs text-slate-600">Planned</div>
+                </div>
+              </div>
+              <div className="mt-3 text-xs text-slate-600">
+                Coming later
+              </div>
+            </div>
+
+            {/* LMU - Future */}
+            <div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-4 opacity-40">
+              <div className="flex items-center gap-3">
+                <div className="w-12 h-12 rounded bg-slate-700/20 flex items-center justify-center">
+                  <span className="text-2xl font-bold text-slate-600">LM</span>
+                </div>
+                <div>
+                  <div className="font-semibold text-slate-500">Le Mans Ult.</div>
+                  <div className="text-xs text-slate-600">Planned</div>
+                </div>
+              </div>
+              <div className="mt-3 text-xs text-slate-600">
+                Coming later
+              </div>
+            </div>
+          </div>
+
+          <div className="pt-4 border-t border-charcoal-outline">
+            <div className="text-xs text-slate-500 text-center">
+              Your identity stays with you across platforms
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}