---
title: "E-commerce Landing Page"
description: "A modern e-commerce landing page template with product showcases, promotional banners, and conversion-focused design."
canonical_url: "https://nuxt-motion-block.pages.dev/templates/ecommerce-landing-page"
---
# E-commerce Landing Page

> A modern e-commerce landing page template with product showcases, promotional banners, and conversion-focused design.

A modern e-commerce landing page template designed for online stores and retail businesses. This template includes all essential sections with smooth animations and a conversion-focused layout.

## Usage

<code-preview label="Preview">
<div className="w-full,h-full">
<component-example name="EcommerceLandingPage">



</component-example>
</div>

<template v-slot:code="">

```vue
<template>
  <div class="min-h-screen bg-default">
    <!-- Navigation -->
    <UHeader
      title="FashionHub"
      class="sticky top-0 z-50 backdrop-blur-sm bg-default/90 border-b border-default"
    >
      <template #right>
        <div class="hidden md:flex items-center space-x-4">
          <UButton
            to="#"
            variant="ghost"
            color="neutral"
            icon="i-heroicons-magnifying-glass"
            square
          />
          <UButton
            to="#"
            variant="ghost"
            color="neutral"
            icon="i-heroicons-user"
            square
          />
          <UButton
            to="#"
            variant="ghost"
            color="neutral"
            icon="i-heroicons-heart"
            square
          />
          <UButton
            to="#"
            variant="ghost"
            color="neutral"
            icon="i-heroicons-shopping-bag"
            square
            class="relative"
          >
            <span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">3</span>
          </UButton>
        </div>
      </template>

      <template #body>
        <UNavigationMenu
          :items="navigationItems"
          class="flex flex-col space-y-4 md:hidden py-4"
          orientation="vertical"
        >
          <template #item="{ item }">
            <ULink
              v-bind="item"
              class="font-medium text-default hover:text-primary py-2"
            >
              {{ item.label }}
            </ULink>
          </template>
          <template #item-child="{ item }">
            <ULink
              v-bind="item"
              class="block text-sm text-muted hover:text-primary py-1 pl-4 border-l-2 border-primary ml-1"
            >
              {{ item.label }}
            </ULink>
          </template>
        </UNavigationMenu>
        <div class="flex space-x-3 pt-4">
          <UButton
            to="#"
            variant="ghost"
            color="neutral"
            class="flex-1 font-medium"
          >
            Sign in
          </UButton>
          <UButton
            to="#"
            variant="solid"
            color="primary"
            class="flex-1"
          >
            Create Account
          </UButton>
        </div>
      </template>

      <template #default>
        <UNavigationMenu
          :items="navigationItems"
          class="hidden md:flex space-x-6"
        >
          <template #item="{ item }">
            <ULink
              v-bind="item"
              class="font-medium text-default hover:text-primary px-3 py-2 rounded-lg hover:bg-muted"
            >
              {{ item.label }}
            </ULink>
          </template>
          <template #item-child="{ item }">
            <ULink
              v-bind="item"
              class="block px-4 py-3 text-sm hover:bg-muted"
            >
              <div class="font-medium text-default">{{ item.label }}</div>
              <div
                v-if="item.description"
                class="text-muted mt-1"
              >{{ item.description }}</div>
            </ULink>
          </template>
        </UNavigationMenu>
      </template>
    </UHeader>

    <!-- Hero Section -->
    <section class="relative py-20 md:py-28 overflow-hidden">
      <div class="absolute inset-0 z-0">
        <div class="absolute inset-0 bg-gradient-to-br from-rose-50/50 to-amber-50/50 dark:from-rose-900/5 dark:to-amber-900/5" />
        <div class="absolute top-0 left-0 w-96 h-96 bg-rose-100 dark:bg-rose-900/20 rounded-full blur-3xl" />
        <div class="absolute bottom-0 right-0 w-96 h-96 bg-amber-100 dark:bg-amber-900/20 rounded-full blur-3xl" />
      </div>
      <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div>
            <MInView
              :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
              :transition="{ duration: 0.5 }"
            >
              <div class="inline-flex items-center gap-2 mb-6 px-4 py-2 rounded-full text-sm font-medium bg-rose-100 dark:bg-rose-900/20 text-rose-700 dark:text-rose-300">
                <UIcon
                  name="i-heroicons-sparkles"
                  class="w-4 h-4"
                />
                <span>Limited Time Offer</span>
              </div>
            </MInView>
            <MInView
              :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
              :transition="{ duration: 0.5, delay: 0.1 }"
            >
              <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight text-default mb-6">
                <span class="block">Summer Collection</span>
                <span class="block bg-gradient-to-r from-rose-600 to-amber-600 bg-clip-text text-transparent">Up to 70% Off</span>
              </h1>
            </MInView>
            <MInView
              :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
              :transition="{ duration: 0.5, delay: 0.2 }"
            >
              <p class="text-lg md:text-xl text-muted mb-8 max-w-2xl">
                Discover our exclusive summer collection with premium quality fashion items at unbeatable prices. Free shipping on orders over $50.
              </p>
            </MInView>
            <MInView
              :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
              :transition="{ duration: 0.5, delay: 0.3 }"
              class="mb-10"
            >
              <div class="flex flex-col sm:flex-row gap-4">
                <UButton
                  to="#"
                  size="lg"
                  color="primary"
                  class="font-medium px-8 py-3"
                >
                  Shop Now
                </UButton>
                <UButton
                  to="#"
                  variant="outline"
                  color="primary"
                  size="lg"
                  class="font-medium px-8 py-3"
                >
                  View Lookbook
                </UButton>
              </div>
            </MInView>
            <MInView
              :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
              :transition="{ duration: 0.5, delay: 0.4 }"
            >
              <div class="flex items-center gap-4">
                <div class="flex items-center">
                  <UIcon name="i-heroicons-truck" class="w-5 h-5 text-rose-500 mr-2" />
                  <span class="text-sm text-muted">Free Shipping</span>
                </div>
                <div class="flex items-center">
                  <UIcon name="i-heroicons-arrow-path" class="w-5 h-5 text-rose-500 mr-2" />
                  <span class="text-sm text-muted">30-Day Returns</span>
                </div>
                <div class="flex items-center">
                  <UIcon name="i-heroicons-shield-check" class="w-5 h-5 text-rose-500 mr-2" />
                  <span class="text-sm text-muted">Secure Payment</span>
                </div>
              </div>
            </MInView>
          </div>
          <div class="relative">
            <MInView
              :variants="{ hidden: { opacity: 0, scale: 0.95 }, visible: { opacity: 1, scale: 1 } }"
              :transition="{ duration: 0.5, delay: 0.2 }"
            >
              <div class="relative rounded-2xl overflow-hidden shadow-xl border border-default bg-elevated">
                <div class="absolute inset-0 bg-gradient-to-br from-rose-50/50 to-amber-50/50 dark:from-rose-900/5 dark:to-amber-900/5"></div>
                <div class="relative p-8">
                  <div class="text-center mb-8">
                    <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-rose-100 dark:bg-rose-900/20 mb-4 mx-auto">
                      <UIcon
                        name="i-heroicons-shopping-bag"
                        class="w-6 h-6 text-rose-600 dark:text-rose-400"
                      />
                    </div>
                    <div class="font-bold text-xl text-default mb-2">
                      Summer Collection
                    </div>
                    <div class="text-sm text-muted max-w-md mx-auto">
                      Discover our latest fashion trends handpicked for you
                    </div>
                  </div>

                  <div class="mb-8">
                    <div class="flex justify-between items-center pb-4 border-b border-default mb-4">
                      <div class="text-sm font-medium text-default">
                        Trending Categories
                      </div>
                      <div class="text-sm text-muted">
                        Updated hourly
                      </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                      <div class="bg-rose-50 dark:bg-rose-900/10 rounded-xl p-4 transition-all hover:shadow-md">
                        <div class="flex items-start">
                          <div class="w-10 h-10 rounded-lg bg-rose-100 dark:bg-rose-900/20 flex items-center justify-center mr-3">
                            <UIcon name="i-heroicons-user" class="w-5 h-5 text-rose-600 dark:text-rose-400" />
                          </div>
                          <div>
                            <div class="font-medium text-default">Women's Fashion</div>
                            <div class="text-xs text-muted mt-1">24% off</div>
                          </div>
                        </div>
                      </div>
                      <div class="bg-amber-50 dark:bg-amber-900/10 rounded-xl p-4 transition-all hover:shadow-md">
                        <div class="flex items-start">
                          <div class="w-10 h-10 rounded-lg bg-amber-100 dark:bg-amber-900/20 flex items-center justify-center mr-3">
                            <UIcon name="i-heroicons-user-group" class="w-5 h-5 text-amber-600 dark:text-amber-400" />
                          </div>
                          <div>
                            <div class="font-medium text-default">Men's Collection</div>
                            <div class="text-xs text-muted mt-1">18% off</div>
                          </div>
                        </div>
                      </div>
                      <div class="bg-gray-50 dark:bg-gray-800/10 rounded-xl p-4 transition-all hover:shadow-md">
                        <div class="flex items-start">
                          <div class="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-800/20 flex items-center justify-center mr-3">
                            <UIcon name="i-heroicons-backpack" class="w-5 h-5 text-gray-600 dark:text-gray-400" />
                          </div>
                          <div>
                            <div class="font-medium text-default">Accessories</div>
                            <div class="text-xs text-muted mt-1">30% off</div>
                          </div>
                        </div>
                      </div>
                      <div class="bg-rose-50 dark:bg-rose-900/10 rounded-xl p-4 transition-all hover:shadow-md">
                        <div class="flex items-start">
                          <div class="w-10 h-10 rounded-lg bg-rose-100 dark:bg-rose-900/20 flex items-center justify-center mr-3">
                            <UIcon name="i-heroicons-home" class="w-5 h-5 text-rose-600 dark:text-rose-400" />
                          </div>
                          <div>
                            <div class="font-medium text-default">Home Decor</div>
                            <div class="text-xs text-muted mt-1">15% off</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="bg-gradient-to-r from-rose-500 to-amber-500 rounded-xl p-5 text-white">
                    <div class="flex items-center justify-between">
                      <div>
                        <div class="font-bold text-lg">Flash Sale</div>
                        <div class="text-sm opacity-90">Limited time offer - Up to 50% off</div>
                      </div>
                      <UButton
                        to="#"
                        variant="soft"
                        color="white"
                        size="sm"
                        class="font-medium"
                      >
                        Shop Now
                      </UButton>
                    </div>
                  </div>
                </div>
              </div>
            </MInView>
          </div>
        </div>
      </div>
    </section>

    <!-- Categories Section -->
    <section class="py-16 bg-muted">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <MInView
            :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
            :transition="{ duration: 0.5 }"
          >
            <h2 class="text-3xl md:text-4xl font-bold text-default mb-4">
              Shop by Category
            </h2>
          </MInView>
          <MInView
            :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
            :transition="{ duration: 0.5, delay: 0.1 }"
          >
            <p class="text-lg text-muted max-w-2xl mx-auto">
              Find exactly what you're looking for with our carefully curated categories.
            </p>
          </MInView>
        </div>
        <MAnimatedGroup
          :stagger-children="0.1"
          preset="slide"
          initial="hidden"
          animate="visible"
          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"
        >
          <MInView
            v-for="(category, index) in categories"
            :key="index"
            :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
            :transition="{ duration: 0.5, delay: index * 0.1 }"
            class="group relative overflow-hidden rounded-2xl"
          >
            <img
              :src="category.image"
              :alt="category.name"
              class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"
            >
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
            <div class="absolute bottom-0 left-0 right-0 p-6">
              <h3 class="text-xl font-bold text-white mb-2">
                {{ category.name }}
              </h3>
              <UButton
                :to="category.link"
                variant="solid"
                color="white"
                size="sm"
                class="font-medium"
              >
                Shop Now
              </UButton>
            </div>
          </MInView>
        </MAnimatedGroup>
      </div>
    </section>

    <!-- Featured Products -->
    <section class="py-20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-12">
          <div>
            <MInView
              :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
              :transition="{ duration: 0.5 }"
            >
              <h2 class="text-3xl md:text-4xl font-bold text-default mb-2">
                Featured Products
              </h2>
            </MInView>
            <MInView
              :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
              :transition="{ duration: 0.5, delay: 0.1 }"
            >
              <p class="text-lg text-muted">
                Handpicked selections just for you
              </p>
            </MInView>
          </div>
          <MInView
            :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
            :transition="{ duration: 0.5, delay: 0.2 }"
            class="mt-4 md:mt-0"
          >
            <UButton
              to="#"
              variant="outline"
              color="primary"
              size="lg"
              class="font-medium"
            >
              View All Products
            </UButton>
          </MInView>
        </div>
        <MAnimatedGroup
          :stagger-children="0.1"
          preset="slide"
          initial="hidden"
          animate="visible"
          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"
        >
          <MInView
            v-for="(product, index) in products"
            :key="index"
            :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
            :transition="{ duration: 0.5, delay: index * 0.1 }"
            class="group"
          >
            <UCard
              class="h-full flex flex-col group hover:shadow-lg transition-all duration-300 bg-elevated"
              :ui="{ body: { base: 'flex-1 flex flex-col p-4' } }"
            >
              <div class="relative overflow-hidden rounded-lg mb-4">
                <img
                  :src="product.image"
                  :alt="product.name"
                  class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105"
                >
                <div class="absolute top-3 right-3">
                  <UButton
                    icon="i-heroicons-heart"
                    color="white"
                    variant="solid"
                    size="sm"
                    square
                    class="rounded-full"
                  />
                </div>
                <div
                  v-if="product.badge"
                  class="absolute top-3 left-3"
                >
                  <UBadge
                    :color="product.badge.color"
                    variant="solid"
                  >
                    {{ product.badge.text }}
                  </UBadge>
                </div>
              </div>
              <div class="flex-1">
                <h3 class="font-semibold text-default mb-1">
                  {{ product.name }}
                </h3>
                <p class="text-sm text-muted mb-3">
                  {{ product.category }}
                </p>
                <div class="flex items-center justify-between">
                  <div class="font-bold text-default">
                    ${{ product.price }}
                    <span
                      v-if="product.originalPrice"
                      class="line-through text-sm text-muted ml-1"
                    >
                      ${{ product.originalPrice }}
                    </span>
                  </div>
                  <div class="flex">
                    <UIcon
                      v-for="i in 5"
                      :key="i"
                      :name="i <= product.rating ? 'i-heroicons-star-solid' : 'i-heroicons-star'"
                      class="w-4 h-4 text-amber-400"
                    />
                  </div>
                </div>
              </div>
            </UCard>
          </MInView>
        </MAnimatedGroup>
      </div>
    </section>

    <!-- Promotion Banner -->
    <section class="py-20 bg-gradient-to-r from-primary to-secondary text-white relative">
      <MBackgroundRippleEffect
        class="absolute inset-0 z-0"
        :colors="['var(--ui-color-primary-400)', 'var(--ui-color-secondary-400)', 'var(--ui-color-primary-300)']"
      />
      <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <MInView
              :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
              :transition="{ duration: 0.5 }"
            >
              <h2 class="text-3xl md:text-4xl font-bold mb-4">
                Limited Time Offer
              </h2>
            </MInView>
            <MInView
              :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
              :transition="{ duration: 0.5, delay: 0.1 }"
            >
              <p class="text-xl mb-6 max-w-lg">
                Get 30% off on all summer collection items. Offer valid for a limited time only.
              </p>
            </MInView>
            <MInView
              :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
              :transition="{ duration: 0.5, delay: 0.2 }"
            >
              <div class="flex items-center mb-8">
                <div class="bg-white/20 rounded-lg p-4 mr-4">
                  <div class="text-3xl font-bold">02</div>
                  <div class="text-sm">Days</div>
                </div>
                <div class="bg-white/20 rounded-lg p-4 mr-4">
                  <div class="text-3xl font-bold">18</div>
                  <div class="text-sm">Hours</div>
                </div>
                <div class="bg-white/20 rounded-lg p-4 mr-4">
                  <div class="text-3xl font-bold">45</div>
                  <div class="text-sm">Minutes</div>
                </div>
                <div class="bg-white/20 rounded-lg p-4">
                  <div class="text-3xl font-bold">30</div>
                  <div class="text-sm">Seconds</div>
                </div>
              </div>
            </MInView>
            <MInView
              :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
              :transition="{ duration: 0.5, delay: 0.3 }"
            >
              <UButton
                to="#"
                color="white"
                variant="solid"
                size="lg"
                class="font-medium px-8"
              >
                Shop Now
              </UButton>
            </MInView>
          </div>
          <div class="flex justify-center">
            <MInView
              :variants="{ hidden: { opacity: 0, scale: 0.95 }, visible: { opacity: 1, scale: 1 } }"
              :transition="{ duration: 0.5, delay: 0.2 }"
            >
              <UCard
                class="rounded-xl overflow-hidden shadow-lg border border-white/20 bg-white/10 backdrop-blur-sm"
                :ui="{
                  base: 'h-full',
                  background: 'bg-white/10',
                  ring: 'ring-0',
                  rounded: 'rounded-xl',
                  shadow: 'shadow-lg'
                }"
              >
                <div class="p-6">
                  <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center">
                      <div class="w-10 h-10 rounded-lg bg-white/20 flex items-center justify-center mr-3">
                        <UIcon
                          name="i-heroicons-gift"
                          class="w-5 h-5 text-white"
                        />
                      </div>
                      <div>
                        <div class="font-semibold text-white">
                          Summer Sale
                        </div>
                        <div class="text-sm text-white/80">
                          Up to 30% off
                        </div>
                      </div>
                    </div>
                    <UBadge
                      variant="solid"
                      color="white"
                      size="xs"
                    >
                      Hot
                    </UBadge>
                  </div>

                  <div class="space-y-4 mb-6">
                    <div class="flex justify-between items-center pb-3 border-b border-white/20">
                      <div class="text-sm font-medium text-white">
                        Deal Ends In
                      </div>
                      <div class="text-sm text-white/80">
                        Limited Time
                      </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                      <div class="bg-white/20 rounded-lg p-4 text-center">
                        <div class="text-sm text-white/80 mb-1">
                          Dresses
                        </div>
                        <div class="text-xl font-semibold text-white">
                          24+
                        </div>
                      </div>
                      <div class="bg-white/20 rounded-lg p-4 text-center">
                        <div class="text-sm text-white/80 mb-1">
                          Accessories
                        </div>
                        <div class="text-xl font-semibold text-white">
                          18+
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="flex justify-between items-center pt-4 border-t border-white/20">
                    <div class="flex items-center">
                      <UAvatar
                        :src="'https://randomuser.me/api/portraits/women/32.jpg'"
                        size="xs"
                        class="mr-2 border border-white"
                      />
                      <UAvatar
                        :src="'https://randomuser.me/api/portraits/men/44.jpg'"
                        size="xs"
                        class="mr-2 -ml-2 border border-white"
                      />
                      <UAvatar
                        :src="'https://randomuser.me/api/portraits/women/68.jpg'"
                        size="xs"
                        class="mr-2 -ml-2 border border-white"
                      />
                      <span class="text-sm text-white/80">Trending</span>
                    </div>
                    <UButton
                      to="#"
                      variant="solid"
                      color="white"
                      size="xs"
                      class="font-medium"
                    >
                      View All
                    </UButton>
                  </div>
                </div>
              </UCard>
            </MInView>
          </div>
        </div>
      </div>
    </section>

    <!-- Testimonials -->
    <section class="py-20 bg-muted">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <MInView
            :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
            :transition="{ duration: 0.5 }"
          >
            <h2 class="text-3xl md:text-4xl font-bold text-default mb-4">
              What Our Customers Say
            </h2>
          </MInView>
          <MInView
            :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
            :transition="{ duration: 0.5, delay: 0.1 }"
          >
            <p class="text-lg text-muted max-w-2xl mx-auto">
              Don't just take our word for it. Here's what our customers have to say about their experience.
            </p>
          </MInView>
        </div>
        <MAnimatedGroup
          :stagger-children="0.1"
          preset="slide"
          initial="hidden"
          animate="visible"
          class="grid grid-cols-1 lg:grid-cols-3 gap-8"
        >
          <MInView
            v-for="(testimonial, index) in testimonials"
            :key="index"
            :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
            :transition="{ duration: 0.5, delay: index * 0.1 }"
          >
            <UCard
              class="bg-elevated"
              :ui="{ body: { base: 'p-6' } }"
            >
              <div class="flex items-center mb-4">
                <UAvatar
                  :src="testimonial.author.avatar"
                  :alt="testimonial.author.name"
                  size="md"
                  class="mr-3"
                />
                <div>
                  <h4 class="font-semibold text-default">
                    {{ testimonial.author.name }}
                  </h4>
                  <p class="text-sm text-muted">
                    {{ testimonial.author.role }}
                  </p>
                </div>
              </div>
              <p class="text-muted mb-4">
                {{ testimonial.content }}
              </p>
              <div class="flex">
                <UIcon
                  v-for="i in 5"
                  :key="i"
                  :name="i <= testimonial.rating ? 'i-heroicons-star-solid' : 'i-heroicons-star'"
                  class="w-5 h-5 text-amber-400"
                />
              </div>
            </UCard>
          </MInView>
        </MAnimatedGroup>
      </div>
    </section>

    <!-- Newsletter -->
    <section class="py-20 bg-muted">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <MInView
          :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
          :transition="{ duration: 0.5 }"
        >
          <h2 class="text-3xl md:text-4xl font-bold text-default mb-4">
            Stay in the Loop
          </h2>
        </MInView>
        <MInView
          :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
          :transition="{ duration: 0.5, delay: 0.1 }"
        >
          <p class="text-lg text-muted mb-8 max-w-2xl mx-auto">
            Subscribe to our newsletter and be the first to know about new collections, exclusive offers, and style tips.
          </p>
        </MInView>
        <MInView
          :variants="{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }"
          :transition="{ duration: 0.5, delay: 0.2 }"
        >
          <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
            <UInput
              placeholder="Enter your email"
              size="lg"
              class="flex-1"
            />
            <UButton
              type="submit"
              size="lg"
              class="font-medium px-8"
            >
              Subscribe
            </UButton>
          </form>
        </MInView>
      </div>
    </section>

    <!-- Footer -->
    <footer class="bg-elevated text-muted py-12 relative">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
          <div class="lg:col-span-2">
            <h3 class="text-white text-xl font-bold mb-4">
              StyleHub
            </h3>
            <p class="mb-6 max-w-md">
              Premium fashion for the modern individual. Quality, style, and sustainability in every piece.
            </p>
            <div class="flex space-x-4">
              <UButton
                v-for="(social, index) in socialLinks"
                :key="index"
                :icon="social.icon"
                :to="social.to"
                color="gray"
                variant="ghost"
                size="sm"
                square
                class="hover:bg-gray-800"
              />
            </div>
          </div>
          <div
            v-for="(column, index) in footerLinks"
            :key="index"
          >
            <h4 class="text-white font-semibold mb-4">
              {{ column.title }}
            </h4>
            <ul class="space-y-2">
              <li
                v-for="(link, linkIndex) in column.links"
                :key="linkIndex"
              >
                <ULink
                  :to="link.to"
                  class="hover:text-white transition-colors hover:underline"
                >
                  {{ link.label }}
                </ULink>
              </li>
            </ul>
          </div>
        </div>
        <div class="border-t border-gray-800 mt-12 pt-8 text-sm flex flex-col md:flex-row justify-between items-center">
          <p>© 2023 StyleHub. All rights reserved.</p>
          <div class="mt-4 md:mt-0 flex space-x-6">
            <ULink
              to="#"
              class="hover:text-white transition-colors hover:underline"
            >Privacy Policy</ULink>
            <ULink
              to="#"
              class="hover:text-white transition-colors hover:underline"
            >Terms of Service</ULink>
            <ULink
              to="#"
              class="hover:text-white transition-colors hover:underline"
            >Cookies</ULink>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
const navigationItems = [
  {
    label: 'Women',
    to: '#'
  },
  {
    label: 'Men',
    to: '#'
  },
  {
    label: 'Accessories',
    to: '#'
  },
  {
    label: 'Collections',
    to: '#'
  },
  {
    label: 'Sale',
    to: '#'
  }
]

const categories = [
  {
    name: 'Women\'s Fashion',
    image: 'https://images.unsplash.com/photo-1496747611176-843222e1e57c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
    link: '#'
  },
  {
    name: 'Men\'s Collection',
    image: 'https://images.unsplash.com/photo-1534030347209-467a5b0ad3e6?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
    link: '#'
  },
  {
    name: 'Accessories',
    image: 'https://images.unsplash.com/photo-1591561954557-26941169b49e?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
    link: '#'
  },
  {
    name: 'Footwear',
    image: 'https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
    link: '#'
  }
]

const products = [
  {
    name: 'Premium Cotton T-Shirt',
    category: 'Women\'s Tops',
    price: 29.99,
    originalPrice: 39.99,
    rating: 4,
    image: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
    badge: { text: 'Sale', color: 'red' }
  },
  {
    name: 'Designer Jeans',
    category: 'Men\'s Bottoms',
    price: 89.99,
    rating: 5,
    image: 'https://images.unsplash.com/photo-1541099649105-f69ad21f3246?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80'
  },
  {
    name: 'Leather Handbag',
    category: 'Accessories',
    price: 129.99,
    originalPrice: 159.99,
    rating: 5,
    image: 'https://images.unsplash.com/photo-1548036328-c9fa89d128fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
    badge: { text: 'New', color: 'green' }
  },
  {
    name: 'Running Shoes',
    category: 'Footwear',
    price: 119.99,
    rating: 4,
    image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80'
  }
]

const testimonials = [
  {
    content: 'The quality of the clothing is exceptional. I\'ve purchased several items and each one has exceeded my expectations. The fit is perfect and the materials feel premium.',
    author: {
      name: 'Emma Davis',
      role: 'Fashion Blogger',
      avatar: 'https://randomuser.me/api/portraits/women/32.jpg'
    },
    rating: 5
  },
  {
    content: 'Fast shipping and excellent customer service. I had a question about sizing and they responded within hours with detailed guidance. Will definitely shop here again.',
    author: {
      name: 'James Wilson',
      role: 'Customer',
      avatar: 'https://randomuser.me/api/portraits/men/44.jpg'
    },
    rating: 5
  },
  {
    content: 'The summer collection is absolutely stunning. I love how they combine style with sustainability. The pieces are versatile and can be dressed up or down.',
    author: {
      name: 'Sophia Martinez',
      role: 'Style Influencer',
      avatar: 'https://randomuser.me/api/portraits/women/68.jpg'
    },
    rating: 4
  }
]

const socialLinks = [
  { label: 'Instagram', to: '#', icon: 'i-simple-icons-instagram' },
  { label: 'Pinterest', to: '#', icon: 'i-simple-icons-pinterest' },
  { label: 'Twitter', to: '#', icon: 'i-simple-icons-x' },
  { label: 'Facebook', to: '#', icon: 'i-simple-icons-facebook' }
]

const footerLinks = [
  {
    title: 'Shop',
    links: [
      { label: 'Women', to: '#' },
      { label: 'Men', to: '#' },
      { label: 'Accessories', to: '#' },
      { label: 'Fresh Drops', to: '#' },
      { label: 'Sale', to: '#' }
    ]
  },
  {
    title: 'Help',
    links: [
      { label: 'Customer Service', to: '#' },
      { label: 'Track Order', to: '#' },
      { label: 'Returns & Exchanges', to: '#' },
      { label: 'Shipping Info', to: '#' },
      { label: 'FAQs', to: '#' }
    ]
  },
  {
    title: 'About',
    links: [
      { label: 'Our Story', to: '#' },
      { label: 'Careers', to: '#' },
      { label: 'Sustainability', to: '#' },
      { label: 'Press', to: '#' },
      { label: 'Contact', to: '#' }
    ]
  }
]
</script>
```

</template>
</code-preview>


## Sitemap

See the full [sitemap](https://nuxt-motion-block.pages.dev/sitemap.md) for all pages.