Code Studio: Landing Page

Buat landing page e-commerce bernama “Kreativa Market” yang menjual produk digital (template, preset, course, asset UI, font, stock content) dan produk industri kreatif (merch, art print, handmade, apparel, stationery).

Teknologi

1 file index.html

TailwindCSS CDN

Tanpa framework (no React/Vue)

JS vanilla secukupnya: mobile menu, search, filter kategori, add-to-cart UI (dummy), modal quick view, toast notif

Gaya UI

Clean, modern, premium, banyak whitespace

Palet: slate netral + aksen indigo/emerald (atau amber)

Card border halus, rounded besar, shadow lembut

Micro-interactions: hover lift/scale, transition halus, button states, focus states

Aksesibilitas: aria-label, focus ring, kontras aman

Struktur landing (urut)

Header sticky

Logo teks “Kreativa Market”

Menu: Digital Products, Creative Goods, Bundles, Deals, Reviews, FAQ

Search (desktop), icon search (mobile)

CTA: “Login” (opsional) + “Cart (0)”

Hamburger menu (mobile toggle)

Hero

Headline kuat: “Tempat Belanja Produk Digital & Kreatif yang Siap Pakai”

Subheadline 1–2 kalimat (value: instan, kualitas kurasi, lisensi jelas)

CTA utama: “Shop Now”

CTA sekunder: “Explore Bundles”

Trust badges: “Instant Download”, “Secure Checkout”, “Creator Verified”

Hero visual placeholder gradient + mockup card

Featured Categories

Grid 6 kategori: UI Kits, Templates, Presets, Courses, Art Prints, Merch

Klik kategori melakukan filter produk (JS)

Best Sellers (Product Grid)

Minimal 12 produk dummy (judul realistis)

Tiap card: image placeholder, kategori badge, rating, harga, diskon (sebagian), tombol “Add to Cart”

Klik card buka Quick View modal (detail singkat + tombol add)

Support “Digital” vs “Physical” label

Bundles / Deals

Section bundle card 3 item, highlight hemat

CTA “Get Bundle”

Why Choose Us

4–6 benefit (lisensi jelas, kurasi, support, refund policy untuk digital sesuai ketentuan)

Reviews / Testimonials

6 review card (nama, role, rating, komentar)

Tambahkan logo creator/brand placeholder

CTA Subscribe

Background gradient

Copy: “Dapatkan diskon & drop produk baru tiap minggu”

Form email + tombol subscribe

Teks privasi singkat

Footer

Kolom: About, Shop, Support, Social

Link: Privacy Policy, Terms, Refund Policy

Fitur JS

Toggle mobile menu

Search produk (filter nama/kategori)

Filter kategori (chips)

Load more (tampilkan 8 dulu, tambah 4)

Add-to-cart dummy: update angka cart + toast “Added”

Quick view modal (open/close, ESC to close)

Output: berikan kode index.html lengkap + JS di bawah. Jangan gunakan library eksternal selain Tailwind CDN.

Index.html

<!doctype html>

<head>

<title>Kreativa Market — Produk Digital & Industri Kreatif</title>

</head>

Lewati ke konten utama

</a>

<div id="toast"

class="pointer-events-none fixed top-4 right-4 z-[100] hidden max-w-sm rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-lg">

<p id="toastTitle" class="text-sm font-extrabold text-slate-900">Added to cart</p>

<p id="toastMsg" class="mt-0.5 text-sm text-slate-600">Item berhasil ditambahkan.</p>

</div>

</svg>

</span>

<span>Kreativa Market</span>

</a>

<a href="#digital" class="text-sm font-medium text-slate-700 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Digital Products</a>

<a href="#creative" class="text-sm font-medium text-slate-700 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Creative Goods</a>

<a href="#bundles" class="text-sm font-medium text-slate-700 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Bundles</a>

<a href="#deals" class="text-sm font-medium text-slate-700 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Deals</a>

<a href="#reviews" class="text-sm font-medium text-slate-700 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Reviews</a>

</nav>

<label for="searchDesktop" class="sr-only">Cari produk</label>

<input id="searchDesktop" type="search" placeholder="Cari template, preset, merch…"

class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-2.5 pr-10 text-sm text-slate-900 shadow-sm outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-600/30" />

</div>

</a>

<button id="cartBtn" type="button"

class="inline-flex items-center justify-center rounded-2xl bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"

aria-label="Buka keranjang">

Cart (<span id="cartCount">0</span>)

</button>

</div>

<button id="mobileSearchBtn" type="button"

class="inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white p-2.5 text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"

aria-label="Buka pencarian"

aria-controls="mobileSearch"

aria-expanded="false">

</button>

<button id="mobileMenuBtn" type="button"

aria-label="Buka menu"

aria-controls="mobileMenu"

aria-expanded="false">

</svg>

</svg>

</button>

</div>

<label for="searchMobile" class="sr-only">Cari produk</label>

<input id="searchMobile" type="search" placeholder="Cari produk…"

