react-native-salespanda 0.1.1 → 0.3.0

package/src/screens/HomeScreen.tsx

@@ -5,8 +5,6 @@ import {
   StyleSheet,
   TouchableOpacity,
   ScrollView,
-  Image,
-  SafeAreaView,
 } from 'react-native';
 
 interface MenuItemProps {
@@ -28,117 +26,57 @@ const MenuItem: React.FC<MenuItemProps> = ({ title, icon, onPress }) => {
 
 export default function HomeScreen() {
   return (
-    <SafeAreaView style={styles.container}>
-      {/* Header */}
-      <View style={styles.header}>
-        <TouchableOpacity style={styles.menuButton}>
-          <Text style={styles.menuIcon}>☰</Text>
-        </TouchableOpacity>
-        <Text style={styles.headerTitle}>Home Page</Text>
-        <Image
-          source={{ uri: 'https://via.placeholder.com/40x40' }}
-          style={styles.logo}
-        />
-      </View>
-
-      <ScrollView style={styles.scrollView}>
-        {/* WhatsApp Banner */}
-        <View style={styles.banner}>
-          <View style={styles.bannerContent}>
-            <Text style={styles.bannerText}>
-              Build strong relationships,{'\n'}
-              improve relations & productivity{'\n'}
-              by having conversations on{'\n'}
-              WhatsAppppppppp.
-            </Text>
-            <TouchableOpacity style={styles.startButton}>
-              <Text style={styles.startButtonText}>Start Sharing →</Text>
-            </TouchableOpacity>
-          </View>
-          <View style={styles.whatsappIconContainer}>
-            <View style={styles.whatsappIcon}>
-              <Text style={styles.whatsappText}>📱</Text>
-            </View>
+    <ScrollView style={styles.scrollView}>
+      {/* WhatsApp Banner */}
+      <View style={styles.banner}>
+        <View style={styles.bannerContent}>
+          <Text style={styles.bannerText}>
+            Build strong relationships,{'\n'}
+            improve relations & productivity{'\n'}
+            by having conversations on{'\n'}
+            WhatsAppppppppp.
+          </Text>
+          <TouchableOpacity style={styles.startButton}>
+            <Text style={styles.startButtonText}>Start Sharing →</Text>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.whatsappIconContainer}>
+          <View style={styles.whatsappIcon}>
+            <Text style={styles.whatsappText}>📱</Text>
           </View>
         </View>
+      </View>
 
-        {/* Carousel Indicators */}
-        <View style={styles.carouselIndicators}>
-          <View style={[styles.indicator, styles.activeIndicator]} />
-          <View style={styles.indicator} />
-          <View style={styles.indicator} />
-        </View>
+      {/* Carousel Indicators */}
+      <View style={styles.carouselIndicators}>
+        <View style={[styles.indicator, styles.activeIndicator]} />
+        <View style={styles.indicator} />
+        <View style={styles.indicator} />
+      </View>
 
-        {/* Menu Grid */}
-        <View style={styles.menuGrid}>
-          {/* <MenuItem title="Content Library" icon="📚" />
-          <MenuItem title="Buy Now" icon="🛒" />
-          <MenuItem title="Quiz & Calculator" icon="🧮" />
-           */}
-          <MenuItem title="Social Setup" icon="📢" />
-          <MenuItem title="Microsite Setup" icon="⚙️" />
-          <MenuItem title="Proposal" icon="📋" />
+      {/* Menu Grid */}
+      <View style={styles.menuGrid}>
+        <MenuItem title="Content Library" icon="📚" />
+        <MenuItem title="Buy Now" icon="🛒" />
+        <MenuItem title="Quiz & Calculator" icon="🧮" />
 
-          <MenuItem title="Email Campaign" icon="📧" />
-          <MenuItem title="View Microsite" icon="🎵" />
-          <MenuItem title="Import Contact" icon="📄" />
+        <MenuItem title="Social Setup" icon="📢" />
+        <MenuItem title="Microsite Setup" icon="⚙️" />
+        <MenuItem title="Proposal" icon="📋" />
 
-          <MenuItem title="Poster Of The Week" icon="🖼️" />
-          <MenuItem title="DigiCard" icon="👤" />
-          <MenuItem title="Help Videos" icon="❓" />
-        </View>
-      </ScrollView>
+        <MenuItem title="Email Campaign" icon="📧" />
+        <MenuItem title="View Microsite" icon="🎵" />
+        <MenuItem title="Import Contact" icon="📄" />
 
-      {/* Bottom Navigation */}
-      <View style={styles.bottomNav}>
-        <TouchableOpacity style={styles.navItem}>
-          <Text style={styles.navIcon}>🏠</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.navItem}>
-          <Text style={styles.navIcon}>💎</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.navItem}>
-          <Text style={styles.navIcon}>🔔</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.navItem}>
-          <Text style={styles.navIcon}>📊</Text>
-        </TouchableOpacity>
+        <MenuItem title="Poster Of The Week" icon="🖼️" />
+        <MenuItem title="DigiCard" icon="👤" />
+        <MenuItem title="Help Videos" icon="❓" />
       </View>
