diff --git a/.changeset/floppy-bears-kneel.md b/.changeset/floppy-bears-kneel.md
new file mode 100644
index 0000000..3ebc157
--- /dev/null
+++ b/.changeset/floppy-bears-kneel.md
@@ -0,0 +1,5 @@
+---
+'snappycart': major
+---
+
+Getting ready for release by prepping the demo for users (developers).
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index aeee8c7..4572b2d 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,10 +1,10 @@
 name: CI
 
 on:
-  push:
-    branches: [master]
   pull_request:
-    branches: [master]
+  push:
+    branches:
+      - $default-branch
 
 jobs:
   build-and-test:
@@ -12,18 +12,28 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '18'
+          cache: npm
 
       - name: Install dependencies
-        run: npm install
+        run: npm ci
+
+      - name: Changesets status
+        env:
+          BASE_REF: ${{ github.base_ref || github.event.repository.default_branch }}
+        run: |
+          git fetch origin "$BASE_REF"
+          npx changeset status --since="origin/$BASE_REF"
 
       - name: Run tests
-        run: npm run test
+        run: npm test
 
       - name: Run linter
         run: npm run lint
diff --git a/src/App.tsx b/src/App.tsx
index 5a462e8..1a58978 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,17 @@
 import { useMemo, useState } from 'react';
-import CartDrawer from './cart/components/CartDrawer';
-import CartIcon from './cart/components/CartIcon/CartIcon';
 import { useCart } from './cart/hooks/useCart';
 import type { CartProduct } from './cart/types/types';
 
