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>
This commit is contained in:
Trey t
194
Shared/Onboarding/views/OnboardingSubscription.swift
Normal file
194
Shared/Onboarding/views/OnboardingSubscription.swift
Normal file
@@ -0,0 +1,194 @@
|
||||
//
|
||||
// OnboardingSubscription.swift
|
||||
// Feels
|
||||
//
|
||||
// Created by Claude Code on 12/10/24.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
|
||||
struct OnboardingSubscription: View {
|
||||
@ObservedObject var onboardingData: OnboardingData
|
||||
@EnvironmentObject var iapManager: IAPManager
|
||||
@State private var showSubscriptionStore = false
|
||||
|
||||
let completionClosure: ((OnboardingData) -> Void)
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// Gradient background
|
||||
LinearGradient(
|
||||
colors: [Color(hex: "11998e"), Color(hex: "38ef7d")],
|
||||
startPoint: .topLeading,
|
||||
endPoint: .bottomTrailing
|
||||
)
|
||||
.ignoresSafeArea()
|
||||
|
||||
VStack(spacing: 0) {
|
||||
Spacer()
|
||||
|
||||
// Crown icon
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(.white.opacity(0.15))
|
||||
.frame(width: 120, height: 120)
|
||||
|
||||
Image(systemName: "crown.fill")
|
||||
.font(.system(size: 48))
|
||||
.foregroundColor(.yellow)
|
||||
}
|
||||
.padding(.bottom, 24)
|
||||
|
||||
// Title
|
||||
Text("Unlock the Full\nExperience")
|
||||
.font(.system(size: 28, weight: .bold, design: .rounded))
|
||||
.foregroundColor(.white)
|
||||
.multilineTextAlignment(.center)
|
||||
.padding(.bottom, 8)
|
||||
|
||||
// Trial info
|
||||
Text("Start your free 7-day trial")
|
||||
.font(.system(size: 16, weight: .semibold))
|
||||
.foregroundColor(.white.opacity(0.9))
|
||||
.padding(.bottom, 24)
|
||||
|
||||
Spacer()
|
||||
|
||||
// Benefits list
|
||||
VStack(spacing: 0) {
|
||||
BenefitRow(
|
||||
icon: "calendar.badge.clock",
|
||||
title: "Month & Year Views",
|
||||
description: "See your mood patterns across months and years"
|
||||
)
|
||||
|
||||
Divider()
|
||||
.background(.white.opacity(0.2))
|
||||
|
||||
BenefitRow(
|
||||
icon: "lightbulb.fill",
|
||||
title: "Smart Insights",
|
||||
description: "Discover trends and patterns in your moods"
|
||||
)
|
||||
|
||||
Divider()
|
||||
.background(.white.opacity(0.2))
|
||||
|
||||
BenefitRow(
|
||||
icon: "clock.arrow.circlepath",
|
||||
title: "Unlimited History",
|
||||
description: "Access all your past mood data forever"
|
||||
)
|
||||
|
||||
Divider()
|
||||
.background(.white.opacity(0.2))
|
||||
|
||||
BenefitRow(
|
||||
icon: "icloud.fill",
|
||||
title: "Cloud Sync",
|
||||
description: "Your data synced across all your devices"
|
||||
)
|
||||
|
||||
Divider()
|
||||
.background(.white.opacity(0.2))
|
||||
|
||||
BenefitRow(
|
||||
icon: "heart.fill",
|
||||
title: "Support Development",
|
||||
description: "Help us keep improving Feels for everyone"
|
||||
)
|
||||
}
|
||||
.padding(.vertical, 8)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 20)
|
||||
.fill(.white.opacity(0.15))
|
||||
)
|
||||
.padding(.horizontal, 24)
|
||||
|
||||
Spacer()
|
||||
|
||||
// Buttons
|
||||
VStack(spacing: 12) {
|
||||
// Subscribe button
|
||||
Button(action: {
|
||||
EventLogger.log(event: "onboarding_subscribe_tapped")
|
||||
showSubscriptionStore = true
|
||||
}) {
|
||||
HStack {
|
||||
Image(systemName: "sparkles")
|
||||
.font(.system(size: 18, weight: .semibold))
|
||||
|
||||
Text("Start Free Trial")
|
||||
.font(.system(size: 18, weight: .bold))
|
||||
}
|
||||
.foregroundColor(Color(hex: "11998e"))
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 18)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 16)
|
||||
.fill(.white)
|
||||
.shadow(color: .black.opacity(0.15), radius: 10, y: 5)
|
||||
)
|
||||
}
|
||||
|
||||
// Skip button
|
||||
Button(action: {
|
||||
EventLogger.log(event: "onboarding_complete")
|
||||
EventLogger.log(event: "onboarding_skip_subscription")
|
||||
completionClosure(onboardingData)
|
||||
}) {
|
||||
Text("Maybe Later")
|
||||
.font(.system(size: 16, weight: .medium))
|
||||
.foregroundColor(.white.opacity(0.8))
|
||||
}
|
||||
.padding(.top, 4)
|
||||
}
|
||||
.padding(.horizontal, 24)
|
||||
.padding(.bottom, 50)
|
||||
}
|
||||
}
|
||||
.sheet(isPresented: $showSubscriptionStore, onDismiss: {
|
||||
// After subscription store closes, complete onboarding
|
||||
EventLogger.log(event: "onboarding_complete")
|
||||
completionClosure(onboardingData)
|
||||
}) {
|
||||
FeelsSubscriptionStoreView()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct BenefitRow: View {
|
||||
let icon: String
|
||||
let title: String
|
||||
let description: String
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 16) {
|
||||
Image(systemName: icon)
|
||||
.font(.system(size: 22))
|
||||
.foregroundColor(.white)
|
||||
.frame(width: 40)
|
||||
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
Text(title)
|
||||
.font(.system(size: 16, weight: .semibold))
|
||||
.foregroundColor(.white)
|
||||
|
||||
Text(description)
|
||||
.font(.system(size: 13))
|
||||
.foregroundColor(.white.opacity(0.8))
|
||||
}
|
||||
|
||||
Spacer()
|
||||
}
|
||||
.padding(.horizontal, 20)
|
||||
.padding(.vertical, 14)
|
||||
}
|
||||
}
|
||||
|
||||
struct OnboardingSubscription_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
OnboardingSubscription(onboardingData: OnboardingData(), completionClosure: { _ in })
|
||||
.environmentObject(IAPManager())
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user