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
166
design/stitch-onboarding/sign_up_for_greenlens/code.html
Normal file
166
design/stitch-onboarding/sign_up_for_greenlens/code.html
Normal file
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" 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 - Sign Up</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<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"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<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",
|
||||
"2xl": "1rem",
|
||||
"3xl": "1.5rem",
|
||||
"4xl": "2rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"xs": "8px",
|
||||
"xl": "32px",
|
||||
"base": "4px",
|
||||
"sm": "12px",
|
||||
"gutter": "20px",
|
||||
"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 { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#111111] flex items-center justify-center min-h-screen">
|
||||
<!-- iPhone 15 Frame -->
|
||||
<main class="w-full h-[884px] md:h-[852px] md:w-[393px] bg-surface relative overflow-hidden md:rounded-[55px] shadow-2xl md:border-[8px] md:border-black">
|
||||
<!-- Top 45% - Botanical Hero -->
|
||||
<div class="absolute top-0 left-0 w-full h-[50%] z-0">
|
||||
<div class="w-full h-full bg-cover bg-center" data-alt="A moody, high-end close-up photograph of vibrant indoor Monstera foliage. Deep, rich shadows contrast with soft, natural highlights reflecting off the glossy dark green leaves. The aesthetic is premium, minimalist, and calming, designed to serve as a cinematic backdrop with a stark light-mode UI overlay." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuB2FpbdibIeASSKYhIYDfwjgsD7FN1aOn1UfzEAbbg8U0xFmZkvNp0NX7FWPO8OYv6Vjzi46sLAmz5HjkexgD3c08MRpBnEmbf1nMU5CkJ8oNIQfMpta-gPg-h9cvojERpIFJcLWD5TKYuwwLJWd0tOqlV8MrqMkS32vRy8hO1m_AOTjVVoVLmW1sUlg8P-e6ojyA96g22IUckm0C9NcJCnoeYRo4u1f2lg-TZIWS4HJ61XG3u1DIrMCmsUmVYgGnz2qjixP46amm0')"></div>
|
||||
<!-- Dark Gradient Overlay -->
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-black/20 via-black/50 to-[#121A10]"></div>
|
||||
<!-- Hero Text Content -->
|
||||
<div class="absolute bottom-[15%] left-0 w-full px-gutter text-white z-10 flex flex-col gap-1">
|
||||
<h1 class="font-display text-display text-white">Anna,</h1>
|
||||
<h2 class="font-headline-md text-headline-md text-white/90">Let's finish your setup!</h2>
|
||||
<p class="font-body-md text-body-md text-white/80 mt-2 max-w-[90%]">
|
||||
Create an account to save your plants and 3 free scans per month.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom 55% - Cream Sheet -->
|
||||
<div class="absolute bottom-0 left-0 w-full h-[55%] bg-surface rounded-t-4xl z-20 flex flex-col px-gutter pt-8 pb-10 shadow-[0px_-8px_30px_rgba(0,0,0,0.12)]">
|
||||
<!-- Drag Handle (Visual only) -->
|
||||
<div class="absolute top-3 left-1/2 -translate-x-1/2 w-12 h-1.5 bg-surface-variant rounded-full"></div>
|
||||
<div class="flex-1 flex flex-col gap-4 mt-4">
|
||||
<!-- Apple Button -->
|
||||
<button class="w-full h-[56px] bg-on-surface text-surface rounded-2xl flex items-center justify-center gap-3 hover:bg-on-surface/90 transition-colors active:scale-[0.98]">
|
||||
<svg class="w-5 h-5 fill-current" viewbox="0 0 384 512"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 24 184.8 8.8 245.4c-21.7 86.8 5.4 191.6 37.1 237.9 19.3 28.2 44.9 57.2 75.3 56.1 29.2-1.1 41.5-18.9 76.5-18.9 34.9 0 46.5 18.9 76.9 18.2 31.2-.7 53.9-26.8 72.8-55.4 23.3-35.1 32.8-69.2 33.3-71-1.3-.4-62.8-24.1-62-93.6zm-41-118c15.6-20.2 26.6-47.6 23.7-75.1-23.7 1-52.9 16.2-69.2 35.8-13.6 16.4-26.6 44.4-23 71.3 26 2 51.5-12.7 68.5-32z"></path></svg>
|
||||
<span class="font-label-lg text-label-lg">Continue with Apple</span>
|
||||
</button>
|
||||
<!-- Divider -->
|
||||
<div class="flex items-center gap-4 my-2 opacity-60">
|
||||
<div class="flex-1 h-px bg-outline-variant"></div>
|
||||
<span class="font-label-md text-label-md text-on-surface-variant uppercase">OR</span>
|
||||
<div class="flex-1 h-px bg-outline-variant"></div>
|
||||
</div>
|
||||
<!-- Email Button -->
|
||||
<button class="w-full h-[56px] bg-transparent border-2 border-outline-variant text-on-surface rounded-2xl flex items-center justify-center gap-3 hover:bg-surface-variant/50 transition-colors active:scale-[0.98]">
|
||||
<span class="material-symbols-outlined" data-icon="mail" data-weight="fill" style="font-variation-settings: 'FILL' 1;">mail</span>
|
||||
<span class="font-label-lg text-label-lg">Continue with Email</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Bottom Actions & Legal -->
|
||||
<div class="mt-auto flex flex-col items-center gap-6">
|
||||
<p class="font-body-md text-body-md text-on-surface">
|
||||
Already have an account?
|
||||
<a class="text-primary-container font-label-lg text-label-lg hover:underline ml-1" href="#">Log in</a>
|
||||
</p>
|
||||
<p class="text-[11px] leading-tight text-on-surface-variant text-center px-4">
|
||||
By continuing, you agree to GreenLens's <a class="underline" href="#">Terms of Service</a> and <a class="underline" href="#">Privacy Policy</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user