Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve wizard layouts and animations

Browse Source
This commit is contained in:
DanielS
2026-08-10 23:29:42 +02:00
parent 2f63d716f2
commit f9cb3c0685
3 changed files with 459 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
shop/components/order-wizard.tsx
View File

@@ -498,8 +498,8 @@ export function OrderWizard({
}
})
return {
overallMonthlyTotal: monthly,
return {
overallMonthlyTotal: monthly,
overallOneTimeTotal: oneTime,
linkedFeeProducts: feeProducts
}
@@ -792,6 +792,18 @@ export function OrderWizard({
return (
<div className={`mx-auto px-4 ${step === 3 ? 'max-w-screen-2xl' : 'max-w-5xl'}`}>
{/* Dynamic Header */}
{step !== 3 && (
<div className="text-center mb-12">
<h1 className="text-5xl font-extrabold tracking-tight mb-4 text-gradient">
Konfigurieren Sie Ihre Lösung
</h1>
<p className="text-slate-400 text-lg max-w-2xl mx-auto">
Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
</p>
</div>
)}
{/* Global Stepper for Steps 1, 2, 4 */}
{step !== 3 && (
<div className="pt-12 pb-6">
@@ -867,10 +879,10 @@ export function OrderWizard({
<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">
Software konfigurieren
Konfigurieren Sie Ihre Lösung
</h1>
<p className="text-slate-400 text-sm">
Klicken Sie sich durch die Kategorien und wählen Sie Ihre Lizenzen.
Wählen Sie das passende Paket und die benötigten Module für Ihr Business.
</p>
</div>
@@ -885,20 +897,18 @@ export function OrderWizard({
<button
key={cat.id}
onClick={() => setActiveCategoryId(cat.id)}
className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${
isActive
className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${isActive
? 'bg-primary/10 border-primary text-white shadow-[0_0_20px_rgba(59,130,246,0.15)]'
: 'bg-white/5 border-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10'
}`}
}`}
>
{/* Left glow line for active category */}
{isActive && (
<div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
)}
<div className={`p-2 rounded-lg transition-colors ${
isActive ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400 group-hover:text-white'
}`}>
<div className={`p-2 rounded-lg transition-colors ${isActive ? 'bg-primary/20 text-primary' : 'bg-white/5 text-slate-400 group-hover:text-white'
}`}>
<CategoryIcon icon={cat.icon} className="w-4 h-4" />
</div>