f11c463a72
- Initializes a new Nuxt.js 3 project. - Configures Tailwind CSS with custom theme settings. - Creates reusable components for Header, Footer, and ProductCard. - Implements the Homepage, Product Listing, Product Detail, Shopping Cart, and Checkout pages with mock data. - The core e-commerce flow is now in place for further development.
24 lines
1.0 KiB
Vue
24 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
defineProps({
|
|
product: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="group relative flex flex-col">
|
|
<div class="relative w-full overflow-hidden rounded-xl bg-gray-200 dark:bg-gray-800 aspect-square">
|
|
<img :src="product.image" :alt="product.name" class="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105" />
|
|
<div class="absolute inset-0 flex items-end justify-center bg-black bg-opacity-0 p-4 opacity-0 transition-opacity duration-300 group-hover:bg-opacity-20 group-hover:opacity-100">
|
|
<button class="w-full rounded-lg bg-white/90 px-4 py-2 text-sm font-bold text-black backdrop-blur-sm hover:bg-white">Quick View</button>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 flex flex-col gap-1">
|
|
<h3 class="text-base font-semibold text-[#0d111b] dark:text-white">{{ product.name }}</h3>
|
|
<p class="text-base font-medium text-gray-700 dark:text-gray-300">{{ product.price }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|