diff --git a/src/app/(unauthenticated)/onboarding-1.tsx b/src/app/(unauthenticated)/onboarding-1.tsx
new file mode 100644
index 0000000..810475b
--- /dev/null
+++ b/src/app/(unauthenticated)/onboarding-1.tsx
@@ -0,0 +1,22 @@
+import React from "react"
+import { router } from "expo-router"
+
+import OnboardingLayout from "@/components/OnboardingLayout"
+import FeatureShowcase from "@/components/FeatureShowcase"
+
+export default function Onboarding1Screen() {
+ const handleNext = () => {
+ router.push("/(unauthenticated)/onboarding-2")
+ }
+
+ return (
+
+
+
+ )
+}
diff --git a/src/app/(unauthenticated)/onboarding-2.tsx b/src/app/(unauthenticated)/onboarding-2.tsx
new file mode 100644
index 0000000..a436535
--- /dev/null
+++ b/src/app/(unauthenticated)/onboarding-2.tsx
@@ -0,0 +1,22 @@
+import React from "react"
+import { router } from "expo-router"
+
+import OnboardingLayout from "@/components/OnboardingLayout"
+import FeatureShowcase from "@/components/FeatureShowcase"
+
+export default function Onboarding2Screen() {
+ const handleNext = () => {
+ router.push("/(unauthenticated)/onboarding-3")
+ }
+
+ return (
+
+
+
+ )
+}
diff --git a/src/app/(unauthenticated)/onboarding-3.tsx b/src/app/(unauthenticated)/onboarding-3.tsx
new file mode 100644
index 0000000..99da4e9
--- /dev/null
+++ b/src/app/(unauthenticated)/onboarding-3.tsx
@@ -0,0 +1,17 @@
+import React from "react"
+import { router } from "expo-router"
+
+import OnboardingLayout from "@/components/OnboardingLayout"
+import FeatureShowcase from "@/components/FeatureShowcase"
+
+export default function Onboarding3Screen() {
+ return (
+
+
+
+ )
+}
diff --git a/src/app/(unauthenticated)/splash.tsx b/src/app/(unauthenticated)/splash.tsx
new file mode 100644
index 0000000..9ac5062
--- /dev/null
+++ b/src/app/(unauthenticated)/splash.tsx
@@ -0,0 +1,16 @@
+import React from "react"
+import { View, Text } from "react-native"
+import { cn } from "@/utils/cn"
+
+export default function SplashScreen() {
+ return (
+
+
+
+ S
+
+ SmartBank
+
+
+ )
+}
diff --git a/src/app/(unauthenticated)/welcome.tsx b/src/app/(unauthenticated)/welcome.tsx
index 7406e0d..c1c5720 100644
--- a/src/app/(unauthenticated)/welcome.tsx
+++ b/src/app/(unauthenticated)/welcome.tsx
@@ -20,14 +20,14 @@ export default function Page() {
/>
-
+
- Sign up
+ Get Started
-
+
Log in
diff --git a/src/components/FeatureShowcase.tsx b/src/components/FeatureShowcase.tsx
new file mode 100644
index 0000000..a288a54
--- /dev/null
+++ b/src/components/FeatureShowcase.tsx
@@ -0,0 +1,204 @@
+import React from "react"
+import { View, Text } from "react-native"
+import { Ionicons } from "@expo/vector-icons"
+import { cn } from "@/utils/cn"
+
+interface FeatureShowcaseProps {
+ type: "account" | "savings" | "multicurrency"
+ data?: any
+}
+
+export default function FeatureShowcase({ type, data }: FeatureShowcaseProps) {
+ if (type === "account") {
+ return (
+
+
+
+ ADRIAN'S ACCOUNT
+ 4212423532
+
+
+ Available balance
+
+ €
+
+
+
+
+ 500.00 GBP
+
+
+
+
+
+
+ Top up
+
+
+
+
+ Transfer
+
+
+
+
+ Exchange
+
+
+
+
+
+ Transactions
+ See all
+
+
+
+
+
+ AK
+
+
+ To Adrian UIUX
+ Today, 3:30 PM
+
+
+ -£250
+
+
+
+
+
+
+ Direct deposits
+ 0 paychecks
+
+ $0
+
+
+
+ )
+ }
+
+ if (type === "savings") {
+ return (
+
+
+
+ Income
+
+
+ Expenses
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ $15000
+
+
+ $10000
+
+
+ $5000
+
+
+ $0
+
+
+
+
+
+ ↑ $12,455
+
+
+
+
+
+
+
+
+
+
+
+ Savings goals
+ Set your savings goal and track them here
+
+
+
+
+
+
+
+
+ )
+ }
+
+ if (type === "multicurrency") {
+ return (
+
+
+
+
+ $
+
+
+
+
+ €
+
+
+
+
+
+
+
+
+
+
+
+ ADRIAN'S ACCOUNT - GBP
+
+ 4212423532
+ 5000.00 GBP
+
+
+
+
+
+
+
+
+
+
+
+
+ €
+
+
+
+
+
+
+
+
+ ADRIAN'S ACCOUNT - USD
+
+ 4212423532
+ 12040.00 USD
+
+
+ )
+ }
+
+ return null
+}
diff --git a/src/components/OnboardingLayout.tsx b/src/components/OnboardingLayout.tsx
new file mode 100644
index 0000000..5d0816f
--- /dev/null
+++ b/src/components/OnboardingLayout.tsx
@@ -0,0 +1,72 @@
+import React from "react"
+import { View, Text, ScrollView, Pressable } from "react-native"
+import { router } from "expo-router"
+import { cn } from "@/utils/cn"
+
+import PageIndicator from "./PageIndicator"
+
+interface OnboardingLayoutProps {
+ headerText?: string
+ headline: string
+ children: React.ReactNode
+ currentPage: number
+ totalPages: number
+ onNext?: () => void
+ onSkip?: () => void
+ showButtons?: boolean
+}
+
+export default function OnboardingLayout({
+ headerText = "Welcome to SmartBank",
+ headline,
+ children,
+ currentPage,
+ totalPages,
+ onNext,
+ onSkip,
+ showButtons = true,
+}: OnboardingLayoutProps) {
+ const handleSignUp = () => {
+ router.push("/(unauthenticated)/signup")
+ }
+
+ const handleLogIn = () => {
+ router.push("/(unauthenticated)/login")
+ }
+
+ return (
+
+
+ {headerText}
+
+
+ {headline}
+
+
+
+ {children}
+
+
+
+
+
+ {showButtons && (
+
+
+ Sign up
+
+
+
+ Log in
+
+
+ )}
+
+ )
+}
diff --git a/src/components/PageIndicator.tsx b/src/components/PageIndicator.tsx
new file mode 100644
index 0000000..3fcf738
--- /dev/null
+++ b/src/components/PageIndicator.tsx
@@ -0,0 +1,26 @@
+import React from "react"
+import { View } from "react-native"
+import { cn } from "@/utils/cn"
+
+interface PageIndicatorProps {
+ totalPages: number
+ currentPage: number
+}
+
+export default function PageIndicator({ totalPages, currentPage }: PageIndicatorProps) {
+ return (
+
+ {Array.from({ length: totalPages }, (_, index) => (
+
+ ))}
+
+ )
+}