setup onboarding page

src/features/onboarding/steps/DoneStep.tsx

@@ -0,0 +1,120 @@
+import { Button } from '@astryxdesign/core/Button';
+import { HStack } from '@astryxdesign/core/HStack';
+import { Text } from '@astryxdesign/core/Text';
+import { VStack } from '@astryxdesign/core/VStack';
+import { ArrowRight, Boxes, Check, LayoutDashboard, PackageSearch } from 'lucide-react';
+
+/**
+ * The end.
+ *
+ * One quiet animation — a tick that draws itself once — and then straight to
+ * what comes next. Confetti on a business tool is a celebration the user did
+ * not ask for, and it delays the three things they actually came here to do.
+ *
+ * The three cards are the real next actions, not a tour: each is a screen that
+ * exists and does something.
+ */
+export interface DoneStepProps {
+  productCount: number;
+  onCatalogue: () => void;
+  onInventory: () => void;
+  onStorefront: () => void;
+  onDashboard: () => void;
+}
+
+export function DoneStep({
+  productCount,
+  onCatalogue,
+  onInventory,
+  onStorefront,
+  onDashboard,
+}: DoneStepProps) {
+  return (
+    <VStack gap={4} className="ob-panel">
+      <VStack gap={1.5} style={{ textAlign: 'center', alignItems: 'center' }}>
+        <span className="ob-tick" aria-hidden>
+          <Check size={30} strokeWidth={3} />
+        </span>
+        <Text
+          type="display-2"
+          weight="semibold"
+          style={{ fontFamily: 'var(--font-display)', textWrap: 'balance' }}
+        >
+          You&rsquo;re all set 🎉
+        </Text>
+        <Text type="body" color="secondary" style={{ maxWidth: '48ch', lineHeight: 1.65 }}>
+          {productCount > 0
+            ? 'Your store is set up and your products are ready for customers.'
+            : 'Your store is set up. Add some products and they will be ready for customers.'}
+        </Text>
+      </VStack>
+
+      <div className="ob-benefits">
+        <NextCard
+          icon={<Boxes size={20} />}
+          title="Manage your catalogue"
+          body="Add products, set prices, and release them to your shops."
+          cta="Open catalogue"
+          onClick={onCatalogue}
+        />
+        <NextCard
+          icon={<PackageSearch size={20} />}
+          title="Update your stock"
+          body="Upload your latest counts so customers see what is really there."
+          cta="Update stock"
+          onClick={onInventory}
+        />
+        <NextCard
+          icon={<LayoutDashboard size={20} />}
+          title="See your shop"
+          body="Check what a customer sees, and which products are on sale."
+          cta="View products"
+          onClick={onStorefront}
+        />
+      </div>
+
+      <HStack justify="center">
+        <Button
+          label="Go to the console"
+          variant="primary"
+          size="lg"
+          endContent={<ArrowRight size={15} />}
+          onClick={onDashboard}
+        />
+      </HStack>
+    </VStack>
+  );
+}
+
+function NextCard({
+  icon,
+  title,
+  body,
+  cta,
+  onClick,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  body: string;
+  cta: string;
+  onClick: () => void;
+}) {
+  return (
+    <button type="button" className="ob-choice" onClick={onClick}>
+      <VStack gap={1}>
+        <span style={{ color: 'var(--color-brand)' }} aria-hidden>
+          {icon}
+        </span>
+        <Text type="label" size="sm" weight="semibold">
+          {title}
+        </Text>
+        <Text type="body" size="sm" color="secondary" style={{ lineHeight: 1.6 }}>
+          {body}
+        </Text>
+        <Text type="label" size="sm" weight="semibold" style={{ color: 'var(--color-brand)' }}>
+          {cta} →
+        </Text>
+      </VStack>
+    </button>
+  );
+}