+import CartDrawer from './cart/components/CartDrawer';
+import CartIcon from './cart/components/CartIcon/CartIcon';
+
+import styles from './demo/DemoHome.module.scss';
+import { SiteHeader } from './demo/components/SiteHeader/SiteHeader';
+import { ProductGrid } from './demo/components/ProductGrid/ProductGrid';
+import { Quickstart } from './demo/components/Quickstart/Quickstart';
+import { UseCases } from './demo/components/UseCases/UseCases';
+import { SiteFooter } from './demo/components/SiteFooter/SiteFooter';
+
 export default function App() {
   const { addItem } = useCart();
   const [open, setOpen] = useState(false);
@@ -12,25 +20,148 @@ export default function App() {
     () => [
       { id: 'apple', name: 'Apple', price: 0.6, imageUrl: 'apple.png' },
       { id: 'banana', name: 'Banana', price: 0.4, imageUrl: 'banana.png' },
+      { id: 'orange', name: 'Orange', price: 0.55, imageUrl: 'orange.png' },
+      { id: 'strawberry', name: 'Strawberries', price: 1.25, imageUrl: 'strawberry.png' },
     ],
     [],
   );
 
+  const handleAddStarterSet = () => {
+    addItem(products[0]);
+    addItem(products[1], 2);
+    addItem(products[2]);
+  };
+
   return (
-    <>
-      <h1>Demo eCommerce</h1>
-
-      <div style={{ display: 'flex', gap: 12 }}>
-        <button onClick={() => addItem(products[0])} type="button">
-          Add Apple
-        </button>
-        <button onClick={() => addItem(products[1], 2)} type="button">
-          Add 2 Bananas
-        </button>
-      </div>
+    <div className={styles.appShell}>
+      <SiteHeader
+        onOpenCart={() => setOpen(true)}
+        links={[
+          { label: 'Quickstart', href: '#quickstart' },
+          { label: 'Use cases', href: '#use-cases' },
+          { label: 'Demo shop', href: '#demo-shop' },
+          { label: 'GitHub', href: 'https://github.com/idncod/snappycart', external: true },
+          { label: 'npm', href: 'https://www.npmjs.com/package/snappycart', external: true },
+        ]}
+      />
+
+      <main className={styles.page}>
+        <section className={styles.hero}>
+          <div className={styles.heroGrid}>
+            <div className={styles.heroLeft}>
+              <p className={styles.kicker}>Integration starter</p>
+              <h1 className={styles.h1}>snappycart</h1>
+              <p className={styles.p}>
+                Add items, open the drawer, ship. Use the snippets below to integrate into React or
+                Next.js in minutes.
+              </p>
+
+              <div className={styles.heroActions}>
+                <button className={styles.primaryBtn} type="button" onClick={() => setOpen(true)}>
+                  Open cart
+                </button>
+                <button className={styles.secondaryBtn} type="button" onClick={handleAddStarterSet}>
+                  Add starter set
+                </button>
+              </div>
+
+              <div className={styles.badges}>
+                <span className={styles.badge}>React</span>
+                <span className={styles.badge}>TypeScript</span>
+                <span className={styles.badge}>SCSS</span>
+                <span className={styles.badge}>Headless-friendly</span>
+              </div>
+            </div>
+
+            <div className={styles.heroRight}>
+              <div className={styles.card}>
+                <div className={styles.cardTitle}>Step 1: Trigger cart actions</div>
+                <div className={styles.cardBody}>
+                  <div className={styles.miniGrid}>
+                    <button
+                      type="button"
+                      className={styles.miniBtn}
+                      onClick={() => addItem(products[0])}
+                    >
+                      Add Apple
+                    </button>
+                    <button
+                      type="button"
+                      className={styles.miniBtn}
+                      onClick={() => addItem(products[1], 2)}
+                    >
+                      Add 2 Bananas
+                    </button>
+                    <button
+                      type="button"
+                      className={styles.miniBtn}
+                      onClick={() => addItem(products[3])}
+                    >
+                      Add Strawberries
+                    </button>
+                    <button type="button" className={styles.miniBtn} onClick={() => setOpen(true)}>
+                      Open drawer
+                    </button>
+                  </div>
+                  <div className={styles.tip}>
+                    Tip: add items, then open the drawer. Everything here should mirror how users
+                    integrate it.
+                  </div>
+                </div>
+              </div>
+
+              <div className={styles.cardMuted}>
+                <div className={styles.cardTitle}>What you get</div>
+                <div className={styles.cardBody}>
+                  <div className={styles.bullets}>
+                    <div className={styles.bullet}>
+                      <span className={styles.dot} /> CartProvider
+                    </div>
+                    <div className={styles.bullet}>
+                      <span className={styles.dot} /> useCart()
+                    </div>
+                    <div className={styles.bullet}>
+                      <span className={styles.dot} /> CartIcon + CartDrawer
+                    </div>
+                    <div className={styles.bullet}>
+                      <span className={styles.dot} /> Types exported
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section id="quickstart" className={styles.section}>
+          <div className={styles.sectionHeader}>
+            <h2 className={styles.h2}>Quickstart</h2>
+            <p className={styles.note}>Copy paste, no ceremony.</p>
+          </div>
+          <Quickstart />
+        </section>
+
+        <section id="use-cases" className={styles.section}>
+          <div className={styles.sectionHeader}>
+            <h2 className={styles.h2}>Use cases</h2>
+            <p className={styles.note}>Buttons trigger real cart behavior.</p>
+          </div>
+          <UseCases products={products} onOpenCart={() => setOpen(true)} />
+        </section>
+
+        <section id="demo-shop" className={styles.section}>
+          <div className={styles.sectionHeader}>
+            <h2 className={styles.h2}>Demo shop</h2>
+            <p className={styles.note}>This is the “integration UI” people expect.</p>
+          </div>
+          <ProductGrid products={products} onAdd={(p, qty) => addItem(p, qty)} />
+        </section>
+      </main>
+
+      <SiteFooter />
 
       <CartIcon onClick={() => setOpen(true)} />
       <CartDrawer open={open} onClose={() => setOpen(false)} />
-    </>
+    </div>
   );
 }
