📄
Warung Sederhana

UMKM
Berkas11
src
src/partials
src/styles
src/js
public
src/index.html133 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="#a9472e">
  <title>Warung Sederhana | Rasa Rumahan Khas Sunda di Bandung</title>
  <meta name="description" content="Warung Sederhana menyajikan nasi dan lauk khas Sunda dengan rasa rumahan, harga jujur, dan sajian hangat sejak 1998 di Bandung.">
  <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="Warung Sederhana">
  <meta property="og:title" content="Warung Sederhana | Rasa Rumahan Khas Sunda di Bandung">
  <meta property="og:description" content="Nasi dan lauk khas Sunda dengan rasa rumahan, harga jujur, dan sajian hangat sejak 1998 di Bandung.">
  <meta property="og:url" content="https://www.example.com/">
  <meta property="og:image" content="https://www.example.com/favicon.svg">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Warung Sederhana | Rasa Rumahan Khas Sunda di Bandung">
  <meta name="twitter:description" content="Nasi dan lauk khas Sunda dengan rasa rumahan, harga jujur, dan sajian hangat sejak 1998 di Bandung.">
  <meta name="twitter:image" content="https://www.example.com/favicon.svg">
  <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+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/styles/main.css">
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Restaurant",
      "name": "Warung Sederhana",
      "description": "Warung makan keluarga khas Sunda di Bandung sejak 1998.",
      "url": "https://www.example.com/",
      "telephone": "+6281234567890",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "Jl. Contoh No. 1",
        "addressLocality": "Bandung",
        "addressCountry": "ID"
      },
      "openingHours": ["Mo-Sa 07:00-20:00"]
    }
  </script>
