react-native-elearn-ui 0.1.12 → 0.1.14

package/src/screens/HomeScreen.tsx

@@ -6,11 +6,11 @@ import {
   TouchableOpacity,
   StatusBar,
   Image,
-  Dimensions,
+  useWindowDimensions,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useTheme } from '../context/ThemeContext';
-import { Typography, Card, ProgressBar, Icon } from '../components';
+import { Typography, Icon } from '../components';
 import type { IconName } from '../components';
 import type { HomeScreenParams } from '../types';
 
@@ -44,20 +44,12 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({
   onPressMcqViewDetails,
 }) => {
   const theme = useTheme();
+  const { width } = useWindowDimensions();
+  const isTablet = width > 768;
+  const contentMaxWidth = isTablet ? 768 : '100%';
+  const alignSelfCenter = isTablet ? 'center' : 'auto';
 
-  const [selectedTeaserOption, setSelectedTeaserOption] = useState<number | null>(null);
-  const [activeBannerIndex, setActiveBannerIndex] = useState(0);
-
-  const handleBannerScroll = (event: any) => {
-    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 [selectedTeaserOption, setSelectedTeaserOption] = useState<number | null>(0);
 
   const headerData = params?.header || {
     appName: 'Residency',
@@ -66,15 +58,6 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({
     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: 'quickLinks' | 'dailyMcq' | 'getStarted' | 'continueLearning', defaultTitle: string) => {
     const section = headersConfig[key];
@@ -85,15 +68,15 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({
   };
 
   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 || {
@@ -102,21 +85,20 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({
   };
 
   const quickLinksData = params?.quickLinks || [
-    { id: 'bookmarks', label: 'Bookmarks', icon: 'bookmark', color: '#3B82F6' },
-    { id: 'custom_module', label: 'Custom Module', icon: 'file-text', color: '#10B981' },
-    { id: 'videos_saved', label: 'Videos Saved', icon: 'download', color: '#EF4444' },
-    { id: 'qbank', label: 'QBank', icon: 'book-open', color: '#8B5CF6' },
+    { id: 'bookmarks', label: 'Book\nmarks', icon: 'bookmark', color: '#10B981' },
+    { id: 'custom_module', label: 'Custom\nModule', icon: 'file-text', color: '#3B82F6' },
+    { id: 'videos_saved', label: 'Videos\nSaved', icon: 'download', color: '#8B5CF6' },
+    { id: 'qbank', 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.',
+    question: 'Discuss the causes, radiological features, and visiond 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',
+      'A. Used tor Heoatitls B',
+      'B. Used tor Heoatitls B',
+      'C. Used tor Heoatitls B',
+      'D. Used tor Heoatitls B',
     ],
     correctIndex: 0,
   };
@@ -128,372 +110,331 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({
   };
 
   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, icon: 'dna' },
-    { id: 'subj_physio', title: 'Physiology', progressPercentage: 88, completedModules: 59, totalModules: 63, icon: 'flask' },
+    { id: 'subj_biochem', title: 'Biochemistry', 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: 52, completedModules: 31, totalModules: 63, 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 (
-    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: '#F8FAFC' }]}>
       <StatusBar barStyle="dark-content" />
 
       {/* Header Panel */}
       {!hideHeader && (
-        <View style={[styles.header, { borderBottomColor: theme.border }]}>
-          <TouchableOpacity style={styles.headerDropdown}>
-            <View style={[styles.appLogo, { backgroundColor: theme.primary }]}>
-              <Typography variant="label" bold color="#FFFFFF">R</Typography>
-            </View>
-            <View>
-              <View style={styles.appNameRow}>
-                <Typography variant="h2" bold color={theme.textPrimary}>
-                  {headerData.appName}
-                </Typography>
-                <View style={styles.chevronWrap}>
-                  <Icon name="chevron-left" size={12} color={theme.textSecondary} />
+        <View style={styles.header}>
+          <View style={[styles.headerInner, { maxWidth: contentMaxWidth, alignSelf: alignSelfCenter as any }]}>
+            <TouchableOpacity style={styles.headerDropdown}>
+              <View style={styles.appLogo}>
+                <Icon name="check-square" size={20} color="#FFFFFF" />
+              </View>
+              <View>
+                <View style={styles.appNameRow}>
+                  <Typography variant="h2" color={theme.textPrimary} style={{ fontSize: 20, fontWeight: '800' }}>
+                    {headerData.appName}
+                  </Typography>
+                  <View style={styles.chevronWrap}>
+                    <Icon name="chevron-left" size={12} color={theme.textSecondary} />
+                  </View>
                 </View>
+                <Typography variant="caption" color={theme.textSecondary} style={styles.appSubName}>
+                  {headerData.subName}
+                </Typography>
               </View>
-              <Typography variant="caption" color={theme.textSecondary} style={styles.appSubName}>
-                {headerData.subName}
-              </Typography>
-            </View>
-          </TouchableOpacity>
+            </TouchableOpacity>
 
-          <View style={styles.headerRight}>
-            <TouchableOpacity onPress={onPressNotification} style={[styles.iconBtn, { borderColor: theme.border }]}>
-              <Icon name="bell" size={20} color={theme.textPrimary} />
-              {headerData.notificationCount && headerData.notificationCount > 0 ? (
-                <View style={[styles.badge, { backgroundColor: theme.danger }]}>
+            <View style={styles.headerRight}>
+              <TouchableOpacity style={styles.headerIconBtn}>
+                <Icon name="search" size={22} color={theme.textPrimary} />
+              </TouchableOpacity>
+              
+              <TouchableOpacity onPress={onPressNotification} style={styles.headerIconBtn}>
+                <Icon name="bell" size={22} color={theme.textPrimary} />
+                <View style={styles.badge}>
                   <Typography variant="caption" style={styles.badgeText} color="#FFFFFF">
                     {headerData.notificationCount}
                   </Typography>
                 </View>
-              ) : null}
-            </TouchableOpacity>
+              </TouchableOpacity>
 
-            <TouchableOpacity onPress={onPressAvatar} style={styles.profileContainer}>
-              <Image source={{ uri: headerData.avatarUrl }} style={styles.profileAvatar} />
-            </TouchableOpacity>
+              <TouchableOpacity onPress={onPressAvatar} style={styles.profileContainer}>
+                <Image source={{ uri: headerData.avatarUrl }} style={styles.profileAvatar} />
+              </TouchableOpacity>
+            </View>
           </View>
         </View>
       )}
 
-      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
-        
-        {/* Banner Section */}
-        <View style={styles.bannerCarouselContainer}>
-          <ScrollView
-            horizontal
-            pagingEnabled
-            showsHorizontalScrollIndicator={false}
-            onScroll={handleBannerScroll}
-            scrollEventThrottle={16}
-            contentContainerStyle={styles.bannerScrollViewContent}
-          >
-            {bannersData.map((banner, index) => {
-              const colors = banner.gradientColors || ['#15803D', '#166534'];
-              const bannerBg = colors[0] || '#15803D';
-              
-              return (
-                <TouchableOpacity
-                  key={index}
-                  activeOpacity={0.9}
-                  style={{ width: bannerWidth }}
-                >
-                  <View style={[styles.promoBanner, { backgroundColor: bannerBg, width: '100%' }]}>
-                    <View style={styles.promoTextColumn}>
-                      <Typography variant="h2" bold color="#FFFFFF" style={styles.promoTitle}>
-                        {banner.title}
-                      </Typography>
-                      <Typography variant="caption" color="#D1FAE5" style={styles.promoSubtitle}>
-                        {banner.subtitle}
-                      </Typography>
-                    </View>
-                    {banner.imageUrl && (
-                      <Image
-                        source={{ uri: banner.imageUrl }}
-                        style={styles.promoBannerImage}
-                        resizeMode="cover"
-                      />
-                    )}
-                  </View>
-                </TouchableOpacity>
-              );
-            })}
-          </ScrollView>
-
-          {/* Dots Indicator */}
-          {bannersData.length > 1 && (
-            <View style={styles.dotsContainer}>
-              {bannersData.map((_, index) => (
-                <View
-                  key={index}
-                  style={[
-                    styles.dot,
-                    {
-                      backgroundColor: activeBannerIndex === index ? theme.primary : theme.border,
-                      width: activeBannerIndex === index ? 16 : 6,
-                    },
-                  ]}
-                />
-              ))}
+      <ScrollView contentContainerStyle={{flexGrow: 1}} showsVerticalScrollIndicator={false}>
+        <View style={[styles.scrollContent, { maxWidth: contentMaxWidth, alignSelf: alignSelfCenter as any, width: '100%' }]}>
+          
+          {/* Progress Section */}
+          <View style={styles.progressContainer}>
+            <View style={styles.progressRow}>
+              <View style={styles.progressTextContainer}>
+                <Typography variant="h1" bold color="#10B981" style={styles.percentageTextLarge}>
+                  {progressData.percentage}%
+                </Typography>
+                <Typography variant="caption" color={theme.textPrimary} style={styles.modulesCompletedText}>
+                  {progressData.text}
+                </Typography>
+              </View>
+              <TouchableOpacity onPress={onPressTrackQbank} style={styles.trackProgressBtn}>
+                <Typography variant="caption" bold color="#FFFFFF">
+                  {progressData.buttonText}
+                </Typography>
+              </TouchableOpacity>
             </View>
-          )}
-        </View>
-
-        {/* QBank Progress Card */}
-        <Card bordered style={styles.qbankProgressCard}>
-          <View style={styles.qbankProgressRow}>
-            <View style={styles.qbankProgressTextContainer}>
-              <Typography variant="h1" bold color={theme.textPrimary} style={styles.percentageText}>
-                {progressData.percentage}%
-              </Typography>
-              <Typography variant="caption" color={theme.textSecondary}>
-                {progressData.text}
-              </Typography>
+            <View style={styles.progressBarBg}>
+              <View style={[styles.progressBarFill, { width: `${progressData.percentage}%` }]} />
             </View>
-            <TouchableOpacity onPress={onPressTrackQbank}>
-              <Typography variant="h3" bold color={theme.primary}>
-                {progressData.buttonText}
-              </Typography>
-            </TouchableOpacity>
           </View>
-          <ProgressBar
-            progress={progressData.percentage / 100}
-            color="#F97316"
-            height={8}
-            style={styles.qbankProgressBar}
-          />
-        </Card>
-
-        {/* Stacked Quick Access Actions */}
-        <View style={styles.actionsContainer}>
-          <TouchableOpacity
-            activeOpacity={0.9}
-            onPress={onPressPearls}
-            style={[styles.actionPill, { backgroundColor: '#5F85E5' }]}
-          >
-            <View style={styles.actionPillIconContainer}>
-              <Icon name="diamond" size={18} color="#5F85E5" />
-            </View>
-            <Typography variant="h3" bold color="#FFFFFF" style={styles.actionPillText}>
-              {actionsData.pearlsLabel}
-            </Typography>
-          </TouchableOpacity>
-
-          <TouchableOpacity
-            activeOpacity={0.9}
-            onPress={onPressUpdates}
-            style={[styles.actionPill, { backgroundColor: '#1A7B60' }]}
-          >
-            <View style={styles.actionPillIconContainer}>
-              <Icon name="megaphone" size={18} color="#1A7B60" />
-            </View>
-            <Typography variant="h3" bold color="#FFFFFF" style={styles.actionPillText}>
-              {actionsData.updatesLabel}
-            </Typography>
-          </TouchableOpacity>
-        </View>
 
-        {/* Quick Links Section */}
-        {quickLinksHeader.show && (
-          <View style={styles.sectionHeader}>
-            <Typography variant="caption" bold color={theme.textSecondary} style={styles.sectionTitle}>
-              {quickLinksHeader.title}
-            </Typography>
-          </View>
-        )}
+          {/* Action Pills */}
+          <View style={styles.actionsContainer}>
+            <TouchableOpacity
+              activeOpacity={0.9}
+              onPress={onPressPearls}
+              style={[styles.actionPill, { backgroundColor: '#8B5CF6', marginRight: 8 }]}
+            >
+              <View style={styles.actionPillContent}>
+                <View style={styles.actionPillIconLeft}>
+                  <Icon name="diamond" size={18} color="#FFFFFF" />
+                </View>
+                <Typography variant="body" bold color="#FFFFFF" style={styles.actionPillTextCentered}>
+                  {actionsData.pearlsLabel}
+                </Typography>
+                <View style={styles.chevronsRight}>
+                  <Icon name="chevron-right" size={16} color="rgba(255,255,255,0.4)" />
+                  <View style={{marginLeft: -8}}>
+                    <Icon name="chevron-right" size={16} color="rgba(255,255,255,0.8)" />
+                  </View>
+                </View>
+              </View>
+            </TouchableOpacity>
 
-        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.quickLinksScroll}>
-          {quickLinksData.map((link) => (
             <TouchableOpacity
-              key={link.id}
-              style={styles.quickLinkItem}
-              onPress={() => {
-                link.onPress?.();
-                onPressQuickLink?.(link.id);
-              }}
+              activeOpacity={0.9}
+              onPress={onPressUpdates}
+              style={[styles.actionPill, { backgroundColor: '#60A5FA', marginLeft: 8 }]}
             >
-              <View style={[styles.quickLinkCircle, { backgroundColor: `${link.color}15` }]}>
-                <Icon name={link.icon as IconName} size={20} color={link.color} />
+              <View style={styles.actionPillContent}>
+                <View style={styles.actionPillIconLeft}>
+                  <Icon name="megaphone" size={18} color="#FFFFFF" />
+                </View>
+                <Typography variant="body" bold color="#FFFFFF" style={styles.actionPillTextCentered}>
+                  {actionsData.updatesLabel}
+                </Typography>
+                <View style={styles.chevronsRight}>
+                  <Icon name="chevron-right" size={16} color="rgba(255,255,255,0.4)" />
+                  <View style={{marginLeft: -8}}>
+                    <Icon name="chevron-right" size={16} color="rgba(255,255,255,0.8)" />
+                  </View>
+                </View>
               </View>
-              <Typography variant="caption" color={theme.textPrimary} bold style={styles.quickLinkLabel}>
-                {link.label}
-              </Typography>
             </TouchableOpacity>
-          ))}
-        </ScrollView>
-
-        {/* Brain Teasers Section */}
-        {dailyMcqHeader.show && (
-          <View style={styles.sectionHeader}>
-            <Typography variant="caption" bold color={theme.textSecondary} style={styles.sectionTitle}>
-              {dailyMcqHeader.title}
-            </Typography>
           </View>
-        )}
 
-        <Card bordered style={styles.mcqCard}>
-          {dailyMcqData.imageUrl && (
-            <Image source={{ uri: dailyMcqData.imageUrl }} style={styles.mcqImage} />
+          {/* Quick Links Section */}
+          {quickLinksHeader.show && (
+            <View style={styles.sectionHeader}>
+              <Typography variant="caption" color={theme.textSecondary} style={styles.sectionTitle}>
+                {quickLinksHeader.title}
+              </Typography>
+            </View>
           )}
-          <Typography variant="body" color={theme.textPrimary} style={styles.mcqQuestion}>
-            {dailyMcqData.question}
-          </Typography>
-
-          {/* Interactive Radio Options */}
-          <View style={styles.mcqOptionsList}>
-            {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;
-              }
+
+          <View style={styles.quickLinksContainer}>
+            {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 (
                 <TouchableOpacity
-                  key={idx}
-                  activeOpacity={0.8}
-                  disabled={isTeaserAnswered}
-                  style={[styles.mcqOptionRow, { backgroundColor: rowBg }]}
-                  onPress={() => setSelectedTeaserOption(idx)}
+                  key={link.id}
+                  style={styles.quickLinkBoxItem}
+                  onPress={() => {
+                    link.onPress?.();
+                    onPressQuickLink?.(link.id);
+                  }}
                 >
-                  <View style={[styles.mcqRadioOuter, { borderColor: circleBorder }]}>
-                    {isSelected || (isTeaserAnswered && isCorrectAnswer) ? (
-                      <View style={[styles.mcqRadioInner, { backgroundColor: circleFill }]} />
-                    ) : null}
+                  <View style={[styles.quickLinkRect, { backgroundColor: bgCol }]}>
+                    <Icon name={link.icon as IconName} size={24} color={link.color} />
+                    <Typography variant="caption" color={theme.textPrimary} style={styles.quickLinkLabelTwoLines}>
+                      {link.label}
+                    </Typography>
                   </View>
-                  <Typography variant="body" color={theme.textPrimary} style={styles.mcqOptionText}>
-                    {option}
-                  </Typography>
                 </TouchableOpacity>
-              );
+              )
             })}
           </View>
 
-          <TouchableOpacity onPress={onPressMcqViewDetails} style={styles.mcqViewDetailsBtn}>
-            <Typography variant="h3" color={theme.primary} bold>
-              View Details
-            </Typography>
-          </TouchableOpacity>
-        </Card>
+          {/* Brain Teasers Section */}
+          {dailyMcqHeader.show && (
+            <View style={styles.sectionHeaderCentered}>
+              <Typography variant="caption" bold color={theme.textSecondary} style={styles.sectionTitle}>
+                {dailyMcqHeader.title}
+              </Typography>
+            </View>
+          )}
 
-        {/* Get Started Section */}
-        {getStartedHeader.show && (
-          <View style={styles.sectionHeader}>
-            <Typography variant="caption" bold color={theme.textSecondary} style={styles.sectionTitle}>
-              {getStartedHeader.title}
+          <View style={styles.mcqContainer}>
+            <Typography variant="body" color={theme.textPrimary} style={styles.mcqQuestion}>
+              {dailyMcqData.question}
             </Typography>
+
+            <View style={styles.mcqOptionsList}>
+              {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 (
+                  <TouchableOpacity
+                    key={idx}
+                    activeOpacity={0.8}
+                    style={[styles.mcqOptionBox, { backgroundColor: rowBg, borderColor: rowBorder }]}
+                    onPress={() => setSelectedTeaserOption(idx)}
+                  >
+                    <View style={[styles.mcqCheckCircle, { borderColor: isSelected ? '#10B981' : '#CBD5E1', backgroundColor: isSelected ? '#10B981' : 'transparent' }]}>
+                      {isSelected && <Icon name="check-circle" size={12} color="#FFFFFF" />}
+                    </View>
+                    <Typography variant="body" color={textColor} style={styles.mcqOptionTextStr}>
+                      {option}
+                    </Typography>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+
+            <TouchableOpacity onPress={onPressMcqViewDetails} style={styles.mcqViewDetailsBtn}>
+              <Typography variant="body" color="#10B981" bold>
+                View Details
+              </Typography>
+            </TouchableOpacity>
           </View>
-        )}
-
-        <Card bordered onPress={onPressGetStarted} style={styles.getStartedCard}>
-          <View style={styles.getStartedRow}>
-            <Image source={{ uri: getStartedData.avatarUrl }} style={styles.doctorAvatar} />
-            <View style={styles.getStartedInfo}>
-              <Typography variant="h3" bold color={theme.textPrimary}>
-                {getStartedData.title}
+
+          {/* Get Started Section */}
+          {getStartedHeader.show && (
+            <View style={styles.sectionHeader}>
+              <Typography variant="caption" color={theme.textSecondary} style={styles.sectionTitle}>
+                {getStartedHeader.title}
               </Typography>
-              <Typography variant="caption" color={theme.textSecondary}>
-                {getStartedData.subtitle}
+            </View>
+          )}
+
+          <TouchableOpacity onPress={onPressGetStarted} activeOpacity={0.8}>
+            <View style={styles.getStartedCardMockup}>
+              <View style={styles.getStartedRow}>
+                <View style={styles.getStartedIconBox}>
+                  <Image source={{uri: 'https://cdn-icons-png.flaticon.com/512/3004/3004116.png'}} style={styles.anatomyIcon} />
+                  <View style={styles.playIconBadge}>
+                    <Icon name="play" size={14} color="#F59E0B" />
+                  </View>
+                </View>
+                <View style={styles.getStartedInfo}>
+                  <Typography variant="body" bold color={theme.textPrimary}>
+                    {getStartedData.title}
+                  </Typography>
+                  <Typography variant="caption" color={theme.textSecondary}>
+                    {getStartedData.subtitle}
+                  </Typography>
+                </View>
+                <Icon name="chevron-right" size={20} color={theme.textSecondary} />
+              </View>
+            </View>
+          </TouchableOpacity>
+
+          {/* Continue Learning Section */}
+          {continueLearningHeader.show && (
+            <View style={styles.sectionHeader}>
+              <Typography variant="caption" color={theme.textSecondary} style={styles.sectionTitle}>
+                {continueLearningHeader.title}
               </Typography>
             </View>
-            <Icon name="chevron-right" size={16} color={theme.textSecondary} />
-          </View>
-        </Card>
+          )}
 
-        {/* Continue Learning Section */}
-        {continueLearningHeader.show && (
-          <View style={styles.sectionHeader}>
-            <Typography variant="caption" bold color={theme.textSecondary} style={styles.sectionTitle}>
-              {continueLearningHeader.title}
-            </Typography>
-          </View>
-        )}
+          <View style={styles.continueLearningList}>
+            {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'; }
 
-        <View style={styles.continueLearningList}>
-          {continueLearningData.map((item) => (
-            <TouchableOpacity
-              key={item.id}
-              activeOpacity={0.8}
-              onPress={() => onPressContinueLearning?.(item.id)}
-            >
-              <Card bordered style={styles.continueLearningCard}>
-                <View style={styles.continueLearningRow}>
-                  <View style={[styles.subjectIconBox, { backgroundColor: theme.secondary }]}>
-                    <Icon name={item.icon as IconName} size={20} color={theme.primary} />
-                  </View>
-                  <View style={styles.continueLearningInfo}>
-                    <View style={styles.continueLearningTextRow}>
-                      <Typography variant="h3" bold color={theme.textPrimary}>
-                        {item.title}
-                      </Typography>
-                    </View>
-                    <ProgressBar
-                      progress={item.progressPercentage / 100}
-                      color="#0891B2"
-                      height={6}
-                      style={styles.continueProgressBar}
-                    />
-                    <View style={styles.continueStatsRow}>
-                      <Typography variant="caption" color={theme.textSecondary}>
-                        {item.completedModules} / {item.totalModules} Modules
-                      </Typography>
-                      <Typography variant="caption" bold color={theme.textPrimary}>
-                        {item.progressPercentage}%
-                      </Typography>
+              return (
+                <TouchableOpacity
+                  key={item.id}
+                  activeOpacity={0.8}
+                  onPress={() => onPressContinueLearning?.(item.id)}
+                >
+                  <View style={styles.continueCardMockup}>
+                    <View style={styles.continueLearningRow}>
+                      <View style={[styles.continueIconBox, { backgroundColor: iconBg }]}>
+                        {iconUrl ? <Image source={{uri: iconUrl}} style={{width: 24, height: 24}} /> : <Icon name={item.icon as IconName} size={20} color={theme.primary} />}
+                      </View>
+                      <View style={styles.continueLearningInfo}>
+                        <Typography variant="body" bold color={theme.textPrimary} style={{marginBottom: 6}}>
+                          {item.title}
+                        </Typography>
+                        
+                        <View style={styles.progressBarBgMockup}>
+                          <View style={[styles.progressBarFillMockup, { width: `${item.progressPercentage}%`, backgroundColor: barColor }]} />
+                        </View>
+                        
+                        <View style={styles.continueStatsRow}>
+                          <Typography variant="caption" color={theme.textSecondary}>
+                            {item.completedModules}/{item.totalModules} Modules
+                          </Typography>
+                          <Typography variant="caption" color={theme.textSecondary}>
+                            {item.progressPercentage}%
+                          </Typography>
+                        </View>
+                      </View>
                     </View>
                   </View>
-                </View>
-              </Card>
-            </TouchableOpacity>
-          ))}
-        </View>
+                </TouchableOpacity>
+              )
+            })}
+          </View>
 
-        {/* Referral Card Banner */}
-        <Card style={styles.referralCard}>
-          <View style={styles.referralRow}>
-            <View style={styles.referralLeft}>
-              <View style={styles.referralIconContainer}>
-                <Icon name="share" size={16} color="#FFFFFF" />
+          {/* Referral Card Banner */}
+          <TouchableOpacity onPress={onPressShareApp} activeOpacity={0.9} style={{marginTop: 8}}>
+            <View style={styles.referralBannerMockup}>
+              <View style={styles.referralIconCircle}>
+                <Icon name="share" size={18} color="#FFFFFF" />
+              </View>
+              <View style={styles.referralTextCol}>
+                <Typography variant="body" bold color="#1E293B">
+                  {referralData.text}
+                </Typography>
+              </View>
+              <View style={styles.shareAppBtnWhite}>
+                <Typography variant="caption" bold color="#1E293B">
+                  {referralData.buttonText}
+                </Typography>
               </View>
-              <Typography variant="body" bold color="#1E293B" style={styles.referralText}>
-                {referralData.text}
-              </Typography>
             </View>
-            <TouchableOpacity
-              onPress={onPressShareApp}
-              style={styles.referralButton}
-            >
-              <Typography variant="caption" bold color="#1E293B">
-                {referralData.buttonText}
-              </Typography>
-            </TouchableOpacity>
-          </View>
-        </Card>
+          </TouchableOpacity>
 
+        </View>
       </ScrollView>
     </SafeAreaView>
   );
@@ -504,25 +445,30 @@ 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: 8,
+    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,
+    marginRight: 8,
   },
   appNameRow: {
     flexDirection: 'row',
@@ -540,35 +486,39 @@ 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,
+    top: -2,
+    right: 2,
+    minWidth: 16,
     height: 16,
     borderRadius: 8,
+    backgroundColor: '#EF4444',
     justifyContent: 'center',
     alignItems: 'center',
+    borderWidth: 1.5,
+    borderColor: '#FFFFFF',
+    paddingHorizontal: 2,
   },
   badgeText: {
     fontSize: 9,
-    fontWeight: '700',
+    fontWeight: 'bold',
+    lineHeight: 11,
   },
   profileContainer: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
     overflow: 'hidden',
+    marginLeft: 6,
   },
   profileAvatar: {
     width: '100%',
@@ -576,157 +526,154 @@ const styles = StyleSheet.create({
   },
   scrollContent: {
     paddingHorizontal: 16,
-    paddingBottom: 32,
-  },
-  promoBanner: {
-    flexDirection: 'row',
-    borderRadius: 20,
-    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,
+    paddingVertical: 12,
+    paddingBottom: 40,
   },
-  qbankProgressCard: {
-    padding: 16,
-    marginTop: 8,
-    marginBottom: 4,
-    borderRadius: 16,
+  progressContainer: {
+    backgroundColor: '#E8F5E9',
+    padding: 12,
+    borderRadius: 12,
+    marginBottom: 16,
   },
-  qbankProgressRow: {
+  progressRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     marginBottom: 12,
   },
-  qbankProgressTextContainer: {
+  progressTextContainer: {
     flex: 1,
   },
-  percentageText: {
-    fontSize: 24,
-    lineHeight: 28,
+  percentageTextLarge: {
+    fontSize: 32,
+    lineHeight: 38,
   },
-  qbankProgressBar: {
-    marginTop: 4,
+  modulesCompletedText: {
+    fontSize: 10,
+    opacity: 0.8,
+  },
+  trackProgressBtn: {
+    backgroundColor: '#059669',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    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: 16,
   },
   actionPill: {
     flex: 1,
+    padding: 12,
+    borderRadius: 12,
+  },
+  actionPillContent: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 14,
-    borderRadius: 14,
-    marginHorizontal: 4,
+    width: '100%',
   },
-  actionPillIconContainer: {
+  actionPillIconLeft: {
     width: 28,
     height: 28,
     borderRadius: 14,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: 'rgba(255,255,255,0.25)',
     justifyContent: 'center',
     alignItems: 'center',
-    marginRight: 10,
   },
-  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,
+    lineHeight: 14,
+    marginTop: 8,
   },
-  mcqCard: {
-    padding: 16,
-    borderRadius: 16,
-    overflow: 'hidden',
-    marginTop: 4,
-    marginBottom: 4,
-  },
-  mcqImage: {
-    width: '100%',
-    height: 140,
+  mcqContainer: {
+    backgroundColor: '#FFFFFF',
+    padding: 12,
     borderRadius: 12,
-    marginBottom: 12,
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
   },
   mcqQuestion: {
-    fontSize: 14,
-    lineHeight: 20,
+    fontSize: 13,
+    lineHeight: 18,
     fontWeight: '500',
     marginBottom: 12,
   },
   mcqOptionsList: {
     marginBottom: 8,
   },
-  mcqOptionRow: {
+  mcqOptionBox: {
     flexDirection: 'row',
     alignItems: 'center',
     paddingVertical: 10,
-    paddingHorizontal: 8,
+    paddingHorizontal: 10,
     borderRadius: 8,
-    marginBottom: 6,
+    borderWidth: 1,
+    marginBottom: 8,
   },
-  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: {
@@ -734,23 +681,41 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     borderTopColor: '#E2E8F0',
     paddingTop: 12,
-    marginTop: 8,
+    marginTop: 4,
   },
-  getStartedCard: {
+  getStartedCardMockup: {
+    backgroundColor: '#FFFFFF',
     padding: 12,
-    borderRadius: 16,
-    marginTop: 4,
-    marginBottom: 4,
+    borderRadius: 12,
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
   },
   getStartedRow: {
     flexDirection: 'row',
     alignItems: 'center',
   },
-  doctorAvatar: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
+  getStartedIconBox: {
+    width: 42,
+    height: 42,
+    borderRadius: 10,
+    backgroundColor: '#FFF7ED',
+    justifyContent: 'center',
+    alignItems: 'center',
     marginRight: 12,
+    position: 'relative',
+  },
+  anatomyIcon: {
+    width: 24,
+    height: 24,
+  },
+  playIconBadge: {
+    position: 'absolute',
+    bottom: -6,
+    right: -6,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 10,
+    padding: 2,
   },
   getStartedInfo: {
     flex: 1,
@@ -758,16 +723,19 @@ const styles = StyleSheet.create({
   continueLearningList: {
     marginTop: 4,
   },
-  continueLearningCard: {
+  continueCardMockup: {
+    backgroundColor: '#FFFFFF',
     padding: 12,
-    marginBottom: 6,
-    borderRadius: 16,
+    marginBottom: 10,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
   },
   continueLearningRow: {
     flexDirection: 'row',
     alignItems: 'center',
   },
-  subjectIconBox: {
+  continueIconBox: {
     width: 40,
     height: 40,
     borderRadius: 10,
@@ -778,76 +746,47 @@ const styles = StyleSheet.create({
   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: 12,
+    borderRadius: 12,
   },
-  referralIconContainer: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    backgroundColor: '#EA580C', // Orange sharing accent
+  referralIconCircle: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: '#F59E0B',
     justifyContent: 'center',
     alignItems: 'center',
     marginRight: 10,
   },
-  referralText: {
-    fontSize: 12,
-    lineHeight: 16,
+  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,
   },
 });