|
| 1 | +import React from "react"; |
| 2 | +import { |
| 3 | + View, |
| 4 | + Text, |
| 5 | + StyleSheet, |
| 6 | + TouchableOpacity, |
| 7 | + ScrollView, |
| 8 | +} from "react-native"; |
| 9 | +import { SafeAreaView } from "react-native-safe-area-context"; |
| 10 | +import { Ionicons } from "@expo/vector-icons"; |
| 11 | +import { COLORS } from "../src/constants/colors"; |
| 12 | +import { useRouter } from "expo-router"; |
| 13 | + |
| 14 | +const Section = ({ title, children, icon }: any) => ( |
| 15 | + <View style={styles.section}> |
| 16 | + <View style={styles.sectionHeader}> |
| 17 | + <View style={styles.iconContainer}> |
| 18 | + <Ionicons name={icon} size={20} color={COLORS.primary} /> |
| 19 | + </View> |
| 20 | + <Text style={styles.sectionTitle}>{title}</Text> |
| 21 | + </View> |
| 22 | + <Text style={styles.sectionText}>{children}</Text> |
| 23 | + </View> |
| 24 | +); |
| 25 | + |
| 26 | +export default function AboutBlinksScreen() { |
| 27 | + const router = useRouter(); |
| 28 | + |
| 29 | + return ( |
| 30 | + <SafeAreaView style={styles.container}> |
| 31 | + <View style={styles.header}> |
| 32 | + <TouchableOpacity |
| 33 | + onPress={() => router.back()} |
| 34 | + style={styles.backButton} |
| 35 | + > |
| 36 | + <Ionicons name="arrow-back" size={24} color={COLORS.black} /> |
| 37 | + </TouchableOpacity> |
| 38 | + <Text style={styles.headerTitle}>About Blinks</Text> |
| 39 | + <View style={{ width: 24 }} /> |
| 40 | + </View> |
| 41 | + |
| 42 | + <ScrollView |
| 43 | + contentContainerStyle={styles.scrollContent} |
| 44 | + showsVerticalScrollIndicator={false} |
| 45 | + > |
| 46 | + {/* Hero Section */} |
| 47 | + <View style={styles.heroSection}> |
| 48 | + <Text style={styles.heroTitle}>Blinks</Text> |
| 49 | + <Text style={styles.heroSubtitle}>Fast. Secure. Seamless.</Text> |
| 50 | + <Text style={styles.heroDescription}> |
| 51 | + Blinks is a next-generation payment and transfer platform designed |
| 52 | + to make moving money as easy as sending a message. Whether you're a |
| 53 | + user sending funds to friends or a merchant accepting payments, |
| 54 | + Blinks provides the speed and reliability you need. |
| 55 | + </Text> |
| 56 | + </View> |
| 57 | + |
| 58 | + {/* Mission Section */} |
| 59 | + <Section title="Our Mission" icon="rocket-outline"> |
| 60 | + Our mission is to democratize financial access by providing a unified, |
| 61 | + borderless payment experience. We believe that everyone should have |
| 62 | + access to fast, low-cost financial services, regardless of location. |
| 63 | + </Section> |
| 64 | + |
| 65 | + {/* How It Works Section */} |
| 66 | + <Section title="How It Works" icon="settings-outline"> |
| 67 | + Blinks leverages advanced blockchain technology to ensure near-instant |
| 68 | + settlements. Simply scan a QR code, enter a Blinks ID, or tap to pay. |
| 69 | + Our intelligent routing system handles the rest, ensuring your funds |
| 70 | + reach their destination safely and efficiently. |
| 71 | + </Section> |
| 72 | + |
| 73 | + {/* Security & Transparency Section */} |
| 74 | + <Section |
| 75 | + title="Security & Transparency" |
| 76 | + icon="shield-checkmark-outline" |
| 77 | + > |
| 78 | + Security is at the heart of everything we do. Blinks uses |
| 79 | + multi-signature wallets, bank-grade encryption, and real-time |
| 80 | + monitoring to protect your assets. All transactions are transparently |
| 81 | + recorded on-chain, providing an immutable audit trail. |
| 82 | + </Section> |
| 83 | + |
| 84 | + {/* Call-to-Action Section */} |
| 85 | + <View style={styles.ctaCard}> |
| 86 | + <Text style={styles.ctaTitle}>Ready to start?</Text> |
| 87 | + <Text style={styles.ctaText}> |
| 88 | + Join thousands of users and merchants already using Blinks for their |
| 89 | + daily transactions. |
| 90 | + </Text> |
| 91 | + <TouchableOpacity |
| 92 | + style={styles.ctaButton} |
| 93 | + onPress={() => router.replace("/(personal)/home")} |
| 94 | + > |
| 95 | + <Text style={styles.ctaButtonText}>Create a Blink</Text> |
| 96 | + <Ionicons name="arrow-forward" size={18} color={COLORS.white} /> |
| 97 | + </TouchableOpacity> |
| 98 | + </View> |
| 99 | + |
| 100 | + <View style={styles.footer}> |
| 101 | + <Text style={styles.footerText}> |
| 102 | + © 2026 Blinks. All rights reserved. |
| 103 | + </Text> |
| 104 | + </View> |
| 105 | + </ScrollView> |
| 106 | + </SafeAreaView> |
| 107 | + ); |
| 108 | +} |
| 109 | + |
| 110 | +const styles = StyleSheet.create({ |
| 111 | + container: { |
| 112 | + flex: 1, |
| 113 | + backgroundColor: COLORS.white, |
| 114 | + }, |
| 115 | + header: { |
| 116 | + flexDirection: "row", |
| 117 | + alignItems: "center", |
| 118 | + justifyContent: "space-between", |
| 119 | + paddingHorizontal: 20, |
| 120 | + paddingVertical: 15, |
| 121 | + }, |
| 122 | + backButton: { |
| 123 | + padding: 5, |
| 124 | + }, |
| 125 | + headerTitle: { |
| 126 | + fontSize: 20, |
| 127 | + fontFamily: "Outfit_700Bold", |
| 128 | + color: COLORS.black, |
| 129 | + }, |
| 130 | + scrollContent: { |
| 131 | + paddingHorizontal: 20, |
| 132 | + paddingTop: 10, |
| 133 | + paddingBottom: 30, |
| 134 | + }, |
| 135 | + heroSection: { |
| 136 | + backgroundColor: COLORS.secondary, |
| 137 | + borderRadius: 24, |
| 138 | + padding: 30, |
| 139 | + alignItems: "center", |
| 140 | + marginBottom: 24, |
| 141 | + }, |
| 142 | + heroTitle: { |
| 143 | + fontSize: 36, |
| 144 | + fontFamily: "Outfit_700Bold", |
| 145 | + color: COLORS.primary, |
| 146 | + marginBottom: 4, |
| 147 | + }, |
| 148 | + heroSubtitle: { |
| 149 | + fontSize: 18, |
| 150 | + fontFamily: "Outfit_600SemiBold", |
| 151 | + color: COLORS.primary, |
| 152 | + marginBottom: 16, |
| 153 | + opacity: 0.8, |
| 154 | + }, |
| 155 | + heroDescription: { |
| 156 | + fontSize: 15, |
| 157 | + fontFamily: "Outfit_400Regular", |
| 158 | + color: COLORS.primary, |
| 159 | + textAlign: "center", |
| 160 | + lineHeight: 22, |
| 161 | + }, |
| 162 | + section: { |
| 163 | + marginBottom: 24, |
| 164 | + }, |
| 165 | + sectionHeader: { |
| 166 | + flexDirection: "row", |
| 167 | + alignItems: "center", |
| 168 | + marginBottom: 8, |
| 169 | + gap: 10, |
| 170 | + }, |
| 171 | + iconContainer: { |
| 172 | + width: 36, |
| 173 | + height: 36, |
| 174 | + borderRadius: 18, |
| 175 | + backgroundColor: "#F5F5F5", |
| 176 | + justifyContent: "center", |
| 177 | + alignItems: "center", |
| 178 | + }, |
| 179 | + sectionTitle: { |
| 180 | + fontSize: 18, |
| 181 | + fontFamily: "Outfit_700Bold", |
| 182 | + color: COLORS.black, |
| 183 | + }, |
| 184 | + sectionText: { |
| 185 | + fontSize: 14, |
| 186 | + fontFamily: "Outfit_400Regular", |
| 187 | + color: "#444", |
| 188 | + lineHeight: 22, |
| 189 | + }, |
| 190 | + ctaCard: { |
| 191 | + backgroundColor: COLORS.primary, |
| 192 | + borderRadius: 24, |
| 193 | + padding: 24, |
| 194 | + alignItems: "center", |
| 195 | + marginTop: 10, |
| 196 | + }, |
| 197 | + ctaTitle: { |
| 198 | + fontSize: 22, |
| 199 | + fontFamily: "Outfit_700Bold", |
| 200 | + color: COLORS.white, |
| 201 | + marginBottom: 8, |
| 202 | + }, |
| 203 | + ctaText: { |
| 204 | + fontSize: 14, |
| 205 | + fontFamily: "Outfit_400Regular", |
| 206 | + color: COLORS.white, |
| 207 | + textAlign: "center", |
| 208 | + opacity: 0.9, |
| 209 | + marginBottom: 20, |
| 210 | + lineHeight: 20, |
| 211 | + }, |
| 212 | + ctaButton: { |
| 213 | + backgroundColor: COLORS.black, |
| 214 | + flexDirection: "row", |
| 215 | + alignItems: "center", |
| 216 | + paddingHorizontal: 24, |
| 217 | + paddingVertical: 14, |
| 218 | + borderRadius: 12, |
| 219 | + gap: 8, |
| 220 | + }, |
| 221 | + ctaButtonText: { |
| 222 | + color: COLORS.white, |
| 223 | + fontSize: 16, |
| 224 | + fontFamily: "Outfit_600SemiBold", |
| 225 | + }, |
| 226 | + footer: { |
| 227 | + marginTop: 40, |
| 228 | + alignItems: "center", |
| 229 | + paddingBottom: 20, |
| 230 | + }, |
| 231 | + footerText: { |
| 232 | + fontSize: 12, |
| 233 | + fontFamily: "Outfit_400Regular", |
| 234 | + color: "#999", |
| 235 | + }, |
| 236 | +}); |
0 commit comments