Merge pull request #212 from JayWebtech/onboarding-screen

feat : Onboarding screen

mobile-app/app.json

@@ -32,6 +32,14 @@
           "resizeMode": "contain",
           "backgroundColor": "#ffffff"
         }
+      ],
+      [
+        "expo-font", {
+          "fonts": [
+            "./assets/fonts/Bricolage.ttf",
+            "./assets/fonts/Inter.ttf"
+          ]
+        }
       ]
     ],
     "experiments": {

mobile-app/app/_layout.tsx

@@ -1,38 +1,103 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
-import { StatusBar } from 'expo-status-bar';
-import { useEffect } from 'react';
-import 'react-native-reanimated';
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from "@react-navigation/native";
+import { useFonts } from "expo-font";
+import { Stack } from "expo-router";
+import * as SplashScreen from "expo-splash-screen";
+import { StatusBar } from "expo-status-bar";
+import { useEffect, useState } from "react";
+import "react-native-reanimated";
 
-import { useColorScheme } from '@/hooks/useColorScheme';
+import { useColorScheme } from "@/hooks/useColorScheme";
+import { View, Text, StyleSheet } from "react-native";
+import { Colors } from "@/constants/Colors";
+import { LinearGradient } from "expo-linear-gradient";
+import { Fonts } from "@/constants/Fonts";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
   const colorScheme = useColorScheme();
+  const [splashVisible, setSplashVisible] = useState(true);
+
   const [loaded] = useFonts({
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
+    Bricolage: require("../assets/fonts/Bricolage.ttf"),
+    Inter: require("../assets/fonts/Inter.ttf"),
   });
 
   useEffect(() => {
-    if (loaded) {
-      SplashScreen.hideAsync();
-    }
-  }, [loaded]);
+    SplashScreen.hideAsync();
+    setTimeout(() => {
+      setSplashVisible(false);
+    }, 3000);
+  }, []);
 
-  if (!loaded) {
-    return null;
+  if (splashVisible && !loaded) {
+    return (
+      <LinearGradient
+        colors={[Colors.light.gradient, Colors.light.primary]}
+        style={styles.container}
+      >
+        <View style={styles.titleContainer}>
+          <Text style={styles.splashTitle}>
+            Lyric
+            <Text style={styles.splashFlip}>Flip</Text>
+          </Text>
+        </View>
+        <View style={styles.bottomContainer}>
+          <Text style={styles.splashSubtitle}>
+            Have fun testing your lyrical knowledge 🎵
+          </Text>
+        </View>
+      </LinearGradient>
+    );
   }
 
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack screenOptions={{headerShown: false}}>
-        <Stack.Screen name='index' options={{headerShown: false}} />
+    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+      <Stack screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="index" />
+        <Stack.Screen name="screens/auth" options={{ title: "Auth" }} />
       </Stack>
       <StatusBar style="auto" />
     </ThemeProvider>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    backgroundColor: Colors.light.gradient,
+  },
+  titleContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  splashTitle: {
+    fontSize: 48,
+    color: "white",
+    fontFamily: Fonts.Bricolage,
+  },
+  bottomContainer: {
+    justifyContent: "flex-end",
+    width: "100%",
+    alignItems: "center",
+    paddingBottom: 30,
+  },
+  splashSubtitle: {
+    fontSize: 16,
+    color: "white",
+    fontFamily: Fonts.Inter,
+  },
+  splashFlip: {
+    color: Colors.light.tetiary,
+    fontFamily: Fonts.Bricolage,
+  },
+});

mobile-app/app/components/auth/Header.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { View, Text, StyleSheet, SafeAreaView, StatusBar } from "react-native";
+import { HeaderProps } from "@/app/types/all_types";
+import { LinearGradient } from "expo-linear-gradient";
+import { Colors } from "@/constants/Colors";
+import { Fonts } from "@/constants/Fonts";
+
+const Header: React.FC<HeaderProps> = ({ title, subtitle }) => {
+  return (
+    <SafeAreaView>
+      <StatusBar barStyle="light-content" />
+      <LinearGradient
+        colors={[Colors.light.gradient, Colors.light.primary]}
+        style={styles.header}
+      >
+        <View style={styles.container}>
+          <Text style={styles.logo}>
+            Lyric<Text style={styles.logoAccent}>Flip</Text>
+          </Text>
+          <View style={styles.textContainer}>
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.subtitle}>{subtitle}</Text>
+          </View>
+        </View>
+      </LinearGradient>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    backgroundColor: "#9747FF",
+    paddingHorizontal: 20,
+    paddingTop: 70,
+    paddingBottom: 30,
+  },
+  container: {
+    gap: 50,
+  },
+  logo: {
+    fontSize: 24,
+    color: "white",
+    fontFamily: Fonts.Bricolage,
+  },
+  logoAccent: {
+    color: Colors.light.tetiary,
+  },
+  textContainer: {
+    gap: 8,
+  },
+  title: {
+    fontSize: 14,
+    fontFamily: Fonts.Inter,
+    color: "white",
+    letterSpacing: 0.5,
+  },
+  subtitle: {
+    fontSize: 20,
+    fontFamily: Fonts.Inter,
+    color: "white",
+    lineHeight: 32,
+  },
+});
+
+export default Header;

