finished welcome view

ShhShell/Views/Onboarding/WelcomeChunk.swift

@@ -11,34 +11,44 @@ struct WelcomeChunk: View {
 	@State var symbol: String
 	@State var title: String
 	@State var para: String
-	@State var timeTarget: TimeInterval = 0
+	@State var delay: TimeInterval = 0
 	
 	@State private var spawnDate: Date = .now
 	
 	var body: some View {
 		TimelineView(.animation) { tl in
 			let time = tl.date.timeIntervalSince(spawnDate)
-			HStack {
+			HStack(spacing: 25) {
-				if time > timeTarget {
+				if time > delay {
 					Image(systemName: symbol)
 						.resizable().scaledToFit()
-						.frame(width: 50)
+						.symbolRenderingMode(.hierarchical)
+						.frame(width: 50, height: 50)
+						.transition(.scale)
 				}
 				VStack(alignment: .leading) {
-					if time > timeTarget+1 {
+					if time > delay+0.25 {
 						Text(title)
 							.bold()
 							.font(.headline)
+							.transition(.blurReplace)
+					}
+					if time > delay+0.75 && !para.isEmpty {
 						Text(para)
 							.foregroundStyle(.gray)
+							.font(.footnote)
+							.transition(.blurReplace)
 							.multilineTextAlignment(.leading)
 					}
 				}
+				.shadow(color: .white, radius: time > delay+0.75 ? 0 : 5)
+				
 				Spacer()
 			}
 			.animation(.spring, value: time)
 			.frame(maxWidth: .infinity)
-			.padding(.horizontal, 50)
+			.padding(.horizontal, 30)
+			.padding(10)
 		}
 	}
 }

ShhShell/Views/Onboarding/WelcomeView.swift

@@ -9,34 +9,94 @@ import SwiftUI
 
 struct WelcomeView: View {
 	@State private var spawnDate: Date = .now
+	@Environment(\.dismiss) var dismiss
+	
 	var body: some View {
 		TimelineView(.animation) { tl in
 			let time = tl.date.timeIntervalSince(spawnDate)
-#if DEBUG
-			Button("reset") { spawnDate = .now }
-			Text("\(time)")
-				.frame(width: 150, alignment: .leading)
-#endif
-			
 			VStack {
-				
+				VStack(spacing: 20) {
-				Text("Welcome")
+					if time > 0.1 {
-					.monospaced()
+							Image("regular")
-					.font(.largeTitle)
+								.resizable().scaledToFit()
-					.bold()
+								.frame(width: 100)
-				
+								.clipShape(RoundedRectangle(cornerRadius: 22))
-				if time > 1 {
+								.shadow(color: .white, radius: time > 0.25 ? 5 : 0)
-					Image("regular")
+								.transition(.scale)
-						.resizable().scaledToFit()
+					}
-						.frame(width: 100)
+					if time > 2 {
-						.clipShape(RoundedRectangle(cornerRadius: 22))
+						Text("Welcome")
-						.shadow(color: .white, radius: 6)
+							.monospaced()
-						.transition(.scale)
+							.font(.largeTitle)
-						.padding(.bottom)
+							.bold()
+							.transition(.blurReplace)
+					}
 				}
-				if time > 1 {
+				.padding(.top, time > 3 ? 50 : 0)
-					WelcomeChunk(symbol: "hare.fill", title: "Blazing fast", para: "hi", timeTarget: 1)
+				
+				if time > 3 {
+					Spacer()
 				}
+					
+				WelcomeChunk(
+					symbol: "bolt.fill",
+					title: "Blazing Fast",
+					para: "",
+					delay: 4
+				)
+				WelcomeChunk(
+					symbol: "apple.terminal.on.rectangle.fill",
+					title: "Multiple Sessions",
+					para: "Connect to the same host again and again, or different ones",
+					delay: 5
+				)
+				WelcomeChunk(
+					symbol: "swatchpalette.fill",
+					title: "Themes",
+					para: "Customise ShhShell by importing themes, or make your own!",
+					delay: 6
+				)
+				WelcomeChunk(
+					symbol: "lock.shield.fill",
+					title: "Secure",
+					para: "ShhShell uses secure Elliptic Curve keys, and keeps you safe by verifying hostkeys haven't changed",
+					delay: 7
+				)
+				WelcomeChunk(
+					symbol: "ellipsis.circle",
+					title: "And more...",
+					para: "Snippets, iCloud Sync, Fonts, Terminal Filters, Connection History",
+					delay: 8
+				)
+				
+				if time > 3 {
+					Spacer()
+				}
+				if time > 9 {
+#if swift(>=6.2)
+					Button("Continue") { dismiss() }
+						.buttonStyle(.glassProminent)
+#else
+					Button {
+						dismiss()
+					} label: {
+						ZStack {
+							Color.terminalGreen
+							Text("Continue")
+								.monospaced()
+								.bold()
+								.foregroundStyle(.black)
+						}
+						.clipShape(RoundedRectangle(cornerRadius: 50))
+					}
+					.buttonStyle(.plain)
+					.frame(width: .infinity, height: 50)
+					.padding(.horizontal, 75)
+#endif
+				}
+			}
+			.onDisappear {
+				
 			}
 			.animation(.spring, value: time)
 			.preferredColorScheme(.dark)