feat(app): Stitch welcome screen with social proof
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Timo Knuth
@@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import {
|
||||
Image,
|
||||
ImageBackground,
|
||||
@@ -11,153 +11,131 @@ import {
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { router } from 'expo-router';
|
||||
import Svg, { Path } from 'react-native-svg';
|
||||
import { useApp } from '../context/AppContext';
|
||||
import { useSafeAnalytics } from '../services/analytics';
|
||||
import { Language } from '../types';
|
||||
|
||||
type Feature = {
|
||||
icon: keyof typeof Ionicons.glyphMap;
|
||||
title: string;
|
||||
description: string;
|
||||
const getWelcomeCopy = (language: Language) => {
|
||||
if (language === 'de') {
|
||||
return {
|
||||
headline: 'Willkommen bei GreenLens!',
|
||||
subline: 'Pflanzen erkennen, verstehen und pflegen — ganz einfach.',
|
||||
testimonial: '„Endlich überleben meine Pflanzen! Absolute Empfehlung."',
|
||||
testimonialAuthor: 'Anna M.',
|
||||
cta: "Los geht's",
|
||||
login: 'Anmelden',
|
||||
demoScan: 'Oder direkt eine Pflanze scannen',
|
||||
legal: 'Mit dem Fortfahren akzeptierst du unsere Datenschutzerklärung und AGB.',
|
||||
rating: '4,8',
|
||||
};
|
||||
}
|
||||
if (language === 'es') {
|
||||
return {
|
||||
headline: '¡Bienvenido a GreenLens!',
|
||||
subline: 'Identifica, entiende y cuida tus plantas — sin esfuerzo.',
|
||||
testimonial: '"¡Por fin mis plantas sobreviven! Muy recomendable."',
|
||||
testimonialAuthor: 'Anna M.',
|
||||
cta: 'Empezar',
|
||||
login: 'Iniciar sesión',
|
||||
demoScan: 'O escanea una planta ahora',
|
||||
legal: 'Al continuar aceptas nuestra Política de privacidad y Términos.',
|
||||
rating: '4.8',
|
||||
};
|
||||
}
|
||||
return {
|
||||
headline: 'Welcome to GreenLens!',
|
||||
subline: 'Identify, understand and care for your plants — effortlessly.',
|
||||
testimonial: '"Finally my plants stay alive! Highly recommend."',
|
||||
testimonialAuthor: 'Anna M.',
|
||||
cta: "Let's Go",
|
||||
login: 'Log in',
|
||||
demoScan: 'Or scan a plant right now',
|
||||
legal: 'By continuing you agree to our Privacy Policy and Terms.',
|
||||
rating: '4.8',
|
||||
};
|
||||
};
|
||||
|
||||
export default function OnboardingScreen() {
|
||||
const { t } = useApp();
|
||||
const { height, width } = useWindowDimensions();
|
||||
const compact = height < 760;
|
||||
const sheetTop = compact ? 142 : 156;
|
||||
const waveHeight = compact ? 148 : 170;
|
||||
const bodyOffset = waveHeight - 2;
|
||||
const contentTop = compact ? 94 : 108;
|
||||
const { language } = useApp();
|
||||
const { height } = useWindowDimensions();
|
||||
const compact = height < 700;
|
||||
const posthog = useSafeAnalytics();
|
||||
const copy = getWelcomeCopy(language);
|
||||
|
||||
const features: Feature[] = [
|
||||
{
|
||||
icon: 'scan-outline',
|
||||
title: t.welcomeFeatureIdentifyTitle,
|
||||
description: t.welcomeFeatureIdentifyDesc,
|
||||
},
|
||||
{
|
||||
icon: 'notifications-outline',
|
||||
title: t.welcomeFeatureReminderTitle,
|
||||
description: t.welcomeFeatureReminderDesc,
|
||||
},
|
||||
{
|
||||
icon: 'book-outline',
|
||||
title: t.welcomeFeatureLibraryTitle,
|
||||
description: t.welcomeFeatureLibraryDesc,
|
||||
},
|
||||
];
|
||||
useEffect(() => {
|
||||
posthog.capture('onboarding_welcome_viewed');
|
||||
}, [posthog]);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<ImageBackground
|
||||
source={require('../assets/welcome_botanical_hero.png')}
|
||||
style={styles.heroImage}
|
||||
style={[styles.hero, { height: compact ? '48%' : '55%' }]}
|
||||
imageStyle={styles.heroImageContent}
|
||||
resizeMode="cover"
|
||||
>
|
||||
<View style={styles.heroShadeTop} />
|
||||
<View style={styles.heroShadeBottom} />
|
||||
<SafeAreaView style={styles.safeArea}>
|
||||
<View style={[styles.brandRow, compact && styles.brandRowCompact]}>
|
||||
<Image
|
||||
source={require('../assets/icon.png')}
|
||||
style={styles.logo}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
<Text style={styles.brandName}>
|
||||
Green<Text style={styles.brandAccent}>Lens</Text>
|
||||
</Text>
|
||||
<SafeAreaView style={styles.heroSafe}>
|
||||
<View style={styles.heroTopRow}>
|
||||
<View style={styles.brandRow}>
|
||||
<Image
|
||||
source={require('../assets/icon.png')}
|
||||
style={styles.logo}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
<Text style={styles.brandName}>
|
||||
Green<Text style={styles.brandAccent}>Lens</Text>
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.ratingPill}>
|
||||
<Ionicons name="star" size={13} color="#f5c04e" />
|
||||
<Text style={styles.ratingText}>{copy.rating}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={[styles.testimonialCard, compact && styles.testimonialCardCompact]}>
|
||||
<Text style={styles.testimonialText}>{copy.testimonial}</Text>
|
||||
<View style={styles.testimonialMeta}>
|
||||
<Text style={styles.testimonialAuthor}>{copy.testimonialAuthor}</Text>
|
||||
<View style={styles.starsRow}>
|
||||
{[0, 1, 2, 3, 4].map((i) => (
|
||||
<Ionicons key={i} name="star" size={14} color="#f5c04e" />
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</ImageBackground>
|
||||
|
||||
<View style={[styles.sheet, { top: sheetTop }]}>
|
||||
<Svg
|
||||
width={width}
|
||||
height={waveHeight}
|
||||
viewBox={`0 0 ${width} ${waveHeight}`}
|
||||
preserveAspectRatio="none"
|
||||
style={styles.sheetWave}
|
||||
>
|
||||
<Path
|
||||
d={`M0 34 C ${width * 0.08} 76 ${width * 0.14} 82 ${width * 0.24} 82 C ${width * 0.38} 82 ${width * 0.52} 82 ${width * 0.64} 82 C ${width * 0.78} 86 ${width * 0.88} 132 ${width} 156 L ${width} ${waveHeight} L 0 ${waveHeight} Z`}
|
||||
fill="#fbfaf3"
|
||||
/>
|
||||
</Svg>
|
||||
<View style={[styles.sheetBody, { top: bodyOffset }]} />
|
||||
<View
|
||||
style={[
|
||||
styles.sheetContent,
|
||||
{ top: contentTop },
|
||||
compact && styles.sheetContentCompact,
|
||||
]}
|
||||
>
|
||||
<Text style={[styles.headline, compact && styles.headlineCompact]}>
|
||||
{t.welcomeHeadline}
|
||||
</Text>
|
||||
<Text style={styles.subheadline}>{t.welcomeSubheadline}</Text>
|
||||
<View style={styles.sheet}>
|
||||
<View style={styles.sheetHandle} />
|
||||
<View style={styles.sheetContent}>
|
||||
<Text style={[styles.headline, compact && styles.headlineCompact]}>{copy.headline}</Text>
|
||||
<Text style={styles.subline}>{copy.subline}</Text>
|
||||
|
||||
<View style={styles.features}>
|
||||
{features.map((feature, index) => (
|
||||
<View
|
||||
key={feature.title}
|
||||
style={[
|
||||
styles.featureRow,
|
||||
index === features.length - 1 && styles.featureRowLast,
|
||||
]}
|
||||
>
|
||||
<View style={styles.featureIcon}>
|
||||
<Ionicons name={feature.icon} size={22} color="#a6d66f" />
|
||||
</View>
|
||||
<View style={styles.featureCopy}>
|
||||
<Text style={styles.featureTitle}>{feature.title}</Text>
|
||||
<Text style={styles.featureDescription}>{feature.description}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
<View style={styles.spacer} />
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.demoButton}
|
||||
onPress={() => router.push('/scanner')}
|
||||
style={styles.cta}
|
||||
onPress={() => {
|
||||
posthog.capture('onboarding_started');
|
||||
router.push('/onboarding/slides');
|
||||
}}
|
||||
activeOpacity={0.86}
|
||||
>
|
||||
<Ionicons name="scan" size={25} color="#f8f7ef" />
|
||||
<Text style={styles.demoButtonText}>{t.welcomeDemoScan}</Text>
|
||||
<Ionicons name="chevron-forward" size={26} color="#f8f7ef" />
|
||||
<Text style={styles.ctaText}>{copy.cta}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={styles.authRow}>
|
||||
<TouchableOpacity
|
||||
style={styles.authButton}
|
||||
onPress={() => router.push('/auth/signup')}
|
||||
activeOpacity={0.82}
|
||||
>
|
||||
<Text style={styles.authButtonText}>{t.onboardingRegister}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.authButton, styles.loginButton]}
|
||||
onPress={() => router.push('/auth/login')}
|
||||
activeOpacity={0.82}
|
||||
>
|
||||
<Text style={[styles.authButtonText, styles.loginButtonText]}>
|
||||
{t.onboardingLogin}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.subscriptionLink}
|
||||
onPress={() => router.push('/profile/billing')}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Ionicons name="leaf-outline" size={21} color="#4b7c31" />
|
||||
<Text style={styles.subscriptionText}>{t.welcomeSubscriptionPlans}</Text>
|
||||
<Ionicons name="chevron-forward" size={20} color="#4b7c31" />
|
||||
<TouchableOpacity onPress={() => router.push('/auth/login')} style={styles.loginLink}>
|
||||
<Text style={styles.loginText}>{copy.login}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text style={styles.legalText}>{t.welcomeLegal}</Text>
|
||||
<TouchableOpacity onPress={() => router.push('/scanner')} style={styles.demoLink}>
|
||||
<Ionicons name="scan-outline" size={16} color="#4b7c31" />
|
||||
<Text style={styles.demoText}>{copy.demoScan}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text style={styles.legal}>{copy.legal}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
@@ -169,195 +147,182 @@ const styles = StyleSheet.create({
|
||||
flex: 1,
|
||||
backgroundColor: '#0a110b',
|
||||
},
|
||||
heroImage: {
|
||||
height: '60%',
|
||||
minHeight: 430,
|
||||
hero: {
|
||||
width: '100%',
|
||||
},
|
||||
heroImageContent: {
|
||||
backgroundColor: '#0a110b',
|
||||
transform: [{ scale: 1.04 }],
|
||||
},
|
||||
heroShadeTop: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(0,0,0,0.08)',
|
||||
},
|
||||
heroShadeBottom: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
height: 190,
|
||||
backgroundColor: 'rgba(7,12,7,0.2)',
|
||||
},
|
||||
safeArea: {
|
||||
flex: 1,
|
||||
},
|
||||
brandRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 15,
|
||||
paddingHorizontal: 30,
|
||||
paddingTop: 62,
|
||||
},
|
||||
brandRowCompact: {
|
||||
paddingTop: 42,
|
||||
},
|
||||
logo: {
|
||||
width: 68,
|
||||
height: 68,
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
brandName: {
|
||||
color: '#f8f7ef',
|
||||
fontSize: 36,
|
||||
fontWeight: '900',
|
||||
},
|
||||
brandAccent: {
|
||||
color: '#9bc76e',
|
||||
},
|
||||
sheet: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
sheetWave: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
height: 120,
|
||||
backgroundColor: 'rgba(10,17,11,0.4)',
|
||||
},
|
||||
sheetBody: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: '#fbfaf3',
|
||||
},
|
||||
sheetContent: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
paddingHorizontal: 24,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
sheetContentCompact: {
|
||||
paddingHorizontal: 22,
|
||||
paddingBottom: 8,
|
||||
},
|
||||
headline: {
|
||||
color: '#101c12',
|
||||
fontSize: 40,
|
||||
lineHeight: 43,
|
||||
fontWeight: '900',
|
||||
marginBottom: 6,
|
||||
maxWidth: 310,
|
||||
},
|
||||
headlineCompact: {
|
||||
fontSize: 34,
|
||||
lineHeight: 37,
|
||||
},
|
||||
subheadline: {
|
||||
color: '#5f625d',
|
||||
fontSize: 15,
|
||||
lineHeight: 19,
|
||||
fontWeight: '500',
|
||||
marginBottom: 11,
|
||||
},
|
||||
features: {
|
||||
marginBottom: 10,
|
||||
},
|
||||
featureRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 11,
|
||||
paddingVertical: 6,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: 'rgba(16,28,18,0.14)',
|
||||
},
|
||||
featureRowLast: {
|
||||
borderBottomWidth: 0,
|
||||
},
|
||||
featureIcon: {
|
||||
width: 46,
|
||||
height: 46,
|
||||
borderRadius: 10,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#173817',
|
||||
},
|
||||
featureCopy: {
|
||||
heroSafe: {
|
||||
flex: 1,
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 20,
|
||||
paddingTop: 8,
|
||||
paddingBottom: 24,
|
||||
},
|
||||
featureTitle: {
|
||||
color: '#101c12',
|
||||
fontSize: 16,
|
||||
fontWeight: '800',
|
||||
marginBottom: 2,
|
||||
},
|
||||
featureDescription: {
|
||||
color: '#696b65',
|
||||
fontSize: 13,
|
||||
lineHeight: 16,
|
||||
fontWeight: '500',
|
||||
},
|
||||
demoButton: {
|
||||
height: 60,
|
||||
borderRadius: 7,
|
||||
backgroundColor: '#437824',
|
||||
heroTopRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 18,
|
||||
marginBottom: 8,
|
||||
},
|
||||
demoButtonText: {
|
||||
color: '#f8f7ef',
|
||||
fontSize: 21,
|
||||
fontWeight: '800',
|
||||
},
|
||||
authRow: {
|
||||
brandRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
marginBottom: 8,
|
||||
},
|
||||
authButton: {
|
||||
flex: 1,
|
||||
height: 50,
|
||||
borderRadius: 7,
|
||||
borderWidth: 1.4,
|
||||
borderColor: '#4b7c31',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 10,
|
||||
},
|
||||
loginButton: {
|
||||
borderColor: '#101c12',
|
||||
logo: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
authButtonText: {
|
||||
color: '#4b7c31',
|
||||
fontSize: 17,
|
||||
brandName: {
|
||||
color: '#ffffff',
|
||||
fontSize: 24,
|
||||
fontWeight: '900',
|
||||
},
|
||||
brandAccent: {
|
||||
color: '#a6d66f',
|
||||
},
|
||||
ratingPill: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 5,
|
||||
backgroundColor: 'rgba(255,255,255,0.18)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.3)',
|
||||
borderRadius: 999,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
},
|
||||
ratingText: {
|
||||
color: '#ffffff',
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
},
|
||||
loginButtonText: {
|
||||
color: '#101c12',
|
||||
testimonialCard: {
|
||||
backgroundColor: 'rgba(255,255,255,0.97)',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.18,
|
||||
shadowRadius: 14,
|
||||
elevation: 4,
|
||||
},
|
||||
subscriptionLink: {
|
||||
minHeight: 24,
|
||||
testimonialCardCompact: {
|
||||
padding: 12,
|
||||
},
|
||||
testimonialText: {
|
||||
color: '#191d16',
|
||||
fontSize: 14.5,
|
||||
lineHeight: 20,
|
||||
fontStyle: 'italic',
|
||||
marginBottom: 10,
|
||||
},
|
||||
testimonialMeta: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
testimonialAuthor: {
|
||||
color: '#42493c',
|
||||
fontSize: 13,
|
||||
fontWeight: '700',
|
||||
},
|
||||
starsRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 1,
|
||||
},
|
||||
sheet: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fbfaf3',
|
||||
borderTopLeftRadius: 28,
|
||||
borderTopRightRadius: 28,
|
||||
marginTop: -20,
|
||||
},
|
||||
sheetHandle: {
|
||||
alignSelf: 'center',
|
||||
width: 44,
|
||||
height: 5,
|
||||
borderRadius: 3,
|
||||
backgroundColor: 'rgba(16,28,18,0.15)',
|
||||
marginTop: 12,
|
||||
marginBottom: 8,
|
||||
},
|
||||
sheetContent: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 8,
|
||||
paddingBottom: 12,
|
||||
},
|
||||
headline: {
|
||||
color: '#101c12',
|
||||
fontSize: 28,
|
||||
lineHeight: 34,
|
||||
fontWeight: '900',
|
||||
textAlign: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
headlineCompact: {
|
||||
fontSize: 24,
|
||||
lineHeight: 29,
|
||||
},
|
||||
subline: {
|
||||
color: '#5f625d',
|
||||
fontSize: 16,
|
||||
lineHeight: 22,
|
||||
fontWeight: '500',
|
||||
textAlign: 'center',
|
||||
},
|
||||
spacer: {
|
||||
flex: 1,
|
||||
minHeight: 12,
|
||||
},
|
||||
cta: {
|
||||
height: 60,
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#437824',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 6,
|
||||
},
|
||||
ctaText: {
|
||||
color: '#f8f7ef',
|
||||
fontSize: 18,
|
||||
fontWeight: '800',
|
||||
},
|
||||
loginLink: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: 10,
|
||||
},
|
||||
loginText: {
|
||||
color: '#437824',
|
||||
fontSize: 15,
|
||||
fontWeight: '800',
|
||||
},
|
||||
demoLink: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
marginBottom: 7,
|
||||
gap: 7,
|
||||
paddingVertical: 6,
|
||||
marginBottom: 8,
|
||||
},
|
||||
subscriptionText: {
|
||||
demoText: {
|
||||
color: '#4b7c31',
|
||||
fontSize: 15,
|
||||
fontWeight: '800',
|
||||
textAlign: 'center',
|
||||
fontSize: 13.5,
|
||||
fontWeight: '700',
|
||||
},
|
||||
legalText: {
|
||||
legal: {
|
||||
color: '#6b6d68',
|
||||
fontSize: 11,
|
||||
lineHeight: 14,
|
||||
|
||||
Reference in New Issue
Block a user