diff --git a/src/cart/components/CartIcon/CartIcon.tsx b/src/cart/components/CartIcon/CartIcon.tsx
index 022f615..f3a6ccc 100644
--- a/src/cart/components/CartIcon/CartIcon.tsx
+++ b/src/cart/components/CartIcon/CartIcon.tsx
@@ -16,7 +16,12 @@ export default function CartIcon({ position = 'bottom-right', onClick }: CartIco
         : 'sc-bottom-right';
 
   return (
-    <button type="button" className={`sc-cart-button ${posClass}`} onClick={onClick}>
+    <button
+      type="button"
+      className={`sc-cart-button ${posClass}`}
+      onClick={onClick}
+      aria-label={`Open cart, ${totalItems} items`}
+    >
       Cart
       <span className="sc-cart-badge">{totalItems}</span>
     </button>
diff --git a/src/demo/DemoHome.module.scss b/src/demo/DemoHome.module.scss
new file mode 100644
index 0000000..447bf90
--- /dev/null
+++ b/src/demo/DemoHome.module.scss
@@ -0,0 +1,221 @@
+@use "../styles/variables" as *;
+
+.appShell {
+  min-height: 100vh;
+}
+
+.page {
+  width: min(1120px, calc(100% - 48px));
+  margin: 0 auto;
+  padding: 34px 0 90px;
+  display: flex;
+  flex-direction: column;
+  gap: 56px;
+}
+
+.hero {
+  padding: 34px 0 10px;
+}
+
+.heroGrid {
+  display: grid;
+  grid-template-columns: 1.12fr 0.88fr;
+  gap: 28px;
+  align-items: start;
+}
+
+@media (max-width: 900px) {
+  .heroGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.heroLeft {
+  max-width: 62ch;
+}
+
+.kicker {
+  margin: 0 0 10px;
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: $color-muted;
+}
+
+.h1 {
+  margin: 0 0 10px;
+  font-size: 56px;
+  line-height: 0.98;
+  letter-spacing: -0.05em;
+  font-weight: 900;
+  color: $color-text;
+}
+
+.p {
+  margin: 0 0 18px;
+  color: $color-muted;
+  max-width: 70ch;
+  font-size: 16px;
+}
+
+.heroActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 18px;
+}
+
+.primaryBtn,
+.secondaryBtn {
+  border-radius: 999px;
+  padding: 11px 14px;
+  font-weight: 750;
+  transition: $transition-default;
+  cursor: pointer;
+}
+
+.primaryBtn {
+  border: 0;
+  background: linear-gradient(135deg, rgba(124, 92, 255, 1), rgba(166, 177, 255, 1));
+  color: $color-text;
+  box-shadow: 0 16px 36px rgba(124, 92, 255, 0.18);
+}
+
+.primaryBtn:hover {
+  filter: brightness(1.04);
+}
+
+.secondaryBtn {
+  border: 1px solid $color-border;
+  background: $color-surface;
+  color: $color-text;
+}
+
+.secondaryBtn:hover {
+  background: $color-surface2;
+}
+
+.badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.badge {
+  border: 1px solid $color-border;
+  background: $color-surface;
+  padding: 7px 10px;
+  border-radius: 999px;
+  font-size: 13px;
+  color: $color-muted;
+}
+
+.heroRight {
+  display: grid;
+  gap: 14px;
+}
+
+.card {
+  background: $color-surface;
+  border: 1px solid $color-border;
+  border-radius: 18px;
+  overflow: hidden;
+  box-shadow: $shadow-lg;
+}
+
+.cardTitle {
+  padding: 14px 16px;
+  font-weight: 850;
+  color: $color-text;
+}
+
+.cardBody {
+  padding: 16px;
+}
+
+.miniGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+@media (max-width: 900px) {
+  .miniGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.miniBtn {
+  border: 1px solid $color-border;
+  background: rgba(255, 255, 255, 0.04);
+  color: $color-text;
+  border-radius: 999px;
+  padding: 11px 12px;
+  font-weight: 720;
+  cursor: pointer;
+  transition: $transition-default;
+}
+
+.miniBtn:hover {
+  background: rgba(255, 255, 255, 0.07);
+}
+
+.tip {
+  margin-top: 12px;
+  font-size: 13px;
+  color: $color-muted;
+}
+
+.bullets {
+  display: grid;
+  gap: 10px;
+  padding-bottom: 2px;
+}
+
+.bullet {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: $color-muted;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: rgba(166, 177, 255, 1);
+  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.18);
+}
+
+.section {
+  padding: 0;
+}
+
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 14px;
+  margin: 0 0 14px;
+}
+
+@media (max-width: 720px) {
+  .sectionHeader {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.h2 {
+  margin: 0;
+  font-size: 18px;
+  letter-spacing: -0.01em;
+  font-weight: 850;
+  color: $color-text;
+}
+
+.note {
+  margin: 0;
+  font-size: 13px;
+  color: $color-muted;
+}
\ No newline at end of file
diff --git a/src/demo/components/ProductCard/ProductCard.module.scss b/src/demo/components/ProductCard/ProductCard.module.scss
new file mode 100644
index 0000000..eb60a62
--- /dev/null
+++ b/src/demo/components/ProductCard/ProductCard.module.scss
@@ -0,0 +1,74 @@
+.card {
+  grid-column: span 4;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+@media (max-width: 980px) {
+  .card {
+    grid-column: span 4;
+  }
+}
+
+@media (max-width: 680px) {
+  .card {
+    grid-column: span 4;
+  }
+}
+
+.top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.emoji {
+  font-size: 34px;
+  line-height: 1;
+}
+
+.tag {
+  font-size: 12px;
+  color: var(--muted);
+  border: 1px solid var(--border);
+  background: rgba(0, 0, 0, 0.25);
+  padding: 6px 10px;
+  border-radius: 999px;
+}
+
+.name {
+  font-weight: 760;
+  letter-spacing: -0.01em;
+}
+
+.bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.price {
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.86);
+}
+
+.button {
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text);
+  border-radius: var(--radius-sm);
+  padding: 10px 12px;
+  cursor: pointer;
+}
+
+.button:hover {
+  background: rgba(255, 255, 255, 0.14);
+}
diff --git a/src/demo/components/ProductCard/ProductCard.tsx b/src/demo/components/ProductCard/ProductCard.tsx
new file mode 100644
index 0000000..d61e72f
--- /dev/null
+++ b/src/demo/components/ProductCard/ProductCard.tsx
@@ -0,0 +1,34 @@
+import type { CartProduct } from '../../../cart/types/types';
+import styles from './ProductCard.module.scss';
+
+function formatMoneyGBP(value: number): string {
+  return new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(value);
+}
+
+export function ProductCard({
+  product,
+  onAdd,
+}: {
+  product: CartProduct;
+  onAdd: (product: CartProduct, qty?: number) => void;
+}) {
+  return (
+    <article className={styles.card}>
+      <div className={styles.top}>
+        <div className={styles.emoji} aria-hidden="true">
+          {product.name === 'Apple' ? '🍎' : product.name === 'Banana' ? '🍌' : '🛒'}
+        </div>
+        <div className={styles.tag}>Demo</div>
+      </div>
+
+      <div className={styles.name}>{product.name}</div>
+
+      <div className={styles.bottom}>
+        <div className={styles.price}>{formatMoneyGBP(product.price)}</div>
+        <button className={styles.button} type="button" onClick={() => onAdd(product, 1)}>
+          Add to cart
+        </button>
+      </div>
+    </article>
+  );
+}
diff --git a/src/demo/components/ProductGrid/ProductGrid.module.scss b/src/demo/components/ProductGrid/ProductGrid.module.scss
new file mode 100644
index 0000000..0b313cb
--- /dev/null
+++ b/src/demo/components/ProductGrid/ProductGrid.module.scss
@@ -0,0 +1,18 @@
+.grid {
+  margin-top: 12px;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: var(--gap);
+}
+
+@media (max-width: 980px) {
+  .grid {
+    grid-template-columns: repeat(8, 1fr);
+  }
+}
+
+@media (max-width: 680px) {
+  .grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
diff --git a/src/demo/components/ProductGrid/ProductGrid.tsx b/src/demo/components/ProductGrid/ProductGrid.tsx
new file mode 100644
index 0000000..6764762
--- /dev/null
+++ b/src/demo/components/ProductGrid/ProductGrid.tsx
@@ -0,0 +1,19 @@
+import type { CartProduct } from '../../../cart/types/types';
+import styles from './ProductGrid.module.scss';
+import { ProductCard } from '../ProductCard/ProductCard';
+
+export function ProductGrid({
+  products,
+  onAdd,
+}: {
+  products: CartProduct[];
+  onAdd: (product: CartProduct, qty?: number) => void;
+}) {
+  return (
+    <div className={styles.grid}>
+      {products.map((p) => (
+        <ProductCard key={p.id} product={p} onAdd={onAdd} />
+      ))}
+    </div>
+  );
+}
diff --git a/src/demo/components/Quickstart/Quickstart.module.scss b/src/demo/components/Quickstart/Quickstart.module.scss
new file mode 100644
index 0000000..eec06a9
--- /dev/null
+++ b/src/demo/components/Quickstart/Quickstart.module.scss
@@ -0,0 +1,35 @@
+@use "../../../styles/variables" as *;
+
+.wrap {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: $spacing-md;
+}
+
+.block {
+  grid-column: span 4;
+  border: 1px solid $color-border;
+  border-radius: $radius-md;
+  background: $color-bg;
+  box-shadow: $shadow-sm;
+  overflow: hidden;
+}
+
+.title {
+  padding: 12px 14px;
+  font-weight: 800;
+  border-bottom: 1px solid $color-border;
+}
+
+.code {
+  margin: 0;
+  padding: 14px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  background: rgba(255, 255, 255, 0.7);
+}
+
+@media (max-width: 980px) {
+  .block { grid-column: span 12; }
+}
\ No newline at end of file
diff --git a/src/demo/components/Quickstart/Quickstart.tsx b/src/demo/components/Quickstart/Quickstart.tsx
new file mode 100644
index 0000000..730ac85
--- /dev/null
+++ b/src/demo/components/Quickstart/Quickstart.tsx
@@ -0,0 +1,37 @@
+import styles from './Quickstart.module.scss';
+
+export function Quickstart() {
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.block}>
+        <div className={styles.title}>Install</div>
+        <pre className={styles.code}>
+          <code>npm i snappycart</code>
+        </pre>
+      </div>
+
+      <div className={styles.block}>
+        <div className={styles.title}>Wire it</div>
+        <pre className={styles.code}>
+          <code>{`import { CartProvider } from "snappycart";
+
+root.render(
+  <CartProvider>
+    <App />
+  </CartProvider>
+);`}</code>
+        </pre>
+      </div>
+
+      <div className={styles.block}>
+        <div className={styles.title}>Use it</div>
+        <pre className={styles.code}>
+          <code>{`import { useCart } from "snappycart";
+
+const { addItem } = useCart();
+addItem({ id: "apple", name: "Apple", price: 0.6 });`}</code>
+        </pre>
+      </div>
+    </div>
+  );
+}
diff --git a/src/demo/components/SiteFooter/SiteFooter.module.scss b/src/demo/components/SiteFooter/SiteFooter.module.scss
new file mode 100644
index 0000000..60370f8
--- /dev/null
+++ b/src/demo/components/SiteFooter/SiteFooter.module.scss
@@ -0,0 +1,28 @@
+.footer {
+  border-top: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.inner {
+  width: min(var(--max), calc(100% - 40px));
+  margin: 0 auto;
+  padding: 18px 0;
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.title {
+  font-weight: 750;
+}
+
+.muted {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.left {
+  display: grid;
+  gap: 4px;
+}
diff --git a/src/demo/components/SiteFooter/SiteFooter.tsx b/src/demo/components/SiteFooter/SiteFooter.tsx
new file mode 100644
index 0000000..cc06c57
--- /dev/null
+++ b/src/demo/components/SiteFooter/SiteFooter.tsx
@@ -0,0 +1,15 @@
+import styles from './SiteFooter.module.scss';
+
+export function SiteFooter() {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.inner}>
+        <div className={styles.left}>
+          <div className={styles.title}>Demo Shop</div>
+          <div className={styles.muted}>Built to be cloned and integrated fast.</div>
+        </div>
+        <div className={styles.muted}>Next.js + TypeScript + SCSS Modules</div>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/demo/components/SiteHeader/SiteHeader.module.scss b/src/demo/components/SiteHeader/SiteHeader.module.scss
new file mode 100644
index 0000000..abc5986
--- /dev/null
+++ b/src/demo/components/SiteHeader/SiteHeader.module.scss
@@ -0,0 +1,89 @@
+@use "../../../styles/variables" as *;
+
+.header {
+  position: sticky;
+  top: 0;
+  z-index: $z-index-header;
+  background: rgba(11, 13, 18, 0.72);
+  backdrop-filter: blur(12px);
+}
+
+.inner {
+  width: min(1120px, calc(100% - 48px));
+  margin: 0 auto;
+  padding: 14px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.logo {
+  width: 34px;
+  height: 34px;
+  border-radius: 12px;
+  background: radial-gradient(circle at 30% 30%, rgba(166, 177, 255, 0.95), rgba(124, 92, 255, 0.9));
+  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
+  flex: none;
+}
+
+.brand {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.name {
+  font-weight: 900;
+  letter-spacing: -0.01em;
+  color: $color-text;
+}
+
+.sub {
+  font-size: 12px;
+  color: $color-muted;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.link {
+  font-size: 14px;
+  color: $color-muted;
+  padding: 8px 10px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  transition: $transition-default;
+}
+
+.link:hover {
+  color: $color-text;
+  background: rgba(255, 255, 255, 0.04);
+  border-color: $color-border;
+}
+
+.cta {
+  border: 1px solid $color-border;
+  background: $color-surface;
+  color: $color-text;
+  border-radius: 999px;
+  padding: 10px 12px;
+  font-weight: 800;
+  cursor: pointer;
+  transition: $transition-default;
+}
+
+.cta:hover {
+  background: $color-surface2;
+}
\ No newline at end of file
diff --git a/src/demo/components/SiteHeader/SiteHeader.tsx b/src/demo/components/SiteHeader/SiteHeader.tsx
new file mode 100644
index 0000000..bd4db3c
--- /dev/null
+++ b/src/demo/components/SiteHeader/SiteHeader.tsx
@@ -0,0 +1,36 @@
+import styles from './SiteHeader.module.scss';
+
+type Link = { label: string; href: string; external?: boolean };
+
+export function SiteHeader({ links, onOpenCart }: { links: Link[]; onOpenCart: () => void }) {
+  return (
+    <header className={styles.header}>
+      <div className={styles.inner}>
+        <div className={styles.left}>
+          <div className={styles.logo} aria-hidden="true" />
+          <div className={styles.brand}>
+            <div className={styles.name}>SnappyCart</div>
+            <div className={styles.sub}>Dev demo and integration playground</div>
+          </div>
+        </div>
+
+        <nav className={styles.nav}>
+          {links.map((l) => (
+            <a
+              key={l.label}
+              className={styles.link}
+              href={l.href}
+              target={l.external ? '_blank' : undefined}
+              rel={l.external ? 'noreferrer' : undefined}
+            >
+              {l.label}
+            </a>
+          ))}
+          <button className={styles.cta} type="button" onClick={onOpenCart}>
+            Open cart
+          </button>
+        </nav>
+      </div>
+    </header>
+  );
+}
diff --git a/src/demo/components/UseCases/UseCases.module.scss b/src/demo/components/UseCases/UseCases.module.scss
new file mode 100644
index 0000000..d057d7c
--- /dev/null
+++ b/src/demo/components/UseCases/UseCases.module.scss
@@ -0,0 +1,43 @@
+@use "../../../styles/variables" as *;
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: $spacing-md;
+}
+
+.action {
+  grid-column: span 4;
+  border: 1px solid $color-border;
+  background: $color-surface;
+  color: $color-text;
+  border-radius: $radius-md;
+  padding: 14px 16px;
+  min-height: 56px;
+  text-align: left;
+  font-weight: 700;
+  cursor: pointer;
+  transition: $transition-default;
+}
+
+.action:hover:not(:disabled) {
+  background: $color-surface2;
+  transform: translateY(-1px);
+}
+
+.action:disabled {
+  opacity: 0.48;
+  cursor: not-allowed;
+}
+
+@media (max-width: 980px) {
+  .action {
+    grid-column: span 6;
+  }
+}
+
+@media (max-width: 680px) {
+  .action {
+    grid-column: span 12;
+  }
+}
\ No newline at end of file
diff --git a/src/demo/components/UseCases/UseCases.tsx b/src/demo/components/UseCases/UseCases.tsx
new file mode 100644
index 0000000..0ee256c
--- /dev/null
+++ b/src/demo/components/UseCases/UseCases.tsx
@@ -0,0 +1,40 @@
+import type { CartProduct } from '../../../cart/types/types';
+import { useCart } from '../../../cart/hooks/useCart';
+import styles from './UseCases.module.scss';
+
+export function UseCases({
+  products,
+  onOpenCart,
+}: {
+  products: CartProduct[];
+  onOpenCart: () => void;
+}) {
+  const { addItem } = useCart();
+
+  const apple = products.find((p) => p.id === 'apple') ?? products[0];
+  const banana = products.find((p) => p.id === 'banana') ?? products[1];
+
+  return (
+    <div className={styles.grid}>
+      <button className={styles.action} type="button" onClick={() => addItem(apple)}>
+        Add 1 item
+      </button>
+
+      <button className={styles.action} type="button" onClick={() => addItem(banana, 5)}>
+        Add quantity in one call
+      </button>
+
+      <button className={styles.action} type="button" onClick={onOpenCart}>
+        Open drawer
+      </button>
+
+      <button className={styles.action} type="button" disabled>
+        Remove item (coming soon)
+      </button>
+
+      <button className={styles.action} type="button" disabled>
+        Clear cart (coming soon)
+      </button>
+    </div>
+  );
+}
diff --git a/src/globals.scss b/src/globals.scss
new file mode 100644
index 0000000..3a39d8c
--- /dev/null
+++ b/src/globals.scss
@@ -0,0 +1,56 @@
+@use "./styles/variables" as *;
+
+:root {
+  --text: #{$color-text};
+  --muted: #{$color-muted};
+  --border: #{$color-border};
+  --surface: #{$color-surface};
+  --surface2: #{$color-surface2};
+  --radius: #{$radius-md};
+  --radius-sm: #{$radius-sm};
+  --shadow: #{$shadow-md};
+  --gap: #{$spacing-md};
+  --max: 1120px;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  min-height: 100%;
+  margin: 0;
+}
+
+body {
+  background:
+          radial-gradient(1200px 700px at 20% -10%, rgba(124, 92, 255, 0.22), transparent 60%),
+          radial-gradient(1000px 700px at 85% 0%, rgba(166, 177, 255, 0.14), transparent 55%),
+          #0b0d12;
+  color: $color-text;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  line-height: 1.4;
+  overflow-x: hidden;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+img,
+svg {
+  display: block;
+  max-width: 100%;
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index c9f98e8..ed050f1 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 import { CartProvider } from './cart/context/CartProvider';
+import '../src/globals.scss';
 import './cart/components/snappycart.scss';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 1f86a39..38f7a85 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,45 +1,51 @@
 // ----------------
-// Snappycart Theme
+// snappycart theme
 // ----------------
 
 // Colors
-$color-primary:       #2F6846;   // Rich botanical green
-$color-accent:        #FFD56B;   // Soft honey yellow
-$color-bg:            #FAFAF7;   // Clean off-white
-$color-text:          #2B2B2B;   // Elegant charcoal
-$color-muted:         #D8D2C2;   // Neutral taupe
-$color-border:        #E5E5E0;   // Light border grey
-$color-success:       #30A46C;   // Action green
-$color-danger:        #D9534F;   // Warning red
+$color-bg: #0b0d12;
+
+$color-text: rgba(255, 255, 255, 0.92);
+$color-muted: rgba(255, 255, 255, 0.62);
+$color-border: rgba(255, 255, 255, 0.12);
+
+$color-surface: rgba(255, 255, 255, 0.06);
+$color-surface2: rgba(255, 255, 255, 0.10);
+
+$color-primary: #7c5cff;
+$color-accent: #a6b1ff;
+
+$color-success: #2bd4a6;
+$color-danger: #ff4d6d;
 
 // Typography
-$font-size-base:      1rem;
-$font-size-sm:        0.875rem;
-$font-size-lg:        1.25rem;
-$font-weight-normal:  400;
-$font-weight-bold:    600;
+$font-size-base: 1rem;
+$font-size-sm: 0.875rem;
+$font-size-lg: 1.25rem;
+$font-weight-normal: 400;
+$font-weight-bold: 600;
 
 // Spacing
-$spacing-xs:          0.25rem;
-$spacing-sm:          0.5rem;
-$spacing-md:          1rem;
-$spacing-lg:          1.5rem;
-$spacing-xl:          2rem;
+$spacing-xs: 0.25rem;
+$spacing-sm: 0.5rem;
+$spacing-md: 1rem;
+$spacing-lg: 1.5rem;
+$spacing-xl: 2rem;
 
 // Border radius
-$radius-sm:           6px;
-$radius-md:           12px;
-$radius-lg:           20px;
+$radius-sm: 6px;
+$radius-md: 12px;
+$radius-lg: 20px;
 
 // Shadows
-$shadow-sm:           0 1px 3px rgba(0, 0, 0, 0.06);
-$shadow-md:           0 4px 10px rgba(0, 0, 0, 0.1);
-$shadow-lg:           0 8px 20px rgba(0, 0, 0, 0.12);
+$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.18);
+$shadow-md: 0 8px 22px rgba(0, 0, 0, 0.26);
+$shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.34);
 
 // Transitions
-$transition-default:  0.2s ease;
+$transition-default: 0.2s ease;
 
 // Z-index
-$z-index-header:      1000;
-$z-index-drawer:      1100;
-$z-index-modal:       1200;
+$z-index-header: 1000;
+$z-index-drawer: 1100;
+$z-index-modal: 1200;
\ No newline at end of file