feat: implement landing page structure with legal pages, footer, CTA, and domain redirection proxy
This commit is contained in:
@@ -1,11 +1,27 @@
|
||||
import type { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
import { siteConfig } from '@/lib/site'
|
||||
import type { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
import Navbar from '@/components/Navbar'
|
||||
import Footer from '@/components/Footer'
|
||||
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.',
|
||||
}
|
||||
export const metadata: Metadata = {
|
||||
title: 'Support',
|
||||
description: 'Get support for GreenLens, including contact details, onboarding help, billing guidance, and privacy links.',
|
||||
alternates: {
|
||||
canonical: '/support',
|
||||
},
|
||||
openGraph: {
|
||||
title: 'Support | GreenLens',
|
||||
description: 'Get support for GreenLens, including contact details, onboarding help, billing guidance, and privacy links.',
|
||||
url: `${siteConfig.domain}/support`,
|
||||
type: 'website',
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: 'Support | GreenLens',
|
||||
description: 'Get support for GreenLens, including contact details, onboarding help, billing guidance, and privacy links.',
|
||||
},
|
||||
}
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
@@ -30,75 +46,83 @@ const faqs = [
|
||||
},
|
||||
]
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
export default function SupportPage() {
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<main className="support-page">
|
||||
<section className="support-hero">
|
||||
<div className="container support-hero-inner">
|
||||
<p style={{ marginBottom: '1rem', opacity: 0.75 }}>
|
||||
<Link href="/">Home</Link> / <span>Support</span>
|
||||
</p>
|
||||
<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>, <Link href="/terms">Terms of Service</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>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user