358 lines
26 KiB
HTML
358 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="tk"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>DARAGT Şöhlatlary</title>
|
|
<link href="assets/css/fonts.css" rel="stylesheet"/>
|
|
<link href="assets/css/tailwind.css" rel="stylesheet"/>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body-md antialiased pt-16">
|
|
<!-- TopAppBar -->
|
|
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-margin-mobile md:px-margin-desktop h-16 bg-background border-b-2 border-inverse-surface">
|
|
<button class="p-2 hover:bg-primary hover:text-on-primary transition-colors duration-200 text-on-surface font-medium" id="menuToggle">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">menu</span>
|
|
</button>
|
|
<div class="font-display-lg text-headline-md tracking-tighter text-primary uppercase dark:text-primary">
|
|
DARAGT
|
|
</div>
|
|
<button class="p-2 hover:bg-primary hover:text-on-primary transition-colors duration-200 text-on-surface font-medium">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">shopping_bag</span>
|
|
</button>
|
|
</header>
|
|
<!-- NavigationDrawer (Hidden by default) -->
|
|
<div class="fixed inset-y-0 left-0 z-[60] flex flex-col p-6 h-full w-80 border-r-2 border-inverse-surface bg-surface-container-low dark:bg-surface-container-low shadow-[4px_0_0_0_rgba(51,48,39,1)] transform -translate-x-full transition-transform duration-300" id="navDrawer">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<h2 class="font-display-lg text-headline-md text-primary">DARAGT Şöhlatlary</h2>
|
|
<button class="p-2 text-on-surface hover:bg-secondary-container" id="closeDrawer">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</button>
|
|
</div>
|
|
<nav class="flex flex-col gap-4 flex-grow">
|
|
<a class="flex items-center gap-4 p-4 text-inverse-surface font-bold uppercase tracking-widest hover:bg-secondary-container hover:translate-x-1 transition-transform" href="#signatures">
|
|
<span class="material-symbols-outlined">restaurant_menu</span>
|
|
<span class="font-label-bold text-label-bold">Biziň aýratynlyklarymyz</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 p-4 text-inverse-surface font-bold uppercase tracking-widest hover:bg-secondary-container hover:translate-x-1 transition-transform" href="#explore">
|
|
<span class="material-symbols-outlined">category</span>
|
|
<span class="font-label-bold text-label-bold">Çeşitleri gözden geçiriň</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 p-4 text-inverse-surface font-bold uppercase tracking-widest hover:bg-secondary-container hover:translate-x-1 transition-transform" href="#history">
|
|
<span class="material-symbols-outlined">history</span>
|
|
<span class="font-label-bold text-label-bold">Taryhymyz</span>
|
|
</a>
|
|
<a class="flex items-center gap-4 p-4 text-inverse-surface font-bold uppercase tracking-widest hover:bg-secondary-container hover:translate-x-1 transition-transform" href="#contact">
|
|
<span class="material-symbols-outlined">potted_plant</span>
|
|
<span class="font-label-bold text-label-bold">Habarlaşmak</span>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
<main class="max-w-[container-max] mx-auto overflow-hidden">
|
|
<!-- HERO -->
|
|
<section class="relative w-full border-b-2 border-inverse-surface bg-surface-container-low overflow-hidden">
|
|
<div class="flex transition-transform duration-500 ease-in-out h-[400px] md:h-[600px]" id="heroCarousel">
|
|
<!-- Slide 1 -->
|
|
<div class="min-w-full flex flex-col md:flex-row relative">
|
|
<div class="w-full md:w-1/2 p-margin-mobile md:p-margin-desktop flex flex-col justify-center z-10 relative">
|
|
<div class="absolute top-4 left-4 w-16 h-16 flex items-center justify-center pointer-events-none">
|
|
<svg class="absolute animate-steam" fill="none" height="24" stroke="theme('colors.primary')" stroke-width="2" viewbox="0 0 24 24" width="24"><path d="M8 2c0 4 8 4 8 8s-8 4-8 8"></path><path class="delay-100" d="M16 4c0 4-8 4-8 8s8 4 8 8"></path></svg>
|
|
<span class="material-symbols-outlined text-primary text-4xl animate-sizzle" style="font-variation-settings: 'FILL' 1;">lunch_dining</span>
|
|
</div>
|
|
<h1 class="font-display-lg text-headline-lg-mobile md:text-display-lg text-primary mt-12 md:mt-0 uppercase leading-none">Usta<br/>tarapyndan<br/>taýýarlanan bölekler.</h1>
|
|
<p class="font-body-md text-on-surface-variant mt-4 max-w-sm">Miras et, el bilen saýlanan we bilimiň stoly üçin usta taýýarlygy.</p>
|
|
<button class="btn-editorial font-label-bold text-label-bold uppercase px-8 py-4 mt-8 w-max">Häzir satyn al</button>
|
|
</div>
|
|
<div class="w-full md:w-1/2 h-[200px] md:h-full relative sketch-border md:border-l-2 md:border-inverse-surface">
|
|
<img alt="" class="w-full h-full object-cover filter contrast-125 sepia-[.2]" data-alt="A close-up, high-end editorial food photography shot of a thick, marbled steak resting on a dark, rustic wooden butcher block. The lighting is dramatic and moody, highlighting the deep red meat and white fat marbling. A large, well-worn steel cleaver is partially visible in the background. The scene exudes a premium, handcrafted, and tactile atmosphere with a dark charcoal and deep crimson color palette." src="assets/images/hero-steak.png"/>
|
|
</div>
|
|
</div>
|
|
<!-- Slide 2 -->
|
|
<div class="min-w-full flex flex-col md:flex-row relative bg-surface-container-high">
|
|
<div class="w-full md:w-1/2 p-margin-mobile md:p-margin-desktop flex flex-col justify-center z-10">
|
|
<h1 class="font-display-lg text-headline-lg-mobile md:text-display-lg text-primary uppercase leading-none">Kämilleşdirilmek<br/>üçin<br/>gowaldyrylan.</h1>
|
|
<p class="font-body-md text-on-surface-variant mt-4 max-w-sm">Wagtyň synagdan geçen gowaldyryş usullary — ýokary ýumşaklyk we tagam çuňlugy.</p>
|
|
<button class="btn-editorial font-label-bold text-label-bold uppercase px-8 py-4 mt-8 w-max">Gowaldyrylan etleri gözden geçiriň</button>
|
|
</div>
|
|
<div class="w-full md:w-1/2 h-[200px] md:h-full relative sketch-border md:border-l-2 md:border-inverse-surface">
|
|
<img alt="" class="w-full h-full object-cover filter contrast-125 sepia-[.2]" data-alt="A dimly lit, atmospheric shot inside a dry-aging room. Rows of large beef cuts hang from heavy iron hooks. The lighting is cool but accented with warm amber glows, highlighting the crusted exterior of the aged meat. The aesthetic is industrial and heritage, emphasizing time and tradition with a muted palette of dark browns, creams, and charcoal." src="assets/images/hero-dry-aged.png"/>
|
|
</div>
|
|
</div>
|
|
<!-- Slide 3 -->
|
|
<div class="min-w-full flex flex-col md:flex-row relative">
|
|
<div class="w-full md:w-1/2 p-margin-mobile md:p-margin-desktop flex flex-col justify-center z-10">
|
|
<h1 class="font-display-lg text-headline-lg-mobile md:text-display-lg text-primary uppercase leading-none">Usta<br/>kolbasalary.</h1>
|
|
<p class="font-body-md text-on-surface-variant mt-4 max-w-sm">Her gün el bilen baglanýar — adaty reseptler, premium bölekler we aýratyn tagam garyndylary.</p>
|
|
<button class="btn-editorial font-label-bold text-label-bold uppercase px-8 py-4 mt-8 w-max">Saýlawy görmek</button>
|
|
</div>
|
|
<div class="w-full md:w-1/2 h-[200px] md:h-full relative sketch-border md:border-l-2 md:border-inverse-surface">
|
|
<img alt="" class="w-full h-full object-cover filter contrast-125 sepia-[.2]" data-alt="A top-down view of freshly made, hand-linked artisan sausages resting on rough brown butcher paper. Beside them are small piles of coarse sea salt, black peppercorns, and sprigs of fresh rosemary. The lighting is natural and directional, creating soft shadows that emphasize the texture of the meat and paper. The overall tone is warm and inviting, utilizing a palette of earthy browns, creams, and vibrant herbal greens." src="assets/images/hero-sausages.png"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Controls -->
|
|
<div class="absolute bottom-4 left-0 right-0 flex justify-center gap-4 z-20 md:justify-start md:pl-margin-desktop">
|
|
<button class="w-10 h-10 rounded-full border-2 border-inverse-surface bg-surface flex items-center justify-center hover:bg-tertiary-fixed-dim transition-colors" id="prevSlide">
|
|
<span class="material-symbols-outlined">arrow_back</span>
|
|
</button>
|
|
<div class="flex gap-2 items-center" id="heroDots">
|
|
<div class="w-2 h-2 rounded-full bg-primary"></div>
|
|
<div class="w-2 h-2 rounded-full bg-inverse-surface opacity-30"></div>
|
|
<div class="w-2 h-2 rounded-full bg-inverse-surface opacity-30"></div>
|
|
</div>
|
|
<button class="w-10 h-10 rounded-full border-2 border-inverse-surface bg-surface flex items-center justify-center hover:bg-tertiary-fixed-dim transition-colors" id="nextSlide">
|
|
<span class="material-symbols-outlined">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<!-- EXPLORE THE RANGE (Pills) -->
|
|
<section class="py-8 px-margin-mobile md:px-margin-desktop border-b border-dashed border-outline" id="explore">
|
|
<div class="flex overflow-x-auto hide-scrollbar gap-4 pb-4 items-center">
|
|
<span class="font-label-bold text-label-bold uppercase text-on-surface-variant whitespace-nowrap mr-4">Saýlaň:</span>
|
|
<button class="flex-shrink-0 flex items-center gap-2 px-6 py-2 border-2 border-inverse-surface rounded-full bg-tertiary-fixed-dim text-on-surface hover:bg-tertiary-container hover:text-on-tertiary transition-colors">
|
|
<span class="material-symbols-outlined text-sm">set_meal</span>
|
|
<span class="font-label-bold text-label-bold uppercase">Sygyr eti</span>
|
|
</button>
|
|
<button class="flex-shrink-0 flex items-center gap-2 px-6 py-2 border-2 border-inverse-surface rounded-full bg-surface text-on-surface hover:bg-tertiary-fixed-dim transition-colors">
|
|
<span class="material-symbols-outlined text-sm">cruelty_free</span>
|
|
<span class="font-label-bold text-label-bold uppercase">Göýün eti</span>
|
|
</button>
|
|
<button class="flex-shrink-0 flex items-center gap-2 px-6 py-2 border-2 border-inverse-surface rounded-full bg-surface text-on-surface hover:bg-tertiary-fixed-dim transition-colors">
|
|
<span class="material-symbols-outlined text-sm">kebab_dining</span>
|
|
<span class="font-label-bold text-label-bold uppercase">Goş</span>
|
|
</button>
|
|
<button class="flex-shrink-0 flex items-center gap-2 px-6 py-2 border-2 border-inverse-surface rounded-full bg-surface text-on-surface hover:bg-tertiary-fixed-dim transition-colors">
|
|
<span class="material-symbols-outlined text-sm">egg</span>
|
|
<span class="font-label-bold text-label-bold uppercase">Guş eti</span>
|
|
</button>
|
|
<button class="flex-shrink-0 flex items-center gap-2 px-6 py-2 border-2 border-inverse-surface rounded-full bg-surface text-on-surface hover:bg-tertiary-fixed-dim transition-colors">
|
|
<span class="material-symbols-outlined text-sm">local_pizza</span>
|
|
<span class="font-label-bold text-label-bold uppercase">Kolbasalar</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<!-- OUR SIGNATURES -->
|
|
<section class="py-16 md:py-24 pl-margin-mobile md:pl-margin-desktop overflow-hidden border-b-2 border-inverse-surface bg-surface" id="signatures">
|
|
<h2 class="font-display-lg text-headline-md md:text-headline-lg text-primary uppercase mb-12 relative inline-block">
|
|
Biziň aýratynlyklarymyz
|
|
<div class="absolute -bottom-4 left-0 w-full h-[2px] bg-outline-variant sketch-border"></div>
|
|
</h2>
|
|
<div class="flex overflow-x-auto hide-scrollbar gap-8 pb-12 pr-margin-mobile md:pr-margin-desktop snap-x snap-mandatory" id="signaturesCarousel">
|
|
<!-- Card 1 -->
|
|
<article class="flex-shrink-0 w-[85vw] md:w-[350px] snap-center flex flex-col gap-4 relative group">
|
|
<div class="h-[160px] w-full relative sketch-border bg-surface-container overflow-hidden">
|
|
<img alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 sepia-[.3]" data-alt="A stylized, editorial close-up of a thick-cut, bone-in ribeye steak. The image has a subtle grain and ink-wash filter applied, making it look slightly like a high-end lithograph print. The background is a stark, textured cream paper. The meat is deep, rich crimson with pronounced white marbling. A vintage metal price tag clip is attached to the corner of the image." src="assets/images/signature-tomahawk.png"/>
|
|
<div class="absolute top-2 right-2 bg-tertiary-fixed-dim text-on-surface px-3 py-1 font-label-bold text-label-bold uppercase border border-inverse-surface transform rotate-2">
|
|
— TMT / kg
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<h3 class="font-headline-md text-headline-md text-on-surface">Gowaldyrylan Tomahawk</h3>
|
|
<div class="w-12 h-[1px] bg-primary"></div>
|
|
<p class="font-body-md text-on-surface-variant text-sm">45 gün gowaldyrylan ribeye, baý we nahar tagamly. Paýlaşmak üçin amatly.</p>
|
|
<button class="text-left font-label-bold text-label-bold uppercase text-primary hover:text-primary-container mt-2 flex items-center gap-1 group-hover:translate-x-2 transition-transform">
|
|
Sargyda goş <span class="material-symbols-outlined text-sm">arrow_right_alt</span>
|
|
</button>
|
|
</div>
|
|
</article>
|
|
<!-- Card 2 -->
|
|
<article class="flex-shrink-0 w-[85vw] md:w-[350px] snap-center flex flex-col gap-4 relative group">
|
|
<div class="h-[160px] w-full relative sketch-border bg-surface-container overflow-hidden">
|
|
<img alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 sepia-[.3]" data-alt="A rustic presentation of thick-cut, house-cured bacon strips layered on waxed butcher paper. The image features high contrast, deep charcoal shadows, and an earthy red-brown palette, evoking a heritage smokehouse feel. Subtle noise and grain enhance the tactile, editorial quality of the photograph." src="assets/images/signature-bacon.png"/>
|
|
<div class="absolute top-2 right-2 bg-tertiary-fixed-dim text-on-surface px-3 py-1 font-label-bold text-label-bold uppercase border border-inverse-surface transform -rotate-2">
|
|
— TMT / kg
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<h3 class="font-headline-md text-headline-md text-on-surface">Öýde duzlanan we tüsse edilen goş</h3>
|
|
<div class="w-12 h-[1px] bg-primary"></div>
|
|
<p class="font-body-md text-on-surface-variant text-sm">Galyň bölekli goş göwresi, akderweýi bilen duzlanan we 12 sagat galadan agachynda tüsse edilen.</p>
|
|
<button class="text-left font-label-bold text-label-bold uppercase text-primary hover:text-primary-container mt-2 flex items-center gap-1 group-hover:translate-x-2 transition-transform">
|
|
Sargyda goş <span class="material-symbols-outlined text-sm">arrow_right_alt</span>
|
|
</button>
|
|
</div>
|
|
</article>
|
|
<!-- Card 3 -->
|
|
<article class="flex-shrink-0 w-[85vw] md:w-[350px] snap-center flex flex-col gap-4 relative group">
|
|
<div class="h-[160px] w-full relative sketch-border bg-surface-container overflow-hidden">
|
|
<img alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 sepia-[.3]" data-alt="A neat coil of traditional Merguez sausages resting on a well-worn wooden cutting board. The vibrant reddish-orange hue of the sausages contrasts with the dark, distressed wood. Scattered around are whole cumin seeds and a sprig of fresh cilantro. The lighting is warm and directional, typical of a high-quality culinary journal." src="assets/images/signature-merguez.png"/>
|
|
<div class="absolute top-2 right-2 bg-tertiary-fixed-dim text-on-surface px-3 py-1 font-label-bold text-label-bold uppercase border border-inverse-surface transform rotate-1">
|
|
— TMT / kg
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<h3 class="font-headline-md text-headline-md text-on-surface">Açy goş Merguez</h3>
|
|
<div class="w-12 h-[1px] bg-primary"></div>
|
|
<p class="font-body-md text-on-surface-variant text-sm">Miras goş harissa, zira we rezene bilen. Demirgazyk Afrikanyň klasykasy.</p>
|
|
<button class="text-left font-label-bold text-label-bold uppercase text-primary hover:text-primary-container mt-2 flex items-center gap-1 group-hover:translate-x-2 transition-transform">
|
|
Sargyda goş <span class="material-symbols-outlined text-sm">arrow_right_alt</span>
|
|
</button>
|
|
</div>
|
|
</article>
|
|
<!-- Card 4 -->
|
|
<article class="flex-shrink-0 w-[85vw] md:w-[350px] snap-center flex flex-col gap-4 relative group">
|
|
<div class="h-[160px] w-full relative sketch-border bg-surface-container overflow-hidden">
|
|
<img alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 sepia-[.3]" data-alt="A beautifully tied sheep crown roast ready for the oven, placed on a slate surface. The fat is scored in a diamond pattern. The color palette is muted, focusing on the pale pinks of the meat, the white fat, and the dark grey of the slate, resulting in a sophisticated, minimalist aesthetic suitable for a premium butcher brand." src="assets/images/signature-pork-crown.png"/>
|
|
<div class="absolute top-2 right-2 bg-tertiary-fixed-dim text-on-surface px-3 py-1 font-label-bold text-label-bold uppercase border border-inverse-surface transform -rotate-3">
|
|
— TMT / kg
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<h3 class="font-headline-md text-headline-md text-on-surface">Miras göýün taý kebi</h3>
|
|
<div class="w-12 h-[1px] bg-primary"></div>
|
|
<p class="font-body-md text-on-surface-variant text-sm">Bellik taý kebi, usta taýýarlykda frenc we baglanan.</p>
|
|
<button class="text-left font-label-bold text-label-bold uppercase text-primary hover:text-primary-container mt-2 flex items-center gap-1 group-hover:translate-x-2 transition-transform">
|
|
Sargyda goş <span class="material-symbols-outlined text-sm">arrow_right_alt</span>
|
|
</button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
<!-- ABOUT & HISTORY -->
|
|
<section class="py-16 md:py-24 px-margin-mobile md:px-margin-desktop bg-surface-container-low flex flex-col md:flex-row gap-16 md:gap-24 relative" id="history">
|
|
<div class="md:w-1/3 flex flex-col gap-6">
|
|
<h2 class="font-display-lg text-headline-md text-primary uppercase">Kesimçiniň hekaýasy</h2>
|
|
<p class="font-body-lg text-on-surface-variant">Bizi tutuş haýwan kesim sungatynda özüni bagyşlanan ustaçylyk maşgalasy. Esasyndan bäri senagatçilik ýoluny ret edip, ýerli çärikçiler bilen dogru gatnaşyklary, wagtyň synagdan geçen gowaldyryş usullaryny we hil boýunça bäsdeşsiz yhlasyny saýladyk.</p>
|
|
<div class="mt-8 border-t-2 border-dashed border-outline-variant pt-8">
|
|
<img alt="" class="w-full h-auto grayscale contrast-150 sketch-border" data-alt="A black and white, highly textured photograph of a pair of worn, calloused hands resting on a large, scored wooden chopping block. The hands convey years of hard, manual labor and craftsmanship. The lighting highlights the deep textures of the wood and the skin. The overall feel is authentic, historical, and deeply grounded in physical work." src="assets/images/history-hands.png"/>
|
|
</div>
|
|
</div>
|
|
<div class="md:w-2/3 relative">
|
|
<!-- Timeline Line -->
|
|
<div class="absolute left-6 top-4 bottom-4 w-[2px] bg-outline-variant border-l-2 border-dashed border-primary"></div>
|
|
<div class="flex flex-col gap-12 relative z-10">
|
|
<!-- Milestone 1 -->
|
|
<div class="flex gap-8 items-start group">
|
|
<div class="w-12 h-12 rounded-full bg-surface border-2 border-inverse-surface flex items-center justify-center flex-shrink-0 z-10 group-hover:bg-tertiary-fixed-dim transition-colors">
|
|
<span class="material-symbols-outlined text-primary">storefront</span>
|
|
</div>
|
|
<div class="pt-2">
|
|
<h4 class="font-label-bold text-label-bold text-tertiary-container uppercase tracking-widest mb-1">1987</h4>
|
|
<h3 class="font-headline-md text-headline-md text-on-surface mb-2">Esasy</h3>
|
|
<p class="font-body-md text-on-surface-variant">Daragt taryhy merkezi bazarynda ilkinji kiçijik dükançasyny açýar, diňe ýerli çörleri sygyr etine üns berýär.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Milestone 2 -->
|
|
<div class="flex gap-8 items-start group">
|
|
<div class="w-12 h-12 rounded-full bg-surface border-2 border-inverse-surface flex items-center justify-center flex-shrink-0 z-10 group-hover:bg-tertiary-fixed-dim transition-colors">
|
|
<span class="material-symbols-outlined text-primary">outdoor_grill</span>
|
|
</div>
|
|
<div class="pt-2">
|
|
<h4 class="font-label-bold text-label-bold text-tertiary-container uppercase tracking-widest mb-1">1995</h4>
|
|
<h3 class="font-headline-md text-headline-md text-on-surface mb-2">Tüsse otagy</h3>
|
|
<p class="font-body-md text-on-surface-variant">Ilkinji ýörite dub tüsse otagyny gurýarys, meşhur duzlanan we tüsse edilen kolbasa hatarlarymyzy başladýarys.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Milestone 3 -->
|
|
<div class="flex gap-8 items-start group">
|
|
<div class="w-12 h-12 rounded-full bg-surface border-2 border-inverse-surface flex items-center justify-center flex-shrink-0 z-10 group-hover:bg-tertiary-fixed-dim transition-colors">
|
|
<span class="material-symbols-outlined text-primary">local_shipping</span>
|
|
</div>
|
|
<div class="pt-2">
|
|
<h4 class="font-label-bold text-label-bold text-tertiary-container uppercase tracking-widest mb-1">2010</h4>
|
|
<h3 class="font-headline-md text-headline-md text-on-surface mb-2">Döwlet boýunça eltip bermek</h3>
|
|
<p class="font-body-md text-on-surface-variant">Sowuk zynjyrlawly logistika bilen hyzmatdaş bolup, usta taýýarlanan böleklerimizi döwlet boýunça öý aşpezlerine eltip berýäris.</p>
|
|
</div>
|
|
</div>
|
|
<!-- Milestone 4 -->
|
|
<div class="flex gap-8 items-start group">
|
|
<div class="w-12 h-12 rounded-full bg-surface border-2 border-inverse-surface flex items-center justify-center flex-shrink-0 z-10 group-hover:bg-tertiary-fixed-dim transition-colors">
|
|
<span class="material-symbols-outlined text-primary">menu_book</span>
|
|
</div>
|
|
<div class="pt-2">
|
|
<h4 class="font-label-bold text-label-bold text-tertiary-container uppercase tracking-widest mb-1">2023</h4>
|
|
<h3 class="font-headline-md text-headline-md text-on-surface mb-2">Resept kitaby</h3>
|
|
<p class="font-body-md text-on-surface-variant">Miras reseptler toplumynyň çykarylysy — adaty taýýarlamany häzirki aşpezçilik usullary bilen baglaşdyrýarys.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="w-full py-12 px-margin-mobile md:px-margin-desktop flex flex-col items-center gap-8 full-width relative border-t-4 border-primary bg-inverse-surface dark:bg-inverse-surface" id="contact">
|
|
<h2 class="font-display-lg text-display-lg text-surface-bright uppercase text-center">DARAGT</h2>
|
|
<div class="flex gap-6">
|
|
<a class="w-10 h-10 rounded-full border border-surface-variant flex items-center justify-center text-surface-bright hover:bg-surface-bright hover:text-inverse-surface transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-lg">social_leaderboard</span>
|
|
</a>
|
|
<a class="w-10 h-10 rounded-full border border-surface-variant flex items-center justify-center text-surface-bright hover:bg-surface-bright hover:text-inverse-surface transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-lg">photo_camera</span>
|
|
</a>
|
|
<a class="w-10 h-10 rounded-full border border-surface-variant flex items-center justify-center text-surface-bright hover:bg-surface-bright hover:text-inverse-surface transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-lg">mail</span>
|
|
</a>
|
|
</div>
|
|
<nav class="flex flex-wrap justify-center gap-6 mt-4">
|
|
<a class="font-label-sm text-label-sm text-surface-variant hover:text-primary-fixed-dim transition-colors uppercase tracking-widest" href="#">Çykgyş</a>
|
|
<a class="font-label-sm text-label-sm text-surface-variant hover:text-primary-fixed-dim transition-colors uppercase tracking-widest" href="#">Eltip bermek</a>
|
|
<a class="font-label-sm text-label-sm text-surface-variant hover:text-primary-fixed-dim transition-colors uppercase tracking-widest" href="#">Gizlinlik</a>
|
|
<a class="font-label-sm text-label-sm text-surface-variant hover:text-primary-fixed-dim transition-colors uppercase tracking-widest" href="#">Şertler</a>
|
|
</nav>
|
|
<p class="font-label-sm text-label-sm text-surface-variant opacity-70 mt-8 text-center uppercase tracking-widest">
|
|
© 2024 DARAGT USTA KESIMÇILERI. EL BILEN TAÝÝARLANAN.
|
|
</p>
|
|
</footer>
|
|
<script>
|
|
// Drawer Logic
|
|
const menuToggle = document.getElementById('menuToggle');
|
|
const closeDrawer = document.getElementById('closeDrawer');
|
|
const navDrawer = document.getElementById('navDrawer');
|
|
|
|
menuToggle.addEventListener('click', () => {
|
|
navDrawer.classList.remove('-translate-x-full');
|
|
});
|
|
|
|
closeDrawer.addEventListener('click', () => {
|
|
navDrawer.classList.add('-translate-x-full');
|
|
});
|
|
|
|
// Hero Carousel Logic
|
|
const heroCarousel = document.getElementById('heroCarousel');
|
|
const prevBtn = document.getElementById('prevSlide');
|
|
const nextBtn = document.getElementById('nextSlide');
|
|
const dots = document.getElementById('heroDots').children;
|
|
let currentSlide = 0;
|
|
const totalSlides = 3;
|
|
|
|
function updateCarousel() {
|
|
heroCarousel.style.transform = `translateX(-${currentSlide * 100}%)`;
|
|
Array.from(dots).forEach((dot, index) => {
|
|
if (index === currentSlide) {
|
|
dot.classList.remove('opacity-30');
|
|
} else {
|
|
dot.classList.add('opacity-30');
|
|
}
|
|
});
|
|
}
|
|
|
|
nextBtn.addEventListener('click', () => {
|
|
currentSlide = (currentSlide + 1) % totalSlides;
|
|
updateCarousel();
|
|
});
|
|
|
|
prevBtn.addEventListener('click', () => {
|
|
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
|
|
updateCarousel();
|
|
});
|
|
|
|
// Swipe logic for hero
|
|
let startX;
|
|
heroCarousel.addEventListener('touchstart', (e) => {
|
|
startX = e.touches[0].clientX;
|
|
}, {passive: true});
|
|
|
|
heroCarousel.addEventListener('touchend', (e) => {
|
|
const endX = e.changedTouches[0].clientX;
|
|
if (startX - endX > 50) {
|
|
// swipe left
|
|
currentSlide = (currentSlide + 1) % totalSlides;
|
|
updateCarousel();
|
|
} else if (endX - startX > 50) {
|
|
// swipe right
|
|
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
|
|
updateCarousel();
|
|
}
|
|
}, {passive: true});
|
|
|
|
</script>
|
|
</body></html> |