From 9078b5631a57cc4ab95b42ce5d1a932dfaa22cab Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Tue, 11 Aug 2026 22:08:47 +0200
Subject: [PATCH] feat(wizard): add directional slide animations

---
 shop/components/order-wizard.tsx | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/shop/components/order-wizard.tsx b/shop/components/order-wizard.tsx
index 3d2104c..b63db5f 100644
--- a/shop/components/order-wizard.tsx
+++ b/shop/components/order-wizard.tsx
@@ -94,6 +94,7 @@ export function OrderWizard({
   const router = useRouter()
   // Upgrade-Mode: starte direkt bei Schritt 3 (Software)
   const [step, setStep] = useState(upgradeMode ? 3 : (initialOrder ? 3 : 1))
+  const [direction, setDirection] = useState(1)
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [selectedCompanyId, setSelectedCompanyId] = useState<string | null>(
     initialOrder?.company_id ?? (isAdmin ? 'all' : null)
@@ -543,10 +544,12 @@ export function OrderWizard({
         addToBasket()
       }
     }
+    setDirection(1)
     setStep(s => s + 1)
   }
 
   const prevStep = () => {
+    setDirection(-1)
     setStep(s => s - 1)
   }
 
@@ -848,7 +851,7 @@ export function OrderWizard({
       {/* Dynamic Header */}
       {step !== 3 && (
         <div className="text-center mb-12">
-          <h1 className="text-5xl font-extrabold tracking-tight mb-4 text-gradient">
+          <h1 className="text-5xl font-extrabold tracking-tight mb-4 text-white">
             Konfigurieren Sie Ihre Lösung
           </h1>
           <p className="text-slate-400 text-lg max-w-2xl mx-auto">
@@ -869,9 +872,9 @@ export function OrderWizard({
         {step === 1 && (
           <motion.div
             key="step1"
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -20 }}
+            initial={{ opacity: 0, y: direction * 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: direction * -20 }}
             className="space-y-6"
           >
             <StepCustomer
@@ -900,9 +903,9 @@ export function OrderWizard({
         {step === 2 && (
           <motion.div
             key="step2"
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -20 }}
+            initial={{ opacity: 0, y: direction * 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: direction * -20 }}
             className="space-y-6"
           >
             <StepBilling
@@ -921,9 +924,9 @@ export function OrderWizard({
         {step === 3 && (
           <motion.div
             key="step3"
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -20 }}
+            initial={{ opacity: 0, y: direction * 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: direction * -20 }}
             className="h-[calc(100vh-140px)] overflow-hidden"
           >
             <div className="grid grid-cols-1 lg:grid-cols-6 gap-6 h-full items-stretch">
@@ -931,7 +934,7 @@ export function OrderWizard({
               {/* LEFT: Categories Sidebar Menu */}
               <div className="lg:col-span-2 flex flex-col justify-start pr-4 space-y-6">
                 <div>
-                  <h1 className="text-3xl font-extrabold tracking-tight mb-2 text-gradient">
+                  <h1 className="text-3xl font-extrabold tracking-tight mb-2 text-white">
                     Konfigurieren Sie Ihre Lösung
                   </h1>
                   <p className="text-slate-400 text-sm">
@@ -1108,9 +1111,9 @@ export function OrderWizard({
         {step === 4 && (
           <motion.div
             key="step4"
-            initial={{ opacity: 0, scale: 0.98 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.98 }}
+            initial={{ opacity: 0, y: direction * 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: direction * -20 }}
             className="h-[calc(100vh-140px)] overflow-hidden w-full"
           >
             <StepSummary