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.
34 lines
2.3 KiB
Vue
34 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
</script>
|
|
|
|
<template>
|
|
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-gray-200 dark:border-gray-700 px-6 sm:px-10 lg:px-20 py-4 sticky top-0 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-sm z-50">
|
|
<div class="flex items-center gap-4">
|
|
<div class="size-6 text-[#0d111b] dark:text-white">
|
|
<svg fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M36.7273 44C33.9891 44 31.6043 39.8386 30.3636 33.69C29.123 39.8386 26.7382 44 24 44C21.2618 44 18.877 39.8386 17.6364 33.69C16.3957 39.8386 14.0109 44 11.2727 44C7.25611 44 4 35.0457 4 24C4 12.9543 7.25611 4 11.2727 4C14.0109 4 16.3957 8.16144 17.6364 14.31C18.877 8.16144 21.2618 4 24 4C26.7382 4 29.123 8.16144 30.3636 14.31C31.6043 8.16144 33.9891 4 36.7273 4C40.7439 4 44 12.9543 44 24C44 35.0457 40.7439 44 36.7273 44Z" fill="currentColor"></path>
|
|
</svg>
|
|
</div>
|
|
<h2 class="text-[#0d111b] dark:text-white text-xl font-bold tracking-[-0.015em]">LUXE</h2>
|
|
</div>
|
|
<nav class="hidden lg:flex items-center gap-9">
|
|
<a class="text-sm font-medium hover:text-primary dark:hover:text-primary" href="#">New Arrivals</a>
|
|
<a class="text-sm font-medium hover:text-primary dark:hover:text-primary" href="#">Designers</a>
|
|
<a class="text-sm font-medium hover:text-primary dark:hover:text-primary" href="#">Clothing</a>
|
|
<a class="text-sm font-medium hover:text-primary dark:hover:text-primary" href="#">Accessories</a>
|
|
<a class="text-sm font-medium hover:text-primary dark:hover:text-primary" href="#">Sale</a>
|
|
</nav>
|
|
<div class="flex items-center gap-2">
|
|
<button class="flex items-center justify-center rounded-full h-10 w-10 hover:bg-gray-200 dark:hover:bg-gray-700">
|
|
<span class="material-symbols-outlined text-2xl">search</span>
|
|
</button>
|
|
<button class="flex items-center justify-center rounded-full h-10 w-10 hover:bg-gray-200 dark:hover:bg-gray-700">
|
|
<span class="material-symbols-outlined text-2xl">person</span>
|
|
</button>
|
|
<button class="flex items-center justify-center rounded-full h-10 w-10 hover:bg-gray-200 dark:hover:bg-gray-700">
|
|
<span class="material-symbols-outlined text-2xl">shopping_bag</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
</template>
|