Update project dependencies and configuration
- Added Filament and Tailwind CSS dependencies in composer.json. - Updated AGENTS.md to include new package versions. - Modified boost.json to include tailwindcss-development skill. - Updated DatabaseSeeder to create an admin user with a password. - Changed the root route to use HomeController instead of a closure. - Adjusted permissions for .gitignore in storage directory.
This commit is contained in:
Mekan1206
1
resources/template/Untitled
Normal file
1
resources/template/Untitled
Normal file
@@ -0,0 +1 @@
|
||||
Biziň kolleksiýalarymyz
|
||||
431
resources/template/code.html
Normal file
431
resources/template/code.html
Normal file
@@ -0,0 +1,431 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="scroll-smooth" lang="tk"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Hoşal Patisserie - Hünärmençe döredilen</title>
|
||||
<script src="/assets/js/tailwind.min.js"></script>
|
||||
<link href="/assets/css/fonts.css" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"outline": "#81756e",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-surface-variant": "#4f453f",
|
||||
"on-background": "#1e1b1a",
|
||||
"tertiary": "#010700",
|
||||
"secondary-fixed": "#ffdad2",
|
||||
"primary-fixed-dim": "#dfc0af",
|
||||
"on-secondary-container": "#7a463a",
|
||||
"inverse-on-surface": "#f6efed",
|
||||
"primary-fixed": "#fddcca",
|
||||
"tertiary-fixed-dim": "#b9ccab",
|
||||
"surface-variant": "#e8e1de",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-bright": "#fff8f5",
|
||||
"on-primary-container": "#9b8071",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-tint": "#71594b",
|
||||
"surface-container-low": "#f9f2ef",
|
||||
"tertiary-fixed": "#d5e9c6",
|
||||
"surface-dim": "#dfd9d6",
|
||||
"primary-container": "#2b1a0f",
|
||||
"inverse-primary": "#dfc0af",
|
||||
"secondary-container": "#ffb8a8",
|
||||
"surface": "#fff8f5",
|
||||
"on-error": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary": "#ffffff",
|
||||
"on-tertiary-container": "#798b6d",
|
||||
"surface-container-highest": "#e8e1de",
|
||||
"tertiary-container": "#13220c",
|
||||
"on-primary-fixed-variant": "#584235",
|
||||
"on-secondary-fixed-variant": "#6a392e",
|
||||
"surface-container-high": "#eee7e4",
|
||||
"on-tertiary-fixed-variant": "#3b4b32",
|
||||
"background": "#fff8f5",
|
||||
"surface-container": "#f4ecea",
|
||||
"on-tertiary-fixed": "#111f0a",
|
||||
"outline-variant": "#d3c4bc",
|
||||
"secondary": "#865043",
|
||||
"on-primary-fixed": "#28180d",
|
||||
"secondary-fixed-dim": "#fcb6a5",
|
||||
"on-secondary-fixed": "#350f07",
|
||||
"primary": "#0c0300",
|
||||
"on-surface": "#1e1b1a",
|
||||
"inverse-surface": "#33302e",
|
||||
"error-container": "#ffdad6",
|
||||
"antique-gold": "#C8A96E",
|
||||
"ink-brown": "#2B1A0F"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"margin-mobile": "20px",
|
||||
"gutter": "24px",
|
||||
"container-max": "1280px",
|
||||
"unit": "8px",
|
||||
"margin-desktop": "64px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"subheading-caps": ["Playfair Display"],
|
||||
"label-sm": ["Libre Franklin"],
|
||||
"body-md": ["Merriweather"],
|
||||
"display-lg": ["Playfair Display"],
|
||||
"headline-md": ["Playfair Display"],
|
||||
"display-lg-mobile": ["Playfair Display"],
|
||||
"body-lg": ["Merriweather"]
|
||||
},
|
||||
"fontSize": {
|
||||
"subheading-caps": ["14px", { "lineHeight": "1.5", "letterSpacing": "0.15em", "fontWeight": "600" }],
|
||||
"label-sm": ["12px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "500" }],
|
||||
"body-md": ["16px", { "lineHeight": "1.6", "fontWeight": "400" }],
|
||||
"display-lg": ["64px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700" }],
|
||||
"headline-md": ["32px", { "lineHeight": "1.3", "fontWeight": "600" }],
|
||||
"display-lg-mobile": ["40px", { "lineHeight": "1.2", "fontWeight": "700" }],
|
||||
"body-lg": ["18px", { "lineHeight": "1.8", "fontWeight": "400" }]
|
||||
},
|
||||
"animation": {
|
||||
"marquee": "marquee 30s linear infinite",
|
||||
"fade-in-up": "fadeInUp 0.8s ease-out forwards"
|
||||
},
|
||||
"keyframes": {
|
||||
marquee: {
|
||||
"0%": { transform: "translateX(0%)" },
|
||||
"100%": { transform: "translateX(-50%)" }
|
||||
},
|
||||
fadeInUp: {
|
||||
"0%": { opacity: "0", transform: "translateY(20px)" },
|
||||
"100%": { opacity: "1", transform: "translateY(0)" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.paper-texture {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
opacity: 0.05;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||||
}
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
||||
}
|
||||
.animate-on-scroll.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.carousel-slide {
|
||||
transition: opacity 1s ease-in-out;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.carousel-slide.active {
|
||||
opacity: 1;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background antialiased relative selection:bg-antique-gold selection:text-white">
|
||||
<div class="paper-texture"></div>
|
||||
<nav class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-md border-b border-outline/20 transition-all duration-300 ease-in-out">
|
||||
<div class="flex justify-between items-center px-margin-mobile md:px-margin-desktop py-4 w-full z-50 max-w-[1280px] mx-auto">
|
||||
<a class="font-display-lg-mobile md:font-display-lg text-display-lg-mobile md:text-display-lg text-primary italic" href="#">Hoşal Patisserie</a>
|
||||
<div class="hidden md:flex gap-8">
|
||||
<a class="font-subheading-caps text-subheading-caps text-on-surface-variant hover:text-primary transition-colors hover:opacity-80 transition-opacity" href="#about">Biz barada</a>
|
||||
<a class="font-subheading-caps text-subheading-caps text-on-surface-variant hover:text-primary transition-colors hover:opacity-80 transition-opacity" href="#menu">Menýu</a>
|
||||
</div>
|
||||
<button aria-label="Menýu" class="md:hidden text-primary">
|
||||
<span class="material-symbols-outlined">menu</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<section class="relative h-screen w-full overflow-hidden flex items-center justify-center bg-surface-variant pt-20" id="hero">
|
||||
<div id="hero-carousel">
|
||||
<div class="carousel-slide active bg-cover bg-center" data-alt="Hünärmençe taýýarlanylan tort — wintage seramika stendinde, ýyly we ýakymly ýagtylandyryş" style="background-image: url('/assets/images/hero-cake.jpg');">
|
||||
<div class="absolute inset-0 bg-primary/40"></div>
|
||||
</div>
|
||||
<div class="carousel-slide bg-cover bg-center" data-alt="Täze bişirilen altyn kruassanlar — agaç stendinde, ýagly gatlamalar" style="background-image: url('/assets/images/hero-croissants.jpg');">
|
||||
<div class="absolute inset-0 bg-primary/40"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative z-20 text-center px-6 max-w-4xl mx-auto mt-16 animate-on-scroll">
|
||||
<h1 class="font-display-lg-mobile md:font-display-lg text-display-lg-mobile md:text-display-lg text-surface-container-lowest italic mb-6 drop-shadow-lg">Söýgi bilen döredilen,<br/>bir gatlamanyň wagty.</h1>
|
||||
<a class="inline-block mt-8 bg-ink-brown text-surface-container-lowest font-subheading-caps text-subheading-caps uppercase py-4 px-10 rounded-full tracking-wider hover:bg-on-background transition-colors border border-antique-gold/30 backdrop-blur-sm" href="#menu">Menýumyzy gözden geçiriň</a>
|
||||
</div>
|
||||
<div class="absolute top-32 left-8 md:left-16 z-20 opacity-40 hidden md:block">
|
||||
<svg class="text-surface-container-lowest" fill="none" height="60" stroke="currentColor" stroke-width="0.5" viewbox="0 0 24 24" width="60">
|
||||
<path d="M12 2L2 22h20L12 2zm0 4l7 14H5l7-14z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute bottom-16 right-8 md:right-16 z-20 opacity-40 hidden md:block">
|
||||
<svg class="text-surface-container-lowest" fill="none" height="60" stroke="currentColor" stroke-width="0.5" viewbox="0 0 24 24" width="60">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<path d="M12 6v6l4 2"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
<div class="bg-primary-container text-antique-gold py-4 overflow-hidden border-y border-antique-gold/20">
|
||||
<div class="flex whitespace-nowrap animate-marquee font-subheading-caps text-subheading-caps uppercase tracking-[0.2em]">
|
||||
<span class="mx-8">Her gün täze bişirilen</span>
|
||||
<span class="mx-8">·</span>
|
||||
<span class="mx-8">Kiçi partýalarda taýýarlanylýar</span>
|
||||
<span class="mx-8">·</span>
|
||||
<span class="mx-8">Hünärmen iýmitçilik harytlary</span>
|
||||
<span class="mx-8">·</span>
|
||||
<span class="mx-8">Her gün täze bişirilen</span>
|
||||
<span class="mx-8">·</span>
|
||||
<span class="mx-8">Kiçi partýalarda taýýarlanylýar</span>
|
||||
<span class="mx-8">·</span>
|
||||
<span class="mx-8">Hünärmen iýmitçilik harytlary</span>
|
||||
<span class="mx-8">·</span>
|
||||
<span class="mx-8">Her gün täze bişirilen</span>
|
||||
<span class="mx-8">·</span>
|
||||
<span class="mx-8">Kiçi partýalarda taýýarlanylýar</span>
|
||||
<span class="mx-8">·</span>
|
||||
<span class="mx-8">Hünärmen iýmitçilik harytlary</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="pt-24 px-margin-mobile md:px-margin-desktop max-w-[1440px] mx-auto bg-surface" id="menu">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end mb-12 animate-on-scroll">
|
||||
<div>
|
||||
<h2 class="font-headline-md text-headline-md text-on-background mb-2">Biziň kolleksiýalarymyz</h2>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant max-w-lg">Täzelikçi usullary häzirki wagt aşpezlik sungaty bilen birleşdirýän iň gowy döredilişlerimiziň saýlanan toplumy.</p>
|
||||
</div>
|
||||
<div class="flex gap-4 mt-6 md:mt-0">
|
||||
<button aria-label="Öňki" class="w-10 h-10 rounded-full border border-antique-gold flex items-center justify-center text-ink-brown hover:bg-surface-variant transition-colors" id="btn-prev-collection">
|
||||
<span class="material-symbols-outlined">arrow_left</span>
|
||||
</button>
|
||||
<button aria-label="Indiki" class="w-10 h-10 rounded-full border border-antique-gold flex items-center justify-center text-ink-brown hover:bg-surface-variant transition-colors" id="btn-next-collection">
|
||||
<span class="material-symbols-outlined">arrow_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex overflow-x-auto hide-scrollbar gap-6 pb-8 snap-x snap-mandatory" id="collections-container">
|
||||
<div class="min-w-[280px] md:min-w-[320px] aspect-[3/4] relative snap-start group cursor-pointer border border-antique-gold/40 bg-surface-container-low p-4 flex flex-col justify-end overflow-hidden">
|
||||
<div class="absolute inset-4 border border-outline/30 z-10 pointer-events-none transition-transform duration-500 group-hover:scale-95"></div>
|
||||
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105 opacity-80" data-alt="Gara şokoladly tort dilimi — lýuks redaktorial ýagtylandyryş" style="background-image: url('/assets/images/collection-chocolate-cake.jpg');"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-primary-container/90 via-primary-container/30 to-transparent"></div>
|
||||
<div class="relative z-20 p-6 text-center">
|
||||
<h3 class="font-headline-md text-headline-md text-surface-container-lowest mb-1">Golýama tortlar</h3>
|
||||
<p class="font-label-sm text-label-sm text-antique-gold uppercase tracking-widest">Göz gezdiriň</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-[280px] md:min-w-[320px] aspect-[3/4] relative snap-start group cursor-pointer border border-antique-gold/40 bg-surface-container-low p-4 flex flex-col justify-end overflow-hidden">
|
||||
<div class="absolute inset-4 border border-outline/30 z-10 pointer-events-none transition-transform duration-500 group-hover:scale-95"></div>
|
||||
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105 opacity-80" data-alt="Petit fours toplumy — kümüş tabakda, pastel reňkler" style="background-image: url('/assets/images/collection-petit-fours.jpg');"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-primary-container/90 via-primary-container/30 to-transparent"></div>
|
||||
<div class="relative z-20 p-6 text-center">
|
||||
<h3 class="font-headline-md text-headline-md text-surface-container-lowest mb-1">Petit Fours</h3>
|
||||
<p class="font-label-sm text-label-sm text-antique-gold uppercase tracking-widest">Göz gezdiriň</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-[280px] md:min-w-[320px] aspect-[3/4] relative snap-start group cursor-pointer border border-antique-gold/40 bg-surface-container-low p-4 flex flex-col justify-end overflow-hidden">
|
||||
<div class="absolute inset-4 border border-outline/30 z-10 pointer-events-none transition-transform duration-500 group-hover:scale-95"></div>
|
||||
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105 opacity-80" data-alt="Hünärmen çörekler — una serpilen agaç blokda" style="background-image: url('/assets/images/collection-bread.jpg');"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-primary-container/90 via-primary-container/30 to-transparent"></div>
|
||||
<div class="relative z-20 p-6 text-center">
|
||||
<h3 class="font-headline-md text-headline-md text-surface-container-lowest mb-1">Hünärmen çörekler</h3>
|
||||
<p class="font-label-sm text-label-sm text-antique-gold uppercase tracking-widest">Göz gezdiriň</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-[280px] md:min-w-[320px] aspect-[3/4] relative snap-start group cursor-pointer border border-antique-gold/40 bg-surface-container-low p-4 flex flex-col justify-end overflow-hidden">
|
||||
<div class="absolute inset-4 border border-outline/30 z-10 pointer-events-none transition-transform duration-500 group-hover:scale-95"></div>
|
||||
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105 opacity-80" data-alt="Altyn ýaprakly şokolad tart — lýuks bezeg" style="background-image: url('/assets/images/collection-tart.jpg');"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-primary-container/90 via-primary-container/30 to-transparent"></div>
|
||||
<div class="relative z-20 p-6 text-center">
|
||||
<h3 class="font-headline-md text-headline-md text-surface-container-lowest mb-1">Tartlar we piroglar</h3>
|
||||
<p class="font-label-sm text-label-sm text-antique-gold uppercase tracking-widest">Göz gezdiriň</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="py-16 px-margin-mobile md:px-margin-desktop max-w-container-max mx-auto bg-surface-container-low border-y border-outline/10" id="order">
|
||||
<div class="flex overflow-x-auto hide-scrollbar gap-4 pb-8 mb-8 justify-center animate-on-scroll">
|
||||
<button class="px-6 py-2 rounded-full bg-ink-brown text-surface-container-lowest font-label-sm text-label-sm uppercase tracking-wide flex items-center gap-2 whitespace-nowrap">
|
||||
<span class="material-symbols-outlined text-[16px]">cake</span> Hemmesi
|
||||
</button>
|
||||
<button class="px-6 py-2 rounded-full border border-outline/30 text-on-surface-variant hover:border-antique-gold hover:text-ink-brown transition-colors font-label-sm text-label-sm uppercase tracking-wide flex items-center gap-2 whitespace-nowrap bg-surface">
|
||||
<span class="material-symbols-outlined text-[16px]">bakery_dining</span> Viennoiserie
|
||||
</button>
|
||||
<button class="px-6 py-2 rounded-full border border-outline/30 text-on-surface-variant hover:border-antique-gold hover:text-ink-brown transition-colors font-label-sm text-label-sm uppercase tracking-wide flex items-center gap-2 whitespace-nowrap bg-surface">
|
||||
<span class="material-symbols-outlined text-[16px]">cookie</span> Keksler
|
||||
</button>
|
||||
<button class="px-6 py-2 rounded-full border border-outline/30 text-on-surface-variant hover:border-antique-gold hover:text-ink-brown transition-colors font-label-sm text-label-sm uppercase tracking-wide flex items-center gap-2 whitespace-nowrap bg-surface">
|
||||
<span class="material-symbols-outlined text-[16px]">coffee</span> Uýgunlyklar
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12">
|
||||
<div class="group animate-on-scroll">
|
||||
<div class="aspect-square mb-4 overflow-hidden relative bg-surface-variant">
|
||||
<img alt="Gül tagamly makaronlar" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Gülgöwre tagamly pembe makaronlar — ýumşak ýagtylandyryş" src="/assets/images/product-macaron.jpg"/>
|
||||
<div class="absolute inset-0 border border-outline/10 pointer-events-none m-2"></div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h4 class="font-headline-md text-[20px] text-on-background mb-1">Ispahan Macaron</h4>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant/80 mb-2">Gül, lichii we täze ahudud</p>
|
||||
<p class="font-label-sm text-label-sm text-antique-gold">16 TMT</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group animate-on-scroll" style="transition-delay: 100ms;">
|
||||
<div class="aspect-square mb-4 overflow-hidden relative bg-surface-variant">
|
||||
<img alt="Limon tart" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Limon merengli tart — ýakylan mereng we agaç tagta" src="/assets/images/product-lemon-tart.jpg"/>
|
||||
<div class="absolute inset-0 border border-outline/10 pointer-events-none m-2"></div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h4 class="font-headline-md text-[20px] text-on-background mb-1">Tarte au Citron</h4>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant/80 mb-2">Meyer limon kremi, ýakylyp mereng</p>
|
||||
<p class="font-label-sm text-label-sm text-antique-gold">28 TMT</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group animate-on-scroll" style="transition-delay: 200ms;">
|
||||
<div class="aspect-square mb-4 overflow-hidden relative bg-surface-variant">
|
||||
<img alt="Şokolad eklair" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Ýalpyldawuk şokolad eklair — baý krem bilen" src="/assets/images/product-eclair.jpg"/>
|
||||
<div class="absolute inset-0 border border-outline/10 pointer-events-none m-2"></div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h4 class="font-headline-md text-[20px] text-on-background mb-1">Éclair au Chocolat</h4>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant/80 mb-2">Valrhona gara şokolad glazýury</p>
|
||||
<p class="font-label-sm text-label-sm text-antique-gold">25 TMT</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group animate-on-scroll" style="transition-delay: 300ms;">
|
||||
<div class="aspect-square mb-4 overflow-hidden relative bg-surface-variant">
|
||||
<img alt="Mille-Feuille" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Fransuz Mille-Feuille — gatlamalar we wanil kremi" src="/assets/images/product-millefeuille.jpg"/>
|
||||
<div class="absolute inset-0 border border-outline/10 pointer-events-none m-2"></div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h4 class="font-headline-md text-[20px] text-on-background mb-1">Mille-Feuille Classic</h4>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant/80 mb-2">Karamelizirlenen gatlamalar, wanil</p>
|
||||
<p class="font-label-sm text-label-sm text-antique-gold">33 TMT</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-16 text-center animate-on-scroll">
|
||||
<a class="inline-block border border-antique-gold text-ink-brown font-subheading-caps text-subheading-caps uppercase py-3 px-8 hover:bg-ink-brown hover:text-surface-container-lowest transition-colors" href="#">Doly menýuny görüň</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="py-24 px-margin-mobile md:px-margin-desktop max-w-container-max mx-auto" id="about">
|
||||
<div class="grid md:grid-cols-2 gap-16 items-center">
|
||||
<div class="relative aspect-[4/5] animate-on-scroll">
|
||||
<img alt="Çörekçi hamyr bilen işleýär" class="w-full h-full object-cover grayscale opacity-90 sepia-[.2]" data-alt="Hünärmen çörekçiniň elleri — una serpilen agaç stol" src="/assets/images/about-baker.jpg"/>
|
||||
<div class="absolute -bottom-8 -right-8 w-48 h-48 border border-antique-gold hidden md:block pointer-events-none"></div>
|
||||
<div class="absolute -top-4 -left-4 w-24 h-24 border-t border-l border-ink-brown hidden md:block pointer-events-none"></div>
|
||||
</div>
|
||||
<div class="animate-on-scroll" style="transition-delay: 200ms;">
|
||||
<p class="font-label-sm text-label-sm text-antique-gold uppercase tracking-widest mb-4">Biziň mirasy</p>
|
||||
<h2 class="font-display-lg-mobile md:font-display-lg text-display-lg-mobile md:text-display-lg text-on-background mb-8 italic">Sabyr<br/>sungaty</h2>
|
||||
<div class="relative">
|
||||
<div class="absolute -left-12 -top-12 opacity-10 pointer-events-none hidden md:block">
|
||||
<svg fill="none" height="120" stroke="currentColor" stroke-width="0.5" viewbox="0 0 100 100" width="120">
|
||||
<path d="M50 100 C 50 50, 0 50, 0 0 C 0 50, 50 50, 50 0 C 50 50, 100 50, 100 0 C 100 50, 50 50, 50 100"></path>
|
||||
<circle cx="50" cy="50" r="10"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="font-body-lg text-body-lg text-on-surface-variant mb-6 leading-relaxed relative z-10"><span class="float-left text-6xl font-display-lg text-ink-brown pr-4 mt-2 leading-none">H</span>oşal-da hakyky lýuksy wagtda görmek mümkin diýip hasaplaýarys. Peçimizden çykýan her kruassan üç gün dowam edýän jik-jik laminaasiýa prosesinden geçýär. Her tart gabygy dynýar, her krem sabyr bilen doldurylýar.</p>
|
||||
<p class="font-body-md text-body-md text-on-surface-variant mb-8 leading-relaxed relative z-10">Täzelikçi fransuz usullaryna esaslanýan, ýöne ýerli teýrwarlaryň ýyllygyndan ilham alýan patisseriamyz — öň biziňden öň gelen hünärmenlere hormatdyr. Biz diňe iň gowy ýewropa ýagyny, bir çeşmeden şokolady we ýerli mevsimlik miweleri ulanyp, hem nostalgiýany, hem täzeligi birleşdirýän çörekler döredýäris.</p>
|
||||
<img alt="Aşpeziň gol çeki" class="h-12 opacity-60 mix-blend-multiply" data-alt="Gol çekilen aşpeziň gol çeki" src="/assets/images/chef-signature.png"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer class="w-full mt-auto bg-primary-container dark:bg-tertiary-container border-t border-secondary-container/30">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter px-margin-mobile md:px-margin-desktop py-16 w-full max-w-[1280px] mx-auto">
|
||||
<div class="col-span-1 mb-8 md:mb-0 flex flex-col justify-between">
|
||||
<h2 class="font-display-lg-mobile md:font-display-lg text-display-lg-mobile md:text-[40px] text-surface-container-lowest italic mb-4">Hoşal Patisserie</h2>
|
||||
<p class="font-body-md text-body-md text-surface-variant/80 mt-auto">© 2026 Hoşal Patisserie. Hünärmençe döredilen.</p>
|
||||
</div>
|
||||
<div class="col-span-1 md:col-span-2 grid grid-cols-2 md:grid-cols-3 gap-8">
|
||||
<div>
|
||||
<h3 class="font-subheading-caps text-subheading-caps text-surface-container-lowest mb-6">Gözlemek</h3>
|
||||
<ul class="space-y-4">
|
||||
<li><a class="font-body-md text-body-md text-surface-variant/80 hover:text-surface-container-lowest transition-colors duration-200" href="#about">Biz barada</a></li>
|
||||
<li><a class="font-body-md text-body-md text-surface-variant/80 hover:text-surface-container-lowest transition-colors duration-200" href="#menu">Menýu</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-subheading-caps text-subheading-caps text-surface-container-lowest mb-6">Goldaw</h3>
|
||||
<ul class="space-y-4">
|
||||
<li><a class="font-body-md text-body-md text-surface-variant/80 hover:text-surface-container-lowest transition-colors duration-200" href="#">Eltip bermek</a></li>
|
||||
<li><a class="font-body-md text-body-md text-surface-variant/80 hover:text-surface-container-lowest transition-colors duration-200" href="#">Gizlinlik syýasaty</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-span-2 md:col-span-1 mt-8 md:mt-0">
|
||||
<h3 class="font-subheading-caps text-subheading-caps text-surface-container-lowest mb-6">Bize geliň</h3>
|
||||
<address class="font-body-md text-body-md text-surface-variant/80 not-italic space-y-2">
|
||||
<p>Magtymguly şaýoly</p>
|
||||
<p>Aşgabat, Türkmenistan</p>
|
||||
<p class="mt-4"><a class="hover:text-surface-container-lowest transition-colors duration-200" href="tel:+99361929248">+993 61 92 92 48</a></p>
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const animatedElements = document.querySelectorAll('.animate-on-scroll');
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-visible');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
animatedElements.forEach(el => observer.observe(el));
|
||||
|
||||
const slides = document.querySelectorAll('.carousel-slide');
|
||||
let currentSlide = 0;
|
||||
setInterval(() => {
|
||||
slides[currentSlide].classList.remove('active');
|
||||
currentSlide = (currentSlide + 1) % slides.length;
|
||||
slides[currentSlide].classList.add('active');
|
||||
}, 5000);
|
||||
|
||||
const collectionsContainer = document.getElementById('collections-container');
|
||||
const btnPrev = document.getElementById('btn-prev-collection');
|
||||
const btnNext = document.getElementById('btn-next-collection');
|
||||
if(btnNext && btnPrev && collectionsContainer) {
|
||||
btnNext.addEventListener('click', () => {
|
||||
collectionsContainer.scrollBy({ left: 340, behavior: 'smooth' });
|
||||
});
|
||||
btnPrev.addEventListener('click', () => {
|
||||
collectionsContainer.scrollBy({ left: -340, behavior: 'smooth' });
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user