📄
Potong Rapi Barber shop

UMKM
Berkas11
src
src/partials
src/styles
src/js
public
src/index.html131 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="#11110f">
  <title>Potong Rapi | Barbershop Modern di Surabaya</title>
  <meta name="description" content="Potong Rapi adalah barbershop modern di Surabaya untuk potongan presisi, cukur jenggot, perawatan rambut, dan booking mudah via WhatsApp.">
  <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="Potong Rapi">
  <meta property="og:title" content="Potong Rapi | Barbershop Modern di Surabaya">
  <meta property="og:description" content="Potongan presisi, suasana nyaman, dan booking mudah via WhatsApp di Surabaya.">
  <meta property="og:url" content="https://www.example.com/">
  <meta property="og:image" content="https://images.unsplash.com/photo-1622286342621-4bd786c2447c?auto=format&amp;fit=crop&amp;w=1200&amp;q=85">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Potong Rapi | Barbershop Modern di Surabaya">
  <meta name="twitter:description" content="Potongan presisi, suasana nyaman, dan booking mudah via WhatsApp di Surabaya.">
  <meta name="twitter:image" content="https://images.unsplash.com/photo-1622286342621-4bd786c2447c?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=DM+Sans:wght@400;500;600;700&amp;family=Space+Grotesk:wght@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":"BarberShop","name":"Potong Rapi","url":"https://www.example.com/","image":"https://images.unsplash.com/photo-1622286342621-4bd786c2447c?auto=format&fit=crop&w=1200&q=85","telephone":"+6281234567890","address":{"@type":"PostalAddress","streetAddress":"Jl. Contoh No. 1","addressLocality":"Surabaya","addressCountry":"ID"},"openingHoursSpecification":[{"@type":"OpeningHoursSpecification","dayOfWeek":["Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],"opens":"10:00","closes":"21:00"}],"sameAs":["https://www.instagram.com/potongrapi/"]}
  </script>
</head>
<body class="min-h-screen flex flex-col bg-ink text-stone-100 antialiased">
  {{> header}}
  <main class="flex-1 w-full">
    <section class="overflow-hidden border-b border-white/10">
      <div class="mx-auto grid max-w-7xl lg:grid-cols-[1.06fr_.94fr]">
        <div class="relative flex min-h-[580px] flex-col justify-end px-5 py-14 sm:px-8 lg:min-h-[670px] lg:px-12 lg:py-20">
          <p data-reveal class="mb-5 text-sm font-bold uppercase tracking-[0.22em] text-mustard">Barbershop · Surabaya</p>
          <h1 data-reveal style="--reveal-delay: 80ms" class="max-w-3xl font-display text-5xl font-bold leading-[0.94] tracking-[-0.06em] text-white sm:text-7xl lg:text-8xl">Rapi bukan kebetulan.</h1>
          <p data-reveal style="--reveal-delay: 160ms" class="mt-7 max-w-lg text-base leading-7 text-stone-300 sm:text-lg">Dari potongan klasik sampai gaya yang lebih berani, kami merapikan detail agar Anda keluar dengan rasa percaya diri baru.</p>
          <div data-reveal style="--reveal-delay: 240ms" class="mt-9 flex flex-wrap gap-3">
            <a class="btn-primary" href="https://wa.me/6281234567890?text=Halo%20Potong%20Rapi%2C%20saya%20ingin%20booking%20layanan." target="_blank" rel="noopener">Booking via WhatsApp</a>
            <a class="btn-secondary" href="/layanan">Lihat layanan</a>
          </div>
          <div class="mt-14 flex items-center gap-4 text-sm text-stone-400">
            <span class="h-px w-10 bg-mustard"></span>
            <span>Selasa–Minggu · 10.00–21.00</span>
          </div>
        </div>
        <div data-reveal style="--reveal-delay: 120ms" class="relative min-h-[390px] lg:min-h-0">
          <img src="https://images.unsplash.com/photo-1622286342621-4bd786c2447c?auto=format&amp;fit=crop&amp;w=1100&amp;q=85" alt="Barber sedang merapikan potongan rambut pelanggan" width="1100" height="1300" loading="lazy" decoding="async" class="absolute inset-0 h-full w-full object-cover">
          <div class="absolute inset-0 bg-gradient-to-t from-ink/60 via-transparent to-transparent"></div>
          <p class="absolute bottom-6 left-6 max-w-[190px] font-display text-lg font-semibold leading-tight text-white">Kursi yang tepat untuk gaya Anda berikutnya.</p>
        </div>
      </div>
    </section>

    <section class="mx-auto max-w-7xl px-5 py-16 sm:px-8 lg:px-12 lg:py-24">
      <div class="grid gap-10 lg:grid-cols-[.8fr_1.2fr] lg:items-end">
        <div data-reveal>
          <p class="eyebrow">Pilihan paling dicari</p>
          <h2 class="mt-3 font-display text-4xl font-bold tracking-[-0.045em] text-white sm:text-5xl">Kursi, gunting, dan perhatian pada detail.</h2>
        </div>
        <p data-reveal style="--reveal-delay: 100ms" class="max-w-2xl text-lg leading-8 text-stone-300">Tidak perlu menebak-nebak di depan cermin. Ceritakan referensi Anda, lalu barber kami akan membantu menemukan bentuk potongan yang paling pas.</p>
      </div>
      <div class="mt-10 grid gap-px overflow-hidden rounded-sm border border-white/10 bg-white/10 sm:grid-cols-2 lg:grid-cols-3">
        <article data-reveal class="bg-charcoal p-6" style="--reveal-delay: 60ms">
          <p class="text-sm font-bold uppercase tracking-widest text-mustard">01 · 45 menit</p>
          <h3 class="mt-8 font-display text-2xl font-bold text-white">Potong Pria</h3>
          <p class="mt-3 leading-7 text-stone-400">Konsultasi singkat, potong presisi, dan styling akhir yang bersih.</p>
          <p class="mt-7 text-lg font-bold text-white">Rp 35.000</p>
        </article>
        <article data-reveal class="bg-charcoal p-6" style="--reveal-delay: 120ms">
          <p class="text-sm font-bold uppercase tracking-widest text-mustard">02 · 60 menit</p>
          <h3 class="mt-8 font-display text-2xl font-bold text-white">Paket Lengkap</h3>
          <p class="mt-3 leading-7 text-stone-400">Potong, cuci rambut, cukur jenggot, dan styling untuk tampilan menyeluruh.</p>
          <p class="mt-7 text-lg font-bold text-white">Rp 85.000</p>
        </article>
        <article data-reveal class="bg-charcoal p-6 sm:col-span-2 lg:col-span-1" style="--reveal-delay: 180ms">
          <p class="text-sm font-bold uppercase tracking-widest text-mustard">03 · 45 menit</p>
          <h3 class="mt-8 font-display text-2xl font-bold text-white">Creambath</h3>
          <p class="mt-3 leading-7 text-stone-400">Jeda sejenak untuk kulit kepala dan rambut yang terasa lebih segar.</p>
          <p class="mt-7 text-lg font-bold text-white">Rp 50.000</p>
        </article>
      </div>
      <a class="mt-8 inline-flex min-h-11 items-center border-b border-mustard pb-1 text-sm font-bold text-mustard transition hover:text-yellow-200" href="/layanan">Lihat semua 6 layanan →</a>
    </section>

    <section class="border-y border-white/10 bg-charcoal">
      <div class="mx-auto grid max-w-7xl gap-10 px-5 py-16 sm:px-8 lg:grid-cols-[.85fr_1.15fr] lg:px-12 lg:py-24">
        <div data-reveal>
          <p class="eyebrow">Jadwal barberman</p>
          <h2 class="mt-3 font-display text-4xl font-bold tracking-[-0.045em] text-white">Temukan waktu yang cocok.</h2>
          <p class="mt-5 max-w-md leading-7 text-stone-400">Pilih barberman favorit Anda saat mengirim pesan booking. Ketersediaan dikonfirmasi langsung melalui WhatsApp.</p>
          <a class="btn-primary mt-8" href="https://wa.me/6281234567890?text=Halo%20Potong%20Rapi%2C%20saya%20ingin%20menanyakan%20jadwal%20barberman." target="_blank" rel="noopener">Tanya jadwal</a>
        </div>
        <div class="divide-y divide-white/10 border-y border-white/10">
          <article data-reveal class="grid grid-cols-[auto_1fr] gap-x-5 py-6" style="--reveal-delay: 60ms">
            <span class="font-display text-3xl font-bold text-mustard">01</span>
            <div><h3 class="font-display text-xl font-bold text-white">Raka</h3><p class="mt-1 text-stone-400">Selasa–Kamis · 10.00–18.00</p></div>
          </article>
          <article data-reveal class="grid grid-cols-[auto_1fr] gap-x-5 py-6" style="--reveal-delay: 120ms">
            <span class="font-display text-3xl font-bold text-mustard">02</span>
            <div><h3 class="font-display text-xl font-bold text-white">Dimas</h3><p class="mt-1 text-stone-400">Rabu–Minggu · 12.00–21.00</p></div>
          </article>
          <article data-reveal class="grid grid-cols-[auto_1fr] gap-x-5 py-6" style="--reveal-delay: 180ms">
            <span class="font-display text-3xl font-bold text-mustard">03</span>
            <div><h3 class="font-display text-xl font-bold text-white">Bima</h3><p class="mt-1 text-stone-400">Jumat–Minggu · 10.00–19.00</p></div>
          </article>
        </div>
      </div>
    </section>

    <section class="mx-auto max-w-7xl px-5 py-16 sm:px-8 lg:px-12 lg:py-24">
      <div data-reveal class="flex flex-wrap items-end justify-between gap-5">
        <div><p class="eyebrow">Hasil potongan</p><h2 class="mt-3 font-display text-4xl font-bold tracking-[-0.045em] text-white">Biar hasil yang bicara.</h2></div>
        <a class="min-h-11 py-2 text-sm font-bold text-mustard hover:text-yellow-200" href="https://www.instagram.com/potongrapi/" target="_blank" rel="noopener">Ikuti @potongrapi →</a>
      </div>
      <div class="mt-9 grid grid-cols-2 gap-3 md:grid-cols-3">
        <img data-reveal src="https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&amp;fit=crop&amp;w=700&amp;q=80" alt="Hasil potongan rambut pria pendek rapi" width="700" height="525" loading="lazy" decoding="async" class="aspect-[4/3] w-full object-cover" style="--reveal-delay: 40ms">
        <img data-reveal src="https://images.unsplash.com/photo-1517832606299-7ae9b720a186?auto=format&amp;fit=crop&amp;w=700&amp;q=80" alt="Hasil styling rambut pria modern" width="700" height="525" loading="lazy" decoding="async" class="aspect-[4/3] w-full object-cover" style="--reveal-delay: 80ms">
        <img data-reveal src="https://images.unsplash.com/photo-1599351431202-1e0f0137899a?auto=format&amp;fit=crop&amp;w=700&amp;q=80" alt="Potongan rambut fade dari samping" width="700" height="525" loading="lazy" decoding="async" class="aspect-[4/3] w-full object-cover" style="--reveal-delay: 120ms">
        <img data-reveal src="https://images.unsplash.com/photo-1585747860715-2ba37e788b70?auto=format&amp;fit=crop&amp;w=700&amp;q=80" alt="Barber merapikan rambut pelanggan" width="700" height="525" loading="lazy" decoding="async" class="aspect-[4/3] w-full object-cover" style="--reveal-delay: 160ms">
        <img data-reveal src="https://images.unsplash.com/photo-1521498542256-5aeb47ba2b36?auto=format&amp;fit=crop&amp;w=700&amp;q=80" alt="Gaya rambut pria dengan tekstur rapi" width="700" height="525" loading="lazy" decoding="async" class="aspect-[4/3] w-full object-cover" style="--reveal-delay: 200ms">
        <img data-reveal src="https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&amp;fit=crop&amp;w=700&amp;q=80&amp;sat=-40" alt="Detail hasil potongan rambut klasik" width="700" height="525" loading="lazy" decoding="async" class="aspect-[4/3] w-full object-cover" style="--reveal-delay: 240ms">
      </div>
    </section>
  </main>
  {{> footer}}
  <script type="module" src="/js/app.js"></script>
</body>
</html>