react-native-elearn-ui 0.1.11 → 0.1.13

package/lib/module/screens/HomeScreen.js

@@ -1,10 +1,10 @@
 "use strict";
 
 import React, { useState } from 'react';
-import { View, ScrollView, StyleSheet, TouchableOpacity, StatusBar, Image, Dimensions } from 'react-native';
+import { View, ScrollView, StyleSheet, TouchableOpacity, StatusBar, Image, useWindowDimensions } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useTheme } from "../context/ThemeContext.js";
-import { Typography, Card, ProgressBar, Icon } from "../components/index.js";
+import { Typography, Icon } from "../components/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const HomeScreen = ({
   params,
@@ -21,29 +21,19 @@ export const HomeScreen = ({
   onPressMcqViewDetails
 }) => {
   const theme = useTheme();
-  const [selectedTeaserOption, setSelectedTeaserOption] = useState(null);
-  const [activeBannerIndex, setActiveBannerIndex] = useState(0);
-  const handleBannerScroll = event => {
-    const scrollOffset = event.nativeEvent.contentOffset.x;
-    const slideWidth = event.nativeEvent.layoutMeasurement.width;
-    if (slideWidth > 0) {
-      const index = Math.round(scrollOffset / slideWidth);
-      setActiveBannerIndex(index);
-    }
-  };
-  const bannerWidth = Dimensions.get('window').width - 32;
+  const {
+    width
+  } = useWindowDimensions();
+  const isTablet = width > 768;
+  const contentMaxWidth = isTablet ? 768 : '100%';
+  const alignSelfCenter = isTablet ? 'center' : 'auto';
+  const [selectedTeaserOption, setSelectedTeaserOption] = useState(0);
   const headerData = params?.header || {
     appName: 'Residency',
     subName: 'Pathology',
     notificationCount: 2,
     avatarUrl: 'https://images.unsplash.com/photo-1559839734-2b71ea197ec2?q=80&w=200&auto=format&fit=crop'
   };
-  const bannersData = params?.banner || [{
-    title: 'Test Your Knowledge – Daily',
-    subtitle: 'Smart Learning for Future Doctors',
-    imageUrl: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=400&auto=format&fit=crop',
-    gradientColors: ['#15803D', '#166534']
-  }];
   const headersConfig = params?.sectionHeaders || {};
   const getHeaderConfig = (key, defaultTitle) => {
     const section = headersConfig[key];
@@ -53,14 +43,14 @@ export const HomeScreen = ({
     };
   };
   const quickLinksHeader = getHeaderConfig('quickLinks', 'QUICK LINKS');
-  const dailyMcqHeader = getHeaderConfig('dailyMcq', 'BRAIN TEASERS OF THE DAY');
+  const dailyMcqHeader = getHeaderConfig('dailyMcq', 'MCQ OF THE DAY');
   const getStartedHeader = getHeaderConfig('getStarted', 'GET STARTED');
   const continueLearningHeader = getHeaderConfig('continueLearning', 'CONTINUE LEARNING');
   const progressData = params?.progress || {
-    percentage: 25,
-    text: 'Modules Completed of 829',
-    totalModules: 829,
-    buttonText: 'Track Qbank'
+    percentage: 56,
+    text: 'Modules Completed pf 800',
+    totalModules: 800,
+    buttonText: 'Track Progress'
   };
   const actionsData = params?.actions || {
     pearlsLabel: 'Pearls',
@@ -68,30 +58,29 @@ export const HomeScreen = ({
   };
   const quickLinksData = params?.quickLinks || [{
     id: 'bookmarks',
-    label: 'Bookmarks',
+    label: 'Book\nmarks',
     icon: 'bookmark',
-    color: '#3B82F6'
+    color: '#10B981'
   }, {
     id: 'custom_module',
-    label: 'Custom Module',
+    label: 'Custom\nModule',
     icon: 'file-text',
-    color: '#10B981'
+    color: '#3B82F6'
   }, {
     id: 'videos_saved',
-    label: 'Videos Saved',
+    label: 'Videos\nSaved',
     icon: 'download',
-    color: '#EF4444'
+    color: '#8B5CF6'
   }, {
     id: 'qbank',
-    label: 'QBank',
-    icon: 'book-open',
-    color: '#8B5CF6'
+    label: 'QBank\nTracker',
+    icon: 'calendar',
+    color: '#F43F5E'
   }];
   const dailyMcqData = params?.dailyMcq || {
     id: 'teaser_1',
-    imageUrl: 'https://images.unsplash.com/photo-1576086213369-97a306d36557?q=80&w=500&auto=format&fit=crop',
-    question: 'Discuss the causes, radiological features, and management of a solitary pulmonary nodule.',
-    options: ['A. Used for Hepatitis B', 'B. Used for chickenpox prophylaxis', 'C. Obtained from random donors', 'D. They are hyperimmune human immunoglobulins'],
+    question: 'Discuss the causes, radiological features, and visiond of a solitary pulmonary nodule.',
+    options: ['A. Used tor Heoatitls B', 'B. Used tor Heoatitls B', 'C. Used tor Heoatitls B', 'D. Used tor Heoatitls B'],
     correctIndex: 0
   };
   const getStartedData = params?.getStarted || {
@@ -100,488 +89,517 @@ export const HomeScreen = ({
     avatarUrl: 'https://images.unsplash.com/photo-1622253692010-333f2da6031d?q=80&w=200&auto=format&fit=crop'
   };
   const continueLearningData = params?.continueLearning || [{
-    id: 'subj_anatomy',
-    title: 'Anatomy',
-    progressPercentage: 20,
-    completedModules: 2,
-    totalModules: 63,
-    icon: 'atom'
-  }, {
     id: 'subj_biochem',
     title: 'Biochemistry',
-    progressPercentage: 60,
-    completedModules: 45,
-    totalModules: 53,
+    progressPercentage: 34,
+    completedModules: 17,
+    totalModules: 63,
     icon: 'dna'
+  }, {
+    id: 'subj_pharmacology',
+    title: 'Pharmacology',
+    progressPercentage: 86,
+    completedModules: 56,
+    totalModules: 63,
+    icon: 'flask'
   }, {
     id: 'subj_physio',
     title: 'Physiology',
-    progressPercentage: 88,
-    completedModules: 59,
+    progressPercentage: 52,
+    completedModules: 31,
     totalModules: 63,
-    icon: 'flask'
+    icon: 'activity'
   }];
   const referralData = params?.referralBanner || {
-    text: 'Invite a friend to RXDX, learn together, grow together.',
+    text: 'Invite a friend to PROMPT PREP, learn together, grow together.',
     buttonText: 'Share App'
   };
   return /*#__PURE__*/_jsxs(SafeAreaView, {
     style: [styles.safeArea, {
-      backgroundColor: theme.background
+      backgroundColor: '#F8FAFC'
     }],
     children: [/*#__PURE__*/_jsx(StatusBar, {
       barStyle: "dark-content"
-    }), !hideHeader && /*#__PURE__*/_jsxs(View, {
-      style: [styles.header, {
-        borderBottomColor: theme.border
-      }],
-      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: styles.headerDropdown,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [styles.appLogo, {
-            backgroundColor: theme.primary
-          }],
-          children: /*#__PURE__*/_jsx(Typography, {
-            variant: "label",
-            bold: true,
-            color: "#FFFFFF",
-            children: "R"
-          })
-        }), /*#__PURE__*/_jsxs(View, {
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.appNameRow,
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "h2",
-              bold: true,
-              color: theme.textPrimary,
-              children: headerData.appName
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.chevronWrap,
-              children: /*#__PURE__*/_jsx(Icon, {
-                name: "chevron-left",
-                size: 12,
-                color: theme.textSecondary
-              })
-            })]
-          }), /*#__PURE__*/_jsx(Typography, {
-            variant: "caption",
-            color: theme.textSecondary,
-            style: styles.appSubName,
-            children: headerData.subName
-          })]
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.headerRight,
+    }), !hideHeader && /*#__PURE__*/_jsx(View, {
+      style: styles.header,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.headerInner, {
+          maxWidth: contentMaxWidth,
+          alignSelf: alignSelfCenter
+        }],
         children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-          onPress: onPressNotification,
-          style: [styles.iconBtn, {
-            borderColor: theme.border
-          }],
-          children: [/*#__PURE__*/_jsx(Icon, {
-            name: "bell",
-            size: 20,
-            color: theme.textPrimary
-          }), headerData.notificationCount && headerData.notificationCount > 0 ? /*#__PURE__*/_jsx(View, {
-            style: [styles.badge, {
-              backgroundColor: theme.danger
-            }],
-            children: /*#__PURE__*/_jsx(Typography, {
-              variant: "caption",
-              style: styles.badgeText,
-              color: "#FFFFFF",
-              children: headerData.notificationCount
+          style: styles.headerDropdown,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.appLogo,
+            children: /*#__PURE__*/_jsx(Icon, {
+              name: "check-square",
+              size: 20,
+              color: "#FFFFFF"
             })
-          }) : null]
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: onPressAvatar,
-          style: styles.profileContainer,
-          children: /*#__PURE__*/_jsx(Image, {
-            source: {
-              uri: headerData.avatarUrl
-            },
-            style: styles.profileAvatar
-          })
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs(ScrollView, {
-      contentContainerStyle: styles.scrollContent,
-      showsVerticalScrollIndicator: false,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.bannerCarouselContainer,
-        children: [/*#__PURE__*/_jsx(ScrollView, {
-          horizontal: true,
-          pagingEnabled: true,
-          showsHorizontalScrollIndicator: false,
-          onScroll: handleBannerScroll,
-          scrollEventThrottle: 16,
-          contentContainerStyle: styles.bannerScrollViewContent,
-          children: bannersData.map((banner, index) => {
-            const colors = banner.gradientColors || ['#15803D', '#166534'];
-            const bannerBg = colors[0] || '#15803D';
-            return /*#__PURE__*/_jsx(TouchableOpacity, {
-              activeOpacity: 0.9,
-              style: {
-                width: bannerWidth
-              },
-              children: /*#__PURE__*/_jsxs(View, {
-                style: [styles.promoBanner, {
-                  backgroundColor: bannerBg,
-                  width: '100%'
-                }],
-                children: [/*#__PURE__*/_jsxs(View, {
-                  style: styles.promoTextColumn,
-                  children: [/*#__PURE__*/_jsx(Typography, {
-                    variant: "h2",
-                    bold: true,
-                    color: "#FFFFFF",
-                    style: styles.promoTitle,
-                    children: banner.title
-                  }), /*#__PURE__*/_jsx(Typography, {
-                    variant: "caption",
-                    color: "#D1FAE5",
-                    style: styles.promoSubtitle,
-                    children: banner.subtitle
-                  })]
-                }), banner.imageUrl && /*#__PURE__*/_jsx(Image, {
-                  source: {
-                    uri: banner.imageUrl
-                  },
-                  style: styles.promoBannerImage,
-                  resizeMode: "cover"
-                })]
-              })
-            }, index);
-          })
-        }), bannersData.length > 1 && /*#__PURE__*/_jsx(View, {
-          style: styles.dotsContainer,
-          children: bannersData.map((_, index) => /*#__PURE__*/_jsx(View, {
-            style: [styles.dot, {
-              backgroundColor: activeBannerIndex === index ? theme.primary : theme.border,
-              width: activeBannerIndex === index ? 16 : 6
-            }]
-          }, index))
-        })]
-      }), /*#__PURE__*/_jsxs(Card, {
-        bordered: true,
-        style: styles.qbankProgressCard,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.qbankProgressRow,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.qbankProgressTextContainer,
-            children: [/*#__PURE__*/_jsxs(Typography, {
-              variant: "h1",
-              bold: true,
-              color: theme.textPrimary,
-              style: styles.percentageText,
-              children: [progressData.percentage, "%"]
+          }), /*#__PURE__*/_jsxs(View, {
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.appNameRow,
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "h2",
+                bold: true,
+                color: theme.textPrimary,
+                children: headerData.appName
+              }), /*#__PURE__*/_jsx(View, {
+                style: styles.chevronWrap,
+                children: /*#__PURE__*/_jsx(Icon, {
+                  name: "chevron-left",
+                  size: 12,
+                  color: theme.textSecondary
+                })
+              })]
             }), /*#__PURE__*/_jsx(Typography, {
               variant: "caption",
               color: theme.textSecondary,
-              children: progressData.text
+              style: styles.appSubName,
+              children: headerData.subName
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.headerRight,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.headerIconBtn,
+            children: /*#__PURE__*/_jsx(Icon, {
+              name: "search",
+              size: 22,
+              color: theme.textPrimary
+            })
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            onPress: onPressNotification,
+            style: styles.headerIconBtn,
+            children: [/*#__PURE__*/_jsx(Icon, {
+              name: "bell",
+              size: 22,
+              color: theme.textPrimary
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.badge,
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "caption",
+                style: styles.badgeText,
+                color: "#FFFFFF",
+                children: headerData.notificationCount
+              })
             })]
           }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            onPress: onPressTrackQbank,
-            children: /*#__PURE__*/_jsx(Typography, {
-              variant: "h3",
-              bold: true,
-              color: theme.primary,
-              children: progressData.buttonText
+            onPress: onPressAvatar,
+            style: styles.profileContainer,
+            children: /*#__PURE__*/_jsx(Image, {
+              source: {
+                uri: headerData.avatarUrl
+              },
+              style: styles.profileAvatar
             })
           })]
-        }), /*#__PURE__*/_jsx(ProgressBar, {
-          progress: progressData.percentage / 100,
-          color: "#F97316",
-          height: 8,
-          style: styles.qbankProgressBar
         })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.actionsContainer,
-        children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-          activeOpacity: 0.9,
-          onPress: onPressPearls,
-          style: [styles.actionPill, {
-            backgroundColor: '#5F85E5'
-          }],
-          children: [/*#__PURE__*/_jsx(View, {
-            style: styles.actionPillIconContainer,
-            children: /*#__PURE__*/_jsx(Icon, {
-              name: "diamond",
-              size: 18,
-              color: "#5F85E5"
+      })
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      contentContainerStyle: {
+        flexGrow: 1
+      },
+      showsVerticalScrollIndicator: false,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.scrollContent, {
+          maxWidth: contentMaxWidth,
+          alignSelf: alignSelfCenter,
+          width: '100%'
+        }],
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.progressContainer,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.progressRow,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.progressTextContainer,
+              children: [/*#__PURE__*/_jsxs(Typography, {
+                variant: "h1",
+                bold: true,
+                color: "#10B981",
+                style: styles.percentageTextLarge,
+                children: [progressData.percentage, "%"]
+              }), /*#__PURE__*/_jsx(Typography, {
+                variant: "caption",
+                color: theme.textPrimary,
+                style: styles.modulesCompletedText,
+                children: progressData.text
+              })]
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: onPressTrackQbank,
+              style: styles.trackProgressBtn,
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "caption",
+                bold: true,
+                color: "#FFFFFF",
+                children: progressData.buttonText
+              })
+            })]
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.progressBarBg,
+            children: /*#__PURE__*/_jsx(View, {
+              style: [styles.progressBarFill, {
+                width: `${progressData.percentage}%`
+              }]
             })
