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

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

@@ -11,18 +11,44 @@ interface ContactStepProps {
export function ContactStep({ state, updateState }: ContactStepProps) {
return (
<div className="space-y-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<input type="text" placeholder="Ihr Name" required value={state.name} onChange={(e) => updateState({ name: e.target.value })} className="w-full p-8 bg-white border border-slate-100 rounded-[2rem] focus:outline-none focus:border-slate-900 transition-colors rounded-[2rem]" />
<input type="email" placeholder="Ihre Email" required value={state.email} onChange={(e) => updateState({ email: e.target.value })} className="w-full p-8 bg-white border border-slate-100 rounded-[2rem] focus:outline-none focus:border-slate-900 transition-colors rounded-[2rem]" />
<div className="space-y-10">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<input
type="text"
placeholder="Ihr Name"
required
value={state.name}
onChange={(e) => updateState({ name: e.target.value })}
className="w-full p-8 bg-white border border-slate-100 rounded-[2rem] focus:outline-none focus:border-slate-900 transition-colors text-lg"
/>
<input
type="email"
placeholder="Ihre Email"
required
value={state.email}
onChange={(e) => updateState({ email: e.target.value })}
className="w-full p-8 bg-white border border-slate-100 rounded-[2rem] focus:outline-none focus:border-slate-900 transition-colors text-lg"
/>
</div>
<input type="text" placeholder="Ihre Rolle (z.B. CEO, Marketing Manager...)" value={state.role} onChange={(e) => updateState({ role: e.target.value })} className="w-full p-8 bg-white border border-slate-100 rounded-[2rem] focus:outline-none focus:border-slate-900 transition-colors rounded-[2rem]" />
<textarea placeholder="Erzählen Sie mir kurz von Ihrem Projekt..." value={state.message} onChange={(e) => updateState({ message: e.target.value })} rows={4} className="w-full p-8 bg-white border border-slate-100 rounded-[2rem] focus:outline-none focus:border-slate-900 transition-colors resize-none rounded-[2rem]" />
<input
type="text"
placeholder="Ihre Rolle (z.B. CEO, Marketing Manager...)"
value={state.role}
onChange={(e) => updateState({ role: e.target.value })}
className="w-full p-8 bg-white border border-slate-100 rounded-[2rem] focus:outline-none focus:border-slate-900 transition-colors text-lg"
/>
<textarea
placeholder="Erzählen Sie mir kurz von Ihrem Projekt..."
value={state.message}
onChange={(e) => updateState({ message: e.target.value })}
rows={5}
className="w-full p-8 bg-white border border-slate-100 rounded-[2rem] focus:outline-none focus:border-slate-900 transition-colors resize-none text-lg"
/>
<div className="space-y-4">
<p className="text-sm font-bold text-slate-900">Dateien hochladen (optional)</p>
<div className="space-y-6">
<p className="text-lg font-bold text-slate-900">Dateien hochladen (optional)</p>
<div
className={`relative group border-2 border-dashed rounded-[2rem] p-8 transition-all duration-300 flex flex-col items-center justify-center gap-4 cursor-pointer min-h-[160px] rounded-[2rem] ${
className={`relative group border-2 border-dashed rounded-[3rem] p-10 transition-all duration-300 flex flex-col items-center justify-center gap-6 cursor-pointer min-h-[200px] ${
state.contactFiles.length > 0 ? 'border-slate-900 bg-slate-50' : 'border-slate-200 hover:border-slate-400 bg-white'
}`}
onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
@@ -40,12 +66,12 @@ export function ContactStep({ state, updateState }: ContactStepProps) {
}} />
{state.contactFiles.length > 0 ? (
<div className="w-full space-y-2">
<div className="w-full space-y-3">
{state.contactFiles.map((file, idx) => (
<div key={idx} className="flex items-center justify-between p-3 bg-white border border-slate-100 rounded-xl shadow-sm">
<div className="flex items-center gap-3 text-slate-900">
<FileText size={20} className="text-slate-400" />
<span className="font-bold text-sm truncate max-w-[200px]">{file.name}</span>
<div key={idx} className="flex items-center justify-between p-4 bg-white border border-slate-100 rounded-2xl shadow-sm">
<div className="flex items-center gap-4 text-slate-900">
<FileText size={24} className="text-slate-400" />
<span className="font-bold text-base truncate max-w-[250px]">{file.name}</span>
</div>
<button
type="button"
@@ -53,20 +79,20 @@ export function ContactStep({ state, updateState }: ContactStepProps) {
e.stopPropagation();
updateState({ contactFiles: state.contactFiles.filter((_, i) => i !== idx) });
}}
className="p-1 hover:bg-slate-100 rounded-full transition-colors focus:outline-none overflow-hidden relative rounded-full"
className="p-2 hover:bg-slate-100 rounded-full transition-colors focus:outline-none"
>
<X size={16} />
<X size={20} />
</button>
</div>
))}
<p className="text-[10px] text-slate-400 text-center mt-4">Klicken oder ziehen, um weitere Dateien hinzuzufügen</p>
<p className="text-xs text-slate-400 text-center mt-6">Klicken oder ziehen, um weitere Dateien hinzuzufügen</p>
</div>
) : (
<>
<Upload size={32} className="text-slate-400 group-hover:text-slate-900 transition-colors" />
<Upload size={48} className="text-slate-400 group-hover:text-slate-900 transition-colors" />
<div className="text-center">
<p className="text-sm font-bold text-slate-900">Dateien hierher ziehen</p>
<p className="text-xs text-slate-500 mt-1">oder klicken zum Auswählen</p>
<p className="text-lg font-bold text-slate-900">Dateien hierher ziehen</p>
<p className="text-base text-slate-500 mt-1">oder klicken zum Auswählen</p>
</div>
</>
)}