mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

form

Browse Source
This commit is contained in:
Marc Mintel
2026-01-30 10:35:31 +01:00
parent ba08724a52
commit cea56ac58d
60 changed files with 1922 additions and 1305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/ContactForm/steps/ContentStep.tsx Normal file
View File

@@ -0,0 +1,83 @@
'use client';
import * as React from 'react';
import { FormState } from '../types';
import { Zap, AlertCircle, Minus, Plus } from 'lucide-react';
interface ContentStepProps {
state: FormState;
updateState: (updates: Partial<FormState>) => void;
}
export function ContentStep({ state, updateState }: ContentStepProps) {
return (
<div className="space-y-8">
<div className="flex items-center justify-between p-8 bg-white border border-slate-100 rounded-[2rem]">
<div className="max-w-[70%]">
<h4 className="text-xl font-bold text-slate-900">Inhalte selbst verwalten (CMS)</h4>
<p className="text-sm text-slate-500 mt-1">Möchten Sie Datensätze (z.B. Blogartikel, Produkte) selbst über eine einfache Oberfläche pflegen?</p>
</div>
<button
type="button"
onClick={() => updateState({ cmsSetup: !state.cmsSetup })}
className={`w-16 h-9 rounded-full transition-colors relative focus:outline-none ${state.cmsSetup ? 'bg-slate-900' : 'bg-slate-200'}`}
>
<div className={`absolute top-1 left-1 w-7 h-7 bg-white rounded-full transition-transform ${state.cmsSetup ? 'translate-x-7' : ''}`} />
</button>
</div>
<div className="p-8 bg-slate-50 rounded-[2rem] border border-slate-100 space-y-4">
<p className="text-sm font-bold text-slate-900">Wie oft ändern sich Ihre Inhalte?</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{[
{ id: 'low', label: 'Selten', desc: 'Wenige Male im Jahr.' },
{ id: 'medium', label: 'Regelmäßig', desc: 'Monatliche Updates.' },
{ id: 'high', label: 'Häufig', desc: 'Wöchentlich oder täglich.' },
].map(opt => (
<button
key={opt.id}
type="button"
onClick={() => updateState({ expectedAdjustments: opt.id })}
className={`p-4 rounded-2xl border-2 text-left transition-all focus:outline-none ${
state.expectedAdjustments === opt.id ? 'border-slate-900 bg-slate-900 text-white' : 'border-slate-200 bg-white hover:border-slate-400'
}`}
>
<p className="font-bold text-sm">{opt.label}</p>
<p className={`text-[10px] ${state.expectedAdjustments === opt.id ? 'text-slate-200' : 'text-slate-500'}`}>{opt.desc}</p>
</button>
))}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
<div className="p-6 bg-white rounded-2xl border border-slate-100 space-y-2">
<div className="flex items-center gap-2 text-slate-900 font-bold text-xs uppercase tracking-wider">
<Zap size={14} /> Vorteil CMS
</div>
<p className="text-[11px] text-slate-500 leading-relaxed">
Volle Kontrolle über Ihre Inhalte und keine laufenden Kosten für kleine Textänderungen oder neue Blog-Beiträge.
</p>
</div>
<div className="p-6 bg-white rounded-2xl border border-slate-100 space-y-2">
<div className="flex items-center gap-2 text-slate-900 font-bold text-xs uppercase tracking-wider">
<AlertCircle size={14} /> Fokus Design
</div>
<p className="text-[11px] text-slate-500 leading-relaxed">
Ohne CMS bleibt die technische Komplexität geringer und das Design ist maximal geschützt vor ungewollten Änderungen.
</p>
</div>
</div>
</div>
<div className="flex flex-col gap-4 p-8 bg-white border border-slate-100 rounded-[2rem]">
<div>
<h4 className="text-xl font-bold text-slate-900">Inhalte einpflegen</h4>
<p className="text-sm text-slate-500 mt-2 leading-relaxed">Für wie viele Datensätze soll ich die initiale Befüllung übernehmen?</p>
</div>
<div className="flex items-center gap-8 mt-2">
<button type="button" onClick={() => updateState({ newDatasets: Math.max(0, state.newDatasets - 1) })} className="w-12 h-12 rounded-full bg-slate-50 border border-slate-100 flex items-center justify-center hover:border-slate-900 transition-colors focus:outline-none"><Minus size={20} /></button>
<span className="text-3xl font-bold w-12 text-center">{state.newDatasets}</span>
<button type="button" onClick={() => updateState({ newDatasets: state.newDatasets + 1 })} className="w-12 h-12 rounded-full bg-slate-50 border border-slate-100 flex items-center justify-center hover:border-slate-900 transition-colors focus:outline-none"><Plus size={20} /></button>
</div>
</div>
</div>
);
}