abcc380984
- Restructured profile screens location - Updated beneficiary detail page - Updated API service - Updated all scheme files (MainScheme, ENV API, Discussion, AppStore, SysAnal) - Added PageHeader component 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
305 lines
9.2 KiB
TypeScript
305 lines
9.2 KiB
TypeScript
import React from 'react';
|
||
import {
|
||
View,
|
||
Text,
|
||
StyleSheet,
|
||
ScrollView,
|
||
TouchableOpacity,
|
||
Linking,
|
||
Image,
|
||
} from 'react-native';
|
||
import { Ionicons } from '@expo/vector-icons';
|
||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||
import { AppColors, BorderRadius, FontSizes, Spacing } from '@/constants/theme';
|
||
import { PageHeader } from '@/components/PageHeader';
|
||
|
||
interface InfoRowProps {
|
||
label: string;
|
||
value: string;
|
||
}
|
||
|
||
function InfoRow({ label, value }: InfoRowProps) {
|
||
return (
|
||
<View style={styles.infoRow}>
|
||
<Text style={styles.infoLabel}>{label}</Text>
|
||
<Text style={styles.infoValue}>{value}</Text>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
interface LinkRowProps {
|
||
icon: keyof typeof Ionicons.glyphMap;
|
||
title: string;
|
||
onPress: () => void;
|
||
}
|
||
|
||
function LinkRow({ icon, title, onPress }: LinkRowProps) {
|
||
return (
|
||
<TouchableOpacity style={styles.linkRow} onPress={onPress}>
|
||
<Ionicons name={icon} size={20} color={AppColors.primary} />
|
||
<Text style={styles.linkText}>{title}</Text>
|
||
<Ionicons name="open-outline" size={16} color={AppColors.textMuted} />
|
||
</TouchableOpacity>
|
||
);
|
||
}
|
||
|
||
export default function AboutScreen() {
|
||
const openURL = (url: string) => {
|
||
Linking.openURL(url).catch(() => {});
|
||
};
|
||
|
||
return (
|
||
<SafeAreaView style={styles.container} edges={['top', 'bottom']}>
|
||
<PageHeader title="About WellNuo" />
|
||
<ScrollView showsVerticalScrollIndicator={false}>
|
||
{/* App Logo & Name */}
|
||
<View style={styles.heroSection}>
|
||
<Image
|
||
source={require('@/assets/images/icon.png')}
|
||
style={styles.logoImage}
|
||
resizeMode="contain"
|
||
/>
|
||
<Text style={styles.appTagline}>Caring for Those Who Matter Most</Text>
|
||
</View>
|
||
|
||
{/* Version Info */}
|
||
<View style={styles.section}>
|
||
<Text style={styles.sectionTitle}>App Information</Text>
|
||
<View style={styles.card}>
|
||
<InfoRow label="Version" value="1.0.0" />
|
||
<View style={styles.infoDivider} />
|
||
<InfoRow label="Build" value="2024.12.001" />
|
||
<View style={styles.infoDivider} />
|
||
<InfoRow label="Platform" value="iOS / Android" />
|
||
<View style={styles.infoDivider} />
|
||
<InfoRow label="SDK" value="Expo SDK 54" />
|
||
<View style={styles.infoDivider} />
|
||
<InfoRow label="Last Updated" value="December 2024" />
|
||
</View>
|
||
</View>
|
||
|
||
{/* Description */}
|
||
<View style={styles.section}>
|
||
<Text style={styles.sectionTitle}>About</Text>
|
||
<View style={styles.card}>
|
||
<Text style={styles.description}>
|
||
WellNuo is a comprehensive elderly care monitoring application designed to help
|
||
families and caregivers stay connected with their loved ones. Using advanced
|
||
sensor technology and AI-powered analytics, WellNuo provides real-time insights
|
||
into daily activities, health patterns, and emergency situations.
|
||
</Text>
|
||
<Text style={styles.description}>
|
||
Our mission is to bring peace of mind to families while preserving the independence
|
||
and dignity of elderly individuals.
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* Features */}
|
||
<View style={styles.section}>
|
||
<Text style={styles.sectionTitle}>Key Features</Text>
|
||
<View style={styles.card}>
|
||
<View style={styles.featureItem}>
|
||
<View style={[styles.featureIcon, { backgroundColor: '#DBEAFE' }]}>
|
||
<Ionicons name="pulse" size={20} color="#3B82F6" />
|
||
</View>
|
||
<View style={styles.featureContent}>
|
||
<Text style={styles.featureTitle}>Real-time Monitoring</Text>
|
||
<Text style={styles.featureDescription}>24/7 activity and wellness tracking</Text>
|
||
</View>
|
||
</View>
|
||
<View style={styles.featureItem}>
|
||
<View style={[styles.featureIcon, { backgroundColor: '#FEE2E2' }]}>
|
||
<Ionicons name="warning" size={20} color="#EF4444" />
|
||
</View>
|
||
<View style={styles.featureContent}>
|
||
<Text style={styles.featureTitle}>Emergency Alerts</Text>
|
||
<Text style={styles.featureDescription}>Instant notifications for falls and emergencies</Text>
|
||
</View>
|
||
</View>
|
||
<View style={styles.featureItem}>
|
||
<View style={[styles.featureIcon, { backgroundColor: '#D1FAE5' }]}>
|
||
<Ionicons name="analytics" size={20} color="#10B981" />
|
||
</View>
|
||
<View style={styles.featureContent}>
|
||
<Text style={styles.featureTitle}>AI-Powered Insights</Text>
|
||
<Text style={styles.featureDescription}>Smart analysis of health patterns</Text>
|
||
</View>
|
||
</View>
|
||
<View style={styles.featureItem}>
|
||
<View style={[styles.featureIcon, { backgroundColor: '#FEF3C7' }]}>
|
||
<Ionicons name="people" size={20} color="#F59E0B" />
|
||
</View>
|
||
<View style={styles.featureContent}>
|
||
<Text style={styles.featureTitle}>Family Coordination</Text>
|
||
<Text style={styles.featureDescription}>Share care with multiple caregivers</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* Links */}
|
||
<View style={styles.section}>
|
||
<Text style={styles.sectionTitle}>Resources</Text>
|
||
<View style={styles.card}>
|
||
<LinkRow
|
||
icon="globe-outline"
|
||
title="Visit Website"
|
||
onPress={() => openURL('https://wellnuo.com')}
|
||
/>
|
||
<View style={styles.linkDivider} />
|
||
<LinkRow
|
||
icon="document-text-outline"
|
||
title="Documentation"
|
||
onPress={() => openURL('https://docs.wellnuo.com')}
|
||
/>
|
||
<View style={styles.linkDivider} />
|
||
<LinkRow
|
||
icon="logo-twitter"
|
||
title="Follow on Twitter"
|
||
onPress={() => openURL('https://twitter.com/wellnuo')}
|
||
/>
|
||
</View>
|
||
</View>
|
||
|
||
{/* Footer */}
|
||
<View style={styles.footer}>
|
||
<Text style={styles.copyright}>© 2024 WellNuo Inc.</Text>
|
||
<Text style={styles.footerText}>All rights reserved.</Text>
|
||
<Text style={styles.madeWith}>
|
||
Made with ❤️ for families worldwide
|
||
</Text>
|
||
</View>
|
||
</ScrollView>
|
||
</SafeAreaView>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
backgroundColor: AppColors.surface,
|
||
},
|
||
heroSection: {
|
||
alignItems: 'center',
|
||
paddingVertical: Spacing.xl,
|
||
backgroundColor: AppColors.background,
|
||
},
|
||
logoImage: {
|
||
width: 180,
|
||
height: 100,
|
||
marginBottom: Spacing.sm,
|
||
},
|
||
appTagline: {
|
||
fontSize: FontSizes.base,
|
||
color: AppColors.textSecondary,
|
||
marginTop: Spacing.xs,
|
||
},
|
||
section: {
|
||
marginTop: Spacing.md,
|
||
},
|
||
sectionTitle: {
|
||
fontSize: FontSizes.sm,
|
||
fontWeight: '600',
|
||
color: AppColors.textSecondary,
|
||
paddingHorizontal: Spacing.lg,
|
||
paddingVertical: Spacing.sm,
|
||
textTransform: 'uppercase',
|
||
},
|
||
card: {
|
||
backgroundColor: AppColors.background,
|
||
paddingVertical: Spacing.sm,
|
||
},
|
||
infoRow: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
paddingVertical: Spacing.sm,
|
||
paddingHorizontal: Spacing.lg,
|
||
},
|
||
infoLabel: {
|
||
fontSize: FontSizes.base,
|
||
color: AppColors.textSecondary,
|
||
},
|
||
infoValue: {
|
||
fontSize: FontSizes.base,
|
||
fontWeight: '500',
|
||
color: AppColors.textPrimary,
|
||
},
|
||
infoDivider: {
|
||
height: 1,
|
||
backgroundColor: AppColors.border,
|
||
marginHorizontal: Spacing.lg,
|
||
},
|
||
description: {
|
||
fontSize: FontSizes.sm,
|
||
color: AppColors.textSecondary,
|
||
lineHeight: 22,
|
||
paddingHorizontal: Spacing.lg,
|
||
paddingVertical: Spacing.sm,
|
||
},
|
||
featureItem: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
paddingVertical: Spacing.sm,
|
||
paddingHorizontal: Spacing.lg,
|
||
},
|
||
featureIcon: {
|
||
width: 40,
|
||
height: 40,
|
||
borderRadius: BorderRadius.md,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
},
|
||
featureContent: {
|
||
flex: 1,
|
||
marginLeft: Spacing.md,
|
||
},
|
||
featureTitle: {
|
||
fontSize: FontSizes.base,
|
||
fontWeight: '500',
|
||
color: AppColors.textPrimary,
|
||
},
|
||
featureDescription: {
|
||
fontSize: FontSizes.xs,
|
||
color: AppColors.textMuted,
|
||
marginTop: 2,
|
||
},
|
||
linkRow: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
paddingVertical: Spacing.md,
|
||
paddingHorizontal: Spacing.lg,
|
||
},
|
||
linkText: {
|
||
flex: 1,
|
||
fontSize: FontSizes.base,
|
||
color: AppColors.primary,
|
||
marginLeft: Spacing.md,
|
||
},
|
||
linkDivider: {
|
||
height: 1,
|
||
backgroundColor: AppColors.border,
|
||
marginLeft: Spacing.lg + 20 + Spacing.md,
|
||
},
|
||
footer: {
|
||
alignItems: 'center',
|
||
paddingVertical: Spacing.xl,
|
||
paddingBottom: Spacing.xxl,
|
||
},
|
||
copyright: {
|
||
fontSize: FontSizes.sm,
|
||
fontWeight: '500',
|
||
color: AppColors.textPrimary,
|
||
},
|
||
footerText: {
|
||
fontSize: FontSizes.xs,
|
||
color: AppColors.textMuted,
|
||
marginTop: 2,
|
||
},
|
||
madeWith: {
|
||
fontSize: FontSizes.xs,
|
||
color: AppColors.textSecondary,
|
||
marginTop: Spacing.md,
|
||
},
|
||
});
|