Onboarding Design Part 1

onboarding-1.swift

import SwiftUI
import Combine

struct ContentView: View {
    
    @State private var currentTab = 0
    
    var body: some View {
        TabView(selection: $currentTab,
                content:  {
            ForEach(OnboardingData.list) { viewData in
                VStack {
                    OnboardingView(data: viewData)
                        .tag(viewData.id)
                }
                .edgesIgnoringSafeArea(.bottom)
            }
        })
            .tabViewStyle(PageTabViewStyle(indexDisplayMode:  currentTab == 2 ? .never : .always))
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: currentTab == 2 ? .never : .always))
            .edgesIgnoringSafeArea(.bottom)
    }
}


struct OnboardingData: Hashable, Identifiable {
    
    let id: Int
    let mainImage: String
    let titleText: String
    let subtitleText: String

    static let list: [OnboardingData] = [
        OnboardingData(id: 0, mainImage: "plan", titleText: "Select your destination", subtitleText: "Choose your destination and plan your trip"),
        OnboardingData(id: 1, mainImage: "money", titleText: "Book your ticket", subtitleText: "Use the price comparison system to book tickets and restaurants with the lowest prices"),
        OnboardingData(id: 2, mainImage: "enjoy", titleText: "Enjoy the trip", subtitleText: "Please start and enjoy your journey!")
    ]
}

struct OnboardingView: View {
    
    var data: OnboardingData
    
    var body: some View {
        ZStack(alignment: .bottom) {
            VStack(spacing: 20) {
                ZStack {
                    
                    Image(data.mainImage)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 300, height: 300)
                        .offset(x: 0, y: 120)
                }
                
                Spacer()
                
                Text(data.titleText)
                    .font(.title2)
                    .bold()
                    .foregroundColor(Color.black)
                
                Text(data.subtitleText)
                    .font(.headline)
                    .multilineTextAlignment(.center)
                    .frame(maxWidth: 250)
                    .foregroundColor(Color.gray)
                
                Spacer()
                
                if data.id == 2 {
                    Button {

                    } label: {
                        ZStack {
                            Rectangle()
                                .foregroundColor(Color.blue)
                                .frame(width: UIScreen.main.bounds.size.width, height: 80)
                            Text("Get Started")
                                .font(.headline)
                                .foregroundColor(.white)
                        }
                    }
                } else {
                    HStack {
                        Button {

                        } label: {
                            Text("Skip")
                                .font(.headline)
                                .foregroundColor(.gray)
                        }
                        .padding(.leading, 40)
                        .padding(.bottom, 16)
                        Spacer()
                        Button {

                        } label: {
                            Text("Next")
                                .font(.headline)
                                .foregroundColor(.blue)
                        }
                        .padding(.trailing, 40)
                        .padding(.bottom, 16)
                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}