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

form
Some checks failed
Build & Deploy Mintel Blog / build-and-deploy (push) Failing after 56s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-30 18:11:52 +01:00
parent 8c1a7f6b5a
commit 8124e9cc95
16 changed files with 326 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,7 @@ import { FormState } from '../types';
import { FileText, Upload, X, User, Mail, Briefcase, MessageSquare } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { Reveal } from '../../Reveal';
import { Input } from '../components/Input';
interface ContactStepProps {
state: FormState;
@@ -16,78 +17,49 @@ export function ContactStep({ state, updateState }: ContactStepProps) {
<div className="space-y-12">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<Reveal width="100%" delay={0.1}>
<div className="space-y-4">
<label className="block text-sm font-bold uppercase tracking-widest text-slate-400 ml-2">Ihr Name</label>
<div className="relative group">
<div className="absolute left-6 top-1/2 -translate-y-1/2 text-slate-300 group-focus-within:text-slate-900 transition-colors">
<User size={24} />
</div>
<input
type="text"
placeholder="Max Mustermann"
required
value={state.name}
onChange={(e) => updateState({ name: e.target.value })}
className="w-full p-8 pl-16 bg-white border border-slate-100 rounded-[2.5rem] focus:outline-none focus:border-slate-900 transition-all duration-500 text-xl shadow-sm focus:shadow-2xl"
/>
</div>
</div>
<Input
label="Ihr Name"
icon={User}
placeholder="Max Mustermann"
required
value={state.name}
onChange={(e) => updateState({ name: e.target.value })}
/>
</Reveal>
<Reveal width="100%" delay={0.1}>
<div className="space-y-4">
<label className="block text-sm font-bold uppercase tracking-widest text-slate-400 ml-2">Ihre Email</label>
<div className="relative group">
<div className="absolute left-6 top-1/2 -translate-y-1/2 text-slate-300 group-focus-within:text-slate-900 transition-colors">
<Mail size={24} />
</div>
<input
type="email"
placeholder="max@beispiel.de"
required
value={state.email}
onChange={(e) => updateState({ email: e.target.value })}
className="w-full p-8 pl-16 bg-white border border-slate-100 rounded-[2.5rem] focus:outline-none focus:border-slate-900 transition-all duration-500 text-xl shadow-sm focus:shadow-2xl"
/>
</div>
</div>
<Input
label="Ihre Email"
icon={Mail}
type="email"
placeholder="max@beispiel.de"
required
value={state.email}
onChange={(e) => updateState({ email: e.target.value })}
/>
</Reveal>
</div>
<Reveal width="100%" delay={0.2}>
<div className="space-y-4">
<label className="block text-sm font-bold uppercase tracking-widest text-slate-400 ml-2">Ihre Rolle</label>
<div className="relative group">
<div className="absolute left-6 top-1/2 -translate-y-1/2 text-slate-300 group-focus-within:text-slate-900 transition-colors">
<Briefcase size={24} />
</div>
<input
type="text"
placeholder="z.B. CEO, Marketing Manager..."
value={state.role}
onChange={(e) => updateState({ role: e.target.value })}
className="w-full p-8 pl-16 bg-white border border-slate-100 rounded-[2.5rem] focus:outline-none focus:border-slate-900 transition-all duration-500 text-xl shadow-sm focus:shadow-2xl"
/>
</div>
</div>
<Input
label="Ihre Rolle"
icon={Briefcase}
placeholder="z.B. CEO, Marketing Manager..."
value={state.role}
onChange={(e) => updateState({ role: e.target.value })}
/>
</Reveal>
<Reveal width="100%" delay={0.3}>
<div className="space-y-4">
<label className="block text-sm font-bold uppercase tracking-widest text-slate-400 ml-2">Nachricht</label>
<div className="relative group">
<div className="absolute left-6 top-10 text-slate-300 group-focus-within:text-slate-900 transition-colors">
<MessageSquare size={24} />
</div>
<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 pl-16 bg-white border border-slate-100 rounded-[2.5rem] focus:outline-none focus:border-slate-900 transition-all duration-500 resize-none text-xl shadow-sm focus:shadow-2xl"
/>
</div>
</div>
<Input
label="Nachricht"
icon={MessageSquare}
isTextArea
rows={5}
placeholder="Erzählen Sie mir kurz von Ihrem Projekt..."
value={state.message}
onChange={(e) => updateState({ message: e.target.value })}
/>
</Reveal>
<Reveal width="100%" delay={0.4}>
@@ -95,7 +67,7 @@ export function ContactStep({ state, updateState }: ContactStepProps) {
<p className="text-lg font-bold text-slate-900 ml-2">Dateien hochladen (optional)</p>
<div
className={`relative group border-2 border-dashed rounded-[3rem] p-12 transition-all duration-500 flex flex-col items-center justify-center gap-6 cursor-pointer min-h-[250px] ${
state.contactFiles.length > 0 ? 'border-slate-900 bg-slate-50 shadow-inner' : 'border-slate-200 hover:border-slate-400 bg-white hover:shadow-xl'
state.contactFiles.length > 0 ? 'border-slate-900 bg-slate-50' : 'border-slate-200 hover:border-slate-400 bg-white hover:shadow-xl'
}`}
onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
onDrop={(e) => {
@@ -126,7 +98,7 @@ export function ContactStep({ state, updateState }: ContactStepProps) {
initial={{ opacity: 0, x: -10 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: idx * 0.05 }}
className="flex items-center justify-between p-5 bg-white border border-slate-100 rounded-2xl shadow-sm group/file"
className="flex items-center justify-between p-5 bg-white border border-slate-100 rounded-2xl group/file"
>
<div className="flex items-center gap-4 text-slate-900">
<div className="w-10 h-10 bg-slate-50 rounded-xl flex items-center justify-center text-slate-400 group-hover/file:text-slate-900 transition-colors">