redesign checkpoint

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

@@ -132,7 +132,7 @@ export default function RecommendationsScreen() {
         <View style={styles.header}>
           <View>
             <Text style={[typography.h1, { color: colors.textPrimary }]}>
-              AI Recommendations
+              ✨ AI Recommendations
             </Text>
             <Text
               style={[
@@ -140,7 +140,9 @@ export default function RecommendationsScreen() {
                 { color: colors.textSecondary, marginTop: 4 },
               ]}
             >
-              Personalized fitness & nutrition plans
+              {recommendations.length === 0
+                ? "Let's create your perfect plan! 🚀"
+                : `${recommendations.length} plan${recommendations.length !== 1 ? "s" : ""} ready for you! 💪`}
             </Text>
           </View>
           <TouchableOpacity
@@ -172,7 +174,7 @@ export default function RecommendationsScreen() {
         {/* Generate Button */}
         <View style={styles.section}>
           <MinimalButton
-            title="Generate New Plan"
+            title="🎯 Generate New Plan"
             onPress={handleGenerateRecommendation}
             variant="primary"
             size="lg"
@@ -185,7 +187,7 @@ export default function RecommendationsScreen() {
         {/* Recommendations List */}
         <View style={styles.section}>
           <SectionHeader
-            title="Your Plans"
+            title="💡 Your Plans"
             subtitle={
               recommendations.length > 0
                 ? `${recommendations.length} active plan${recommendations.length !== 1 ? "s" : ""}`
@@ -194,19 +196,9 @@ export default function RecommendationsScreen() {
           />
 
           {recommendations.length === 0 ? (
-            <MinimalCard variant="default">
+            <MinimalCard variant="default" style={{ borderRadius: 20 }}>
               <View style={styles.emptyState}>
-                <IconContainer
-                  variant="colored"
-                  backgroundColor={`${colors.accent}15`}
-                  size="lg"
-                >
-                  <Ionicons
-                    name="sparkles-outline"
-                    size={32}
-                    color={colors.accent}
-                  />
-                </IconContainer>
+                <Text style={{ fontSize: 64 }}>🤖</Text>
                 <Text
                   style={[
                     typography.bodyEmphasis,
@@ -226,7 +218,7 @@ export default function RecommendationsScreen() {
                   ]}
                 >
                   Tap "Generate New Plan" to get personalized AI-powered fitness
-                  and nutrition recommendations based on your profile and goals.
+                  and nutrition recommendations! 🎯
                 </Text>
               </View>
             </MinimalCard>
@@ -258,7 +250,7 @@ function RecommendationCard({ recommendation }: RecommendationCardProps) {
   const [expanded, setExpanded] = useState(false);
 
   return (
-    <MinimalCard variant="elevated">
+    <MinimalCard variant="bordered" style={{ borderRadius: 20 }}>
       {/* Header */}
       <TouchableOpacity
         onPress={() => setExpanded(!expanded)}
@@ -278,7 +270,7 @@ function RecommendationCard({ recommendation }: RecommendationCardProps) {
           </IconContainer>
           <View style={{ marginLeft: 12 }}>
             <Text style={[typography.h3, { color: colors.textPrimary }]}>
-              AI Fitness Plan
+              ✨ AI Fitness Plan
             </Text>
             <Text style={[typography.caption, { color: colors.textTertiary }]}>
               {new Date(recommendation.generatedAt).toLocaleDateString()}
@@ -320,7 +312,7 @@ function RecommendationCard({ recommendation }: RecommendationCardProps) {
                   { color: colors.textPrimary, marginLeft: 8 },
                 ]}
               >
-                Activity Plan
+                💪 Activity Plan
               </Text>
             </View>
             <Text
@@ -348,7 +340,7 @@ function RecommendationCard({ recommendation }: RecommendationCardProps) {
                   { color: colors.textPrimary, marginLeft: 8 },
                 ]}
               >
-                Diet Plan
+                🍽️ Diet Plan
               </Text>
             </View>
             <Text
@@ -439,7 +431,7 @@ const styles = StyleSheet.create({
   },
   planSection: {
     padding: 16,
-    borderRadius: 12,
+    borderRadius: 16,
   },
   planHeader: {
     flexDirection: "row",