<!--
@type: Team
@industry: E-commerce
@style: Modern
@category: Support, 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">Meet Our Passionate Team</h2>
<p class="text-lg text-gray-600 md:text-xl">Behind every curated collection and seamless experience is a dedicated team committed to bringing you the best in fashion and service.</p>
</div>
<div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div
class="group bg-gray-50 p-6 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-2xl hover:scale-[1.02]">
<img alt="Jane Doe - CEO & Founder" loading="lazy" width="160" height="160" decoding="async" data-nimg="1"
class="rounded-full object-cover mb-4 border-4 border-orange-100 group-hover:border-orange-400 transition-all duration-300"
src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp">
<h3 class="text-2xl font-semibold text-gray-900 mb-1">Jane Doe</h3>
<p class="text-orange-500 font-medium mb-3">CEO & Founder</p>
<p class="text-gray-600 text-sm mb-4">With over 15 years in fashion retail, Jane leads StyleHub's vision for accessible, high-quality style.</p>
<div class="flex gap-3">
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn of Jane Doe">
<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-linkedin h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect width="4" height="12" x="2" y="9"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
</a>
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="Twitter of Jane Doe">
<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-twitter h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z">
</path>
</svg>
</a>
</div>
</div>
<div class="group bg-gray-50 p-6 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-2xl hover:scale-[1.02]">
<img alt="John Smith - Head of Product" loading="lazy" width="160" height="160" decoding="async" data-nimg="1"
class="rounded-full object-cover mb-4 border-4 border-orange-100 group-hover:border-orange-400 transition-all duration-300"
src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp">
<h3 class="text-2xl font-semibold text-gray-900 mb-1">John Smith</h3>
<p class="text-orange-500 font-medium mb-3">Head of Product</p>
<p class="text-gray-600 text-sm mb-4">John's expertise in product development ensures every item meets our rigorous standards for design and durability.</p>
<div class="flex gap-3">
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn of John Smith">
<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-linkedin h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect width="4" height="12" x="2" y="9"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
</a>
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="Twitter of John Smith">
<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-twitter h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z">
</path>
</svg>
</a>
</div>
</div>
<div
class="group bg-gray-50 p-6 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-2xl hover:scale-[1.02]">
<img alt="Emily White - Chief Marketing Officer" loading="lazy" width="160" height="160" decoding="async"
data-nimg="1" class="rounded-full object-cover mb-4 border-4 border-orange-100 group-hover:border-orange-400 transition-all duration-300"
src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp">
<h3 class="text-2xl font-semibold text-gray-900 mb-1">Emily White</h3>
<p class="text-orange-500 font-medium mb-3">Chief Marketing Officer</p>
<p class="text-gray-600 text-sm mb-4">Emily crafts compelling campaigns that connect our brand with customers,
sharing the StyleHub story globally.</p>
<div class="flex gap-3">
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn of Emily White">
<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-linkedin h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect width="4" height="12" x="2" y="9"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
</a>
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="Twitter of Emily White">
<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-twitter h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z">
</path>
</svg>
</a>
</div>
</div>
<div
class="group bg-gray-50 p-6 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-2xl hover:scale-[1.02]">
<img alt="David Lee - Lead Designer" loading="lazy" width="160" height="160" decoding="async" data-nimg="1"
class="rounded-full object-cover mb-4 border-4 border-orange-100 group-hover:border-orange-400 transition-all duration-300"
src="https://landinggo.com/assets/img/stock/team/team-40x40-4.webp">
<h3 class="text-2xl font-semibold text-gray-900 mb-1">David Lee</h3>
<p class="text-orange-500 font-medium mb-3">Lead Designer</p>
<p class="text-gray-600 text-sm mb-4">David's innovative designs set trends and bring fresh perspectives to our
collections, inspiring our customers.</p>
<div class="flex gap-3">
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn of David Lee">
<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-linkedin h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect width="4" height="12" x="2" y="9"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
</a>
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="Twitter of David Lee">
<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-twitter h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z">
</path>
</svg>
</a>
</div>
</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">
Join Our Growing Team
</button>
</div>
</div>
</section>
