Here's the initial setup for the Profility app: { "name": "profility", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "@expo/vector-icons": "^13.0.0", "@gorhom/bottom-sheet": "^4.4.5", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.12", "expo": "~49.0.0", "expo-font": "~11.4.0", "expo-linear-gradient": "~12.3.0", "expo-router": "~2.0.0", "expo-splash-screen": "~0.20.5", "expo-status-bar": "~1.6.0", "lucide-react-native": "^0.264.0", "react": "18.2.0", "react-native": "0.72.0", "react-native-gesture-handler": "~2.12.0", "react-native-reanimated": "~3.3.0", "react-native-safe-area-context": "4.6.3", "react-native-svg": "13.9.0", "zustand": "^4.4.1" }, "devDependencies": { "@babel/core": "^7.20.0", "@types/react": "~18.2.6", "@types/react-native": "~0.72.0", "typescript": "~5.0.0" }, "private": true } { "expo": { "name": "Profility", "slug": "profility", "scheme": "profility", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "automatic", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#0A0A0A" }, "assetBundlePatterns": ["**/*"], "ios": { "supportsTablet": true, "bundleIdentifier": "com.profility.app" }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#0A0A0A" }, "package": "com.profility.app" }, "web": { "favicon": "./assets/favicon.png", "bundler": "metro" }, "plugins": ["expo-router"], "extra": { "router": { "origin": false }, "eas": { "projectId": "your-project-id" } } } } import { Slot } from 'expo-router'; import { StatusBar } from 'expo-status-bar'; import { StyleSheet, View } from 'react-native'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; export default function RootLayout() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#0A0A0A', }, }); import { Tabs } from 'expo-router'; import { Ionicons } from '@expo/vector-icons'; import { colors } from '../../constants/colors'; export default function TabLayout() { return ( ( ), }} /> ( ), }} /> ( ), }} /> ( ), }} /> ); } export const colors = { dark: '#0A0A0A', darkGray: '#1A1A1A', gray: '#3A3A3A', lightGray: '#7A7A7A', primary: '#2563EB', primaryLight: '#3B82F6', white: '#FFFFFF', black: '#000000', success: '#10B981', warning: '#F59E0B', error: '#EF4444', }; import { StyleSheet } from 'react-native'; export const typography = StyleSheet.create({ h1: { fontSize: 32, fontWeight: '700', lineHeight: 40, fontFamily: 'Inter-Bold', }, h2: { fontSize: 24, fontWeight: '700', lineHeight: 32, fontFamily: 'Inter-Bold', }, h3: { fontSize: 20, fontWeight: '700', lineHeight: 28, fontFamily: 'Inter-Bold', }, body: { fontSize: 16, fontWeight: '400', lineHeight: 24, fontFamily: 'Inter-Regular', }, caption: { fontSize: 14, fontWeight: '400', lineHeight: 20, fontFamily: 'Inter-Regular', }, button: { fontSize: 16, fontWeight: '700', lineHeight: 24, fontFamily: 'Inter-Bold', }, }); import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'; import { colors } from '../../constants/colors'; import { typography } from '../../constants/typography'; import { LinearGradient } from 'expo-linear-gradient'; export default function HomeScreen() { return ( Profility AI-powered LinkedIn profile optimization 🔒 Secure analysis ⚡ Instant results 🔐 Private data Connect with LinkedIn ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: colors.dark, padding: 20, }, hero: { alignItems: 'center', marginBottom: 40, }, title: { color: colors.white, marginBottom: 8, }, subtitle: { color: colors.lightGray, marginBottom: 24, }, heroImage: { width: '100%', height: 200, borderRadius: 16, }, features: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 40, }, feature: { alignItems: 'center', width: '30%', }, featureIcon: { width: 48, height: 48, borderRadius: 24, backgroundColor: colors.darkGray, justifyContent: 'center', alignItems: 'center', marginBottom: 8, }, featureText: { color: colors.white, textAlign: 'center', }, button: { borderRadius: 12, overflow: 'hidden', }, gradient: { paddingVertical: 16, alignItems: 'center', }, buttonText: { color: colors.white, }, });