<!--
@type: Problem/Solution
@industry: E-commerce
@style: Modern
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="w-full py-12 md:py-24 lg:py-32 bg-white">
<div class="max-w-7xl mx-auto px-4">
<div class="grid gap-12 lg:grid-cols-2 items-center">
<div class="space-y-8 text-center lg:text-left">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl md:text-5xl">
Facing Common Shopping Challenges?
</h2>
<p class="text-xl text-gray-600 leading-relaxed max-w-2xl mx-auto lg:mx-0">
We understand the frustrations of online shopping. Here are some common problems we've identified and are committed to solving for you.
</p>
<div class="space-y-6">
<div class="flex items-start gap-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-circle-x h-8 w-8 text-red-500 flex-shrink-0 mt-1">
<circle cx="12" cy="12" r="10"></circle>
<path d="m15 9-6 6"></path>
<path d="m9 9 6 6"></path>
</svg>
<div>
<h3 class="text-xl font-semibold text-gray-900">Overwhelmed by Endless Choices?</h3>
<p class="text-gray-600">
Navigating countless products can be daunting, making it hard to find what you truly need.
</p>
</div>
</div>
<div class="flex items-start gap-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-circle-x h-8 w-8 text-red-500 flex-shrink-0 mt-1">
<circle cx="12" cy="12" r="10"></circle>
<path d="m15 9-6 6"></path>
<path d="m9 9 6 6"></path>
</svg>
<div>
<h3 class="text-xl font-semibold text-gray-900">Uncertain About Product Quality?</h3>
<p class="text-gray-600">
It's tough to trust online descriptions without seeing or feeling the product yourself.
</p>
</div>
</div>
<div class="flex items-start gap-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-circle-x h-8 w-8 text-red-500 flex-shrink-0 mt-1">
<circle cx="12" cy="12" r="10"></circle>
<path d="m15 9-6 6"></path>
<path d="m9 9 6 6"></path>
</svg>
<div>
<h3 class="text-xl font-semibold text-gray-900">Frustrated by Complicated Returns?</h3>
<p class="text-gray-600">
Dealing with returns should be simple, not a headache that deters your shopping.
</p>
</div>
</div>
</div>
</div>
<div class="relative flex justify-center lg:justify-end">
<img alt="Seamless online shopping experience"
loading="lazy" width="500" height="600" 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-unsplash-1920x1080.webp">
<div class="absolute -bottom-6 -left-6 bg-orange-500 text-white rounded-xl p-4 shadow-lg">
<div class="flex items-center gap-3"><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-lightbulb h-6 w-6">
<path
d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5">
</path>
<path d="M9 18h6"></path>
<path d="M10 22h4"></path>
</svg>
<div>
<div class="font-semibold text-lg">Your Solution Awaits</div>
<div class="text-sm">Experience the difference.</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-20 text-center">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl md:text-5xl">Our Seamless Solutions</h2>
<p class="text-xl text-gray-600 leading-relaxed max-w-2xl mx-auto mt-6">
At StyleHub, we've crafted a shopping experience designed to eliminate these pain points, making your journey enjoyable and effortless.
</p>
<div class="mt-12 grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="bg-gray-50 p-8 rounded-xl border border-orange-300 shadow-md flex flex-col items-center text-center">
<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-circle-check-big h-12 w-12 text-orange-500 mb-4">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path>
</svg>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Curated Collections & Smart Filters</h3>
<p class="text-gray-600">
Our expert team curates collections, and smart filters help you quickly narrow down your options.
</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl border border-orange-300 shadow-md flex flex-col items-center text-center">
<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-circle-check-big h-12 w-12 text-orange-500 mb-4">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path>
</svg>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Guaranteed Quality & Authenticity</h3>
<p class="text-gray-600">
We partner only with verified brands and offer detailed product insights for peace of mind.
</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl border border-orange-300 shadow-md flex flex-col items-center text-center">
<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-circle-check-big h-12 w-12 text-orange-500 mb-4">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path>
</svg>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Hassle-Free Returns & Exchanges</h3>
<p class="text-gray-600">
Enjoy a straightforward return policy with easy steps, ensuring your satisfaction is our priority.
</p>
</div>
</div>
<div class="mt-12">
<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">
Start Your Seamless Shopping Journey
</button>
</div>
</div>
</div>
</section>
