📄
Toko Kue Manis Nusantara

UMKM
Berkas12
src
src/partials
src/styles
src/js
public
src/index.html166 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="#f8dfe3">
  <title>Manis Nusantara | Kue Pilihan dari Yogyakarta</title>
  <meta name="description" content="Manis Nusantara menghadirkan kue tradisional dan modern yang dibuat hangat di Yogyakarta, untuk bingkisan, acara, dan momen manis sehari-hari.">
  <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="Manis Nusantara">
  <meta property="og:title" content="Manis Nusantara | Kue Pilihan dari Yogyakarta">
  <meta property="og:description" content="Kue tradisional dan modern yang dibuat hangat di Yogyakarta untuk setiap momen manis Anda.">
  <meta property="og:url" content="https://www.example.com/">
  <meta property="og:image" content="https://images.unsplash.com/photo-1558301211-0d8c8ddee6ec?auto=format&amp;fit=crop&amp;w=1200&amp;q=85">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Manis Nusantara | Kue Pilihan dari Yogyakarta">
  <meta name="twitter:description" content="Kue tradisional dan modern yang dibuat hangat di Yogyakarta untuk setiap momen manis Anda.">
  <meta name="twitter:image" content="https://images.unsplash.com/photo-1558301211-0d8c8ddee6ec?auto=format&amp;fit=crop&amp;w=1200&amp;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=Cormorant+Garamond:wght@500;600;700&amp;family=Plus+Jakarta+Sans:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/styles/main.css">
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "LocalBusiness",
      "name": "Manis Nusantara",
      "url": "https://www.example.com/",
      "description": "Toko kue tradisional dan modern di Yogyakarta.",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "Jl. Contoh No. 1",
        "addressLocality": "Yogyakarta",
        "addressCountry": "ID"
      },
      "sameAs": ["https://www.instagram.com/manisnusantara/"]
    }
  </script>
