276 lines
No EOL
16 KiB
HTML
276 lines
No EOL
16 KiB
HTML
<!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&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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 & 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> |