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>

Shared/Onboarding/views/OnboardingTime.swift

@@ -9,53 +9,86 @@ import SwiftUI
 
 struct OnboardingTime: View {
     @ObservedObject var onboardingData: OnboardingData
-    
+
     var formatter: DateFormatter {
         let dateFormatter = DateFormatter()
         dateFormatter.timeStyle = .short
         return dateFormatter
     }
-    
+
     var body: some View {
         ZStack {
-            GeometryReader { geometry in
-                VStack(alignment: .leading) {
-                    Spacer()
-                    Image("horrible", bundle: .main)
-                        .foregroundColor(Color(UIColor.darkText))
-                        .opacity(0.04)
-                        .scaleEffect(1.2, anchor: .trailing)
-                    Spacer()
+            // Gradient background
+            LinearGradient(
+                colors: [Color(hex: "f093fb"), Color(hex: "f5576c")],
+                startPoint: .topLeading,
+                endPoint: .bottomTrailing
+            )
+            .ignoresSafeArea()
+
+            VStack(spacing: 0) {
+                Spacer()
+
+                // Icon
+                ZStack {
+                    Circle()
+                        .fill(.white.opacity(0.15))
+                        .frame(width: 120, height: 120)
+
+                    Image(systemName: "bell.fill")
+                        .font(.system(size: 44))
+                        .foregroundColor(.white)
                 }
-                
-                
-                ScrollView {
-                    Text(String(localized: "onboarding_time_title"))
-                        .font(.title)
-                        .padding()
-                        .fixedSize(horizontal: false, vertical: true)
-                        .foregroundColor(Color(UIColor.white))
-                    
-                    DatePicker("", selection: $onboardingData.date,
-                               displayedComponents: .hourAndMinute)
-                    .scaleEffect(2)
-                    .labelsHidden()
-                    .frame(minWidth: 0, maxWidth: .infinity)
-                    .padding()
-                    .padding([.top, .bottom], 25)
-                    .colorScheme(.dark)
-                    
-                    Text(String(format: String(localized: "onboarding_time_body"),
-                                formatter.string(from: onboardingData.date)))
-                    .font(.title3)
-                    .fixedSize(horizontal: false, vertical: true)
-                    .padding()
-                    .foregroundColor(Color(UIColor.white))
+                .padding(.bottom, 32)
+
+                // Title
+                Text("When should we\nremind you?")
+                    .font(.system(size: 28, weight: .bold, design: .rounded))
+                    .foregroundColor(.white)
+                    .multilineTextAlignment(.center)
+                    .padding(.bottom, 12)
+
+                // Subtitle
+                Text("Pick a time that works for your daily check-in")
+                    .font(.system(size: 16, weight: .medium))
+                    .foregroundColor(.white.opacity(0.85))
+                    .multilineTextAlignment(.center)
+                    .padding(.horizontal, 40)
+
+                Spacer()
+
+                // Time picker card
+                VStack(spacing: 16) {
+                    DatePicker("", selection: $onboardingData.date, displayedComponents: .hourAndMinute)
+                        .datePickerStyle(.wheel)
+                        .labelsHidden()
+                        .colorScheme(.light)
                 }
-                .padding()
+                .padding(.vertical, 20)
+                .padding(.horizontal, 24)
+                .background(
+                    RoundedRectangle(cornerRadius: 24)
+                        .fill(.white)
+                        .shadow(color: .black.opacity(0.1), radius: 20, y: 10)
+                )
+                .padding(.horizontal, 30)
+
+                Spacer()
+
+                // Info text
+                HStack(spacing: 12) {
+                    Image(systemName: "info.circle.fill")
+                        .font(.system(size: 20))
+                        .foregroundColor(.white.opacity(0.8))
+
+                    Text("You'll get a gentle reminder at \(formatter.string(from: onboardingData.date)) every day")
+                        .font(.system(size: 14, weight: .medium))
+                        .foregroundColor(.white.opacity(0.9))
+                }
+                .padding(.horizontal, 30)
+                .padding(.bottom, 80)
             }
         }
-        .background(Color(hex: "ff453a"))
     }
 }
 
@@ -63,7 +96,7 @@ struct OnboardingTime_Previews: PreviewProvider {
     static var previews: some View {
         Group {
             OnboardingTime(onboardingData: OnboardingData())
-            
+
             OnboardingTime(onboardingData: OnboardingData())
                 .preferredColorScheme(.dark)
         }