Jules-Sns/ecommerce-app/pages/index.vue

<script setup lang="ts">
import ProductCard from '~/components/ProductCard.vue';

const recommendedProducts = [
  {
    name: 'Silk Blend Blouse',
    price: '$750',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBjblTsJLCHI19PJ9XgLqLJRZ7B3Wr15qmL7tpIEzeKpQaLAu_mqQXWY6LidttYiT3_IOju3R4rmt9N1bBqr6Fi5QbAgK57bkpgk6yoVA7-W4IIMb2Kn4n7te66s_DU5UOY2OdzRxryhDEC3v-pu8v9TqYUOtz0YgdnvdHmRIs3tyA4fkTZODo4RJ3PCOlNrXiS_RIZUHwab43h048AMa1BG4lvRgYLjKK_UFdscQK3M5017ipZEpQTfACf0DqAGs5twglMKJTSrFRg'
  },
  {
    name: 'Italian Leather Loafers',
    price: '$920',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuAaYnyFClvQZ-uBClVmEbEpzr8rIdrSYzhGCf11Ur7nEOrX54qawxY_c5P9D5guyQJPfPaWBKbfcTRvciAebQSnHPaiHWUTsqvcbjhCcmDlhdZ9-o7j6PLOFLlAcJDSeBYeDsHvB_HQmxXxGi77sY6q58ATBV_gU-FxeYOUjEXyr67G0J9VnC5159AGn4Ipieq2LghTyyaRoQ0gygLLe7VG6boCmC5ZRzDFRX_RPYHc-STMtdqtBFfDN5a_Y_lG5wcouwtzvgC_DFCu'
  },
  {
    name: 'Cashmere V-Neck Sweater',
    price: '$1,200',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBkkJtM54APVgqD6I9KZJtB4fB9ZE0dXNTZNvuaoAFfpDrdgSK5FRX_W_vR78f8D1qdtXy-pyxFkH5I0kx2Su6bo1aGHrzbZ5iN6eKEK3NJf1f5CALLBDI05mPGsYPojWp6G4E87gClo57JPhrveAvRjGaYry4NYp84T_CN0v6o9bfPucYGhlBTEa-vCHmsomtEgZyUxGl2wirxlOMgYV54AnjXA7rBoNLhgfI_bNUMPCjr34X7luWt_qgsxD2iZ0TfFdSSe7AkyBvY'
  },
  {
    name: 'Classic Trench Coat',
    price: '$2,590',
    image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuDObyhLf7WY3GmclLbPdUuHvX_WUxtb3YDCHDh2sxeyiuLk8fzKarVTiISG_zmt84z1I0W2947Q9vh07ehI-vFyaQS0wsbEgMcl3nUXmA8Fw-7R87kqu4hJ1Ndnnyfdmpjuy218OiXFST4gBqH6NHYgN-eIOFO1kbMO9sN8D5iF_oT9XhEmQ1wyfXLw-x4C7ZOYnJ5-k8dSQA6OUWDJ_x0T5nLFeXBTfvAWgHsDme5zK3vig5BRnl4LTlomy_ayZXECN7Lq_OQ0nHGj'
  }
]
</script>

