diff --git a/app/onboarding.tsx b/app/onboarding.tsx index 67a0286..d867f28 100644 --- a/app/onboarding.tsx +++ b/app/onboarding.tsx @@ -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 ( - - - - - - GreenLens - + + + + + + GreenLens + + + + + {copy.rating} + + + + + {copy.testimonial} + + {copy.testimonialAuthor} + + {[0, 1, 2, 3, 4].map((i) => ( + + ))} + + - - - - - - - - {t.welcomeHeadline} - - {t.welcomeSubheadline} + + + + {copy.headline} + {copy.subline} - - {features.map((feature, index) => ( - - - - - - {feature.title} - {feature.description} - - - ))} - + router.push('/scanner')} + style={styles.cta} + onPress={() => { + posthog.capture('onboarding_started'); + router.push('/onboarding/slides'); + }} activeOpacity={0.86} > - - {t.welcomeDemoScan} - + {copy.cta} - - router.push('/auth/signup')} - activeOpacity={0.82} - > - {t.onboardingRegister} - - - router.push('/auth/login')} - activeOpacity={0.82} - > - - {t.onboardingLogin} - - - - - router.push('/profile/billing')} - activeOpacity={0.8} - > - - {t.welcomeSubscriptionPlans} - + router.push('/auth/login')} style={styles.loginLink}> + {copy.login} - {t.welcomeLegal} + router.push('/scanner')} style={styles.demoLink}> + + {copy.demoScan} + + + {copy.legal} @@ -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,