-    </SafeAreaView>
+    </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: 16,
-    backgroundColor: '#fff',
-    borderBottomWidth: 1,
-    borderBottomColor: '#e0e0e0',
-  },
-  menuButton: {
-    padding: 4,
-  },
-  menuIcon: {
-    fontSize: 24,
-    color: '#333',
-  },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#333',
-  },
-  logo: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-  },
   scrollView: {
     flex: 1,
   },
@@ -247,20 +185,4 @@ const styles = StyleSheet.create({
     color: '#333',
     fontWeight: '500',
   },
-  bottomNav: {
-    flexDirection: 'row',
-    backgroundColor: '#fff',
-    borderTopWidth: 1,
-    borderTopColor: '#e0e0e0',
-    paddingVertical: 8,
-    justifyContent: 'space-around',
-  },
-  navItem: {
-    flex: 1,
-    alignItems: 'center',
-    paddingVertical: 8,
-  },
-  navIcon: {
-    fontSize: 24,
-  },
 });

package/src/screens/NotificationsScreen.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+  TouchableOpacity,
+} from 'react-native';
+
+interface NotificationItemProps {
+  title: string;
+  message: string;
+  time: string;
+  unread?: boolean;
+}
+
+const NotificationItem: React.FC<NotificationItemProps> = ({
+  title,
+  message,
+  time,
+  unread = false,
+}) => {
+  return (
+    <TouchableOpacity
+      style={[styles.notificationItem, unread && styles.unreadItem]}
+    >
+      <View style={styles.notificationContent}>
+        <Text style={styles.notificationTitle}>{title}</Text>
+        <Text style={styles.notificationMessage}>{message}</Text>
+        <Text style={styles.notificationTime}>{time}</Text>
+      </View>
+      {unread && <View style={styles.unreadDot} />}
+    </TouchableOpacity>
+  );
+};
+
+export default function NotificationsScreen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>Notifications</Text>
+      </View>
+      <ScrollView style={styles.scrollView}>
+        <NotificationItem
+          title="New Message"
+          message="You have a new message from support team"
+          time="2 minutes ago"
+          unread={true}
+        />
+        <NotificationItem
+          title="Update Available"
+          message="A new version of the app is available"
+          time="1 hour ago"
+          unread={true}
+        />
+        <NotificationItem
+          title="Campaign Success"
+          message="Your email campaign has been sent successfully"
+          time="3 hours ago"
+        />
+        <NotificationItem
+          title="Reminder"
+          message="Don't forget to check your proposals"
+          time="Yesterday"
+        />
+        <NotificationItem
+          title="Welcome"
+          message="Welcome to Salespanda! Get started with your first campaign"
+          time="2 days ago"
+        />
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  header: {
+    backgroundColor: '#fff',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333',
+    textAlign: 'center',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  notificationItem: {
+    backgroundColor: '#fff',
+    padding: 16,
+    marginHorizontal: 16,
+    marginTop: 16,
+    borderRadius: 12,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  unreadItem: {
+    backgroundColor: '#f0f4ff',
+  },
+  notificationContent: {
+    flex: 1,
+  },
+  notificationTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 4,
+  },
+  notificationMessage: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 8,
+  },
+  notificationTime: {
+    fontSize: 12,
+    color: '#999',
+  },
+  unreadDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: '#4a148c',
+    marginLeft: 12,
+  },
+});

package/src/screens/PremiumScreen.tsx

