first commit

src/app/(auth)/onboarding.tsx

@@ -0,0 +1,206 @@
+import { LinearGradient } from 'expo-linear-gradient';
+import { useRouter } from 'expo-router';
+import { StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { BrandPressable } from '@/components/brand-pressable';
+import { Brand, BrandFont } from '@/constants/theme';
+
+/**
+ * Frame `52-54` in the Figma ("UI variation - 2"). The opening splash that
+ * introduces Gumble and offers Sign Up / Log In. The hero artwork in the
+ * Figma is a custom illustration that we approximate with a magenta-to-pink
+ * gradient and a stylised game-pad silhouette drawn from primitives.
+ */
+export default function OnboardingScreen() {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View style={[styles.root, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+      <View style={styles.header}>
+        <View style={styles.logoMark}>
+          <Text style={styles.logoMarkText}>G</Text>
+        </View>
+        <Text style={styles.brandWordmark}>Gumble</Text>
+      </View>
+
+      <View style={styles.hero}>
+        <View style={styles.heroFrame}>
+          <LinearGradient
+            colors={['rgba(233,46,186,0.18)', 'rgba(255,255,255,0.02)']}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={StyleSheet.absoluteFill}
+          />
+          <GamePadIllustration />
+        </View>
+      </View>
+
+      <View style={styles.copy}>
+        <Text style={styles.title}>Gamble your games, gamble your skills</Text>
+        <Text style={styles.subtitle}>
+          Play mini-games, complete tasks, and earn rewards — all powered by your favorite games.
+        </Text>
+      </View>
+
+      <View style={styles.actions}>
+        <BrandPressable label="Sign Up" onPress={() => router.push('/(auth)/login')} />
+        <BrandPressable
+          label="Log In"
+          variant="outline"
+          onPress={() => router.push('/(auth)/login')}
+        />
+      </View>
+    </View>
+  );
+}
+
+function GamePadIllustration() {
+  return (
+    <View style={illustStyles.root}>
+      <View style={illustStyles.pad}>
+        <View style={illustStyles.dpad}>
+          <View style={[illustStyles.dpadArm, illustStyles.dpadHorizontal]} />
+          <View style={[illustStyles.dpadArm, illustStyles.dpadVertical]} />
+        </View>
+        <View style={illustStyles.buttons}>
+          <View style={[illustStyles.button, { backgroundColor: '#e92eba' }]} />
+          <View style={[illustStyles.button, { backgroundColor: '#f3c' }]} />
+        </View>
+        <View style={illustStyles.stick} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: Brand.bg,
+    paddingHorizontal: 24,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingTop: 12,
+  },
+  logoMark: {
+    width: 28,
+    height: 28,
+    borderRadius: 8,
+    backgroundColor: Brand.accent,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logoMarkText: {
+    color: Brand.text,
+    fontSize: 16,
+    lineHeight: 20,
+    fontFamily: BrandFont.montserratBold,
+  },
+  brandWordmark: {
+    color: Brand.accent,
+    fontSize: 18,
+    lineHeight: 22,
+    fontFamily: BrandFont.montserratBold,
+  },
+  hero: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 16,
+  },
+  heroFrame: {
+    width: '100%',
+    aspectRatio: 1,
+    maxHeight: 320,
+    borderRadius: 16,
+    overflow: 'hidden',
+    backgroundColor: Brand.surfaceAlt,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  copy: {
+    gap: 12,
+    paddingBottom: 24,
+  },
+  title: {
+    color: Brand.text,
+    fontSize: 26,
+    lineHeight: 32,
+    fontFamily: BrandFont.montserratBold,
+    textAlign: 'center',
+  },
+  subtitle: {
+    color: Brand.textMuted,
+    fontSize: 14,
+    lineHeight: 20,
+    fontFamily: BrandFont.poppinsRegular,
+    textAlign: 'center',
+    paddingHorizontal: 8,
+  },
+  actions: {
+    gap: 12,
+    paddingBottom: 8,
+  },
+});
+
+const illustStyles = StyleSheet.create({
+  root: {
+    width: '70%',
+    aspectRatio: 1.2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pad: {
+    width: '100%',
+    height: '60%',
+    backgroundColor: 'rgba(255,255,255,0.05)',
+    borderRadius: 24,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.08)',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    paddingHorizontal: 24,
+  },
+  dpad: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dpadArm: {
+    position: 'absolute',
+    backgroundColor: 'rgba(255,255,255,0.5)',
+    borderRadius: 3,
+  },
+  dpadHorizontal: {
+    width: 44,
+    height: 10,
+  },
+  dpadVertical: {
+    width: 10,
+    height: 44,
+  },
+  buttons: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  button: {
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+  },
+  stick: {
+    position: 'absolute',
+    bottom: 14,
+    alignSelf: 'center',
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    backgroundColor: 'rgba(255,255,255,0.3)',
+  },
+});