Professional Team Showcase Section Component
A visually engaging team showcase section featuring a grid of interactive profile cards. Each card includes a professional profil picture with a hover-zoom effect, an expandable section for detailed biographies, and social media links, all designed to be fully responsive
LTR
RTL
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-900">
<!-- Header -->
<header class="text-center mb-16">
<h2 class="text-4xl font-bold text-gray-900 mb-4">Meet Our Team</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
Passionate professionals dedicated to innovation and excellence
</p>
</header>
<!-- Team Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
<!-- Team Member Card Component -->
<article x-data="{ expanded: false }"
class="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group">
<!-- Image -->
<div class="relative h-80 overflow-hidden">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=face"
alt="John Smith - CEO"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
<div class="absolute bottom-4 left-4 text-white">
<h3 class="text-2xl font-bold">John Smith</h3>
<p class="text-blue-200 font-medium">CEO & Founder</p>
</div>
</div>
<!-- Content -->
<div class="p-6">
<p class="text-gray-600 leading-relaxed mb-4">
Visionary leader with 15+ years in tech innovation, driving company growth and strategic partnerships.
</p>
<!-- Expandable Details -->
<div x-show="expanded"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
class="border-t border-gray-200 pt-4 mb-4">
<p class="text-gray-600 text-sm leading-relaxed">
Stanford MBA graduate who founded the company in 2010. Regular speaker at tech conferences and mentor to startup founders. Passionate about sustainable technology solutions.
</p>
</div>
<!-- Actions -->
<div class="flex items-center justify-between">
<button @click="expanded = !expanded"
class="text-blue-600 hover:text-blue-800 font-semibold transition-colors duration-200">
<span x-text="expanded ? 'Show Less' : 'Learn More'"></span>
</button>
<div class="flex space-x-3">
<a href="#" class="text-gray-400 hover:text-blue-600 transition-colors duration-200">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
</div>
</div>
</div>
</article>
<!-- Team Member 2 -->
<article x-data="{ expanded: false }"
class="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group">
<div class="relative h-80 overflow-hidden">
<img src="https://images.unsplash.com/photo-1614786269829-d24616faf56d?q=80&w=735&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Sarah Johnson - Lead Designer"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
<div class="absolute bottom-4 left-4 text-white">
<h3 class="text-2xl font-bold">Sarah Johnson</h3>
<p class="text-blue-200 font-medium">Lead Designer</p>
</div>
</div>
<div class="p-6">
<p class="text-gray-600 leading-relaxed mb-4">
Creative visionary specializing in user experience design with focus on accessibility and inclusive design.
</p>
<div x-show="expanded"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
class="border-t border-gray-200 pt-4 mb-4">
<p class="text-gray-600 text-sm leading-relaxed">
8+ years designing user interfaces with awards for accessibility innovation. Leads design systems and mentors junior designers. Advocates for inclusive design practices.
</p>
</div>
<div class="flex items-center justify-between">
<button @click="expanded = !expanded"
class="text-blue-600 hover:text-blue-800 font-semibold transition-colors duration-200">
<span x-text="expanded ? 'Show Less' : 'Learn More'"></span>
</button>
<div class="flex space-x-3">
<a href="#" class="text-gray-400 hover:text-blue-600 transition-colors duration-200">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
</div>
</div>
</div>
</article>
<!-- Team Member 3 -->
<article x-data="{ expanded: false }"
class="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group">
<div class="relative h-80 overflow-hidden">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=face"
alt="Mike Chen - Senior Developer"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
<div class="absolute bottom-4 left-4 text-white">
<h3 class="text-2xl font-bold">Mike Chen</h3>
<p class="text-blue-200 font-medium">Senior Developer</p>
</div>
</div>
<div class="p-6">
<p class="text-gray-600 leading-relaxed mb-4">
Full-stack engineer with expertise in React, Node.js, and cloud architecture. Problem-solving enthusiast.
</p>
<div x-show="expanded"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
class="border-t border-gray-200 pt-4 mb-4">
<p class="text-gray-600 text-sm leading-relaxed">
Key contributor to platform scaling initiatives. Mentors junior developers and actively contributes to open-source projects. Certified in AWS and Kubernetes.
</p>
</div>
<div class="flex items-center justify-between">
<button @click="expanded = !expanded"
class="text-blue-600 hover:text-blue-800 font-semibold transition-colors duration-200">
<span x-text="expanded ? 'Show Less' : 'Learn More'"></span>
</button>
<div class="flex space-x-3">
<a href="#" class="text-gray-400 hover:text-blue-600 transition-colors duration-200">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
</div>
</div>
</div>
</article>
</div>
</section>