react-native-elearn-ui 0.1.0 → 0.1.2

package/src/screens/HomeScreen.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   View,
   ScrollView,
@@ -7,154 +7,464 @@ import {
   SafeAreaView,
   StatusBar,
   Image,
+  Dimensions,
 } from 'react-native';
-import { useElearnConfig } from '../context/ElearnConfigContext';
 import { useTheme } from '../context/ThemeContext';
-import { Typography, Card, CircularProgress, Icon } from '../components';
+import { Typography, Card, ProgressBar, Icon } from '../components';
+import type { IconName } from '../components';
+import type { HomeScreenParams } from '../types';
 
-export const HomeScreen: React.FC = () => {
-  const { config, callbacks, getString } = useElearnConfig();
+interface HomeScreenProps {
+  params?: HomeScreenParams;
+  onPressNotification?: () => void;
+  onPressAvatar?: () => void;
+  onPressTrackQbank?: () => void;
+  onPressPearls?: () => void;
+  onPressUpdates?: () => void;
+  onPressQuickLink?: (linkId: string) => void;
+  onPressGetStarted?: () => void;
+  onPressContinueLearning?: (subjectId: string) => void;
+  onPressShareApp?: () => void;
+  onPressMcqViewDetails?: () => void;
+}
+
+export const HomeScreen: React.FC<HomeScreenProps> = ({
+  params,
+  onPressNotification,
+  onPressAvatar,
+  onPressTrackQbank,
+  onPressPearls,
+  onPressUpdates,
+  onPressQuickLink,
+  onPressGetStarted,
+  onPressContinueLearning,
+  onPressShareApp,
+  onPressMcqViewDetails,
+}) => {
   const theme = useTheme();
 
-  const dailyQuiz = config.dailyQuiz;
-  const courses = config.courses || [];
+  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 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 handleDailyQuizPress = () => {
-    if (dailyQuiz && callbacks.onStartQuiz) {
-      callbacks.onStartQuiz(
-        dailyQuiz.id,
-        dailyQuiz.questions,
-        dailyQuiz.title
-      );
+  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 progressData = params?.progress || {
+    percentage: 25,
+    text: 'Modules Completed of 829',
+    totalModules: 829,
+    buttonText: 'Track Qbank',
+  };
+
+  const actionsData = params?.actions || {
+    pearlsLabel: 'Pearls',
+    updatesLabel: 'Updates',
+  };
+
+  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' },
+  ];
+
+  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',
+    ],
+    correctIndex: 0,
+  };
+
+  const getStartedData = params?.getStarted || {
+    title: 'Anatomy',
+    subtitle: 'Dr. Dharma Shanker',
+    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, icon: 'dna' },
+    { id: 'subj_physio', title: 'Physiology', progressPercentage: 88, completedModules: 59, totalModules: 63, icon: 'flask' },
+  ];
+
+  const referralData = params?.referralBanner || {
+    text: 'Invite a friend to RXDX, learn together, grow together.',
+    buttonText: 'Share App',
   };
 
   return (
     <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
       <StatusBar barStyle="dark-content" />
-      
-      {/* Header */}
-      <View style={styles.header}>
-        <View style={styles.headerLeft}>
-          <TouchableOpacity style={styles.avatarContainer}>
-            <View style={[styles.avatarPlaceholder, { backgroundColor: theme.secondary }]}>
-              <Icon name="user" size={20} color={theme.primary} />
-            </View>
-          </TouchableOpacity>
+
+      {/* Header Panel */}
+      <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>
-            <Typography variant="bodyLight" color={theme.textSecondary}>
-              {getString('homeHeaderTitle')}
-            </Typography>
-            <Typography variant="h2" bold>
-              Dr. Kimberly
+            <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>
+            </View>
+            <Typography variant="caption" color={theme.textSecondary} style={styles.appSubName}>
+              {headerData.subName}
             </Typography>
           </View>
-        </View>
-        <TouchableOpacity style={[styles.iconButton, { borderColor: theme.border }]}>
-          <Icon name="bell" size={20} color={theme.textPrimary} />
-          <View style={[styles.badge, { backgroundColor: theme.danger }]} />
         </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 }]}>
