style(onboarding): add branding to shell, fix progress bar full width

src/features/onboarding/onboarding-shell.tsx

@@ -1,9 +1,11 @@
 "use client";
 
+import Image from "next/image";
 import { useOnboarding } from "@onboardjs/react";
 import { Button } from "@/components/ui/button";
 import { OnboardingStepper } from "@/features/onboarding/onboarding-stepper";
-import { OnboardingPreview } from "@/features/onboarding/onboarding-preview";
+import { OnboardingChecklist } from "@/features/onboarding/onboarding-checklist";
+import Logo from "@/app/icon0.svg";
 
 export const OnboardingShell = () => {
     const { state, previous, skip, renderStep } = useOnboarding();
@@ -13,7 +15,14 @@ export const OnboardingShell = () => {
     const showSplit = state.currentStep?.id !== "agent-waiting" && state.currentStep?.id !== "finish";
 
     return (
-        <div className="min-h-screen bg-zinc-950 text-white flex items-center justify-center p-4">
+        <div className="min-h-screen bg-zinc-950 text-white flex flex-col items-center justify-center p-4 gap-4">
+            {/* Logo */}
+            <div className="flex items-center gap-2">
+                <Image src={Logo} alt="Portabase" width={28} height={28} />
+                <span className="text-lg font-semibold tracking-tight">Portabase</span>
+            </div>
+
+            {/* Card */}
             <div className="w-full max-w-4xl rounded-2xl bg-zinc-900 border border-white/10 shadow-2xl overflow-hidden flex flex-col md:flex-row min-h-[560px]">
                 <div className="flex-1 flex flex-col gap-6 p-8">
                     <OnboardingStepper />
@@ -40,11 +49,14 @@ export const OnboardingShell = () => {
                     </div>
                 </div>
                 {showSplit && (
-                    <div className="hidden md:block w-[360px] border-l border-white/10 bg-zinc-950">
-                        <OnboardingPreview />
+                    <div className="hidden md:block w-[300px] border-l border-white/10 bg-zinc-950">
+                        <OnboardingChecklist />
                     </div>
                 )}
             </div>
+
+            {/* Footer */}
+            <p className="text-xs text-zinc-600">Made with ♥ by Portabase</p>
         </div>
     );
 };

src/features/onboarding/onboarding-stepper.tsx

@@ -9,7 +9,7 @@ export const OnboardingStepper = () => {
     if (!state) return null;
 
     return (
-        <div className="flex flex-col gap-2 w-full max-w-sm">
+        <div className="flex flex-col gap-2 w-full">
             <div className="flex justify-between text-xs text-muted-foreground">
                 <span>Step {state.currentStepNumber} of {state.totalSteps}</span>
                 <span>{Math.round(state.progressPercentage)}%</span>