@@ -0,0 +1,250 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+  TouchableOpacity,
+} from 'react-native';
+
+interface PlanCardProps {
+  name: string;
+  price: string;
+  features: string[];
+  highlighted?: boolean;
+}
+
+const PlanCard: React.FC<PlanCardProps> = ({
+  name,
+  price,
+  features,
+  highlighted = false,
+}) => {
+  return (
+    <View style={[styles.planCard, highlighted && styles.highlightedPlan]}>
+      {highlighted && (
+        <View style={styles.popularBadge}>
+          <Text style={styles.popularText}>MOST POPULAR</Text>
+        </View>
+      )}
+      <Text style={styles.planName}>{name}</Text>
+      <Text style={styles.planPrice}>{price}</Text>
+      <Text style={styles.planPeriod}>per month</Text>
+
+      <View style={styles.features}>
+        {features.map((feature, index) => (
+          <View key={index} style={styles.featureItem}>
+            <Text style={styles.featureIcon}>✓</Text>
+            <Text style={styles.featureText}>{feature}</Text>
+          </View>
+        ))}
+      </View>
+
+      <TouchableOpacity
+        style={[
+          styles.subscribeButton,
+          highlighted && styles.highlightedButton,
+        ]}
+      >
+        <Text
+          style={[
+            styles.subscribeButtonText,
+            highlighted && styles.highlightedButtonText,
+          ]}
+        >
+          Subscribe
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default function PremiumScreen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>Premium Plans</Text>
+      </View>
+      <ScrollView style={styles.scrollView}>
+        <View style={styles.heroSection}>
+          <Text style={styles.heroIcon}>💎</Text>
+          <Text style={styles.heroTitle}>Unlock Premium Features</Text>
+          <Text style={styles.heroDescription}>
+            Get access to exclusive features and tools to grow your business
+          </Text>
+        </View>
+
+        <View style={styles.plansContainer}>
+          <PlanCard
+            name="Basic"
+            price="$9.99"
+            features={[
+              'Up to 100 contacts',
+              '5 campaigns per month',
+              'Basic analytics',
+              'Email support',
+            ]}
+          />
+
+          <PlanCard
+            name="Professional"
+            price="$29.99"
+            features={[
+              'Up to 1,000 contacts',
+              'Unlimited campaigns',
+              'Advanced analytics',
+              'Priority support',
+              'Custom branding',
+              'API access',
+            ]}
+            highlighted={true}
+          />
+
+          <PlanCard
+            name="Enterprise"
+            price="$99.99"
+            features={[
+              'Unlimited contacts',
+              'Unlimited campaigns',
+              'Advanced analytics',
+              '24/7 dedicated support',
+              'Custom branding',
+              'API access',
+              'Custom integrations',
+              'White-label solution',
+            ]}
+          />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  header: {
+    backgroundColor: '#fff',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333',
+    textAlign: 'center',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  heroSection: {
+    backgroundColor: '#4a148c',
+    padding: 32,
+    alignItems: 'center',
+  },
+  heroIcon: {
+    fontSize: 48,
+    marginBottom: 16,
+  },
+  heroTitle: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#fff',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  heroDescription: {
+    fontSize: 14,
+    color: '#fff',
+    textAlign: 'center',
+    opacity: 0.9,
+  },
+  plansContainer: {
+    padding: 16,
+  },
+  planCard: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 24,
+    marginBottom: 16,
+    borderWidth: 2,
+    borderColor: '#e0e0e0',
+  },
+  highlightedPlan: {
+    borderColor: '#4a148c',
+    transform: [{ scale: 1.02 }],
+  },
+  popularBadge: {
+    backgroundColor: '#4a148c',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 12,
+    alignSelf: 'center',
+    marginBottom: 16,
+  },
+  popularText: {
+    color: '#fff',
+    fontSize: 10,
+    fontWeight: '700',
+  },
+  planName: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#333',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  planPrice: {
+    fontSize: 36,
+    fontWeight: '700',
+    color: '#4a148c',
+    textAlign: 'center',
+  },
+  planPeriod: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+  },
+  features: {
+    marginBottom: 24,
+  },
+  featureItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  featureIcon: {
+    fontSize: 16,
+    color: '#4a148c',
+    marginRight: 12,
+    fontWeight: '700',
+  },
+  featureText: {
+    fontSize: 14,
+    color: '#333',
+  },
+  subscribeButton: {
+    backgroundColor: '#fff',
+    borderWidth: 2,
+    borderColor: '#4a148c',
+    borderRadius: 8,
+    padding: 16,
+    alignItems: 'center',
+  },
+  highlightedButton: {
+    backgroundColor: '#4a148c',
+  },
+  subscribeButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#4a148c',
+  },
+  highlightedButtonText: {
+    color: '#fff',
+  },
+});

package/src/screens/ProfileScreen.tsx

@@ -0,0 +1,121 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  SafeAreaView,
+  TouchableOpacity,
+  Image,
+} from 'react-native';
+
+export default function ProfileScreen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>Profile</Text>
+      </View>
+      <View style={styles.content}>
+        <View style={styles.profileSection}>
+          <Image
+            source={{ uri: 'https://via.placeholder.com/100x100' }}
+            style={styles.avatar}
+          />
+          <Text style={styles.name}>John Doe</Text>
+          <Text style={styles.email}>john.doe@example.com</Text>
+        </View>
+
+        <View style={styles.section}>
+          <TouchableOpacity style={styles.menuItem}>
+            <Text style={styles.menuItemIcon}>👤</Text>
+            <Text style={styles.menuItemText}>Edit Profile</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.menuItem}>
+            <Text style={styles.menuItemIcon}>⚙️</Text>
+            <Text style={styles.menuItemText}>Settings</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.menuItem}>
+            <Text style={styles.menuItemIcon}>🔔</Text>
+            <Text style={styles.menuItemText}>Notifications</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.menuItem}>
+            <Text style={styles.menuItemIcon}>❓</Text>
+            <Text style={styles.menuItemText}>Help & Support</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.menuItem}>
+            <Text style={styles.menuItemIcon}>🚪</Text>
+            <Text style={styles.menuItemText}>Logout</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  header: {
+    backgroundColor: '#fff',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333',
+    textAlign: 'center',
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+  profileSection: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 24,
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  avatar: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    marginBottom: 16,
+  },
+  name: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 4,
+  },
+  email: {
+    fontSize: 14,
+    color: '#666',
+  },
+  section: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f0f0f0',
+  },
+  menuItemIcon: {
+    fontSize: 24,
+    marginRight: 16,
+  },
+  menuItemText: {
+    fontSize: 16,
+    color: '#333',
+  },
+});