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

web app form

Browse Source
This commit is contained in:
Marc Mintel
2026-01-30 11:04:48 +01:00
parent cea56ac58d
commit 316e4b6fe9
19 changed files with 540 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ContactForm/steps/TimelineStep.tsx
View File

@@ -11,8 +11,8 @@ interface TimelineStepProps {
export function TimelineStep({ state, updateState }: TimelineStepProps) {
return (
<div className="space-y-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-12">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{[
{ id: 'asap', label: 'So schnell wie möglich', desc: 'Priorisierter Start gewünscht.' },
{ id: '2-3-months', label: 'In 2-3 Monaten', desc: 'Normaler Projektvorlauf.' },
@@ -23,19 +23,19 @@ export function TimelineStep({ state, updateState }: TimelineStepProps) {
key={opt.id}
type="button"
onClick={() => updateState({ deadline: opt.id })}
className={`p-8 rounded-[2rem] border-2 text-left transition-all focus:outline-none overflow-hidden relative rounded-[2rem] ${
className={`p-10 rounded-[2.5rem] border-2 text-left transition-all focus:outline-none overflow-hidden relative ${
state.deadline === opt.id ? 'border-slate-900 bg-slate-900 text-white' : 'border-slate-100 bg-white hover:border-slate-200'
}`}
>
<h4 className={`font-bold mb-1 ${state.deadline === opt.id ? 'text-white' : 'text-slate-900'}`}>{opt.label}</h4>
<p className={`text-sm ${state.deadline === opt.id ? 'text-white opacity-80' : 'text-slate-500'}`}>{opt.desc}</p>
<h4 className={`text-2xl font-bold mb-2 ${state.deadline === opt.id ? 'text-white' : 'text-slate-900'}`}>{opt.label}</h4>
<p className={`text-lg ${state.deadline === opt.id ? 'text-slate-200' : 'text-slate-500'}`}>{opt.desc}</p>
</button>
))}
</div>
{state.deadline === 'asap' && (
<div className="p-6 bg-slate-50 rounded-2xl border border-slate-100 flex gap-4 items-start">
<AlertCircle className="text-slate-900 shrink-0 mt-1" size={20} />
<p className="text-xs text-slate-600 leading-relaxed">
<div className="p-8 bg-slate-50 rounded-[2rem] border border-slate-100 flex gap-6 items-start">
<AlertCircle className="text-slate-900 shrink-0 mt-1" size={28} />
<p className="text-base text-slate-600 leading-relaxed">
<strong>Hinweis:</strong> Bei sehr kurzfristigen Deadlines kann ein Express-Zuschlag anfallen, um die Kapazitäten entsprechend zu priorisieren.
</p>
</div>