<template>
  <main class="flex-1">
    <section class="relative w-full h-[60vh] md:h-[80vh] bg-gray-200 dark:bg-gray-800">
      <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCOe-mlu0aQheTfR_lYUNpRbWOQ5oh0rMUouR6dJqZqVEpL0aMk1bF6VMtptG9BYNamGmiZQsquVd3-XRA5nX2V9IVpzIC1yZu2l2n7JQVJHiKYbGAXHwudG_S9oE441yRRzuf_FaUFuWI6D5_WtnCOOC4OfvYlwH_LR7pGPPXz-FRd3bRwCxTsK_SehslEl3AA6tW9syNPcDyIAn9xg2MRptXsQcynIuGA0CDMbpkcImQSgB6fzHFP9vteYUB46AVgXsPC4TpzFXkN');"></div>
      <div class="absolute inset-0 bg-black/30"></div>
      <div class="relative z-10 flex flex-col items-center justify-center h-full text-center text-white p-4">
        <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight">The Art of Tailoring</h1>
        <p class="mt-4 text-lg md:text-xl max-w-2xl">Discover our curated collection of modern suiting and timeless essentials.</p>
        <button class="mt-8 px-8 py-3 bg-white text-black text-sm font-bold rounded-full hover:bg-gray-200 transition-colors">Shop The Collection</button>
      </div>
    </section>
    <section class="py-12 md:py-20">
      <div class="container mx-auto px-6 lg:px-8">
        <div class="flex overflow-x-auto [-ms-scrollbar-style:none] [scrollbar-width:none] [&amp;::-webkit-scrollbar]:hidden pb-4">
          <div class="flex items-stretch gap-4 md:gap-6 flex-shrink-0">
            <div class="flex h-full flex-1 flex-col gap-4 rounded-lg w-64 md:w-80">
              <div class="w-full bg-center bg-no-repeat aspect-[4/5] bg-cover rounded-xl" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuC3TinM5AZPGx6wlZKrzayKfmi7OEP4e7J9y3xinMYqqUnop0FHyv9-_7YW2VCgdk638pTc5WyHuSCor0ZQU6zeTHyASMnx5eo3O2AO3I3S_zrUysz13SWp4uc1ycv-W5GT2n92BkLoOYk9L8q1On5PEFhqqPOVafbyIM7r_OPU8IRSKmA_JHch-bE1rExot5lDUZ2fMj91uvQbLaH-0zgYWkvL4jRL0HhiGiiFsdVY7Rg47RTUQjDr-VL3GT4QBiF7AkLnY-Luc9Ch");'></div>
              <div>
                <p class="text-base font-medium">The Spring '24 Collection</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Discover the latest trends</p>
              </div>
            </div>
            <div class="flex h-full flex-1 flex-col gap-4 rounded-lg w-64 md:w-80">
              <div class="w-full bg-center bg-no-repeat aspect-[4/5] bg-cover rounded-xl" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBHw26pk-bojJv5yxmIMODqajO5fIUYjs76iPJ6FgZODV8huORP_xfQELDNQYKhEwdEolM3L6szNr0U16TIIGLmlOl-QjaQcbkrZJQqU9ibGvtvDMQlvWZ8e1FtVblOfaqX76HXg_4GoTfssVlqyggXysrbpP7rFB-0eeesn8Uan2PdP3rk6YY8BNodAdp63beIT_J4rGgZfnpvwfohjbrqUm0QEzl2iDu7Hj_zOG2kpxX8nvXtoCdEpVMV19EQ-H0YnQUmO0Uy_RAM");'></div>
              <div>
                <p class="text-base font-medium">Timeless Leather Goods</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Shop now</p>
              </div>
            </div>
            <div class="flex h-full flex-1 flex-col gap-4 rounded-lg w-64 md:w-80">
              <div class="w-full bg-center bg-no-repeat aspect-[4/5] bg-cover rounded-xl" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCQL28qlN6Hc9sVOAb3-LiqAp-jFenP7qyV-iCFIhPvsCV2I4pYzsL_n4XOcvGVAk-FWNgxnUCdhfsVtZiLBgVCCoZ2Rpk_HtbsfaAGQY4QrG69uqixW2uPX2P-6XS-gE6D5bmpN-kWNegzJ_NtzZQBDIIimqlk-AFUMgGnIx6twr7A_AweA5ejNj4ZjHRKtV1dAKq3IOD8fYoywJ_N_NgwVVHsOu7X_cKaiRucR1KaId4zNrPR9ScDwNBIICGb1bH6mzj88R-AapG0");'></div>
              <div>
                <p class="text-base font-medium">Modern Tailoring</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Explore the collection</p>
              </div>
            </div>
            <div class="flex h-full flex-1 flex-col gap-4 rounded-lg w-64 md:w-80">
              <div class="w-full bg-center bg-no-repeat aspect-[4/5] bg-cover rounded-xl" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBKDVHX7wup54Kz1HPNjbMOWyxPd0iAhvCzS4MAJs7oHv7yolpfag2Mp8RyNjWbFg8TmydXVu4rrWvjUys5wIKCgworkGzgswx_80pR-aBtv8fMmLNglmXpXEuFE4oa7u0IhOPDgIFZshr1Qt-2Uv1CsWZOXyTK-rEcu9OcKsghv3Xrw7P0QOly24TxdYGHdGYz11Xu7HD1RlhwM5Z78163WNREpDaRXh94v3Zmi6FrvWr5otF8V4M4P6c6QNrkab_R5qHpYskDShG9");'></div>
              <div>
                <p class="text-base font-medium">Horology Redefined</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">View the selection</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="py-12 md:py-20">
      <div class="container mx-auto px-6 lg:px-8">
        <h2 class="text-3xl font-bold tracking-tight px-4 pb-8 text-center">Recommended For You</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
          <ProductCard v-for="product in recommendedProducts" :key="product.name" :product="product" />
        </div>
      </div>
    </section>
    <section class="bg-gray-100 dark:bg-black/20 py-16 md:py-24">
      <div class="container mx-auto px-6 lg:px-8">
        <div class="@container">
          <div class="flex flex-col justify-end gap-6 px-4 py-10 @[480px]:gap-8 @[480px]:px-10 @[480px]:py-0">
            <div class="flex flex-col gap-2 text-center">
              <h1 class="text-3xl font-bold tracking-tight @[480px]:text-4xl @[480px]:font-black">Join The Inner Circle</h1>
              <p class="text-base font-normal leading-normal max-w-2xl mx-auto text-gray-600 dark:text-gray-300">Sign up for exclusive access to new collections, events, and sales.</p>
            </div>
            <div class="flex justify-center mt-4">
              <form class="flex w-full max-w-lg">
                <input class="form-input flex-1 w-full min-w-0 resize-none overflow-hidden rounded-l-full text-[#0d111b] focus:outline-0 focus:ring-2 focus:ring-primary/50 border-gray-300 dark:border-gray-600 dark:bg-background-dark bg-white focus:border-primary/50 h-12 placeholder:text-gray-500 dark:placeholder:text-gray-400 px-6 text-sm" placeholder="Enter your email address" type="email" />
                <button class="flex items-center justify-center rounded-r-full h-12 px-6 bg-primary text-white text-sm font-bold hover:bg-primary/90 transition-colors">
                  <span>Subscribe</span>
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>