Initial commit for Greenlens

greenlns-landing/components/HowItWorks.tsx

@@ -0,0 +1,82 @@
+'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>
+  )
+}