84 lines
3.3 KiB
TypeScript
84 lines
3.3 KiB
TypeScript
import { View, Text, TouchableOpacity } from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
import { router } from "expo-router";
|
|
import { MaterialIcons } from "@expo/vector-icons";
|
|
import { COLORS } from "@/lib/constants";
|
|
|
|
export default function WelcomeScreen() {
|
|
return (
|
|
<SafeAreaView className="flex-1 bg-neutral-950">
|
|
<View className="flex-1 px-8 justify-between py-12">
|
|
{/* Logo + title */}
|
|
<View className="items-center mt-8">
|
|
<View className="flex-row items-center justify-center mb-8">
|
|
<View
|
|
className="w-16 h-16 rounded-2xl items-center justify-center"
|
|
style={{ backgroundColor: COLORS.codex }}
|
|
>
|
|
<MaterialIcons name="auto-awesome" size={28} color="white" />
|
|
</View>
|
|
<View
|
|
className="w-16 h-16 rounded-2xl items-center justify-center -ml-5"
|
|
style={{ backgroundColor: COLORS.claude }}
|
|
>
|
|
<MaterialIcons name="psychology" size={28} color="white" />
|
|
</View>
|
|
</View>
|
|
<Text className="text-5xl font-bold text-white mb-4 tracking-tight">
|
|
Codexbar
|
|
</Text>
|
|
<Text className="text-neutral-400 text-base text-center leading-relaxed">
|
|
Monitor your Codex CLI and Claude.ai{"\n"}usage limits at a glance.
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Feature pills */}
|
|
<View className="gap-y-3">
|
|
<View className="flex-row items-center gap-x-3 bg-neutral-900 rounded-2xl p-4 border border-neutral-800">
|
|
<View
|
|
className="w-10 h-10 rounded-xl items-center justify-center"
|
|
style={{ backgroundColor: `${COLORS.codex}22` }}
|
|
>
|
|
<MaterialIcons name="auto-awesome" size={20} color={COLORS.codex} />
|
|
</View>
|
|
<View className="flex-1">
|
|
<Text className="text-white font-semibold mb-0.5">Codex CLI</Text>
|
|
<Text className="text-neutral-500 text-sm">
|
|
Rate limits · Credits · Windows
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<View className="flex-row items-center gap-x-3 bg-neutral-900 rounded-2xl p-4 border border-neutral-800">
|
|
<View
|
|
className="w-10 h-10 rounded-xl items-center justify-center"
|
|
style={{ backgroundColor: `${COLORS.claude}22` }}
|
|
>
|
|
<MaterialIcons name="psychology" size={20} color={COLORS.claude} />
|
|
</View>
|
|
<View className="flex-1">
|
|
<Text className="text-white font-semibold mb-0.5">Claude.ai</Text>
|
|
<Text className="text-neutral-500 text-sm">
|
|
5-hour · 7-day · Model usage
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* CTA */}
|
|
<View>
|
|
<TouchableOpacity
|
|
onPress={() => router.push("/onboarding/codex")}
|
|
className="rounded-2xl py-4 items-center"
|
|
style={{ backgroundColor: COLORS.codex }}
|
|
>
|
|
<Text className="text-white font-bold text-base">Get Started</Text>
|
|
</TouchableOpacity>
|
|
<Text className="text-neutral-600 text-xs text-center mt-4">
|
|
You can configure services at any time in Settings
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|