redesign checkpoint

apps/mobile/src/app/(tabs)/goals.tsx

@@ -152,7 +152,7 @@ export default function GoalsScreen() {
         <View style={styles.header}>
           <View>
             <Text style={[typography.h1, { color: colors.textPrimary }]}>
-              Fitness Goals
+              🎯 Fitness Goals
             </Text>
             <Text
               style={[
@@ -160,7 +160,11 @@ export default function GoalsScreen() {
                 { color: colors.textSecondary, marginTop: 4 },
               ]}
             >
-              Track your fitness journey progress
+              {activeGoals.length === 0
+                ? "Ready to crush some goals? 💪"
+                : activeGoals.length === 1
+                  ? "You're on a mission! Keep it up! 🚀"
+                  : `${activeGoals.length} goals in progress. Legend! ⭐`}
             </Text>
           </View>
           <TouchableOpacity
@@ -179,7 +183,7 @@ export default function GoalsScreen() {
         {goals && goals.length > 0 && (
           <View style={styles.section}>
             <View style={styles.statsRow}>
-              <MinimalCard variant="elevated" style={styles.statCard}>
+              <MinimalCard variant="bordered" style={styles.statCard}>
                 <Text style={[typography.stat, { color: colors.primary }]}>
                   {activeGoals.length}
                 </Text>
@@ -189,11 +193,11 @@ export default function GoalsScreen() {
                     { color: colors.textTertiary, marginTop: 4 },
                   ]}
                 >
-                  Active
+                  🎯 Active
                 </Text>
               </MinimalCard>
 
-              <MinimalCard variant="elevated" style={styles.statCard}>
+              <MinimalCard variant="bordered" style={styles.statCard}>
                 <Text style={[typography.stat, { color: colors.success }]}>
                   {completedGoals.length}
                 </Text>
@@ -203,11 +207,11 @@ export default function GoalsScreen() {
                     { color: colors.textTertiary, marginTop: 4 },
                   ]}
                 >
-                  Completed
+                  {completedGoals.length >= 5 ? "🏆" : "✅"} Completed
                 </Text>
               </MinimalCard>
 
-              <MinimalCard variant="elevated" style={styles.statCard}>
+              <MinimalCard variant="bordered" style={styles.statCard}>
                 <Text style={[typography.stat, { color: colors.textPrimary }]}>
                   {avgProgress}%
                 </Text>
@@ -217,7 +221,7 @@ export default function GoalsScreen() {
                     { color: colors.textTertiary, marginTop: 4 },
                   ]}
                 >
-                  Avg Progress
+                  {avgProgress >= 75 ? "🔥" : "📊"} Progress
                 </Text>
               </MinimalCard>
             </View>
@@ -245,7 +249,7 @@ export default function GoalsScreen() {
                       { color: colors.textPrimary, marginLeft: 8 },
                     ]}
                   >
-                    Progress Analytics
+                    📈 Progress Analytics
                   </Text>
                 </View>
                 <Ionicons
@@ -283,18 +287,14 @@ export default function GoalsScreen() {
         {/* Active Goals */}
         <View style={styles.section}>
           <SectionHeader
-            title={`Active Goals (${activeGoals.length})`}
+            title={`🚀 Active Goals (${activeGoals.length})`}
             actionLabel="Add New"
             onActionPress={() => setIsModalVisible(true)}
           />
           {activeGoals.length === 0 ? (
             <MinimalCard variant="default">
               <View style={styles.emptyState}>
-                <Ionicons
-                  name="flag-outline"
-                  size={48}
-                  color={colors.borderLight}
-                />
+                <Text style={{ fontSize: 64 }}>🎯</Text>
                 <Text
                   style={[
                     typography.bodyEmphasis,
@@ -309,7 +309,7 @@ export default function GoalsScreen() {
                     { color: colors.textTertiary, marginTop: 4 },
                   ]}
                 >
-                  Tap "Add New" to create your first goal
+                  Tap "Add New" to set your first goal! 💪
                 </Text>
               </View>
             </MinimalCard>
@@ -331,7 +331,7 @@ export default function GoalsScreen() {
         {completedGoals.length > 0 && (
           <View style={styles.section}>
             <SectionHeader
-              title={`Completed Goals (${completedGoals.length})`}
+              title={`✨ Completed Goals (${completedGoals.length})`}
             />
             <View style={styles.goalsList}>
               {completedGoals.map((goal) => (
@@ -405,6 +405,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: "center",
     paddingVertical: 20,
+    borderRadius: 20,
   },
   analyticsHeader: {
     flexDirection: "row",