(design): redesigned getting started screen with high-end UI

apps/mobile/app/(onboarding)/getting-started.tsx

@@ -1,26 +1,51 @@
-import { View, Text, Pressable } from 'react-native';
+import { View, Text, Pressable, Image } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { router } from 'expo-router';
+import { Ionicons } from '@expo/vector-icons';
 
 export default function GettingStartedScreen() {
   return (
-    <SafeAreaView className="flex-1 bg-blue-50" edges={['top', 'left', 'right']}>
-      <View className="flex-1 justify-between p-6">
+    <SafeAreaView className="flex-1 bg-white" edges={['top', 'left', 'right', 'bottom']}>
+      <View className="flex-1 px-8 pb-10 pt-16">
+        {/* Hero Section */}
         <View className="flex-1 items-center justify-center">
-          <Text className="mb-3 text-center text-3xl font-bold text-blue-600">Welcome to Blob</Text>
-          <Text className="mb-6 text-center text-xl text-gray-700">
-            Your AI-Powered Study Companion
+          <View className="mb-8 items-center justify-center">
+            {/* Styled Logo Background */}
+            <View className="absolute h-44 w-44 rounded-full bg-orange-50 opacity-50" />
+            <View className="h-36 w-36 items-center justify-center rounded-3xl bg-white shadow-2xl shadow-orange-200">
+              <Image 
+                source={require('../../assets/icon.png')} 
+                className="h-28 w-28"
+                resizeMode="contain"
+              />
+            </View>
+          </View>
+
+          <Text className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900">
+            Learn Smarter with <Text className="text-orange-500">Blob</Text>
           </Text>
-          <Text className="px-5 text-center text-base leading-6 text-gray-600">
-            Transform your study materials into interactive flashcards, mind maps, and quizzes
+
+          <Text className="text-center text-lg leading-7 text-gray-500">
+            Your AI-powered study companion. Transform notes into interactive flashcards and quizzes instantly.
           </Text>
         </View>
 
-        <Pressable
-          className="mb-5 items-center rounded-xl bg-blue-600 px-8 py-4"
-          onPress={() => router.push('/(onboarding)/login')}>
-          <Text className="text-lg font-semibold text-white">Get Started</Text>
-        </Pressable>
+        {/* Action Section */}
+        <View className="mt-12">
+          <Pressable
+            className="h-16 items-center justify-center rounded-2xl bg-orange-500 shadow-lg shadow-orange-200 active:bg-orange-600"
+            onPress={() => router.push('/(onboarding)/login')}>
+            <View className="flex-row items-center">
+              <Text className="mr-2 text-xl font-bold text-white">Continue</Text>
+              <Ionicons name="arrow-forward" size={20} color="white" />
+            </View>
+          </Pressable>
+        </View>
+
+        {/* Footer info */}
+        <Text className="mt-auto text-center text-xs text-gray-400">
+          By continuing, you agree to our Terms and Privacy Policy
+        </Text>
       </View>
     </SafeAreaView>
   );