contact page
This commit is contained in:
colinislit
@@ -1,14 +1,10 @@
|
|||||||
/**
|
/**
|
||||||
* Contact Page
|
* Contact Page - Under Construction
|
||||||
*
|
|
||||||
* Lead capture form with benefits and FAQ
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import type { Metadata } from 'next'
|
import type { Metadata } from 'next'
|
||||||
import { getContent } from '@/lib/content/loader'
|
import { Construction } from 'lucide-react'
|
||||||
import type { ContactContent } from '@/content/schemas/manifesto'
|
import Link from 'next/link'
|
||||||
import { Clock, Euro, Code, Eye, ChevronDown } from 'lucide-react'
|
|
||||||
import { ContactForm } from './contact-form'
|
|
||||||
|
|
||||||
// Generate metadata for SEO
|
// Generate metadata for SEO
|
||||||
export async function generateMetadata(): Promise<Metadata> {
|
export async function generateMetadata(): Promise<Metadata> {
|
||||||
@@ -16,11 +12,11 @@ export async function generateMetadata(): Promise<Metadata> {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
title: 'Contact - AI Speedrun',
|
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: {
|
openGraph: {
|
||||||
type: 'website',
|
type: 'website',
|
||||||
title: 'Contact - AI Speedrun',
|
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`],
|
images: [`${siteUrl}/og-image.png`],
|
||||||
siteName: 'AI Speedrun',
|
siteName: 'AI Speedrun',
|
||||||
locale: 'nl_NL',
|
locale: 'nl_NL',
|
||||||
@@ -31,116 +27,29 @@ export async function generateMetadata(): Promise<Metadata> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default async function ContactPage() {
|
export default function ContactPage() {
|
||||||
const content = await getContent<ContactContent>('nl', 'contact')
|
|
||||||
|
|
||||||
const iconMap = {
|
|
||||||
clock: Clock,
|
|
||||||
euro: Euro,
|
|
||||||
code: Code,
|
|
||||||
eye: Eye,
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<section className="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-white px-4">
|
||||||
{/* Hero Section */}
|
<div className="max-w-2xl mx-auto text-center">
|
||||||
<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="inline-flex items-center justify-center w-24 h-24 bg-orange-100 rounded-full mb-8">
|
||||||
<div className="max-w-3xl mx-auto text-center">
|
<Construction className="w-12 h-12 text-orange-600" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
||||||
{content.hero.title}
|
Pagina in ontwikkeling
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-xl md:text-2xl text-green-600 font-medium mb-4">
|
|
||||||
{content.hero.subtitle}
|
<p className="text-xl text-slate-600 mb-8">
|
||||||
</p>
|
We zijn bezig met het bouwen van deze pagina. Kom binnenkort terug!
|
||||||
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
|
||||||
{content.hero.description}
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
</section>
|
</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>
|
|
||||||
|
|
||||||
{/* 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>
|
|
||||||
|
|
||||||
{/* 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>
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"hero": {
|
"hero": {
|
||||||
"title": "Laten we bouwen",
|
"title": "Laten we bouwen",
|
||||||
"subtitle": "Van idee naar werkend prototype in 4 weken",
|
"subtitle": "Van idee naar werkend prototype",
|
||||||
"description": "Klaar om jouw software sneller en goedkoper te bouwen? Vul het formulier in en we nemen binnen 24 uur contact op."
|
"description": "Klaar om jouw software te bouwen? Vul het formulier in en we nemen contact op."
|
||||||
},
|
},
|
||||||
"form": {
|
"form": {
|
||||||
"title": "Start je speedrun",
|
"title": "Start je speedrun",
|
||||||
@@ -65,12 +65,12 @@
|
|||||||
},
|
},
|
||||||
"success": {
|
"success": {
|
||||||
"title": "Aanvraag ontvangen!",
|
"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"
|
"cta": "Terug naar home"
|
||||||
},
|
},
|
||||||
"error": {
|
"error": {
|
||||||
"title": "Er ging iets mis",
|
"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"
|
"retry": "Opnieuw proberen"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -78,15 +78,10 @@
|
|||||||
"title": "Waarom AI Speedrun?",
|
"title": "Waarom AI Speedrun?",
|
||||||
"items": [
|
"items": [
|
||||||
{
|
{
|
||||||
"title": "4 weken doorlooptijd",
|
"title": "Snelle doorlooptijd",
|
||||||
"description": "Van eerste gesprek tot werkend prototype in één maand.",
|
"description": "Van eerste gesprek tot werkend prototype in korte tijd.",
|
||||||
"icon": "clock"
|
"icon": "clock"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"title": "€200 build cost",
|
|
||||||
"description": "Transparante pricing zonder verborgen kosten of uurtarieven.",
|
|
||||||
"icon": "euro"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"title": "Modern tech stack",
|
"title": "Modern tech stack",
|
||||||
"description": "Next.js, Supabase, AI - battle-tested en toekomstbestendig.",
|
"description": "Next.js, Supabase, AI - battle-tested en toekomstbestendig.",
|
||||||
@@ -103,16 +98,16 @@
|
|||||||
"title": "Veelgestelde vragen",
|
"title": "Veelgestelde vragen",
|
||||||
"items": [
|
"items": [
|
||||||
{
|
{
|
||||||
"question": "Wat krijg ik voor €200?",
|
"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. De €200 is de build cost - geen uurtarieven of verborgen kosten."
|
"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?",
|
"question": "Hoe lang duurt het?",
|
||||||
"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."
|
"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?",
|
"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?",
|
"question": "Krijg ik de source code?",
|
||||||
|
|||||||
@@ -5,10 +5,6 @@
|
|||||||
"label": "Documentatie",
|
"label": "Documentatie",
|
||||||
"href": "/documentatie"
|
"href": "/documentatie"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"label": "Contact",
|
|
||||||
"href": "/contact"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"label": "Login",
|
"label": "Login",
|
||||||
"href": "/login"
|
"href": "/login"
|
||||||
|
|||||||
Reference in New Issue
Block a user