Add onboarding/soft-paywall/free-tier design spec + Stitch design reference
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Timo Knuth
189
design/stitch-onboarding/greenlens_pro_paywall/code.html
Normal file
189
design/stitch-onboarding/greenlens_pro_paywall/code.html
Normal file
@@ -0,0 +1,189 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
|
||||
<title>GreenLens Pro - Paywall</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary": "#375d00",
|
||||
"on-surface": "#191d16",
|
||||
"on-secondary-fixed": "#012104",
|
||||
"on-secondary-fixed-variant": "#2d4e2b",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-low": "#f2f5e9",
|
||||
"error-container": "#ffdad6",
|
||||
"secondary": "#446741",
|
||||
"outline": "#72796a",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container": "#ecefe4",
|
||||
"on-error": "#ffffff",
|
||||
"on-surface-variant": "#42493c",
|
||||
"background": "#f8fbef",
|
||||
"error": "#ba1a1a",
|
||||
"outline-variant": "#c2c9b7",
|
||||
"on-secondary-container": "#486b45",
|
||||
"secondary-fixed": "#c5edbd",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary": "#2b5f0b",
|
||||
"surface-dim": "#d8dbd0",
|
||||
"primary-container": "#437824",
|
||||
"tertiary-fixed-dim": "#a5d56e",
|
||||
"inverse-on-surface": "#eff2e7",
|
||||
"surface-container-high": "#e7e9de",
|
||||
"surface-bright": "#f8fbef",
|
||||
"inverse-surface": "#2e322a",
|
||||
"on-background": "#191d16",
|
||||
"on-primary-fixed": "#092100",
|
||||
"secondary-container": "#c2eaba",
|
||||
"on-tertiary-container": "#cbfd91",
|
||||
"primary-fixed": "#b6f390",
|
||||
"tertiary-container": "#4d771b",
|
||||
"primary-fixed-dim": "#9bd776",
|
||||
"tertiary-fixed": "#c0f287",
|
||||
"surface-tint": "#366a17",
|
||||
"secondary-fixed-dim": "#aad1a2",
|
||||
"surface-variant": "#e1e4d9",
|
||||
"on-error-container": "#93000a",
|
||||
"on-tertiary-fixed-variant": "#2e4f00",
|
||||
"on-primary": "#ffffff",
|
||||
"on-primary-container": "#c1ff99",
|
||||
"surface-container-highest": "#e1e4d9",
|
||||
"on-tertiary-fixed": "#0f2000",
|
||||
"on-primary-fixed-variant": "#205100",
|
||||
"inverse-primary": "#9bd776",
|
||||
"surface": "#f8fbef"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"xs": "8px",
|
||||
"xl": "32px",
|
||||
"base": "4px",
|
||||
"sm": "12px",
|
||||
"gutter": "16px",
|
||||
"md": "16px",
|
||||
"lg": "24px",
|
||||
"container-margin": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": ["Plus Jakarta Sans"],
|
||||
"body-lg": ["Plus Jakarta Sans"],
|
||||
"label-lg": ["Plus Jakarta Sans"],
|
||||
"body-md": ["Plus Jakarta Sans"],
|
||||
"headline-lg": ["Plus Jakarta Sans"],
|
||||
"display": ["Plus Jakarta Sans"],
|
||||
"headline-md": ["Plus Jakarta Sans"]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": ["12px", {"lineHeight": "16px", "fontWeight": "600"}],
|
||||
"body-lg": ["17px", {"lineHeight": "26px", "fontWeight": "500"}],
|
||||
"label-lg": ["13px", {"lineHeight": "18px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"body-md": ["15px", {"lineHeight": "22px", "fontWeight": "400"}],
|
||||
"headline-lg": ["28px", {"lineHeight": "36px", "letterSpacing": "-0.01em", "fontWeight": "800"}],
|
||||
"display": ["34px", {"lineHeight": "42px", "letterSpacing": "-0.02em", "fontWeight": "800"}],
|
||||
"headline-md": ["22px", {"lineHeight": "28px", "fontWeight": "700"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface antialiased min-h-screen flex flex-col relative font-body-md overflow-x-hidden selection:bg-primary-container selection:text-on-primary-container">
|
||||
<!-- Hero Header Background -->
|
||||
<div class="absolute top-0 left-0 w-full h-80 z-0 pointer-events-none">
|
||||
<div class="w-full h-full bg-cover bg-center" data-alt="A soft, premium botanical photograph of a lush Monstera deliciosa leaf bathed in warm morning sunlight. The lighting is natural and high-key, creating a bright, airy, light-mode aesthetic. The background softly blurs out, allowing the vibrant, organic greens of the plant to contrast beautifully against a warm, minimalist cream backdrop. The mood is calm, upscale, and inviting." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDvuJKth4pDT75-D0SOCZSHfyxOmTSYlp2wVfMF_cvw7EojCdrM7InYI9z_zZhxaCkB68Hc8oG_lw0h1lJfm3_8So6u5vT8WQmYsQbx0Vgt0ObahJ5JVfSYz89qYFLbo24xIoTZgLEMAhUTfnCqFSArnc727JG0cvbuWGISnP-BgzC5LS7E2kIIRkq9a2T2wbcXdZlTXWYJ9CoV7_nYSum-sfOI4-yAif6n-VpKO_motQM_ZBL5TOeI6PlhTBjS1zrS-NfT19ziw70')"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-surface/10 via-surface/60 to-surface"></div>
|
||||
</div>
|
||||
<!-- Top Action Bar -->
|
||||
<div class="absolute top-0 left-0 w-full px-container-margin pt-14 pb-4 flex justify-between items-center z-20">
|
||||
<button class="w-10 h-10 rounded-full bg-surface-container-lowest/60 backdrop-blur-md flex items-center justify-center text-on-surface shadow-sm hover:bg-surface-container-lowest/80 transition-colors active:scale-95">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
<button class="font-label-lg text-label-lg text-on-surface hover:opacity-80 transition-opacity drop-shadow-sm">
|
||||
Restore
|
||||
</button>
|
||||
</div>
|
||||
<!-- Scrollable Content Canvas -->
|
||||
<main class="relative z-10 flex-1 flex flex-col px-container-margin pt-56 pb-12 w-full max-w-md mx-auto">
|
||||
<!-- Typography Header -->
|
||||
<div class="flex flex-col items-center text-center mb-xl">
|
||||
<span class="font-label-lg text-label-lg text-primary mb-sm tracking-[0.1em] uppercase">GreenLens Pro</span>
|
||||
<h1 class="font-display text-display text-on-surface font-extrabold mb-sm leading-tight">Get Unlimited Access</h1>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-[280px]">Unlimited scans, health checks and your personal care plan.</p>
|
||||
</div>
|
||||
<!-- Main Plan Card -->
|
||||
<div class="bg-surface-container rounded-xl p-lg mb-lg shadow-[0px_4px_20px_rgba(16,28,18,0.06)] flex flex-col gap-sm border border-outline-variant/20">
|
||||
<h2 class="font-headline-md text-headline-md text-on-surface">GreenLens Pro</h2>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">Unlimited AI scans, health diagnosis, 7-day rescue plans, 100 credits/month</p>
|
||||
<div class="font-label-lg text-label-lg text-on-surface mt-base pt-sm border-t border-outline-variant/30">
|
||||
Free for 7 days, then €39.99/year
|
||||
</div>
|
||||
</div>
|
||||
<!-- Toggle Row -->
|
||||
<div class="bg-surface-container-lowest rounded-xl px-md py-sm mb-xl flex justify-between items-center shadow-[0px_4px_20px_rgba(16,28,18,0.04)]">
|
||||
<span class="font-label-lg text-label-lg text-on-surface">Free Trial Enabled</span>
|
||||
<!-- iOS Style Toggle ON -->
|
||||
<button class="w-14 h-8 bg-primary-container rounded-full relative transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-surface">
|
||||
<div class="absolute right-1 top-1 w-6 h-6 bg-surface-container-lowest rounded-full shadow-sm transition-all"></div>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Timeline / Schedule -->
|
||||
<div class="flex flex-col gap-lg pl-sm mb-xl relative">
|
||||
<!-- Connecting Line -->
|
||||
<div class="absolute left-[19px] top-4 bottom-8 w-0.5 bg-surface-variant z-0"></div>
|
||||
<!-- Step 1: Active -->
|
||||
<div class="flex items-start gap-md relative z-10">
|
||||
<div class="w-4 h-4 rounded-full bg-primary mt-1 border-[3px] border-surface shadow-sm shrink-0"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-label-lg text-label-lg text-primary">Due today — 7 days free</span>
|
||||
<span class="font-body-md text-body-md text-primary mt-base">€0.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Step 2: Future -->
|
||||
<div class="flex items-start gap-md relative z-10">
|
||||
<div class="w-4 h-4 rounded-full bg-surface-variant mt-1 border-[3px] border-surface shadow-sm shrink-0"></div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-body-md text-body-md text-on-surface-variant">Due July 13</span>
|
||||
<span class="font-label-lg text-label-lg text-on-surface mt-base">€39.99</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sticky Bottom Actions -->
|
||||
<div class="mt-auto flex flex-col items-center gap-md pt-md w-full">
|
||||
<button class="w-full h-14 bg-primary-container text-on-primary rounded-xl font-label-lg text-label-lg flex items-center justify-center shadow-lg hover:bg-tertiary-container hover:shadow-xl active:scale-[0.98] transition-all duration-200">
|
||||
Try Free
|
||||
</button>
|
||||
<div class="flex flex-col items-center gap-sm">
|
||||
<span class="font-label-md text-label-md text-on-surface-variant">Cancel Anytime</span>
|
||||
<div class="flex items-center gap-sm text-outline-variant">
|
||||
<a class="font-label-md text-label-md text-outline hover:text-on-surface transition-colors" href="#">Privacy</a>
|
||||
<span class="font-label-md text-label-md">|</span>
|
||||
<a class="font-label-md text-label-md text-outline hover:text-on-surface transition-colors" href="#">Terms</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design/stitch-onboarding/greenlens_pro_paywall/screen.png
Normal file
BIN
design/stitch-onboarding/greenlens_pro_paywall/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 350 KiB |
Reference in New Issue
Block a user