Fresh groceries, delivered fast

CON-002 | Onboarding Welcome

Screen Overview

• Type: Fullscreen (no status bar, no bottom nav)
• Purpose: Welcome new users, communicate value proposition, and route to signup or login
• Shown: First app launch only (after splash). Skipped on subsequent launches.
• Navigation: "Get Started" → CON-003-service-area-check.html | "I already have an account" → CON-010-login-phone.html

Layout Specifications

• Frame: 375px wide, 812px min-height, white background
• Illustration area: Flex: 1, min-height 420px, gradient #E9EFE7 to #FFFFFF
• Text area: 32px horizontal padding, centered text
• Actions area: 24px horizontal padding, 48px bottom padding

Component Specs

• Illustration circle: 260x260px | Rounded full | Background: #E9EFE7 | Border: 2px dashed rgba(4, 63, 45, 0.15)
• Grocery icons: 3x2 grid, 16px gap | Each: 56x56px, 16px radius, white bg, subtle shadow
• Delivery badge: Absolute positioned | BG: #043F2D | Text: white 12px Alexandria semi-bold | Padding: 8px 16px | Radius: 20px
• Headline: Alexandria 28px / Bold | Color: #1A1A1A | Line-height: 1.2 | Margin-bottom: 12px
• Subtext: Alatsi 15px | Color: #6B7280 | Line-height: 1.55
• Primary button: 100% width, 56px height | BG: #C9F06B | Text: #043F2D Alexandria 16px semi-bold | Radius: 16px
• Ghost button: 100% width, 48px height | Transparent BG | Border: 1.5px solid #043F2D | Text: #043F2D Alexandria 15px medium | Radius: 16px

Interaction States

• Primary button hover: Background darkens to #b8e050
• Primary button active: Scale 0.98
• Ghost button hover: Light green tint overlay rgba(4, 63, 45, 0.04)
• Ghost button active: Scale 0.98

Accessibility

• Decorative icons have aria-hidden="true"
• Buttons use role="button" on anchor elements
• Semantic heading hierarchy: single h1 for main headline