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 20:43:34 +01:00
parent 047c21278e
commit 1cfc92a922
7 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ContactForm/steps/AssetsStep.tsx
View File

@@ -63,8 +63,8 @@ export function AssetsStep({ state, updateState, toggleItem }: AssetsStepProps)
onChange={() => updateState({ assets: toggleItem(state.assets, opt.id) })} onChange={() => updateState({ assets: toggleItem(state.assets, opt.id) })}
/> />
{['logo', 'styleguide', 'content_concept'].includes(opt.id) && ( {['logo', 'styleguide', 'content_concept'].includes(opt.id) && (
<div className="absolute top-4 right-4 px-2 py-1 bg-slate-900 text-white text-[10px] font-bold uppercase tracking-wider rounded"> <div className="absolute top-4 right-4 px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">
Wichtig Empfohlen
</div> </div>
)} )}
</div> </div>

10
src/components/ContactForm/steps/BaseStep.tsx
View File

@@ -38,8 +38,8 @@ export function BaseStep({ state, updateState, toggleItem }: BaseStepProps) {
value={state.websiteTopic} value={state.websiteTopic}
onChange={(e) => updateState({ websiteTopic: e.target.value })} onChange={(e) => updateState({ websiteTopic: e.target.value })}
/> />
<div className="absolute top-0 right-4 px-2 py-1 bg-slate-900 text-white text-[10px] font-bold uppercase tracking-wider rounded"> <div className="absolute top-0 right-4 px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">
Wichtig Essenziell
</div> </div>
</div> </div>
</motion.div> </motion.div>
@@ -53,11 +53,11 @@ export function BaseStep({ state, updateState, toggleItem }: BaseStepProps) {
<div> <div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<h4 className="text-2xl font-bold text-slate-900">Die Seiten</h4> <h4 className="text-2xl font-bold text-slate-900">Die Seiten</h4>
<span className="px-2 py-1 bg-slate-900 text-white text-[10px] font-bold uppercase tracking-wider rounded">Wichtig</span> <span className="px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">Planungsbasis</span>
</div> </div>
<div className="flex items-center gap-2 text-slate-400 mt-1"> <div className="flex items-center gap-2 text-slate-400 mt-1">
<HelpCircle size={14} /> <HelpCircle size={14} className="shrink-0" />
<span className="text-sm">Warum ist das wichtig? Die Anzahl der Seiten bestimmt maßgeblich den Design- und Umsetzungsaufwand.</span> <span className="text-sm">Die Seitenstruktur hilft uns, den Umfang und die Komplexität Ihres Projekts präzise einzuschätzen.</span>
</div> </div>
</div> </div>
</div> </div>

2
src/components/ContactForm/steps/CompanyStep.tsx
View File

@@ -23,7 +23,7 @@ export function CompanyStep({ state, updateState }: CompanyStepProps) {
<Building2 size={24} /> <Building2 size={24} />
</div> </div>
<h4 className="text-2xl font-bold text-slate-900">Unternehmen</h4> <h4 className="text-2xl font-bold text-slate-900">Unternehmen</h4>
<span className="px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">Wichtig</span> <span className="px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">Erforderlich</span>
</div> </div>
<Input <Input
label="Name des Unternehmens" label="Name des Unternehmens"

8
src/components/ContactForm/steps/ContactStep.tsx
View File

@@ -36,8 +36,8 @@ export function ContactStep({ state, updateState }: ContactStepProps) {
value={state.name} value={state.name}
onChange={(e) => updateState({ name: e.target.value })} onChange={(e) => updateState({ name: e.target.value })}
/> />
<div className="absolute top-0 right-4 px-2 py-1 bg-slate-900 text-white text-[10px] font-bold uppercase tracking-wider rounded"> <div className="absolute top-0 right-4 px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">
Wichtig Erforderlich
</div> </div>
</div> </div>
</Reveal> </Reveal>
@@ -53,8 +53,8 @@ export function ContactStep({ state, updateState }: ContactStepProps) {
value={state.email} value={state.email}
onChange={(e) => updateState({ email: e.target.value })} onChange={(e) => updateState({ email: e.target.value })}
/> />
<div className="absolute top-0 right-4 px-2 py-1 bg-slate-900 text-white text-[10px] font-bold uppercase tracking-wider rounded"> <div className="absolute top-0 right-4 px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">
Wichtig Erforderlich
</div> </div>
</div> </div>
</Reveal> </Reveal>

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

@@ -75,7 +75,7 @@ export function TimelineStep({ state, updateState }: TimelineStepProps) {
<div className="space-y-2"> <div className="space-y-2">
<p className="text-amber-900 text-xl font-bold">Mögliche Verzögerungen</p> <p className="text-amber-900 text-xl font-bold">Mögliche Verzögerungen</p>
<p className="text-amber-800 text-base leading-relaxed"> <p className="text-amber-800 text-base leading-relaxed">
Da noch wichtige Informationen (z.B. {isMissingAssets ? 'Logo/Inhaltskonzept' : ''} {isMissingAssets && isMissingPages ? 'und' : ''} {isMissingPages ? 'Seitenstruktur' : ''}) fehlen, kann sich der Projektstart verzögern, bis diese vorliegen. Für einen reibungslosen Projektstart benötigen wir noch einige Details (z.B. {isMissingAssets ? 'Logo/Inhaltskonzept' : ''} {isMissingAssets && isMissingPages ? 'und' : ''} {isMissingPages ? 'Seitenstruktur' : ''}). Ohne diese kann sich der Beginn verzögern.
</p> </p>
</div> </div>
</div> </div>

2
src/components/ContactForm/steps/TypeStep.tsx
View File

@@ -31,7 +31,7 @@ export function TypeStep({ state, updateState }: TypeStepProps) {
<div className={`transition-transform duration-500 group-hover:scale-110 ${state.projectType === type.id ? 'text-white' : 'text-slate-900'}`}>{type.illustration}</div> <div className={`transition-transform duration-500 group-hover:scale-110 ${state.projectType === type.id ? 'text-white' : 'text-slate-900'}`}>{type.illustration}</div>
<div className="flex items-center gap-4 mb-4"> <div className="flex items-center gap-4 mb-4">
<h4 className={`text-4xl font-bold ${state.projectType === type.id ? 'text-white' : 'text-slate-900'}`}>{type.label}</h4> <h4 className={`text-4xl font-bold ${state.projectType === type.id ? 'text-white' : 'text-slate-900'}`}>{type.label}</h4>
<span className={`px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wider ${state.projectType === type.id ? 'bg-white/20 text-white' : 'bg-slate-100 text-slate-500'}`}>Wichtig</span> <span className={`px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wider ${state.projectType === type.id ? 'bg-white/20 text-white' : 'bg-slate-100 text-slate-500'}`}>Grundlage</span>
</div> </div>
<p className={`text-xl leading-relaxed ${state.projectType === type.id ? 'text-slate-200' : 'text-slate-500'}`}>{type.desc}</p> <p className={`text-xl leading-relaxed ${state.projectType === type.id ? 'text-slate-200' : 'text-slate-500'}`}>{type.desc}</p>

2
src/components/ContactForm/steps/WebAppStep.tsx
View File

@@ -26,7 +26,7 @@ export function WebAppStep({ state, updateState }: WebAppStepProps) {
<h4 className="text-2xl font-bold text-slate-900 flex items-center gap-3"> <h4 className="text-2xl font-bold text-slate-900 flex items-center gap-3">
<Users size={24} className="text-black" /> Zielgruppe <Users size={24} className="text-black" /> Zielgruppe
</h4> </h4>
<span className="px-2 py-1 bg-slate-900 text-white text-[10px] font-bold uppercase tracking-wider rounded">Wichtig</span> <span className="px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">Fokus</span>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{[ {[