98 lines
4.4 KiB
TypeScript
98 lines
4.4 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
|
|
export const TeamSection = () => {
|
|
return (
|
|
<section id="team" className="py-20 bg-white relative overflow-hidden">
|
|
<div className="container mx-auto px-6 relative">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-gray-800 ">
|
|
Meet Our Team
|
|
</h2>
|
|
<div className="h-1 w-24 bg-gradient-to-r from-purple-500 to-pink-400 rounded-full mx-auto mb-6"></div>
|
|
<p className="text-gray-600 max-w-3xl mx-auto">
|
|
Our diverse team of licensed therapists and wellness professionals
|
|
bring decades of combined experience and specialized training to
|
|
support your unique needs.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{[
|
|
{
|
|
name: "Dr. Emily Chen",
|
|
role: "Founder & Clinical Director",
|
|
image:
|
|
"https://images.unsplash.com/photo-1573496359142-b8d87734a5a2",
|
|
description:
|
|
"With over 15 years of experience in clinical psychology, Dr. Chen specializes in trauma-informed therapy and mindfulness-based approaches.",
|
|
},
|
|
{
|
|
name: "Dr. Marcus Johnson",
|
|
role: "Lead Therapist",
|
|
image:
|
|
"https://images.unsplash.com/photo-1560250097-0b93528c311a",
|
|
description:
|
|
"Specializing in cognitive behavioral therapy and anxiety disorders, Dr. Johnson has helped hundreds of clients develop effective coping strategies.",
|
|
},
|
|
{
|
|
name: "Sarah Williams",
|
|
role: "Art Therapist",
|
|
image:
|
|
"https://images.unsplash.com/photo-1580489944761-15a19d654956",
|
|
description:
|
|
"Sarah combines traditional therapeutic approaches with creative expression to help clients process emotions and experiences.",
|
|
},
|
|
{
|
|
name: "James Rivera",
|
|
role: "Mindfulness Coach",
|
|
image:
|
|
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
|
|
description:
|
|
"A certified meditation instructor and former stress management consultant, James helps clients build sustainable mindfulness practices.",
|
|
},
|
|
].map((member, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-white rounded-xl shadow-lg border-0 overflow-hidden transition-all duration-300 hover:shadow-xl group"
|
|
>
|
|
<div className="h-2 bg-gradient-to-r from-purple-500 to-pink-400 w-full"></div>
|
|
<div className="p-6">
|
|
<div className="w-32 h-32 rounded-full mx-auto mb-6 overflow-hidden">
|
|
<img
|
|
src={member.image}
|
|
alt={member.name}
|
|
className="w-full h-full object-cover rounded-lg mb-6"
|
|
/>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-gray-800 mb-1 text-center ">
|
|
{member.name}
|
|
</h3>
|
|
<p className="text-purple-600 mb-4 text-center font-medium ">
|
|
{member.role}
|
|
</p>
|
|
<p className="text-gray-600 text-center">
|
|
{member.description}
|
|
</p>
|
|
<div className="mt-4 flex justify-center space-x-3">
|
|
<button className="w-8 h-8 rounded-full bg-gray-100 hover:bg-purple-100 flex items-center justify-center transition-colors duration-300">
|
|
<i className="fab fa-linkedin-in text-gray-600 hover:text-purple-700"></i>
|
|
</button>
|
|
<button className="w-8 h-8 rounded-full bg-gray-100 hover:bg-purple-100 flex items-center justify-center transition-colors duration-300">
|
|
<i className="far fa-envelope text-gray-600 hover:text-purple-700"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex justify-center mt-12">
|
|
<Button className="mt-4 bg-gradient-to-r from-purple-500 to-pink-400 hover:opacity-90 transition-all duration-300 !rounded-button">
|
|
View All Team Members
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|