📄
Bubur Ayam Pak Haji

UMKM
Berkas12
src
src/partials
src/styles
src/js
public
.nyieun
src/index.html162 lines
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <meta name="theme-color" content="#172a22">
  <title>Tukang Bubur Naik Haji | Pagi yang Hangat</title>
  <meta name="description" content="Tukang Bubur Naik Haji menghadirkan bubur hangat, ayam suwir, dan pelengkap pilihan untuk mengawali hari dengan rasa yang akrab.">
  <link rel="canonical" href="https://www.example.com/">
  <meta name="robots" content="index, follow">
  <meta property="og:type" content="website">
  <meta property="og:locale" content="id_ID">
  <meta property="og:site_name" content="Tukang Bubur Naik Haji">
  <meta property="og:title" content="Tukang Bubur Naik Haji | Pagi yang Hangat">
  <meta property="og:description" content="Bubur hangat, ayam suwir, dan pelengkap pilihan untuk mengawali hari dengan rasa yang akrab.">
  <meta property="og:url" content="https://www.example.com/">
  <meta property="og:image" content="https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&amp;fit=crop&amp;w=1600&amp;q=88">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Tukang Bubur Naik Haji | Pagi yang Hangat">
  <meta name="twitter:description" content="Bubur hangat, ayam suwir, dan pelengkap pilihan untuk mengawali hari dengan rasa yang akrab.">
  <meta name="twitter:image" content="https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&amp;fit=crop&amp;w=1600&amp;q=88">
  <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=DM+Mono:wght@400;500&amp;family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&amp;family=Fraunces:opsz,wght@9..144,600;9..144,700&amp;display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/styles/main.css">
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "Tukang Bubur Naik Haji",
      "url": "https://www.example.com/"
    }
  </script>
