<!--
@type: Feature
@industry: E-commerce
@style: Modern
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="w-full py-12 md:py-24 bg-white">
<div class="max-w-7xl mx-auto px-4 text-center">
<div class="max-w-4xl mx-auto space-y-6">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl md:text-5xl">Why Choose StyleHub?</h2>
<p class="text-lg text-gray-600 md:text-xl">
Experience the difference with our commitment to quality, convenience, and customer satisfaction.</p>
</div>
<div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<div
class="p-8 flex flex-col items-center text-center transition-all duration-300 hover:scale-[1.02]">
<div class="bg-orange-100 rounded-full p-3 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-truck h-10 w-10 text-orange-500">
<path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"></path>
<path d="M15 18H9"></path>
<path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"></path>
<circle cx="17" cy="18" r="2"></circle>
<circle cx="7" cy="18" r="2"></circle>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">Fast & Reliable Delivery</h3>
<p class="text-gray-600">Get your orders delivered swiftly and securely right to your doorstep, every time.</p>
</div>
<div
class="p-8 flex flex-col items-center text-center transition-all duration-300 hover:scale-[1.02]">
<div class="bg-orange-100 rounded-full p-3 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-shield-check h-10 w-10 text-orange-500">
<path
d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z">
</path>
<path d="m9 12 2 2 4-4"></path>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">Secure Payment Options</h3>
<p class="text-gray-600">Shop with peace of mind using our encrypted and secure payment gateways.</p>
</div>
<div
class="p-8 flex flex-col items-center text-center transition-all duration-300 hover:scale-[1.02]">
<div class="bg-orange-100 rounded-full p-3 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-gift h-10 w-10 text-orange-500">
<rect x="3" y="8" width="18" height="4" rx="1"></rect>
<path d="M12 8v13"></path>
<path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"></path>
<path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"></path>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">Exclusive Member Rewards</h3>
<p class="text-gray-600">Join our loyalty program and unlock special discounts, early access, and more.</p>
</div>
<div
class="p-8 flex flex-col items-center text-center transition-all duration-300 hover:scale-[1.02]">
<div class="bg-orange-100 rounded-full p-3 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-10 w-10 text-orange-500">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">Curated Product Selection</h3>
<p class="text-gray-600">Discover unique and high-quality items hand-picked by our fashion experts.</p>
</div>
<div
class="p-8 flex flex-col items-center text-center transition-all duration-300 hover:scale-[1.02]">
<div class="bg-orange-100 rounded-full p-3 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-credit-card h-10 w-10 text-orange-500">
<rect width="20" height="14" x="2" y="5" rx="2"></rect>
<line x1="2" x2="22" y1="10" y2="10"></line>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">Flexible Payment Plans</h3>
<p class="text-gray-600">Enjoy convenient payment options, including buy now, pay later solutions.</p>
</div>
<div
class="p-8 flex flex-col items-center text-center transition-all duration-300 hover:scale-[1.02]">
<div class="bg-orange-100 rounded-full p-3 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-headset h-10 w-10 text-orange-500">
<path
d="M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z">
</path>
<path d="M21 16v2a4 4 0 0 1-4 4h-5"></path>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">24/7 Customer Support</h3>
<p class="text-gray-600">Our dedicated support team is always here to assist you with any queries.</p>
</div>
</div>
<div class="mt-12">
<button data-slot="button"
class="inline-flex items-center justify-center gap-2 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">
Explore Our Benefits
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-arrow-right h-6 w-6">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</button>
</div>
</div>
</section>
