first commit

2026-05-12 12:41:49 +07:00
commit 604fef891f
8368 changed files with 1285228 additions and 0 deletions
@@ -0,0 +1,91 @@
+<template>
+  <section class="bg-gradient-to-br from-brand-50 via-white to-slate-100">
+    <div class="container-page grid min-h-[560px] items-center gap-10 py-16 lg:grid-cols-2">
+      <div>
+        <span class="rounded-full bg-brand-100 px-4 py-2 text-sm font-bold text-brand-700">
+          Marketplace Barang Bekas Teknologi
+        </span>
+        <h1 class="mt-6 text-4xl font-extrabold tracking-tight text-slate-950 sm:text-5xl lg:text-6xl">
+          Jual beli perangkat IT bekas jadi lebih mudah.
+        </h1>
+        <p class="mt-6 max-w-xl text-lg leading-8 text-slate-600">
+          Temukan laptop bekas, PC, monitor, keyboard, router, switch, access point, dan server bekas untuk kebutuhan belajar SIJA/TKJ.
+        </p>
+        <div class="mt-8 flex flex-wrap gap-3">
+          <RouterLink to="/jual" class="btn-primary">Jual Barang Sekarang</RouterLink>
+          <RouterLink to="/marketplace" class="btn-secondary">Lihat Marketplace</RouterLink>
+        </div>
+      </div>
+
+      <div class="relative">
+        <div class="absolute -inset-4 rounded-[2rem] bg-brand-100 blur-2xl"></div>
+        <img
+          class="relative aspect-[4/3] w-full rounded-[2rem] object-cover shadow-2xl"
+          src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1200&auto=format&fit=crop"
+          alt="Tech marketplace"
+        />
+      </div>
+    </div>
+  </section>
+
+  <section class="container-page py-14">
+    <div class="mb-8 flex items-end justify-between gap-4">
+      <div>
+        <h2 class="text-2xl font-extrabold">Kategori Populer</h2>
+        <p class="mt-2 text-slate-600">Fokus ke perangkat teknologi dan jaringan.</p>
+      </div>
+      <RouterLink to="/marketplace" class="text-sm font-bold text-brand-700">Lihat semua</RouterLink>
+    </div>
+
+    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
+      <div v-for="cat in categoryList" :key="cat" class="card p-5 text-center transition hover:-translate-y-1 hover:shadow-md">
+        <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-50 text-brand-700">
+          <Cpu size="22" />
+        </div>
+        <p class="font-bold">{{ cat }}</p>
+      </div>
+    </div>
+  </section>
+
+  <section class="bg-white py-14">
+    <div class="container-page">
+      <div class="mb-8 flex items-end justify-between gap-4">
+        <div>
+          <h2 class="text-2xl font-extrabold">Produk Terbaru</h2>
+          <p class="mt-2 text-slate-600">Contoh barang bekas teknologi yang tersedia.</p>
+        </div>
+      </div>
+
+      <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+        <ProductCard
+          v-for="product in latestProducts"
+          :key="product.id"
+          :product="product"
+          :saved="saved.includes(product.id)"
+          @toggle-save="toggleSave"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, ref } from "vue"
+import { Cpu } from "lucide-vue-next"
+import ProductCard from "../components/ProductCard.vue"
+import { products, categories } from "../data/products"
+import { getSavedProducts, setSavedProducts } from "../utils"
+
+const saved = ref(getSavedProducts())
+const categoryList = categories.filter((c) => c !== "Semua").slice(0, 6)
+const latestProducts = computed(() => products.slice(0, 4))
+
+function toggleSave(id) {
+  if (saved.value.includes(id)) {
+    saved.value = saved.value.filter((item) => item !== id)
+  } else {
+    saved.value.push(id)
+  }
+  setSavedProducts(saved.value)
+}
+</script>