class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-600/30" />

</div>

<a href="#digital" class="rounded-xl px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">Digital Products</a>

<a href="#creative" class="rounded-xl px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">Creative Goods</a>

<a href="#bundles" class="rounded-xl px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">Bundles</a>

<a href="#deals" class="rounded-xl px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">Deals</a>

<a href="#reviews" class="rounded-xl px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">Reviews</a>

</div>

<a href="#"

class="inline-flex w-full items-center justify-center rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">

</a>

<button type="button"

class="inline-flex w-full items-center justify-center rounded-xl bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"

aria-label="Buka keranjang">

Cart (<span id="cartCountMobile">0</span>)

</button>

</div>

</header>

</div>

<div>

Kurasi premium • Lisensi jelas • Siap pakai

</p>

Tempat Belanja Produk Digital & Kreatif yang

<span class="bg-gradient-to-r from-indigo-600 to-emerald-600 bg-clip-text text-transparent">Siap Pakai</span>

</h1>

Temukan template, preset, UI assets, font, hingga merch & art print dari kreator terverifikasi. Instant download untuk produk digital, dan pengiriman aman untuk produk fisik.

</p>

<a href="#shop"

class="inline-flex items-center justify-center rounded-2xl bg-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">

Shop Now

</a>

<a href="#bundles"

class="inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white px-5 py-3 text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">

Explore Bundles

</a>

</div>

<p class="text-sm font-extrabold text-slate-900">Instant Download</p>

<p class="mt-1 text-xs text-slate-600">Produk digital langsung bisa dipakai</p>

</div>

<p class="text-sm font-extrabold text-slate-900">Secure Checkout</p>

<p class="mt-1 text-xs text-slate-600">Pembayaran aman & terenkripsi</p>

</div>

<p class="text-sm font-extrabold text-slate-900">Creator Verified</p>

<p class="mt-1 text-xs text-slate-600">Kurasi kualitas & lisensi jelas</p>

</div>

<div class="absolute inset-0 opacity-20" aria-hidden="true"

style="background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0); background-size: 22px 22px;"></div>

</div>

</div>

</div>

</div>

</div>

</div>

<p class="text-sm font-extrabold text-slate-900">Kurasi produk kreatif, hasilnya cepat</p>

<p class="mt-1 text-sm text-slate-600">Bundle hemat, lisensi jelas, dan produk fisik dibuat dengan kualitas premium.</p>

</div>

<p class="text-xs text-slate-600">dari 2.300+ pembeli</p>

</div>

</section>

<div>

<h2 class="text-2xl font-extrabold tracking-tight text-slate-900">Featured Categories</h2>

<p class="mt-2 text-slate-600">Klik kategori untuk memfilter produk di bawah.</p>

</div>

<button type="button" data-filter="Templates" class="chip">Templates</button>

<button type="button" data-filter="Presets" class="chip">Presets</button>

<button type="button" data-filter="Courses" class="chip">Courses</button>

<button type="button" data-filter="Art Prints" class="chip">Art Prints</button>

<button type="button" data-filter="Merch" class="chip">Merch</button>

</div>

<div>

<p class="text-sm text-slate-600">Komponen siap pakai</p>

</div>

</button>

<div>

<p class="font-extrabold text-slate-900">Templates</p>

<p class="text-sm text-slate-600">Notion, pitch deck, invoice</p>

</div>

</button>

<div>

<p class="font-extrabold text-slate-900">Presets</p>

<p class="text-sm text-slate-600">Foto, video, color grading</p>

</div>

</button>

<div>

<p class="font-extrabold text-slate-900">Courses</p>

<p class="text-sm text-slate-600">Belajar cepat + praktik</p>

</div>

</button>

<div>

<p class="font-extrabold text-slate-900">Art Prints</p>

<p class="text-sm text-slate-600">Cetak premium & limited</p>

</div>

</button>

<div>

<p class="font-extrabold text-slate-900">Merch</p>

<p class="text-sm text-slate-600">Apparel, stationery, handmade</p>

</div>

</button>

</div>

</section>

<div>

<h2 class="text-2xl font-extrabold tracking-tight text-slate-900">Best Sellers</h2>

<p class="mt-2 text-slate-600">Produk terlaris — digital & fisik, siap bantu kamu produksi lebih cepat.</p>

</div>

</div>

</button>

<span class="badge badge-slate">Digital</span>

</div>

</div>

<h3 class="mt-3 text-base font-extrabold text-slate-900 line-clamp-2">Aurora UI Kit — Mobile Components Pack</h3>

<p class="mt-2 text-sm text-slate-600 line-clamp-2">120+ komponen, auto-layout friendly, cocok untuk MVP cepat.</p>

<div>

<p class="text-xs text-slate-500">812 reviews • 2.1k sales</p>

</div>

</div>

</article>

</button>

<span class="badge badge-emerald">Templates</span>

<span class="badge badge-slate">Digital</span>

</div>

</div>

