Add Google Play links to web

apps/web/components/CTA.tsx

@@ -1,7 +1,9 @@
 'use client'
 
-import Image from 'next/image'
+import Image from 'next/image'
-import { motion } from 'framer-motion'
+import { motion } from 'framer-motion'
+import { Play } from 'lucide-react'
+
 
 export default function CTA() {
   return (
@@ -39,20 +41,30 @@ export default function CTA() {
             Download now and start exploring together.
           </p>
 
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-            <a
+            <a
-              href="https://apps.apple.com/app/sauci"
+              href="https://apps.apple.com/app/sauci"
-              target="_blank"
+              target="_blank"
-              rel="noopener noreferrer"
+              rel="noopener noreferrer"
-              className="btn-primary flex items-center gap-2"
+              className="btn-primary flex items-center gap-2"
-            >
+            >
-              <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor">
+              <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor">
-                <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"/>
+                <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>
+              </svg>
-              Download for iOS
+              Download for iOS
-            </a>
+            </a>
-            <span className="text-white/40">Coming soon to Android</span>
+
-          </div>
+            <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"
@@ -86,11 +88,27 @@ export default function Hero() {
                   d="M37.826 8.731a2.64 2.64 0 0 1 2.808 2.965c0 1.906-1.03 3.002-2.808 3.002h-2.155V8.73Zm-1.228 5.123h1.125a1.876 1.876 0 0 0 1.967-2.146 1.881 1.881 0 0 0-1.967-2.134h-1.125ZM41.68 12.444a2.133 2.133 0 1 1 4.248 0 2.134 2.134 0 1 1-4.247 0Zm3.334 0c0-.976-.439-1.547-1.208-1.547-.773 0-1.207.571-1.207 1.547 0 .984.434 1.55 1.207 1.55.77 0 1.208-.57 1.208-1.55ZM51.573 14.698h-.922l-.93-3.317h-.07l-.927 3.317h-.913l-1.242-4.503h.902l.806 3.436h.067l.925-3.436h.852l.926 3.436h.07l.803-3.436h.889ZM53.854 10.195h.855v.715h.066a1.348 1.348 0 0 1 1.344-.802 1.465 1.465 0 0 1 1.559 1.675v2.915h-.889v-2.692c0-.724-.314-1.084-.972-1.084a1.033 1.033 0 0 0-1.075 1.141v2.635h-.888ZM59.094 8.437h.888v6.26h-.888ZM61.218 12.444a2.133 2.133 0 1 1 4.247 0 2.134 2.134 0 1 1-4.247 0Zm3.333 0c0-.976-.439-1.547-1.208-1.547-.773 0-1.207.571-1.207 1.547 0 .984.435 1.55 1.207 1.55.77 0 1.208-.57 1.208-1.55ZM66.4 13.424c0-.81.604-1.278 1.676-1.344l1.22-.07v-.389c0-.476-.315-.744-.922-.744-.497 0-.84.182-.939.5h-.86c.09-.773.818-1.27 1.84-1.27 1.128 0 1.765.563 1.765 1.514v3.077h-.855v-.633h-.07a1.515 1.515 0 0 1-1.353.707 1.36 1.36 0 0 1-1.501-1.348Zm2.895-.384v-.377l-1.1.07c-.62.042-.9.253-.9.65 0 .405.351.64.834.64a1.062 1.062 0 0 0 1.166-.983ZM71.348 12.444c0-1.423.732-2.324 1.87-2.324a1.484 1.484 0 0 1 1.38.79h.067V8.437h.888v6.26h-.851v-.71h-.07a1.563 1.563 0 0 1-1.415.785c-1.145 0-1.869-.901-1.869-2.328Zm.918 0c0 .955.45 1.53 1.203 1.53.75 0 1.212-.583 1.212-1.526 0-.938-.468-1.53-1.212-1.53-.748 0-1.203.58-1.203 1.526ZM79.23 12.444a2.133 2.133 0 1 1 4.247 0 2.134 2.134 0 1 1-4.248 0Zm3.333 0c0-.976-.439-1.547-1.208-1.547-.773 0-1.207.571-1.207 1.547 0 .984.435 1.55 1.207 1.55.77 0 1.208-.57 1.208-1.55ZM84.67 10.195h.855v.715h.066a1.348 1.348 0 0 1 1.344-.802 1.465 1.465 0 0 1 1.559 1.675v2.915h-.889v-2.692c0-.724-.314-1.084-.972-1.084a1.033 1.033 0 0 0-1.075 1.141v2.635h-.888ZM93.515 9.074v1.141h.976v.749h-.976v2.315c0 .472.195.678.637.678.113 0 .226-.007.339-.02v.74a2.95 2.95 0 0 1-.484.046c-.988 0-1.381-.348-1.381-1.216v-2.543h-.715v-.749h.715V9.074ZM95.705 8.437h.88v2.481h.07a1.386 1.386 0 0 1 1.374-.806 1.483 1.483 0 0 1 1.55 1.679v2.907h-.889V12.01c0-.72-.335-1.084-.963-1.084a1.052 1.052 0 0 0-1.134 1.142v2.63h-.888ZM104.761 13.482a1.828 1.828 0 0 1-1.95 1.303 2.045 2.045 0 0 1-2.081-2.325 2.077 2.077 0 0 1 2.076-2.352c1.253 0 2.009.856 2.009 2.27v.31h-3.18v.05a1.19 1.19 0 0 0 1.2 1.29 1.08 1.08 0 0 0 1.07-.546Zm-3.126-1.451h2.275a1.086 1.086 0 0 0-1.109-1.167 1.152 1.152 0 0 0-1.166 1.167Z"
                   fill="#fff"
                 />
-              </svg>
+              </svg>
-            </a>
+            </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
-            </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

@@ -4,19 +4,33 @@ import { useState, useEffect } from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
 import { motion, AnimatePresence } from 'framer-motion'
-import { Menu, X } from 'lucide-react'
+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)
+
 
-export default function Navbar() {
+  useEffect(() => {
-  const [isScrolled, setIsScrolled] = useState(false)
+    const handleScroll = () => {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+      setIsScrolled(window.scrollY > 20)
-
+    }
-  useEffect(() => {
+    window.addEventListener('scroll', handleScroll)
-    const handleScroll = () => {
+    return () => window.removeEventListener('scroll', handleScroll)
-      setIsScrolled(window.scrollY > 20)
+  }, [])
-    }
+
-    window.addEventListener('scroll', handleScroll)
+  useEffect(() => {
-    return () => window.removeEventListener('scroll', handleScroll)
+    const userAgent = navigator.userAgent || ''
-  }, [])
+    if (/Android/i.test(userAgent)) {
+      setDownloadUrl(PLAY_STORE_URL)
+    }
+  }, [])
+
 
   return (
     <motion.nav
@@ -52,14 +66,15 @@ export default function Navbar() {
           <a href="#faq" className="text-white/70 hover:text-white transition-colors">
             FAQ
           </a>
-          <a
+          <a
-            href="https://apps.apple.com/app/sauci"
+            href={downloadUrl}
-            target="_blank"
+            target="_blank"
-            rel="noopener noreferrer"
+            rel="noopener noreferrer"
-            className="btn-primary text-sm py-3 px-6"
+            className="btn-primary text-sm py-3 px-6"
-          >
+          >
-            Download App
+            Download App
-          </a>
+          </a>
+
         </div>
 
         {/* Mobile Menu Button */}
@@ -110,14 +125,15 @@ export default function Navbar() {
               >
                 FAQ
               </a>
-              <a
+              <a
-                href="https://apps.apple.com/app/sauci"
+                href={downloadUrl}
-                target="_blank"
+                target="_blank"
-                rel="noopener noreferrer"
+                rel="noopener noreferrer"
-                className="btn-primary text-sm py-3 px-6 text-center"
+                className="btn-primary text-sm py-3 px-6 text-center"
-              >
+              >
-                Download App
+                Download App
-              </a>
+              </a>
+
             </div>
           </motion.div>
         )}

apps/web/components/Pricing.tsx

@@ -1,9 +1,14 @@
-'use client'
+'use client'
-
+
-import { motion } from 'framer-motion'
+import { useEffect, useState } from 'react'
-import { Check, Crown, Heart, Sparkles, Infinity } from 'lucide-react'
+import { motion } from 'framer-motion'
-
+import { Check, Crown, Heart, Sparkles, Infinity } from 'lucide-react'
-const features = [
+
+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',
@@ -11,8 +16,18 @@ const features = [
   'One-time setup, shared benefits',
 ]
 
-export default function Pricing() {
+export default function Pricing() {
-  return (
+  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" />
@@ -113,15 +128,16 @@ export default function Pricing() {
 
             {/* CTA */}
             <div className="text-center">
-              <a
+              <a
-                href="https://apps.apple.com/app/sauci"
+                href={downloadUrl}
-                target="_blank"
+                target="_blank"
-                rel="noopener noreferrer"
+                rel="noopener noreferrer"
-                className="btn-primary inline-flex items-center gap-2"
+                className="btn-primary inline-flex items-center gap-2"
-              >
+              >
-                <Crown className="w-5 h-5" />
+                <Crown className="w-5 h-5" />
-                Get Sauci Pro
+                Get Sauci Pro
-              </a>
+              </a>
+
               <p className="text-sm text-white/40 mt-3">
                 Upgrade anytime from within the app
               </p>