design card screens

app/(tabs)/card/_layout.tsx

@@ -0,0 +1,28 @@
+import { Stack } from 'expo-router';
+
+export default function CardLayout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="index" />
+      <Stack.Screen 
+        name="details" 
+        options={{ 
+          presentation: 'modal',
+          headerShown: true,
+          headerTitle: "Card",
+          headerTitleAlign: "center",
+          headerStyle: {
+            backgroundColor: "#262626",
+          },
+          headerTitleStyle: {
+            color: "#ffffff",
+            fontFamily: "System",
+            fontWeight: "bold",
+            fontSize: 20
+          },
+          headerTintColor: "#ffffff",
+        }} 
+      />
+    </Stack>
+  );
+} 

app/(tabs)/card/details.tsx

@@ -0,0 +1,47 @@
+import { Image } from "expo-image";
+import React from "react";
+import { View } from "react-native";
+
+import { Button } from "@/components/ui/button";
+import { IconSymbol } from "@/components/ui/IconSymbol";
+import { Text } from "@/components/ui/text";
+
+export default function CardDetails() {
+  // Mock card data - in a real app this would come from an API or secure storage
+  const cardData = {
+    balance: "$1,234.56",
+    spendableBalance: "$1,234.56",
+    status: "Active"
+  };
+
+  return (
+    <View className="flex-1 bg-background p-6">
+      {/* Balance Information */}
+      <View className="items-center mb-6">
+        <View className="flex-row items-baseline">
+          <Text className="text-xl font-semibold">$</Text>
+          <Text className="text-[50px] font-semibold">{cardData.balance.substring(1)}</Text>
+        </View>
+        <Text className="text-base opacity-70 mt-2">Spendable balance</Text>
+      </View>
+
+      <Button 
+        className="rounded-3xl h-14 w-auto self-center mb-6"
+      >
+        <View className="flex-row">
+          <IconSymbol name="plus" color="black" />
+          <Text className="font-bold text-base ml-2">Add funds</Text>
+        </View>
+      </Button>
+
+      <View className="items-center mb-8">
+        <Image
+          source={require("@/assets/images/card.svg")}
+          alt="Flash Card"
+          style={{ width: '100%', height: '80%' }}
+          contentFit="contain"
+        />
+      </View>
+    </View>
+  );
+}

app/(tabs)/card/index.tsx

@@ -0,0 +1,38 @@
+import { Image } from "expo-image";
+import { useRouter } from "expo-router";
+import { View } from "react-native";
+
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+
+export default function Card() {
+  const router = useRouter();
+
+  const handleViewDetails = () => {
+    router.push("/card/details");
+  };
+
+  return (
+    <View className="flex-1 justify-between items-center p-6 bg-background">
+      <View className="mt-4">
+        <Text className="text-[36px] font-bold text-center">Introducing the Flash card</Text>
+        <Text className="text-lg mt-2 font-medium text-center text-white/70 leading-[20px]">The world&apos;s first self-custodial{'\n'}Mastercard by Flash</Text>
+      </View>
+
+      <View className="flex-1 justify-center items-center w-full">
+        <Image
+          source={require("@/assets/images/card_with_bottom_shadow.png")}
+          alt="Flash Card"
+          style={{ width: '100%', height: '90%' }}
+          contentFit="contain"
+        />
+      </View>
+
+      <View className="w-full space-y-4">
+        <Button className="rounded-xl h-14 w-full" onPress={handleViewDetails}>
+          <Text className="text-[20px] font-bold">Activate card</Text>
+        </Button>
+      </View>
+    </View>
+  )
+} 

components/ui/IconSymbol.tsx

@@ -19,6 +19,7 @@ const MAPPING = {
   'chevron.left.forwardslash.chevron.right': 'code',
   'chevron.right': 'chevron-right',
   'rays': 'hourglass-bottom',
+  'plus': 'add',
 } as IconMapping;
 
 /**

tailwind.config.js

@@ -1,3 +1,5 @@
+import { platformSelect } from "nativewind/theme"
+
 const { hairlineWidth } = require('nativewind/theme');
 
 /** @type {import('tailwindcss').Config} */
@@ -7,6 +9,12 @@ module.exports = {
   presets: [require('nativewind/preset')],
   theme: {
     extend: {
+      fontFamily: {
+        system: platformSelect({
+          ios: 'MonaSans',
+          android: 'MonaSans_400Regular',
+        }),
+      },
       borderRadius: {
         'twice': '1.25rem',
       },