file structure
This commit is contained in:
bronku
parent
77a27de73c
commit
a206518367
1125 changed files with 34 additions and 39 deletions
|
|
@ -1,389 +0,0 @@
|
|||
<!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&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-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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue