213 lines
7.8 KiB
TypeScript
213 lines
7.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { useLang } from '@/context/LangContext';
|
|
|
|
const faqs = [
|
|
{
|
|
question: {
|
|
en: 'How does GreenLens identify a plant?',
|
|
de: 'Wie erkennt GreenLens eine Pflanze?',
|
|
es: 'Como identifica GreenLens una planta?'
|
|
},
|
|
answer: {
|
|
en: 'GreenLens analyzes the plant photo and combines that with app-side care guidance so you can move from scan to next steps faster.',
|
|
de: 'GreenLens analysiert das Pflanzenfoto und verbindet das Ergebnis mit Pflegehinweisen in der App, damit du schneller zu klaren naechsten Schritten kommst.',
|
|
es: 'GreenLens analiza la foto de la planta y combina el resultado con indicaciones de cuidado dentro de la app para que avances mas rapido.'
|
|
}
|
|
},
|
|
{
|
|
question: {
|
|
en: 'Is GreenLens free to use?',
|
|
de: 'Ist GreenLens kostenlos?',
|
|
es: 'Es GreenLens gratuito?'
|
|
},
|
|
answer: {
|
|
en: 'GreenLens includes free functionality plus paid options such as subscriptions and credit top-ups for advanced AI features.',
|
|
de: 'GreenLens bietet kostenlose Funktionen und zusaetzlich kostenpflichtige Optionen wie Abos und Credit-Top-ups fuer erweiterte KI-Funktionen.',
|
|
es: 'GreenLens incluye funciones gratuitas y tambien opciones de pago como suscripciones y creditos para funciones de IA mas umfangreiche.'
|
|
}
|
|
},
|
|
{
|
|
question: {
|
|
en: 'Can I use it offline?',
|
|
de: 'Kann ich die App offline nutzen?',
|
|
es: 'Puedo usarla sin conexion?'
|
|
},
|
|
answer: {
|
|
en: 'Some experiences may require a connection, especially for scan-related features. Saved information inside the app can remain available afterward.',
|
|
de: 'Einige Funktionen benoetigen eine Verbindung, besonders scanbezogene Features. Gespeicherte Informationen in der App koennen danach weiter verfuegbar bleiben.',
|
|
es: 'Algunas funciones requieren conexion, especialmente las relacionadas con escaneos. La informacion guardada puede seguir disponible despues.'
|
|
}
|
|
},
|
|
{
|
|
question: {
|
|
en: 'What kind of plants can I use it for?',
|
|
de: 'Fuer welche Pflanzen kann ich die App nutzen?',
|
|
es: 'Para que tipo de plantas puedo usar la app?'
|
|
},
|
|
answer: {
|
|
en: 'GreenLens is built for everyday plant owners who want help with houseplants, garden plants, and general care questions.',
|
|
de: 'GreenLens richtet sich an Pflanzenbesitzer, die Hilfe bei Zimmerpflanzen, Gartenpflanzen und allgemeinen Pflegefragen wollen.',
|
|
es: 'GreenLens esta pensada para personas que quieren ayuda con plantas de interior, jardin y preguntas generales de cuidado.'
|
|
}
|
|
},
|
|
{
|
|
question: {
|
|
en: 'How do I start my plant collection?',
|
|
de: 'Wie starte ich meine Pflanzensammlung?',
|
|
es: 'Como empiezo mi coleccion de plantas?'
|
|
},
|
|
answer: {
|
|
en: 'Start with a scan, review the result, and save the plant to your collection to keep notes, reminders, and follow-up care in one place.',
|
|
de: 'Starte mit einem Scan, pruefe das Ergebnis und speichere die Pflanze in deiner Sammlung, damit Notizen, Erinnerungen und Pflege an einem Ort bleiben.',
|
|
es: 'Empieza con un escaneo, revisa el resultado y guarda la planta en tu coleccion para mantener notas, recordatorios y cuidado en un solo lugar.'
|
|
}
|
|
}
|
|
];
|
|
|
|
const TEXT = {
|
|
de: { tag: 'Fragen', h2: ['Haeufig gestellte', 'Fragen'], desc: 'Alles, was du ueber GreenLens und den Einstieg wissen musst.' },
|
|
en: { tag: 'Questions', h2: ['Frequently Asked', 'Questions'], desc: 'Everything you need to know about GreenLens and getting started.' },
|
|
es: { tag: 'Preguntas', h2: ['Preguntas', 'Frecuentes'], desc: 'Todo lo que necesitas saber sobre GreenLens y el inicio.' },
|
|
}
|
|
|
|
export default function FAQ() {
|
|
const { lang } = useLang();
|
|
const [activeIndex, setActiveIndex] = useState<number | null>(null);
|
|
const text = TEXT[lang];
|
|
|
|
return (
|
|
<section id="faq" className="section faq">
|
|
<div className="container">
|
|
<div className="section-header reveal">
|
|
<span className="tag">{text.tag}</span>
|
|
<h2>{text.h2[0]} <em>{text.h2[1]}</em></h2>
|
|
<p className="section-desc">
|
|
{text.desc}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="faq-grid reveal delay-1">
|
|
{faqs.map((faq, index) => (
|
|
<div
|
|
key={index}
|
|
className={`faq-item ${activeIndex === index ? 'active' : ''}`}
|
|
onClick={() => setActiveIndex(activeIndex === index ? null : index)}
|
|
>
|
|
<div className="faq-question">
|
|
<h3>{faq.question[lang]}</h3>
|
|
<span className="faq-icon">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
<path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<AnimatePresence>
|
|
{activeIndex === index && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: 'auto', opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
|
className="faq-answer"
|
|
>
|
|
<p>{faq.answer[lang]}</p>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
.faq {
|
|
background: var(--cream-alt);
|
|
padding: var(--s16) 0;
|
|
}
|
|
.section-header {
|
|
text-align: center;
|
|
max-width: 600px;
|
|
margin: 0 auto var(--s12);
|
|
}
|
|
.section-header h2 em {
|
|
display: block;
|
|
font-style: italic;
|
|
color: var(--green);
|
|
}
|
|
.section-desc {
|
|
font-size: 1.05rem;
|
|
color: var(--muted);
|
|
margin-top: var(--s2);
|
|
}
|
|
.faq-grid {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s3);
|
|
}
|
|
.faq-item {
|
|
background: var(--white);
|
|
border-radius: var(--r-lg);
|
|
border: 1px solid rgba(19, 31, 22, 0.04);
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
transition: border var(--t), box-shadow var(--t), transform var(--t);
|
|
}
|
|
.faq-item:hover {
|
|
border-color: rgba(42, 92, 63, 0.15);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 30px rgba(19, 31, 22, 0.05);
|
|
}
|
|
.faq-item.active {
|
|
border-color: var(--green);
|
|
box-shadow: 0 15px 40px rgba(42, 92, 63, 0.1);
|
|
}
|
|
.faq-question {
|
|
padding: var(--s4) var(--s6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
}
|
|
.faq-question h3 {
|
|
font-family: var(--body);
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
color: var(--dark);
|
|
margin: 0;
|
|
}
|
|
.faq-icon {
|
|
color: var(--muted);
|
|
transition: transform var(--t);
|
|
}
|
|
.faq-item.active .faq-icon {
|
|
transform: rotate(180deg);
|
|
color: var(--green);
|
|
}
|
|
.faq-answer {
|
|
padding: 0 var(--s6) var(--s4);
|
|
}
|
|
.faq-answer p {
|
|
color: var(--muted);
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.faq-question {
|
|
padding: var(--s3) var(--s4);
|
|
}
|
|
.faq-answer {
|
|
padding: 0 var(--s4) var(--s3);
|
|
}
|
|
}
|
|
`}</style>
|
|
</section>
|
|
);
|
|
}
|