278 lines
No EOL
18 KiB
HTML
278 lines
No EOL
18 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="pl"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Piekarnik Gosi | Tradycja i Słodkość</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&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 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-secondary-fixed-variant": "#566847",
|
|
"error-container": "#fa7150",
|
|
"on-background": "#363227",
|
|
"on-tertiary-fixed": "#463600",
|
|
"secondary-dim": "#475839",
|
|
"on-tertiary": "#fff8ef",
|
|
"tertiary-dim": "#675000",
|
|
"primary": "#8c4d50",
|
|
"primary-fixed-dim": "#ed9fa2",
|
|
"error": "#aa371c",
|
|
"on-surface": "#363227",
|
|
"surface": "#fff8f0",
|
|
"surface-container-low": "#faf3e7",
|
|
"surface-container-highest": "#eae2d2",
|
|
"primary-container": "#fcacaf"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "1rem",
|
|
"lg": "2rem",
|
|
"xl": "3rem",
|
|
"full": "9999px"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Noto Serif"],
|
|
"body": ["Plus Jakarta Sans"],
|
|
"label": ["Plus Jakarta Sans"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #fff8f0; color: #363227; }
|
|
.font-serif { font-family: 'Noto Serif', serif; }
|
|
.glass-nav { backdrop-filter: blur(20px); }
|
|
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background">
|
|
<!-- TopAppBar from JSON -->
|
|
<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-[#8c4d50] dark:text-[#fcacaf] font-bold border-b-2 border-[#8c4d50] dark:border-[#fcacaf] pb-1 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300" 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" href="#">Wyroby</a>
|
|
<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300" href="#">Portfolio</a>
|
|
<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300" 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">
|
|
Kontakt
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<main>
|
|
<!-- Section 1: Hero -->
|
|
<section class="relative min-h-[870px] flex items-center px-8 overflow-hidden">
|
|
<div class="max-w-7xl mx-auto w-full grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
|
<div class="z-10 order-2 md:order-1">
|
|
<h1 class="font-serif text-5xl md:text-7xl font-bold leading-tight text-on-background tracking-tight mb-6">
|
|
Handcrafted <span class="text-primary italic">Sweetness</span> for Every Moment.
|
|
</h1>
|
|
<p class="text-lg text-on-surface-variant max-w-md mb-10 leading-relaxed">
|
|
Discover the magic of traditional baking combined with modern elegance. From our family oven to your special celebrations.
|
|
</p>
|
|
<div class="flex gap-4">
|
|
<button class="bg-gradient-to-r from-primary to-primary-container text-on-primary px-10 py-4 rounded-full font-semibold shadow-lg hover:opacity-90 transition-all">
|
|
Explore Menu
|
|
</button>
|
|
<button class="bg-surface-container-highest/50 backdrop-blur-sm text-on-surface px-10 py-4 rounded-full font-semibold hover:bg-surface-container-highest transition-all">
|
|
Our Story
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="relative order-1 md:order-2">
|
|
<div class="w-full aspect-[4/5] rounded-xl overflow-hidden shadow-2xl relative rotate-2 hover:rotate-0 transition-transform duration-700">
|
|
<img class="w-full h-full object-cover" data-alt="Close-up of a luxurious tiered vanilla cake decorated with fresh blush pink peonies and delicate gold leaf accents on a marble stand" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBE3FQZijxp08QlNadylovmWbx1w5egmxTQrUo3H6tLQXTVk4ew1BFeh1m4pnvQ1DT7RGJtEvkjcwX00cLtFQnxS6hJKWSiOcTm9HTc9sHD4njGlhUS4zLXsqTBpH-i6knzGR2YHVAkRw45fd8eSQi-gA70g1Up858JEfh8374p_a5FWF1UHiqH_g6Ktuem6p24CF7P_gtZB-63DbHKioVDmoYyAnyee0MUB-T3Xs4B5aZrpwlIR9wXlmlREC-Z7k4sB0v1tjeHzi1K"/>
|
|
</div>
|
|
<div class="absolute -bottom-6 -left-6 bg-secondary-container p-6 rounded-lg shadow-xl hidden md:block max-w-[200px]">
|
|
<span class="material-symbols-outlined text-on-secondary-container text-3xl mb-2">cake</span>
|
|
<p class="text-on-secondary-container font-serif italic text-lg">Baked daily with love.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Background Decorative Elements -->
|
|
<div class="absolute top-0 right-0 w-1/3 h-full bg-surface-container-low -z-10 rounded-l-[10rem]"></div>
|
|
</section>
|
|
<!-- Section 2: Our Story (Intentional Editorial Asymmetry) -->
|
|
<section class="py-24 bg-surface-container-low overflow-hidden">
|
|
<div class="max-w-7xl mx-auto px-8 grid grid-cols-1 md:grid-cols-12 gap-8 items-center">
|
|
<div class="md:col-span-7 relative">
|
|
<div class="relative z-10 w-4/5 aspect-video rounded-xl overflow-hidden shadow-xl">
|
|
<img class="w-full h-full object-cover" data-alt="Warm and inviting interior of a modern artisanal bakery with soft sage green accents, wooden tables, and morning sunlight streaming through windows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC2cNd0cg6ISbftWH4JrfHpA2_8UK9V99Z3wbcDm2ss5EX1D6b1IRzG590D7U9CDXqkDx9C0ocLWOfzVjEr-Lt7pQ6NTt95qFvUeyMjxu5gJXSeqn_MTtskiZzAp9F2qlgt3OR1Dn0ewGxn9BZsmCqaOgwOPVauocZXitjCT3vUdMM6T4JTkGY1spwDs_Au1fxxVx7jfCGQlpQ8EYnAdzGfniEzbtREnIre-Tg5cItxEydaS_GqGYqMCoGTEGKMEfvxJtqkUJ7d8dHO"/>
|
|
</div>
|
|
<div class="absolute -bottom-12 right-0 w-1/2 aspect-square rounded-xl overflow-hidden shadow-2xl z-20 border-8 border-surface-container-low">
|
|
<img class="w-full h-full object-cover" data-alt="Hands of an artisan baker dusting flour over freshly shaped sourdough loaves in a rustic kitchen setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAqrh_BHq7lkBpSNEXX4Z8rHM5E3SyLjQIdJCT8K9y9hcrGsC31sjR_Y9eaQzdqUWgZeNa6xZVNiFSiUWbkPqB-LMtnlK1dd9-SEWrIM7BMrgb5oF5PYqTwcbjXd169J-HOpgjVzT1p-FTDlaptuRFj_fUntIGnbZ39tJGvbMuxyqbyJlMAk8h30D12rXqLEIKNZFNaWQdJTxWYg-TbFQqMa1sMsnT9x-GiEMaMBHbtpz27UdEz5Le7XM5J2jhWpBA26a_tk5gTRqpE"/>
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-5 md:pl-12 mt-16 md:mt-0">
|
|
<span class="text-primary font-bold tracking-widest text-sm uppercase mb-4 block">Tradition & Heart</span>
|
|
<h2 class="font-serif text-4xl md:text-5xl font-bold mb-8 leading-tight">A Legacy of Flour and Sugar</h2>
|
|
<p class="text-on-surface-variant leading-relaxed mb-6">
|
|
Piekarnik Gosi started as a small family dream in our home kitchen. Today, we continue to honor the same recipes passed down through generations, ensuring every pastry carries the warmth of home.
|
|
</p>
|
|
<p class="text-on-surface-variant leading-relaxed">
|
|
We believe that the best ingredients are found close to home, which is why we source our flour, eggs, and dairy from local farmers who share our passion for quality.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Section 3: Featured Delights (Bento Grid) -->
|
|
<section class="py-24 px-8 max-w-7xl mx-auto">
|
|
<div class="text-center mb-16">
|
|
<h2 class="font-serif text-4xl md:text-5xl font-bold mb-4">Our Featured Delights</h2>
|
|
<div class="h-1 w-24 bg-primary mx-auto rounded-full"></div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<!-- Artisanal Cakes -->
|
|
<div class="group bg-surface-container-lowest rounded-xl overflow-hidden transition-all duration-500 hover:-translate-y-2">
|
|
<div class="aspect-[4/3] overflow-hidden">
|
|
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="Rich chocolate ganache cake topped with fresh raspberries and dark chocolate shavings on a minimalist ceramic plate" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC__6jZhqvNUqUMwUy1qeVnEcIOpIZhKqoZXaZF_rDqaFEqiMt7zCDms8Y7gudDnAbFzuW3hOIOQZPc6FWnKxApY57_Kq4i-vn2P7lh8TRTxRLmNwhz5lOOd3s_RpUASmfuyXiwhHQEwkHxnOQRZoo9biPu3ttrZB8ALVvVUO2n75rAIuedqfkl8wwWQkl1xmPtnwndro_3Su1UPNBTEyXEaX9HT40k6XGFMWn__a8Y8jQTuiUn9TA4qQZ88OncskEp12pJx73MI4ZA"/>
|
|
</div>
|
|
<div class="p-8">
|
|
<h3 class="font-serif text-2xl font-bold mb-3">Artisanal Cakes</h3>
|
|
<p class="text-on-surface-variant mb-6 text-sm">Perfectly balanced flavors and textures for your afternoon tea or celebration.</p>
|
|
<button class="flex items-center gap-2 text-primary font-bold group-hover:gap-4 transition-all">
|
|
Browse Cakes <span class="material-symbols-outlined">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Birthday Creations -->
|
|
<div class="group bg-secondary-container/30 rounded-xl overflow-hidden transition-all duration-500 hover:-translate-y-2 border border-outline-variant/10">
|
|
<div class="aspect-[4/3] overflow-hidden">
|
|
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="Whimsical colorful birthday cake with pastel sprinkles and a single elegant candle set against a soft bokeh background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCET-MFzPmiwlj47TqU3wN7E5vcStjKjwCNjJpljzrL_s6cPdijpJATzQP8GmXmKArqWQH4T0hMCBikeOn-LatDFGk3LK2_0R8w3yB9F2aYhPA1MaNpoS8a0yuXjuem049S3TaHh_JVpM7huRnai56xYI6KbK7eoNtVWUEfycNEgemJAO4dmrqi-E_6RxaLU8JhOG6RWJ8K1ja3TUFr_6cxAJS0JijA_CHbxbs4GyyA7OmJprfho8jzmui-iOymcewvn6M_hmB6KK5w"/>
|
|
</div>
|
|
<div class="p-8">
|
|
<h3 class="font-serif text-2xl font-bold mb-3">Birthday Creations</h3>
|
|
<p class="text-on-surface-variant mb-6 text-sm">Custom designs that turn every birthday into an unforgettable masterpiece.</p>
|
|
<button class="flex items-center gap-2 text-primary font-bold group-hover:gap-4 transition-all">
|
|
Order Custom <span class="material-symbols-outlined">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Homemade Gelato -->
|
|
<div class="group bg-surface-container-lowest rounded-xl overflow-hidden transition-all duration-500 hover:-translate-y-2">
|
|
<div class="aspect-[4/3] overflow-hidden">
|
|
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="Scoops of creamy homemade pistachio and strawberry gelato in a classic waffle cone held against a summer garden background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA-lIqaWJLlLLX7Mi9zUlrBqv_RDSjUfgg1kzyMRM2RbOkYkyfI6SyVZwRuuidAcpaOtzTacBXfk8bgJ0CBfQJvT5TYPnwmd0eOdA6FxNsxiyutlMy6qxgnomRc0bgGY2YOgDQjRypyOgs522uts9x8SjcYNqh3amRZ8qkZB70dWLN7COIT2kbwlJSuFLMSMk7BAowoXdsW2tjnk8YvnbSGMCHBbRv3WIUtorAan_QxFVqQwWcHP6iLmM90jfMeDJ-p7bmuZwhKWNNN"/>
|
|
</div>
|
|
<div class="p-8">
|
|
<h3 class="font-serif text-2xl font-bold mb-3">Homemade Gelato</h3>
|
|
<p class="text-on-surface-variant mb-6 text-sm">Crafted in small batches using real fruit and the finest Italian techniques.</p>
|
|
<button class="flex items-center gap-2 text-primary font-bold group-hover:gap-4 transition-all">
|
|
View Flavors <span class="material-symbols-outlined">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Section 4: Visit Our Coffee Shop -->
|
|
<section class="py-24 bg-secondary-container">
|
|
<div class="max-w-7xl mx-auto px-8">
|
|
<div class="bg-surface/60 backdrop-blur-md rounded-xl p-8 md:p-16 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<div class="inline-flex items-center gap-2 px-4 py-1 rounded-full bg-secondary text-on-secondary text-sm font-medium mb-6">
|
|
<span class="material-symbols-outlined text-sm">coffee</span> Cozy Atmosphere
|
|
</div>
|
|
<h2 class="font-serif text-4xl md:text-5xl font-bold mb-6 text-on-secondary-container">Your Second Home</h2>
|
|
<p class="text-on-secondary-container opacity-80 text-lg leading-relaxed mb-8">
|
|
Step into a space where time slows down. Enjoy our specialty coffee paired with a freshly baked croissant in a serene setting inspired by nature.
|
|
</p>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-full bg-secondary/20 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-secondary">wifi</span>
|
|
</div>
|
|
<span class="font-medium text-on-secondary-container">Free High-Speed Wi-Fi</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-full bg-secondary/20 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-secondary">pets</span>
|
|
</div>
|
|
<span class="font-medium text-on-secondary-container">Pet Friendly Garden</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="rounded-xl overflow-hidden h-64">
|
|
<img class="w-full h-full object-cover" data-alt="Barista pouring latte art with a perfect heart shape into a sage green ceramic cup" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDcwJC5HCSbD6sFQUtQO2Vup1_MLs8d5gh2lsBXgitbbnV6xYW10z-sqVh_q4dYeXgejPdBmucv1HnBfJwZgnTx7Wwa7yxsDESvlOPaRvwW-P9CtS47HG8tNnlGEQCmPWHTmLHdiXuOu3dcPLeYVxJpGP89zGRitQEBX93iYk4qFjr8LColfvuS3gY8qeb2yI-v33HcZ-Q8piA0UDbF5bp6EKRzx685Jn84wDqRoEBig4s0KFcfieJq1g3N7Z7OuQ7DX0mPBz3Nqze2"/>
|
|
</div>
|
|
<div class="rounded-xl overflow-hidden h-64 mt-8">
|
|
<img class="w-full h-full object-cover" data-alt="A cozy corner of the cafe with velvet pink chairs and small round wooden tables by a large window" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBVZuG1_6XqUb-zykYUBiCgw6ifTDcYED6cTfpHob5TsLS-R9eg6CS9NkdO7vRuPNUe0YnWeijPheJCivxkiCPj3Fb81Zi3WAS4HRhu_A11C_bIETcdJxXoOXqT4dIsgqC0HTFwABSqWvUSUZUs7ViCZMAiP9ib4FoMtIx7YXJ_1aSPF_eK9jdQQZ74wC_fU-ZOsjxTokwg07ZMz2i6by-wCkCX6dyd2a1ZsCNL6Ns-Ps5-BLuGuuOTBXE1R-Fk09HWk0UoV-TwJ1Z1"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Footer from JSON -->
|
|
<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 max-w-sm">
|
|
<div class="text-xl font-serif italic text-[#8c4d50] dark:text-[#fcacaf]">Piekarnik Gosi</div>
|
|
<p class="text-sm font-body text-[#363227] dark:text-[#e6e2d9] opacity-80 leading-relaxed">
|
|
Tradycja spotyka nowoczesność w każdej okruszynie. Zapraszamy do naszej kawiarni na chwilę zapomnienia.
|
|
</p>
|
|
<div class="flex gap-4">
|
|
<a class="w-10 h-10 rounded-full bg-surface-variant flex items-center justify-center text-primary hover:scale-110 transition-transform" href="#">
|
|
<span class="material-symbols-outlined">share</span>
|
|
</a>
|
|
<a class="w-10 h-10 rounded-full bg-surface-variant flex items-center justify-center text-primary hover:scale-110 transition-transform" href="#">
|
|
<span class="material-symbols-outlined">location_on</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-12">
|
|
<div class="space-y-4">
|
|
<h4 class="font-serif font-bold text-[#8c4d50]">Nawigacja</h4>
|
|
<ul class="space-y-2 text-sm font-body">
|
|
<li><a class="text-[#363227] dark:text-[#e6e2d9] hover:opacity-70 transition-opacity" href="#">O nas</a></li>
|
|
<li><a class="text-[#363227] dark:text-[#e6e2d9] hover:opacity-70 transition-opacity" href="#">Alergeny</a></li>
|
|
<li><a class="text-[#363227] dark:text-[#e6e2d9] hover:opacity-70 transition-opacity" href="#">Regulamin</a></li>
|
|
<li><a class="text-[#363227] dark:text-[#e6e2d9] hover:opacity-70 transition-opacity" href="#">Polityka Prywatności</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<h4 class="font-serif font-bold text-[#8c4d50]">Kontakt</h4>
|
|
<p class="text-sm font-body text-[#363227] dark:text-[#e6e2d9] opacity-80">
|
|
ul. Słodka 12<br/>
|
|
00-001 Warszawa<br/>
|
|
+48 123 456 789
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="w-full md:w-auto pt-8 border-t border-outline-variant/20 md:border-t-0">
|
|
<p class="text-xs font-body text-[#363227] dark:text-[#e6e2d9] opacity-60">
|
|
© 2024 Piekarnik Gosi. Tradycja i Słodkość.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body></html> |