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/Section/ui/Section.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { Section, Container } from './Section'
+
+const meta: Meta<typeof Section> = {
+  title: 'Shared/Section',
+  component: Section,
+}
+
+export default meta
+
+type Story = StoryObj<typeof Section>
+
+export const AllBackgrounds: Story = {
+  render: () => (
+    <div>
+      <Section background="ochre" className="py-12">
+        <Container>
+          <h2>Ochre Section</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </Container>
+      </Section>
+      <Section background="slate" className="py-12">
+        <Container>
+          <h2>Slate Section</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </Container>
+      </Section>
+      <Section background="white" className="py-12">
+        <Container>
+          <h2>White Section</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </Container>
+      </Section>
+    </div>
+  ),
+}
+
+export const Bordered: Story = {
+  render: () => (
+    <Section background="ochre" bordered className="py-12">
+      <Container>
+        <h2>Bordered Section</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </Container>
+    </Section>
+  ),
+}