<h3 class="mt-3 text-base font-extrabold text-slate-900 line-clamp-2">Notion Creator OS — Project & Content Planner</h3>

<p class="mt-2 text-sm text-slate-600 line-clamp-2">Dashboard project, kalender konten, KPI tracker, SOP & goals.</p>

<div>

<p class="text-xs text-slate-500">540 reviews • 1.4k sales</p>

</div>

</div>

</article>

</button>

<span class="badge badge-slate2">Presets</span>

<span class="badge badge-slate">Digital</span>

</div>

</div>

<h3 class="mt-3 text-base font-extrabold text-slate-900 line-clamp-2">Cinematic Lightroom Presets — Street Night Pack</h3>

<p class="mt-2 text-sm text-slate-600 line-clamp-2">12 preset + guide exposure untuk tone cinematic yang konsisten.</p>

<div>

<p class="text-xs text-slate-500">392 reviews • 980 sales</p>

</div>

</div>

</article>

</button>

<span class="badge badge-indigo">Courses</span>

<span class="badge badge-slate">Digital</span>

</div>

</div>

<h3 class="mt-3 text-base font-extrabold text-slate-900 line-clamp-2">Mini Course: Brand Identity for Creators</h3>

<p class="mt-2 text-sm text-slate-600 line-clamp-2">3 jam materi + workbook: logo, tone, visual system, guideline.</p>

<div>

<p class="text-xs text-slate-500">228 reviews • 650 sales</p>

</div>

</div>

</article>

</button>

<span class="badge badge-emerald">Art Prints</span>

<span class="badge badge-slate">Physical</span>

</div>

</div>

<h3 class="mt-3 text-base font-extrabold text-slate-900 line-clamp-2">Gallery Art Print — ‘Midnight Bloom’ A3</h3>

<p class="mt-2 text-sm text-slate-600 line-clamp-2">Kertas premium, warna tajam, cocok untuk studio & ruang kerja.</p>

<div>

<p class="text-xs text-slate-500">156 reviews • 410 sales</p>

</div>

</div>

</article>

</button>

<span class="badge badge-slate2">Merch</span>

<span class="badge badge-slate">Physical</span>

</div>

</div>

<h3 class="mt-3 text-base font-extrabold text-slate-900 line-clamp-2">Minimal Merch Tee — ‘Create Daily’</h3>

<p class="mt-2 text-sm text-slate-600 line-clamp-2">Katun combed 24s, sablon halus, cutting modern fit.</p>

<div>

<p class="text-xs text-slate-500">310 reviews • 900 sales</p>

</div>

</div>

</article>

</button>

<span class="badge badge-slate">Digital</span>

</div>

</div>

<h3 class="mt-3 text-base font-extrabold text-slate-900 line-clamp-2">Font Pack: Modern Sans + Italic Set</h3>

<p class="mt-2 text-sm text-slate-600 line-clamp-2">Lisensi untuk project kreatif, lengkap weight + italic.</p>

<div>

<p class="text-xs text-slate-500">118 reviews • 320 sales</p>

</div>

</div>

</article>

</button>

<span class="badge badge-emerald">Templates</span>

<span class="badge badge-slate">Digital</span>

</div>

</div>

<h3 class="mt-3 text-base font-extrabold text-slate-900 line-clamp-2">Stock Content Pack — 80 B-Roll Clips (4K)</h3>

<p class="mt-2 text-sm text-slate-600 line-clamp-2">B-roll cinematic untuk ads, reels, dan product showcase.</p>

<div>

<p class="text-xs text-slate-500">86 reviews • 210 sales</p>

</div>

</div>

</article>

</button>

<span class="badge badge-emerald">Templates</span>

<span class="badge badge-slate">Digital</span>

</div>

</div>

<h3 class="mt-3 text-base font-extrabold text-slate-900 line-clamp-2">Invoice & Proposal Templates — Creative Studio Set</h3>

<p class="mt-2 text-sm text-slate-600 line-clamp-2">Template rapi untuk deal klien: invoice, proposal, scope, brief.</p>

<div>

<p class="text-xs text-slate-500">250 reviews • 1.0k sales</p>

</div>

</div>

</article>

</button>

<span class="badge badge-slate2">Merch</span>

<span class="badge badge-slate">Physical</span>

</div>

</div>

<h3 class="mt-3 text-base font-extrabold text-slate-900 line-clamp-2">Handmade Stationery Set — ‘Studio Notes’</h3>

<p class="mt-2 text-sm text-slate-600 line-clamp-2">Notebook, sticker sheet, dan postcard — crafted dengan detail.</p>

<div>

<p class="text-xs text-slate-500">140 reviews • 380 sales</p>

</div>

</div>

</article>

</button>

<span class="badge badge-indigo">Courses</span>

<span class="badge badge-slate">Digital</span>

</div>

</div>

<h3 class="mt-3 text-base font-extrabold text-slate-900 line-clamp-2">Course: Motion Design Basics for Ads</h3>

