📄
Toko Kueh Ibu Lani

Toko
Berkas1
src
src/index.html317 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="#f7f0e4">
  <title>Pesan Kue | Toko Kue Nusantara Ibu Lani</title>
  <meta name="description" content="Ceritakan kebutuhan kue Anda kepada Toko Kue Nusantara Ibu Lani untuk keluarga, syukuran, hantaran, atau momen spesial lainnya.">
  <link rel="canonical" href="https://www.example.com/pesan.html">
  <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="Toko Kue Nusantara Ibu Lani">
  <meta property="og:title" content="Pesan Kue | Toko Kue Nusantara Ibu Lani">
  <meta property="og:description" content="Ceritakan kebutuhan kue Anda untuk keluarga, syukuran, hantaran, atau momen spesial lainnya.">
  <meta property="og:url" content="https://www.example.com/pesan.html">
  <meta property="og:image" content="https://images.unsplash.com/photo-1551024506-0bccd828d307?auto=format&fit=crop&w=1200&q=85">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Pesan Kue | Toko Kue Nusantara Ibu Lani">
  <meta name="twitter:description" content="Ceritakan kebutuhan kue Anda untuk momen yang ingin dirayakan.">
  <meta name="twitter:image" content="https://images.unsplash.com/photo-1551024506-0bccd828d307?auto=format&fit=crop&w=1200&q=85">
  <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+Serif+Display&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>

@theme {
  --color-cream: #f7f0e4;
  --color-cacao: #33251f;
  --color-terracotta: #b95238;
  --color-saffron: #e7b85c;
  --color-sage: #b8c7ad;
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "Manrope", Arial, sans-serif;
}

:root {
  color-scheme: light;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
}

h1,
h2,
h3,
.font-display {
  font-family: var(--font-display);
  font-weight: 400;
}

.paper-grain {
  background-color: var(--color-cream);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(185, 82, 56, 0.07) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 72%, rgba(51, 37, 31, 0.06) 0 1px, transparent 1.5px);
  background-size: 24px 24px, 31px 31px;
}

summary::-webkit-details-marker {
  display: none;
}

summary::marker {
  content: "";
}

.js html.nyieun-motion [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(14px);
}

.js [data-reveal].is-visible {
  animation: reveal-up 0.5s ease-out forwards;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal],
  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (max-width: 767px) {
  .paper-grain {
    background-size: 18px 18px, 25px 25px;
  }
}</style>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Beranda",
        "item": "https://www.example.com/"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Pesan Kue",
        "item": "https://www.example.com/pesan.html"
      }
    ]
  }
  </script>
  <script type="module">const root = document.documentElement;
root.classList.add("js");

const revealItems = document.querySelectorAll("[data-reveal]");

