form

src/components/ContactForm/steps/ContactStep.tsx

@@ -15,28 +15,48 @@ interface ContactStepProps {
 export function ContactStep({ state, updateState }: ContactStepProps) {
   return (
     <div className="space-y-12">
+      <Reveal width="100%" delay={0.05}>
+        <div className="p-8 bg-slate-50 text-slate-900 rounded-[2.5rem] mb-8 border border-slate-100">
+          <h4 className="text-2xl font-bold mb-2">Fast geschafft! 🚀</h4>
+          <p className="text-slate-500 text-lg">
+            Ich habe alle Details für das Projekt von <span className="text-slate-900 font-bold">{state.companyName || 'Ihrem Unternehmen'}</span> erhalten.
+            Hinterlassen Sie mir noch Ihre Kontaktdaten, damit ich Ihnen ein konkretes Angebot erstellen kann.
+          </p>
+        </div>
+      </Reveal>
+
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
         <Reveal width="100%" delay={0.1}>
-          <Input
-            label="Ihr Name"
-            icon={User}
-            placeholder="Max Mustermann"
-            required
-            value={state.name}
-            onChange={(e) => updateState({ name: e.target.value })}
-          />
+          <div className="relative">
+            <Input
+              label="Ihr Name"
+              icon={User}
+              placeholder="Max Mustermann"
+              required
+              value={state.name}
+              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">
+              Wichtig
+            </div>
+          </div>
         </Reveal>
 
         <Reveal width="100%" delay={0.1}>
-          <Input
-            label="Ihre Email"
-            icon={Mail}
-            type="email"
-            placeholder="max@beispiel.de"
-            required
-            value={state.email}
-            onChange={(e) => updateState({ email: e.target.value })}
-          />
+          <div className="relative">
+            <Input
+              label="Ihre Email"
+              icon={Mail}
+              type="email"
+              placeholder="max@beispiel.de"
+              required
+              value={state.email}
+              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">
+              Wichtig
+            </div>
+          </div>
         </Reveal>
       </div>