SwiftUI Onboarding & Welcome Screens

import SwiftUI

struct BasicWelcomeScreen: View {
    
    var body: some View {
        NavigationStack {
            VStack {
                Image(uiImage: UIImage(named: AppIconProvider.appIcon()) ?? UIImage())
                    .resizable()
                    .scaledToFit()
                    .frame(width: 120, height: 120)
                    .clipShape(.rect(cornerRadius: 22))
                    .shadow(color: .gray.opacity(0.6), radius: 1)
                    .padding(.bottom)
                VStack(alignment: .center, spacing: 8) {
                    Text("Welcome to Compot")
                        .font(.title)
                        .fontWeight(.semibold)
                        .foregroundStyle(.primary)
                        .frame(maxWidth: 350)
                    Text("The sweetest app for busy SwiftUI developers.")
                        .font(.title3)
                        .fontWeight(.regular)
                        .foregroundStyle(.primary)
                        .multilineTextAlignment(.center)
                        .frame(maxWidth: 250)
                }
            }
            .padding()
        }
        .safeAreaInset(edge: .bottom) {
            Button {
                print("get started")
            } label: {
                HStack(spacing: 8) {
                    Text("Get Started")
                    Image(systemName: "arrow.right")
                }
                .padding()
                .font(.headline)
                .foregroundStyle(.white)
                .frame(alignment: .center)
            }
            .frame(maxWidth: 450)
            .background(.tint)
            .clipShape(Capsule())
            .padding()
            .help("Accessibility hint, eg. Button to start to use the app.")
        }
    }
}

#Preview {
    BasicWelcomeScreen()
}

enum AppIconProvider {
    static func appIcon(in bundle: Bundle = .main) -> String {
        guard let icons = bundle.object(forInfoDictionaryKey: "CFBundleIcons") as? [String: Any],
              let primaryIcon = icons["CFBundlePrimaryIcon"] as? [String: Any],
              let iconFiles = primaryIcon["CFBundleIconFiles"] as? [String],
              let iconFileName = iconFiles.last else {
            fatalError("Couldn't find icon in the bundle.")
        }
        return iconFileName
    }
}

import SwiftUI

struct OnboardingTabViewBasic: View {
    
    let blueish: Color = Color(red: 0.42, green: 0.4, blue: 0.84)
    let pinkish: Color = Color(red: 0.92, green: 0.43, blue: 0.43)
    
    var body: some View {
        TabView {
         OnboardingTabViewBasicSlide(iconName: "swift", title: "SwiftUI Components", subtitle: "Choose from 100+ components and templates.")
        OnboardingTabViewBasicSlide(iconName: "doc.on.doc", title: "Copy & Share", subtitle: "Second slide subtitle")
        OnboardingTabViewBasicSlide(iconName: "globe", title: "Third slide title", subtitle: "Third slide subtitle")
        }
        .background(Gradient(colors: [blueish, pinkish]))
        .tabViewStyle(.page)
        .safeAreaInset(edge: .bottom) {
            OnboardingTabViewBasicButton(label: "Get Started") {
                print("get started")
            }
        }
    }
}

#Preview {
    OnboardingTabViewBasic()
}

struct OnboardingTabViewBasicSlide: View {
    
    let iconName: String
    let title: String
    let subtitle: String
    
    var body: some View {
        VStack(alignment: .center) {
            Image(systemName: iconName)
                .resizable()
                .scaledToFit()
                .frame(width: 120, height: 120)
                .clipShape(.rect(cornerRadius: 22))
                .shadow(color: .gray.opacity(0.6), radius: 1)
                .padding(.bottom)
            VStack(alignment: .center, spacing: 8) {
                Text(title)
                    .font(.title)
                    .fontWeight(.semibold)
                    .foregroundStyle(.primary)
                    .frame(maxWidth: 350)
                Text(subtitle)
                    .font(.title3)
                    .fontWeight(.regular)
                    .foregroundStyle(.primary)
                    .multilineTextAlignment(.center)
                    .frame(maxWidth: 350)
            }
        }
        .padding()
    }
}

struct OnboardingTabViewBasicButton: View {
    
    let label: String
    let action: () -> Void
    
    var body: some View {
        Button {
            action()
        } label: {
            HStack(spacing: 8) {
                Text(label)
            }
            .padding()
            .font(.headline)
            .foregroundStyle(.white)
            .frame(alignment: .center)
        }
        .frame(maxWidth: 450)
        .background(.tint)
        .clipShape(Capsule())
        .padding()
        .help("Accessibility hint, eg. Button to start to use the app.")
    }
}