+                <Typography variant="caption" style={styles.badgeText} color="#FFFFFF">
+                  {headerData.notificationCount}
+                </Typography>
+              </View>
+            ) : null}
+          </TouchableOpacity>
+
+          <TouchableOpacity onPress={onPressAvatar} style={styles.profileContainer}>
+            <Image source={{ uri: headerData.avatarUrl }} style={styles.profileAvatar} />
+          </TouchableOpacity>
+        </View>
       </View>
 
       <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
         
-        {/* Daily Quiz Card */}
-        {dailyQuiz && (
-          <TouchableOpacity activeOpacity={0.9} onPress={handleDailyQuizPress}>
-            <Card style={[styles.dailyQuizCard, { backgroundColor: '#0284C7' }]}>
-              <View style={styles.dailyQuizRow}>
-                <View style={styles.dailyQuizLeft}>
-                  <Typography variant="h3" color="#FFFFFF" bold>
-                    {getString('dailyQuizTitle')}
-                  </Typography>
-                  <Typography variant="caption" color="#E0F2FE" style={styles.dailyQuizDesc}>
-                    {getString('dailyQuizSubtitle')}
-                  </Typography>
-                  <View style={styles.trackQuickBadge}>
-                    <Typography variant="caption" color="#0284C7" bold>
-                      {getString('trackQuickLabel')}
-                    </Typography>
+        {/* 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 }]}>
+                    <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>
-                </View>
-                
-                <View style={styles.dailyQuizRight}>
-                  <CircularProgress
-                    progress={dailyQuiz.progressPercentage / 100}
-                    size={68}
-                    strokeWidth={6}
-                    color="#FFFFFF"
-                    backgroundColor="rgba(255, 255, 255, 0.25)"
-                    textStyle={{ color: '#FFFFFF', fontSize: 13 }}
-                  />
-                </View>
-              </View>
-            </Card>
+                </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,
+                    },
+                  ]}
+                />
+              ))}
+            </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>
+            <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>
-        )}
 
-        {/* Subjects Tabs */}
+          <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 */}
         <View style={styles.sectionHeader}>
-          <Typography variant="h2" bold>
-            {getString('subjectsTitle')}
+          <Typography variant="caption" bold color={theme.textSecondary} style={styles.sectionTitle}>
+            QUICK LINKS
           </Typography>
         </View>
 
-        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.subjectsContainer}>
-          {courses.map((course) => {
-            let iconName: any = 'flask';
-            if (course.title.toLowerCase().includes('physic')) iconName = 'atom';
-            if (course.title.toLowerCase().includes('biolog')) iconName = 'dna';
-            if (course.title.toLowerCase().includes('anatom')) iconName = 'book-open';
-
-            return (
-              <TouchableOpacity
-                key={course.id}
-                style={[
-                  styles.subjectTab,
-                  { backgroundColor: theme.cardBackground, borderColor: theme.border },
-                ]}
-                onPress={() => callbacks.onSelectCourse?.(course)}
-              >
-                <View style={[styles.subjectIconWrap, { backgroundColor: theme.secondary }]}>
-                  <Icon name={iconName} size={20} color={theme.primary} />
-                </View>
-                <Typography variant="label" bold style={styles.subjectText}>
-                  {course.title}
-                </Typography>
-              </TouchableOpacity>
-            );
-          })}
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.quickLinksScroll}>
+          {quickLinksData.map((link) => (
+            <TouchableOpacity
+              key={link.id}
+              style={styles.quickLinkItem}
+              onPress={() => {
+                link.onPress?.();
+                onPressQuickLink?.(link.id);
+              }}
+            >
+              <View style={[styles.quickLinkCircle, { backgroundColor: `${link.color}15` }]}>
+                <Icon name={link.icon as IconName} size={20} color={link.color} />
+              </View>
+              <Typography variant="caption" color={theme.textPrimary} bold style={styles.quickLinkLabel}>
+                {link.label}
+              </Typography>
+            </TouchableOpacity>
+          ))}
         </ScrollView>
 
-        {/* Popular Topics Section */}
+        {/* Brain Teasers Section */}
         <View style={styles.sectionHeader}>
-          <Typography variant="h2" bold>
-            {getString('popularTopicsTitle')}
+          <Typography variant="caption" bold color={theme.textSecondary} style={styles.sectionTitle}>
+            BRAIN TEASERS OF THE DAY
           </Typography>
         </View>
 
