Reposition app as relationship improvement tool

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
jjbruntonandClaude Opus 4.5 committed 2026-01-25 19:30:42 +00:00
1 parent 9402369246
commit a6b3b6a251
11 files changed
+243 -238

No files matched your search

+120 -120
View File
@@ -1,24 +1,24 @@
# Sauci Design System
A boutique, premium design framework for the Sauci couples intimacy app.
# Sauci Design System
A boutique, premium design framework for the Sauci couples relationship app.
## Brand Identity
**Aesthetic:** Boutique lingerie store meets modern dating app. Think Ann Summers sophistication - sensual but tasteful, premium but accessible, intimate but playful.
**Aesthetic:** Premium couples app with a warm, sophisticated feel. Think modern wellness meets connection - supportive but not clinical, premium but accessible, personal but playful.
**Mood:** Romantic, luxurious, warm, inviting, confident
**Mood:** Warm, supportive, confident, inviting, growth-oriented
**Key Principles:**
- Dark, velvety backgrounds with subtle gradient atmosphere
- Solid, high-contrast surfaces (no glass or blur effects)
- Primary gradient (rose → purple) as the core brand signature
- Gold reserved for premium/dares features only
- Soft glows and shadows for depth, not transparency
**Key Principles:**
- Dark, velvety backgrounds with subtle gradient atmosphere
- Solid, high-contrast surfaces (no glass or blur effects)
- Primary gradient (rose → purple) as the core brand signature
- Gold reserved for premium/dares features only
- Soft glows and shadows for depth, not transparency
---
## Color Hierarchy
## Color Hierarchy
### 1. Brand Colors (Primary Palette)
@@ -26,14 +26,14 @@ The core brand identity. Used for primary actions, key UI elements, and brand re
| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| **Primary** | `#e1306c` | 225, 48, 108 | Primary buttons, active states, key accents |
| **Primary Dark** | `#c12055` | 193, 32, 85 | Pressed states, darker variants |
| **Secondary** | `#9b59b6` | 155, 89, 182 | Secondary accents, gradient endpoints |
| **Secondary Dark** | `#8e44ad` | 142, 68, 173 | Pressed states, darker variants |
**Primary Gradient:** `#e1306c → #9b59b6` (Rose to Purple)
- Direction: Left to right (horizontal) or top to bottom (vertical)
- Use for: Primary buttons, match celebrations, brand moments
| **Primary** | `#e1306c` | 225, 48, 108 | Primary buttons, active states, key accents |
| **Primary Dark** | `#c12055` | 193, 32, 85 | Pressed states, darker variants |
| **Secondary** | `#9b59b6` | 155, 89, 182 | Secondary accents, gradient endpoints |
| **Secondary Dark** | `#8e44ad` | 142, 68, 173 | Pressed states, darker variants |
**Primary Gradient:** `#e1306c → #9b59b6` (Rose to Purple)
- Direction: Left to right (horizontal) or top to bottom (vertical)
- Use for: Primary buttons, match celebrations, brand moments
### 2. Premium/Luxury Colors
@@ -53,11 +53,11 @@ Each core feature has a designated accent color for consistency and recognition.
| Feature | Primary Color | Hex | Gradient |
|---------|---------------|-----|----------|
| **Swipe/Match** | Primary | `#e1306c` | Primary gradient (rose → purple) |
| **Quiz** | Rose | `#E8A4AE` | `#E8A4AE → #D4919B` |
| **Dares** | Gold | `#D4AF37` | `#D4AF37 → #B8860B` |
| **Chat** | Primary | `#e1306c` | Primary gradient |
| **Profile** | Secondary | `#9b59b6` | Secondary gradient |
| **Swipe/Match** | Primary | `#e1306c` | Primary gradient (rose → purple) |
| **Quiz** | Rose | `#E8A4AE` | `#E8A4AE → #D4919B` |
| **Dares** | Gold | `#D4AF37` | `#D4AF37 → #B8860B` |
| **Chat** | Primary | `#e1306c` | Primary gradient |
| **Profile** | Secondary | `#9b59b6` | Secondary gradient |
**Usage Rules:**
- Feature icons use their designated color
@@ -71,31 +71,31 @@ Dark, rich backgrounds that make content pop.
| Name | Hex | RGBA | Usage |
|------|-----|------|-------|
| **Background** | `#0e0e11` | 14, 14, 17 | Primary app background |
| **Background Light** | `#17171c` | 23, 23, 28 | Cards, elevated surfaces |
| **Surface** | `#17171c` | 23, 23, 28 | Primary surface color |
| **Surface Solid** | `#17171c` | 23, 23, 28 | Opaque surfaces |
| **Border** | `#303036` | 48, 48, 54 | Dividers, outlines, input borders |
### 5. Tile/Category Colors (Home Screen)
Discovery/Home tiles use vibrant, solid colors for quick recognition.
| Token | Hex |
|-------|-----|
| **teal** | `#14B8A6` |
| **purple** | `#8B5CF6` |
| **orange** | `#F97316` |
| **coral** | `#F87171` |
| **emerald** | `#10B981` |
| **indigo** | `#6366F1` |
| **rose** | `#EC4899` |
| **amber** | `#F59E0B` |
**Usage Rules:**
- Tiles are solid fills with a subtle dark overlay for depth
- Category colors are consistent across the app
- Avoid gradients on tiles unless it is a premium moment
| **Background** | `#0e0e11` | 14, 14, 17 | Primary app background |
| **Background Light** | `#17171c` | 23, 23, 28 | Cards, elevated surfaces |
| **Surface** | `#17171c` | 23, 23, 28 | Primary surface color |
| **Surface Solid** | `#17171c` | 23, 23, 28 | Opaque surfaces |
| **Border** | `#303036` | 48, 48, 54 | Dividers, outlines, input borders |
### 5. Tile/Category Colors (Home Screen)
Discovery/Home tiles use vibrant, solid colors for quick recognition.
| Token | Hex |
|-------|-----|
| **teal** | `#14B8A6` |
| **purple** | `#8B5CF6` |
| **orange** | `#F97316` |
| **coral** | `#F87171` |
| **emerald** | `#10B981` |
| **indigo** | `#6366F1` |
| **rose** | `#EC4899` |
| **amber** | `#F59E0B` |
**Usage Rules:**
- Tiles are solid fills with a subtle dark overlay for depth
- Category colors are consistent across the app
- Avoid gradients on tiles unless it is a premium moment
### 6. Text Colors
@@ -131,14 +131,14 @@ Consistent across all swipe interactions:
---
## Gradients
## Gradients
### Brand Gradients
```
Primary: #e1306c → #9b59b6 (Rose to Purple)
Primary Subtle: rgba(225, 48, 108, 0.8) → rgba(155, 89, 182, 0.8)
Primary Reverse: #9b59b6 → #e1306c (Purple to Rose)
Primary: #e1306c → #9b59b6 (Rose to Purple)
Primary Subtle: rgba(225, 48, 108, 0.8) → rgba(155, 89, 182, 0.8)
Primary Reverse: #9b59b6 → #e1306c (Purple to Rose)
```
### Premium Gradients
@@ -151,8 +151,8 @@ Premium Rose: #E8A4AE → #D4919B
### Background Gradients
```
Background: #0e0e11 → #1f1417 → #0e0e11
Background Reverse: #0e0e11 → #1f1417 → #0e0e11
Background: #0e0e11 → #1f1417 → #0e0e11
Background Reverse: #0e0e11 → #1f1417 → #0e0e11
```
### Boutique Card Gradients
@@ -172,44 +172,44 @@ Boutique Amethyst: rgba(142, 68, 173, 0.4) → rgba(44, 62, 80, 0.4)
## Component Patterns
### Buttons
### Buttons
| Variant | Background | Text | Border |
|---------|------------|------|--------|
| **Primary** | Primary gradient | White | None |
| **Secondary** | Surface | White | Border |
| **Ghost** | Transparent | Primary | None |
| **Danger** | Error gradient | White | None |
| **Feature** | Feature color gradient | White | None |
| **Primary** | Primary gradient | White | None |
| **Secondary** | Surface | White | Border |
| **Ghost** | Transparent | Primary | None |
| **Danger** | Error gradient | White | None |
| **Feature** | Feature color gradient | White | None |
### Cards
### Cards
| Variant | Background | Border | Use Case |
|---------|------------|--------|----------|
| **Solid** | Surface | Border | Standard content |
| **Raised** | Surface | Border | Emphasized content + shadow |
| **Tinted** | Category color | None | Home tiles, feature promos |
| **Solid** | Surface | Border | Standard content |
| **Raised** | Surface | Border | Emphasized content + shadow |
| **Tinted** | Category color | None | Home tiles, feature promos |
### Inputs
### Inputs
| State | Border Color | Background |
|-------|--------------|------------|
| **Default** | Border | Surface |
| **Focused** | Primary | Surface |
| **Error** | Error | Surface |
| **Disabled** | Border | Surface (opacity 0.6) |
| **Default** | Border | Surface |
| **Focused** | Primary | Surface |
| **Error** | Error | Surface |
| **Disabled** | Border | Surface (opacity 0.6) |
---
## Tab Bar
## Tab Bar
| Element | Color |
|---------|-------|
| **Background** | `#0e0e11` |
| **Top Border** | `rgba(225, 48, 108, 0.2)` (primary tint) |
| **Active Icon** | Primary `#e1306c` |
| **Inactive Icon** | Text secondary |
| **Badge** | Rose `#E8A4AE` |
| **Background** | `#0e0e11` |
| **Top Border** | `rgba(225, 48, 108, 0.2)` (primary tint) |
| **Active Icon** | Primary `#e1306c` |
| **Inactive Icon** | Text secondary |
| **Badge** | Rose `#E8A4AE` |
## Play Button (Center Tab)
@@ -217,10 +217,10 @@ The main "play" button uses the primary brand gradient for maximum brand presenc
| Element | Color |
|---------|-------|
| **Glow** | Primary glow `rgba(225, 48, 108, 0.3)` |
| **Border** | `rgba(225, 48, 108, 0.4)` |
| **Highlight** | Primary → Secondary gradient |
| **Icon** | Primary `#e1306c` |
| **Glow** | Primary glow `rgba(225, 48, 108, 0.3)` |
| **Border** | `rgba(225, 48, 108, 0.4)` |
| **Highlight** | Primary → Secondary gradient |
| **Icon** | Primary `#e1306c` |
## Radial Menu
@@ -228,9 +228,9 @@ Feature-specific colors for quick action items:
| Item | Variant | Color |
|------|---------|-------|
| **Match** | Primary | `#e1306c` (core feature) |
| **Dares** | Gold | `#D4AF37` (premium/adventure) |
| **Quiz** | Rose | `#E8A4AE` (intimacy) |
| **Match** | Primary | `#e1306c` (core feature) |
| **Dares** | Gold | `#D4AF37` (premium/adventure) |
| **Quiz** | Rose | `#E8A4AE` (connection) |
---
@@ -240,7 +240,7 @@ Feature-specific colors for quick action items:
| Feature | Icon Name | Ionicons | Description |
|---------|-----------|----------|-------------|
| **Swipe/Match** | `flame` | 🔥 | Fire/passion - the core swiping experience |
| **Swipe/Match** | `flame` | 🔥 | Fire/energy - the core swiping experience |
| **Dares** | `flash` | ⚡ | Lightning bolt - adventure, excitement, energy |
| **Quiz** | `help-circle` | ❓ | Question mark - discovery, questions about each other |
| **Matches** (tab) | `heart` | ❤️ | Love heart - connections made between partners |
@@ -287,17 +287,17 @@ Feature-specific colors for quick action items:
| Style | Size | Weight | Line Height | Usage |
|-------|------|--------|-------------|-------|
| `largeTitle` | 32px | Bold | 40px | Screen titles |
| `title1` | 28px | Bold | 34px | Section headers |
| `title2` | 24px | Bold | 30px | Card titles |
| `title3` | 20px | SemiBold | 26px | Subsection headers |
| `headline` | 17px | SemiBold | 22px | Emphasized body |
| `body` | 16px | Regular | 22px | Body text |
| `callout` | 15px | Regular | 20px | Secondary body |
| `subhead` | 14px | Regular | 20px | Supporting text |
| `footnote` | 13px | Regular | 18px | Captions |
| `caption1` | 12px | Regular | 16px | Small labels |
| `caption2` | 11px | Regular | 14px | Tiny text |
| `largeTitle` | 32px | Bold | 40px | Screen titles |
| `title1` | 28px | Bold | 34px | Section headers |
| `title2` | 24px | Bold | 30px | Card titles |
| `title3` | 20px | SemiBold | 26px | Subsection headers |
| `headline` | 17px | SemiBold | 22px | Emphasized body |
| `body` | 16px | Regular | 22px | Body text |
| `callout` | 15px | Regular | 20px | Secondary body |
| `subhead` | 14px | Regular | 20px | Supporting text |
| `footnote` | 13px | Regular | 18px | Captions |
| `caption1` | 12px | Regular | 16px | Small labels |
| `caption2` | 11px | Regular | 14px | Tiny text |
---
@@ -314,35 +314,35 @@ Feature-specific colors for quick action items:
---
## Platform Considerations
### iOS
- Favor solid surfaces and shadows for depth
- Haptic feedback on interactions
- Native-feeling animations
### Android
- Match iOS surface colors and shadows
- Avoid blur and heavy transparency for performance
- Adjust shadow rendering as needed
## Platform Considerations
### iOS
- Favor solid surfaces and shadows for depth
- Haptic feedback on interactions
- Native-feeling animations
### Android
- Match iOS surface colors and shadows
- Avoid blur and heavy transparency for performance
- Adjust shadow rendering as needed
---
## Do's and Don'ts
### Do
- Use the primary gradient for main CTAs
- Apply feature colors consistently within a feature
- Use solid surfaces with soft shadows for depth
- Keep text high-contrast (white on dark)
- Use gold/rose for premium moments
### Do
- Use the primary gradient for main CTAs
- Apply feature colors consistently within a feature
- Use solid surfaces with soft shadows for depth
- Keep text high-contrast (white on dark)
- Use gold/rose for premium moments
### Don't
- Mix feature colors within a single screen
- Use more than 2-3 accent colors per screen
- Apply the primary gradient to everything
- Use glass, blur, or frosted effects
- Use pure black (#000000) for backgrounds
### Don't
- Mix feature colors within a single screen
- Use more than 2-3 accent colors per screen
- Apply the primary gradient to everything
- Use glass, blur, or frosted effects
- Use pure black (#000000) for backgrounds
---
+7 -7
View File
@@ -4,21 +4,21 @@ import { PostHogProvider } from './providers'
import { PostHogPageView } from './PostHogPageView'
export const metadata: Metadata = {
title: 'Sauci - Ignite Your Connection',
description: 'Discover what you both desire. Sauci is the couples intimacy app that helps partners explore their connection through fun, meaningful questions.',
keywords: ['couples app', 'intimacy', 'relationship', 'connection', 'dating', 'love'],
title: 'Sauci - Grow Closer Together',
description: 'Sauci helps couples communicate better and strengthen their relationship through thoughtful questions and meaningful conversations.',
keywords: ['couples app', 'relationship', 'communication', 'connection', 'couples questions', 'relationship improvement'],
authors: [{ name: 'Sauci' }],
openGraph: {
title: 'Sauci - Ignite Your Connection',
description: 'Discover what you both desire. The couples intimacy app for deeper connections.',
title: 'Sauci - Grow Closer Together',
description: 'The couples app for better communication and stronger relationships.',
url: 'https://sauci.app',
siteName: 'Sauci',
type: 'website',
},
twitter: {
card: 'summary_large_image',
title: 'Sauci - Ignite Your Connection',
description: 'Discover what you both desire. The couples intimacy app for deeper connections.',
title: 'Sauci - Grow Closer Together',
description: 'The couples app for better communication and stronger relationships.',
},
icons: {
icon: '/favicon.png',
+1 -1
View File
@@ -4,7 +4,7 @@ import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Privacy Policy - Sauci',
description: 'Privacy Policy for Sauci - the couples intimacy app',
description: 'Privacy Policy for Sauci - the couples relationship app',
}
export default function PrivacyPolicy() {
+1 -1
View File
@@ -4,7 +4,7 @@ import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Terms & Conditions - Sauci',
description: 'Terms and Conditions for Sauci - the couples intimacy app',
description: 'Terms and Conditions for Sauci - the couples relationship app',
}
export default function TermsAndConditions() {
+32 -32
View File
@@ -1,9 +1,9 @@
'use client'
import Image from 'next/image'
import { motion } from 'framer-motion'
import { Play } from 'lucide-react'
import Image from 'next/image'
import { motion } from 'framer-motion'
import { Play } from 'lucide-react'
export default function CTA() {
return (
@@ -32,39 +32,39 @@ export default function CTA() {
</div>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
Ready to Discover What You{' '}
<span className="gradient-text">Both Desire?</span>
Ready to Build a{' '}
<span className="gradient-text">Stronger Relationship?</span>
</h2>
<p className="text-lg text-white/60 max-w-2xl mx-auto mb-8">
Join thousands of couples who have deepened their connection with Sauci.
Download now and start exploring together.
Join thousands of couples who communicate better with Sauci.
Download now and start growing together.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<a
href="https://apps.apple.com/gb/app/sauci-couple-games-romance/id6757159885"
target="_blank"
rel="noopener noreferrer"
className="btn-primary flex items-center gap-2"
>
<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"/>
</svg>
Download for iOS
</a>
<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>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<a
href="https://apps.apple.com/gb/app/sauci-couple-games-romance/id6757159885"
target="_blank"
rel="noopener noreferrer"
className="btn-primary flex items-center gap-2"
>
<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"/>
</svg>
Download for iOS
</a>
<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>
+6 -1
View File
@@ -18,7 +18,7 @@ const faqs = [
{
question: 'What happens if my partner says no to a question?',
answer:
"Nothing! They won't know you were interested, and you won't know they said no. The question simply doesn't become a match. This creates a safe space to be honest about your desires.",
"Nothing! They won't know you were interested, and you won't know they said no. The question simply doesn't become a match. This creates a safe space to be completely honest.",
},
{
question: 'Do both partners need Pro?',
@@ -30,6 +30,11 @@ const faqs = [
answer:
'Yes. All chat messages are end-to-end encrypted, meaning only you and your partner can read them. We take your privacy seriously and never share your data with third parties.',
},
{
question: 'What kind of questions are in Sauci?',
answer:
"Sauci covers everything from daily life and communication styles to future goals, values, and relationship growth. Our question packs are designed by relationship experts to help couples understand each other better.",
},
]
function FAQItem({
+6 -6
View File
@@ -7,21 +7,21 @@ const features = [
{
icon: Heart,
title: 'Swipe to Connect',
description: 'Answer intimate questions with simple swipes. Yes, no, or maybe - your desires stay private until you match.',
description: 'Answer thoughtful questions with simple swipes. Yes, no, or maybe - your answers stay private until you match.',
color: 'text-primary',
bgColor: 'bg-primary/10',
},
{
icon: Sparkles,
title: 'Discover Matches',
description: 'When both partners swipe positively on a question, a match is created. Discover what you both secretly want.',
description: 'When both partners swipe positively on a question, a match is created. Find common ground and shared interests.',
color: 'text-secondary',
bgColor: 'bg-secondary/10',
},
{
icon: MessageCircle,
title: 'Unlock Conversations',
description: 'Each match opens a private chat thread. Talk about your desires in a safe, dedicated space.',
description: 'Each match opens a private chat thread. Discuss topics that matter in a safe, dedicated space.',
color: 'text-green-400',
bgColor: 'bg-green-400/10',
},
@@ -35,7 +35,7 @@ const features = [
{
icon: Flame,
title: 'Curated Question Packs',
description: 'Explore themed packs from playful to passionate. New packs added regularly to keep things exciting.',
description: 'Explore themed packs covering communication, goals, values, and more. New packs added regularly.',
color: 'text-orange-400',
bgColor: 'bg-orange-400/10',
},
@@ -63,10 +63,10 @@ export default function Features() {
>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
Everything You Need to{' '}
<span className="gradient-text">Explore Together</span>
<span className="gradient-text">Grow Together</span>
</h2>
<p className="text-lg text-white/60 max-w-2xl mx-auto">
Sauci creates a safe space for couples to discover their shared desires without fear of judgment.
Sauci creates a safe space for couples to understand each other better and strengthen their relationship.
</p>
</motion.div>
+32 -32
View File
@@ -3,8 +3,8 @@
import { useEffect, useState } from 'react'
import Image from 'next/image'
import { motion } from 'framer-motion'
import { Sparkles, Play } from 'lucide-react'
import { Sparkles, Play } from 'lucide-react'
export default function Hero() {
const [hasScrolled, setHasScrolled] = useState(false)
@@ -45,21 +45,21 @@ export default function Hero() {
</motion.div>
<h1 className="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold leading-tight mb-6">
Discover What You{' '}
<span className="gradient-text">Both Desire</span>
Grow Closer{' '}
<span className="gradient-text">Together</span>
</h1>
<p className="text-lg sm:text-xl text-white/70 max-w-xl mx-auto lg:mx-0 mb-8">
Swipe on intimate questions with your partner. When you both say yes,
it&apos;s a match. Start conversations you&apos;ve always wanted to have.
Answer thoughtful questions with your partner. When you both agree,
it&apos;s a match. Start meaningful conversations that strengthen your bond.
</p>
<div className="flex flex-col sm:flex-row flex-wrap 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/gb/app/sauci-couple-games-romance/id6757159885"
target="_blank"
<a
href="https://apps.apple.com/gb/app/sauci-couple-games-romance/id6757159885"
target="_blank"
rel="noopener noreferrer"
className="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 rounded-xl"
aria-label="Download on the App Store"
@@ -88,27 +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>
</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>
</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>
+3 -3
View File
@@ -20,7 +20,7 @@ const steps: Array<{
{
number: '02',
title: 'Browse Question Packs',
description: 'Choose from curated packs ranging from romantic to adventurous. Each pack contains thoughtful questions.',
description: 'Choose from curated packs covering communication, life goals, and relationship growth.',
icon: Layers,
color: 'text-secondary',
},
@@ -34,7 +34,7 @@ const steps: Array<{
{
number: '04',
title: 'Discover Your Matches',
description: 'When both partners answer positively, it\'s a match! Explore your shared desires through private chats.',
description: 'When both partners answer positively, it\'s a match! Discuss what matters most through private chats.',
icon: Heart,
color: 'text-pink-400',
},
@@ -60,7 +60,7 @@ export default function HowItWorks() {
How <span className="gradient-text">Sauci</span> Works
</h2>
<p className="text-lg text-white/60 max-w-2xl mx-auto">
Four simple steps to deeper connection and discovery with your partner.
Four simple steps to better communication and a stronger relationship.
</p>
</motion.div>
+34 -34
View File
@@ -1,14 +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/gb/app/sauci-couple-games-romance/id6757159885'
const PLAY_STORE_URL = 'https://play.google.com/store/apps/details?id=com.sauci.app'
const features = [
'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/gb/app/sauci-couple-games-romance/id6757159885'
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',
@@ -16,18 +16,18 @@ const features = [
'One-time setup, shared benefits',
]
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 (
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" />
@@ -47,7 +47,7 @@ export default function Pricing() {
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.
Unlock the full experience and discover new ways to connect with your partner.
</p>
</motion.div>
@@ -128,16 +128,16 @@ export default function Pricing() {
{/* CTA */}
<div className="text-center">
<a
href={downloadUrl}
target="_blank"
rel="noopener noreferrer"
className="btn-primary inline-flex items-center gap-2"
>
<Crown className="w-5 h-5" />
Get Sauci Pro
</a>
<a
href={downloadUrl}
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>