From fc245407a11bfc24e0f46ccb19fabced7a0bf79c Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 6 Mar 2026 23:16:34 +0300
Subject: [PATCH] feat(shared/ui): add Card, Section, and TechStackBrick
 components

---
 src/shared/ui/Section/Container.svelte       | 32 +++++++++++++++
 src/shared/ui/Section/Section.stories.svelte | 42 ++++++++++++++++++++
 src/shared/ui/Section/Section.svelte         | 37 +++++++++++++++++
 src/shared/ui/Section/index.ts               |  3 ++
 src/shared/ui/Section/types.ts               |  2 +
 5 files changed, 116 insertions(+)
 create mode 100644 src/shared/ui/Section/Container.svelte
 create mode 100644 src/shared/ui/Section/Section.stories.svelte
 create mode 100644 src/shared/ui/Section/Section.svelte
 create mode 100644 src/shared/ui/Section/index.ts
 create mode 100644 src/shared/ui/Section/types.ts

diff --git a/src/shared/ui/Section/Container.svelte b/src/shared/ui/Section/Container.svelte
new file mode 100644
index 0000000..86fb913
--- /dev/null
+++ b/src/shared/ui/Section/Container.svelte
@@ -0,0 +1,32 @@
+<!--
+    Component: Container
+    Centered max-width wrapper. Three size presets for responsive layouts up to 4K.
+-->
+<script lang="ts">
+import { cn } from '$shared/lib/cn';
+import type { Snippet } from 'svelte';
+import type { ContainerSize } from './types';
+
+interface Props {
+    /** Max-width preset @default 'default' */
+    size?: ContainerSize;
+    children?: Snippet;
+    class?: string;
+}
+
+let { size = 'default', children, class: className }: Props = $props();
+
+const sizeStyles: Record<ContainerSize, string> = {
+    'default':    'max-w-7xl',
+    'wide':       'max-w-[1920px]',
+    'ultra-wide': 'max-w-[2560px]',
+};
+
+const classes = $derived(cn('mx-auto px-6 md:px-12 lg:px-16', sizeStyles[size], className));
+</script>
+
+<div class={classes}>
+    {#if children}
+        {@render children()}
+    {/if}
+</div>
diff --git a/src/shared/ui/Section/Section.stories.svelte b/src/shared/ui/Section/Section.stories.svelte
new file mode 100644
index 0000000..6a6586d
--- /dev/null
+++ b/src/shared/ui/Section/Section.stories.svelte
@@ -0,0 +1,42 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import Container from './Container.svelte';
+import Section from './Section.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/Section',
+    component: Section,
+    tags: ['autodocs'],
+    parameters: { layout: 'fullscreen' },
+});
+</script>
+
+<Story name="Ochre (default)">
+    {#snippet template()}
+        <Section>
+            <Container>
+                <p class="py-16">Section content</p>
+            </Container>
+        </Section>
+    {/snippet}
+</Story>
+
+<Story name="Slate">
+    {#snippet template()}
+        <Section background="slate">
+            <Container>
+                <p class="py-16">Section content on slate</p>
+            </Container>
+        </Section>
+    {/snippet}
+</Story>
+
+<Story name="Bordered">
+    {#snippet template()}
+        <Section bordered>
+            <Container>
+                <p class="py-16">Section with brutal top and bottom borders</p>
+            </Container>
+        </Section>
+    {/snippet}
+</Story>
diff --git a/src/shared/ui/Section/Section.svelte b/src/shared/ui/Section/Section.svelte
new file mode 100644
index 0000000..fe84e83
--- /dev/null
+++ b/src/shared/ui/Section/Section.svelte
@@ -0,0 +1,37 @@
+<!--
+    Component: Section
+    Full-width page section. Controls background and optional top/bottom brutal borders.
+-->
+<script lang="ts">
+import { cn } from '$shared/lib/cn';
+import type { Snippet } from 'svelte';
+import type { SectionBackground } from './types';
+
+interface Props {
+    background?: SectionBackground;
+    /** Add brutal border on top and bottom @default false */
+    bordered?: boolean;
+    children?: Snippet;
+    class?: string;
+}
+
+let { background = 'ochre', bordered = false, children, class: className }: Props = $props();
+
+const backgroundStyles: Record<SectionBackground, string> = {
+    ochre:  'bg-ochre-clay text-carbon-black',
+    slate:  'bg-slate-indigo text-ochre-clay',
+    white:  'bg-white text-carbon-black',
+};
+
+const classes = $derived(cn(
+    backgroundStyles[background],
+    bordered && 'brutal-border-top brutal-border-bottom',
+    className,
+));
+</script>
+
+<section class={classes}>
+    {#if children}
+        {@render children()}
+    {/if}
+</section>
diff --git a/src/shared/ui/Section/index.ts b/src/shared/ui/Section/index.ts
new file mode 100644
index 0000000..03054dd
--- /dev/null
+++ b/src/shared/ui/Section/index.ts
@@ -0,0 +1,3 @@
+export { default as Section } from './Section.svelte';
+export { default as Container } from './Container.svelte';
+export type { SectionBackground, ContainerSize } from './types';
diff --git a/src/shared/ui/Section/types.ts b/src/shared/ui/Section/types.ts
new file mode 100644
index 0000000..d7caeaa
--- /dev/null
+++ b/src/shared/ui/Section/types.ts
@@ -0,0 +1,2 @@
+export type SectionBackground = 'ochre' | 'slate' | 'white';
+export type ContainerSize = 'default' | 'wide' | 'ultra-wide';