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.
82 lines
4.7 KiB
Vue
82 lines
4.7 KiB
Vue
<script setup lang="ts">
|
|
const cartItems = [
|
|
{
|
|
name: 'Minimalist Leather Wallet',
|
|
price: '$49.99',
|
|
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuDWrI6RNsR7PE-jrrWMu3jglUrAwOOQzJ5b-icYx2RHGlblHMNvPw8qBKCZvG2CevRs0bAe3GCSZP2uJfVasyNWIjT1EIps42kBTgG-Uq6BKtNCGcpiz6ovCOvuwma3Oc6GCO7MoY-X0-nf81NWencqRIsbsnWexfxrpArYIsRv7c3aYU-wX6DOmNRsxcnFN5s0xkv1RbHl4BFMYAWyVetaqVV97MIkpVQN7TCFbHVMe3BkSuy56niU9_4noARnjY9uPh7DeMHVK2ye',
|
|
quantity: 1
|
|
},
|
|
{
|
|
name: 'Stainless Steel Watch',
|
|
price: '$199.00',
|
|
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuB9uYuSgRdusg0NxIECAIL1u-CRsvfhmGMwKu7SSAoukxPdz8dvrInw21rArVOuY8_ZM64BZBguYO6Uc_uu-7vsxHX_IGeiflSu6LyHzQD6659asPBhVAMrd7txXvdbMNafeqn2kPzSCruJZUqaasNEwtuyJ5xR5XmuFO5vgGhH0sKToP5HA1R-VnHpJ1aXId8xrP4Ay98HPoXwQEpHFw79K1PPKXajmGx-Zqu4vid3r0Lj5shiZfmWvN8OHNeGgFVzjX3S5KCJsq08',
|
|
quantity: 1
|
|
}
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<main class="px-4 md:px-10 lg:px-20 py-10 lg:py-16">
|
|
<div class="mx-auto max-w-7xl">
|
|
<div class="flex flex-col lg:flex-row lg:gap-12">
|
|
<!-- Left Column: Cart Items -->
|
|
<div class="w-full lg:w-2/3">
|
|
<div class="flex flex-wrap justify-between items-baseline gap-3 mb-8">
|
|
<div class="flex min-w-72 flex-col gap-2">
|
|
<p class="text-white text-4xl font-black leading-tight tracking-[-0.033em]">Your Bag</p>
|
|
<p class="text-[#92a0c9] text-base font-normal leading-normal">You have {{ cartItems.length }} items in your bag</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col divide-y divide-white/10">
|
|
<!-- List Item -->
|
|
<div v-for="item in cartItems" :key="item.name" class="flex items-center gap-4 bg-transparent py-6 justify-between">
|
|
<div class="flex items-center gap-4 w-full">
|
|
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-lg size-16 shrink-0" :style="{ backgroundImage: `url(${item.image})` }"></div>
|
|
<div class="flex flex-col justify-center flex-grow">
|
|
<p class="text-white text-base font-medium leading-normal line-clamp-1">{{ item.name }}</p>
|
|
<p class="text-[#92a0c9] text-sm font-normal leading-normal line-clamp-2">{{ item.price }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="shrink-0">
|
|
<div class="flex items-center gap-2 text-white">
|
|
<button class="text-base font-medium leading-normal flex h-7 w-7 items-center justify-center rounded-full bg-white/10 hover:bg-white/20 transition-colors cursor-pointer">-</button>
|
|
<input class="text-base font-medium leading-normal w-6 p-0 text-center bg-transparent focus:outline-0 focus:ring-0 focus:border-none border-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" type="number" :value="item.quantity" />
|
|
<button class="text-base font-medium leading-normal flex h-7 w-7 items-center justify-center rounded-full bg-white/10 hover:bg-white/20 transition-colors cursor-pointer">+</button>
|
|
</div>
|
|
</div>
|
|
<button class="text-[#92a0c9] hover:text-white transition-colors">
|
|
<span class="material-symbols-outlined text-xl">delete</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Column: Order Summary -->
|
|
<div class="w-full lg:w-1/3 mt-10 lg:mt-0">
|
|
<div class="sticky top-10 bg-white/5 rounded-xl p-6 lg:p-8">
|
|
<h2 class="text-white text-2xl font-bold leading-tight tracking-[-0.015em] pb-6 border-b border-white/10">Order Summary</h2>
|
|
<div class="space-y-4 py-6 border-b border-white/10">
|
|
<div class="flex justify-between text-base">
|
|
<p class="text-[#92a0c9]">Subtotal</p>
|
|
<p class="text-white font-medium">$248.99</p>
|
|
</div>
|
|
<div class="flex justify-between text-base">
|
|
<p class="text-[#92a0c9]">Shipping</p>
|
|
<p class="text-white font-medium">$5.00</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between text-lg font-bold pt-6 pb-8">
|
|
<p class="text-white">Total</p>
|
|
<p class="text-white">$253.99</p>
|
|
</div>
|
|
<button class="w-full flex items-center justify-center h-12 px-6 bg-primary text-white rounded-lg font-bold text-base hover:bg-primary/90 transition-colors">
|
|
Proceed to Checkout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|