tknuth/Greenlens
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(app): Stitch welcome screen with social proof

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Timo Knuth
2026-07-06 13:51:26 +02:00
parent c24544a1b7
commit 3675f573e1
1 changed files with 245 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

525
app/onboarding.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { useEffect } from 'react';
import { import {
Image, Image,
ImageBackground, ImageBackground,
@@ -11,153 +11,131 @@ import {
} from 'react-native'; } from 'react-native';
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import { router } from 'expo-router'; import { router } from 'expo-router';
import Svg, { Path } from 'react-native-svg';
import { useApp } from '../context/AppContext'; import { useApp } from '../context/AppContext';
import { useSafeAnalytics } from '../services/analytics';
import { Language } from '../types';
type Feature = { const getWelcomeCopy = (language: Language) => {
icon: keyof typeof Ionicons.glyphMap; if (language === 'de') {
title: string; return {
description: string; 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() { export default function OnboardingScreen() {
const { t } = useApp(); const { language } = useApp();
const { height, width } = useWindowDimensions(); const { height } = useWindowDimensions();
const compact = height < 760; const compact = height < 700;
const sheetTop = compact ? 142 : 156; const posthog = useSafeAnalytics();
const waveHeight = compact ? 148 : 170; const copy = getWelcomeCopy(language);
const bodyOffset = waveHeight - 2;
const contentTop = compact ? 94 : 108;
const features: Feature[] = [ useEffect(() => {
{ posthog.capture('onboarding_welcome_viewed');
icon: 'scan-outline', }, [posthog]);
title: t.welcomeFeatureIdentifyTitle,
description: t.welcomeFeatureIdentifyDesc,
},
{
icon: 'notifications-outline',
title: t.welcomeFeatureReminderTitle,
description: t.welcomeFeatureReminderDesc,
},
{
icon: 'book-outline',
title: t.welcomeFeatureLibraryTitle,
description: t.welcomeFeatureLibraryDesc,
},
];
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ImageBackground <ImageBackground
source={require('../assets/welcome_botanical_hero.png')} source={require('../assets/welcome_botanical_hero.png')}
style={styles.heroImage} style={[styles.hero, { height: compact ? '48%' : '55%' }]}
imageStyle={styles.heroImageContent} imageStyle={styles.heroImageContent}
resizeMode="cover" resizeMode="cover"
> >
<View style={styles.heroShadeTop} /> <View style={styles.heroShadeTop} />
<View style={styles.heroShadeBottom} /> <SafeAreaView style={styles.heroSafe}>
<SafeAreaView style={styles.safeArea}> <View style={styles.heroTopRow}>
<View style={[styles.brandRow, compact && styles.brandRowCompact]}> <View style={styles.brandRow}>
<Image <Image
source={require('../assets/icon.png')} source={require('../assets/icon.png')}
style={styles.logo} style={styles.logo}
resizeMode="cover" resizeMode="cover"
/> />
<Text style={styles.brandName}> <Text style={styles.brandName}>
Green<Text style={styles.brandAccent}>Lens</Text> Green<Text style={styles.brandAccent}>Lens</Text>
</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> </View>
</SafeAreaView> </SafeAreaView>
</ImageBackground> </ImageBackground>
<View style={[styles.sheet, { top: sheetTop }]}> <View style={styles.sheet}>
<Svg <View style={styles.sheetHandle} />
width={width} <View style={styles.sheetContent}>
height={waveHeight} <Text style={[styles.headline, compact && styles.headlineCompact]}>{copy.headline}</Text>
viewBox={`0 0 ${width} ${waveHeight}`} <Text style={styles.subline}>{copy.subline}</Text>
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.features}> <View style={styles.spacer} />
{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>
<TouchableOpacity <TouchableOpacity
style={styles.demoButton} style={styles.cta}
onPress={() => router.push('/scanner')} onPress={() => {
posthog.capture('onboarding_started');
router.push('/onboarding/slides');
}}
activeOpacity={0.86} activeOpacity={0.86}
> >
<Ionicons name="scan" size={25} color="#f8f7ef" /> <Text style={styles.ctaText}>{copy.cta}</Text>
<Text style={styles.demoButtonText}>{t.welcomeDemoScan}</Text>
<Ionicons name="chevron-forward" size={26} color="#f8f7ef" />
</TouchableOpacity> </TouchableOpacity>
<View style={styles.authRow}> <TouchableOpacity onPress={() => router.push('/auth/login')} style={styles.loginLink}>
<TouchableOpacity <Text style={styles.loginText}>{copy.login}</Text>
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> </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> </View>
</View> </View>
@@ -169,195 +147,182 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
backgroundColor: '#0a110b', backgroundColor: '#0a110b',
}, },
heroImage: { hero: {
height: '60%', width: '100%',
minHeight: 430,
}, },
heroImageContent: { heroImageContent: {
backgroundColor: '#0a110b', backgroundColor: '#0a110b',
transform: [{ scale: 1.04 }],
}, },
heroShadeTop: { 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', position: 'absolute',
left: 0, left: 0,
right: 0, right: 0,
top: 0, top: 0,
height: 120,
backgroundColor: 'rgba(10,17,11,0.4)',
}, },
sheetBody: { heroSafe: {
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: {
flex: 1, flex: 1,
justifyContent: 'space-between',
paddingHorizontal: 20,
paddingTop: 8,
paddingBottom: 24,
}, },
featureTitle: { heroTopRow: {
color: '#101c12',
fontSize: 16,
fontWeight: '800',
marginBottom: 2,
},
featureDescription: {
color: '#696b65',
fontSize: 13,
lineHeight: 16,
fontWeight: '500',
},
demoButton: {
height: 60,
borderRadius: 7,
backgroundColor: '#437824',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
paddingHorizontal: 18,
marginBottom: 8,
}, },
demoButtonText: { brandRow: {
color: '#f8f7ef',
fontSize: 21,
fontWeight: '800',
},
authRow: {
flexDirection: 'row', flexDirection: 'row',
gap: 8,
marginBottom: 8,
},
authButton: {
flex: 1,
height: 50,
borderRadius: 7,
borderWidth: 1.4,
borderColor: '#4b7c31',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', gap: 10,
}, },
loginButton: { logo: {
borderColor: '#101c12', width: 36,
height: 36,
borderRadius: 10,
backgroundColor: '#fff',
}, },
authButtonText: { brandName: {
color: '#4b7c31', color: '#ffffff',
fontSize: 17, 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', fontWeight: '700',
}, },
loginButtonText: { testimonialCard: {
color: '#101c12', 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: { testimonialCardCompact: {
minHeight: 24, 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', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
gap: 8, gap: 7,
marginBottom: 7, paddingVertical: 6,
marginBottom: 8,
}, },
subscriptionText: { demoText: {
color: '#4b7c31', color: '#4b7c31',
fontSize: 15, fontSize: 13.5,
fontWeight: '800', fontWeight: '700',
textAlign: 'center',
}, },
legalText: { legal: {
color: '#6b6d68', color: '#6b6d68',
fontSize: 11, fontSize: 11,
lineHeight: 14, lineHeight: 14,