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.
47 lines
4.8 KiB
Vue
47 lines
4.8 KiB
Vue
<script setup lang="ts">
|
|
</script>
|
|
|
|
<template>
|
|
<footer class="bg-gray-100 dark:bg-black/20 text-gray-600 dark:text-gray-300">
|
|
<div class="container mx-auto px-6 lg:px-8 py-12">
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
|
<div>
|
|
<h3 class="font-bold text-sm text-[#0d111b] dark:text-white mb-4">Customer Service</h3>
|
|
<ul class="space-y-2 text-sm">
|
|
<li><a class="hover:text-primary" href="#">Contact Us</a></li>
|
|
<li><a class="hover:text-primary" href="#">Shipping & Returns</a></li>
|
|
<li><a class="hover:text-primary" href="#">FAQ</a></li>
|
|
<li><a class="hover:text-primary" href="#">Track Order</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-sm text-[#0d111b] dark:text-white mb-4">About LUXE</h3>
|
|
<ul class="space-y-2 text-sm">
|
|
<li><a class="hover:text-primary" href="#">Our Story</a></li>
|
|
<li><a class="hover:text-primary" href="#">Careers</a></li>
|
|
<li><a class="hover:text-primary" href="#">Press</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-sm text-[#0d111b] dark:text-white mb-4">Legal</h3>
|
|
<ul class="space-y-2 text-sm">
|
|
<li><a class="hover:text-primary" href="#">Terms & Conditions</a></li>
|
|
<li><a class="hover:text-primary" href="#">Privacy Policy</a></li>
|
|
<li><a class="hover:text-primary" href="#">Cookie Policy</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-sm text-[#0d111b] dark:text-white mb-4">Follow Us</h3>
|
|
<div class="flex space-x-4">
|
|
<a class="hover:text-primary" href="#"><svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.48 2.96,10.26 2.38,9.95C2.38,9.97 2.38,9.98 2.38,10C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16.03 6.02,17.25 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path></svg></a>
|
|
<a class="hover:text-primary" href="#"><svg class="h-6 w-6" fill="currentColor" viewbox="0 0 24 24"><path d="M12,2.163C15.204,2.163 15.552,2.175 16.705,2.233C17.857,2.291 18.683,2.498 19.46,2.793C20.254,3.1 20.9,3.747 21.207,4.54C21.503,5.327 21.71,6.153 21.767,7.305C21.825,8.457 21.837,8.796 21.837,12C21.837,15.204 21.825,15.552 21.767,16.705C21.71,17.857 21.503,18.683 21.207,19.46C20.9,20.254 20.254,20.9 19.46,21.207C18.683,21.503 17.857,21.71 16.705,21.767C15.552,21.825 15.204,21.837 12,21.837C8.796,21.837 8.448,21.825 7.305,21.767C6.153,21.71 5.327,21.503 4.54,21.207C3.747,20.9 3.1,20.254 2.793,19.46C2.498,18.683 2.291,17.857 2.233,16.705C2.175,15.552 2.163,15.204 2.163,12C2.163,8.796 2.175,8.448 2.233,7.305C2.291,6.153 2.498,5.327 2.793,4.54C3.1,3.747 3.747,3.1 4.54,2.793C5.327,2.498 6.153,2.291 7.305,2.233C8.457,2.175 8.796,2.163 12,2.163M12,0C8.741,0 8.389,0.012 7.211,0.068C6.033,0.124 4.962,0.333 3.996,0.728C2.981,1.139 2.138,1.748 1.353,2.533C0.568,3.318 0.139,4.161 0.728,5.176C0.333,6.142 0.124,7.213 0.068,8.391C0.012,9.569 0,9.921 0,13C0,16.079 0.012,16.431 0.068,17.609C0.124,18.787 0.333,19.858 0.728,20.824C1.139,21.839 1.748,22.682 2.533,23.467C3.318,24.252 4.161,24.681 5.176,25.072C6.142,25.467 7.213,25.676 8.391,25.732C9.569,25.788 9.921,25.8 13,25.8C16.079,25.8 16.431,25.788 17.609,25.732C18.787,25.676 19.858,25.467 20.824,25.072C21.839,24.681 22.682,24.252 23.467,23.467C24.252,22.682 24.681,21.839 25.072,20.824C25.467,19.858 25.676,18.787 25.732,17.609C25.788,16.431 25.8,16.079 25.8,13C25.8,9.921 25.788,9.569 25.732,8.391C25.676,7.213 25.467,6.142 25.072,5.176C24.681,4.161 24.252,3.318 23.467,2.533C22.682,1.748 21.839,1.139 20.824,0.728C19.858,0.333 18.787,0.124 17.609,0.068C16.431,0.012 16.079,0 13,0M13,6.25C9.271,6.25 6.25,9.271 6.25,13C6.25,16.729 9.271,19.75 13,19.75C16.729,19.75 19.75,16.729 19.75,13C19.75,9.271 16.729,6.25 13,6.25M13,17.917C10.28,17.917 8.083,15.72 8.083,13C8.083,10.28 10.28,8.083 13,8.083C15.72,8.083 17.917,10.28 17.917,13C17.917,15.72 15.72,17.917 13,17.917M18.833,6.167C18.204,6.167 17.694,6.676 17.694,7.306C17.694,7.935 18.204,8.444 18.833,8.444C19.463,8.444 19.972,7.935 19.972,7.306C19.972,6.676 19.463,6.167 18.833,6.167"></path></svg></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-8 pt-6 text-center text-sm">
|
|
<p>© 2024 LUXE. All Rights Reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|