105 lines
3.7 KiB
TypeScript
105 lines
3.7 KiB
TypeScript
import type { Metadata } from 'next'
|
|
import Link from 'next/link'
|
|
import { siteConfig } from '@/lib/site'
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Support',
|
|
description: 'Get support for GreenLens, including contact details, onboarding help, billing guidance, and privacy links.',
|
|
}
|
|
|
|
const faqs = [
|
|
{
|
|
question: 'How do I identify a plant with GreenLens?',
|
|
answer:
|
|
'Open the scanner, point your camera at the plant, and start a scan. GreenLens returns an identification result and care guidance.',
|
|
},
|
|
{
|
|
question: 'Do I need an account to use GreenLens?',
|
|
answer:
|
|
'Some features can be explored first, but an account is recommended if you want to save scans, manage your collection, and access billing features.',
|
|
},
|
|
{
|
|
question: 'How do subscriptions and credits work?',
|
|
answer:
|
|
'GreenLens offers Pro subscriptions and credit top-ups for AI-powered features. Billing and plan management are available inside the app.',
|
|
},
|
|
{
|
|
question: 'How can I contact support?',
|
|
answer:
|
|
'Send a message to our support email with your platform, app version, and a short description of the issue. Screenshots help.',
|
|
},
|
|
]
|
|
|
|
export default function SupportPage() {
|
|
return (
|
|
<main className="support-page">
|
|
<section className="support-hero">
|
|
<div className="container support-hero-inner">
|
|
<p className="tag">Support</p>
|
|
<h1>Help for scans, care plans, billing, and account questions.</h1>
|
|
<p className="support-lead">
|
|
GreenLens helps users identify plants, understand their condition, and keep a collection organized.
|
|
If something breaks or feels unclear, this is the fastest place to start.
|
|
</p>
|
|
<div className="support-actions">
|
|
<a className="btn-primary" href={`mailto:${siteConfig.supportEmail}`}>
|
|
Email Support
|
|
</a>
|
|
<Link className="btn-outline support-outline" href="/privacy">
|
|
Privacy Policy
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="support-grid-wrap">
|
|
<div className="container support-grid">
|
|
<div className="support-card">
|
|
<h2>Contact</h2>
|
|
<p>
|
|
Email us at <a href={`mailto:${siteConfig.supportEmail}`}>{siteConfig.supportEmail}</a>
|
|
</p>
|
|
<p>Include your device type, app version, and what happened right before the issue.</p>
|
|
</div>
|
|
|
|
<div className="support-card">
|
|
<h2>Common topics</h2>
|
|
<ul className="support-list">
|
|
<li>Plant identification issues</li>
|
|
<li>Care reminder questions</li>
|
|
<li>Subscriptions and credit purchases</li>
|
|
<li>Account access and saved data</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="support-card">
|
|
<h2>Legal</h2>
|
|
<p>
|
|
Review our <Link href="/privacy">Privacy Policy</Link> and <Link href="/imprint">Imprint</Link>.
|
|
</p>
|
|
<p>These links should be used in App Store Connect before submission.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="support-faq">
|
|
<div className="container">
|
|
<div className="support-section-head">
|
|
<p className="tag">FAQ</p>
|
|
<h2>Quick answers before you write support.</h2>
|
|
</div>
|
|
|
|
<div className="support-faq-list">
|
|
{faqs.map((item) => (
|
|
<article key={item.question} className="support-faq-item">
|
|
<h3>{item.question}</h3>
|
|
<p>{item.answer}</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|