<!--
@type: About Us
@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">
<div class="grid gap-12 lg:grid-cols-2 items-center">
<div class="relative flex justify-center">
<img alt="Our Team at StyleHub" loading="lazy" width="500" height="600" decoding="async" data-nimg="1"
class="w-full max-w-lg h-auto rounded-2xl shadow-2xl object-cover"
src="https://landinggo.com/assets/img/stock/team/team-pexels-1080x1618.webp">
<div class="absolute -bottom-6 -right-2 bg-white border-2 border-orange-500 text-orange-500 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-users h-6 w-6">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
<div>
<div class="font-semibold text-lg">Join Our Journey</div>
<div class="text-sm">Be part of something great.</div>
</div>
</div>
</div>
</div>
<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">About StyleHub: Our Story</h2>
<p class="text-lg text-gray-600 leading-relaxed max-w-2xl mx-auto lg:mx-0">
Founded with a passion for bringing exceptional style and quality to every home, StyleHub is more than just an
e-commerce platform. We are a community dedicated to curated fashion and a seamless shopping experience.
</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-heart h-8 w-8 text-orange-500 flex-shrink-0 mt-1">
<path
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z">
</path>
</svg>
<div>
<h3 class="text-xl font-semibold text-gray-900">Customer-Centric</h3>
<p class="text-gray-600">Your satisfaction is our priority. We're dedicated to providing an exceptional shopping experience.</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-award h-8 w-8 text-orange-500 flex-shrink-0 mt-1">
<path
d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526">
</path>
<circle cx="12" cy="8" r="6"></circle>
</svg>
<div>
<h3 class="text-xl font-semibold text-gray-900">Quality & Craftsmanship</h3>
<p class="text-gray-600">We meticulously select products that meet the highest standards of quality and design.</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-leaf h-8 w-8 text-orange-500 flex-shrink-0 mt-1">
<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"></path>
<path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"></path>
</svg>
<div>
<h3 class="text-xl font-semibold text-gray-900">Sustainable Practices</h3>
<p class="text-gray-600">Committed to ethical sourcing and environmentally friendly operations.</p>
</div>
</div>
</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">
Meet Our Team
</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">
Our Mission
</button>
</div>
</div>
</div>
</div>
</section>
