98 lines
2.7 KiB
Vue
98 lines
2.7 KiB
Vue
<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>
|