mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-10-31 18:19:43 +00:00
update
This commit is contained in:
Jamie Brunton committed
1 parent
c978a3bd28
commit
0f229211ea
19 files changed
+1625
-624
No files matched your search
@@ -2,6 +2,7 @@ import Navbar from '@/components/Navbar'
|
||||
import Hero from '@/components/Hero'
|
||||
import Features from '@/components/Features'
|
||||
import HowItWorks from '@/components/HowItWorks'
|
||||
import Pricing from '@/components/Pricing'
|
||||
import CTA from '@/components/CTA'
|
||||
import Footer from '@/components/Footer'
|
||||
|
||||
@@ -12,6 +13,7 @@ export default function Home() {
|
||||
<Hero />
|
||||
<Features />
|
||||
<HowItWorks />
|
||||
<Pricing />
|
||||
<CTA />
|
||||
<Footer />
|
||||
</main>
|
||||
|
||||
@@ -46,6 +46,9 @@ export default function Navbar() {
|
||||
<a href="#how-it-works" className="text-white/70 hover:text-white transition-colors">
|
||||
How It Works
|
||||
</a>
|
||||
<a href="#pricing" className="text-white/70 hover:text-white transition-colors">
|
||||
Pro
|
||||
</a>
|
||||
<a
|
||||
href="https://apps.apple.com/app/sauci"
|
||||
target="_blank"
|
||||
@@ -87,6 +90,13 @@ export default function Navbar() {
|
||||
>
|
||||
How It Works
|
||||
</a>
|
||||
<a
|
||||
href="#pricing"
|
||||
className="text-white/70 hover:text-white transition-colors"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
Pro
|
||||
</a>
|
||||
<a
|
||||
href="https://apps.apple.com/app/sauci"
|
||||
target="_blank"
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { Check, Crown, Heart, Sparkles, Infinity } from 'lucide-react'
|
||||
|
||||
const features = [
|
||||
'Unlock all question packs',
|
||||
'Access exclusive premium content',
|
||||
'New packs added regularly',
|
||||
'Both partners get full access',
|
||||
'One-time setup, shared benefits',
|
||||
]
|
||||
|
||||
export default function Pricing() {
|
||||
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" />
|
||||
|
||||
{/* Accent Glows */}
|
||||
<div className="absolute top-1/4 right-0 w-[400px] h-[400px] bg-primary/15 rounded-full blur-[150px]" />
|
||||
<div className="absolute bottom-1/4 left-0 w-[300px] h-[300px] bg-secondary/15 rounded-full blur-[150px]" />
|
||||
|
||||
<div className="relative z-10 max-w-5xl mx-auto px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
|
||||
Upgrade to <span className="gradient-text">Sauci Pro</span>
|
||||
</h2>
|
||||
<p className="text-lg text-white/60 max-w-2xl mx-auto">
|
||||
Unlock the full experience and explore every dimension of your relationship together.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="max-w-xl mx-auto"
|
||||
>
|
||||
{/* Main Pricing Card */}
|
||||
<div className="glass border-primary/30 p-8 relative overflow-hidden">
|
||||
{/* Crown Badge */}
|
||||
<div className="absolute -top-1 -right-1">
|
||||
<div className="bg-gradient-to-r from-primary to-secondary px-4 py-1 rounded-bl-xl rounded-tr-xl">
|
||||
<span className="text-sm font-semibold flex items-center gap-1">
|
||||
<Crown className="w-4 h-4" /> PRO
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Couple Highlight */}
|
||||
<div className="flex items-center justify-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
|
||||
<Heart className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<Infinity className="w-6 h-6 text-white/40" />
|
||||
<div className="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center">
|
||||
<Heart className="w-6 h-6 text-secondary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold text-center mb-2">One Subscription, Both Partners</h3>
|
||||
<p className="text-white/60 text-center mb-6">
|
||||
When you upgrade to Pro, your partner automatically gets full access too.
|
||||
No separate purchases needed - you're in this together.
|
||||
</p>
|
||||
|
||||
{/* Feature List */}
|
||||
<ul className="space-y-3 mb-8">
|
||||
{features.map((feature, index) => (
|
||||
<motion.li
|
||||
key={feature}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 + index * 0.1 }}
|
||||
className="flex items-center gap-3"
|
||||
>
|
||||
<div className="w-6 h-6 rounded-full bg-green-500/20 flex items-center justify-center flex-shrink-0">
|
||||
<Check className="w-4 h-4 text-green-400" />
|
||||
</div>
|
||||
<span className="text-white/80">{feature}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Value Proposition */}
|
||||
<div className="bg-white/5 rounded-xl p-4 mb-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<Sparkles className="w-5 h-5 text-secondary flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-white/80">
|
||||
<span className="font-semibold text-white">Pay once per couple.</span>{' '}
|
||||
Whether monthly or yearly, one subscription unlocks Pro for both you and your partner.
|
||||
That's two accounts for the price of one.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="text-center">
|
||||
<a
|
||||
href="https://apps.apple.com/app/sauci"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="btn-primary inline-flex items-center gap-2"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Bottom Note */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="text-center text-white/40 text-sm mt-8 max-w-lg mx-auto"
|
||||
>
|
||||
Start free with access to selected packs. Upgrade to Pro when you're ready to unlock everything.
|
||||
</motion.p>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user