<!--
@type: Hero
@industry: E-commerce
@style: Modern
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="w-full bg-white">
<div class="max-w-7xl mx-auto px-4">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center py-12 lg:py-24">
<div class="flex flex-col justify-center space-y-8">
<div class="space-y-4">
<div class="inline-block">
<span class="inline-flex items-center rounded-full bg-orange-100 px-3 py-1 text-sm font-medium text-orange-700">
✅ New Collection
</span>
</div>
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl xl:text-7xl/none">
Discover Your<span class="block text-orange-500">Perfect Style</span>
</h1>
<p class="max-w-[600px] text-xl text-gray-600 leading-relaxed">
Explore our curated collection of premium fashion pieces designed for the
modern lifestyle. Quality craftsmanship meets contemporary design.
</p>
</div>
<div class="flex flex-col gap-4 min-[400px]:flex-row">
<button data-slot="button"
class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-lg font-semibold text-white bg-orange-500 hover:bg-orange-600 transition duration-150 ease-in-out cursor-pointer hover:shadow-lg">
Shop Now
</button>
<button data-slot="button"
class="inline-flex items-center justify-center px-6 py-3 border-2 border-gray-200 rounded-lg text-lg font-semibold text-gray-700 hover:bg-gray-50 transition duration-150 ease-in-out cursor-pointer hover:shadow-lg">
View Lookbook
</button>
</div>
<div class="flex items-center gap-8 pt-4">
<div class="text-center">
<div class="text-2xl font-bold text-gray-900">50K+</div>
<div class="text-sm text-gray-600">Happy Customers</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-gray-900">1000+</div>
<div class="text-sm text-gray-600">Products</div>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-gray-900">4.9★</div>
<div class="text-sm text-gray-600">Rating</div>
</div>
</div>
</div>
<div class="relative lg:order-last">
<div class="relative">
<img alt="Fashion model showcasing modern clothing collection" width="600" height="400" decoding="async"
data-nimg="1" class="w-full h-auto rounded-2xl shadow-2xl object-cover"
src="https://landinggo.com/assets/img/stock/hero/marketing-pexels-1620x1080.webp" loading="lazy" />
<div class="absolute -bottom-6 -left-6 bg-white rounded-xl p-4 shadow-lg border">
<div class="flex items-center gap-3">
<div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
<span class="text-orange-600 font-bold">✓</span>
</div>
<div>
<div class="font-semibold text-gray-900">Free Shipping</div>
<div class="text-sm text-gray-600">On orders over $100</div>
</div>
</div>
</div>
<div class="absolute -top-6 -right-2 bg-orange-500 text-white rounded-xl p-4 shadow-lg">
<div class="text-center">
<div class="text-2xl font-bold">30%</div>
<div class="text-sm">OFF</div>
</div>
</div>
</div>
<!-- Customer testimonial -->
<div class="mt-16 max-w-4xl mx-auto">
<div class="flex flex-col md:flex-row gap-6 items-center">
<div class="flex-shrink-0">
<!-- Customer image -->
<img
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp"
alt="Customer testimonial"
class="w-16 h-16 rounded-full border-4 border-orange-300"
width="40"
height="40"
loading="lazy"
>
</div>
<div>
<p class="text-gray-600 mb-4">"This platform has completely transformed how we approach product development."</p>
<div>
<p class="font-medium text-gray-800">Sarah Johnson
<span class="text-sm text-gray-500">- Product Director, TechSolutions Inc.</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
