Spaces:
Running
Running
Download index.html from aclkl/anycoder-ffd11cc0: direct link, hf CLI and curl.
- Browser
- Download file 35.1 kB
-
https://huggingface.co/spaces/aclkl/anycoder-ffd11cc0/resolve/main/index.html
- Command line
-
hf download hf://spaces/aclkl/anycoder-ffd11cc0/index.html
-
curl -L -o index.html https://huggingface.co/spaces/aclkl/anycoder-ffd11cc0/resolve/main/index.html
35.1 kB
| <html lang="tr" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Abq | Denizin Ortasında Bir Ada, Bir Lezzet</title> | |
| <meta name="description" content="Abq Restoran - Denizin ortasında, organik tarım ve eşsiz deniz ürünleriyle buluşan bir lezzet deneyimi."> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'abq-sand': '#F4EAE0', | |
| 'abq-deep': '#1E293B', | |
| 'abq-blue': '#0F4C81', | |
| 'abq-teal': '#20B2AA', | |
| 'abq-gold': '#D4AF37', | |
| 'abq-coral': '#FF7F50', | |
| }, | |
| fontFamily: { | |
| 'serif': ['"Playfair Display"', 'serif'], | |
| 'sans': ['"Inter"', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'wave': 'wave 10s linear infinite', | |
| 'drift': 'drift 20s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| wave: { | |
| '0%': { transform: 'translateX(0)' }, | |
| '100%': { transform: 'translateX(-50%)' }, | |
| }, | |
| drift: { | |
| '0%, 100%': { transform: 'translateX(0) translateY(0)' }, | |
| '50%': { transform: 'translateX(30px) translateY(-15px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet"> | |
| <style> | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #F4EAE0; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #20B2AA; | |
| border-radius: 3px; | |
| } | |
| /* Smooth transitions */ | |
| .transition-all-custom { | |
| transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| /* Text shadow for readability on images */ | |
| .text-shadow-lg { | |
| text-shadow: 0 2px 10px rgba(0,0,0,0.3); | |
| } | |
| /* Glass morphism */ | |
| .glass { | |
| background: rgba(255, 255, 255, 0.08); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| /* Ocean gradient background */ | |
| .ocean-bg { | |
| background: linear-gradient(180deg, | |
| rgba(15, 76, 129, 0.05) 0%, | |
| rgba(32, 178, 170, 0.08) 50%, | |
| rgba(15, 76, 129, 0.12) 100%); | |
| } | |
| /* Parallax container */ | |
| .parallax-section { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| @media (max-width: 768px) { | |
| .parallax-section { | |
| background-attachment: scroll; | |
| } | |
| } | |
| /* Menu item hover */ | |
| .menu-item-card { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .menu-item-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(32, 178, 170, 0.05), transparent); | |
| transition: left 0.6s ease; | |
| } | |
| .menu-item-card:hover::before { | |
| left: 100%; | |
| } | |
| /* Custom date input styling */ | |
| input[type="date"]::-webkit-calendar-picker-indicator { | |
| filter: invert(0.4) sepia(1) hue-rotate(170deg) saturate(2); | |
| cursor: pointer; | |
| } | |
| /* Horizontal scroll for gallery on mobile */ | |
| .gallery-scroll { | |
| scroll-snap-type: x mandatory; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .gallery-scroll > * { | |
| scroll-snap-align: start; | |
| } | |
| /* Loading animation for images */ | |
| .img-loading { | |
| background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| /* Subtle grain overlay */ | |
| .grain::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"); | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-abq-sand font-sans text-abq-deep antialiased overflow-x-hidden"> | |
| <!-- Navigation --> | |
| <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500"> | |
| <div class="max-w-7xl mx-auto px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-20"> | |
| <!-- Logo --> | |
| <a href="#" class="flex items-center space-x-3 group"> | |
| <div class="relative w-10 h-10 bg-abq-teal/20 rounded-full flex items-center justify-center group-hover:bg-abq-teal/40 transition-colors"> | |
| <svg class="w-6 h-6 text-abq-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/> | |
| </svg> | |
| </div> | |
| <span class="font-serif text-2xl font-bold text-abq-deep tracking-wide group-hover:text-abq-teal transition-colors">Abq</span> | |
| </a> | |
| <!-- Desktop Menu --> | |
| <div class="hidden md:flex items-center space-x-10"> | |
| <a href="#hikaye" class="text-sm font-medium text-gray-700 hover:text-abq-teal transition-colors tracking-wide uppercase">Hikaye</a> | |
| <a href="#menu" class="text-sm font-medium text-gray-700 hover:text-abq-teal transition-colors tracking-wide uppercase">Menü</a> | |
| <a href="#mekan" class="text-sm font-medium text-gray-700 hover:text-abq-teal transition-colors tracking-wide uppercase">Mekan</a> | |
| <a href="#rezervasyon" class="text-sm font-medium text-gray-700 hover:text-abq-teal transition-colors tracking-wide uppercase">Rezervasyon</a> | |
| </div> | |
| <!-- CTA --> | |
| <div class="hidden md:block"> | |
| <a href="#rezervasyon" class="inline-flex items-center px-6 py-2.5 bg-abq-deep text-white text-sm font-medium rounded-full hover:bg-abq-teal transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"> | |
| Masa Ayırt | |
| </a> | |
| </div> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobileMenuBtn" class="md:hidden p-2 rounded-lg hover:bg-abq-teal/10 transition-colors"> | |
| <svg class="w-6 h-6 text-abq-deep" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="md:hidden hidden bg-white/95 backdrop-blur-xl border-t border-gray-100"> | |
| <div class="px-6 py-6 space-y-4"> | |
| <a href="#hikaye" class="block text-base font-medium text-gray-800 hover:text-abq-teal transition-colors py-2 border-b border-gray-50">Hikaye</a> | |
| <a href="#menu" class="block text-base font-medium text-gray-800 hover:text-abq-teal transition-colors py-2 border-b border-gray-50">Menü</a> | |
| <a href="#mekan" class="block text-base font-medium text-gray-800 hover:text-abq-teal transition-colors py-2 border-b border-gray-50">Mekan</a> | |
| <a href="#rezervasyon" class="block text-base font-medium text-gray-800 hover:text-abq-teal transition-colors py-2">Rezervasyon</a> | |
| <a href="#rezervasyon" class="block mt-4 text-center px-6 py-3 bg-abq-deep text-white rounded-full text-sm font-medium">Masa Ayırt</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center justify-center overflow-hidden"> | |
| <!-- Background Image --> | |
| <div class="absolute inset-0 z-0"> | |
| <img | |
| src="https://images.unsplash.com/photo-1544148103-0773bf10d330?w=1920&q=85" | |
| alt="Ada Restoranı - Denizin ortasında lüks restoran" | |
| class="w-full h-full object-cover" | |
| > | |
| <div class="absolute inset-0 bg-gradient-to-b from-abq-deep/40 via-abq-deep/30 to-abq-deep/70"></div> | |
| </div> | |
| <!-- Ocean Waves SVG (bottom) --> | |
| <div class="absolute bottom-0 left-0 right-0 z-10 overflow-hidden"> | |
| <svg class="w-[200%] h-24 md:h-36 animate-wave" viewBox="0 0 1440 120" preserveAspectRatio="none" fill="none"> | |
| <path d="M0,60 C360,120 720,0 1080,60 C1260,90 1350,80 1440,60 L1440,120 L0,120 Z" fill="#F4EAE0" opacity="0.9"/> | |
| <path d="M0,80 C240,40 480,100 720,60 C960,20 1200,80 1440,50 L1440,120 L0,120 Z" fill="#F4EAE0" opacity="0.6"/> | |
| </svg> | |
| </div> | |
| <!-- Hero Content --> | |
| <div class="relative z-20 text-center px-6 max-w-4xl mx-auto"> | |
| <!-- Floating badge --> | |
| <div class="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-full px-5 py-2 mb-8 animate-float"> | |
| <span class="w-2 h-2 bg-abq-teal rounded-full animate-pulse"></span> | |
| <span class="text-white/90 text-sm font-medium tracking-wider uppercase">Denizin Kalbinde</span> | |
| </div> | |
| <h1 class="font-serif text-5xl md:text-7xl lg:text-8xl font-bold text-white leading-tight mb-6 text-shadow-lg"> | |
| Ada'nın Eşsiz<br> | |
| <span class="italic text-abq-teal/90">Lezzetleri</span> | |
| </h1> | |
| <p class="text-lg md:text-xl text-white/80 max-w-2xl mx-auto mb-10 leading-relaxed font-light"> | |
| Ege Denizi'nin ortasında, organik tarım ve denizin en saf haliyle buluşan,<br class="hidden md:block"> aşçıların ellerinden çıkan unutulmaz bir gastronomik deneyim. | |
| </p> | |
| <div class="flex flex-col sm:flex-row items-center justify-center gap-4"> | |
| <a href="#menu" class="group px-8 py-4 bg-white text-abq-deep rounded-full font-medium text-sm tracking-wide hover:bg-abq-teal hover:text-white transition-all duration-300 shadow-xl hover:shadow-2xl transform hover:-translate-y-1 flex items-center space-x-2"> | |
| <span>Menüyü Keşfet</span> | |
| <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/> | |
| </svg> | |
| </a> | |
| <a href="#rezervasyon" class="px-8 py-4 border-2 border-white/40 text-white rounded-full font-medium text-sm tracking-wide hover:bg-white/10 hover:border-white/60 transition-all duration-300"> | |
| Rezervasyon Yap | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Scroll indicator --> | |
| <div class="absolute bottom-28 left-1/2 -translate-x-1/2 z-20 animate-bounce"> | |
| <svg class="w-6 h-6 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/> | |
| </svg> | |
| </div> | |
| </section> | |
| <!-- Built with anycoder --> | |
| <div class="bg-abq-sand py-3 text-center border-b border-gray-200/50"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="inline-flex items-center space-x-2 text-xs text-gray-500 hover:text-abq-teal transition-colors"> | |
| <span class="font-medium">Built with anycoder</span> | |
| <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/> | |
| </svg> | |
| </a> | |
| </div> | |
| <!-- Story Section --> | |
| <section id="hikaye" class="py-24 md:py-32 bg-abq-sand relative overflow-hidden"> | |
| <!-- Decorative elements --> | |
| <div class="absolute top-20 right-0 w-72 h-72 bg-abq-teal/5 rounded-full blur-3xl"></div> | |
| <div class="absolute bottom-20 left-0 w-96 h-96 bg-abq-blue/5 rounded-full blur-3xl"></div> | |
| <div class="max-w-7xl mx-auto px-6 lg:px-8 relative z-10"> | |
| <div class="grid lg:grid-cols-2 gap-16 lg:gap-24 items-center"> | |
| <!-- Image Grid --> | |
| <div class="relative"> | |
| <div class="grid grid-cols-12 grid-rows-12 gap-3 md:gap-4 h-[500px] md:h-[600px]"> | |
| <!-- Main image --> | |
| <div class="col-span-8 row-span-8 rounded-2xl overflow-hidden shadow-2xl"> | |
| <img | |
| src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=800&q=85" | |
| alt="Restoran iç mekan - zarif masa düzeni" | |
| class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" | |
| > | |
| </div> | |
| <!-- Secondary image --> | |
| <div class="col-span-4 row-span-5 col-start-9 rounded-2xl overflow-hidden shadow-xl"> | |
| <img | |
| src="https://images.unsplash.com/photo-1466978913421-dad2ebd01d17?w=600&q=85" | |
| alt="Taze deniz ürünleri tabağı" | |
| class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" | |
| > | |
| </div> | |
| <!-- Tertiary image --> | |
| <div class="col-span-4 row-span-3 col-start-9 row-start-6 rounded-2xl overflow-hidden shadow-xl"> | |
| <img | |
| src="https://images.unsplash.com/photo-1534080564583-6be75777b70a?w=600&q=85" | |
| alt="Taze salata malzemeleri" | |
| class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" | |
| > | |
| </div> | |
| <!-- Bottom image --> | |
| <div class="col-span-5 row-span-4 row-start-9 rounded-2xl overflow-hidden shadow-xl"> | |
| <img | |
| src="https://images.unsplash.com/photo-1550966871-3ed3cdb5ed0c?w=600&q=85" | |
| alt="Restoran şef mutfakta" | |
| class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" | |
| > | |
| </div> | |
| <!-- Quote card --> | |
| <div class="col-span-7 row-span-4 col-start-6 row-start-9 bg-white rounded-2xl shadow-xl p-6 flex flex-col justify-center"> | |
| <svg class="w-8 h-8 text-abq-teal/30 mb-3" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/> | |
| </svg> | |
| <p class="font-serif text-lg text-gray-700 italic leading-relaxed">"Doğanın sunduğu en saf lezzetleri, binlerce yıllık Ada geleneğiyle birleştirmek bizim misyonumuz."</p> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <p class="text-sm font-semibold text-abq-deep">Chef Aris Petros</p> | |
| <p class="text-xs text-gray-500">Kurucu Şef & Sahibi</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Text Content --> | |
| <div> | |
| <div class="flex items-center space-x-3 mb-6"> | |
| <div class="h-px w-12 bg-abq-teal"></div> | |
| <span class="text-sm font-semibold text-abq-teal tracking-widest uppercase">Hikayemiz</span> | |
| </div> | |
| <h2 class="font-serif text-4xl md:text-5xl font-bold text-abq-deep leading-tight mb-6"> | |
| Ege'nin Kalbinden<br> | |
| <span class="italic text-abq-blue">Dünyaya</span> | |
| </h2> | |
| <div class="space-y-5 text-gray-600 leading-relaxed"> | |
| <p> | |
| <span class="font-semibold text-abq-deep">Abq</span>, Ege Denizi'nin göz alıcı masmavi sularının ortasında, bir volkanik adanın tepesinde yer alır. 2012 yılında kurulduğumuzda tek bir hedefimiz vardı: Ada'nın zengin doğasını sofralarınıza taşımak. | |
| </p> | |
| <p> | |
| Adanın vulkanik topraklarında yetişen taze sebzeler, zeytin ağaçlarının altında otlayan keçiler, ve sabahın ilk ışıklarında avlanan balıklar... Her malzeme, metreslerce mesafeden taşınır. Mutfakta ise geleneksel Ada teknikleri, modern gastronomik yaklaşımla buluşur. | |
| </p> | |
| <p> | |
| Bugün, dünyanın her yerinden gelen misafirlerimiz, denize bakan terasımızda, Ay ışığı altında akşam yemeği yiyor. Abq, bir yemek deneyiminden çok daha fazlası: Doğayla iç içe, zamanın durduğu bir an. | |
| </p> | |
| </div> | |
| <div class="mt-10 grid grid-cols-3 gap-6"> | |
| <div class="text-center"> | |
| <div class="font-serif text-3xl font-bold text-abq-teal">12</div> | |
| <div class="text-xs text-gray-500 mt-1 uppercase tracking-wider">Yıllık Tecrübe</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="font-serif text-3xl font-bold text-abq-teal">1.5h</div> | |
| <div class="text-xs text-gray-500 mt-1 uppercase tracking-wider">Tekne Yolculuğu</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="font-serif text-3xl font-bold text-abq-teal">8</div> | |
| <div class="text-xs text-gray-500 mt-1 uppercase tracking-wider">Ödüllü Şef</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Philosophy / Features --> | |
| <section class="py-20 bg-white relative"> | |
| <div class="max-w-7xl mx-auto px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <span class="text-sm font-semibold text-abq-teal tracking-widest uppercase">Felsefemiz</span> | |
| <h2 class="font-serif text-3xl md:text-4xl font-bold text-abq-deep mt-3">Her Lezzetin Bir Hikayesi Var</h2> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Card 1 --> | |
| <div class="group relative bg-abq-sand/50 rounded-3xl p-8 hover:bg-white hover:shadow-2xl transition-all duration-500 border border-transparent hover:border-abq-teal/20"> | |
| <div class="w-16 h-16 bg-abq-teal/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-abq-teal group-hover:scale-110 transition-all duration-500"> | |
| <svg class="w-8 h-8 text-abq-teal group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/> | |
| </svg> | |
| </div> | |
| <h3 class="font-serif text-xl font-bold text-abq-deep mb-3">Adanın Kendi Ürünleri</h3> | |
| <p class="text-gray-600 text-sm leading-relaxed">Organik bahçelerimizden taze toplanan sebzeler, yerel zeytinler ve ada keçilerinden elde edilen peynirler. Her malzeme en fazla 3 km mesafeden gelir.</p> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="group relative bg-abq-sand/50 rounded-3xl p-8 hover:bg-white hover:shadow-2xl transition-all duration-500 border border-transparent hover:border-abq-teal/20"> | |
| <div class="w-16 h-16 bg-abq-blue/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-abq-blue group-hover:scale-110 transition-all duration-500"> | |
| <svg class="w-8 h-8 text-abq-blue group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> | |
| </svg> | |
| </div> | |
| <h3 class="font-serif text-xl font-bold text-abq-deep mb-3">Denizden Sofraya</h3> | |
| <p class="text-gray-600 text-sm leading-relaxed">Şeflerimiz sabahın ilk saatlerinde kıyıya iner. Ahtapot, deniz kestanesi, orkinos... Her ürün, avlandığı saat içinde mutfağa ulaşır.</p> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="group relative bg-abq-sand/50 rounded-3xl p-8 hover:bg-white hover:shadow-2xl transition-all duration-500 border border-transparent hover:border-abq-teal/20"> | |
| <div class="w-16 h-16 bg-abq-coral/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-abq-coral group-hover:scale-110 transition-all duration-500"> | |
| <svg class="w-8 h-8 text-abq-coral group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/> | |
| </svg> | |
| </div> | |
| <h3 class="font-serif text-xl font-bold text-abq-deep mb-3">Sürdürülebilirlik</h3> | |
| <p class="text-gray-600 text-sm leading-relaxed">Güneş enerjisi, yağmur suyu toplama ve sıfır atık felsefesi. Restoran tamamen kendi enerjisini üretir ve geri dönüşümde küresel ödül sahibidir.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Menu Section --> | |
| <section id="menu" class="py-24 md:py-32 bg-gradient-to-b from-abq-sand to-white relative"> | |
| <div class="max-w-7xl mx-auto px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <div class="flex items-center justify-center space-x-3 mb-4"> | |
| <div class="h-px w-12 bg-abq-teal"></div> | |
| <span class="text-sm font-semibold text-abq-teal tracking-widest uppercase">Menü</span> | |
| <div class="h-px w-12 bg-abq-teal"></div> | |
| </div> | |
| <h2 class="font-serif text-4xl md:text-5xl font-bold text-abq-deep">Mevsimin En İyileri</h2> | |
| <p class="mt-4 text-gray-500 max-w-xl mx-auto">Her mevsim, Ada'nın sunduğu en taze ürünlerle yenilenen bir menü.</p> | |
| </div> | |
| <!-- Menu Filter --> | |
| <div class="flex flex-wrap justify-center gap-3 mb-14"> | |
| <button onclick="filterMenu('all')" class="menu-filter-btn active px-6 py-2.5 rounded-full text-sm font-medium transition-all duration-300 bg-abq-deep text-white shadow-lg" data-category="all">Tümü</button> | |
| <button onclick="filterMenu('starter')" class="menu-filter-btn px-6 py-2.5 rounded-full text-sm font-medium transition-all duration-300 bg-white text-gray-600 border border-gray-200 hover:border-abq-teal hover:text-abq-teal" data-category="starter">Başlangıçlar</button> | |
| <button onclick="filterMenu('main')" class="menu-filter-btn px-6 py-2.5 rounded-full text-sm font-medium transition-all duration-300 bg-white text-gray-600 border border-gray-200 hover:border-abq-teal hover:text-abq-teal" data-category="main">Ana Yemekler</button> | |
| <button onclick="filterMenu('dessert')" class="menu-filter-btn px-6 py-2.5 rounded-full text-sm font-medium transition-all duration-300 bg-white text-gray-600 border border-gray-200 hover:border-abq-teal hover:text-abq-teal" data-category="dessert">Tatlılar</button> | |
| <button onclick="filterMenu('drink')" class="menu-filter-btn px-6 py-2.5 rounded-full text-sm font-medium transition-all duration-300 bg-white text-gray-600 border border-gray-200 hover:border-abq-teal hover:text-abq-teal" data-category="drink">İçecekler</button> | |
| </div> | |
| <!-- Menu Grid --> | |
| <div id="menuGrid" class="grid md:grid-cols-2 gap-x-12 gap-y-8"> | |
| <!-- Items will be populated by JS --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Reservation Section --> | |
| <section id="rezervasyon" class="py-24 md:py-32 bg-abq-deep relative overflow-hidden"> | |
| <!-- Background pattern --> | |
| <div class="absolute inset-0 opacity-5"> | |
| <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none"> | |
| <defs> | |
| <pattern id="waves" width="10" height="10" patternUnits="userSpaceOnUse"> | |
| <path d="M0 5 Q 2.5 0, 5 5 T 10 5" stroke="white" fill="none" stroke-width="0.5"/> | |
| </pattern> | |
| </defs> | |
| <rect width="100%" height="100%" fill="url(#waves)"/> | |
| </svg> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-6 lg:px-8 relative z-10"> | |
| <div class="grid lg:grid-cols-2 gap-16 items-center"> | |
| <!-- Left: Info --> | |
| <div> | |
| <div class="flex items-center space-x-3 mb-6"> | |
| <div class="h-px w-12 bg-abq-teal"></div> | |
| <span class="text-sm font-semibold text-abq-teal tracking-widest uppercase">Rezervasyon</span> | |
| </div> | |
| <h2 class="font-serif text-4xl md:text-5xl font-bold text-white leading-tight mb-6"> | |
| Denizin Ortasında<br> | |
| <span class="italic text-abq-teal">Bir Akşam</span> | |
| </h2> | |
| <p class="text-gray-400 leading-relaxed mb-10 max-w-md"> | |
| Abq'ye ulaşmak için ana karadan tekne ile 1.5 saatlik bir yolculuk yapılır. Rezervasyonunuzu önceden yapın, size en uygun saatte karşılama ayarlayalım. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-12 h-12 bg-abq-teal/10 rounded-xl flex items-center justify-center flex-shrink-0"> | |
| <svg class="w-5 h-5 text-abq-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-1">Çalışma Saatleri</h4> | |
| <p class="text-gray-400 text-sm">Salı - Pazar: 19:00 - 23:30<br>Pazartesi: Kapalı</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-12 h-12 bg-abq-teal/10 rounded-xl flex items-center justify-center flex-shrink-0"> | |
| <svg class="w-5 h-5 text-abq-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-1">İletişim</h4> | |
| <p class="text-gray-400 text-sm">+30 22860 12345<br>info@abq-restaurant.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="w-12 h-12 bg-abq-teal/10 rounded-xl flex items-center justify-center flex-shrink-0"> | |
| <svg class="w-5 h-5 text-abq-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-1">Lokasyon</h4> | |
| <p class="text-gray-400 text-sm">Thirassia Adası, Ege Denizi<br>Yunanistan</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right: Form --> | |
| <div class="bg-white rounded-3xl p-8 md:p-10 shadow-2xl"> | |
| <h3 class="font-serif text-2xl font-bold text-abq-deep mb-6">Masa Ayırt</h3> | |
| <form id="reservationForm" class="space-y-5"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Tarih</label> | |
| <input type="date" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-abq-teal focus:ring-2 focus:ring-abq-teal/10 transition-all"> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Saat</label> | |
| <select required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-abq-teal focus:ring-2 focus:ring-abq-teal/10 transition-all appearance-none"> | |
| <option value="">Seçin</option> | |
| <option value="19:00">19:00</option> | |
| <option value="19:30">19:30</option> | |
| <option value="20:00">20:00</option> | |
| <option value="20:30">20:30</option> | |
| <option value="21:00">21:00</option> | |
| <option value="21:30">21:30</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Kişi Sayısı</label> | |
| <select required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-abq-teal focus:ring-2 focus:ring-abq-teal/10 transition-all appearance-none"> | |
| <option value="">Seçin</option> | |
| <option value="1">1 |