feat: add Storybook with component stories

Installs @storybook/nextjs-vite. Stories co-located with components,
grouped by layer (Shared/Entities/Widgets). Multi-variant cases use
render functions instead of one story per variant/size.

src/shared/ui/Card/ui/Card.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card'
+
+const meta: Meta<typeof Card> = {
+  title: 'Shared/Card',
+  component: Card,
+}
+
+export default meta
+
+type Story = StoryObj<typeof Card>
+
+export const AllBackgrounds: Story = {
+  render: () => (
+    <div className="flex gap-6 flex-wrap p-8 bg-white">
+      <Card background="ochre" className="w-64">
+        <CardHeader>
+          <CardTitle>Ochre Card</CardTitle>
+          <CardDescription>Background ochre-clay variant</CardDescription>
+        </CardHeader>
+        <CardFooter>Footer content</CardFooter>
+      </Card>
+      <Card background="slate" className="w-64">
+        <CardHeader>
+          <CardTitle>Slate Card</CardTitle>
+          <CardDescription>Background slate-indigo variant</CardDescription>
+        </CardHeader>
+        <CardFooter>Footer content</CardFooter>
+      </Card>
+      <Card background="white" className="w-64">
+        <CardHeader>
+          <CardTitle>White Card</CardTitle>
+          <CardDescription>Background white variant</CardDescription>
+        </CardHeader>
+        <CardFooter>Footer content</CardFooter>
+      </Card>
+    </div>
+  ),
+}
+
+export const NoPadding: Story = {
+  render: () => (
+    <div className="p-8 bg-ochre-clay">
+      <Card noPadding className="w-64 overflow-hidden">
+        <div className="h-40 bg-slate-indigo flex items-center justify-center text-ochre-clay">
+          Image placeholder
+        </div>
+      </Card>
+    </div>
+  ),
+}
+
+export const FullComposition: Story = {
+  render: () => (
+    <div className="p-8 bg-white max-w-md">
+      <Card background="ochre">
+        <CardHeader>
+          <CardTitle>Full Composition</CardTitle>
+          <CardDescription>A card using all available slot components</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>This is the main body content of the card, placed inside CardContent.</p>
+        </CardContent>
+        <CardFooter>
+          <span className="text-sm opacity-70">Card footer</span>
+        </CardFooter>
+      </Card>
+    </div>
+  ),
+}