SelfieCam/SelfieCam/Features/Onboarding/Views/OnboardingWelcomeView.swift

88 lines
3.0 KiB
Swift

//
// OnboardingWelcomeView.swift
// SelfieCam
//
// Welcome screen introducing the app with branding and a call to action.
// Supports landscape and iPad layouts with max width constraints.
//
import SwiftUI
import Bedrock
struct OnboardingWelcomeView: View {
@Bindable var viewModel: OnboardingViewModel
var body: some View {
OnboardingContentContainer {
VStack(spacing: Design.Spacing.xLarge) {
Spacer()
// App icon/branding
VStack(spacing: Design.Spacing.large) {
// Camera icon with glow effect
OnboardingHeroIconCircle(systemName: "camera.fill")
// App name
VStack(spacing: Design.Spacing.xSmall) {
Text("SelfieCam")
.styled(.titleBold)
Text(String(localized: "The perfect selfie, every time"))
.styled(.body, emphasis: .secondary)
}
}
Spacer()
// Feature highlights (centered within container)
VStack(spacing: Design.Spacing.medium) {
OnboardingFeatureRow(
icon: "light.max",
title: String(localized: "Ring Light"),
subtitle: String(localized: "Perfect lighting for every shot")
)
OnboardingFeatureRow(
icon: "camera.filters",
title: String(localized: "Pro Features"),
subtitle: String(localized: "HDR, skin smoothing, and more")
)
OnboardingFeatureRow(
icon: "hand.tap.fill",
title: String(localized: "Easy Capture"),
subtitle: String(localized: "Volume buttons, timers, gestures")
)
}
.frame(maxWidth: .infinity, alignment: .center)
.padding(.horizontal, Design.Spacing.large)
Spacer()
// Get Started button
OnboardingPrimaryButton(
title: String(localized: "Get Started"),
action: { viewModel.advanceToNextStep() }
)
.padding(.horizontal, Design.Spacing.xLarge)
.padding(.bottom, Design.Spacing.xLarge)
}
.padding(.horizontal, Design.Spacing.medium)
}
}
}
// MARK: - Preview
#Preview {
OnboardingWelcomeView(viewModel: OnboardingViewModel())
.background(AppSurface.primary)
.preferredColorScheme(.dark)
}
#Preview("iPad Landscape", traits: .landscapeLeft) {
OnboardingWelcomeView(viewModel: OnboardingViewModel())
.background(AppSurface.primary)
.preferredColorScheme(.dark)
}