if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
  revealItems.forEach((item) => item.classList.add("is-visible"));
} else if ("IntersectionObserver" in window) {
  const observer = new IntersectionObserver(
    (entries, currentObserver) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) return;
        entry.target.classList.add("is-visible");
        currentObserver.unobserve(entry.target);
      });
    },
    {
      rootMargin: "0px 0px -8% 0px",
      threshold: 0.08
    }
  );

  revealItems.forEach((item) => observer.observe(item));
} else {
  revealItems.forEach((item) => item.classList.add("is-visible"));
}</script>
<style id="nyieun-reveal">
html.nyieun-motion [data-reveal]:not(.is-revealed){opacity:0;transform:translateY(14px);transition:opacity .45s ease-out,transform .45s ease-out;transition-delay:var(--reveal-delay,0ms)}
html.nyieun-motion [data-reveal].is-revealed{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.nyieun-motion [data-reveal]{opacity:1;transform:none;transition:none}}
</style></head>
<body class="min-h-screen flex flex-col bg-cream text-cacao">
  <header data-nyieun-partial="header" class="relative z-10 border-b border-cacao/10 bg-cream/95">
    <div class="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 sm:px-8 lg:px-12">
      <a href="index.html" class="group inline-flex min-h-12 items-center gap-3 rounded-xl focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-terracotta/25" aria-label="Toko Kue Nusantara Ibu Lani, beranda">
        <span class="grid h-10 w-10 place-items-center rounded-full bg-cacao font-display text-lg text-saffron transition group-hover:bg-terracotta">IL</span>
        <span class="leading-tight">
          <span class="block font-extrabold tracking-tight text-cacao">Ibu Lani</span>
          <span class="block text-[0.65rem] font-bold uppercase tracking-[0.18em] text-cacao/50">Kue Nusantara</span>
        </span>
      </a>
  
      <nav class="hidden items-center gap-8 md:flex" aria-label="Navigasi utama">
        <a href="index.html" class="min-h-11 py-3 text-sm font-bold text-cacao/70 transition hover:text-terracotta focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-terracotta/20">Beranda</a>
        <a href="cerita.html" class="min-h-11 py-3 text-sm font-bold text-cacao/70 transition hover:text-terracotta focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-terracotta/20">Cerita</a>
        <a href="pesan.html" class="inline-flex min-h-11 items-center rounded-full bg-cacao px-5 text-sm font-extrabold text-cream transition hover:bg-terracotta focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-cacao/20">Pesan kue <span class="ml-2" aria-hidden="true">↗</span></a>
      </nav>
  
      <details class="relative md:hidden">
        <summary class="flex min-h-11 cursor-pointer list-none items-center rounded-full border border-cacao/20 px-4 text-sm font-extrabold marker:hidden focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-terracotta/20">
          Menu <span class="ml-2 text-lg" aria-hidden="true">+</span>
        </summary>
        <nav class="absolute right-0 top-14 w-52 rounded-2xl border border-cacao/10 bg-white p-3 shadow-2xl" aria-label="Navigasi mobile">
          <a href="index.html" class="block min-h-11 rounded-xl px-4 py-3 text-sm font-bold hover:bg-cream focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-terracotta/20">Beranda</a>
          <a href="cerita.html" class="block min-h-11 rounded-xl px-4 py-3 text-sm font-bold hover:bg-cream focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-terracotta/20">Cerita</a>
          <a href="pesan.html" class="mt-1 block min-h-11 rounded-xl bg-terracotta px-4 py-3 text-sm font-extrabold text-white focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-terracotta/30">Pesan kue <span class="ml-2" aria-hidden="true">↗</span></a>
        </nav>
      </details>
    </div>
  </header>  <main class="flex-1 w-full">
    <section class="paper-grain border-b border-cacao/10" aria-labelledby="order-title">
      <div class="mx-auto max-w-7xl px-5 py-16 sm:px-8 lg:px-12 lg:py-24">
        <div data-reveal class="max-w-3xl">
          <p class="mb-5 inline-flex items-center gap-3 text-xs font-extrabold uppercase tracking-[0.24em] text-terracotta">
            <span class="h-px w-8 bg-terracotta"></span>
            Mulai pesanan
          </p>
          <h1 id="order-title" class="max-w-2xl text-5xl leading-[0.98] tracking-tight sm:text-6xl">Ceritakan kebutuhan kue Anda.</h1>
          <p class="mt-7 max-w-2xl text-lg leading-8 text-cacao/70">Semakin lengkap ceritanya, semakin mudah kami membantu. Tidak harus langsung tahu semua detail—mulai saja dari momennya.</p>
        </div>
      </div>
    </section>

    <section class="mx-auto grid max-w-7xl gap-12 px-5 py-16 sm:px-8 lg:grid-cols-[0.72fr_1.28fr] lg:gap-24 lg:px-12 lg:py-24" aria-labelledby="form-title">
      <div data-reveal>
        <p class="text-xs font-extrabold uppercase tracking-[0.24em] text-terracotta">Sebelum mengisi</p>
        <h2 id="form-title" class="mt-4 text-4xl leading-tight sm:text-5xl">Beri kami sedikit konteks.</h2>
        <div class="mt-7 space-y-5 text-sm leading-7 text-cacao/65">
          <p>Sampaikan untuk acara apa, kapan dibutuhkan, dan perkiraan jumlahnya. Jika belum yakin, tuliskan saja bayangan awal Anda.</p>
          <p>Katalog dan harga disesuaikan dengan jenis, ukuran, dan jumlah pesanan. Detailnya akan dibicarakan setelah kebutuhan Anda kami pahami.</p>
        </div>
        <div class="mt-10 rounded-2xl bg-sage p-5">
          <p class="text-sm font-extrabold">Catatan penting</p>
          <p class="mt-2 text-sm leading-6 text-cacao/65">Formulir ini adalah titik awal permintaan. Hubungkan dengan kanal pemesanan aktif sebelum situs dipublikasikan.</p>
        </div>
      </div>

      <form data-reveal style="--reveal-delay: 120ms" action="#" method="post" class="rounded-[2rem] bg-white p-6 shadow-xl shadow-cacao/5 ring-1 ring-cacao/10 sm:p-10">
        <div class="grid gap-6 sm:grid-cols-2">
          <div class="sm:col-span-2">
            <label for="name" class="text-sm font-extrabold">Nama Anda</label>
            <input id="name" name="name" type="text" autocomplete="name" required class="mt-2 min-h-12 w-full rounded-xl border border-cacao/15 bg-cream/40 px-4 text-sm text-cacao placeholder:text-cacao/40 focus:border-terracotta focus:outline-none focus:ring-4 focus:ring-terracotta/15" placeholder="Contoh: Rina">
          </div>
          <div>
            <label for="phone" class="text-sm font-extrabold">Nomor yang bisa dihubungi</label>
            <input id="phone" name="phone" type="tel" autocomplete="tel" required class="mt-2 min-h-12 w-full rounded-xl border border-cacao/15 bg-cream/40 px-4 text-sm text-cacao placeholder:text-cacao/40 focus:border-terracotta focus:outline-none focus:ring-4 focus:ring-terracotta/15" placeholder="08xx-xxxx-xxxx">
          </div>
          <div>
            <label for="date" class="text-sm font-extrabold">Tanggal dibutuhkan</label>
            <input id="date" name="date" type="date" class="mt-2 min-h-12 w-full rounded-xl border border-cacao/15 bg-cream/40 px-4 text-sm text-cacao focus:border-terracotta focus:outline-none focus:ring-4 focus:ring-terracotta/15">
          </div>
          <div>
            <label for="occasion" class="text-sm font-extrabold">Untuk momen apa?</label>
            <select id="occasion" name="occasion" class="mt-2 min-h-12 w-full rounded-xl border border-cacao/15 bg-cream/40 px-4 text-sm text-cacao focus:border-terracotta focus:outline-none focus:ring-4 focus:ring-terracotta/15">
              <option value="">Pilih salah satu</option>
              <option value="keluarga">Keluarga</option>
              <option value="syukuran">Syukuran</option>
              <option value="hantaran">Hantaran</option>
              <option value="lainnya">Lainnya</option>
            </select>
          </div>
          <div>
            <label for="quantity" class="text-sm font-extrabold">Perkiraan jumlah</label>
            <input id="quantity" name="quantity" type="text" class="mt-2 min-h-12 w-full rounded-xl border border-cacao/15 bg-cream/40 px-4 text-sm text-cacao placeholder:text-cacao/40 focus:border-terracotta focus:outline-none focus:ring-4 focus:ring-terracotta/15" placeholder="Contoh: untuk 20 orang">
          </div>
          <div class="sm:col-span-2">
            <label for="details" class="text-sm font-extrabold">Ceritakan detailnya</label>
            <textarea id="details" name="details" rows="5" required class="mt-2 w-full rounded-xl border border-cacao/15 bg-cream/40 px-4 py-3 text-sm leading-6 text-cacao placeholder:text-cacao/40 focus:border-terracotta focus:outline-none focus:ring-4 focus:ring-terracotta/15" placeholder="Tulis jenis sajian yang dibayangkan, warna, tema, atau detail lain yang penting."></textarea>
          </div>
        </div>
        <button type="submit" class="mt-7 inline-flex min-h-12 w-full items-center justify-center rounded-full bg-terracotta px-6 text-sm font-extrabold text-white transition hover:bg-cacao focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-terracotta/30">Ajukan kebutuhan kue <span class="ml-3 text-lg" aria-hidden="true">↗</span></button>
        <p class="mt-4 text-center text-xs leading-5 text-cacao/50">Dengan mengirim formulir, Anda menyetujui untuk dihubungi terkait kebutuhan pesanan ini.</p>
      </form>
    </section>
  </main>
  <footer data-nyieun-partial="footer" class="border-t border-cacao/10 bg-cacao text-cream">
    <div class="mx-auto grid max-w-7xl gap-10 px-5 py-12 sm:px-8 lg:grid-cols-[1fr_auto] lg:items-end lg:px-12">
      <div>
        <a href="index.html" class="inline-flex items-center gap-3 rounded-xl focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-saffron/30" aria-label="Kembali ke beranda">
          <span class="grid h-10 w-10 place-items-center rounded-full bg-saffron font-display text-lg text-cacao">IL</span>
          <span>
            <span class="block font-extrabold">Toko Kue Nusantara Ibu Lani</span>
            <span class="mt-1 block text-sm text-cream/55">Rasa yang mengingatkan rumah.</span>
          </span>
        </a>
      </div>
      <nav class="flex flex-wrap gap-x-6 gap-y-3 text-sm font-bold text-cream/65" aria-label="Navigasi footer">
        <a href="index.html" class="min-h-11 py-3 transition hover:text-saffron focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-saffron/30">Beranda</a>
        <a href="cerita.html" class="min-h-11 py-3 transition hover:text-saffron focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-saffron/30">Cerita</a>
        <a href="pesan.html" class="min-h-11 py-3 transition hover:text-saffron focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-saffron/30">Pesan kue</a>
      </nav>
    </div>
    <div class="mx-auto max-w-7xl border-t border-cream/10 px-5 py-5 text-xs text-cream/40 sm:px-8 lg:px-12">
      © Toko Kue Nusantara Ibu Lani
    </div>
  </footer><script id="nyieun-reveal-js">
