Add Google Play links to web

apps/web/components/CTA.tsx

@@ -2,6 +2,8 @@
 
 import Image from 'next/image'
 import { motion } from 'framer-motion'
+import { Play } from 'lucide-react'
+
 
 export default function CTA() {
   return (
@@ -51,8 +53,18 @@ export default function CTA() {
               </svg>
               Download for iOS
             </a>
-            <span className="text-white/40">Coming soon to Android</span>
+
+            <a
+              href="https://play.google.com/store/apps/details?id=com.sauci.app"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="btn-secondary flex items-center gap-2"
+            >
+              <Play className="w-5 h-5" />
+              Download for Android
+            </a>
           </div>
+
         </motion.div>
       </div>
     </section>

apps/web/components/Hero.tsx

@@ -3,7 +3,8 @@
 import { useEffect, useState } from 'react'
 import Image from 'next/image'
 import { motion } from 'framer-motion'
-import { Sparkles } from 'lucide-react'
+import { Sparkles, Play } from 'lucide-react'
+
 
 export default function Hero() {
   const [hasScrolled, setHasScrolled] = useState(false)
@@ -53,7 +54,8 @@ export default function Hero() {
             it's a match. Start conversations you've always wanted to have.
           </p>
 
-          <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4">
+          <div className="flex flex-col sm:flex-row flex-wrap items-center justify-center lg:justify-start gap-4">
+
             {/* Official App Store Badge */}
             <a
               href="https://apps.apple.com/app/sauci"
@@ -88,9 +90,25 @@ export default function Hero() {
                 />
               </svg>
             </a>
+
+            <a
+              href="https://play.google.com/store/apps/details?id=com.sauci.app"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="h-[50px] inline-flex items-center gap-3 rounded-xl bg-black/80 border border-white/10 px-5 transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              aria-label="Get it on Google Play"
+            >
+              <Play className="w-6 h-6 text-white" />
+              <span className="flex flex-col leading-none">
+                <span className="text-[10px] tracking-wide text-white/60">GET IT ON</span>
+                <span className="text-sm font-semibold text-white">Google Play</span>
+              </span>
+            </a>
+
             <a href="#how-it-works" className="btn-secondary flex items-center gap-2 w-full sm:w-auto justify-center">
               See How It Works
             </a>
+
           </div>
         </motion.div>
 

apps/web/components/Navbar.tsx

@@ -6,9 +6,15 @@ import Image from 'next/image'
 import { motion, AnimatePresence } from 'framer-motion'
 import { Menu, X } from 'lucide-react'
 
+const APP_STORE_URL = 'https://apps.apple.com/app/sauci'
+const PLAY_STORE_URL = 'https://play.google.com/store/apps/details?id=com.sauci.app'
+
 export default function Navbar() {
+
   const [isScrolled, setIsScrolled] = useState(false)
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const [downloadUrl, setDownloadUrl] = useState(APP_STORE_URL)
+
 
   useEffect(() => {
     const handleScroll = () => {
@@ -18,6 +24,14 @@ export default function Navbar() {
     return () => window.removeEventListener('scroll', handleScroll)
   }, [])
 
+  useEffect(() => {
+    const userAgent = navigator.userAgent || ''
+    if (/Android/i.test(userAgent)) {
+      setDownloadUrl(PLAY_STORE_URL)
+    }
+  }, [])
+
+
   return (
     <motion.nav
       initial={{ y: -100 }}
@@ -53,13 +67,14 @@ export default function Navbar() {
             FAQ
           </a>
           <a
-            href="https://apps.apple.com/app/sauci"
+            href={downloadUrl}
             target="_blank"
             rel="noopener noreferrer"
             className="btn-primary text-sm py-3 px-6"
           >
             Download App
           </a>
+
         </div>
 
         {/* Mobile Menu Button */}
@@ -111,13 +126,14 @@ export default function Navbar() {
                 FAQ
               </a>
               <a
-                href="https://apps.apple.com/app/sauci"
+                href={downloadUrl}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="btn-primary text-sm py-3 px-6 text-center"
               >
                 Download App
               </a>
+
             </div>
           </motion.div>
         )}

apps/web/components/Pricing.tsx

@@ -1,9 +1,14 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import { motion } from 'framer-motion'
 import { Check, Crown, Heart, Sparkles, Infinity } from 'lucide-react'
 
+const APP_STORE_URL = 'https://apps.apple.com/app/sauci'
+const PLAY_STORE_URL = 'https://play.google.com/store/apps/details?id=com.sauci.app'
+
 const features = [
+
   'Unlock all question packs',
   'Access exclusive premium content',
   'New packs added regularly',
@@ -12,7 +17,17 @@ const features = [
 ]
 
 export default function Pricing() {
+  const [downloadUrl, setDownloadUrl] = useState(APP_STORE_URL)
+
+  useEffect(() => {
+    const userAgent = navigator.userAgent || ''
+    if (/Android/i.test(userAgent)) {
+      setDownloadUrl(PLAY_STORE_URL)
+    }
+  }, [])
+
   return (
+
     <section id="pricing" className="relative py-24 overflow-hidden">
       {/* Background */}
       <div className="absolute inset-0 bg-gradient-to-b from-background-light to-background" />
@@ -114,7 +129,7 @@ export default function Pricing() {
             {/* CTA */}
             <div className="text-center">
               <a
-                href="https://apps.apple.com/app/sauci"
+                href={downloadUrl}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="btn-primary inline-flex items-center gap-2"
@@ -122,6 +137,7 @@ export default function Pricing() {
                 <Crown className="w-5 h-5" />
                 Get Sauci Pro
               </a>
+
               <p className="text-sm text-white/40 mt-3">
                 Upgrade anytime from within the app
               </p>