</head>
<body class="min-h-screen flex flex-col bg-milk text-charcoal antialiased">
  {{> header}}
  <main class="flex-1 w-full">
    <section class="relative overflow-hidden bg-forest text-milk">
      <div class="absolute inset-0 opacity-25" aria-hidden="true">
        <div class="absolute -left-24 top-12 h-72 w-72 rounded-full border border-milk/30"></div>
        <div class="absolute right-[9%] top-[-9rem] h-[32rem] w-[32rem] rounded-full border border-milk/20"></div>
      </div>
      <div class="relative mx-auto grid min-h-[720px] max-w-7xl lg:grid-cols-[0.86fr_1.14fr]">
        <div class="flex flex-col justify-between px-5 pb-12 pt-14 sm:px-8 sm:pt-16 lg:px-14 lg:py-16">
          <div data-reveal>
            <p class="font-mono text-[10px] font-medium uppercase tracking-[0.24em] text-saffron">Pagi, disajikan perlahan</p>
            <h1 class="mt-7 max-w-xl font-display text-[clamp(3.5rem,7.5vw,7.2rem)] leading-[0.84] tracking-[-0.075em]">Hangatnya tidak pernah terburu-buru.</h1>
          </div>
          <div class="mt-14 max-w-md border-l border-saffron pl-5 sm:mt-20" data-reveal style="--reveal-delay:100ms">
            <p class="text-base leading-7 text-milk/75">Bubur lembut yang mengepul dari mangkuk, ayam suwir yang gurih, dan pelengkap yang Anda atur sendiri. Inilah jeda kecil sebelum hari benar-benar dimulai.</p>
            <div class="mt-7 flex flex-wrap gap-3">
              <a href="https://wa.me/62878788827281?text=Halo%20Tukang%20Bubur%20Naik%20Haji%2C%20saya%20ingin%20memesan%20bubur." class="inline-flex min-h-12 items-center justify-center rounded-full bg-saffron px-6 text-sm font-bold text-forest transition hover:bg-milk focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-saffron">Pesan bubur</a>
              <a href="/menu" class="inline-flex min-h-12 items-center justify-center rounded-full border border-milk/35 px-6 text-sm font-bold text-milk transition hover:border-milk hover:bg-milk/10 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-milk">Lihat menu</a>
            </div>
          </div>
        </div>

        <div class="relative min-h-[465px] border-l border-milk/15 lg:min-h-0" data-carousel aria-roledescription="carousel" aria-label="Suasana Tukang Bubur Naik Haji">
          <div class="carousel-track flex h-full snap-x snap-mandatory overflow-x-auto scroll-smooth" data-carousel-track tabindex="0" aria-label="Geser untuk melihat foto suasana">
            <figure class="relative min-w-full snap-start" data-carousel-slide>
              <img src="https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&amp;fit=crop&amp;w=1500&amp;q=88" alt="Bubur hangat dengan daun bawang dan pelengkap dalam mangkuk" width="1500" height="1600" class="h-full w-full object-cover brightness-[0.8] saturate-[0.78]" loading="lazy" decoding="async">
              <div class="absolute inset-0 bg-gradient-to-t from-forest/80 via-transparent to-transparent"></div>
              <figcaption class="absolute bottom-0 left-0 max-w-xs p-6 sm:p-8">
                <p class="font-mono text-[10px] uppercase tracking-[0.18em] text-saffron">01 / Uap pertama</p>
                <p class="mt-3 font-display text-3xl leading-[0.93] tracking-[-0.045em]">Mangkuk yang biasa, pagi yang istimewa.</p>
              </figcaption>
            </figure>
            <figure class="relative min-w-full snap-start" data-carousel-slide>
              <img src="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&amp;fit=crop&amp;w=1500&amp;q=88" alt="Hidangan hangat disajikan dalam suasana dapur" width="1500" height="1600" class="h-full w-full object-cover brightness-[0.72] saturate-[0.65]" loading="lazy" decoding="async">
              <div class="absolute inset-0 bg-gradient-to-t from-forest/85 via-forest/10 to-transparent"></div>
              <figcaption class="absolute bottom-0 left-0 max-w-xs p-6 sm:p-8">
                <p class="font-mono text-[10px] uppercase tracking-[0.18em] text-saffron">02 / Di dapur</p>
                <p class="mt-3 font-display text-3xl leading-[0.93] tracking-[-0.045em]">Rasa yang baik dimulai dari perhatian kecil.</p>
              </figcaption>
            </figure>
            <figure class="relative min-w-full snap-start" data-carousel-slide>
              <img src="https://images.unsplash.com/photo-1484723091739-30a097e8f929?auto=format&amp;fit=crop&amp;w=1500&amp;q=88" alt="Sarapan hangat tersaji di atas meja" width="1500" height="1600" class="h-full w-full object-cover brightness-[0.68] saturate-[0.68]" loading="lazy" decoding="async">
              <div class="absolute inset-0 bg-gradient-to-t from-forest/85 via-forest/10 to-transparent"></div>
              <figcaption class="absolute bottom-0 left-0 max-w-xs p-6 sm:p-8">
                <p class="font-mono text-[10px] uppercase tracking-[0.18em] text-saffron">03 / Waktu sarapan</p>
                <p class="mt-3 font-display text-3xl leading-[0.93] tracking-[-0.045em]">Satu mangkuk untuk memulai tanpa tergesa.</p>
              </figcaption>
            </figure>
          </div>

          <div class="absolute right-5 top-5 flex gap-2 sm:right-8 sm:top-8" aria-label="Pilih foto carousel">
            <button type="button" class="h-2.5 w-2.5 rounded-full bg-saffron transition focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-milk" data-carousel-dot="0" aria-label="Tampilkan foto 1" aria-current="true"></button>
            <button type="button" class="h-2.5 w-2.5 rounded-full bg-milk/40 transition hover:bg-milk focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-milk" data-carousel-dot="1" aria-label="Tampilkan foto 2"></button>
            <button type="button" class="h-2.5 w-2.5 rounded-full bg-milk/40 transition hover:bg-milk focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-milk" data-carousel-dot="2" aria-label="Tampilkan foto 3"></button>
          </div>
          <p class="sr-only" data-carousel-status aria-live="polite">Foto 1 dari 3</p>
        </div>
      </div>
    </section>

    <section class="mx-auto max-w-7xl px-5 py-20 sm:px-8 lg:px-14 lg:py-28" aria-labelledby="ritual-title">
      <div class="grid gap-12 lg:grid-cols-[0.85fr_1.15fr] lg:gap-20">
        <div data-reveal>
          <p class="font-mono text-[10px] font-medium uppercase tracking-[0.24em] text-clay">01 / Cara menikmati pagi</p>
          <h2 id="ritual-title" class="mt-5 font-display text-5xl leading-[0.9] tracking-[-0.065em] text-forest sm:text-6xl">Tidak ada dua mangkuk yang harus sama.</h2>
        </div>
        <div class="grid border-y border-charcoal/15 sm:grid-cols-3" data-reveal style="--reveal-delay:100ms">
          <article class="border-b border-charcoal/15 py-6 sm:border-b-0 sm:border-r sm:px-6 sm:py-2">
            <span class="font-mono text-xs text-clay">A</span>
            <h3 class="mt-10 font-display text-3xl tracking-[-0.045em] text-forest">Dasarnya</h3>
            <p class="mt-3 text-sm leading-6 text-charcoal/70">Bubur hangat yang lembut, siap menjadi ruang untuk rasa favorit Anda.</p>
          </article>
          <article class="border-b border-charcoal/15 py-6 sm:border-b-0 sm:border-r sm:px-6 sm:py-2">
            <span class="font-mono text-xs text-clay">B</span>
            <h3 class="mt-10 font-display text-3xl tracking-[-0.045em] text-forest">Karakter</h3>
            <p class="mt-3 text-sm leading-6 text-charcoal/70">Ayam suwir, cakue, kerupuk, dan bawang membuat tiap sendok punya cerita.</p>
          </article>
          <article class="py-6 sm:px-6 sm:py-2">
            <span class="font-mono text-xs text-clay">C</span>
            <h3 class="mt-10 font-display text-3xl tracking-[-0.045em] text-forest">Momen</h3>
            <p class="mt-3 text-sm leading-6 text-charcoal/70">Dinikmati segera, ketika uapnya masih naik dan pagi belum terlalu ramai.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="bg-paper px-5 py-16 sm:px-8 lg:px-14 lg:py-24" aria-labelledby="menu-pilihan-title">
      <div class="mx-auto max-w-7xl">
        <div class="flex flex-col gap-6 border-b border-charcoal/20 pb-7 md:flex-row md:items-end md:justify-between" data-reveal>
          <div>
            <p class="font-mono text-[10px] font-medium uppercase tracking-[0.24em] text-clay">Mangkuk hari ini</p>
            <h2 id="menu-pilihan-title" class="mt-4 font-display text-5xl leading-none tracking-[-0.06em] text-forest sm:text-6xl">Pilih awal hari Anda.</h2>
          </div>
          <a href="/menu" class="inline-flex min-h-11 items-center gap-3 text-sm font-bold text-forest underline decoration-saffron decoration-2 underline-offset-8 transition hover:text-clay focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-forest">Semua pilihan <span aria-hidden="true">→</span></a>
        </div>
        <div class="grid divide-y divide-charcoal/15 md:grid-cols-2 md:divide-x md:divide-y-0">
          <article class="py-9 md:pr-10" data-reveal>
            <p class="font-mono text-xs text-clay">01</p>
            <h3 class="mt-10 font-display text-4xl tracking-[-0.055em] text-forest">Bubur Ayam</h3>
            <p class="mt-4 max-w-md leading-7 text-charcoal/70">Untuk pagi yang ingin terasa lengkap: bubur lembut, ayam suwir, dan pelengkap pilihan.</p>
            <a href="https://wa.me/62878788827281?text=Halo%20Tukang%20Bubur%20Naik%20Haji%2C%20saya%20ingin%20memesan%20Bubur%20Ayam." class="mt-7 inline-flex min-h-11 items-center justify-center rounded-full border border-forest px-5 text-sm font-bold text-forest transition hover:bg-forest hover:text-milk focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-forest">Pesan Bubur Ayam</a>
          </article>
          <article class="py-9 md:pl-10" data-reveal style="--reveal-delay:100ms">
            <p class="font-mono text-xs text-clay">02</p>
            <h3 class="mt-10 font-display text-4xl tracking-[-0.055em] text-forest">Bubur Polos</h3>
            <p class="mt-4 max-w-md leading-7 text-charcoal/70">Pilihan tenang untuk Anda yang ingin menikmati bubur dengan cara dan pelengkap sendiri.</p>
            <a href="https://wa.me/62878788827281?text=Halo%20Tukang%20Bubur%20Naik%20Haji%2C%20saya%20ingin%20memesan%20Bubur%20Polos." class="mt-7 inline-flex min-h-11 items-center justify-center rounded-full border border-forest px-5 text-sm font-bold text-forest transition hover:bg-forest hover:text-milk focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-forest">Pesan Bubur Polos</a>
          </article>
        </div>
      </div>
    </section>

    <section class="bg-clay px-5 py-20 text-milk sm:px-8 lg:px-14 lg:py-28" aria-labelledby="gallery-title">
      <div class="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[0.72fr_1.28fr] lg:items-end">
        <p class="font-mono text-[10px] font-medium uppercase tracking-[0.24em] text-saffron" data-reveal>Suasana dari dapur</p>
        <div data-reveal style="--reveal-delay:90ms">
          <h2 id="gallery-title" class="max-w-4xl font-display text-5xl leading-[0.9] tracking-[-0.065em] sm:text-7xl">Lihat cerita yang tersaji di antara panci, mangkuk, dan pagi.</h2>
          <a href="/gallery" class="mt-9 inline-flex min-h-12 items-center justify-center rounded-full bg-milk px-6 text-sm font-bold text-forest transition hover:bg-saffron focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-milk">Masuk ke galeri</a>
        </div>
      </div>
    </section>
  </main>
  {{> footer}}
  <script type="module" src="/js/app.js"></script>
</body>
</html>