Template
E-commerce Landing Page
A modern e-commerce landing page template with product showcases, promotional banners, and conversion-focused design.
E-commerce Landing Page Template
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
Limited Time Offer
Summer CollectionUp to 70% Off
Discover our exclusive summer collection with premium quality fashion items at unbeatable prices. Free shipping on orders over $50.
Free Shipping
30-Day Returns
Secure Payment
Summer Collection
Discover our latest fashion trends handpicked for you
Trending Categories
Updated hourly
Women's Fashion
24% off
Men's Collection
18% off
Accessories
30% off
Home Decor
15% off
Flash Sale
Limited time offer - Up to 50% off
Featured Products
Handpicked selections just for you
Sale
Premium Cotton T-Shirt
Women's Tops
$29.99 $39.99
Designer Jeans
Men's Bottoms
$89.99
New
Leather Handbag
Accessories
$129.99 $159.99
Running Shoes
Footwear
$119.99
What Our Customers Say
Don't just take our word for it. Here's what our customers have to say about their experience.
Emma Davis
Fashion Blogger
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.
James Wilson
Customer
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.
Sophia Martinez
Style Influencer
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.
Stay in the Loop
Subscribe to our newsletter and be the first to know about new collections, exclusive offers, and style tips.
<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: 'New Arrivals', 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>