<p class="mt-2 text-sm text-slate-600 line-clamp-2">Dari layout sampai animasi: template project + checklist eksport.</p>

<div>

<p class="text-xs text-slate-500">97 reviews • 260 sales</p>

</div>

</div>

</article>

</button>

<span class="badge badge-emerald">Art Prints</span>

<span class="badge badge-slate">Physical</span>

</div>

</div>

<h3 class="mt-3 text-base font-extrabold text-slate-900 line-clamp-2">Art Print Limited — ‘Neon City’ A2</h3>

<p class="mt-2 text-sm text-slate-600 line-clamp-2">Limited run, tinta archival, cocok untuk koleksi.</p>

<div>

<p class="text-xs text-slate-500">62 reviews • 120 sales</p>

</div>

</div>

</article>

</div>

<p class="text-base font-extrabold text-slate-900">Produk tidak ditemukan.</p>

<p class="mt-2 text-slate-600">Coba kata kunci lain atau pilih kategori yang berbeda.</p>

<button id="resetFilters" type="button"

class="mt-5 inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white px-5 py-3 text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">

Reset filter

</button>

</div>

<button id="loadMoreBtn" type="button"

class="inline-flex items-center justify-center rounded-2xl bg-slate-900 px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">

</button>

</div>

<div class="sr-only" id="digital">Digital products section</div>

<div class="sr-only" id="creative">Creative goods section</div>

</div>

</section>

<div>

<h2 class="text-2xl font-extrabold tracking-tight text-slate-900">Bundles</h2>

<p class="mt-2 text-slate-600">Paket hemat untuk produksi lebih cepat.</p>

</div>

<a href="#shop"

Explore all

</a>

</div>

<span class="text-xs text-slate-500">Digital Bundle</span>

</div>

<h3 class="mt-3 text-lg font-extrabold text-slate-900">Creator Launch Kit</h3>

<p class="mt-2 text-sm text-slate-600">Template pitch deck + brand guide + content planner (Notion).</p>

<div>

</div>

<button type="button" class="btn-primary" aria-label="Ambil bundle Creator Launch Kit">Get Bundle</button>

</div>

</article>

<span class="text-xs text-slate-500">Digital Bundle</span>

</div>

<h3 class="mt-3 text-lg font-extrabold text-slate-900">UI + Font Essentials</h3>

<p class="mt-2 text-sm text-slate-600">UI kit mobile + font pack + icons starter untuk produk digital.</p>

<div>

</div>

<button type="button" class="btn-primary" aria-label="Ambil bundle UI + Font Essentials">Get Bundle</button>

</div>

</article>

<span class="text-xs text-slate-500">Mixed Bundle</span>

</div>

<h3 class="mt-3 text-lg font-extrabold text-slate-900">Studio Desk Set</h3>

<p class="mt-2 text-sm text-slate-600">Stationery set + art print A3 + preset pack untuk konten studio.</p>

<div>

</div>

<button type="button" class="btn-primary" aria-label="Ambil bundle Studio Desk Set">Get Bundle</button>

</div>

</article>

</div>

</section>

<h2 class="text-2xl font-extrabold tracking-tight text-slate-900">Why Choose Us</h2>

<p class="mt-2 text-slate-600">Fokus ke kualitas, lisensi, dan pengalaman belanja yang aman.</p>

</div>

<div>

<p class="font-extrabold text-slate-900">Lisensi jelas</p>

<p class="mt-1 text-sm text-slate-600">Keterangan penggunaan untuk personal/commercial lebih transparan.</p>

</div>

<div>

<p class="font-extrabold text-slate-900">Instant download</p>

<p class="mt-1 text-sm text-slate-600">File digital tersedia otomatis setelah pembayaran berhasil.</p>

</div>

<div>

<p class="font-extrabold text-slate-900">Kurasi premium</p>

<p class="mt-1 text-sm text-slate-600">Produk terpilih dengan standar kualitas visual & usability.</p>

</div>

<div>

<p class="font-extrabold text-slate-900">Checkout aman</p>

<p class="mt-1 text-sm text-slate-600">Proteksi transaksi dan pengalaman belanja yang nyaman.</p>

</div>

<div>

<p class="font-extrabold text-slate-900">Support responsif</p>

<p class="mt-1 text-sm text-slate-600">Bantuan untuk akses file, lisensi, dan pengiriman produk fisik.</p>

</div>

<div>

<p class="font-extrabold text-slate-900">Refund policy (digital)</p>

<p class="mt-1 text-sm text-slate-600">Refund untuk digital mengikuti ketentuan: file rusak/tidak sesuai deskripsi.</p>

</div>

</section>

<h2 class="text-2xl font-extrabold tracking-tight text-slate-900">Reviews</h2>

<p class="mt-2 text-slate-600">Cerita dari kreator dan tim yang memakai produk kami.</p>

</div>

<p class="font-extrabold text-slate-900">Nadia R.</p>

<p class="text-xs text-slate-600">UI Designer</p>