-        {/* Mocking a beautiful content card as shown in the UI mockup */}
-        <Card bordered style={styles.infoCard}>
-          <Image
-            source={{ uri: 'https://images.unsplash.com/photo-1576086213369-97a306d36557?q=80&w=600&auto=format&fit=crop' }}
-            style={styles.infoCardImage}
-            resizeMode="cover"
-          />
-          <View style={styles.infoCardContent}>
-            <View style={styles.infoCardHeader}>
-              <Typography variant="caption" color={theme.primary} bold>
-                HISTOLOGY
+        <Card bordered style={styles.mcqCard}>
+          {dailyMcqData.imageUrl && (
+            <Image source={{ uri: dailyMcqData.imageUrl }} style={styles.mcqImage} />
+          )}
+          <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;
+              }
+
+              return (
+                <TouchableOpacity
+                  key={idx}
+                  activeOpacity={0.8}
+                  disabled={isTeaserAnswered}
+                  style={[styles.mcqOptionRow, { backgroundColor: rowBg }]}
+                  onPress={() => setSelectedTeaserOption(idx)}
+                >
+                  <View style={[styles.mcqRadioOuter, { borderColor: circleBorder }]}>
+                    {isSelected || (isTeaserAnswered && isCorrectAnswer) ? (
+                      <View style={[styles.mcqRadioInner, { backgroundColor: circleFill }]} />
+                    ) : null}
+                  </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>
+
+        {/* Get Started Section */}
+        <View style={styles.sectionHeader}>
+          <Typography variant="caption" bold color={theme.textSecondary} style={styles.sectionTitle}>
+            GET STARTED
+          </Typography>
+        </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}
               </Typography>
               <Typography variant="caption" color={theme.textSecondary}>
-                12 min read
+                {getStartedData.subtitle}
               </Typography>
             </View>
-            <Typography variant="h3" bold style={styles.infoCardTitle}>
-              Tissue structures under microscope examination
-            </Typography>
-            <Typography variant="body" color={theme.textSecondary} numberOfLines={2}>
-              Learn the identification of epithelial tissues, connective tissues, and muscle structures for medical examination prep.
-            </Typography>
+            <Icon name="chevron-right" size={16} color={theme.textSecondary} />
+          </View>
+        </Card>
+
+        {/* Continue Learning Section */}
+        <View style={styles.sectionHeader}>
+          <Typography variant="caption" bold color={theme.textSecondary} style={styles.sectionTitle}>
+            CONTINUE LEARNING
+          </Typography>
+        </View>
+
+        <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>
+                    </View>
+                  </View>
+                </View>
+              </Card>
+            </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" />
+              </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>
 
@@ -171,121 +481,345 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingHorizontal: 20,
-    paddingVertical: 16,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
   },
-  headerLeft: {
+  headerDropdown: {
     flexDirection: 'row',
     alignItems: 'center',
   },
-  avatarContainer: {
-    marginRight: 12,
-  },
-  avatarPlaceholder: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
+  appLogo: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
     justifyContent: 'center',
     alignItems: 'center',
+    marginRight: 10,
   },
-  iconButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
+  appNameRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  chevronWrap: {
+    transform: [{ rotate: '-90deg' }],
+    marginLeft: 6,
+  },
+  appSubName: {
+    fontSize: 11,
+    marginTop: 1,
+  },
+  headerRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconBtn: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
     borderWidth: 1,
     justifyContent: 'center',
     alignItems: 'center',
     position: 'relative',
+    marginRight: 10,
   },
   badge: {
     position: 'absolute',
-    top: 10,
-    right: 10,
-    width: 8,
-    height: 8,
-    borderRadius: 4,
+    top: -4,
+    right: -4,
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  badgeText: {
+    fontSize: 9,
+    fontWeight: '700',
+  },
+  profileContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    overflow: 'hidden',
+  },
+  profileAvatar: {
+    width: '100%',
+    height: '100%',
   },
   scrollContent: {
-    paddingHorizontal: 20,
-    paddingBottom: 24,
+    paddingHorizontal: 16,
+    paddingBottom: 32,
   },
