Redesign onboarding with modern UI and subscription prompt

Complete overhaul of onboarding flow with 5 screens: 1. Welcome - Gradient intro with feature highlights 2. Time - Clean card-based time picker for reminders 3. Day - Tappable cards for today/yesterday selection 4. Style - Horizontal scrollable icon & color pickers 5. Subscription - Benefits list with free trial CTA Design improvements: - Beautiful gradient backgrounds on each screen - Consistent typography and visual hierarchy - White page indicators visible on all backgrounds - Haptic feedback on selections - "Maybe Later" option on subscription screen 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-10 09:09:33 -06:00
parent f37b811ab3
commit fd5100e6ed
6 changed files with 772 additions and 112 deletions
--- a/Shared/Onboarding/views/OnboardingWelcome.swift
+++ b/Shared/Onboarding/views/OnboardingWelcome.swift
@@ -0,0 +1,115 @@
+//
+//  OnboardingWelcome.swift
+//  Feels
+//
+//  Created by Claude Code on 12/10/24.
+//
+
+import SwiftUI
+
+struct OnboardingWelcome: View {
+    var body: some View {
+        ZStack {
+            // Gradient background
+            LinearGradient(
+                colors: [Color(hex: "667eea"), Color(hex: "764ba2")],
+                startPoint: .topLeading,
+                endPoint: .bottomTrailing
+            )
+            .ignoresSafeArea()
+
+            VStack(spacing: 0) {
+                Spacer()
+
+                // App icon/logo area
+                ZStack {
+                    Circle()
+                        .fill(.white.opacity(0.15))
+                        .frame(width: 160, height: 160)
+
+                    Circle()
+                        .fill(.white.opacity(0.2))
+                        .frame(width: 120, height: 120)
+
+                    Image(systemName: "heart.fill")
+                        .font(.system(size: 50))
+                        .foregroundColor(.white)
+                }
+                .padding(.bottom, 40)
+
+                // Title
+                Text("Welcome to Feels")
+                    .font(.system(size: 34, weight: .bold, design: .rounded))
+                    .foregroundColor(.white)
+                    .padding(.bottom, 12)
+
+                // Subtitle
+                Text("Track your mood, discover patterns,\nand understand yourself better.")
+                    .font(.system(size: 18, weight: .medium))
+                    .foregroundColor(.white.opacity(0.9))
+                    .multilineTextAlignment(.center)
+                    .padding(.horizontal, 40)
+
+                Spacer()
+
+                // Feature highlights
+                VStack(spacing: 20) {
+                    FeatureRow(icon: "bell.badge.fill", title: "Daily Reminders", description: "Never forget to log your mood")
+                    FeatureRow(icon: "chart.bar.fill", title: "Beautiful Insights", description: "See your mood patterns over time")
+                    FeatureRow(icon: "paintpalette.fill", title: "Fully Customizable", description: "Make it yours with themes & colors")
+                }
+                .padding(.horizontal, 30)
+                .padding(.bottom, 40)
+
+                // Swipe hint
+                HStack(spacing: 8) {
+                    Text("Swipe to get started")
+                        .font(.subheadline.weight(.medium))
+                        .foregroundColor(.white.opacity(0.7))
+                    Image(systemName: "chevron.right")
+                        .font(.subheadline.weight(.semibold))
+                        .foregroundColor(.white.opacity(0.7))
+                }
+                .padding(.bottom, 60)
+            }
+        }
+    }
+}
+
+struct FeatureRow: View {
+    let icon: String
+    let title: String
+    let description: String
+
+    var body: some View {
+        HStack(spacing: 16) {
+            ZStack {
+                Circle()
+                    .fill(.white.opacity(0.2))
+                    .frame(width: 50, height: 50)
+
+                Image(systemName: icon)
+                    .font(.system(size: 22))
+                    .foregroundColor(.white)
+            }
+
+            VStack(alignment: .leading, spacing: 2) {
+                Text(title)
+                    .font(.system(size: 16, weight: .semibold))
+                    .foregroundColor(.white)
+
+                Text(description)
+                    .font(.system(size: 14))
+                    .foregroundColor(.white.opacity(0.8))
+            }
+
+            Spacer()
+        }
+    }
+}
+
+struct OnboardingWelcome_Previews: PreviewProvider {
+    static var previews: some View {
+        OnboardingWelcome()
+    }
+}