-          }), /*#__PURE__*/_jsx(Typography, {
-            variant: "h3",
-            bold: true,
-            color: "#FFFFFF",
-            style: styles.actionPillText,
-            children: actionsData.pearlsLabel
           })]
-        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-          activeOpacity: 0.9,
-          onPress: onPressUpdates,
-          style: [styles.actionPill, {
-            backgroundColor: '#1A7B60'
-          }],
-          children: [/*#__PURE__*/_jsx(View, {
-            style: styles.actionPillIconContainer,
-            children: /*#__PURE__*/_jsx(Icon, {
-              name: "megaphone",
-              size: 18,
-              color: "#1A7B60"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.actionsContainer,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            activeOpacity: 0.9,
+            onPress: onPressPearls,
+            style: [styles.actionPill, {
+              backgroundColor: '#8B5CF6',
+              marginRight: 8
+            }],
+            children: /*#__PURE__*/_jsxs(View, {
+              style: styles.actionPillContent,
+              children: [/*#__PURE__*/_jsx(View, {
+                style: styles.actionPillIconLeft,
+                children: /*#__PURE__*/_jsx(Icon, {
+                  name: "diamond",
+                  size: 20,
+                  color: "#FFFFFF"
+                })
+              }), /*#__PURE__*/_jsx(Typography, {
+                variant: "h3",
+                bold: true,
+                color: "#FFFFFF",
+                style: styles.actionPillTextCentered,
+                children: actionsData.pearlsLabel
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.chevronsRight,
+                children: [/*#__PURE__*/_jsx(Icon, {
+                  name: "chevron-right",
+                  size: 16,
+                  color: "rgba(255,255,255,0.4)"
+                }), /*#__PURE__*/_jsx(View, {
+                  style: {
+                    marginLeft: -8
+                  },
+                  children: /*#__PURE__*/_jsx(Icon, {
+                    name: "chevron-right",
+                    size: 16,
+                    color: "rgba(255,255,255,0.8)"
+                  })
+                })]
+              })]
             })
-          }), /*#__PURE__*/_jsx(Typography, {
-            variant: "h3",
-            bold: true,
-            color: "#FFFFFF",
-            style: styles.actionPillText,
-            children: actionsData.updatesLabel
-          })]
-        })]
-      }), quickLinksHeader.show && /*#__PURE__*/_jsx(View, {
-        style: styles.sectionHeader,
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: "caption",
-          bold: true,
-          color: theme.textSecondary,
-          style: styles.sectionTitle,
-          children: quickLinksHeader.title
-        })
-      }), /*#__PURE__*/_jsx(ScrollView, {
-        horizontal: true,
-        showsHorizontalScrollIndicator: false,
-        contentContainerStyle: styles.quickLinksScroll,
-        children: quickLinksData.map(link => /*#__PURE__*/_jsxs(TouchableOpacity, {
-          style: styles.quickLinkItem,
-          onPress: () => {
-            link.onPress?.();
-            onPressQuickLink?.(link.id);
-          },
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.quickLinkCircle, {
-              backgroundColor: `${link.color}15`
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            activeOpacity: 0.9,
+            onPress: onPressUpdates,
+            style: [styles.actionPill, {
+              backgroundColor: '#60A5FA',
+              marginLeft: 8
             }],
-            children: /*#__PURE__*/_jsx(Icon, {
-              name: link.icon,
-              size: 20,
-              color: link.color
+            children: /*#__PURE__*/_jsxs(View, {
+              style: styles.actionPillContent,
+              children: [/*#__PURE__*/_jsx(View, {
+                style: styles.actionPillIconLeft,
+                children: /*#__PURE__*/_jsx(Icon, {
+                  name: "megaphone",
+                  size: 20,
+                  color: "#FFFFFF"
+                })
+              }), /*#__PURE__*/_jsx(Typography, {
+                variant: "h3",
+                bold: true,
+                color: "#FFFFFF",
+                style: styles.actionPillTextCentered,
+                children: actionsData.updatesLabel
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.chevronsRight,
+                children: [/*#__PURE__*/_jsx(Icon, {
+                  name: "chevron-right",
+                  size: 16,
+                  color: "rgba(255,255,255,0.4)"
+                }), /*#__PURE__*/_jsx(View, {
+                  style: {
+                    marginLeft: -8
+                  },
+                  children: /*#__PURE__*/_jsx(Icon, {
+                    name: "chevron-right",
+                    size: 16,
+                    color: "rgba(255,255,255,0.8)"
+                  })
+                })]
+              })]
             })
-          }), /*#__PURE__*/_jsx(Typography, {
-            variant: "caption",
-            color: theme.textPrimary,
-            bold: true,
-            style: styles.quickLinkLabel,
-            children: link.label
           })]
-        }, link.id))
-      }), dailyMcqHeader.show && /*#__PURE__*/_jsx(View, {
-        style: styles.sectionHeader,
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: "caption",
-          bold: true,
-          color: theme.textSecondary,
-          style: styles.sectionTitle,
-          children: dailyMcqHeader.title
-        })
-      }), /*#__PURE__*/_jsxs(Card, {
-        bordered: true,
-        style: styles.mcqCard,
-        children: [dailyMcqData.imageUrl && /*#__PURE__*/_jsx(Image, {
-          source: {
-            uri: dailyMcqData.imageUrl
-          },
-          style: styles.mcqImage
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: "body",
-          color: theme.textPrimary,
-          style: styles.mcqQuestion,
-          children: dailyMcqData.question
+        }), quickLinksHeader.show && /*#__PURE__*/_jsx(View, {
+          style: styles.sectionHeader,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "caption",
+            color: theme.textSecondary,
+            style: styles.sectionTitle,
+            children: quickLinksHeader.title
+          })
         }), /*#__PURE__*/_jsx(View, {
-          style: styles.mcqOptionsList,
-          children: dailyMcqData.options.map((option, idx) => {
-            const isSelected = selectedTeaserOption === idx;
-            const isCorrectAnswer = idx === dailyMcqData.correctIndex;
-            const isTeaserAnswered = selectedTeaserOption !== null;
-            let circleBorder = theme.border;
-            let circleFill = 'transparent';
-            let rowBg = 'transparent';
-            if (isTeaserAnswered) {
-              if (isCorrectAnswer) {
-                circleBorder = theme.success;
-                circleFill = theme.success;
-                rowBg = 'rgba(16, 185, 129, 0.04)';
-              } else if (isSelected) {
-                circleBorder = theme.danger;
-                circleFill = theme.danger;
-                rowBg = 'rgba(239, 68, 68, 0.04)';
-              }
-            } else if (isSelected) {
-              circleBorder = theme.primary;
-              circleFill = theme.primary;
-            }
-            return /*#__PURE__*/_jsxs(TouchableOpacity, {
-              activeOpacity: 0.8,
-              disabled: isTeaserAnswered,
-              style: [styles.mcqOptionRow, {
-                backgroundColor: rowBg
-              }],
-              onPress: () => setSelectedTeaserOption(idx),
-              children: [/*#__PURE__*/_jsx(View, {
-                style: [styles.mcqRadioOuter, {
-                  borderColor: circleBorder
+          style: styles.quickLinksContainer,
+          children: quickLinksData.map(link => {
+            let bgCol = '#E5E7EB';
+            if (link.id === 'bookmarks') bgCol = '#D1FAE5';
+            if (link.id === 'custom_module') bgCol = '#DBEAFE';
+            if (link.id === 'videos_saved') bgCol = '#E0E7FF';
+            if (link.id === 'qbank') bgCol = '#FCE7F3';
+            return /*#__PURE__*/_jsx(TouchableOpacity, {
+              style: styles.quickLinkBoxItem,
+              onPress: () => {
+                link.onPress?.();
+                onPressQuickLink?.(link.id);
+              },
+              children: /*#__PURE__*/_jsxs(View, {
+                style: [styles.quickLinkRect, {
+                  backgroundColor: bgCol
                 }],
-                children: isSelected || isTeaserAnswered && isCorrectAnswer ? /*#__PURE__*/_jsx(View, {
-                  style: [styles.mcqRadioInner, {
-                    backgroundColor: circleFill
-                  }]
-                }) : null
-              }), /*#__PURE__*/_jsx(Typography, {
-                variant: "body",
-                color: theme.textPrimary,
-                style: styles.mcqOptionText,
-                children: option
-              })]
-            }, idx);
+                children: [/*#__PURE__*/_jsx(Icon, {
+                  name: link.icon,
+                  size: 24,
+                  color: link.color
+                }), /*#__PURE__*/_jsx(Typography, {
+                  variant: "caption",
+                  color: theme.textPrimary,
+                  style: styles.quickLinkLabelTwoLines,
+                  children: link.label
+                })]
+              })
+            }, link.id);
           })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: onPressMcqViewDetails,
-          style: styles.mcqViewDetailsBtn,
+        }), dailyMcqHeader.show && /*#__PURE__*/_jsx(View, {
+          style: styles.sectionHeaderCentered,
           children: /*#__PURE__*/_jsx(Typography, {
-            variant: "h3",
-            color: theme.primary,
+            variant: "caption",
             bold: true,
-            children: "View Details"
+            color: theme.textSecondary,
+            style: styles.sectionTitle,
+            children: dailyMcqHeader.title
           })
-        })]
-      }), getStartedHeader.show && /*#__PURE__*/_jsx(View, {
-        style: styles.sectionHeader,
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: "caption",
-          bold: true,
-          color: theme.textSecondary,
-          style: styles.sectionTitle,
-          children: getStartedHeader.title
-        })
-      }), /*#__PURE__*/_jsx(Card, {
-        bordered: true,
-        onPress: onPressGetStarted,
-        style: styles.getStartedCard,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.getStartedRow,
-          children: [/*#__PURE__*/_jsx(Image, {
-            source: {
-              uri: getStartedData.avatarUrl
-            },
-            style: styles.doctorAvatar
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.getStartedInfo,
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "h3",
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.mcqContainer,
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "body",
+            color: theme.textPrimary,
+            style: styles.mcqQuestion,
+            children: dailyMcqData.question
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.mcqOptionsList,
+            children: dailyMcqData.options.map((option, idx) => {
+              const isSelected = selectedTeaserOption === idx;
+              let rowBg = '#FFFFFF';
+              let rowBorder = '#E2E8F0';
+              let textColor = theme.textSecondary;
+              if (isSelected) {
+                rowBg = '#ECFDF5';
+                rowBorder = '#10B981';
+                textColor = '#10B981';
+              }
+              return /*#__PURE__*/_jsxs(TouchableOpacity, {
+                activeOpacity: 0.8,
+                style: [styles.mcqOptionBox, {
+                  backgroundColor: rowBg,
+                  borderColor: rowBorder
+                }],
+                onPress: () => setSelectedTeaserOption(idx),
+                children: [/*#__PURE__*/_jsx(View, {
+                  style: [styles.mcqCheckCircle, {
+                    borderColor: isSelected ? '#10B981' : '#CBD5E1',
+                    backgroundColor: isSelected ? '#10B981' : 'transparent'
+                  }],
+                  children: isSelected && /*#__PURE__*/_jsx(Icon, {
+                    name: "check-circle",
+                    size: 12,
+                    color: "#FFFFFF"
+                  })
+                }), /*#__PURE__*/_jsx(Typography, {
+                  variant: "body",
+                  color: textColor,
+                  style: styles.mcqOptionTextStr,
+                  children: option
+                })]
+              }, idx);
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: onPressMcqViewDetails,
+            style: styles.mcqViewDetailsBtn,
+            children: /*#__PURE__*/_jsx(Typography, {
+              variant: "body",
+              color: "#10B981",
               bold: true,
-              color: theme.textPrimary,
-              children: getStartedData.title
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "caption",
-              color: theme.textSecondary,
-              children: getStartedData.subtitle
-            })]
-          }), /*#__PURE__*/_jsx(Icon, {
-            name: "chevron-right",
-            size: 16,
-            color: theme.textSecondary
+              children: "View Details"
+            })
           })]
-        })
-      }), continueLearningHeader.show && /*#__PURE__*/_jsx(View, {
-        style: styles.sectionHeader,
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: "caption",
-          bold: true,
-          color: theme.textSecondary,
-          style: styles.sectionTitle,
-          children: continueLearningHeader.title
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.continueLearningList,
-        children: continueLearningData.map(item => /*#__PURE__*/_jsx(TouchableOpacity, {
+        }), getStartedHeader.show && /*#__PURE__*/_jsx(View, {
+          style: styles.sectionHeader,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "caption",
+            color: theme.textSecondary,
+            style: styles.sectionTitle,
+            children: getStartedHeader.title
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onPressGetStarted,
           activeOpacity: 0.8,
-          onPress: () => onPressContinueLearning?.(item.id),
-          children: /*#__PURE__*/_jsx(Card, {
-            bordered: true,
-            style: styles.continueLearningCard,
+          children: /*#__PURE__*/_jsx(View, {
+            style: styles.getStartedCardMockup,
             children: /*#__PURE__*/_jsxs(View, {
-              style: styles.continueLearningRow,
-              children: [/*#__PURE__*/_jsx(View, {
-                style: [styles.subjectIconBox, {
-                  backgroundColor: theme.secondary
-                }],
-                children: /*#__PURE__*/_jsx(Icon, {
-                  name: item.icon,
-                  size: 20,
-                  color: theme.primary
-                })
-              }), /*#__PURE__*/_jsxs(View, {
-                style: styles.continueLearningInfo,
-                children: [/*#__PURE__*/_jsx(View, {
-                  style: styles.continueLearningTextRow,
-                  children: /*#__PURE__*/_jsx(Typography, {
-                    variant: "h3",
-                    bold: true,
-                    color: theme.textPrimary,
-                    children: item.title
+              style: styles.getStartedRow,
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.getStartedIconBox,
+                children: [/*#__PURE__*/_jsx(Image, {
+                  source: {
+                    uri: 'https://cdn-icons-png.flaticon.com/512/3004/3004116.png'
+                  },
+                  style: styles.anatomyIcon
+                }), /*#__PURE__*/_jsx(View, {
+                  style: styles.playIconBadge,
+                  children: /*#__PURE__*/_jsx(Icon, {
+                    name: "play",
+                    size: 16,
+                    color: "#F59E0B"
                   })
-                }), /*#__PURE__*/_jsx(ProgressBar, {
-                  progress: item.progressPercentage / 100,
-                  color: "#0891B2",
-                  height: 6,
-                  style: styles.continueProgressBar
-                }), /*#__PURE__*/_jsxs(View, {
-                  style: styles.continueStatsRow,
-                  children: [/*#__PURE__*/_jsxs(Typography, {
-                    variant: "caption",
-                    color: theme.textSecondary,
-                    children: [item.completedModules, " / ", item.totalModules, " Modules"]
-                  }), /*#__PURE__*/_jsxs(Typography, {
-                    variant: "caption",
-                    bold: true,
-                    color: theme.textPrimary,
-                    children: [item.progressPercentage, "%"]
-                  })]
                 })]
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.getStartedInfo,
+                children: [/*#__PURE__*/_jsx(Typography, {
+                  variant: "h3",
+                  bold: true,
+                  color: theme.textPrimary,
+                  children: getStartedData.title
+                }), /*#__PURE__*/_jsx(Typography, {
+                  variant: "caption",
+                  color: theme.textSecondary,
+                  children: getStartedData.subtitle
+                })]
+              }), /*#__PURE__*/_jsx(Icon, {
+                name: "chevron-right",
+                size: 20,
+                color: theme.textSecondary
               })]
             })
           })
-        }, item.id))
-      }), /*#__PURE__*/_jsx(Card, {
-        style: styles.referralCard,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.referralRow,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.referralLeft,
+        }), continueLearningHeader.show && /*#__PURE__*/_jsx(View, {
+          style: styles.sectionHeader,
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "caption",
+            color: theme.textSecondary,
+            style: styles.sectionTitle,
+            children: continueLearningHeader.title
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.continueLearningList,
+          children: continueLearningData.map(item => {
+            let iconUrl = '';
+            let iconBg = '#F3E8FF';
+            let barColor = '#A855F7';
+            if (item.id === 'subj_biochem') {
+              iconUrl = 'https://cdn-icons-png.flaticon.com/512/2026/2026117.png';
+              iconBg = '#F3E8FF';
+              barColor = '#A855F7';
+            }
+            if (item.id === 'subj_pharmacology') {
+              iconUrl = 'https://cdn-icons-png.flaticon.com/512/3004/3004104.png';
+              iconBg = '#FFEDD5';
+              barColor = '#10B981';
+            }
+            if (item.id === 'subj_physio') {
+              iconUrl = 'https://cdn-icons-png.flaticon.com/512/3004/3004140.png';
+              iconBg = '#FEE2E2';
+              barColor = '#10B981';
+            }
+            return /*#__PURE__*/_jsx(TouchableOpacity, {
+              activeOpacity: 0.8,
+              onPress: () => onPressContinueLearning?.(item.id),
+              children: /*#__PURE__*/_jsx(View, {
+                style: styles.continueCardMockup,
+                children: /*#__PURE__*/_jsxs(View, {
+                  style: styles.continueLearningRow,
+                  children: [/*#__PURE__*/_jsx(View, {
+                    style: [styles.continueIconBox, {
+                      backgroundColor: iconBg
+                    }],
+                    children: iconUrl ? /*#__PURE__*/_jsx(Image, {
+                      source: {
+                        uri: iconUrl
+                      },
+                      style: {
+                        width: 28,
+                        height: 28
+                      }
+                    }) : /*#__PURE__*/_jsx(Icon, {
+                      name: item.icon,
+                      size: 24,
+                      color: theme.primary
+                    })
+                  }), /*#__PURE__*/_jsxs(View, {
+                    style: styles.continueLearningInfo,
+                    children: [/*#__PURE__*/_jsx(Typography, {
+                      variant: "h3",
+                      bold: true,
+                      color: theme.textPrimary,
+                      style: {
+                        marginBottom: 8
+                      },
+                      children: item.title
+                    }), /*#__PURE__*/_jsx(View, {
+                      style: styles.progressBarBgMockup,
+                      children: /*#__PURE__*/_jsx(View, {
+                        style: [styles.progressBarFillMockup, {
+                          width: `${item.progressPercentage}%`,
+                          backgroundColor: barColor
+                        }]
+                      })
+                    }), /*#__PURE__*/_jsxs(View, {
+                      style: styles.continueStatsRow,
+                      children: [/*#__PURE__*/_jsxs(Typography, {
+                        variant: "caption",
+                        color: theme.textSecondary,
+                        children: [item.completedModules, "/", item.totalModules, " Modules"]
+                      }), /*#__PURE__*/_jsxs(Typography, {
+                        variant: "caption",
+                        color: theme.textSecondary,
+                        children: [item.progressPercentage, "%"]
+                      })]
+                    })]
+                  })]
+                })
+              })
+            }, item.id);
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: onPressShareApp,
+          activeOpacity: 0.9,
+          style: {
+            marginTop: 8
+          },
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.referralBannerMockup,
             children: [/*#__PURE__*/_jsx(View, {
-              style: styles.referralIconContainer,
+              style: styles.referralIconCircle,
               children: /*#__PURE__*/_jsx(Icon, {
                 name: "share",
-                size: 16,
+                size: 18,
                 color: "#FFFFFF"
               })
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: "body",
-              bold: true,
-              color: "#1E293B",
-              style: styles.referralText,
-              children: referralData.text
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.referralTextCol,
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "body",
+                bold: true,
+                color: "#1E293B",
+                children: referralData.text
+              })
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.shareAppBtnWhite,
+              children: /*#__PURE__*/_jsx(Typography, {
+                variant: "caption",
+                bold: true,
+                color: "#1E293B",
+                children: referralData.buttonText
+              })
             })]
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            onPress: onPressShareApp,
-            style: styles.referralButton,
-            children: /*#__PURE__*/_jsx(Typography, {
-              variant: "caption",
-              bold: true,
-              color: "#1E293B",
-              children: referralData.buttonText
-            })
-          })]
-        })
-      })]
+          })
+        })]
+      })
     })]
   });
 };
