Add TestFlight signup banner to promo site (Snapchat#22)

Add a prominent, highlighted TestFlight early access section to the
Download page that encourages users to sign up for beta testing.
Features animated gradient border, pulsing glow effect, and clear
messaging about getting new releases 48 hours before App Store.

Co-authored-by: Claude <noreply@anthropic.com>

Author: jfuginay

website/components/Download.tsx

@@ -18,6 +18,62 @@ export default function Download() {
           </p>
         </div>
 
+        {/* TestFlight Early Access Banner */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="mb-12"
+        >
+          <div className="relative overflow-hidden rounded-2xl">
+            {/* Animated gradient border */}
+            <div className="absolute inset-0 bg-gradient-to-r from-omni-olive via-omni-teal to-omni-olive bg-[length:200%_100%] animate-gradient-x rounded-2xl" />
+            <div className="relative m-[2px] bg-omni-black rounded-2xl p-8">
+              <div className="flex flex-col md:flex-row items-center justify-between gap-6">
+                <div className="flex items-center gap-4">
+                  <div className="relative">
+                    <motion.div
+                      animate={{
+                        boxShadow: [
+                          '0 0 20px rgba(95,171,165,0.5)',
+                          '0 0 40px rgba(95,171,165,0.8)',
+                          '0 0 20px rgba(95,171,165,0.5)',
+                        ],
+                      }}
+                      transition={{ duration: 2, repeat: Infinity }}
+                      className="w-16 h-16 bg-gradient-to-br from-omni-teal to-omni-olive rounded-xl flex items-center justify-center"
+                    >
+                      <svg className="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
+                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+                      </svg>
+                    </motion.div>
+                    <span className="absolute -top-1 -right-1 px-2 py-0.5 bg-omni-teal text-xs font-bold rounded-full text-white">BETA</span>
+                  </div>
+                  <div className="text-left">
+                    <h3 className="text-2xl font-bold text-white mb-1">Get Early Access via TestFlight</h3>
+                    <p className="text-gray-400">
+                      Test new features <span className="text-omni-teal font-semibold">48 hours before</span> they hit the App Store
+                    </p>
+                  </div>
+                </div>
+                <motion.a
+                  href="https://testflight.apple.com/join/SzxQGmMM"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  className="px-8 py-4 bg-gradient-to-r from-omni-teal to-omni-olive text-white font-bold rounded-full hover:shadow-2xl transition-all duration-300 glow-teal whitespace-nowrap flex items-center gap-2"
+                >
+                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
+                  </svg>
+                  Join TestFlight
+                </motion.a>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+
         <div className="grid md:grid-cols-2 gap-8 mb-16">
           <motion.div
             initial={{ opacity: 0, x: -50 }}

website/tailwind.config.ts

@@ -15,6 +15,7 @@ const config: Config = {
           'olive-dark': "#4A5C3A", // Darker olive
           teal: "#5FABA5",         // Secondary accent - muted teal
           'teal-dark': "#4A9B9B",  // Darker teal
+          black: "#0D0D0D",        // Deep black for contrast
           charcoal: "#1A1A1A",     // Primary dark background
           slate: "#2A2A2A",        // Secondary background
           'slate-light': "#3A3A3A",// Lighter slate for cards
@@ -34,6 +35,7 @@ const config: Config = {
         "slide-up": "slide-up 0.5s ease-out",
         "fade-in": "fade-in 0.5s ease-out",
         "shimmer": "shimmer 2s linear infinite",
+        "gradient-x": "gradient-x 3s ease infinite",
       },
       keyframes: {
         float: {
@@ -56,6 +58,10 @@ const config: Config = {
           "0%": { backgroundPosition: "-1000px 0" },
           "100%": { backgroundPosition: "1000px 0" },
         },
+        "gradient-x": {
+          "0%, 100%": { backgroundPosition: "0% 50%" },
+          "50%": { backgroundPosition: "100% 50%" },
+        },
       },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",