(function(){
  function revealAll(nodes){
    nodes.forEach(function(el){el.classList.add('is-revealed')});
  }
  var nodes=document.querySelectorAll('[data-reveal]');
  if(!nodes.length){
    var targets=document.querySelectorAll('main > section, main > header, main > article, main > .grid > *, main > div > section');
    targets.forEach(function(el,i){
      if(el.hasAttribute('data-reveal')) return;
      el.setAttribute('data-reveal','');
      el.style.setProperty('--reveal-delay', Math.min(i*60,240)+'ms');
    });
    nodes=document.querySelectorAll('[data-reveal]');
  }
  if(window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches){
    revealAll(nodes);
    return;
  }
  if(!('IntersectionObserver' in window)){
    revealAll(nodes);
    return;
  }
  document.documentElement.classList.add('nyieun-motion');
  var io=new IntersectionObserver(function(entries){
    entries.forEach(function(e){
      if(e.isIntersecting){
        e.target.classList.add('is-revealed');
        io.unobserve(e.target);
      }
    });
  },{threshold:0.08,rootMargin:'0px 0px -4% 0px'});
  nodes.forEach(function(el){io.observe(el)});
  setTimeout(function(){revealAll(document.querySelectorAll('[data-reveal]:not(.is-revealed)'))},1200);
})();
</script></body>
</html>