-  dailyQuizCard: {
-    marginVertical: 12,
-    padding: 20,
+  promoBanner: {
+    flexDirection: 'row',
     borderRadius: 20,
+    padding: 16,
+    marginTop: 12,
+    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: 12,
+    borderRadius: 16,
   },
-  dailyQuizRow: {
+  qbankProgressRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
+    marginBottom: 12,
   },
-  dailyQuizLeft: {
+  qbankProgressTextContainer: {
     flex: 1,
-    paddingRight: 16,
   },
-  dailyQuizDesc: {
-    marginTop: 6,
-    opacity: 0.9,
+  percentageText: {
+    fontSize: 24,
+    lineHeight: 28,
   },
-  trackQuickBadge: {
-    backgroundColor: '#FFFFFF',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 16,
-    alignSelf: 'flex-start',
-    marginTop: 14,
+  qbankProgressBar: {
+    marginTop: 4,
   },
-  dailyQuizRight: {
+  actionsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 12,
+  },
+  actionPill: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 14,
+    borderRadius: 14,
+    marginHorizontal: 4,
+  },
+  actionPillIconContainer: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: '#FFFFFF',
     justifyContent: 'center',
     alignItems: 'center',
+    marginRight: 10,
+  },
+  actionPillText: {
+    fontSize: 15,
   },
   sectionHeader: {
     marginTop: 20,
-    marginBottom: 12,
+    marginBottom: 8,
+  },
+  sectionTitle: {
+    fontSize: 12,
+    letterSpacing: 0.8,
   },
-  subjectsContainer: {
+  quickLinksScroll: {
     paddingVertical: 4,
   },
-  subjectTab: {
+  quickLinkItem: {
+    alignItems: 'center',
+    marginRight: 20,
+    width: 72,
+  },
+  quickLinkCircle: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 6,
+  },
+  quickLinkLabel: {
+    textAlign: 'center',
+    fontSize: 11,
+  },
+  mcqCard: {
+    padding: 16,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  mcqImage: {
+    width: '100%',
+    height: 140,
+    borderRadius: 12,
+    marginBottom: 12,
+  },
+  mcqQuestion: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '500',
+    marginBottom: 12,
+  },
+  mcqOptionsList: {
+    marginBottom: 8,
+  },
+  mcqOptionRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 16,
     paddingVertical: 10,
-    borderRadius: 20,
-    borderWidth: 1,
-    marginRight: 12,
+    paddingHorizontal: 8,
+    borderRadius: 8,
+    marginBottom: 6,
   },
-  subjectIconWrap: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
+  mcqRadioOuter: {
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    borderWidth: 1.5,
     justifyContent: 'center',
     alignItems: 'center',
-    marginRight: 8,
+    marginRight: 10,
   },
-  subjectText: {
-    fontSize: 14,
+  mcqRadioInner: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
   },
-  infoCard: {
-    padding: 0,
-    overflow: 'hidden',
+  mcqOptionText: {
+    fontSize: 13,
+    flex: 1,
+  },
+  mcqViewDetailsBtn: {
+    alignItems: 'center',
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
+    paddingTop: 12,
     marginTop: 8,
   },
-  infoCardImage: {
-    width: '100%',
-    height: 160,
+  getStartedCard: {
+    padding: 12,
+    borderRadius: 16,
   },
-  infoCardContent: {
-    padding: 16,
+  getStartedRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  doctorAvatar: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    marginRight: 12,
+  },
+  getStartedInfo: {
+    flex: 1,
+  },
+  continueLearningList: {
+    marginTop: 4,
+  },
+  continueLearningCard: {
+    padding: 12,
+    marginBottom: 10,
+    borderRadius: 16,
+  },
+  continueLearningRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  subjectIconBox: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+  },
+  continueLearningInfo: {
+    flex: 1,
   },
-  infoCardHeader: {
+  continueLearningTextRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     marginBottom: 6,
   },
-  infoCardTitle: {
-    marginBottom: 8,
-    lineHeight: 22,
+  continueProgressBar: {
+    height: 4,
+    marginBottom: 6,
+  },
+  continueStatsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  referralCard: {
+    marginTop: 16,
+    padding: 14,
+    borderRadius: 16,
+    backgroundColor: '#FDE047', // RxDx Amber
+  },
+  referralRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  referralLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    paddingRight: 12,
+  },
+  referralIconContainer: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: '#EA580C', // Orange sharing accent
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 10,
+  },
+  referralText: {
+    fontSize: 12,
+    lineHeight: 16,
+    flex: 1,
+  },
+  referralButton: {
+    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: {
+    alignItems: 'center',
+  },
+  dotsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  dot: {
+    height: 6,
+    borderRadius: 3,
+    marginHorizontal: 3,
   },
 });