first commit

2026-05-10 15:53:34 +07:00
commit 5730978b9c
20 changed files with 11030 additions and 0 deletions
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import ProductCard from "~/components/ui/ProductCard.vue";
+
+const products = [
+  {
+    title: "Minimal Chair",
+    price: "$120",
+    image:
+      "https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=1200&auto=format&fit=crop",
+  },
+  {
+    title: "Modern Lamp",
+    price: "$89",
+    image:
+      "https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?q=80&w=1200&auto=format&fit=crop",
+  },
+  {
+    title: "Wood Table",
+    price: "$250",
+    image:
+      "https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?q=80&w=1200&auto=format&fit=crop",
+  },
+];
+</script>
+
+<template>
+  <div class="bg-gray-50 text-gray-900">
+
+    <main>
+      <section class="relative overflow-hidden">
+        <div
+          class="container mx-auto grid items-center gap-10 px-4 py-24 md:grid-cols-2"
+        >
+          <div>
+            <span
+              class="mb-4 inline-flex rounded-full border px-4 py-2 text-sm font-medium"
+            >
+              New Collection 2026
+            </span>
+
+            <h1 class="mb-6 text-5xl font-bold leading-tight md:text-6xl">
+              Build Your Dream Shopping Experience
+            </h1>
+
+            <p class="mb-8 text-lg text-gray-600">
+              Discover premium products with modern design and best quality for
+              your lifestyle.
+            </p>
+
+            <div class="flex gap-4">
+              <UButton size="xl"> Shop Now </UButton>
+
+              <UButton size="xl" color="neutral" variant="outline">
+                Learn More
+              </UButton>
+            </div>
+          </div>
+
+          <div class="relative">
+            <img
+              src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?q=80&w=1200&auto=format&fit=crop"
+              alt="Hero"
+              class="rounded-3xl shadow-2xl"
+            />
+          </div>
+        </div>
+      </section>
+
+      <section id="products" class="container mx-auto px-4 py-24">
+        <div class="mb-12 flex items-end justify-between">
+          <div>
+            <p
+              class="mb-2 text-sm font-semibold uppercase tracking-widest text-primary"
+            >
+              Featured Products
+            </p>
+
+            <h2 class="text-4xl font-bold">Best Seller Products</h2>
+          </div>
+
+          <UButton color="neutral" variant="outline"> View All </UButton>
+        </div>
+
+        <div class="grid gap-8 md:grid-cols-3">
+          <ProductCard
+            v-for="(product, index) in products"
+            :key="index"
+            :title="product.title"
+            :price="product.price"
+            :image="product.image"
+          />
+        </div>
+      </section>
+    </main>
+
+  </div>
+</template>