</figcaption>

</div>

<blockquote class="mt-3 text-sm text-slate-700 leading-relaxed">“UI kit-nya rapi dan konsisten. Aku bisa bikin landing page MVP jauh lebih cepat.”</blockquote>

</figure>

<p class="text-xs text-slate-600">Content Creator</p>

</figcaption>

</div>

<blockquote class="mt-3 text-sm text-slate-700 leading-relaxed">“Preset pack bikin warna kontenku konsisten. Editing jadi lebih hemat waktu.”</blockquote>

</figure>

<p class="text-xs text-slate-600">Product Marketer</p>

</figcaption>

</div>

<blockquote class="mt-3 text-sm text-slate-700 leading-relaxed">“Template proposalnya profesional. Klien langsung paham scope & deliverables.”</blockquote>

</figure>

<p class="font-extrabold text-slate-900">Kevin T.</p>

<p class="text-xs text-slate-600">Freelance Designer</p>

</figcaption>

</div>

<blockquote class="mt-3 text-sm text-slate-700 leading-relaxed">“B-roll pack-nya berguna untuk iklan. Tinggal tambah overlay dan selesai.”</blockquote>

</figure>

<p class="font-extrabold text-slate-900">Sinta A.</p>

<p class="text-xs text-slate-600">Studio Owner</p>

</figcaption>

</div>

<blockquote class="mt-3 text-sm text-slate-700 leading-relaxed">“Art print-nya premium. Packaging rapi dan cocok buat hadiah.”</blockquote>

</figure>

<p class="font-extrabold text-slate-900">Dimas P.</p>

<p class="text-xs text-slate-600">Brand Lead</p>

</figcaption>

</div>

<blockquote class="mt-3 text-sm text-slate-700 leading-relaxed">“Course-nya to the point. Banyak checklist yang bisa langsung dipakai tim.”</blockquote>

</figure>

</div>

</section>

<div aria-hidden="true" class="absolute inset-0 opacity-20"

style="background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0); background-size: 22px 22px;"></div>

<h2 class="text-2xl font-extrabold tracking-tight sm:text-3xl">Dapatkan diskon & drop produk baru tiap minggu</h2>

<p class="mt-3 text-white/90 leading-relaxed">Satu email per minggu. Promo bundle, rilis terbaru, dan rekomendasi kurasi premium.</p>

<p class="text-sm font-semibold">✅ Early access</p>

<p class="mt-1 text-sm text-white/85">Rilis baru lebih dulu</p>

</div>

<p class="text-sm font-semibold">✅ Deal mingguan</p>

<p class="mt-1 text-sm text-white/85">Diskon terkurasi</p>

</div>

<label for="email" class="block text-sm font-semibold text-slate-900">Email</label>

<input id="email" name="email" type="email" required

class="mt-2 w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-600/30"

placeholder="nama@email.com" />

<button type="submit"

class="mt-4 inline-flex w-full items-center justify-center rounded-2xl bg-slate-900 px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">

</button>

<p class="mt-3 text-xs text-slate-600">Kami tidak membagikan data. Kamu bisa unsubscribe kapan saja.</p>

</form>

</div>

</section>

<p class="mt-2 text-slate-600">Pertanyaan yang sering ditanyakan sebelum checkout.</p>

</div>

Bagaimana cara mendapatkan produk digital setelah bayar?

</summary>

Setelah pembayaran berhasil, kamu akan menerima link unduhan (instant download) dan email konfirmasi.

</p>

</details>

Apakah lisensi untuk commercial use tersedia?

</summary>

Tiap produk mencantumkan ketentuan lisensi (personal/commercial). Jika butuh lisensi khusus, hubungi support.

</p>

</details>

Bagaimana kebijakan refund untuk produk digital?

</summary>

Refund untuk digital berlaku jika file rusak/tidak bisa dibuka atau tidak sesuai deskripsi. Bukti diperlukan.

</p>

</details>

Pengiriman produk fisik berapa lama?

</summary>

Umumnya 2–5 hari kerja tergantung lokasi. Produk handmade bisa memerlukan waktu produksi tambahan.

</p>

</details>

</div>

</section>

</main>

<div>

<p class="text-base font-extrabold text-slate-900">Kreativa Market</p>

Marketplace kurasi untuk produk digital & industri kreatif: cepat dipakai, kualitas premium, lisensi jelas.

</p>

</div>

<div>

<li><a href="#shop" class="hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Best Sellers</a></li>

<li><a href="#bundles" class="hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Bundles</a></li>

<li><a href="#deals" class="hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Deals</a></li>

</ul>

</div>

<div>

<p class="text-sm font-extrabold text-slate-900">Support</p>

<li><a href="#" class="hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Privacy Policy</a></li>

<li><a href="#" class="hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Terms</a></li>

<li><a href="#" class="hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Refund Policy</a></li>

</ul>

</div>

<div>

<p class="text-sm font-extrabold text-slate-900">Social</p>

</a>

</a>

</a>

</div>

