101 lines
4.9 KiB
TypeScript
101 lines
4.9 KiB
TypeScript
'use client'
|
|
|
|
import Image from 'next/image'
|
|
import { useLang } from '@/context/LangContext'
|
|
|
|
const ICONS = [
|
|
<svg key="a" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--green-light)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
|
<path d="M9.5 2a2.5 2.5 0 0 1 5 0v.5a2 2 0 0 0 1.5 1.94V6a2 2 0 0 0 2 2h.5a2.5 2.5 0 0 1 0 5H18a2 2 0 0 0-2 2v.56A2.5 2.5 0 0 1 14.5 22h-5A2.5 2.5 0 0 1 7 19.56V18a2 2 0 0 0-2-2h-.5a2.5 2.5 0 0 1 0-5H5a2 2 0 0 0 2-2V4.44A2 2 0 0 0 8.5 2.5z" />
|
|
<circle cx="12" cy="12" r="2" />
|
|
</svg>,
|
|
<svg key="b" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--green-light)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
|
<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" />
|
|
</svg>,
|
|
<svg key="c" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--green-light)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
|
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
|
|
<circle cx="12" cy="10" r="3" />
|
|
</svg>,
|
|
<svg key="d" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--green-light)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
|
<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
|
|
</svg>,
|
|
]
|
|
|
|
const ITEMS = {
|
|
de: [
|
|
{ title: 'Scan-basierte Erkennung', desc: 'Vom Foto zur besseren Einordnung in wenigen Schritten.' },
|
|
{ title: 'Pflegeorientierte Hinweise', desc: 'Hilft dir, naechste Pflegeentscheidungen schneller zu treffen.' },
|
|
{ title: 'Sammlung und Verlauf', desc: 'Behalte Scans, Pflanzen und Notizen an einem Ort.' },
|
|
{ title: 'Lexikon und Suche', desc: 'Suche Pflanzen und vergleiche Informationen in einer App.' },
|
|
],
|
|
en: [
|
|
{ title: 'Scan-based identification', desc: 'Move from photo to clearer plant context in a few steps.' },
|
|
{ title: 'Care-focused guidance', desc: 'Helps you make faster next-step care decisions.' },
|
|
{ title: 'Collection and history', desc: 'Keep scans, plants, and notes in one place.' },
|
|
{ title: 'Lexicon and search', desc: 'Look up plants and compare information in one app.' },
|
|
],
|
|
es: [
|
|
{ title: 'Identificacion basada en escaneo', desc: 'Pasa de una foto a un contexto mas claro en pocos pasos.' },
|
|
{ title: 'Guias centradas en cuidado', desc: 'Te ayuda a decidir los siguientes pasos mas rapido.' },
|
|
{ title: 'Coleccion e historial', desc: 'Guarda escaneos, plantas y notas en un solo lugar.' },
|
|
{ title: 'Lexico y busqueda', desc: 'Busca plantas y compara informacion dentro de una app.' },
|
|
],
|
|
}
|
|
|
|
const TAG_TEXT = { de: 'Technologie', en: 'Technology', es: 'Tecnologia' }
|
|
const BODY_TEXT = {
|
|
de: 'GreenLens verbindet Scan-Ergebnisse, Pflegekontext und Sammlungsverwaltung in einer App. So kommst du schneller von einem Pflanzenfoto zu einer verstaendlichen Entscheidung.',
|
|
en: 'GreenLens combines scan results, care context, and collection management in one app, helping you move from plant photo to a clearer decision faster.',
|
|
es: 'GreenLens combina resultados de escaneo, contexto de cuidado y gestion de coleccion en una sola app para ayudarte a pasar de una foto a una decision mas clara.',
|
|
}
|
|
|
|
export default function Intelligence() {
|
|
const { lang } = useLang()
|
|
const items = ITEMS[lang]
|
|
|
|
return (
|
|
<section className="intelligence" id="intelligence" aria-labelledby="intel-heading">
|
|
<div className="container">
|
|
<div className="intelligence-text reveal">
|
|
<p className="tag">{TAG_TEXT[lang]}</p>
|
|
<h2 id="intel-heading">
|
|
Botanical<br />
|
|
<em>Intelligence.</em>
|
|
</h2>
|
|
<p>{BODY_TEXT[lang]}</p>
|
|
|
|
<div className="intelligence-list">
|
|
{items.map((item, i) => (
|
|
<div className="intelligence-item" key={item.title}>
|
|
<div className="intelligence-item-icon">{ICONS[i]}</div>
|
|
<div>
|
|
<h4>{item.title}</h4>
|
|
<p>{item.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="intelligence-visual reveal-fade delay-2">
|
|
<div className="intelligence-img-frame" style={{ position: 'relative', height: '600px', overflow: 'hidden' }}>
|
|
<Image
|
|
src="/ai-analysis.png"
|
|
alt="Botanical AI plant analysis visualization"
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 50vw"
|
|
style={{ objectFit: 'cover' }}
|
|
/>
|
|
<div className="intelligence-img-overlay" />
|
|
<div className="intelligence-overlay-text">
|
|
<h3>
|
|
Botanical<br />
|
|
<em>Intelligence.</em>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|