contact page
This commit is contained in:
colinislit
@@ -1,14 +1,10 @@
|
||||
/**
|
||||
* Contact Page
|
||||
*
|
||||
* Lead capture form with benefits and FAQ
|
||||
* Contact Page - Under Construction
|
||||
*/
|
||||
|
||||
import type { Metadata } from 'next'
|
||||
import { getContent } from '@/lib/content/loader'
|
||||
import type { ContactContent } from '@/content/schemas/manifesto'
|
||||
import { Clock, Euro, Code, Eye, ChevronDown } from 'lucide-react'
|
||||
import { ContactForm } from './contact-form'
|
||||
import { Construction } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
|
||||
// Generate metadata for SEO
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
@@ -16,11 +12,11 @@ export async function generateMetadata(): Promise<Metadata> {
|
||||
|
||||
return {
|
||||
title: 'Contact - AI Speedrun',
|
||||
description: 'Van idee naar werkend prototype in 4 weken voor €200. Start je speedrun vandaag.',
|
||||
description: 'Deze pagina is momenteel in ontwikkeling.',
|
||||
openGraph: {
|
||||
type: 'website',
|
||||
title: 'Contact - AI Speedrun',
|
||||
description: 'Van idee naar werkend prototype in 4 weken voor €200',
|
||||
description: 'Deze pagina is momenteel in ontwikkeling',
|
||||
images: [`${siteUrl}/og-image.png`],
|
||||
siteName: 'AI Speedrun',
|
||||
locale: 'nl_NL',
|
||||
@@ -31,116 +27,29 @@ export async function generateMetadata(): Promise<Metadata> {
|
||||
}
|
||||
}
|
||||
|
||||
export default async function ContactPage() {
|
||||
const content = await getContent<ContactContent>('nl', 'contact')
|
||||
|
||||
const iconMap = {
|
||||
clock: Clock,
|
||||
euro: Euro,
|
||||
code: Code,
|
||||
eye: Eye,
|
||||
}
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[40vh] flex items-center justify-center bg-gradient-to-br from-green-50 to-white px-4 pt-32 pb-16">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
||||
{content.hero.title}
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-green-600 font-medium mb-4">
|
||||
{content.hero.subtitle}
|
||||
</p>
|
||||
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
||||
{content.hero.description}
|
||||
</p>
|
||||
<section className="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-white px-4">
|
||||
<div className="max-w-2xl mx-auto text-center">
|
||||
<div className="inline-flex items-center justify-center w-24 h-24 bg-orange-100 rounded-full mb-8">
|
||||
<Construction className="w-12 h-12 text-orange-600" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Main Content - Two Column Layout */}
|
||||
<section className="py-16 px-4">
|
||||
<div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12">
|
||||
{/* Left Column - Form */}
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-slate-900 mb-6">
|
||||
{content.form.title}
|
||||
</h2>
|
||||
<ContactForm content={content.form} />
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
||||
Pagina in ontwikkeling
|
||||
</h1>
|
||||
|
||||
{/* Right Column - Benefits & FAQ */}
|
||||
<div className="space-y-12">
|
||||
{/* Benefits */}
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-slate-900 mb-6">
|
||||
{content.benefits.title}
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{content.benefits.items.map((benefit, index) => {
|
||||
const Icon = iconMap[benefit.icon as keyof typeof iconMap] || Clock
|
||||
return (
|
||||
<div key={index} className="flex gap-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
|
||||
<Icon className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-900 mb-1">
|
||||
{benefit.title}
|
||||
</h4>
|
||||
<p className="text-slate-600 text-sm">
|
||||
{benefit.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xl text-slate-600 mb-8">
|
||||
We zijn bezig met het bouwen van deze pagina. Kom binnenkort terug!
|
||||
</p>
|
||||
|
||||
{/* FAQ */}
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-slate-900 mb-6">
|
||||
{content.faq.title}
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{content.faq.items.map((item, index) => (
|
||||
<details
|
||||
key={index}
|
||||
className="group bg-slate-50 rounded-lg border border-slate-200 overflow-hidden"
|
||||
>
|
||||
<summary className="flex justify-between items-center cursor-pointer px-6 py-4 hover:bg-slate-100 transition-colors">
|
||||
<span className="font-medium text-slate-900">
|
||||
{item.question}
|
||||
</span>
|
||||
<ChevronDown className="w-5 h-5 text-slate-500 group-open:rotate-180 transition-transform" />
|
||||
</summary>
|
||||
<div className="px-6 py-4 border-t border-slate-200 text-slate-600">
|
||||
{item.answer}
|
||||
</div>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional CTA */}
|
||||
<div className="bg-gradient-to-br from-green-50 to-white border-2 border-green-200 rounded-lg p-6 text-center">
|
||||
<p className="text-slate-700 mb-4">
|
||||
<strong>Nog vragen?</strong> Stuur een email naar{' '}
|
||||
<a
|
||||
href="mailto:contact@speedrun.nl"
|
||||
className="text-green-600 hover:text-green-700 underline"
|
||||
>
|
||||
contact@speedrun.nl
|
||||
</a>
|
||||
</p>
|
||||
<p className="text-sm text-slate-600">
|
||||
We reageren binnen 24 uur
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center justify-center px-6 py-3 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition-colors"
|
||||
>
|
||||
Terug naar home
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user