</head>
<body class="min-h-screen flex flex-col bg-cream text-ink">
  {{> header}}
  <main class="flex-1 w-full">
    <section class="overflow-hidden border-b border-terracotta/15 bg-cream">
      <div class="mx-auto grid max-w-7xl gap-10 px-5 py-12 sm:px-8 sm:py-16 lg:grid-cols-[1.05fr_0.95fr] lg:items-center lg:px-12 lg:py-20">
        <div data-reveal>
          <p class="mb-5 inline-flex items-center gap-2 rounded-full border border-terracotta/20 bg-white/70 px-4 py-2 text-sm font-semibold text-terracotta">
            <span class="h-2 w-2 rounded-full bg-leaf"></span>
            Sejak 1998 · Bandung
          </p>
          <h1 class="max-w-3xl font-display text-5xl leading-[0.98] tracking-tight text-ink sm:text-6xl lg:text-7xl">Makan sederhana, <span class="text-terracotta">hangatnya</span> selalu terasa.</h1>
          <p class="mt-6 max-w-xl text-lg leading-8 text-ink/75">Nasi hangat, lauk Sunda yang akrab di lidah, dan sambutan seperti pulang ke rumah. Kami memasak dari pagi untuk meja makan Anda.</p>
          <div class="mt-8 flex flex-col gap-3 sm:flex-row">
            <a class="inline-flex min-h-12 items-center justify-center rounded-full bg-terracotta px-6 font-bold text-white shadow-lg shadow-terracotta/20 transition hover:bg-terracotta-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-terracotta" href="https://wa.me/6281234567890?text=Halo%20Warung%20Sederhana%2C%20saya%20ingin%20pesan%20makan." target="_blank" rel="noopener">Pesan sekarang</a>
            <a class="inline-flex min-h-12 items-center justify-center rounded-full border border-ink/20 bg-white px-6 font-bold text-ink transition hover:border-terracotta hover:text-terracotta focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-terracotta" href="/menu">Lihat menu hari ini</a>
          </div>
          <div class="mt-10 flex flex-wrap gap-x-7 gap-y-3 text-sm font-medium text-ink/70">
            <span>Senin–Sabtu 07.00–20.00</span>
            <a class="underline decoration-terracotta/50 underline-offset-4 hover:text-terracotta" href="https://www.google.com/maps/search/?api=1&amp;query=Jl.%20Contoh%20No.%201%20Bandung" target="_blank" rel="noopener">Jl. Contoh No. 1, Bandung</a>
          </div>
        </div>
        <div class="relative mx-auto w-full max-w-lg" data-reveal style="--reveal-delay: 120ms">
          <div class="absolute -right-8 top-8 h-40 w-40 rounded-full bg-mustard/35 blur-2xl"></div>
          <div class="relative rotate-[-2deg] rounded-[2.25rem] bg-ink p-4 shadow-2xl shadow-ink/20 sm:p-6">
            <div class="rounded-[1.5rem] bg-[#d9784f] p-6 sm:p-8">
              <p class="font-display text-2xl text-cream">Dari dapur kami</p>
              <div class="mt-8 rounded-[1.25rem] bg-cream p-5 text-ink shadow-xl">
                <div class="flex items-start justify-between gap-4">
                  <div>
                    <p class="text-xs font-bold uppercase tracking-[0.18em] text-terracotta">Pilihan hangat</p>
                    <h2 class="mt-1 font-display text-3xl">Nasi Liwet Komplit</h2>
                    <p class="mt-2 leading-6 text-ink/70">Nasi gurih, ayam goreng, tahu-tempe, lalapan, dan sambal dadak.</p>
                  </div>
                  <span class="rounded-full bg-mustard px-3 py-2 text-sm font-bold">Rp 35.000</span>
                </div>
                <div class="mt-6 flex items-center gap-3 border-t border-ink/10 pt-4 text-sm font-semibold text-ink/65">
                  <span class="flex h-9 w-9 items-center justify-center rounded-full bg-leaf text-white">✓</span>
                  Dimasak segar setiap pagi
                </div>
              </div>
              <p class="mt-7 text-sm font-medium text-cream/85">Tidak berlebihan. Cukup enak, cukup hangat, dan selalu jujur.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="mx-auto max-w-7xl px-5 py-14 sm:px-8 lg:px-12 lg:py-20">
      <div class="grid gap-8 lg:grid-cols-[0.72fr_1.28fr] lg:items-end">
        <div data-reveal>
          <p class="text-sm font-bold uppercase tracking-[0.18em] text-terracotta">Yang kami jaga</p>
          <h2 class="mt-3 font-display text-4xl leading-tight text-ink">Sederhana dalam nama, sungguh-sungguh dalam rasa.</h2>
        </div>
        <p class="max-w-2xl text-lg leading-8 text-ink/70" data-reveal style="--reveal-delay: 100ms">Warung kami tumbuh dari resep keluarga dan kebiasaan baik: memasak sendiri, menyajikan hangat, serta menetapkan harga yang masuk akal untuk makan sehari-hari.</p>
      </div>
      <div class="mt-10 grid gap-4 md:grid-cols-3">
        <article class="rounded-3xl border border-ink/10 bg-white p-6 shadow-sm" data-reveal>
          <p class="font-display text-4xl text-terracotta">01</p>
          <h3 class="mt-5 text-xl font-bold">Masakan rumahan</h3>
          <p class="mt-2 leading-7 text-ink/70">Bumbu akrab, nasi selalu hangat, dan lauk yang dibuat untuk dinikmati bersama.</p>
        </article>
        <article class="rounded-3xl border border-ink/10 bg-mustard/25 p-6 shadow-sm" data-reveal style="--reveal-delay: 100ms">
          <p class="font-display text-4xl text-terracotta">02</p>
          <h3 class="mt-5 text-xl font-bold">Harga jujur</h3>
          <p class="mt-2 leading-7 text-ink/70">Pilihan makan enak yang tetap ramah untuk sarapan, makan siang, atau dibawa pulang.</p>
        </article>
        <article class="rounded-3xl border border-ink/10 bg-leaf p-6 text-white shadow-sm" data-reveal style="--reveal-delay: 200ms">
          <p class="font-display text-4xl text-mustard">03</p>
          <h3 class="mt-5 text-xl font-bold">Buka dari pagi</h3>
          <p class="mt-2 leading-7 text-white/80">Kami mulai pukul 07.00 agar hari Anda bisa dimulai dengan sepiring makan hangat.</p>
        </article>
      </div>
    </section>

    <section class="bg-ink px-5 py-14 text-cream sm:px-8 lg:px-12 lg:py-20">
      <div class="mx-auto grid max-w-7xl gap-8 lg:grid-cols-[1fr_auto] lg:items-end">
        <div data-reveal>
          <p class="text-sm font-bold uppercase tracking-[0.18em] text-mustard">Untuk meja makan hari ini</p>
          <h2 class="mt-3 max-w-2xl font-display text-4xl leading-tight sm:text-5xl">Sudah tahu mau pilih lauk yang mana?</h2>
          <p class="mt-4 max-w-xl text-lg leading-8 text-cream/75">Lihat pilihan nasi, ayam, ikan, dan pendamping khas Sunda yang tersedia di Warung Sederhana.</p>
        </div>
        <a class="inline-flex min-h-12 items-center justify-center rounded-full bg-mustard px-6 font-bold text-ink transition hover:bg-cream focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-mustard" href="/menu" data-reveal style="--reveal-delay: 100ms">Jelajahi menu</a>
      </div>
    </section>
  </main>
  {{> footer}}
  <script type="module" src="/js/app.js"></script>
</body>
</html>