Cart (<span id="cartCountFooter">0</span>)

</button>

</div>

<p class="text-sm text-slate-600">Made for creators • Built with Tailwind CDN</p>

</div>

</footer>

<div role="dialog" aria-modal="true" aria-label="Quick view produk"

class="w-full overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl">

<p class="text-xs font-semibold text-slate-500">Quick View</p>

<h3 id="modalTitle" class="mt-1 text-base font-extrabold text-slate-900 truncate">Product Title</h3>

</div>

<button id="modalClose" type="button"

class="inline-flex h-10 w-10 items-center justify-center rounded-2xl border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:bg-slate-50 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"

aria-label="Tutup modal">

</button>

</div>

</div>

<span id="modalCategory" class="badge badge-indigo">Category</span>

<span id="modalType" class="badge badge-slate">Digital</span>

</div>

Deskripsi produk akan muncul di sini.

</p>

<div>

<p id="modalMeta" class="mt-1 text-xs text-slate-500">⭐ 0 • 0 reviews</p>

</div>

Add to Cart

</button>

</div>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> File siap pakai + panduan singkat</li>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Lisensi sesuai ketentuan produk</li>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Support untuk akses file/pengiriman</li>

</ul>

</div>

Catatan: Produk digital bersifat non-returnable kecuali file rusak/tidak sesuai deskripsi (lihat Refund Policy).

</p>

</div>

(function () {

// Helpers

const $ = (sel, root = document) => root.querySelector(sel);

const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));

const rupiah = (n) => new Intl.NumberFormat('id-ID').format(n);

// Elements

const mobileMenuBtn = $('#mobileMenuBtn');

const mobileMenu = $('#mobileMenu');

const iconOpen = $('#iconOpen');

const iconClose = $('#iconClose');

const mobileSearchBtn = $('#mobileSearchBtn');

const mobileSearch = $('#mobileSearch');

const searchDesktop = $('#searchDesktop');

const searchMobile = $('#searchMobile');

const chips = $$('.chip');

const categoryCards = $$('.category-card');

const productCards = $$('.product-card');

const loadMoreBtn = $('#loadMoreBtn');

const emptyState = $('#emptyState');

const resetBtn = $('#resetFilters');

const resultCount = $('#resultCount');

const cartCount = $('#cartCount');

const cartCountMobile = $('#cartCountMobile');

const cartCountFooter = $('#cartCountFooter');

const toast = $('#toast');

const toastTitle = $('#toastTitle');

const toastMsg = $('#toastMsg');

// Modal

const modalOverlay = $('#modalOverlay');

const modalClose = $('#modalClose');

const modalTitle = $('#modalTitle');

const modalThumb = $('#modalThumb');

const modalCategory = $('#modalCategory');

const modalType = $('#modalType');

const modalDiscount = $('#modalDiscount');

const modalDesc = $('#modalDesc');

const modalOldPrice = $('#modalOldPrice');

const modalPrice = $('#modalPrice');

const modalMeta = $('#modalMeta');

const modalAddBtn = $('#modalAddBtn');

// UI: apply reusable classes (no custom CSS)

chips.forEach(btn => {

btn.className = "chip inline-flex items-center rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2";

});

setChipActive('all');

categoryCards.forEach(btn => {

btn.className = "category-card group w-full rounded-3xl border border-slate-200 bg-white p-5 text-left shadow-sm transition hover:-translate-y-0.5 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 flex items-center gap-4";

});

const btnAdds = $$('.btn-add');

btnAdds.forEach(b => {

b.className = "btn-add inline-flex items-center justify-center rounded-2xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2";

});

const btnPrimaryClass = "btn-primary inline-flex items-center justify-center rounded-2xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2";

$$('.btn-primary').forEach(b => b.className = btnPrimaryClass);

$$('.product-card').forEach(card => {

card.classList.add('group','rounded-3xl','border','border-slate-200','bg-white','shadow-sm','overflow-hidden','transition','hover:-translate-y-0.5','hover:shadow-md');

});

$$('.product-thumb').forEach(t => t.classList.add('h-44','w-full','opacity-90'));

$$('.product-open').forEach(btn => {

btn.classList.add('block','w-full','text-left','focus:outline-none','focus:ring-2','focus:ring-indigo-600','focus:ring-offset-2');

});

// badges

const badgeBase = ['inline-flex','items-center','rounded-full','px-2.5','py-1','text-xs','font-semibold'];

$$('.badge').forEach(b => b.classList.add(...badgeBase));

$$('.badge-indigo').forEach(b => b.classList.add('bg-indigo-50','text-indigo-700'));

$$('.badge-emerald').forEach(b => b.classList.add('bg-emerald-50','text-emerald-700'));

$$('.badge-slate').forEach(b => b.classList.add('bg-slate-100','text-slate-700'));

$$('.badge-slate2').forEach(b => b.classList.add('bg-slate-100','text-slate-700'));

// bundle cards

