83 lines
3.5 KiB
TypeScript
83 lines
3.5 KiB
TypeScript
'use client'
|
||
|
||
import Image from 'next/image'
|
||
import { useLang } from '@/context/LangContext'
|
||
|
||
const STEPS = {
|
||
de: [
|
||
{ num: '01', title: 'Pflanze fotografieren', desc: 'Öffne die App, richte die Kamera auf deine Pflanze und tippe auf Scan. Das war\'s schon.' },
|
||
{ num: '02', title: 'KI identifiziert sofort', desc: 'In unter einer Sekunde erhältst du den genauen Namen, die Art und alle wichtigen Eckdaten.' },
|
||
{ num: '03', title: 'Pflegeplan erhalten', desc: 'GreenLens erstellt automatisch einen personalisierten Pflegeplan passend zu deiner Pflanze und deinem Standort.' },
|
||
{ num: '04', title: 'Wachstum verfolgen', desc: 'Dokumentiere Fotos, tracke das Gießen und lass dich an wichtige Pflegetermine erinnern.' },
|
||
],
|
||
en: [
|
||
{ num: '01', title: 'Photograph your plant', desc: 'Open the app, point the camera at your plant and tap Scan. That\'s it.' },
|
||
{ num: '02', title: 'AI identifies instantly', desc: 'In under a second you get the exact name, species and all key details.' },
|
||
{ num: '03', title: 'Receive care plan', desc: 'GreenLens automatically creates a personalized care plan for your plant and location.' },
|
||
{ num: '04', title: 'Track growth', desc: 'Document photos, track watering and get reminded of important care dates.' },
|
||
],
|
||
es: [
|
||
{ num: '01', title: 'Fotografía tu planta', desc: 'Abre la app, apunta la cámara a tu planta y toca Escanear. Eso es todo.' },
|
||
{ num: '02', title: 'La IA identifica al instante', desc: 'En menos de un segundo obtienes el nombre exacto, la especie y todos los datos clave.' },
|
||
{ num: '03', title: 'Recibe el plan de cuidado', desc: 'GreenLens crea automáticamente un plan de cuidado personalizado para tu planta y ubicación.' },
|
||
{ num: '04', title: 'Seguimiento del crecimiento', desc: 'Documenta fotos, registra el riego y recibe recordatorios de citas de cuidado importantes.' },
|
||
],
|
||
}
|
||
|
||
const TAG = { de: 'So funktionierts', en: 'How it works', es: 'Cómo funciona' }
|
||
const H2 = {
|
||
de: ['Einfacher', 'als du', 'denkst.'],
|
||
en: ['Simpler', 'than you', 'think.'],
|
||
es: ['Más fácil', 'de lo que', 'crees.'],
|
||
}
|
||
const ALT = {
|
||
de: 'GreenLens App in Verwendung – Pflanze wird gescannt',
|
||
en: 'GreenLens app in use – scanning a plant',
|
||
es: 'App GreenLens en uso – escaneando una planta',
|
||
}
|
||
|
||
export default function HowItWorks() {
|
||
const { lang } = useLang()
|
||
const steps = STEPS[lang]
|
||
const h2 = H2[lang]
|
||
|
||
return (
|
||
<section className="how" id="how" aria-labelledby="how-heading">
|
||
<div className="container">
|
||
|
||
<div className="how-text">
|
||
<p className="tag">{TAG[lang]}</p>
|
||
<h2 id="how-heading">
|
||
{h2[0]}<br />{h2[1]}<br /><em>{h2[2]}</em>
|
||
</h2>
|
||
|
||
<div className="how-steps">
|
||
{steps.map((s, i) => (
|
||
<div className={`how-step reveal delay-${i + 1}`} key={s.num}>
|
||
<div className="how-step-num">{s.num}</div>
|
||
<div>
|
||
<h4>{s.title}</h4>
|
||
<p>{s.desc}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="how-visual reveal-fade delay-2">
|
||
<div className="how-img-wrap" style={{ position: 'relative', height: '500px' }}>
|
||
<Image
|
||
src="/scan-feature.png"
|
||
alt={ALT[lang]}
|
||
fill
|
||
sizes="(max-width: 768px) 100vw, 50vw"
|
||
style={{ objectFit: 'cover', borderRadius: '24px' }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|