fitur fitur darkmode dan foto foto

src/views/HomeView.vue

@@ -2,15 +2,31 @@
   <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 Teknologi bekas.
-        </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 berbagai kebutuhan.
-        </p>
+        <ShinyText
+          text="SecondTech"
+          className="text-1xl font-extrabold tracking-tight sm:text-1xl lg:text-2xl"
+          :color="'#1c4ed9'"
+          :shineColor="'#e0e7ff'"
+          :spread="45"
+          :speed="1"
+          :delay="2"
+          :direction="'left'"
+          :pauseOnHover="true"
+          :yoyo="true"
+        />
+        <div>
+          <TextType
+            as="h2"
+            className="mt-6 text-3xl font-extrabold tracking-tight text-zinc-950 sm:text-6xl lg:text-5xl"
+            :text="['Menjual Barang Bekas, yang kamu butuhkan, di satu tempat.']"
+            :typingSpeed="75"
+            :pauseDuration="1500"
+            :showCursor="false"
+            :textColors="['var(--hero-title-color)']"
+            cursorCharacter="|"
+          />
+        </div>
+        <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 berbagai kebutuhan.</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>
@@ -19,11 +35,7 @@
 
       <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"
-        />
+        <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>
@@ -38,17 +50,13 @@
     </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.name"
-  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">
-    <component :is="iconMap[cat.icon]" :size="22" />
-  </div>
+      <div v-for="cat in categoryList" :key="cat.name" 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">
+          <component :is="iconMap[cat.icon]" :size="22" />
+        </div>
 
-  <p class="font-bold">{{ cat.name }}</p>
-</div>
+        <p class="font-bold">{{ cat.name }}</p>
+      </div>
     </div>
   </section>
 
@@ -62,41 +70,27 @@
       </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"
-        />
+        <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 ProductCard from "../components/ProductCard.vue"
-import { getSavedProducts, setSavedProducts } from "../utils"
-import {
-  Boxes,
-  Laptop,
-  PcCase,
-  Monitor,
-  Keyboard,
-  Router,
-  Network,
-  Server,
-  Wifi
-} from "lucide-vue-next"
+import { computed, ref } from 'vue';
+import ProductCard from '../components/ProductCard.vue';
+import { getSavedProducts, setSavedProducts } from '../utils';
+import { Boxes, Laptop, PcCase, Monitor, Keyboard, Router, Network, Server, Wifi } from 'lucide-vue-next';
 
-import { products, categories } from "../data/products"
+import { products, categoryOptions } from '../data/products';
+import ShinyText from '../vuebits/ShinyText/ShinyText.vue';
+import TextType from '../vuebits/TextType/TextType.vue';
 
-const saved = ref(getSavedProducts())
-const categoryList = categories
-  .filter((category) => category.name !== "Semua")
-  .slice(0, 6)
-const latestProducts = computed(() => products.slice(0, 4))
+const saved = ref(getSavedProducts());
+const categoryList = categoryOptions
+  .filter((category) => category.name !== 'Semua')
+  .slice(0, 6);
+const latestProducts = computed(() => products.slice(0, 4));
 const iconMap = {
   Boxes,
   Laptop,
@@ -106,15 +100,16 @@ const iconMap = {
   Router,
   Network,
   Server,
-  Wifi
-}
+  Wifi,
+};
 
 function toggleSave(id) {
   if (saved.value.includes(id)) {
-    saved.value = saved.value.filter((item) => item !== id)
+    saved.value = saved.value.filter((item) => item !== id);
   } else {
-    saved.value.push(id)
+    saved.value.push(id);
   }
-  setSavedProducts(saved.value)
+  setSavedProducts(saved.value);
 }
 </script>
+