$$('.bundle-card').forEach(c => c.classList.add('rounded-3xl','border','border-slate-200','bg-white','shadow-sm','overflow-hidden','transition','hover:-translate-y-0.5','hover:shadow-md'));

$$('.bundle-top').forEach(t => t.classList.add('h-44','w-full','opacity-90'));

// feature cards

$$('.feature-card').forEach(c => c.classList.add('rounded-3xl','border','border-slate-200','bg-white','p-6','shadow-sm','transition','hover:shadow-md','flex','items-start','gap-4'));

$$('.icon-badge').forEach(i => i.classList.add('inline-flex','h-12','w-12','items-center','justify-center','rounded-2xl','font-extrabold'));

// review cards

$$('.review-card').forEach(c => c.classList.add('rounded-3xl','border','border-slate-200','bg-white','p-6','shadow-sm','transition','hover:shadow-md'));

// faq cards

$$('.faq-card').forEach(c => c.classList.add('rounded-3xl','border','border-slate-200','bg-white','p-6','shadow-sm','transition','hover:shadow-md'));

// State

let visibleLimit = 8;

let activeCategory = 'all';

let activeQuery = '';

let cart = 0;

let currentModalProductId = null;

function normalize(s) {

return (s || '').toString().toLowerCase().trim();

}

function setMenu(open) {

mobileMenu.classList.toggle('hidden', !open);

iconOpen.classList.toggle('hidden', open);

iconClose.classList.toggle('hidden', !open);

mobileMenuBtn.setAttribute('aria-expanded', open ? 'true' : 'false');

mobileMenuBtn.setAttribute('aria-label', open ? 'Tutup menu' : 'Buka menu');

}

function setSearch(open) {

mobileSearch.classList.toggle('hidden', !open);

mobileSearchBtn.setAttribute('aria-expanded', open ? 'true' : 'false');

mobileSearchBtn.setAttribute('aria-label', open ? 'Tutup pencarian' : 'Buka pencarian');

if (open) setTimeout(() => searchMobile && searchMobile.focus(), 50);

}

function setChipActive(filter) {

chips.forEach((b) => {

const isActive = b.dataset.filter === filter;

b.setAttribute('aria-selected', isActive ? 'true' : 'false');

b.className = isActive

? "chip inline-flex items-center rounded-full border border-indigo-200 bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"

: "chip inline-flex items-center rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2";

});

}

function matchesFilters(card) {

const cat = card.dataset.category || '';

const title = card.dataset.title || '';

const type = card.dataset.type || '';

const query = activeQuery;

const catOk = (activeCategory === 'all') || (cat === activeCategory);

const qOk = !query || normalize(title).includes(query) || normalize(cat).includes(query) || normalize(type).includes(query);

return catOk && qOk;

}

function applyFilters() {

const matched = productCards.filter(matchesFilters);

let shown = 0;

productCards.forEach(card => {

const ok = matched.includes(card);

if (!ok) {

card.classList.add('hidden');

return;

}

shown++;

card.classList.toggle('hidden', shown > visibleLimit);

});

const anyVisible = productCards.some(c => !c.classList.contains('hidden'));

emptyState.classList.toggle('hidden', anyVisible);

resultCount.textContent = matched.length ? `${matched.length} produk ditemukan` : `0 produk ditemukan`;

const canLoadMore = matched.length > visibleLimit;

loadMoreBtn.classList.toggle('hidden', !canLoadMore);

}

function resetAll() {

activeCategory = 'all';

activeQuery = '';

visibleLimit = 8;

setChipActive('all');

if (searchDesktop) searchDesktop.value = '';

if (searchMobile) searchMobile.value = '';

applyFilters();

}

function updateCartUI() {

cartCount.textContent = String(cart);

cartCountMobile.textContent = String(cart);

cartCountFooter.textContent = String(cart);

}

let toastTimer = null;

function showToast(title, msg) {

toastTitle.textContent = title;

toastMsg.textContent = msg;

toast.classList.remove('hidden');

toast.classList.add('animate-[fadeIn_150ms_ease-out]');

clearTimeout(toastTimer);

toastTimer = setTimeout(() => {

toast.classList.add('hidden');

toast.classList.remove('animate-[fadeIn_150ms_ease-out]');

}, 1800);

}

function getProductById(id) {

return productCards.find(c => c.dataset.id === id);

}

