Component:
Problem-solution E-commerce Modern
Colors:
Description:
This carefully crafted Problem/Solution component is perfect for E-commerce landing pages, featuring a Modern design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.
<!--
@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> This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page