mobile-app/app/components/auth/WalletConnection.tsx

@@ -0,0 +1,97 @@
+import { Fonts } from "@/constants/Fonts";
+import React from "react";
+import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native";
+import Button from "../form/Button";
+const argent = require("@/assets/images/argent.png");
+const okx = require("@/assets/images/okx.png");
+const brave = require("@/assets/images/brave.png");
+
+const WalletConnection = () => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.heading}>
+        Create Account with your preferred wallet
+      </Text>
+
+      <TouchableOpacity style={styles.walletButton}>
+        <Image source={argent} style={styles.walletIcon} />
+        <Text style={styles.walletText}>Continue with Argent</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.walletButton}>
+        <Image source={okx} style={styles.walletIcon} />
+        <Text style={styles.walletText}>Continue with OKX</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.walletButton}>
+        <Image source={brave} style={styles.walletIcon} />
+        <Text style={styles.walletText}>Continue with Braavos</Text>
+      </TouchableOpacity>
+
+      <View style={styles.dividerContainer}>
+        <View style={styles.dividerLine} />
+        <Text style={styles.dividerText}>OR</Text>
+        <View style={styles.dividerLine} />
+      </View>
+
+      <Button title={"Connect Wallet"} onPress={() => null} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "white",
+    paddingHorizontal: 20,
+    paddingTop: 25,
+    paddingBottom: 20,
+  },
+  heading: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#1A1A1A",
+    marginBottom: 20,
+    fontFamily: Fonts.Inter,
+  },
+  walletButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#F7F8F9",
+    borderRadius: 50,
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: "#DBE1E7",
+    justifyContent: "center",
+  },
+  walletIcon: {
+    width: 24,
+    height: 24,
+    marginRight: 12,
+  },
+  walletText: {
+    fontSize: 16,
+    fontWeight: "500",
+    color: "#1A1A1A",
+    fontFamily: Fonts.Inter,
+  },
+  dividerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginVertical: 20,
+  },
+  dividerLine: {
+    flex: 1,
+    height: 1,
+    backgroundColor: "#E0E0E0",
+  },
+  dividerText: {
+    paddingHorizontal: 12,
+    color: "#9E9E9E",
+    fontSize: 14,
+    fontFamily: Fonts.Inter,
+  },
+});
+
+export default WalletConnection;

mobile-app/app/components/form/Button.tsx

@@ -0,0 +1,72 @@
+import { Colors } from '@/constants/Colors';
+import { Fonts } from '@/constants/Fonts';
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+import { ButtonProps } from '@/app/types/all_types';
+
+const Button: React.FC<ButtonProps> = ({ 
+  title, 
+  onPress, 
+  primary = true, 
+  disabled = false, 
+  isFullWidth = true
+}) => {
+  return (
+    <TouchableOpacity
+      style={[
+        styles.button,
+        primary ? styles.primaryButton : styles.secondaryButton,
+        disabled && styles.disabledButton,
+        {width: isFullWidth ? '100%' : '50%'}
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <Text
+        style={[
+          styles.buttonText,
+          primary ? styles.primaryButtonText : styles.secondaryButtonText,
+          disabled && styles.disabledButtonText
+        ]}
+      >
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: 'auto',
+    height: 56,
+    borderRadius: 28,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  primaryButton: {
+    backgroundColor: Colors.light.primary,
+  },
+  secondaryButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 2,
+    borderColor: Colors.light.primary,
+  },
+  disabledButton: {
+    backgroundColor: 'rgba(165, 90, 243, 0.5)',
+  },
+  buttonText: {
+    fontSize: 16,
+    fontFamily: Fonts.Inter
+  },
+  primaryButtonText: {
+    color: 'white',
+  },
+  secondaryButtonText: {
+    color: Colors.light.primary,
+  },
+  disabledButtonText: {
+    color: 'rgba(255, 255, 255, 0.5)',
+  },
+});
+
+export default Button;

mobile-app/app/data/OnboardingSteps.tsx

@@ -0,0 +1,19 @@
+const onboardingSteps = [
+  {
+    title: "Have fun guessing lyrics",
+    description:
+      "Engage your music knowledge and guess the lyrics to your favorite songs. Test your memory and see how well you know the tunes!",
+  },
+  {
+    title: "Friendly Wagers",
+    description:
+      "Challenge your friends with fun wagers and see who can guess the lyrics fastest. Add some friendly competition to the experience!",
+  },
+  {
+    title: "Gamified Experience",
+    description:
+      "Earn points, level up, and unlock rewards as you guess lyrics correctly. Turn your love for music into a thrilling game with exciting challenges!",
+  },
+];
+
+export default onboardingSteps;