function openModal(productCard) {

if (!productCard) return;

const id = productCard.dataset.id;

currentModalProductId = id;

const title = productCard.dataset.title || 'Product';

const category = productCard.dataset.category || 'Category';

const type = productCard.dataset.type || 'Digital';

const price = parseInt(productCard.dataset.price || '0', 10);

const rating = productCard.dataset.rating || '4.8';

const reviews = productCard.dataset.reviews || '0';

const discount = parseInt(productCard.dataset.discount || '0', 10);

modalTitle.textContent = title;

modalCategory.textContent = category;

modalType.textContent = type;

// thumb gradient: reuse card thumb class by reading its class list

const thumb = productCard.querySelector('.product-thumb');

modalThumb.className = thumb ? thumb.className.replace('h-44', 'h-full') : "h-full w-full bg-gradient-to-br from-indigo-600 via-indigo-500 to-emerald-500 opacity-90";

// description (simple)

const short = productCard.querySelector('p.text-sm')?.textContent || 'Produk kurasi premium, siap pakai.';

modalDesc.textContent = short + " Cocok untuk mempercepat workflow kreatifmu dengan kualitas yang konsisten.";

// price display

if (discount > 0) {

const oldP = Math.round(price / (1 - discount / 100));

modalOldPrice.textContent = "Rp " + rupiah(oldP);

modalOldPrice.classList.remove('hidden');

modalDiscount.textContent = "-" + discount + "%";

modalDiscount.classList.remove('hidden');

} else {

modalOldPrice.classList.add('hidden');

modalDiscount.classList.add('hidden');

}

modalPrice.textContent = "Rp " + rupiah(price);

modalMeta.textContent = `⭐ ${rating} • ${reviews} reviews`;

// Show modal

modalOverlay.classList.remove('hidden');

document.body.classList.add('overflow-hidden');

// focus close

setTimeout(() => modalClose.focus(), 50);

}

function closeModal() {

modalOverlay.classList.add('hidden');

document.body.classList.remove('overflow-hidden');

currentModalProductId = null;

}

// Events

mobileMenuBtn && mobileMenuBtn.addEventListener('click', () => {

const open = mobileMenu.classList.contains('hidden');

setMenu(open);

});

mobileSearchBtn && mobileSearchBtn.addEventListener('click', () => {

const open = mobileSearch.classList.contains('hidden');

setSearch(open);

});

// Close on escape

document.addEventListener('keydown', (e) => {

if (e.key === 'Escape') {

setMenu(false);

setSearch(false);

closeModal();

}

});

// Close menu on click link

$$('#mobileMenu a[href^="#"]').forEach(a => a.addEventListener('click', () => setMenu(false)));

// Chips filter

chips.forEach(btn => {

btn.addEventListener('click', () => {

activeCategory = btn.dataset.filter || 'all';

visibleLimit = 8;

setChipActive(activeCategory);

applyFilters();

const shop = document.getElementById('shop');

if (shop) shop.scrollIntoView({ behavior: 'smooth', block: 'start' });

});

// Category cards behave like chips

categoryCards.forEach(btn => {

btn.addEventListener('click', () => {

const filter = btn.dataset.filter || 'all';

activeCategory = filter;

visibleLimit = 8;

setChipActive(filter);

applyFilters();

const shop = document.getElementById('shop');

if (shop) shop.scrollIntoView({ behavior: 'smooth', block: 'start' });

});

// Search

function handleSearch(val) {

activeQuery = normalize(val);

visibleLimit = 8;

applyFilters();

}

searchDesktop && searchDesktop.addEventListener('input', (e) => handleSearch(e.target.value));

searchMobile && searchMobile.addEventListener('input', (e) => handleSearch(e.target.value));

// Load more

loadMoreBtn && loadMoreBtn.addEventListener('click', () => {

visibleLimit += 4;

applyFilters();

});

// Reset

resetBtn && resetBtn.addEventListener('click', resetAll);

// Add to cart buttons

$$('.btn-add').forEach(btn => {

btn.addEventListener('click', (e) => {

e.stopPropagation();

const id = btn.dataset.addId;

cart += 1;

updateCartUI();

const p = getProductById(id);

const t = p?.dataset.title || 'Item';

showToast('Added to cart', t);

});

// Open modal on card image/title click

$$('.product-open').forEach(btn => {

btn.addEventListener('click', () => {

const card = btn.closest('.product-card');

openModal(card);

});

// Also open modal when clicking on title area (optional)

$$('.product-card h3').forEach(h3 => {

h3.addEventListener('click', () => {

const card = h3.closest('.product-card');

openModal(card);

});

h3.classList.add('cursor-pointer');

});

// Modal close actions

modalClose && modalClose.addEventListener('click', closeModal);

modalOverlay && modalOverlay.addEventListener('click', (e) => {

// click outside dialog

if (e.target === modalOverlay) closeModal();

});

modalAddBtn && modalAddBtn.addEventListener('click', () => {

if (!currentModalProductId) return;

cart += 1;

updateCartUI();

const p = getProductById(currentModalProductId);

const t = p?.dataset.title || 'Item';

showToast('Added to cart', t);

});

// Footer year

const yearEl = document.getElementById('year');

if (yearEl) yearEl.textContent = new Date().getFullYear();

// Initial render: show 8 first (already hidden for 9-12), but keep robust

updateCartUI();

applyFilters();

})();

</script>

</body>

</html>

Code Studio

Minggu, 28 Desember 2025

Landing Page - Marketplace

Index.html

Tidak ada komentar:

Posting Komentar

Belajar React - Mobile Apps

Laporkan Penyalahgunaan