jjbrunton/Sauci
1
0 Fork 0
mirror of https://github.com/jjbrunton/Sauci.git synced 2026-11-01 18:19:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reposition app as relationship improvement tool

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

CLAUDE.md
+1 -1
View File
@@ -12,7 +12,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
## Project Overview ## Project Overview
Sauci is a couples intimacy app featuring swipeable question packs with partner matching. Users swipe on questions (yes/no/maybe), and when both partners answer positively, a "match" is created that unlocks a chat thread for that question. Sauci is a couples relationship app that helps partners communicate better and grow closer together. Users swipe on thoughtful questions (yes/no/maybe), and when both partners answer positively, a "match" is created that unlocks a chat thread for that topic.
## Commands ## Commands
apps/mobile/DESIGN.md
+120 -120
View File
@@ -1,24 +1,24 @@
# Sauci Design System # Sauci Design System
A boutique, premium design framework for the Sauci couples intimacy app. A boutique, premium design framework for the Sauci couples relationship app.
## Brand Identity ## 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:** **Key Principles:**
- Dark, velvety backgrounds with subtle gradient atmosphere - Dark, velvety backgrounds with subtle gradient atmosphere
- Solid, high-contrast surfaces (no glass or blur effects) - Solid, high-contrast surfaces (no glass or blur effects)
- Primary gradient (rose → purple) as the core brand signature - Primary gradient (rose → purple) as the core brand signature
- Gold reserved for premium/dares features only - Gold reserved for premium/dares features only
- Soft glows and shadows for depth, not transparency - Soft glows and shadows for depth, not transparency
--- ---
## Color Hierarchy ## Color Hierarchy
### 1. Brand Colors (Primary Palette) ### 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 | | Name | Hex | RGB | Usage |
|------|-----|-----|-------| |------|-----|-----|-------|
| **Primary** | `#e1306c` | 225, 48, 108 | Primary buttons, active states, key accents | | **Primary** | `#e1306c` | 225, 48, 108 | Primary buttons, active states, key accents |
| **Primary Dark** | `#c12055` | 193, 32, 85 | Pressed states, darker variants | | **Primary Dark** | `#c12055` | 193, 32, 85 | Pressed states, darker variants |
| **Secondary** | `#9b59b6` | 155, 89, 182 | Secondary accents, gradient endpoints | | **Secondary** | `#9b59b6` | 155, 89, 182 | Secondary accents, gradient endpoints |
| **Secondary Dark** | `#8e44ad` | 142, 68, 173 | Pressed states, darker variants | | **Secondary Dark** | `#8e44ad` | 142, 68, 173 | Pressed states, darker variants |
**Primary Gradient:** `#e1306c → #9b59b6` (Rose to Purple) **Primary Gradient:** `#e1306c → #9b59b6` (Rose to Purple)
- Direction: Left to right (horizontal) or top to bottom (vertical) - Direction: Left to right (horizontal) or top to bottom (vertical)
- Use for: Primary buttons, match celebrations, brand moments - Use for: Primary buttons, match celebrations, brand moments
### 2. Premium/Luxury Colors ### 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 | | Feature | Primary Color | Hex | Gradient |
|---------|---------------|-----|----------| |---------|---------------|-----|----------|
| **Swipe/Match** | Primary | `#e1306c` | Primary gradient (rose → purple) | | **Swipe/Match** | Primary | `#e1306c` | Primary gradient (rose → purple) |
| **Quiz** | Rose | `#E8A4AE` | `#E8A4AE → #D4919B` | | **Quiz** | Rose | `#E8A4AE` | `#E8A4AE → #D4919B` |
| **Dares** | Gold | `#D4AF37` | `#D4AF37 → #B8860B` | | **Dares** | Gold | `#D4AF37` | `#D4AF37 → #B8860B` |
| **Chat** | Primary | `#e1306c` | Primary gradient | | **Chat** | Primary | `#e1306c` | Primary gradient |
| **Profile** | Secondary | `#9b59b6` | Secondary gradient | | **Profile** | Secondary | `#9b59b6` | Secondary gradient |
**Usage Rules:** **Usage Rules:**
- Feature icons use their designated color - Feature icons use their designated color
@@ -71,31 +71,31 @@ Dark, rich backgrounds that make content pop.
| Name | Hex | RGBA | Usage | | Name | Hex | RGBA | Usage |
|------|-----|------|-------| |------|-----|------|-------|
| **Background** | `#0e0e11` | 14, 14, 17 | Primary app background | | **Background** | `#0e0e11` | 14, 14, 17 | Primary app background |
| **Background Light** | `#17171c` | 23, 23, 28 | Cards, elevated surfaces | | **Background Light** | `#17171c` | 23, 23, 28 | Cards, elevated surfaces |
| **Surface** | `#17171c` | 23, 23, 28 | Primary surface color | | **Surface** | `#17171c` | 23, 23, 28 | Primary surface color |
| **Surface Solid** | `#17171c` | 23, 23, 28 | Opaque surfaces | | **Surface Solid** | `#17171c` | 23, 23, 28 | Opaque surfaces |
| **Border** | `#303036` | 48, 48, 54 | Dividers, outlines, input borders | | **Border** | `#303036` | 48, 48, 54 | Dividers, outlines, input borders |
### 5. Tile/Category Colors (Home Screen) ### 5. Tile/Category Colors (Home Screen)
Discovery/Home tiles use vibrant, solid colors for quick recognition. Discovery/Home tiles use vibrant, solid colors for quick recognition.
| Token | Hex | | Token | Hex |
|-------|-----| |-------|-----|
| **teal** | `#14B8A6` | | **teal** | `#14B8A6` |
| **purple** | `#8B5CF6` | | **purple** | `#8B5CF6` |
| **orange** | `#F97316` | | **orange** | `#F97316` |
| **coral** | `#F87171` | | **coral** | `#F87171` |
| **emerald** | `#10B981` | | **emerald** | `#10B981` |
| **indigo** | `#6366F1` | | **indigo** | `#6366F1` |
| **rose** | `#EC4899` | | **rose** | `#EC4899` |
| **amber** | `#F59E0B` | | **amber** | `#F59E0B` |
**Usage Rules:** **Usage Rules:**
- Tiles are solid fills with a subtle dark overlay for depth - Tiles are solid fills with a subtle dark overlay for depth
- Category colors are consistent across the app - Category colors are consistent across the app
- Avoid gradients on tiles unless it is a premium moment - Avoid gradients on tiles unless it is a premium moment
### 6. Text Colors ### 6. Text Colors
@@ -131,14 +131,14 @@ Consistent across all swipe interactions:
--- ---
## Gradients ## Gradients
### Brand Gradients ### Brand Gradients
``` ```
Primary: #e1306c → #9b59b6 (Rose to Purple) Primary: #e1306c → #9b59b6 (Rose to Purple)
Primary Subtle: rgba(225, 48, 108, 0.8) → rgba(155, 89, 182, 0.8) Primary Subtle: rgba(225, 48, 108, 0.8) → rgba(155, 89, 182, 0.8)
Primary Reverse: #9b59b6 → #e1306c (Purple to Rose) Primary Reverse: #9b59b6 → #e1306c (Purple to Rose)
``` ```
### Premium Gradients ### Premium Gradients
@@ -151,8 +151,8 @@ Premium Rose: #E8A4AE → #D4919B
### Background Gradients ### Background Gradients
``` ```
Background: #0e0e11 → #1f1417 → #0e0e11 Background: #0e0e11 → #1f1417 → #0e0e11
Background Reverse: #0e0e11 → #1f1417 → #0e0e11 Background Reverse: #0e0e11 → #1f1417 → #0e0e11
``` ```
### Boutique Card Gradients ### Boutique Card Gradients
@@ -172,44 +172,44 @@ Boutique Amethyst: rgba(142, 68, 173, 0.4) → rgba(44, 62, 80, 0.4)
## Component Patterns ## Component Patterns
### Buttons ### Buttons
| Variant | Background | Text | Border | | Variant | Background | Text | Border |
|---------|------------|------|--------| |---------|------------|------|--------|
| **Primary** | Primary gradient | White | None | | **Primary** | Primary gradient | White | None |
| **Secondary** | Surface | White | Border | | **Secondary** | Surface | White | Border |
| **Ghost** | Transparent | Primary | None | | **Ghost** | Transparent | Primary | None |
| **Danger** | Error gradient | White | None | | **Danger** | Error gradient | White | None |
| **Feature** | Feature color gradient | White | None | | **Feature** | Feature color gradient | White | None |
### Cards ### Cards
| Variant | Background | Border | Use Case | | Variant | Background | Border | Use Case |
|---------|------------|--------|----------| |---------|------------|--------|----------|
| **Solid** | Surface | Border | Standard content | | **Solid** | Surface | Border | Standard content |
| **Raised** | Surface | Border | Emphasized content + shadow | | **Raised** | Surface | Border | Emphasized content + shadow |
| **Tinted** | Category color | None | Home tiles, feature promos | | **Tinted** | Category color | None | Home tiles, feature promos |
### Inputs ### Inputs
| State | Border Color | Background | | State | Border Color | Background |
|-------|--------------|------------| |-------|--------------|------------|
| **Default** | Border | Surface | | **Default** | Border | Surface |
| **Focused** | Primary | Surface | | **Focused** | Primary | Surface |
| **Error** | Error | Surface | | **Error** | Error | Surface |
| **Disabled** | Border | Surface (opacity 0.6) | | **Disabled** | Border | Surface (opacity 0.6) |
--- ---
## Tab Bar ## Tab Bar
| Element | Color | | Element | Color |
|---------|-------| |---------|-------|
| **Background** | `#0e0e11` | | **Background** | `#0e0e11` |
| **Top Border** | `rgba(225, 48, 108, 0.2)` (primary tint) | | **Top Border** | `rgba(225, 48, 108, 0.2)` (primary tint) |
| **Active Icon** | Primary `#e1306c` | | **Active Icon** | Primary `#e1306c` |
| **Inactive Icon** | Text secondary | | **Inactive Icon** | Text secondary |
| **Badge** | Rose `#E8A4AE` | | **Badge** | Rose `#E8A4AE` |
## Play Button (Center Tab) ## Play Button (Center Tab)
@@ -217,10 +217,10 @@ The main "play" button uses the primary brand gradient for maximum brand presenc
| Element | Color | | Element | Color |
|---------|-------| |---------|-------|
| **Glow** | Primary glow `rgba(225, 48, 108, 0.3)` | | **Glow** | Primary glow `rgba(225, 48, 108, 0.3)` |
| **Border** | `rgba(225, 48, 108, 0.4)` | | **Border** | `rgba(225, 48, 108, 0.4)` |
| **Highlight** | Primary → Secondary gradient | | **Highlight** | Primary → Secondary gradient |
| **Icon** | Primary `#e1306c` | | **Icon** | Primary `#e1306c` |
## Radial Menu ## Radial Menu
@@ -228,9 +228,9 @@ Feature-specific colors for quick action items:
| Item | Variant | Color | | Item | Variant | Color |
|------|---------|-------| |------|---------|-------|
| **Match** | Primary | `#e1306c` (core feature) | | **Match** | Primary | `#e1306c` (core feature) |
| **Dares** | Gold | `#D4AF37` (premium/adventure) | | **Dares** | Gold | `#D4AF37` (premium/adventure) |
| **Quiz** | Rose | `#E8A4AE` (intimacy) | | **Quiz** | Rose | `#E8A4AE` (connection) |
--- ---
@@ -240,7 +240,7 @@ Feature-specific colors for quick action items:
| Feature | Icon Name | Ionicons | Description | | 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 | | **Dares** | `flash` | ⚡ | Lightning bolt - adventure, excitement, energy |
| **Quiz** | `help-circle` | ❓ | Question mark - discovery, questions about each other | | **Quiz** | `help-circle` | ❓ | Question mark - discovery, questions about each other |
| **Matches** (tab) | `heart` | ❤️ | Love heart - connections made between partners | | **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 | | Style | Size | Weight | Line Height | Usage |
|-------|------|--------|-------------|-------| |-------|------|--------|-------------|-------|
| `largeTitle` | 32px | Bold | 40px | Screen titles | | `largeTitle` | 32px | Bold | 40px | Screen titles |
| `title1` | 28px | Bold | 34px | Section headers | | `title1` | 28px | Bold | 34px | Section headers |
| `title2` | 24px | Bold | 30px | Card titles | | `title2` | 24px | Bold | 30px | Card titles |
| `title3` | 20px | SemiBold | 26px | Subsection headers | | `title3` | 20px | SemiBold | 26px | Subsection headers |
| `headline` | 17px | SemiBold | 22px | Emphasized body | | `headline` | 17px | SemiBold | 22px | Emphasized body |
| `body` | 16px | Regular | 22px | Body text | | `body` | 16px | Regular | 22px | Body text |
| `callout` | 15px | Regular | 20px | Secondary body | | `callout` | 15px | Regular | 20px | Secondary body |
| `subhead` | 14px | Regular | 20px | Supporting text | | `subhead` | 14px | Regular | 20px | Supporting text |
| `footnote` | 13px | Regular | 18px | Captions | | `footnote` | 13px | Regular | 18px | Captions |
| `caption1` | 12px | Regular | 16px | Small labels | | `caption1` | 12px | Regular | 16px | Small labels |
| `caption2` | 11px | Regular | 14px | Tiny text | | `caption2` | 11px | Regular | 14px | Tiny text |
--- ---
@@ -314,35 +314,35 @@ Feature-specific colors for quick action items:
--- ---
## Platform Considerations ## Platform Considerations
### iOS ### iOS
- Favor solid surfaces and shadows for depth - Favor solid surfaces and shadows for depth
- Haptic feedback on interactions - Haptic feedback on interactions
- Native-feeling animations - Native-feeling animations
### Android ### Android
- Match iOS surface colors and shadows - Match iOS surface colors and shadows
- Avoid blur and heavy transparency for performance - Avoid blur and heavy transparency for performance
- Adjust shadow rendering as needed - Adjust shadow rendering as needed
--- ---
## Do's and Don'ts ## Do's and Don'ts
### Do ### Do
- Use the primary gradient for main CTAs - Use the primary gradient for main CTAs
- Apply feature colors consistently within a feature - Apply feature colors consistently within a feature
- Use solid surfaces with soft shadows for depth - Use solid surfaces with soft shadows for depth
- Keep text high-contrast (white on dark) - Keep text high-contrast (white on dark)
- Use gold/rose for premium moments - Use gold/rose for premium moments
### Don't ### Don't
- Mix feature colors within a single screen - Mix feature colors within a single screen
- Use more than 2-3 accent colors per screen - Use more than 2-3 accent colors per screen
- Apply the primary gradient to everything - Apply the primary gradient to everything
- Use glass, blur, or frosted effects - Use glass, blur, or frosted effects
- Use pure black (#000000) for backgrounds - Use pure black (#000000) for backgrounds
--- ---
apps/web/app/layout.tsx
+7 -7
View File
@@ -4,21 +4,21 @@ import { PostHogProvider } from './providers'
import { PostHogPageView } from './PostHogPageView' import { PostHogPageView } from './PostHogPageView'
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Sauci - Ignite Your Connection', title: 'Sauci - Grow Closer Together',
description: 'Discover what you both desire. Sauci is the couples intimacy app that helps partners explore their connection through fun, meaningful questions.', description: 'Sauci helps couples communicate better and strengthen their relationship through thoughtful questions and meaningful conversations.',
keywords: ['couples app', 'intimacy', 'relationship', 'connection', 'dating', 'love'], keywords: ['couples app', 'relationship', 'communication', 'connection', 'couples questions', 'relationship improvement'],
authors: [{ name: 'Sauci' }], authors: [{ name: 'Sauci' }],
openGraph: { openGraph: {
title: 'Sauci - Ignite Your Connection', title: 'Sauci - Grow Closer Together',
description: 'Discover what you both desire. The couples intimacy app for deeper connections.', description: 'The couples app for better communication and stronger relationships.',
url: 'https://sauci.app', url: 'https://sauci.app',
siteName: 'Sauci', siteName: 'Sauci',
type: 'website', type: 'website',
}, },
twitter: { twitter: {
card: 'summary_large_image', card: 'summary_large_image',
title: 'Sauci - Ignite Your Connection', title: 'Sauci - Grow Closer Together',
description: 'Discover what you both desire. The couples intimacy app for deeper connections.', description: 'The couples app for better communication and stronger relationships.',
}, },
icons: { icons: {
icon: '/favicon.png', icon: '/favicon.png',
apps/web/app/privacy/page.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import type { Metadata } from 'next'
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Privacy Policy - Sauci', 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() { export default function PrivacyPolicy() {
apps/web/app/terms/page.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import type { Metadata } from 'next'
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Terms & Conditions - Sauci', 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() { export default function TermsAndConditions() {
apps/web/components/CTA.tsx
+32 -32
View File
@@ -1,9 +1,9 @@
'use client' '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' import { Play } from 'lucide-react'
export default function CTA() { export default function CTA() {
return ( return (
@@ -32,39 +32,39 @@ export default function CTA() {
</div> </div>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6"> <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
Ready to Discover What You{' '} Ready to Build a{' '}
<span className="gradient-text">Both Desire?</span> <span className="gradient-text">Stronger Relationship?</span>
</h2> </h2>
<p className="text-lg text-white/60 max-w-2xl mx-auto mb-8"> <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. Join thousands of couples who communicate better with Sauci.
Download now and start exploring together. Download now and start growing together.
</p> </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/gb/app/sauci-couple-games-romance/id6757159885" href="https://apps.apple.com/gb/app/sauci-couple-games-romance/id6757159885"
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>
<a <a
href="https://play.google.com/store/apps/details?id=com.sauci.app" href="https://play.google.com/store/apps/details?id=com.sauci.app"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="btn-secondary flex items-center gap-2" className="btn-secondary flex items-center gap-2"
> >
<Play className="w-5 h-5" /> <Play className="w-5 h-5" />
Download for Android Download for Android
</a> </a>
</div> </div>
</motion.div> </motion.div>
</div> </div>
</section> </section>
apps/web/components/FAQ.tsx
+6 -1
View File
@@ -18,7 +18,7 @@ const faqs = [
{ {
question: 'What happens if my partner says no to a question?', question: 'What happens if my partner says no to a question?',
answer: 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?', question: 'Do both partners need Pro?',
@@ -30,6 +30,11 @@ const faqs = [
answer: 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.', '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({ function FAQItem({
apps/web/components/Features.tsx
+6 -6
View File
@@ -7,21 +7,21 @@ const features = [
{ {
icon: Heart, icon: Heart,
title: 'Swipe to Connect', 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', color: 'text-primary',
bgColor: 'bg-primary/10', bgColor: 'bg-primary/10',
}, },
{ {
icon: Sparkles, icon: Sparkles,
title: 'Discover Matches', 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', color: 'text-secondary',
bgColor: 'bg-secondary/10', bgColor: 'bg-secondary/10',
}, },
{ {
icon: MessageCircle, icon: MessageCircle,
title: 'Unlock Conversations', 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', color: 'text-green-400',
bgColor: 'bg-green-400/10', bgColor: 'bg-green-400/10',
}, },
@@ -35,7 +35,7 @@ const features = [
{ {
icon: Flame, icon: Flame,
title: 'Curated Question Packs', 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', color: 'text-orange-400',
bgColor: 'bg-orange-400/10', 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"> <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
Everything You Need to{' '} Everything You Need to{' '}
<span className="gradient-text">Explore Together</span> <span className="gradient-text">Grow Together</span>
</h2> </h2>
<p className="text-lg text-white/60 max-w-2xl mx-auto"> <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> </p>
</motion.div> </motion.div>
apps/web/components/Hero.tsx
+32 -32
View File
@@ -3,8 +3,8 @@
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import Image from 'next/image' import Image from 'next/image'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import { Sparkles, Play } from 'lucide-react' import { Sparkles, Play } from 'lucide-react'
export default function Hero() { export default function Hero() {
const [hasScrolled, setHasScrolled] = useState(false) const [hasScrolled, setHasScrolled] = useState(false)
@@ -45,21 +45,21 @@ export default function Hero() {
</motion.div> </motion.div>
<h1 className="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold leading-tight mb-6"> <h1 className="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold leading-tight mb-6">
Discover What You{' '} Grow Closer{' '}
<span className="gradient-text">Both Desire</span> <span className="gradient-text">Together</span>
</h1> </h1>
<p className="text-lg sm:text-xl text-white/70 max-w-xl mx-auto lg:mx-0 mb-8"> <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, Answer thoughtful questions with your partner. When you both agree,
it&apos;s a match. Start conversations you&apos;ve always wanted to have. it&apos;s a match. Start meaningful conversations that strengthen your bond.
</p> </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 */} {/* Official App Store Badge */}
<a <a
href="https://apps.apple.com/gb/app/sauci-couple-games-romance/id6757159885" href="https://apps.apple.com/gb/app/sauci-couple-games-romance/id6757159885"
target="_blank" target="_blank"
rel="noopener noreferrer" 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" 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" 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" 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" fill="#fff"
/> />
</svg> </svg>
</a> </a>
<a <a
href="https://play.google.com/store/apps/details?id=com.sauci.app" href="https://play.google.com/store/apps/details?id=com.sauci.app"
target="_blank" target="_blank"
rel="noopener noreferrer" 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" 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" aria-label="Get it on Google Play"
> >
<Play className="w-6 h-6 text-white" /> <Play className="w-6 h-6 text-white" />
<span className="flex flex-col leading-none"> <span className="flex flex-col leading-none">
<span className="text-[10px] tracking-wide text-white/60">GET IT ON</span> <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 className="text-sm font-semibold text-white">Google Play</span>
</span> </span>
</a> </a>
<a href="#how-it-works" className="btn-secondary flex items-center gap-2 w-full sm:w-auto justify-center"> <a href="#how-it-works" className="btn-secondary flex items-center gap-2 w-full sm:w-auto justify-center">
See How It Works See How It Works
</a> </a>
</div> </div>
</motion.div> </motion.div>
apps/web/components/HowItWorks.tsx
+3 -3
View File
@@ -20,7 +20,7 @@ const steps: Array<{
{ {
number: '02', number: '02',
title: 'Browse Question Packs', 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, icon: Layers,
color: 'text-secondary', color: 'text-secondary',
}, },
@@ -34,7 +34,7 @@ const steps: Array<{
{ {
number: '04', number: '04',
title: 'Discover Your Matches', 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, icon: Heart,
color: 'text-pink-400', color: 'text-pink-400',
}, },
@@ -60,7 +60,7 @@ export default function HowItWorks() {
How <span className="gradient-text">Sauci</span> Works How <span className="gradient-text">Sauci</span> Works
</h2> </h2>
<p className="text-lg text-white/60 max-w-2xl mx-auto"> <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> </p>
</motion.div> </motion.div>
apps/web/components/Pricing.tsx
+34 -34
View File
@@ -1,14 +1,14 @@
'use client' 'use client'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import { Check, Crown, Heart, Sparkles, Infinity } from 'lucide-react' 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 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 PLAY_STORE_URL = 'https://play.google.com/store/apps/details?id=com.sauci.app'
const features = [ const features = [
'Unlock all question packs', 'Unlock all question packs',
'Access exclusive premium content', 'Access exclusive premium content',
'New packs added regularly', 'New packs added regularly',
@@ -16,18 +16,18 @@ const features = [
'One-time setup, shared benefits', 'One-time setup, shared benefits',
] ]
export default function Pricing() { export default function Pricing() {
const [downloadUrl, setDownloadUrl] = useState(APP_STORE_URL) const [downloadUrl, setDownloadUrl] = useState(APP_STORE_URL)
useEffect(() => { useEffect(() => {
const userAgent = navigator.userAgent || '' const userAgent = navigator.userAgent || ''
if (/Android/i.test(userAgent)) { if (/Android/i.test(userAgent)) {
setDownloadUrl(PLAY_STORE_URL) setDownloadUrl(PLAY_STORE_URL)
} }
}, []) }, [])
return ( return (
<section id="pricing" className="relative py-24 overflow-hidden"> <section id="pricing" className="relative py-24 overflow-hidden">
{/* Background */} {/* Background */}
<div className="absolute inset-0 bg-gradient-to-b from-background-light to-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> Upgrade to <span className="gradient-text">Sauci Pro</span>
</h2> </h2>
<p className="text-lg text-white/60 max-w-2xl mx-auto"> <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> </p>
</motion.div> </motion.div>
@@ -128,16 +128,16 @@ export default function Pricing() {
{/* CTA */} {/* CTA */}
<div className="text-center"> <div className="text-center">
<a <a
href={downloadUrl} 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"> <p className="text-sm text-white/40 mt-3">
Upgrade anytime from within the app Upgrade anytime from within the app
</p> </p>