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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"hero": {
|
||||
"title": "Laten we bouwen",
|
||||
"subtitle": "Van idee naar werkend prototype in 4 weken",
|
||||
"description": "Klaar om jouw software sneller en goedkoper te bouwen? Vul het formulier in en we nemen binnen 24 uur contact op."
|
||||
"subtitle": "Van idee naar werkend prototype",
|
||||
"description": "Klaar om jouw software te bouwen? Vul het formulier in en we nemen contact op."
|
||||
},
|
||||
"form": {
|
||||
"title": "Start je speedrun",
|
||||
@@ -65,12 +65,12 @@
|
||||
},
|
||||
"success": {
|
||||
"title": "Aanvraag ontvangen!",
|
||||
"message": "We hebben je aanvraag ontvangen en nemen binnen 24 uur contact op. Check je inbox (en spam folder).",
|
||||
"message": "We hebben je aanvraag ontvangen en nemen contact op. Check je inbox (en spam folder).",
|
||||
"cta": "Terug naar home"
|
||||
},
|
||||
"error": {
|
||||
"title": "Er ging iets mis",
|
||||
"message": "We konden je aanvraag niet verwerken. Probeer het opnieuw of mail direct naar contact@speedrun.nl",
|
||||
"message": "We konden je aanvraag niet verwerken. Probeer het opnieuw.",
|
||||
"retry": "Opnieuw proberen"
|
||||
}
|
||||
},
|
||||
@@ -78,15 +78,10 @@
|
||||
"title": "Waarom AI Speedrun?",
|
||||
"items": [
|
||||
{
|
||||
"title": "4 weken doorlooptijd",
|
||||
"description": "Van eerste gesprek tot werkend prototype in één maand.",
|
||||
"title": "Snelle doorlooptijd",
|
||||
"description": "Van eerste gesprek tot werkend prototype in korte tijd.",
|
||||
"icon": "clock"
|
||||
},
|
||||
{
|
||||
"title": "€200 build cost",
|
||||
"description": "Transparante pricing zonder verborgen kosten of uurtarieven.",
|
||||
"icon": "euro"
|
||||
},
|
||||
{
|
||||
"title": "Modern tech stack",
|
||||
"description": "Next.js, Supabase, AI - battle-tested en toekomstbestendig.",
|
||||
@@ -103,16 +98,16 @@
|
||||
"title": "Veelgestelde vragen",
|
||||
"items": [
|
||||
{
|
||||
"question": "Wat krijg ik voor €200?",
|
||||
"answer": "Een werkend MVP/prototype met moderne tech stack (Next.js, Supabase), gehost op Vercel, met volledige source code toegang via GitHub. De €200 is de build cost - geen uurtarieven of verborgen kosten."
|
||||
"question": "Wat voor projecten bouw je?",
|
||||
"answer": "Een werkend MVP/prototype met moderne tech stack (Next.js, Supabase), gehost op Vercel, met volledige source code toegang via GitHub."
|
||||
},
|
||||
{
|
||||
"question": "Hoe lang duurt het echt?",
|
||||
"answer": "4 weken van kick-off tot werkend prototype. Week 1: requirements & design. Week 2-3: development. Week 4: testing & launch. Je krijgt wekelijkse updates en kan de voortgang live volgen."
|
||||
"question": "Hoe lang duurt het?",
|
||||
"answer": "Afhankelijk van de scope en complexiteit van het project. Week 1: requirements & design. Week 2-N: development. Laatste week: testing & launch. Je krijgt wekelijkse updates en kan de voortgang live volgen."
|
||||
},
|
||||
{
|
||||
"question": "Wat als ik meer features wil?",
|
||||
"answer": "We beginnen altijd met een MVP scope voor de €200. Extra features kunnen daarna als iteraties worden toegevoegd. We helpen je prioriteren wat er in de eerste 4 weken moet zitten."
|
||||
"answer": "We beginnen altijd met een MVP scope. Extra features kunnen daarna als iteraties worden toegevoegd. We helpen je prioriteren wat er in de eerste versie moet zitten."
|
||||
},
|
||||
{
|
||||
"question": "Krijg ik de source code?",
|
||||
|
||||
@@ -5,10 +5,6 @@
|
||||
"label": "Documentatie",
|
||||
"href": "/documentatie"
|
||||
},
|
||||
{
|
||||
"label": "Contact",
|
||||
"href": "/contact"
|
||||
},
|
||||
{
|
||||
"label": "Login",
|
||||
"href": "/login"
|
||||
|
||||
Reference in New Issue
Block a user