inspiration

inspiration/kawiarnia/DESIGN.md

@@ -0,0 +1,85 @@
+# Design System Document: Artisanal Elegance
+
+## 1. Overview & Creative North Star
+
+### Creative North Star: "The Confectioner’s Gallery"
+This design system is not a mere utility; it is a digital extension of the physical 'Piekarnik Gosi' experience. It treats every interface as a curated display case, mirroring the warmth of a family-owned bakery and the precision of a high-end pâtisserie. 
+
+To break the "template" look common in local business sites, this system rejects rigid grids in favor of **Intentional Editorial Asymmetry**. We lean into overlapping elements—such as a product image bleeding off-center into a text block—to mimic the organic arrangement of cakes on a counter. The visual language is defined by high-contrast typography scales, where massive, elegant serifs meet delicate, airy sans-serifs, creating an atmosphere that is both approachable and elite.
+
+---
+
+## 2. Colors
+
+The palette is derived from the shop's interior: sage greens, dusty roses, and warm creams. This is a tonal system designed for warmth.
+
+### The "No-Line" Rule
+**Explicit Instruction:** Designers are prohibited from using 1px solid borders to define sections. Boundaries must be defined solely through background color shifts. For example, a section using `surface-container-low` (#faf3e7) should sit directly against a `surface` (#fff8f0) background. This creates a soft, "dipped" effect rather than a harsh, boxed-in feel.
+
+### Surface Hierarchy & Nesting
+Treat the UI as physical layers of fine vellum paper. Use the surface tiers to create "nested" depth:
+- **Base Level:** `surface` (#fff8f0) for the main body.
+- **Sectioning:** `surface-container-low` (#faf3e7) for large background blocks (e.g., the "Our Story" section).
+- **Interactive Layers:** `surface-container-highest` (#eae2d2) for secondary cards or floating menus to define importance through tonal weight.
+
+### The "Glass & Gradient" Rule
+To move beyond a flat, "standard" UI, use Glassmorphism for floating elements (like a navigation bar or a "Quick Cart"). Utilize semi-transparent surface colors with a `backdrop-blur` of 12px-20px. 
+**Signature CTA Polish:** Use subtle linear gradients for primary actions, transitioning from `primary` (#8c4d50) to `primary-container` (#fcacaf). This adds "visual soul" and a velvet-like texture that flat colors cannot replicate.
+
+---
+
+## 3. Typography
+
+The typography strategy balances the "Tradition" of the bakery with the "Clarity" of a modern cafe menu.
+
+- **Display & Headlines (Noto Serif):** These are our "Artisanal" markers. Use large scales (e.g., `display-lg` at 3.5rem) with tighter letter-spacing for a high-end editorial look. Italics should be used sparingly for "O nas" or "Nasze Wyroby" to evoke a handwritten, personal touch.
+- **Titles & Body (Plus Jakarta Sans):** This is our "Modern Service" layer. It provides high legibility. `title-lg` is your workhorse for product names, while `body-md` ensures the ingredients list is readable at any age.
+
+The hierarchy conveys the brand: The Serif speaks to the *quality* of the recipe; the Sans-Serif speaks to the *friendliness* of the service.
+
+---
+
+## 4. Elevation & Depth
+
+We eschew structural lines for **Tonal Layering**.
+
+- **The Layering Principle:** Stack containers to create lift. Place a `surface-container-lowest` (#ffffff) card on a `surface-container-low` (#faf3e7) section. This mimics the way a white pastry box sits on a cream-colored wooden table.
+- **Ambient Shadows:** For "floating" elements (like a cupcake selection modal), use extra-diffused shadows. 
+    - *Formula:* `0px 12px 32px rgba(54, 50, 39, 0.06)`. Note the color is a tinted version of `on-surface`, never pure black.
+- **The "Ghost Border" Fallback:** If a border is required for accessibility, it must be a "Ghost Border": use `outline-variant` (#b9b1a3) at **15% opacity**. 100% opaque borders are strictly forbidden.
+- **Soft Geometry:** Utilize the `lg` (2rem) and `xl` (3rem) roundedness tokens. This mimics the scalloped wall details and rounded seating seen in the 'Piekarnik Gosi' interior.
+
+---
+
+## 5. Components
+
+### Buttons
+- **Primary:** Rounded `full` (9999px). Gradient background (`primary` to `primary-container`). Label in `on-primary` (#fff7f6). 
+- **Secondary:** Surface-colored with a "Ghost Border." High-quality hover state: a subtle shift to `surface-container-high`.
+
+### Cards & Lists
+- **Rule:** Absolute prohibition of divider lines.
+- **Implementation:** Use vertical whitespace (refer to Spacing Scale) and background shifts. A product list should be a sequence of `surface-container-lowest` tiles floating on a `surface` background.
+- **Bakery Icons:** Use custom line-art icons (Cupcakes, Whisks) in the `primary` color, but place them within a `secondary-container` (#e0f5cb) circle to create a "stamp" effect.
+
+### Selection Chips
+- Use the `md` (1.5rem) roundedness. Use `secondary-container` for the "Active" state to bring in the sage green from the shop’s beams and window frames.
+
+### Input Fields
+- Avoid the "boxed" look. Use `surface-container-highest` as a solid background fill with a bottom-only `outline` at 20% opacity. This feels more like a chic, handwritten menu.
+
+---
+
+## 6. Do’s and Don'ts
+
+### Do:
+*   **Embrace Whitespace:** Let the "Cream" background breathe. High-end design is defined by what isn't there.
+*   **Layer Tones:** Always ask "Can I use a color shift instead of a line?"
+*   **Iconography with Intent:** Use bakery-specific icons to reinforce the family-oriented, artisanal nature.
+*   **Asymmetric Layouts:** Place a large serif heading on the left and a product image slightly overlapping it on the right.
+
+### Don't:
+*   **Don't use pure black (#000000):** Use `on-background` (#363227) for text to maintain a warm, organic feel.
+*   **Don't use hard corners:** Every element should feel as soft as a pastry. Minimum corner radius is `sm` (0.5rem), but aim for `lg` (2rem).
+*   **Don't use heavy shadows:** If the shadow looks "dirty" or "heavy," reduce the opacity. It should feel like morning light in a coffee shop.
+*   **Don't use standard Dividers:** If you need to separate content, use a change in background color or a 48px-64px vertical gap.

inspiration/kawiarnia/code.html

@@ -0,0 +1,389 @@
+<!DOCTYPE html>
+
+<html lang="pl"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Kawiarnia | Piekarnik Gosi</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&amp;family=Plus+Jakarta+Sans:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "background": "#fff8f0",
+                        "outline": "#807a6d",
+                        "on-secondary-container": "#4c5e3e",
+                        "surface-container-lowest": "#ffffff",
+                        "tertiary-fixed": "#f8d472",
+                        "primary-dim": "#7e4145",
+                        "inverse-primary": "#f9a9ac",
+                        "surface-variant": "#eae2d2",
+                        "on-secondary-fixed": "#3b4b2d",
+                        "surface-tint": "#8c4d50",
+                        "primary-fixed": "#fcacaf",
+                        "on-secondary": "#edffd9",
+                        "outline-variant": "#b9b1a3",
+                        "on-primary-container": "#622b2f",
+                        "error-dim": "#821a01",
+                        "secondary-container": "#e0f5cb",
+                        "on-secondary-fixed-variant": "#566847",
+                        "error-container": "#fa7150",
+                        "on-background": "#363227",
+                        "on-tertiary-fixed": "#463600",
+                        "secondary-dim": "#475839",
+                        "on-tertiary-fixed-variant": "#695100",
+                        "surface": "#fff8f0",
+                        "inverse-surface": "#100e09",
+                        "on-primary-fixed-variant": "#6d3438",
+                        "surface-container-low": "#faf3e7",
+                        "inverse-on-surface": "#a19c94",
+                        "on-surface-variant": "#645f52",
+                        "surface-container": "#f5ede0",
+                        "on-primary": "#fff7f6",
+                        "secondary-fixed-dim": "#d2e6bd",
+                        "on-primary-fixed": "#48171c",
+                        "surface-container-high": "#efe7d9",
+                        "on-error-container": "#671200",
+                        "secondary-fixed": "#e0f5cb",
+                        "surface-container-highest": "#eae2d2",
+                        "surface-dim": "#e2d9c8",
+                        "secondary": "#536444",
+                        "tertiary-container": "#f8d472",
+                        "on-tertiary-container": "#5d4800",
+                        "tertiary": "#765c00",
+                        "on-error": "#fff7f6",
+                        "surface-bright": "#fff8f0",
+                        "primary-container": "#fcacaf",
+                        "tertiary-fixed-dim": "#e9c666",
+                        "on-tertiary": "#fff8ef",
+                        "tertiary-dim": "#675000",
+                        "primary": "#8c4d50",
+                        "primary-fixed-dim": "#ed9fa2",
+                        "error": "#aa371c",
+                        "on-surface": "#363227"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "1rem",
+                        "lg": "2rem",
+                        "xl": "3rem",
+                        "full": "9999px"
+                    },
+                    "fontFamily": {
+                        "headline": ["Noto Serif"],
+                        "body": ["Plus Jakarta Sans"],
+                        "label": ["Plus Jakarta Sans"]
+                    }
+                },
+            },
+        }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #fff8f0; color: #363227; }
+        h1, h2, h3, .font-serif { font-family: 'Noto Serif', serif; }
+        .glass-nav { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
+    </style>
+</head>
+<body class="bg-surface text-on-surface">
+<!-- TopNavBar -->
+<nav class="docked full-width top-0 sticky z-50 bg-[#fff8f0]/80 dark:bg-[#1a1c18]/80 backdrop-blur-xl">
+<div class="flex justify-between items-center w-full px-8 py-4 max-w-7xl mx-auto">
+<div class="text-2xl font-serif italic text-[#8c4d50] dark:text-[#fcacaf]">Piekarnik Gosi</div>
+<div class="hidden md:flex gap-8 items-center">
+<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] transition-all duration-300 font-medium" href="#">Strona Główna</a>
+<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] transition-all duration-300 font-medium" href="#">Wyroby</a>
+<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] transition-all duration-300 font-medium" href="#">Portfolio</a>
+<a class="text-[#8c4d50] dark:text-[#fcacaf] font-bold border-b-2 border-[#8c4d50] pb-1" href="#">Kawiarnia</a>
+</div>
+<button class="bg-gradient-to-r from-primary to-primary-container text-on-primary px-6 py-2 rounded-full font-medium hover:scale-95 transition-transform duration-200">Kontakt</button>
+</div>
+</nav>
+<!-- Hero Section: The Cafe Atmosphere -->
+<header class="relative w-full min-h-[716px] flex items-center overflow-hidden">
+<div class="absolute inset-0 z-0">
+<img class="w-full h-full object-cover brightness-90" data-alt="Warm and inviting cafe interior with soft morning light, vintage wooden tables, and artisanal pastries displayed behind a glass counter" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAlWolbLsXEnJsVdj9jtGTeKY5--CaYiFLGPkBDHjGI7WYbd_sqB8ajsQrsywYP9b3L3_-eBPbbDs505ulpCtIieNepyemAfT1EnoZB0C_V-EQiSHtGQIlFmefeIUMRbvi1Rx6c0b-IZ9ioEbBbYnH1frzNqLeuP2NgfLaO3zBYtPM07G4tVsaYcSK-zitQH38icTBA4X9Gp-8pvjubfns7h9Jo7KCu6iOE_0dN6f7uNmbpZgzEe64J13UjXf7NHOjp4CgKGVU39Nya"/>
+<div class="absolute inset-0 bg-gradient-to-r from-background via-background/40 to-transparent"></div>
+</div>
+<div class="relative z-10 max-w-7xl mx-auto px-8 w-full">
+<div class="max-w-2xl">
+<span class="text-primary font-medium tracking-widest label-lg block mb-4">MIEJSCE SPOTKAŃ</span>
+<h1 class="text-6xl md:text-7xl font-bold leading-tight mb-6">Chwila wytchnienia w sercu <span class="italic text-primary-dim">tradycji</span></h1>
+<p class="text-lg text-on-surface-variant mb-8 max-w-lg">Zapraszamy do naszej kawiarni, gdzie zapach świeżo mielonej kawy miesza się z aromatem wypieków prosto z pieca.</p>
+<div class="flex gap-4">
+<a class="bg-primary text-on-primary px-8 py-4 rounded-full font-bold shadow-lg hover:bg-primary-dim transition-colors" href="#menu">Zobacz Kartę</a>
+</div>
+</div>
+</div>
+</header>
+<!-- Gallery & Narrative Section (Asymmetric Layout) -->
+<section class="py-24 px-8 max-w-7xl mx-auto overflow-hidden">
+<div class="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
+<div class="md:col-span-5 space-y-8">
+<div class="inline-flex items-center gap-3 px-4 py-2 bg-secondary-container rounded-full text-on-secondary-container">
+<span class="material-symbols-outlined text-sm" data-icon="local_cafe">local_cafe</span>
+<span class="text-xs font-bold uppercase tracking-tighter">Atmosfera</span>
+</div>
+<h2 class="text-5xl font-bold leading-tight text-on-background">Gdzie czas <br/>płynie wolniej.</h2>
+<p class="text-on-surface-variant leading-relaxed">Nasza kawiarnia to nie tylko miejsce, to doświadczenie. Każdy stolik, każda filiżanka i każdy detal został wybrany tak, by stworzyć przestrzeń idealną do pracy, czytania lub rozmowy z bliskimi.</p>
+<div class="bg-surface-container-low p-8 rounded-xl space-y-4">
+<p class="italic text-lg font-serif">"Najlepsza kawa w mieście, a tutejsze drożdżówki przypominają mi dzieciństwo u babci."</p>
+<p class="text-sm font-bold text-primary">— Stała klientka, Anna</p>
+</div>
+</div>
+<div class="md:col-span-7 grid grid-cols-2 gap-4 relative">
+<div class="mt-12">
+<img class="w-full h-[400px] object-cover rounded-xl shadow-2xl" data-alt="Close-up of a perfectly frothed cappuccino in a ceramic cup next to a flakey butter croissant on a wooden tray" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC0d5zSnzWV78OEimIX24qXTc9tcbOXY6Vi8a85HKlilS2jxQdMu9zioFG6SLGQ9na6cwznKYXY2blBeWJHH4qkeudO4KeO1VUMfCt6pZuKNZ836uGzFbhOG87Pw81POk3PGtiMhi4AJtKGMluTSYSZ751jZMIjsUmUG_9JR-hPzAOJALHPtLyMZir40oeBvMzygnD2ZProwfvVX4gvB89M0nIlTZmBieL2dYzxYFaCoiaKxwpCcQK1x6AeHLfvWItrVr1zCXCFbEGO"/>
+</div>
+<div>
+<img class="w-full h-[400px] object-cover rounded-xl shadow-2xl" data-alt="Elegant display of handmade pastries and cakes on marble pedestals inside a chic boutique bakery" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDABc36MOPS0qwhOpj76fJjKCkvL7Y6AUwj5Cdjccm0-ftFIVI5UsiXGBUzBDF9P-oDMU1iOEtSkutJsuHvJxDNAZPG86LPNmjJOdMJqCNynjAKN7Ksfv_s_Aoy0oQ1Zah1EHvpVvJadQ5z7xXOq-XOpSftoQLSLGNd-8s5Sh0dqFGxw8C1Uf1PAbsXd8JYc8WgLUDSOMai7H0yCAiJ0VPEGEZbDA5EF5CQjkpfrazJSZFP47oVMGGjeziHfwsLEGThVLmY_5QgnIAv"/>
+</div>
+<!-- Decorative element -->
+<div class="absolute -bottom-6 -right-6 w-32 h-32 bg-secondary-container rounded-full -z-10 opacity-50"></div>
+</div>
+</div>
+</section>
+<!-- Cafe Menu Section -->
+<section class="bg-surface-container-low py-24 px-8" id="menu">
+<div class="max-w-7xl mx-auto">
+<div class="text-center mb-16">
+<h2 class="text-4xl font-bold mb-4">Nasza Karta</h2>
+<div class="w-24 h-1 bg-primary mx-auto rounded-full"></div>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+<!-- Coffee -->
+<div class="bg-surface-container-lowest p-8 rounded-xl shadow-sm">
+<div class="flex items-center gap-4 mb-8">
+<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
+<span class="material-symbols-outlined" data-icon="coffee">coffee</span>
+</div>
+<h3 class="text-2xl font-bold">Kawy</h3>
+</div>
+<ul class="space-y-6">
+<li class="flex justify-between items-end border-b border-dashed border-outline-variant pb-2">
+<div>
+<p class="font-bold">Espresso</p>
+<p class="text-xs text-on-surface-variant">Intensywny napar z wyselekcjonowanych ziaren</p>
+</div>
+<span class="font-bold text-primary">9 PLN</span>
+</li>
+<li class="flex justify-between items-end border-b border-dashed border-outline-variant pb-2">
+<div>
+<p class="font-bold">Cappuccino</p>
+<p class="text-xs text-on-surface-variant">Aksamitna pianka i bogaty smak</p>
+</div>
+<span class="font-bold text-primary">14 PLN</span>
+</li>
+<li class="flex justify-between items-end border-b border-dashed border-outline-variant pb-2">
+<div>
+<p class="font-bold">Flat White</p>
+<p class="text-xs text-on-surface-variant">Podwójne espresso z jedwabistym mlekiem</p>
+</div>
+<span class="font-bold text-primary">16 PLN</span>
+</li>
+</ul>
+</div>
+<!-- Teas & Infusions -->
+<div class="bg-surface-container-lowest p-8 rounded-xl shadow-sm">
+<div class="flex items-center gap-4 mb-8">
+<div class="w-12 h-12 rounded-full bg-secondary-container flex items-center justify-center text-on-secondary-container">
+<span class="material-symbols-outlined" data-icon="tea">coffee</span>
+</div>
+<h3 class="text-2xl font-bold">Herbaty</h3>
+</div>
+<ul class="space-y-6">
+<li class="flex justify-between items-end border-b border-dashed border-outline-variant pb-2">
+<div>
+<p class="font-bold">Sencha Premium</p>
+<p class="text-xs text-on-surface-variant">Japońska zielona herbata</p>
+</div>
+<span class="font-bold text-primary">12 PLN</span>
+</li>
+<li class="flex justify-between items-end border-b border-dashed border-outline-variant pb-2">
+<div>
+<p class="font-bold">Earl Grey Flower</p>
+<p class="text-xs text-on-surface-variant">Z płatkami bławatka i bergamotką</p>
+</div>
+<span class="font-bold text-primary">12 PLN</span>
+</li>
+<li class="flex justify-between items-end border-b border-dashed border-outline-variant pb-2">
+<div>
+<p class="font-bold">Napar Sezonowy</p>
+<p class="text-xs text-on-surface-variant">Imbir, miód, cytryna i goździki</p>
+</div>
+<span class="font-bold text-primary">15 PLN</span>
+</li>
+</ul>
+</div>
+<!-- Small Snacks -->
+<div class="bg-surface-container-lowest p-8 rounded-xl shadow-sm">
+<div class="flex items-center gap-4 mb-8">
+<div class="w-12 h-12 rounded-full bg-tertiary-container flex items-center justify-center text-on-tertiary-container">
+<span class="material-symbols-outlined" data-icon="cookie">cookie</span>
+</div>
+<h3 class="text-2xl font-bold">Przekąski</h3>
+</div>
+<ul class="space-y-6">
+<li class="flex justify-between items-end border-b border-dashed border-outline-variant pb-2">
+<div>
+<p class="font-bold">Maślany Croissant</p>
+<p class="text-xs text-on-surface-variant">Wypiekany co rano ma miejscu</p>
+</div>
+<span class="font-bold text-primary">8 PLN</span>
+</li>
+<li class="flex justify-between items-end border-b border-dashed border-outline-variant pb-2">
+<div>
+<p class="font-bold">Makaronik Różany</p>
+<p class="text-xs text-on-surface-variant">Nasza specjalność</p>
+</div>
+<span class="font-bold text-primary">7 PLN</span>
+</li>
+<li class="flex justify-between items-end border-b border-dashed border-outline-variant pb-2">
+<div>
+<p class="font-bold">Tarta Sezonowa</p>
+<p class="text-xs text-on-surface-variant">Z owocami od lokalnych dostawców</p>
+</div>
+<span class="font-bold text-primary">18 PLN</span>
+</li>
+</ul>
+</div>
+</div>
+</div>
+</section>
+<!-- Location & Contact Grid -->
+<section class="py-24 px-8 max-w-7xl mx-auto">
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
+<!-- Contact Form -->
+<div class="order-2 lg:order-1">
+<div class="mb-12">
+<h2 class="text-4xl font-bold mb-4">Napisz do nas</h2>
+<p class="text-on-surface-variant">Planujesz większe zamówienie lub chcesz zarezerwować stolik? Skontaktuj się z nami bezpośrednio.</p>
+</div>
+<form class="space-y-6">
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+<div class="space-y-2">
+<label class="text-sm font-bold ml-1">Imię i Nazwisko</label>
+<input class="w-full px-6 py-4 rounded-xl border-none bg-surface-container-highest focus:ring-2 focus:ring-primary transition-all" placeholder="Jan Kowalski" type="text"/>
+</div>
+<div class="space-y-2">
+<label class="text-sm font-bold ml-1">E-mail</label>
+<input class="w-full px-6 py-4 rounded-xl border-none bg-surface-container-highest focus:ring-2 focus:ring-primary transition-all" placeholder="jan@przyklad.pl" type="email"/>
+</div>
+</div>
+<div class="space-y-2">
+<label class="text-sm font-bold ml-1">Temat</label>
+<select class="w-full px-6 py-4 rounded-xl border-none bg-surface-container-highest focus:ring-2 focus:ring-primary transition-all">
+<option>Pytanie ogólne</option>
+<option>Rezerwacja stolika</option>
+<option>Zamówienie specjalne</option>
+<option>Współpraca</option>
+</select>
+</div>
+<div class="space-y-2">
+<label class="text-sm font-bold ml-1">Wiadomość</label>
+<textarea class="w-full px-6 py-4 rounded-xl border-none bg-surface-container-highest focus:ring-2 focus:ring-primary transition-all" placeholder="W czym możemy Ci pomóc?" rows="5"></textarea>
+</div>
+<button class="w-full bg-gradient-to-r from-primary to-primary-container text-on-primary py-5 rounded-full font-bold text-lg hover:shadow-xl hover:scale-[0.98] transition-all" type="submit">Wyślij Wiadomość</button>
+</form>
+</div>
+<!-- Location & Hours -->
+<div class="order-1 lg:order-2 space-y-12">
+<div class="h-[400px] w-full rounded-3xl overflow-hidden shadow-inner bg-surface-container relative">
+<!-- Stylized map placeholder -->
+<div class="absolute inset-0 bg-[#f0ede5] flex items-center justify-center">
+<div class="text-center">
+<span class="material-symbols-outlined text-primary text-6xl" data-icon="location_on" style="font-variation-settings: 'FILL' 1;">location_on</span>
+<p class="font-bold mt-4">Znajdź nas na mapie</p>
+</div>
+</div>
+<img class="hidden absolute inset-0 w-full h-full object-cover opacity-80" data-alt="Stylized minimal map showing the location of the bakery in a quiet urban neighborhood" data-location="Warsaw" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDuJFA861XzSrvGRhLvQvU7o-0xNjTADcARRFLn9LVGh1gEG9AeV8_WPHSpVnn0Qb3NNAyi3lUGpK7Iw26_Bjtwxhjt2YlQIJrSQBzn3Vf2xxYKhkdBKA_XqLKphX8lvtVmHW7_8FQDoN624XOnD--K4TswZVZXBazvcyc9-oX0T1PE_HULzTDUCrT1FUYfCP-5Y8rsoggxrRcJg4gnraNniiCsStwBReyESCO0on1K6crp_9bD9MyK7fJ9QTr2edKsKCaTpW-CSNVO"/>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+<div class="space-y-4">
+<h4 class="text-xl font-bold flex items-center gap-2">
+<span class="material-symbols-outlined text-primary" data-icon="home">home</span>
+                            Adres
+                        </h4>
+<p class="text-on-surface-variant leading-relaxed">
+                            ul. Słodka 12/4<br/>
+                            00-001 Warszawa<br/>
+                            Polska
+                        </p>
+</div>
+<div class="space-y-4">
+<h4 class="text-xl font-bold flex items-center gap-2">
+<span class="material-symbols-outlined text-primary" data-icon="schedule">schedule</span>
+                            Godziny Otwarcia
+                        </h4>
+<ul class="text-sm space-y-2">
+<li class="flex justify-between">
+<span class="text-on-surface-variant">Pon - Pt:</span>
+<span class="font-bold">07:30 - 19:00</span>
+</li>
+<li class="flex justify-between">
+<span class="text-on-surface-variant">Sobota:</span>
+<span class="font-bold">08:00 - 18:00</span>
+</li>
+<li class="flex justify-between">
+<span class="text-on-surface-variant">Niedziela:</span>
+<span class="font-bold">09:00 - 16:00</span>
+</li>
+</ul>
+</div>
+</div>
+<div class="p-8 bg-secondary-container rounded-3xl flex items-center gap-6">
+<div class="w-16 h-16 rounded-full bg-surface-container-lowest flex items-center justify-center text-primary shadow-sm">
+<span class="material-symbols-outlined text-3xl" data-icon="phone_in_talk">phone_in_talk</span>
+</div>
+<div>
+<p class="text-sm font-bold text-on-secondary-container">Zadzwoń do nas</p>
+<p class="text-2xl font-serif font-bold text-on-secondary-fixed">+48 123 456 789</p>
+</div>
+</div>
+</div>
+</div>
+</section>
+<!-- Footer -->
+<footer class="bg-[#faf3e7] dark:bg-[#1a1c18] full-width rounded-t-[3rem] mt-12">
+<div class="flex flex-col md:flex-row justify-between items-start w-full px-12 py-16 gap-8 max-w-7xl mx-auto">
+<div class="space-y-6 max-w-xs">
+<div class="text-xl font-serif italic text-[#8c4d50] dark:text-[#fcacaf]">Piekarnik Gosi</div>
+<p class="text-sm text-[#363227] dark:text-[#e6e2d9] leading-relaxed">Miejsce, gdzie tradycyjne receptury spotykają się z miłością do słodkości.</p>
+<div class="flex gap-4">
+<a class="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center hover:opacity-70 transition-opacity" href="#">
+<span class="material-symbols-outlined text-lg" data-icon="share">share</span>
+</a>
+</div>
+</div>
+<div class="grid grid-cols-2 gap-12">
+<div class="space-y-4">
+<h5 class="font-bold text-[#8c4d50]">Informacje</h5>
+<ul class="space-y-2 text-sm text-[#363227] dark:text-[#e6e2d9]">
+<li><a class="hover:opacity-70 transition-opacity" href="#">O nas</a></li>
+<li><a class="hover:opacity-70 transition-opacity" href="#">Alergeny</a></li>
+<li><a class="hover:opacity-70 transition-opacity" href="#">Dostawy</a></li>
+</ul>
+</div>
+<div class="space-y-4">
+<h5 class="font-bold text-[#8c4d50]">Legalne</h5>
+<ul class="space-y-2 text-sm text-[#363227] dark:text-[#e6e2d9]">
+<li><a class="hover:opacity-70 transition-opacity" href="#">Regulamin</a></li>
+<li><a class="hover:opacity-70 transition-opacity" href="#">Polityka Prywatności</a></li>
+</ul>
+</div>
+</div>
+<div class="md:text-right space-y-4">
+<p class="text-sm text-[#363227] dark:text-[#e6e2d9] opacity-70">© 2024 Piekarnik Gosi. Tradycja i Słodkość.</p>
+<div class="inline-flex items-center gap-2 px-4 py-2 border border-outline-variant/20 rounded-full text-xs">
+<span class="w-2 h-2 rounded-full bg-secondary"></span>
+                    Otwarte teraz
+                </div>
+</div>
+</div>
+</footer>
+</body></html>

inspiration/portfolio/DESIGN.md

@@ -0,0 +1,85 @@
+# Design System Document: Artisanal Elegance
+
+## 1. Overview & Creative North Star
+
+### Creative North Star: "The Confectioner’s Gallery"
+This design system is not a mere utility; it is a digital extension of the physical 'Piekarnik Gosi' experience. It treats every interface as a curated display case, mirroring the warmth of a family-owned bakery and the precision of a high-end pâtisserie. 
+
+To break the "template" look common in local business sites, this system rejects rigid grids in favor of **Intentional Editorial Asymmetry**. We lean into overlapping elements—such as a product image bleeding off-center into a text block—to mimic the organic arrangement of cakes on a counter. The visual language is defined by high-contrast typography scales, where massive, elegant serifs meet delicate, airy sans-serifs, creating an atmosphere that is both approachable and elite.
+
+---
+
+## 2. Colors
+
+The palette is derived from the shop's interior: sage greens, dusty roses, and warm creams. This is a tonal system designed for warmth.
+
+### The "No-Line" Rule
+**Explicit Instruction:** Designers are prohibited from using 1px solid borders to define sections. Boundaries must be defined solely through background color shifts. For example, a section using `surface-container-low` (#faf3e7) should sit directly against a `surface` (#fff8f0) background. This creates a soft, "dipped" effect rather than a harsh, boxed-in feel.
+
+### Surface Hierarchy & Nesting
+Treat the UI as physical layers of fine vellum paper. Use the surface tiers to create "nested" depth:
+- **Base Level:** `surface` (#fff8f0) for the main body.
+- **Sectioning:** `surface-container-low` (#faf3e7) for large background blocks (e.g., the "Our Story" section).
+- **Interactive Layers:** `surface-container-highest` (#eae2d2) for secondary cards or floating menus to define importance through tonal weight.
+
+### The "Glass & Gradient" Rule
+To move beyond a flat, "standard" UI, use Glassmorphism for floating elements (like a navigation bar or a "Quick Cart"). Utilize semi-transparent surface colors with a `backdrop-blur` of 12px-20px. 
+**Signature CTA Polish:** Use subtle linear gradients for primary actions, transitioning from `primary` (#8c4d50) to `primary-container` (#fcacaf). This adds "visual soul" and a velvet-like texture that flat colors cannot replicate.
+
+---
+
+## 3. Typography
+
+The typography strategy balances the "Tradition" of the bakery with the "Clarity" of a modern cafe menu.
+
+- **Display & Headlines (Noto Serif):** These are our "Artisanal" markers. Use large scales (e.g., `display-lg` at 3.5rem) with tighter letter-spacing for a high-end editorial look. Italics should be used sparingly for "O nas" or "Nasze Wyroby" to evoke a handwritten, personal touch.
+- **Titles & Body (Plus Jakarta Sans):** This is our "Modern Service" layer. It provides high legibility. `title-lg` is your workhorse for product names, while `body-md` ensures the ingredients list is readable at any age.
+
+The hierarchy conveys the brand: The Serif speaks to the *quality* of the recipe; the Sans-Serif speaks to the *friendliness* of the service.
+
+---
+
+## 4. Elevation & Depth
+
+We eschew structural lines for **Tonal Layering**.
+
+- **The Layering Principle:** Stack containers to create lift. Place a `surface-container-lowest` (#ffffff) card on a `surface-container-low` (#faf3e7) section. This mimics the way a white pastry box sits on a cream-colored wooden table.
+- **Ambient Shadows:** For "floating" elements (like a cupcake selection modal), use extra-diffused shadows. 
+    - *Formula:* `0px 12px 32px rgba(54, 50, 39, 0.06)`. Note the color is a tinted version of `on-surface`, never pure black.
+- **The "Ghost Border" Fallback:** If a border is required for accessibility, it must be a "Ghost Border": use `outline-variant` (#b9b1a3) at **15% opacity**. 100% opaque borders are strictly forbidden.
+- **Soft Geometry:** Utilize the `lg` (2rem) and `xl` (3rem) roundedness tokens. This mimics the scalloped wall details and rounded seating seen in the 'Piekarnik Gosi' interior.
+
+---
+
+## 5. Components
+
+### Buttons
+- **Primary:** Rounded `full` (9999px). Gradient background (`primary` to `primary-container`). Label in `on-primary` (#fff7f6). 
+- **Secondary:** Surface-colored with a "Ghost Border." High-quality hover state: a subtle shift to `surface-container-high`.
+
+### Cards & Lists
+- **Rule:** Absolute prohibition of divider lines.
+- **Implementation:** Use vertical whitespace (refer to Spacing Scale) and background shifts. A product list should be a sequence of `surface-container-lowest` tiles floating on a `surface` background.
+- **Bakery Icons:** Use custom line-art icons (Cupcakes, Whisks) in the `primary` color, but place them within a `secondary-container` (#e0f5cb) circle to create a "stamp" effect.
+
+### Selection Chips
+- Use the `md` (1.5rem) roundedness. Use `secondary-container` for the "Active" state to bring in the sage green from the shop’s beams and window frames.
+
+### Input Fields
+- Avoid the "boxed" look. Use `surface-container-highest` as a solid background fill with a bottom-only `outline` at 20% opacity. This feels more like a chic, handwritten menu.
+
+---
+
+## 6. Do’s and Don'ts
+
+### Do:
+*   **Embrace Whitespace:** Let the "Cream" background breathe. High-end design is defined by what isn't there.
+*   **Layer Tones:** Always ask "Can I use a color shift instead of a line?"
+*   **Iconography with Intent:** Use bakery-specific icons to reinforce the family-oriented, artisanal nature.
+*   **Asymmetric Layouts:** Place a large serif heading on the left and a product image slightly overlapping it on the right.
+
+### Don't:
+*   **Don't use pure black (#000000):** Use `on-background` (#363227) for text to maintain a warm, organic feel.
+*   **Don't use hard corners:** Every element should feel as soft as a pastry. Minimum corner radius is `sm` (0.5rem), but aim for `lg` (2rem).
+*   **Don't use heavy shadows:** If the shadow looks "dirty" or "heavy," reduce the opacity. It should feel like morning light in a coffee shop.
+*   **Don't use standard Dividers:** If you need to separate content, use a change in background color or a 48px-64px vertical gap.

inspiration/portfolio/code.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+
+<html lang="pl"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&amp;family=Plus+Jakarta+Sans:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            "colors": {
+                    "background": "#fff8f0",
+                    "outline": "#807a6d",
+                    "on-secondary-container": "#4c5e3e",
+                    "surface-container-lowest": "#ffffff",
+                    "tertiary-fixed": "#f8d472",
+                    "primary-dim": "#7e4145",
+                    "inverse-primary": "#f9a9ac",
+                    "surface-variant": "#eae2d2",
+                    "on-secondary-fixed": "#3b4b2d",
+                    "surface-tint": "#8c4d50",
+                    "primary-fixed": "#fcacaf",
+                    "on-secondary": "#edffd9",
+                    "outline-variant": "#b9b1a3",
+                    "on-primary-container": "#622b2f",
+                    "error-dim": "#821a01",
+                    "secondary-container": "#e0f5cb",
+                    "on-secondary-fixed-variant": "#566847",
+                    "error-container": "#fa7150",
+                    "on-background": "#363227",
+                    "on-tertiary-fixed": "#463600",
+                    "secondary-dim": "#475839",
+                    "on-tertiary-fixed-variant": "#695100",
+                    "surface": "#fff8f0",
+                    "inverse-surface": "#100e09",
+                    "on-primary-fixed-variant": "#6d3438",
+                    "surface-container-low": "#faf3e7",
+                    "inverse-on-surface": "#a19c94",
+                    "on-surface-variant": "#645f52",
+                    "surface-container": "#f5ede0",
+                    "on-primary": "#fff7f6",
+                    "secondary-fixed-dim": "#d2e6bd",
+                    "on-primary-fixed": "#48171c",
+                    "surface-container-high": "#efe7d9",
+                    "on-error-container": "#671200",
+                    "secondary-fixed": "#e0f5cb",
+                    "surface-container-highest": "#eae2d2",
+                    "surface-dim": "#e2d9c8",
+                    "secondary": "#536444",
+                    "tertiary-container": "#f8d472",
+                    "on-tertiary-container": "#5d4800",
+                    "tertiary": "#765c00",
+                    "on-error": "#fff7f6",
+                    "surface-bright": "#fff8f0",
+                    "primary-container": "#fcacaf",
+                    "tertiary-fixed-dim": "#e9c666",
+                    "on-tertiary": "#fff8ef",
+                    "tertiary-dim": "#675000",
+                    "primary": "#8c4d50",
+                    "primary-fixed-dim": "#ed9fa2",
+                    "error": "#aa371c",
+                    "on-surface": "#363227"
+            },
+            "borderRadius": {
+                    "DEFAULT": "1rem",
+                    "lg": "2rem",
+                    "xl": "3rem",
+                    "full": "9999px"
+            },
+            "fontFamily": {
+                    "headline": ["Noto Serif"],
+                    "body": ["Plus Jakarta Sans"],
+                    "label": ["Plus Jakarta Sans"]
+            }
+          },
+        },
+      }
+    </script>
+<style>
+      .material-symbols-outlined {
+        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+      }
+      body {
+        font-family: 'Plus Jakarta Sans', sans-serif;
+        background-color: #fff8f0;
+        color: #363227;
+      }
+      h1, h2, h3, .font-serif {
+        font-family: 'Noto Serif', serif;
+      }
+    </style>
+</head>
+<body class="bg-background text-on-background min-h-screen">
+<!-- Top Navigation Bar -->
+<nav class="bg-[#fff8f0]/80 dark:bg-[#1a1c18]/80 backdrop-blur-xl docked full-width top-0 sticky z-50">
+<div class="flex justify-between items-center w-full px-8 py-4 max-w-7xl mx-auto">
+<div class="text-2xl font-serif italic text-[#8c4d50] dark:text-[#fcacaf]">Piekarnik Gosi</div>
+<div class="hidden md:flex gap-8 items-center">
+<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300 font-medium text-sm" href="#">Strona Główna</a>
+<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300 font-medium text-sm" href="#">Wyroby</a>
+<a class="text-[#8c4d50] dark:text-[#fcacaf] font-bold border-b-2 border-[#8c4d50] dark:border-[#fcacaf] pb-1 text-sm" href="#">Portfolio</a>
+<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300 font-medium text-sm" href="#">Kawiarnia</a>
+</div>
+<button class="bg-gradient-to-r from-primary to-primary-container text-on-primary px-6 py-2 rounded-full font-medium hover:scale-95 transition-transform duration-200">
+                Kontakt
+            </button>
+</div>
+</nav>
+<main class="max-w-7xl mx-auto px-6 pt-12 md:pt-20">
+<!-- Header Section -->
+<header class="text-center mb-16 space-y-4 max-w-3xl mx-auto">
+<h1 class="text-4xl md:text-6xl font-bold text-on-background tracking-tight">Our Birthday Cake Gallery</h1>
+<p class="text-on-surface-variant text-lg md:text-xl leading-relaxed italic">
+                From whimsical dreams for the little ones to elegant masterpieces for grand celebrations. Every cake is a unique story baked with love and artisanal precision.
+            </p>
+</header>
+<!-- Category Filters -->
+<div class="flex flex-wrap justify-center gap-3 mb-12">
+<button class="px-6 py-2 rounded-full bg-secondary-container text-on-secondary-container font-semibold transition-all hover:bg-secondary-container/80">Wszystkie</button>
+<button class="px-6 py-2 rounded-full bg-surface-container-highest text-on-surface-variant font-medium transition-all hover:bg-secondary-container/50">Dla Dzieci</button>
+<button class="px-6 py-2 rounded-full bg-surface-container-highest text-on-surface-variant font-medium transition-all hover:bg-secondary-container/50">Elegant</button>
+<button class="px-6 py-2 rounded-full bg-surface-container-highest text-on-surface-variant font-medium transition-all hover:bg-secondary-container/50">Owocowe</button>
+<button class="px-6 py-2 rounded-full bg-surface-container-highest text-on-surface-variant font-medium transition-all hover:bg-secondary-container/50">Czekoladowe</button>
+<button class="px-6 py-2 rounded-full bg-surface-container-highest text-on-surface-variant font-medium transition-all hover:bg-secondary-container/50">Nowoczesne</button>
+</div>
+<!-- Bento Grid Gallery -->
+<section class="grid grid-cols-1 md:grid-cols-12 gap-6 auto-rows-[250px] md:auto-rows-[300px]">
+<!-- Large Feature Item -->
+<div class="md:col-span-8 md:row-span-2 group relative overflow-hidden rounded-xl bg-surface-container-low flex flex-col">
+<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Exquisite multi-tiered custom birthday cake with pastel floral decorations, soft pink frosting, and gold leaf accents on a marble table" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDFikZPqI_iQXFO4l_-RW7Z57qyXR8H4zRhI1eIjtx9VU9D-k_wP4SOd80FuENx_DkMFWhN2_VpcE-I9O_eqLgkYzf9dafZNy64qMRBEa2uIUy3B9wDtLBgaKhCOFvzEGBgPwyY4a9WkCNHc7JAlVMWrDmUhfuFZYRFKT6at-LhnyJM4NQZsDcVDs5thUfVu4pen3ckbGkln0t_N0g05c_ViBM6rUuch6zV11MMr2a8mlwVo3kA0NKotR6hj8Bs6yMl0jjZuXWt6x1-"/>
+<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-8">
+<h3 class="text-white text-2xl font-serif">Królewski Ogród</h3>
+<p class="text-white/80 text-sm">Nasza flagowa propozycja na jubileusze.</p>
+</div>
+</div>
+<!-- Tall Item -->
+<div class="md:col-span-4 md:row-span-2 group relative overflow-hidden rounded-xl bg-surface-container-low">
+<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="A tall, minimalist birthday cake with sleek sage green buttercream, decorated with fresh rosemary and organic honey drips" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCrjRsn6mQ-JnhAEr6VXI_FZYPK7uUEcbos_c3OapJRDwZEhzX1ngitip1MAZ3iJTDdEsfGB7C-k4cjmKOl20qwpjHtyGq67Slz4MUo8c0GKANaXSM2_k7A1zEDAfX1H6eVjtK_3-lfKTga3GDFJlH4mSDR82z5NJ9FwkEyfzhC47HNhpQ5ItM58Q0acbKgOJr-Qg35E1AezERr-SHJCZBLGxIDoTzbCfSNHd5J718A5DgtHuc8xRHqBV1u01UYgvBrBMHCdF4XOHxR"/>
+<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
+<h3 class="text-white text-xl font-serif">Leśna Harmonia</h3>
+<p class="text-white/80 text-xs">Elegancja w stylu minimalistycznym.</p>
+</div>
+</div>
+<!-- Small Square Item -->
+<div class="md:col-span-4 md:row-span-1 group relative overflow-hidden rounded-xl bg-surface-container-low">
+<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Playful colorful children's birthday cake shaped like a friendly dinosaur with fondant details and vibrant sprinkles" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDk6Nl9FXhUDm20Odf8qp6S4z8_RSMCqPT2NzYNTKuywxA2ROhr--FOkQbUpvdEy98pRFcrFU9ek4emoEn0eJY1WwsobcDXQf8NSvT36usE-Zo1IsJjq-hckSaxy0pZp3HkK83Twd9BUsNjuII9Ppgd3DnY8MadsRGF2KB0U1yi-U0gFU3GjxwKOtAWil_40yLsohJVmQloo48O23AhnRUShe_9vRCMCXKOXOW1Sk413Bs5UsuSqjDkP_rmfvGwnLiwsEnKuLAXraCG"/>
+<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
+<h3 class="text-white text-xl font-serif">Dino-Przygoda</h3>
+</div>
+</div>
+<!-- Small Square Item -->
+<div class="md:col-span-4 md:row-span-1 group relative overflow-hidden rounded-xl bg-surface-container-low">
+<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Modern geometric birthday cake with dark chocolate ganache, copper metallic stripes, and fresh raspberries on top" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAR-7CSH5K6ev9a-ZLwUst-9GAXGXrhU9sXR5Jpcmutf54AuV-GCq2DaGmNz2PDURUaaGHsecsZR4HWwaTL_K0m95c4FKwQ5jip3Bet50GuTi9-R1BY0VHkm93rrbZ_UU1g_lcqkhv9tS42EZ144JqhJp3UqLAHLW6ZBabLjm5cvUtWE72HTk8Cp5kPgFNuDFfiYknHktD0_tXt5G53XEMzgDSv8fng_-uWffT05icSTzw0OpRAiAWeEIaIWMxA0J7heBEmcMOwhrBc"/>
+<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
+<h3 class="text-white text-xl font-serif">Miedziany Akcent</h3>
+</div>
+</div>
+<!-- Medium Item -->
+<div class="md:col-span-4 md:row-span-1 group relative overflow-hidden rounded-xl bg-surface-container-low">
+<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Heart-shaped vintage style cake with intricate white piping, pearls, and a delicate silk ribbon around the base" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC2uSaLKtXL7CMMeleD9-hTvqnf8vEJAn2vCl6QlLBK-UeO4FKNQIEaWbsu8txf8115OFwYDRnLHMpsI5qepNZr7bQH8PmGMj3GRXeYQYu0S5kW6drjFHsefy2PzuZkof9f5ScXd9VtYk38P6TUjMGtpilgeuX6CCRbxsMSDiCjecff7KYWJGqDxRtj35AKwkxjYDVvvD5x9oGqJ0hTIryJMcKvX4YUbE1zd-2PCD_LPYjmO42EYL2kzWShHh1NQf4LUpCxBuW2dHcK"/>
+<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
+<h3 class="text-white text-xl font-serif">Vintage Love</h3>
+</div>
+</div>
+</section>
+<!-- CTA Section -->
+<section class="mt-24 mb-12 p-8 md:p-16 rounded-xl bg-surface-container-low relative overflow-hidden">
+<div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full -mr-32 -mt-32"></div>
+<div class="absolute bottom-0 left-0 w-48 h-48 bg-secondary-container/20 rounded-full -ml-24 -mb-24"></div>
+<div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8">
+<div class="max-w-2xl">
+<h2 class="text-3xl md:text-4xl font-bold mb-4">Inquire About Your Custom Cake</h2>
+<p class="text-on-surface-variant text-lg">
+                        Have a specific vision in mind? Let's discuss your perfect celebration cake. We handle everything from intimate gatherings to large parties.
+                    </p>
+</div>
+<button class="whitespace-nowrap bg-gradient-to-r from-primary to-primary-container text-on-primary px-10 py-4 rounded-full font-bold text-lg hover:scale-105 transition-transform shadow-lg shadow-primary/20">
+                    Get a Quote
+                </button>
+</div>
+</section>
+</main>
+<!-- Footer -->
+<footer class="bg-[#faf3e7] dark:bg-[#1a1c18] full-width rounded-t-[3rem] mt-12">
+<div class="flex flex-col md:flex-row justify-between items-start w-full px-12 py-16 gap-8 max-w-7xl mx-auto">
+<div class="space-y-4">
+<div class="text-xl font-serif italic text-[#8c4d50] dark:text-[#fcacaf]">Piekarnik Gosi</div>
+<p class="text-sm text-[#363227] dark:text-[#e6e2d9] max-w-xs leading-relaxed">
+                    © 2024 Piekarnik Gosi. Tradycja i Słodkość. Tworzymy wspomnienia ze smaku.
+                </p>
+</div>
+<div class="grid grid-cols-2 gap-x-12 gap-y-4">
+<a class="text-[#363227] dark:text-[#e6e2d9] text-sm hover:opacity-70 transition-opacity" href="#">O nas</a>
+<a class="text-[#363227] dark:text-[#e6e2d9] text-sm hover:opacity-70 transition-opacity" href="#">Alergeny</a>
+<a class="text-[#363227] dark:text-[#e6e2d9] text-sm hover:opacity-70 transition-opacity" href="#">Regulamin</a>
+<a class="text-[#363227] dark:text-[#e6e2d9] text-sm hover:opacity-70 transition-opacity" href="#">Polityka Prywatności</a>
+</div>
+<div class="flex gap-4">
+<span class="material-symbols-outlined text-[#8c4d50] cursor-pointer hover:scale-110 transition-transform">social_leaderboard</span>
+<span class="material-symbols-outlined text-[#8c4d50] cursor-pointer hover:scale-110 transition-transform">camera</span>
+<span class="material-symbols-outlined text-[#8c4d50] cursor-pointer hover:scale-110 transition-transform">mail</span>
+</div>
+</div>
+</footer>
+</body></html>

inspiration/wyroby/DESIGN.md

@@ -0,0 +1,85 @@
+# Design System Document: Artisanal Elegance
+
+## 1. Overview & Creative North Star
+
+### Creative North Star: "The Confectioner’s Gallery"
+This design system is not a mere utility; it is a digital extension of the physical 'Piekarnik Gosi' experience. It treats every interface as a curated display case, mirroring the warmth of a family-owned bakery and the precision of a high-end pâtisserie. 
+
+To break the "template" look common in local business sites, this system rejects rigid grids in favor of **Intentional Editorial Asymmetry**. We lean into overlapping elements—such as a product image bleeding off-center into a text block—to mimic the organic arrangement of cakes on a counter. The visual language is defined by high-contrast typography scales, where massive, elegant serifs meet delicate, airy sans-serifs, creating an atmosphere that is both approachable and elite.
+
+---
+
+## 2. Colors
+
+The palette is derived from the shop's interior: sage greens, dusty roses, and warm creams. This is a tonal system designed for warmth.
+
+### The "No-Line" Rule
+**Explicit Instruction:** Designers are prohibited from using 1px solid borders to define sections. Boundaries must be defined solely through background color shifts. For example, a section using `surface-container-low` (#faf3e7) should sit directly against a `surface` (#fff8f0) background. This creates a soft, "dipped" effect rather than a harsh, boxed-in feel.
+
+### Surface Hierarchy & Nesting
+Treat the UI as physical layers of fine vellum paper. Use the surface tiers to create "nested" depth:
+- **Base Level:** `surface` (#fff8f0) for the main body.
+- **Sectioning:** `surface-container-low` (#faf3e7) for large background blocks (e.g., the "Our Story" section).
+- **Interactive Layers:** `surface-container-highest` (#eae2d2) for secondary cards or floating menus to define importance through tonal weight.
+
+### The "Glass & Gradient" Rule
+To move beyond a flat, "standard" UI, use Glassmorphism for floating elements (like a navigation bar or a "Quick Cart"). Utilize semi-transparent surface colors with a `backdrop-blur` of 12px-20px. 
+**Signature CTA Polish:** Use subtle linear gradients for primary actions, transitioning from `primary` (#8c4d50) to `primary-container` (#fcacaf). This adds "visual soul" and a velvet-like texture that flat colors cannot replicate.
+
+---
+
+## 3. Typography
+
+The typography strategy balances the "Tradition" of the bakery with the "Clarity" of a modern cafe menu.
+
+- **Display & Headlines (Noto Serif):** These are our "Artisanal" markers. Use large scales (e.g., `display-lg` at 3.5rem) with tighter letter-spacing for a high-end editorial look. Italics should be used sparingly for "O nas" or "Nasze Wyroby" to evoke a handwritten, personal touch.
+- **Titles & Body (Plus Jakarta Sans):** This is our "Modern Service" layer. It provides high legibility. `title-lg` is your workhorse for product names, while `body-md` ensures the ingredients list is readable at any age.
+
+The hierarchy conveys the brand: The Serif speaks to the *quality* of the recipe; the Sans-Serif speaks to the *friendliness* of the service.
+
+---
+
+## 4. Elevation & Depth
+
+We eschew structural lines for **Tonal Layering**.
+
+- **The Layering Principle:** Stack containers to create lift. Place a `surface-container-lowest` (#ffffff) card on a `surface-container-low` (#faf3e7) section. This mimics the way a white pastry box sits on a cream-colored wooden table.
+- **Ambient Shadows:** For "floating" elements (like a cupcake selection modal), use extra-diffused shadows. 
+    - *Formula:* `0px 12px 32px rgba(54, 50, 39, 0.06)`. Note the color is a tinted version of `on-surface`, never pure black.
+- **The "Ghost Border" Fallback:** If a border is required for accessibility, it must be a "Ghost Border": use `outline-variant` (#b9b1a3) at **15% opacity**. 100% opaque borders are strictly forbidden.
+- **Soft Geometry:** Utilize the `lg` (2rem) and `xl` (3rem) roundedness tokens. This mimics the scalloped wall details and rounded seating seen in the 'Piekarnik Gosi' interior.
+
+---
+
+## 5. Components
+
+### Buttons
+- **Primary:** Rounded `full` (9999px). Gradient background (`primary` to `primary-container`). Label in `on-primary` (#fff7f6). 
+- **Secondary:** Surface-colored with a "Ghost Border." High-quality hover state: a subtle shift to `surface-container-high`.
+
+### Cards & Lists
+- **Rule:** Absolute prohibition of divider lines.
+- **Implementation:** Use vertical whitespace (refer to Spacing Scale) and background shifts. A product list should be a sequence of `surface-container-lowest` tiles floating on a `surface` background.
+- **Bakery Icons:** Use custom line-art icons (Cupcakes, Whisks) in the `primary` color, but place them within a `secondary-container` (#e0f5cb) circle to create a "stamp" effect.
+
+### Selection Chips
+- Use the `md` (1.5rem) roundedness. Use `secondary-container` for the "Active" state to bring in the sage green from the shop’s beams and window frames.
+
+### Input Fields
+- Avoid the "boxed" look. Use `surface-container-highest` as a solid background fill with a bottom-only `outline` at 20% opacity. This feels more like a chic, handwritten menu.
+
+---
+
+## 6. Do’s and Don'ts
+
+### Do:
+*   **Embrace Whitespace:** Let the "Cream" background breathe. High-end design is defined by what isn't there.
+*   **Layer Tones:** Always ask "Can I use a color shift instead of a line?"
+*   **Iconography with Intent:** Use bakery-specific icons to reinforce the family-oriented, artisanal nature.
+*   **Asymmetric Layouts:** Place a large serif heading on the left and a product image slightly overlapping it on the right.
+
+### Don't:
+*   **Don't use pure black (#000000):** Use `on-background` (#363227) for text to maintain a warm, organic feel.
+*   **Don't use hard corners:** Every element should feel as soft as a pastry. Minimum corner radius is `sm` (0.5rem), but aim for `lg` (2rem).
+*   **Don't use heavy shadows:** If the shadow looks "dirty" or "heavy," reduce the opacity. It should feel like morning light in a coffee shop.
+*   **Don't use standard Dividers:** If you need to separate content, use a change in background color or a 48px-64px vertical gap.

inspiration/wyroby/code.html

@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+
+<html lang="pl"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&amp;family=Plus+Jakarta+Sans:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            "colors": {
+                    "background": "#fff8f0",
+                    "outline": "#807a6d",
+                    "on-secondary-container": "#4c5e3e",
+                    "surface-container-lowest": "#ffffff",
+                    "tertiary-fixed": "#f8d472",
+                    "primary-dim": "#7e4145",
+                    "inverse-primary": "#f9a9ac",
+                    "surface-variant": "#eae2d2",
+                    "on-secondary-fixed": "#3b4b2d",
+                    "surface-tint": "#8c4d50",
+                    "primary-fixed": "#fcacaf",
+                    "on-secondary": "#edffd9",
+                    "outline-variant": "#b9b1a3",
+                    "on-primary-container": "#622b2f",
+                    "error-dim": "#821a01",
+                    "secondary-container": "#e0f5cb",
+                    "on-secondary-fixed-variant": "#566847",
+                    "error-container": "#fa7150",
+                    "on-background": "#363227",
+                    "on-tertiary-fixed": "#463600",
+                    "secondary-dim": "#475839",
+                    "on-tertiary-fixed-variant": "#695100",
+                    "surface": "#fff8f0",
+                    "inverse-surface": "#100e09",
+                    "on-primary-fixed-variant": "#6d3438",
+                    "surface-container-low": "#faf3e7",
+                    "inverse-on-surface": "#a19c94",
+                    "on-surface-variant": "#645f52",
+                    "surface-container": "#f5ede0",
+                    "on-primary": "#fff7f6",
+                    "secondary-fixed-dim": "#d2e6bd",
+                    "on-primary-fixed": "#48171c",
+                    "surface-container-high": "#efe7d9",
+                    "on-error-container": "#671200",
+                    "secondary-fixed": "#e0f5cb",
+                    "surface-container-highest": "#eae2d2",
+                    "surface-dim": "#e2d9c8",
+                    "secondary": "#536444",
+                    "tertiary-container": "#f8d472",
+                    "on-tertiary-container": "#5d4800",
+                    "tertiary": "#765c00",
+                    "on-error": "#fff7f6",
+                    "surface-bright": "#fff8f0",
+                    "primary-container": "#fcacaf",
+                    "tertiary-fixed-dim": "#e9c666",
+                    "on-tertiary": "#fff8ef",
+                    "tertiary-dim": "#675000",
+                    "primary": "#8c4d50",
+                    "primary-fixed-dim": "#ed9fa2",
+                    "error": "#aa371c",
+                    "on-surface": "#363227"
+            },
+            "borderRadius": {
+                    "DEFAULT": "1rem",
+                    "lg": "2rem",
+                    "xl": "3rem",
+                    "full": "9999px"
+            },
+            "fontFamily": {
+                    "headline": ["Noto Serif"],
+                    "body": ["Plus Jakarta Sans"],
+                    "label": ["Plus Jakarta Sans"]
+            }
+          },
+        },
+      }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+        body { font-family: 'Plus Jakarta Sans', sans-serif; }
+        h1, h2, h3 { font-family: 'Noto Serif', serif; }
+    </style>
+</head>
+<body class="bg-background text-on-background">
+<!-- Top Navigation -->
+<nav class="bg-[#fff8f0]/80 dark:bg-[#1a1c18]/80 backdrop-blur-xl docked full-width top-0 sticky z-50">
+<div class="flex justify-between items-center w-full px-8 py-4 max-w-7xl mx-auto">
+<div class="text-2xl font-serif italic text-[#8c4d50] dark:text-[#fcacaf]">Piekarnik Gosi</div>
+<div class="hidden md:flex items-center gap-8">
+<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300 font-medium" href="#">Strona Główna</a>
+<a class="text-[#8c4d50] dark:text-[#fcacaf] font-bold border-b-2 border-[#8c4d50] dark:border-[#fcacaf] pb-1 transition-all duration-300" href="#">Wyroby</a>
+<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300 font-medium" href="#">Portfolio</a>
+<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300 font-medium" href="#">Kawiarnia</a>
+</div>
+<button class="bg-gradient-to-r from-primary to-primary-container text-on-primary px-8 py-2.5 rounded-full font-medium scale-95 transition-transform duration-200 hover:scale-100 shadow-sm">
+                Kontakt
+            </button>
+</div>
+</nav>
+<main class="max-w-7xl mx-auto px-6 lg:px-8 py-16">
+<!-- Hero Section -->
+<header class="mb-20">
+<h1 class="text-5xl lg:text-7xl font-bold tracking-tight mb-6">Nasze Słodkości</h1>
+<p class="text-on-surface-variant text-lg max-w-2xl leading-relaxed">Poznaj nasze tradycyjne receptury przekute w nowoczesne formy. Każdy wypiek to historia pasji, a każde lody to powiew naturalnej świeżości.</p>
+</header>
+<!-- Cakes & Pastries Section -->
+<section class="mb-24">
+<div class="flex items-center justify-between mb-12">
+<h2 class="text-4xl font-bold">Cakes &amp; Pastries</h2>
+<div class="h-[1px] flex-grow mx-8 bg-outline-variant opacity-20"></div>
+<div class="flex gap-2">
+<span class="bg-secondary-container text-on-secondary-container px-4 py-1.5 rounded-md text-sm font-medium">Ciasta</span>
+<span class="bg-surface-container-highest px-4 py-1.5 rounded-md text-sm font-medium opacity-60">Torty</span>
+</div>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
+<!-- Product Card 1 -->
+<div class="group flex flex-col bg-surface-container-lowest rounded-lg overflow-hidden transition-all duration-300 hover:-translate-y-2">
+<div class="relative h-72 overflow-hidden">
+<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="sophisticated multi-layered chocolate mousse cake with gold leaf decoration on a ceramic plate, soft morning light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8eaeSUB2UNdDs_Mg-Bzwk96Wu0WyyGB3vsUHxCJEUOkXi9CbLBN3hYpYBgk7-ZjowJ2KeaYVU-x6Lm0sb-EMEo0I5p0ntqY82EuxF4A21_Ffmou1eG6S0SmCt7kC3HbVHwhKh_XdaDnAYpPy35Ci2ynJTRJXVSofqEgz_HDieyST5LdtfQkByWSqTW2bM18ozh_jA5-bTKb-B-Ve4j0dvJ6p2KQmfQWFlD6XOO4FInkqrGDTEdjJbQRmYBzIyAxTNOh6LGJMdNf-k"/>
+<div class="absolute top-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-primary tracking-wider uppercase">Bestseller</div>
+</div>
+<div class="p-8 flex flex-col flex-grow">
+<div class="flex justify-between items-start mb-4">
+<h3 class="text-2xl font-bold leading-tight">Tort Musowy Truskawkowy</h3>
+<span class="text-primary font-bold text-lg">120 zł/kg</span>
+</div>
+<p class="text-on-surface-variant text-sm mb-8 leading-relaxed">Delikatny mus na bazie białej czekolady i świeżych polskich truskawek, z chrupiącą warstwą prażynki.</p>
+<div class="mt-auto pt-6">
+<button class="w-full py-4 rounded-full bg-surface-container-high text-on-surface font-bold transition-all duration-300 hover:bg-primary hover:text-on-primary flex items-center justify-center gap-2">
+<span class="material-symbols-outlined text-xl" data-icon="shopping_basket">shopping_basket</span>
+                                Dodaj do zamówienia
+                            </button>
+</div>
+</div>
+</div>
+<!-- Product Card 2 -->
+<div class="group flex flex-col bg-surface-container-lowest rounded-lg overflow-hidden transition-all duration-300 hover:-translate-y-2">
+<div class="relative h-72 overflow-hidden">
+<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="collection of artisan pastel colored cupcakes with delicate floral frosting swirls on a wooden bakery counter" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDk5K-uPB0likN3jDErxnNvZK11658Q5UQaeLtdGOlsKYsiyf4qKIB5bmbF7ILwew-lpj7R7JsdwHAUjG6-LQTa82BipkI1Di581-_iZatyKgJw2rL3hYBiHkg8rLn0BuzWEXegAxOWl0D7ucEZmbYdO1KdLHt7KDtbUtC7FRlFSq3P4rMT73xqyd9oTI3wYEmfXAQFPPXAVlJD_8aagKxPqtdJ860b3onRRwf6QG1nrOcbQj4Qdv2OD9HCjJlyG5CUjBr-3K_4nFHB"/>
+</div>
+<div class="p-8 flex flex-col flex-grow">
+<div class="flex justify-between items-start mb-4">
+<h3 class="text-2xl font-bold leading-tight">Zestaw Cupcakes</h3>
+<span class="text-primary font-bold text-lg">14 zł/szt</span>
+</div>
+<p class="text-on-surface-variant text-sm mb-8 leading-relaxed">Ręcznie dekorowane babeczki w różnych smakach: wanilia, słony karmel, pistacja. Idealne na prezent.</p>
+<div class="mt-auto pt-6">
+<button class="w-full py-4 rounded-full bg-surface-container-high text-on-surface font-bold transition-all duration-300 hover:bg-primary hover:text-on-primary flex items-center justify-center gap-2">
+<span class="material-symbols-outlined text-xl" data-icon="shopping_basket">shopping_basket</span>
+                                Dodaj do zamówienia
+                            </button>
+</div>
+</div>
+</div>
+<!-- Product Card 3 -->
+<div class="group flex flex-col bg-surface-container-lowest rounded-lg overflow-hidden transition-all duration-300 hover:-translate-y-2">
+<div class="relative h-72 overflow-hidden">
+<img class="w-col h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="classic sourdough tart with fresh blueberries and powdered sugar, rustic wooden background, artisanal bakery style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDVXDjC63tmXiXhiEwjjuW8c4Y2PLue4zGYQ7bAnVmeWg4BKD7osLg0GolJOG7EVJtz9sDFTeQeTgMuuLEkacp1lgJi8TdlRSA_QMJkkHIC1miXtO_JZxs7SFgPyZZV6eRhBY15WhkhuiIXM2RUYR_f5COmpWx7thxVG7KmvQXdSSSZ1GARN5DEVRCy_fwE-vwTMISscgScheFBQYEBIBHzDjG_FcX7NaPK5XruTumtmzQSZWdgxnf67holWyNkvn0MkTQD4hp4xZmr"/>
+</div>
+<div class="p-8 flex flex-col flex-grow">
+<div class="flex justify-between items-start mb-4">
+<h3 class="text-2xl font-bold leading-tight">Klasyczny Biszkopt Owocowy</h3>
+<span class="text-primary font-bold text-lg">85 zł/kg</span>
+</div>
+<p class="text-on-surface-variant text-sm mb-8 leading-relaxed">Puszysty biszkopt pieczony według rodzinnej receptury Gosi, z bitą śmietaną i sezonowymi owocami.</p>
+<div class="mt-auto pt-6">
+<button class="w-full py-4 rounded-full bg-surface-container-high text-on-surface font-bold transition-all duration-300 hover:bg-primary hover:text-on-primary flex items-center justify-center gap-2">
+<span class="material-symbols-outlined text-xl" data-icon="shopping_basket">shopping_basket</span>
+                                Dodaj do zamówienia
+                            </button>
+</div>
+</div>
+</div>
+</div>
+</section>
+<!-- Homemade Gelato Section -->
+<section class="bg-surface-container-low rounded-xl p-12 lg:p-20 relative overflow-hidden">
+<div class="absolute top-0 right-0 w-1/3 h-full opacity-5 pointer-events-none">
+<span class="material-symbols-outlined text-[20rem] rotate-12" data-icon="ice_skating">ice_skating</span>
+</div>
+<div class="relative z-10">
+<div class="max-w-xl mb-16">
+<h2 class="text-4xl lg:text-5xl font-bold mb-6 italic">Homemade Gelato</h2>
+<p class="text-on-surface-variant">Nasze lody rzemieślnicze przygotowujemy codziennie rano z prawdziwego mleka i świeżych owoców. Bez sztucznych aromatów.</p>
+</div>
+<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+<!-- Flavor 1 -->
+<div class="bg-surface-container-lowest p-6 rounded-lg text-center transition-transform hover:scale-105">
+<div class="w-16 h-16 bg-[#e0f5cb] rounded-full flex items-center justify-center mx-auto mb-4">
+<span class="material-symbols-outlined text-secondary text-3xl" data-icon="eco">eco</span>
+</div>
+<h4 class="font-bold text-lg mb-1">Pistacja</h4>
+<p class="text-xs text-on-surface-variant uppercase tracking-widest">Sycylia</p>
+<div class="mt-4 pt-4 border-t border-outline-variant/10">
+<span class="text-primary font-bold">8 zł / gałka</span>
+</div>
+</div>
+<!-- Flavor 2 -->
+<div class="bg-surface-container-lowest p-6 rounded-lg text-center transition-transform hover:scale-105">
+<div class="w-16 h-16 bg-primary-container/30 rounded-full flex items-center justify-center mx-auto mb-4">
+<span class="material-symbols-outlined text-primary text-3xl" data-icon="favorite">favorite</span>
+</div>
+<h4 class="font-bold text-lg mb-1">Truskawka</h4>
+<p class="text-xs text-on-surface-variant uppercase tracking-widest">Sorbet</p>
+<div class="mt-4 pt-4 border-t border-outline-variant/10">
+<span class="text-primary font-bold">7 zł / gałka</span>
+</div>
+</div>
+<!-- Flavor 3 -->
+<div class="bg-surface-container-lowest p-6 rounded-lg text-center transition-transform hover:scale-105">
+<div class="w-16 h-16 bg-tertiary-container/30 rounded-full flex items-center justify-center mx-auto mb-4">
+<span class="material-symbols-outlined text-tertiary text-3xl" data-icon="bakery_dining">bakery_dining</span>
+</div>
+<h4 class="font-bold text-lg mb-1">Słony Karmel</h4>
+<p class="text-xs text-on-surface-variant uppercase tracking-widest">Klasyk</p>
+<div class="mt-4 pt-4 border-t border-outline-variant/10">
+<span class="text-primary font-bold">7 zł / gałka</span>
+</div>
+</div>
+<!-- Flavor 4 -->
+<div class="bg-surface-container-lowest p-6 rounded-lg text-center transition-transform hover:scale-105">
+<div class="w-16 h-16 bg-secondary-container/30 rounded-full flex items-center justify-center mx-auto mb-4">
+<span class="material-symbols-outlined text-secondary text-3xl" data-icon="ac_unit">ac_unit</span>
+</div>
+<h4 class="font-bold text-lg mb-1">Śmietanka</h4>
+<p class="text-xs text-on-surface-variant uppercase tracking-widest">Z Wiejskiego Mleka</p>
+<div class="mt-4 pt-4 border-t border-outline-variant/10">
+<span class="text-primary font-bold">7 zł / gałka</span>
+</div>
+</div>
+</div>
+<div class="mt-12 text-center">
+<button class="bg-primary text-on-primary px-10 py-4 rounded-full font-bold shadow-lg hover:shadow-primary/20 transition-all">
+                        Zamów puchar lodowy
+                    </button>
+</div>
+</div>
+</section>
+</main>
+<!-- Footer -->
+<footer class="bg-[#faf3e7] dark:bg-[#1a1c18] full-width rounded-t-[3rem] mt-12">
+<div class="flex flex-col md:flex-row justify-between items-start w-full px-12 py-16 gap-8 max-w-7xl mx-auto">
+<div class="flex flex-col gap-4">
+<div class="text-xl font-serif italic text-[#8c4d50] dark:text-[#fcacaf]">Piekarnik Gosi</div>
+<p class="text-[#363227] dark:text-[#e6e2d9] text-sm max-w-xs">Prawdziwe smaki dzieciństwa, wypiekane z sercem każdego dnia.</p>
+<p class="text-[#8c4d50] dark:text-[#fcacaf] text-sm font-medium">© 2024 Piekarnik Gosi. Tradycja i Słodkość.</p>
+</div>
+<div class="flex flex-col md:flex-row gap-12">
+<div class="flex flex-col gap-3">
+<h5 class="font-bold text-[#363227] dark:text-[#e6e2d9]">Menu</h5>
+<a class="text-[#363227] dark:text-[#e6e2d9] text-sm hover:opacity-70 transition-opacity" href="#">O nas</a>
+<a class="text-[#363227] dark:text-[#e6e2d9] text-sm hover:opacity-70 transition-opacity" href="#">Alergeny</a>
+<a class="text-[#363227] dark:text-[#e6e2d9] text-sm hover:opacity-70 transition-opacity" href="#">Regulamin</a>
+<a class="text-[#363227] dark:text-[#e6e2d9] text-sm hover:opacity-70 transition-opacity" href="#">Polityka Prywatności</a>
+</div>
+<div class="flex flex-col gap-3">
+<h5 class="font-bold text-[#363227] dark:text-[#e6e2d9]">Social Media</h5>
+<a class="text-[#363227] dark:text-[#e6e2d9] text-sm hover:opacity-70 transition-opacity flex items-center gap-2" href="#">
+                        Instagram
+                    </a>
+<a class="text-[#363227] dark:text-[#e6e2d9] text-sm hover:opacity-70 transition-opacity flex items-center gap-2" href="#">
+                        Facebook
+                    </a>
+</div>
+</div>
+</div>
+</footer>
+</body></html>