feat: Implement foundational UI and navigation for mobile and web applications, including initial screens and layout components.

Author: Arun-kushwaha007

apps/mobile/app/assets/images/logo.png

@@ -8,7 +8,7 @@ import { spacing } from '../theme/spacing';
 interface ActivityItemProps {
   title: string;
   subtitle: string;
-  amount: string;
+  amount?: string;
   date: string;
   icon?: keyof typeof MaterialCommunityIcons.glyphMap;
 }

apps/mobile/app/components/ActivityItem.tsx

@@ -12,7 +12,12 @@ import { SectionHeader } from '../components/SectionHeader';
 import { Avatar } from '../components/ui/Avatar';
 import { groupService } from '../services/group.service';
 import type { ActivityDto } from '@fairshare/shared-types';
+import { ActivityItem } from '../components/ActivityItem';
 import { useToastStore } from '../store/toastStore';
+import { Image } from 'react-native';
+
+const LOGO_SOURCE = require('../assets/images/logo.png');
+
 
 export function HomeScreen({ navigation }: { navigation: any }) {
   const user = useAuthStore((state) => state.user);
@@ -45,8 +50,8 @@ export function HomeScreen({ navigation }: { navigation: any }) {
 
   const quickActions = [
     { label: 'Split it', icon: 'plus-circle-outline' as const, color: colors.primary, onPress: () => navigation.navigate('AddExpense', { groupId: groups[0]?.id ?? '' }) },
-    { label: 'Squads', icon: 'account-group-outline' as const, color: colors.accent, onPress: () => navigation.navigate('Groups') },
-    { label: 'Clear Air', icon: 'handshake-outline' as const, color: colors.success, onPress: () => navigation.navigate('SettleUp', { groupId: groups[0]?.id ?? '' }) },
+    { label: 'Groups', icon: 'account-group-outline' as const, color: colors.accent, onPress: () => navigation.navigate('Groups') },
+    { label: 'Settle Up', icon: 'handshake-outline' as const, color: colors.success, onPress: () => navigation.navigate('SettleUp', { groupId: groups[0]?.id ?? '' }) },
   ];
 
   const totalBalance = Number(summary?.totalBalanceCents ?? 0) / 100;
@@ -62,9 +67,16 @@ export function HomeScreen({ navigation }: { navigation: any }) {
     >
       {/* Header */}
       <View style={styles.header}>
-        <View>
-          <Text style={[typography.bodyMedium, { color: colors.text_secondary }]}>Yo, welcome back ✌️</Text>
-          <Text style={[typography.h2, { color: colors.text_primary, marginTop: 2 }]}>{user?.name ?? 'Bestie'}</Text>
+        <View style={styles.brandContainer}>
+          <Image 
+            source={LOGO_SOURCE} 
+            style={styles.logo} 
+            resizeMode="contain" 
+          />
+          <View>
+            <Text style={[typography.bodyMedium, { color: colors.text_secondary }]}>Yo, welcome back ✌️</Text>
+            <Text style={[typography.h2, { color: colors.text_primary, marginTop: 2 }]}>{user?.name ?? 'Bestie'}</Text>
+          </View>
         </View>
         <TouchableOpacity onPress={() => navigation.navigate('Profile')}>
           <Avatar name={user?.name ?? 'U'} size={48} />
@@ -107,7 +119,7 @@ export function HomeScreen({ navigation }: { navigation: any }) {
 
       {/* Recent Activity */}
       <SectionHeader 
-        title="The Tea ☕" 
+        title="Recent Activity ☕" 
         action="See all" 
         onActionPress={() => navigation.navigate('Activity')} 
       />
@@ -149,6 +161,16 @@ const styles = StyleSheet.create({
     marginBottom: spacing.xxl,
     marginTop: spacing.sm,
   },
+  brandContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+  },
+  logo: {
+    width: 54,
+    height: 54,
+    borderRadius: 14,
+  },
   summarySection: {
     marginBottom: spacing.xxl,
   },

apps/mobile/app/screens/HomeScreen.tsx

@@ -66,7 +66,7 @@ export function ProfileScreen({ navigation }: { navigation: { navigate: (route:
 
       {/* Menu Sections */}
       <View style={styles.menuSection}>
-        <SectionHeader title="Account Vibes" />
+        <SectionHeader title="Account Management" />
         {menuItems.map((item, i) => (
           <Animated.View 
             key={item.label}
@@ -107,7 +107,7 @@ export function ProfileScreen({ navigation }: { navigation: { navigate: (route:
 
       <View style={styles.footer}>
         <Text style={[typography.caption, { color: colors.muted }]}>
-          FairShare Gen-Z Edition v1.2.0
+          FairShare Edition v1.0.0
         </Text>
       </View>
     </ScrollView>

apps/mobile/app/screens/ProfileScreen.tsx

@@ -71,7 +71,7 @@ export function SettingsScreen() {
         <SectionHeader title="About FairShare" />
         <Card style={styles.infoCard}>
            <Text style={[typography.bodyMedium, { color: colors.text_secondary }]}>
-             FairShare is built for royal expense management. Split bills with elegance and precision.
+             FairShare is built for expense management. Split bills with elegance and precision.
            </Text>
         </Card>
       </View>

apps/mobile/app/screens/SettingsScreen.tsx

@@ -31,6 +31,9 @@ export const metadata: Metadata = {
     description: 'Smart group expense sharing app.',
     type: 'website',
   },
+  icons: {
+    icon: '/favicon.ico',
+  },
 };
 
 const manrope = Manrope({ subsets: ['latin'], variable: '--font-sans', display: 'swap' });

apps/web/app/layout.tsx

@@ -27,12 +27,16 @@ export function Sidebar() {
       <div className={`${glassPanel} p-6 md:p-7 min-h-[520px] flex flex-col`}>
         {/* Brand */}
         <div className="flex items-center gap-3 mb-12 px-2">
-          <div className="w-10 h-10 bg-[var(--fs-primary)] rounded-xl flex items-center justify-center shadow-lg border border-white/20">
-            <span className="text-white font-black text-xl">F</span>
+          <div className="w-12 h-12 relative overflow-hidden rounded-xl shadow-lg border border-white/20">
+            <img 
+              src="/logo.png" 
+              alt="FairShare Logo" 
+              className="w-full h-full object-cover"
+            />
           </div>
           <div>
             <h2 className="text-xl font-extrabold tracking-tight text-[var(--fs-text-primary)]">FairShare</h2>
-            <p className="text-[10px] font-bold text-[var(--fs-text-muted)] uppercase tracking-wider">Royal Edition</p>
+            <p className="text-[10px] font-bold text-[var(--fs-text-muted)] uppercase tracking-wider">Premium Edition</p>
           </div>
         </div>