</head>
<body class="min-h-screen flex flex-col bg-cream font-sans text-ink">
  {{> header}}
  <main class="flex-1 w-full">
    <section class="overflow-hidden px-5 pb-14 pt-8 sm:px-8 lg:px-12 lg:pb-20">
      <div class="mx-auto grid max-w-7xl gap-8 lg:grid-cols-12 lg:items-end">
        <div class="relative overflow-hidden rounded-[2rem] bg-pink px-7 py-12 sm:px-12 sm:py-16 lg:col-span-8 lg:min-h-[530px] lg:py-24" data-reveal>
          <div class="absolute -right-20 -top-16 h-64 w-64 rounded-full border-[22px] border-cream/65"></div>
          <div class="absolute -bottom-24 left-1/3 h-48 w-48 rounded-full bg-rose/25"></div>
          <p class="relative mb-5 text-xs font-bold uppercase tracking-[0.22em] text-rose">Dibuat untuk dibagikan</p>
          <h1 class="relative max-w-3xl font-serif text-5xl font-semibold leading-[0.9] text-ink sm:text-6xl lg:text-7xl">Kue yang membawa pulang rasa <em class="font-normal text-rose">hangat.</em></h1>
          <p class="relative mt-7 max-w-xl text-base leading-7 text-ink/75 sm:text-lg">Dari jajanan pasar kesukaan keluarga hingga dessert modern untuk perayaan kecil, Manis Nusantara meracik setiap pesanan dengan rasa yang terasa dekat.</p>
          <div class="relative mt-9 flex flex-col gap-3 sm:flex-row">
            <a class="inline-flex min-h-12 items-center justify-center gap-2 rounded-full bg-rose px-6 py-3 text-sm font-bold text-white transition hover:bg-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose" href="https://wa.me/6281234567890?text=Halo%20Manis%20Nusantara%2C%20saya%20ingin%20pesan%20kue." target="_blank" rel="noopener noreferrer">
              <svg aria-hidden="true" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 11.5a8.38 8.38 0 0 1-9.5 8.5 9.5 9.5 0 1 1 8.5-8.5Z"></path><path d="M8 9.5c.4 3 3 5.6 6 6l1-1.5-1.6-1.1-1 .7c-1.2-.6-2.1-1.5-2.7-2.7l.7-1L9.3 8.3 8 9.5Z"></path></svg>
              Pesan kue
            </a>
            <a class="inline-flex min-h-12 items-center justify-center rounded-full border border-ink/20 bg-white/50 px-6 py-3 text-sm font-bold text-ink transition hover:border-rose hover:text-rose focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose" href="/produk">Lihat produk</a>
          </div>
        </div>
        <aside class="relative rounded-[2rem] bg-ink p-7 text-cream sm:p-9 lg:col-span-4" data-reveal style="--reveal-delay: 120ms">
          <p class="text-xs font-bold uppercase tracking-[0.2em] text-pink">Pilihan hari ini</p>
          <div class="mt-12 border-b border-cream/20 pb-6">
            <p class="font-serif text-3xl leading-none">Klepon Pandan</p>
            <p class="mt-2 text-sm leading-6 text-cream/70">Kenyal, wangi pandan, dan kelapa parut segar.</p>
            <p class="mt-4 text-sm font-bold text-pink">Rp 5.000 / pcs</p>
          </div>
          <div class="py-6">
            <p class="font-serif text-3xl leading-none">Cake Ulang Tahun</p>
            <p class="mt-2 text-sm leading-6 text-cream/70">Rangkaian manis yang bisa disesuaikan untuk momen Anda.</p>
            <p class="mt-4 text-sm font-bold text-pink">Mulai Rp 250.000</p>
          </div>
          <a class="inline-flex min-h-11 items-center text-sm font-bold text-pink underline decoration-pink/40 underline-offset-4 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-pink" href="/produk">Jelajahi semua rasa →</a>
        </aside>
      </div>
    </section>

    <section class="border-y border-rose/10 bg-white px-5 py-14 sm:px-8 lg:px-12 lg:py-20">
      <div class="mx-auto grid max-w-7xl gap-10 lg:grid-cols-12 lg:gap-16">
        <div class="lg:col-span-4" data-reveal>
          <p class="text-xs font-bold uppercase tracking-[0.22em] text-rose">Rasa yang kami jaga</p>
          <h2 class="mt-3 font-serif text-4xl font-semibold leading-none text-ink sm:text-5xl">Sederhana, segar, dan penuh perhatian.</h2>
        </div>
        <div class="grid gap-7 sm:grid-cols-3 lg:col-span-8">
          <article class="border-t-2 border-pink pt-5" data-reveal style="--reveal-delay: 60ms">
            <p class="font-serif text-3xl text-rose">01</p>
            <h3 class="mt-5 text-lg font-bold">Resep yang akrab</h3>
            <p class="mt-2 text-sm leading-6 text-ink/70">Rasa tradisi yang kami olah dengan sentuhan ringan untuk dinikmati lintas generasi.</p>
          </article>
          <article class="border-t-2 border-pink pt-5" data-reveal style="--reveal-delay: 120ms">
            <p class="font-serif text-3xl text-rose">02</p>
            <h3 class="mt-5 text-lg font-bold">Dibuat saat dipesan</h3>
            <p class="mt-2 text-sm leading-6 text-ink/70">Kami menyiapkan pesanan dengan cermat agar sampai di meja Anda dalam keadaan terbaik.</p>
          </article>
          <article class="border-t-2 border-pink pt-5" data-reveal style="--reveal-delay: 180ms">
            <p class="font-serif text-3xl text-rose">03</p>
            <h3 class="mt-5 text-lg font-bold">Untuk setiap momen</h3>
            <p class="mt-2 text-sm leading-6 text-ink/70">Dari teman minum teh hingga hadiah yang berkesan, selalu ada sesuatu yang manis.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="px-5 py-14 sm:px-8 lg:px-12 lg:py-20">
      <div class="mx-auto max-w-7xl">
        <div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-end" data-reveal>
          <div>
            <p class="text-xs font-bold uppercase tracking-[0.22em] text-rose">Favorit pelanggan</p>
            <h2 class="mt-2 font-serif text-4xl font-semibold leading-none sm:text-5xl">Tiga yang paling sering dibawa pulang.</h2>
          </div>
          <a class="inline-flex min-h-11 items-center text-sm font-bold text-rose underline decoration-rose/30 underline-offset-4 hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-rose" href="/produk">Lihat 9 produk →</a>
        </div>
        <div class="mt-9 grid gap-5 md:grid-cols-3">
          <article class="rounded-[1.5rem] bg-white p-6 shadow-sm ring-1 ring-rose/10" data-reveal style="--reveal-delay: 60ms">
            <div class="flex items-center justify-between">
              <span class="rounded-full bg-pink px-3 py-1 text-xs font-bold text-rose">Paling dicari</span>
              <span class="font-serif text-2xl text-rose">01</span>
            </div>
            <h3 class="mt-10 font-serif text-3xl font-semibold">Klepon Pandan</h3>
            <p class="mt-3 text-sm leading-6 text-ink/70">Bola ketan lembut dengan ledakan gula merah dan kelapa parut.</p>
            <p class="mt-6 font-bold text-ink">Rp 5.000 / pcs</p>
          </article>
          <article class="rounded-[1.5rem] bg-ink p-6 text-cream shadow-sm" data-reveal style="--reveal-delay: 120ms">
            <div class="flex items-center justify-between">
              <span class="rounded-full bg-pink px-3 py-1 text-xs font-bold text-rose">Paling dicari</span>
              <span class="font-serif text-2xl text-pink">02</span>
            </div>
            <h3 class="mt-10 font-serif text-3xl font-semibold">Lapis Legit</h3>
            <p class="mt-3 text-sm leading-6 text-cream/70">Lapisan rempah yang padat, harum, dan cocok untuk bingkisan istimewa.</p>
            <p class="mt-6 font-bold text-pink">Rp 185.000</p>
          </article>
          <article class="rounded-[1.5rem] bg-sand p-6 shadow-sm ring-1 ring-rose/10" data-reveal style="--reveal-delay: 180ms">
            <div class="flex items-center justify-between">
              <span class="rounded-full bg-pink px-3 py-1 text-xs font-bold text-rose">Paling dicari</span>
              <span class="font-serif text-2xl text-rose">03</span>
            </div>
            <h3 class="mt-10 font-serif text-3xl font-semibold">Brownies Fudge</h3>
            <p class="mt-3 text-sm leading-6 text-ink/70">Cokelat pekat, tengah yang lembap, dan rasa manis yang pas.</p>
            <p class="mt-6 font-bold text-ink">Rp 65.000</p>
          </article>
        </div>
      </div>
    </section>

    <section class="px-5 pb-14 sm:px-8 lg:px-12 lg:pb-20">
      <div class="mx-auto grid max-w-7xl overflow-hidden rounded-[2rem] bg-rose lg:grid-cols-12" data-reveal>
        <div class="p-8 text-white sm:p-12 lg:col-span-7 lg:p-14">
          <p class="text-xs font-bold uppercase tracking-[0.22em] text-pink">Untuk acara Anda</p>
          <h2 class="mt-4 max-w-xl font-serif text-4xl font-semibold leading-none sm:text-5xl">Butuh kue untuk momen yang sudah ditandai di kalender?</h2>
          <p class="mt-5 max-w-lg text-sm leading-7 text-white/80 sm:text-base">Beri tahu kami jenis kue, jumlah, dan tanggal kebutuhan Anda. Kami bantu mencarikan pilihan yang paling pas.</p>
          <a class="mt-8 inline-flex min-h-12 items-center justify-center rounded-full bg-cream px-6 py-3 text-sm font-bold text-ink transition hover:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" href="/cara-pesan">Pelajari cara pesan</a>
        </div>
        <div class="relative min-h-52 bg-pink lg:col-span-5">
          <div class="absolute left-10 top-9 h-32 w-32 rounded-full bg-cream"></div>
          <div class="absolute bottom-0 right-10 h-44 w-44 rounded-t-full bg-ink"></div>
          <p class="absolute bottom-8 left-9 max-w-44 font-serif text-2xl leading-none text-rose">Ada rasa untuk setiap cerita.</p>
        </div>
      </div>
    </section>
  </main>
  {{> footer}}
  <script type="module" src="/js/app.js"></script>
</body>
</html>