Initial commit: Lageplan v1.0 - Next.js 15.5, React 19
This commit is contained in:
Pepe Ziberi
64
src/app/spenden/danke/page.tsx
Normal file
64
src/app/spenden/danke/page.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Heart, ArrowLeft, CheckCircle } from 'lucide-react'
|
||||
import { Logo } from '@/components/ui/logo'
|
||||
|
||||
export default function DankePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Navigation */}
|
||||
<nav className="border-b border-gray-100 bg-white">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<Logo size={36} />
|
||||
<span className="font-bold text-xl text-gray-900">Lageplan</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="max-w-2xl mx-auto px-4 py-20 text-center">
|
||||
<div className="w-24 h-24 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-8">
|
||||
<CheckCircle className="w-12 h-12 text-green-600" />
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl font-extrabold text-gray-900 mb-4">
|
||||
Vielen Dank!
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-gray-500 mb-2">
|
||||
Deine Spende ist angekommen.
|
||||
</p>
|
||||
<p className="text-gray-400 mb-10 max-w-md mx-auto">
|
||||
Dein Beitrag hilft direkt dabei, Lageplan weiterzuentwickeln und die Server am Laufen zu halten.
|
||||
Danke, dass du dieses Projekt unterstützt!
|
||||
</p>
|
||||
|
||||
<div className="bg-red-50 rounded-2xl p-8 border border-red-100 mb-10">
|
||||
<Heart className="w-8 h-8 text-red-500 mx-auto mb-3" />
|
||||
<p className="text-gray-700 font-medium">
|
||||
«Jede Spende motiviert mich, weiterzumachen. Danke von Herzen!»
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-2">— Pepe Ziberi, Entwickler von Lageplan</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link href="/">
|
||||
<Button variant="outline" size="lg">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Zur Startseite
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/app">
|
||||
<Button size="lg" className="bg-red-600 hover:bg-red-700">
|
||||
Zur App
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
11
src/app/spenden/layout.tsx
Normal file
11
src/app/spenden/layout.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Spenden',
|
||||
description: 'Unterstützen Sie die Weiterentwicklung von Lageplan.ch – der kostenlosen Krokier-App für Schweizer Feuerwehren.',
|
||||
robots: { index: true, follow: true },
|
||||
}
|
||||
|
||||
export default function SpendenLayout({ children }: { children: React.ReactNode }) {
|
||||
return <>{children}</>
|
||||
}
|
||||
230
src/app/spenden/page.tsx
Normal file
230
src/app/spenden/page.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Heart, Coffee, ArrowLeft, Loader2, Shield, Sparkles,
|
||||
Check, ChevronRight, Lightbulb,
|
||||
} from 'lucide-react'
|
||||
import { Logo } from '@/components/ui/logo'
|
||||
|
||||
const tiers = [
|
||||
{ value: 5, label: 'Kaffee', emoji: '\u2615', desc: 'Ein Kaffee für die nächste Coding-Session' },
|
||||
{ value: 10, label: 'Pizza', emoji: '\uD83C\uDF55', desc: 'Pizza-Abend nach einem langen Entwicklungstag' },
|
||||
{ value: 25, label: 'Server', emoji: '\uD83D\uDDA5\uFE0F', desc: 'Hilft die monatlichen Serverkosten zu decken' },
|
||||
{ value: 50, label: 'Feature', emoji: '\uD83D\uDE80', desc: 'Finanziert die Entwicklung eines neuen Features' },
|
||||
]
|
||||
|
||||
export default function SpendenPage() {
|
||||
const [amount, setAmount] = useState(10)
|
||||
const [name, setName] = useState('')
|
||||
const [message, setMessage] = useState('')
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [stripeConfigured, setStripeConfigured] = useState<boolean | null>(null)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/donate/config')
|
||||
.then(r => r.json())
|
||||
.then(data => setStripeConfigured(data.configured))
|
||||
.catch(() => setStripeConfigured(false))
|
||||
}, [])
|
||||
|
||||
const activeTier = tiers.reduce((prev, curr) =>
|
||||
amount >= curr.value ? curr : prev
|
||||
, tiers[0])
|
||||
|
||||
const handleDonate = async () => {
|
||||
setIsLoading(true)
|
||||
setError('')
|
||||
try {
|
||||
const res = await fetch('/api/donate/checkout', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ amount, name: name.trim() || undefined, message: message.trim() || undefined }),
|
||||
})
|
||||
const data = await res.json()
|
||||
if (!res.ok) throw new Error(data.error || 'Fehler beim Erstellen der Zahlung')
|
||||
if (data.url) {
|
||||
window.location.href = data.url
|
||||
}
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Navigation */}
|
||||
<nav className="border-b border-gray-100 bg-white">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<Logo size={36} />
|
||||
<span className="font-bold text-xl text-gray-900">Lageplan</span>
|
||||
</Link>
|
||||
<Link href="/">
|
||||
<Button variant="ghost" size="sm">
|
||||
<ArrowLeft className="w-4 h-4 mr-1" />
|
||||
Zurück
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="max-w-3xl mx-auto px-4 py-12">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-12">
|
||||
<div className="w-20 h-20 rounded-full bg-gradient-to-br from-red-500 to-red-700 flex items-center justify-center mx-auto mb-6 shadow-xl">
|
||||
<Heart className="w-10 h-10 text-white" />
|
||||
</div>
|
||||
<h1 className="text-4xl font-extrabold text-gray-900 mb-4">Lageplan unterstützen</h1>
|
||||
<p className="text-lg text-gray-500 max-w-xl mx-auto">
|
||||
Lageplan ist ein kostenloses Herzensprojekt von einem Feuerwehrmann für Feuerwehrleute.
|
||||
Mit deiner Spende hilfst du, die Weiterentwicklung und den Betrieb zu finanzieren.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Why donate */}
|
||||
<div className="bg-gradient-to-r from-red-50 to-orange-50 rounded-2xl p-6 md:p-8 border border-red-100 mb-10">
|
||||
<div className="flex items-start gap-4">
|
||||
<Lightbulb className="w-7 h-7 text-red-500 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<h3 className="font-bold text-gray-900 mb-2">Wohin fliesst deine Spende?</h3>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li className="flex items-center gap-2"><Shield className="w-4 h-4 text-red-500 shrink-0" /> Server-Hosting in der Schweiz (monatliche Kosten)</li>
|
||||
<li className="flex items-center gap-2"><Sparkles className="w-4 h-4 text-red-500 shrink-0" /> Entwicklung neuer Features (PWA, Vorlagen, Einsatzpläne)</li>
|
||||
<li className="flex items-center gap-2"><Coffee className="w-4 h-4 text-red-500 shrink-0" /> Domain, SSL-Zertifikate und Infrastruktur</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Donation form */}
|
||||
<div className="bg-white rounded-2xl border border-gray-200 shadow-lg p-6 md:p-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-6">Betrag wählen</h2>
|
||||
|
||||
{/* Quick amounts */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-8">
|
||||
{tiers.map(tier => (
|
||||
<button
|
||||
key={tier.value}
|
||||
onClick={() => setAmount(tier.value)}
|
||||
className={`rounded-xl p-4 text-center transition-all border-2 ${
|
||||
amount === tier.value
|
||||
? 'border-red-500 bg-red-50 shadow-md'
|
||||
: 'border-gray-100 hover:border-gray-200 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<span className="text-2xl block mb-1">{tier.emoji}</span>
|
||||
<span className="text-lg font-bold text-gray-900">CHF {tier.value}</span>
|
||||
<span className="text-xs text-gray-500 block mt-0.5">{tier.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Slider */}
|
||||
<div className="mb-6">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-sm text-gray-500">Oder wähle einen eigenen Betrag:</span>
|
||||
<span className="text-xl font-bold text-red-600">CHF {amount}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="5"
|
||||
max="200"
|
||||
step="5"
|
||||
value={amount}
|
||||
onChange={e => setAmount(parseInt(e.target.value))}
|
||||
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-red-600"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-gray-400 mt-1">
|
||||
<span>CHF 5</span>
|
||||
<span>CHF 200</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Current tier description */}
|
||||
<div className="bg-gray-50 rounded-xl p-4 mb-6 text-center">
|
||||
<span className="text-3xl">{activeTier.emoji}</span>
|
||||
<p className="text-sm text-gray-600 mt-2">{activeTier.desc}</p>
|
||||
</div>
|
||||
|
||||
{/* Optional name & message */}
|
||||
<div className="space-y-4 mb-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Dein Name (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
placeholder="Anonym"
|
||||
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Nachricht (optional)</label>
|
||||
<textarea
|
||||
value={message}
|
||||
onChange={e => setMessage(e.target.value)}
|
||||
placeholder="z.B. Weiter so! Tolles Projekt."
|
||||
rows={2}
|
||||
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent resize-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 rounded-lg p-3 mb-4 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CTA */}
|
||||
{stripeConfigured === false ? (
|
||||
<div className="bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-lg p-4 text-sm text-center">
|
||||
Spenden sind aktuell nicht möglich. Die Zahlungsabwicklung wird gerade eingerichtet.
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
onClick={handleDonate}
|
||||
disabled={isLoading || stripeConfigured === null}
|
||||
className="w-full bg-red-600 hover:bg-red-700 h-12 text-base"
|
||||
>
|
||||
{isLoading ? (
|
||||
<><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Weiterleitung zu Stripe...</>
|
||||
) : (
|
||||
<><Heart className="w-4 h-4 mr-2" /> CHF {amount} spenden</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div className="mt-4 flex flex-wrap items-center justify-center gap-4 text-xs text-gray-400">
|
||||
<span className="flex items-center gap-1"><Shield className="w-3.5 h-3.5" /> Sichere Zahlung via Stripe</span>
|
||||
<span className="flex items-center gap-1"><Check className="w-3.5 h-3.5" /> Kreditkarte & Twint</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Trust */}
|
||||
<div className="mt-10 text-center">
|
||||
<p className="text-sm text-gray-500">
|
||||
100% deiner Spende fliesst direkt in Serverkosten und Weiterentwicklung.
|
||||
<br />Kein Unternehmen, keine Investoren — nur ein Feuerwehrmann mit einer Idee.
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<Link href="/">
|
||||
<Button variant="outline" size="sm">
|
||||
<ArrowLeft className="w-4 h-4 mr-1" />
|
||||
Zurück zur Startseite
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user