81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { PageContainer } from "@/components/shared/PageContainer";
|
|
import { SectionContainer } from "@/components/shared/SectionContainer";
|
|
import { SectionHeading } from "@/components/shared/SectionHeading";
|
|
|
|
const teamMembers = [
|
|
{
|
|
name: "Dan Smith",
|
|
role: "Manager",
|
|
image: "/images/aiero/portrait-confident-man.jpg",
|
|
},
|
|
{
|
|
name: "Alan Begham",
|
|
role: "CEO",
|
|
image: "/images/aiero/waist-up-shot-handsome-calm.jpg",
|
|
},
|
|
{
|
|
name: "Brandon Adams",
|
|
role: "HR",
|
|
image: "/images/aiero/confident-ginger-man-with-trendy.jpg",
|
|
},
|
|
{
|
|
name: "Arthur Dowson",
|
|
role: "AI Programmer",
|
|
image: "/images/aiero/funny-curious-man-makes.jpg",
|
|
},
|
|
];
|
|
|
|
export function TeamSection() {
|
|
return (
|
|
<SectionContainer paddingY="lg">
|
|
<PageContainer>
|
|
<div className="mb-12 flex flex-col items-center justify-between gap-6 md:flex-row md:items-end">
|
|
<SectionHeading
|
|
tag="team"
|
|
title="The Neural Network experts: uniting talent for intelligent solutions"
|
|
titleClassName="text-white max-w-[600px]"
|
|
/>
|
|
<div className="flex flex-col items-start gap-4 md:items-end">
|
|
<p className="max-w-[200px] text-[16px] text-aiero-text-muted md:text-right">
|
|
Awesome team members + 0 Explore more
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
{teamMembers.map((member, i) => (
|
|
<div
|
|
key={i}
|
|
className="group relative overflow-hidden rounded-[25px] bg-aiero-card-dark"
|
|
>
|
|
<div className="relative aspect-[3/4] w-full">
|
|
<img
|
|
src={member.image}
|
|
alt={member.name}
|
|
className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
|
|
onError={(e) => {
|
|
(e.target as HTMLImageElement).src =
|
|
"/images/aiero/home-9-img.png"; // Fallback image
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-80" />
|
|
</div>
|
|
<div className="absolute bottom-0 left-0 w-full p-6 text-white transition-transform duration-300 group-hover:-translate-y-2">
|
|
<h4
|
|
className="text-[20px] font-bold"
|
|
style={{ fontFamily: "var(--font-dm-sans)" }}
|
|
>
|
|
{member.name}
|
|
</h4>
|
|
<p className="text-[14px] text-aiero-teal">{member.role}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</PageContainer>
|
|
</SectionContainer>
|
|
);
|
|
}
|