400 lines
24 KiB
PHP
400 lines
24 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="tk">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>{{ $settings['footer_brand_name'] ?? 'DARAGT' }} Şöhlatlary</title>
|
|
<link href="{{ asset('assets/css/fonts.css') }}" rel="stylesheet"/>
|
|
<link href="{{ asset('assets/css/tailwind.css') }}" rel="stylesheet"/>
|
|
@vite(['resources/js/app.js'])
|
|
</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">
|
|
{{ $settings['footer_brand_name'] ?? '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>
|
|
|
|
{{-- Navigation Drawer --}}
|
|
<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">{{ $settings['footer_brand_name'] ?? '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 CAROUSEL --}}
|
|
<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">
|
|
@foreach($heroSlides as $slide)
|
|
<div class="min-w-full flex flex-col md:flex-row relative {{ $loop->even ? '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 relative">
|
|
@if($loop->first)
|
|
<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>
|
|
@endif
|
|
<h1 class="font-display-lg text-headline-lg-mobile md:text-display-lg text-primary {{ $loop->first ? 'mt-12 md:mt-0' : '' }} uppercase leading-none">{!! nl2br(e($slide->headline)) !!}</h1>
|
|
@if($slide->subheadline)
|
|
<p class="font-body-md text-on-surface-variant mt-4 max-w-sm">{{ $slide->subheadline }}</p>
|
|
@endif
|
|
@if($slide->cta_label)
|
|
<a href="{{ $slide->cta_url ?? '#' }}" class="btn-editorial font-label-bold text-label-bold uppercase px-8 py-4 mt-8 w-max">{{ $slide->cta_label }}</a>
|
|
@endif
|
|
</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">
|
|
@if($slide->image)
|
|
<img alt="{{ $slide->headline }}" class="w-full h-full object-cover filter contrast-125 sepia-[.2]" src="{{ Storage::url($slide->image) }}"/>
|
|
@else
|
|
<div class="w-full h-full bg-surface-container flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-outline text-6xl">image</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
{{-- Carousel 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">
|
|
@foreach($heroSlides as $slide)
|
|
<div class="w-2 h-2 rounded-full {{ $loop->first ? 'bg-primary' : 'bg-inverse-surface opacity-30' }}"></div>
|
|
@endforeach
|
|
</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>
|
|
|
|
{{-- CATEGORY 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>
|
|
@foreach($categories as $category)
|
|
<button
|
|
class="category-pill flex-shrink-0 flex items-center gap-2 px-6 py-2 border-2 border-inverse-surface rounded-full text-on-surface hover:bg-tertiary-container hover:text-on-tertiary transition-colors {{ $loop->first ? 'bg-tertiary-fixed-dim' : 'bg-surface' }}"
|
|
data-category-id="{{ $category->id }}"
|
|
>
|
|
<span class="material-symbols-outlined text-sm">{{ $category->icon }}</span>
|
|
<span class="font-label-bold text-label-bold uppercase">{{ $category->name }}</span>
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
|
|
{{-- PRODUCT CAROUSELS (per category) --}}
|
|
@if($categories->isNotEmpty())
|
|
<section class="border-b-2 border-inverse-surface bg-surface" id="products">
|
|
@foreach($categories as $category)
|
|
<div
|
|
class="category-products py-12 px-margin-mobile md:px-margin-desktop"
|
|
data-category-id="{{ $category->id }}"
|
|
style="{{ $loop->first ? '' : 'display:none' }}"
|
|
>
|
|
@if($category->products->isNotEmpty())
|
|
<div class="splide product-splide" id="splide-cat-{{ $category->id }}">
|
|
<div class="splide__track">
|
|
<ul class="splide__list">
|
|
@foreach($category->products as $product)
|
|
<li class="splide__slide">
|
|
<article class="flex flex-col gap-4 relative group pr-4">
|
|
<div class="h-[200px] w-full relative sketch-border bg-surface-container overflow-hidden">
|
|
@if($product->image)
|
|
<img alt="{{ $product->name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 sepia-[.3]" src="{{ Storage::url($product->image) }}"/>
|
|
@else
|
|
<div class="w-full h-full bg-surface-container flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-outline text-5xl">{{ $category->icon }}</span>
|
|
</div>
|
|
@endif
|
|
<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">
|
|
{{ number_format($product->price, 0) }} TMT / {{ $product->price_unit }}
|
|
</div>
|
|
@if($product->availability_status !== 'available')
|
|
<div class="absolute bottom-2 left-2 bg-inverse-surface text-surface px-2 py-1 font-label-bold text-label-bold uppercase text-xs">
|
|
@if($product->availability_status === 'out_of_season')
|
|
Möwsümden daşary
|
|
@elseif($product->availability_status === 'low_stock')
|
|
Az galdy
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<h3 class="font-headline-md text-headline-md text-on-surface">{{ $product->name }}</h3>
|
|
<div class="w-12 h-[1px] bg-primary"></div>
|
|
@if($product->description)
|
|
<p class="font-body-md text-on-surface-variant text-sm">{{ $product->description }}</p>
|
|
@endif
|
|
<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>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
<div class="splide__arrows mt-6">
|
|
<button class="splide__arrow splide__arrow--prev">
|
|
<span class="material-symbols-outlined">arrow_back</span>
|
|
</button>
|
|
<button class="splide__arrow splide__arrow--next">
|
|
<span class="material-symbols-outlined">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<p class="text-on-surface-variant font-body-md">Bu kategoriýada haryt ýok.</p>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</section>
|
|
@endif
|
|
|
|
{{-- OUR SIGNATURES --}}
|
|
@if($signatureItems->isNotEmpty())
|
|
<section class="py-16 md:py-24 px-margin-mobile md:px-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">
|
|
@foreach($signatureItems as $item)
|
|
<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">
|
|
@if($item->image)
|
|
<img alt="{{ $item->name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 sepia-[.3]" src="{{ Storage::url($item->image) }}"/>
|
|
@else
|
|
<div class="w-full h-full bg-surface-container flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-outline text-5xl">restaurant_menu</span>
|
|
</div>
|
|
@endif
|
|
<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 {{ $loop->index % 3 === 0 ? 'rotate-2' : ($loop->index % 3 === 1 ? '-rotate-2' : 'rotate-1') }}">
|
|
{{ number_format($item->price, 0) }} TMT / {{ $item->price_unit }}
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<h3 class="font-headline-md text-headline-md text-on-surface">{{ $item->name }}</h3>
|
|
<div class="w-12 h-[1px] bg-primary"></div>
|
|
@if($item->description)
|
|
<p class="font-body-md text-on-surface-variant text-sm">{{ $item->description }}</p>
|
|
@endif
|
|
<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>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
{{-- BUTCHER'S TALE + HISTORY TIMELINE --}}
|
|
<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">
|
|
{{ $settings['butchers_tale_title'] ?? 'Kesimçiniň hekaýasy' }}
|
|
</h2>
|
|
@if(!empty($settings['butchers_tale_body']))
|
|
<p class="font-body-lg text-on-surface-variant">{{ $settings['butchers_tale_body'] }}</p>
|
|
@endif
|
|
@if(!empty($settings['butchers_tale_image']))
|
|
<div class="mt-8 border-t-2 border-dashed border-outline-variant pt-8">
|
|
<img alt="Kesimçi elleri" class="w-full h-auto grayscale contrast-150 sketch-border" src="{{ Storage::url($settings['butchers_tale_image']) }}"/>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Timeline --}}
|
|
@if($timelineEntries->isNotEmpty())
|
|
<div class="md:w-2/3 relative">
|
|
<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">
|
|
@foreach($timelineEntries as $entry)
|
|
<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">{{ $entry->icon }}</span>
|
|
</div>
|
|
<div class="pt-2">
|
|
<h4 class="font-label-bold text-label-bold text-tertiary-container uppercase tracking-widest mb-1">{{ $entry->year }}</h4>
|
|
<h3 class="font-headline-md text-headline-md text-on-surface mb-2">{{ $entry->title }}</h3>
|
|
<p class="font-body-md text-on-surface-variant">{{ $entry->body }}</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</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">
|
|
{{ $settings['footer_brand_name'] ?? 'DARAGT' }}
|
|
</h2>
|
|
|
|
@if($socialLinks->isNotEmpty())
|
|
<div class="flex gap-6">
|
|
@foreach($socialLinks as $link)
|
|
<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="{{ $link->url }}" target="_blank" rel="noopener noreferrer" aria-label="{{ $link->platform }}">
|
|
@if($link->icon)
|
|
<img src="{{ Storage::url($link->icon) }}" alt="{{ $link->platform }}" class="w-5 h-5 object-contain" style="filter: brightness(0) invert(1);">
|
|
@else
|
|
<span class="material-symbols-outlined text-lg">link</span>
|
|
@endif
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
@if($footerNavLinks->isNotEmpty())
|
|
<nav class="flex flex-wrap justify-center gap-6 mt-4">
|
|
@foreach($footerNavLinks as $navLink)
|
|
<a class="font-label-sm text-label-sm text-surface-variant hover:text-primary-fixed-dim transition-colors uppercase tracking-widest" href="{{ $navLink->url }}">
|
|
{{ $navLink->label }}
|
|
</a>
|
|
@endforeach
|
|
</nav>
|
|
@endif
|
|
|
|
@if(!empty($settings['footer_address']) || !empty($settings['footer_phone']) || !empty($settings['footer_email']))
|
|
<div class="flex flex-wrap justify-center gap-6 mt-2">
|
|
@if(!empty($settings['footer_address']))
|
|
<span class="font-label-sm text-label-sm text-surface-variant uppercase tracking-widest">{{ $settings['footer_address'] }}</span>
|
|
@endif
|
|
@if(!empty($settings['footer_phone']))
|
|
<a href="tel:{{ $settings['footer_phone'] }}" class="font-label-sm text-label-sm text-surface-variant hover:text-primary-fixed-dim transition-colors uppercase tracking-widest">{{ $settings['footer_phone'] }}</a>
|
|
@endif
|
|
@if(!empty($settings['footer_email']))
|
|
<a href="mailto:{{ $settings['footer_email'] }}" class="font-label-sm text-label-sm text-surface-variant hover:text-primary-fixed-dim transition-colors uppercase tracking-widest">{{ $settings['footer_email'] }}</a>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
<p class="font-label-sm text-label-sm text-surface-variant opacity-70 mt-8 text-center uppercase tracking-widest">
|
|
{{ $settings['footer_copyright'] ?? '© 2026 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 = {{ $heroSlides->count() }};
|
|
|
|
function updateCarousel() {
|
|
heroCarousel.style.transform = `translateX(-${currentSlide * 100}%)`;
|
|
Array.from(dots).forEach((dot, index) => {
|
|
if (index === currentSlide) {
|
|
dot.classList.remove('opacity-30');
|
|
dot.classList.add('bg-primary');
|
|
dot.classList.remove('bg-inverse-surface');
|
|
} else {
|
|
dot.classList.add('opacity-30');
|
|
dot.classList.remove('bg-primary');
|
|
dot.classList.add('bg-inverse-surface');
|
|
}
|
|
});
|
|
}
|
|
|
|
if (nextBtn) {
|
|
nextBtn.addEventListener('click', () => {
|
|
currentSlide = (currentSlide + 1) % totalSlides;
|
|
updateCarousel();
|
|
});
|
|
}
|
|
|
|
if (prevBtn) {
|
|
prevBtn.addEventListener('click', () => {
|
|
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
|
|
updateCarousel();
|
|
});
|
|
}
|
|
|
|
// Autoplay — advances every 5 seconds, stops on manual interaction
|
|
let heroAutoplay = setInterval(() => {
|
|
currentSlide = (currentSlide + 1) % totalSlides;
|
|
updateCarousel();
|
|
}, 5000);
|
|
|
|
[prevBtn, nextBtn].forEach((btn) => {
|
|
btn?.addEventListener('click', () => clearInterval(heroAutoplay));
|
|
});
|
|
|
|
// Swipe logic for hero
|
|
let startX;
|
|
if (heroCarousel) {
|
|
heroCarousel.addEventListener('touchstart', (e) => {
|
|
startX = e.touches[0].clientX;
|
|
clearInterval(heroAutoplay);
|
|
}, { passive: true });
|
|
|
|
heroCarousel.addEventListener('touchend', (e) => {
|
|
const endX = e.changedTouches[0].clientX;
|
|
if (startX - endX > 50) {
|
|
currentSlide = (currentSlide + 1) % totalSlides;
|
|
updateCarousel();
|
|
} else if (endX - startX > 50) {
|
|
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
|
|
updateCarousel();
|
|
}
|
|
}, { passive: true });
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|