@@ -590,22 +608,27 @@ const styles = StyleSheet.create({
     flex: 1
   },
   header: {
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#F1F5F9'
+  },
+  headerInner: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingHorizontal: 16,
-    paddingVertical: 10,
-    backgroundColor: '#FFFFFF',
-    borderBottomWidth: 1
+    paddingVertical: 12,
+    width: '100%'
   },
   headerDropdown: {
     flexDirection: 'row',
     alignItems: 'center'
   },
   appLogo: {
-    width: 32,
-    height: 32,
+    width: 36,
+    height: 36,
     borderRadius: 8,
+    backgroundColor: '#0F172A',
     justifyContent: 'center',
     alignItems: 'center',
     marginRight: 10
@@ -628,35 +651,37 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center'
   },
-  iconBtn: {
+  headerIconBtn: {
     width: 36,
     height: 36,
-    borderRadius: 18,
-    borderWidth: 1,
     justifyContent: 'center',
     alignItems: 'center',
     position: 'relative',
-    marginRight: 10
+    marginRight: 6
   },
   badge: {
     position: 'absolute',
-    top: -4,
-    right: -4,
-    width: 16,
-    height: 16,
-    borderRadius: 8,
+    top: 2,
+    right: 4,
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+    backgroundColor: '#EF4444',
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    borderWidth: 1.5,
+    borderColor: '#FFFFFF'
   },
   badgeText: {
-    fontSize: 9,
-    fontWeight: '700'
+    fontSize: 8,
+    fontWeight: 'bold'
   },
   profileContainer: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-    overflow: 'hidden'
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    overflow: 'hidden',
+    marginLeft: 6
   },
   profileAvatar: {
     width: '100%',
@@ -664,181 +689,196 @@ const styles = StyleSheet.create({
   },
   scrollContent: {
     paddingHorizontal: 16,
-    paddingBottom: 32
+    paddingVertical: 16,
+    paddingBottom: 40
   },
-  promoBanner: {
-    flexDirection: 'row',
-    borderRadius: 20,
+  progressContainer: {
+    backgroundColor: '#E8F5E9',
     padding: 16,
-    justifyContent: 'space-between',
-    overflow: 'hidden',
-    height: 120
-  },
-  promoTextColumn: {
-    flex: 1.2,
-    justifyContent: 'center'
-  },
-  promoTitle: {
-    fontSize: 18,
-    lineHeight: 22,
-    marginBottom: 6
-  },
-  promoSubtitle: {
-    fontSize: 11,
-    opacity: 0.9
-  },
-  promoBannerImage: {
-    flex: 0.8,
-    height: '100%',
-    width: '100%',
-    alignSelf: 'flex-end',
-    borderRadius: 10
-  },
-  qbankProgressCard: {
-    padding: 16,
-    marginTop: 8,
-    marginBottom: 4,
-    borderRadius: 16
+    borderRadius: 16,
+    marginBottom: 16
   },
-  qbankProgressRow: {
+  progressRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     marginBottom: 12
   },
-  qbankProgressTextContainer: {
+  progressTextContainer: {
     flex: 1
   },
-  percentageText: {
-    fontSize: 24,
-    lineHeight: 28
+  percentageTextLarge: {
+    fontSize: 36,
+    lineHeight: 42
   },
-  qbankProgressBar: {
-    marginTop: 4
+  modulesCompletedText: {
+    fontSize: 10,
+    opacity: 0.8
+  },
+  trackProgressBtn: {
+    backgroundColor: '#059669',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 8
+  },
+  progressBarBg: {
+    height: 10,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 5,
+    overflow: 'hidden',
+    width: '100%'
+  },
+  progressBarFill: {
+    height: '100%',
+    backgroundColor: '#059669',
+    borderRadius: 5
   },
   actionsContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginTop: 8
+    marginBottom: 20
   },
   actionPill: {
     flex: 1,
+    padding: 16,
+    borderRadius: 12
+  },
+  actionPillContent: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 14,
-    borderRadius: 14,
-    marginHorizontal: 4
-  },
-  actionPillIconContainer: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    backgroundColor: '#FFFFFF',
+    width: '100%'
+  },
+  actionPillIconLeft: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: 'rgba(255,255,255,0.25)',
     justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 10
+    alignItems: 'center'
   },
-  actionPillText: {
-    fontSize: 15
+  actionPillTextCentered: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 16
+  },
+  chevronsRight: {
+    flexDirection: 'row'
   },
   sectionHeader: {
-    marginTop: 12,
-    marginBottom: 4
+    marginTop: 8,
+    marginBottom: 12
+  },
+  sectionHeaderCentered: {
+    marginTop: 8,
+    marginBottom: 12,
+    alignItems: 'center'
   },
   sectionTitle: {
     fontSize: 12,
     letterSpacing: 0.8
   },
-  quickLinksScroll: {
-    paddingVertical: 4
+  quickLinksContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 16
   },
-  quickLinkItem: {
+  quickLinkBoxItem: {
     alignItems: 'center',
-    marginRight: 20,
-    width: 72
+    flex: 1
   },
-  quickLinkCircle: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
+  quickLinkRect: {
+    width: '90%',
+    aspectRatio: 0.8,
+    borderRadius: 16,
     justifyContent: 'center',
     alignItems: 'center',
-    marginBottom: 6
+    padding: 8
   },
-  quickLinkLabel: {
+  quickLinkLabelTwoLines: {
     textAlign: 'center',
-    fontSize: 11
+    fontSize: 11,
+    lineHeight: 14,
+    marginTop: 8
   },
-  mcqCard: {
+  mcqContainer: {
+    backgroundColor: '#FFFFFF',
     padding: 16,
-    borderRadius: 16,
-    overflow: 'hidden',
-    marginTop: 4,
-    marginBottom: 4
-  },
-  mcqImage: {
-    width: '100%',
-    height: 140,
     borderRadius: 12,
-    marginBottom: 12
+    marginBottom: 20,
+    borderWidth: 1,
+    borderColor: '#E2E8F0'
   },
   mcqQuestion: {
     fontSize: 14,
     lineHeight: 20,
     fontWeight: '500',
-    marginBottom: 12
+    marginBottom: 16
   },
   mcqOptionsList: {
     marginBottom: 8
   },
-  mcqOptionRow: {
+  mcqOptionBox: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 10,
-    paddingHorizontal: 8,
+    paddingVertical: 14,
+    paddingHorizontal: 12,
     borderRadius: 8,
-    marginBottom: 6
+    borderWidth: 1,
+    marginBottom: 10
   },
-  mcqRadioOuter: {
-    width: 18,
-    height: 18,
-    borderRadius: 9,
-    borderWidth: 1.5,
+  mcqCheckCircle: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    marginRight: 10
-  },
-  mcqRadioInner: {
-    width: 10,
-    height: 10,
-    borderRadius: 5
+    marginRight: 12
   },
-  mcqOptionText: {
-    fontSize: 13,
+  mcqOptionTextStr: {
+    fontSize: 14,
     flex: 1
   },
   mcqViewDetailsBtn: {
     alignItems: 'center',
     borderTopWidth: 1,
     borderTopColor: '#E2E8F0',
-    paddingTop: 12,
-    marginTop: 8
+    paddingTop: 16,
+    marginTop: 4
   },
-  getStartedCard: {
-    padding: 12,
-    borderRadius: 16,
-    marginTop: 4,
-    marginBottom: 4
+  getStartedCardMockup: {
+    backgroundColor: '#FFFFFF',
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 20,
+    borderWidth: 1,
+    borderColor: '#E2E8F0'
   },
   getStartedRow: {
     flexDirection: 'row',
     alignItems: 'center'
   },
-  doctorAvatar: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    marginRight: 12
+  getStartedIconBox: {
+    width: 50,
+    height: 50,
+    borderRadius: 12,
+    backgroundColor: '#FFF7ED',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 16,
+    position: 'relative'
+  },
+  anatomyIcon: {
+    width: 32,
+    height: 32
+  },
+  playIconBadge: {
+    position: 'absolute',
+    bottom: -6,
+    right: -6,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 10,
+    padding: 2
   },
   getStartedInfo: {
     flex: 1
@@ -846,101 +886,71 @@ const styles = StyleSheet.create({
   continueLearningList: {
     marginTop: 4
   },
-  continueLearningCard: {
-    padding: 12,
-    marginBottom: 6,
-    borderRadius: 16
+  continueCardMockup: {
+    backgroundColor: '#FFFFFF',
+    padding: 16,
+    marginBottom: 12,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E2E8F0'
   },
   continueLearningRow: {
     flexDirection: 'row',
     alignItems: 'center'
   },
-  subjectIconBox: {
-    width: 40,
-    height: 40,
-    borderRadius: 10,
+  continueIconBox: {
+    width: 48,
+    height: 48,
+    borderRadius: 12,
     justifyContent: 'center',
     alignItems: 'center',
-    marginRight: 12
+    marginRight: 16
   },
   continueLearningInfo: {
     flex: 1
   },
-  continueLearningTextRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 6
+  progressBarBgMockup: {
+    height: 6,
+    backgroundColor: '#F1F5F9',
+    borderRadius: 3,
+    marginBottom: 8,
+    width: '100%',
+    overflow: 'hidden'
   },
-  continueProgressBar: {
-    height: 4,
-    marginBottom: 6
+  progressBarFillMockup: {
+    height: '100%',
+    borderRadius: 3
   },
   continueStatsRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center'
   },
-  referralCard: {
-    marginTop: 8,
-    padding: 14,
-    borderRadius: 16,
-    backgroundColor: '#FDE047' // RxDx Amber
-  },
-  referralRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-  referralLeft: {
+  referralBannerMockup: {
     flexDirection: 'row',
     alignItems: 'center',
-    flex: 1,
-    paddingRight: 12
+    backgroundColor: '#FCD34D',
+    padding: 16,
+    borderRadius: 12
   },
-  referralIconContainer: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    backgroundColor: '#EA580C',
-    // Orange sharing accent
+  referralIconCircle: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#F59E0B',
     justifyContent: 'center',
     alignItems: 'center',
-    marginRight: 10
+    marginRight: 12
   },
-  referralText: {
-    fontSize: 12,
-    lineHeight: 16,
-    flex: 1
+  referralTextCol: {
+    flex: 1,
+    paddingRight: 12
   },
-  referralButton: {
+  shareAppBtnWhite: {
     backgroundColor: '#FFFFFF',
     paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 12,
-    shadowColor: '#000000',
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 1,
-    elevation: 1
-  },
-  bannerCarouselContainer: {
-    marginTop: 12
-  },
-  bannerScrollViewContent: {},
-  dotsContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: 8
-  },
-  dot: {
-    height: 6,
-    borderRadius: 3,
-    marginHorizontal: 3
+    paddingVertical: 8,
+    borderRadius: 8
   }
 });
 //# sourceMappingURL=HomeScreen.js.map