108 lines
3.7 KiB
TypeScript
108 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { PageContainer } from "@/components/shared/PageContainer";
|
|
import { SectionContainer } from "@/components/shared/SectionContainer";
|
|
import { SectionHeading } from "@/components/shared/SectionHeading";
|
|
import { tenextButton as TenextButton } from "@/components/shared/AieroButton";
|
|
import { Counter } from "@/components/shared/Counter";
|
|
|
|
const teamMembers = [
|
|
{
|
|
name: "Alan Begham",
|
|
role: "CEO",
|
|
image: "/images/tenext/waist-up-shot-handsome-calm.jpg",
|
|
},
|
|
{
|
|
name: "Arthur Dowson",
|
|
role: "AI Programmer",
|
|
image: "/images/tenext/funny-curious-man-makes.jpg",
|
|
},
|
|
{
|
|
name: "Dan Smith",
|
|
role: "Manager",
|
|
image: "/images/tenext/portrait-confident-man.jpg",
|
|
},
|
|
{
|
|
name: "Brandon Adams",
|
|
role: "HR",
|
|
image: "/images/tenext/confident-ginger-man-with-trendy.jpg",
|
|
},
|
|
{
|
|
name: "Alan Begham",
|
|
role: "CEO Neuro",
|
|
image: "/images/tenext/waist-up-shot-handsome-calm.jpg",
|
|
},
|
|
];
|
|
|
|
export function TeamSection() {
|
|
return (
|
|
<SectionContainer paddingY="lg">
|
|
<PageContainer>
|
|
<div className="columns-1 gap-6 sm:columns-2 lg:columns-4">
|
|
<div className="mb-6 flex break-inside-avoid flex-col">
|
|
<SectionHeading
|
|
tag="team"
|
|
title="The Neural Network experts: uniting talent for intelligent solutions"
|
|
titleClassName="text-tenext-dark"
|
|
/>
|
|
<div className="mt-[40px]">
|
|
<Counter
|
|
target={500}
|
|
prefix="+"
|
|
numberClassName="text-[60px] font-extrabold leading-none font-[var(--font-manrope)] text-transparent"
|
|
style={{
|
|
WebkitTextStroke: "1px #E2D7F8",
|
|
backgroundImage:
|
|
"linear-gradient(180deg, rgba(226, 215, 248, 0.44) 0%, rgba(226, 215, 248, 0.06) 90%)",
|
|
backgroundClip: "text",
|
|
WebkitBackgroundClip: "text",
|
|
}}
|
|
title="Awesome team members"
|
|
titleClassName="mt-[15px] text-[16px] font-bold text-tenext-dark"
|
|
/>
|
|
</div>
|
|
<TenextButton
|
|
variant="simple"
|
|
className="mt-[25px] text-[15px] font-medium text-tenext-dark"
|
|
showArrow={true}
|
|
>
|
|
Explore more
|
|
</TenextButton>
|
|
</div>
|
|
|
|
{teamMembers.map((member, i) => (
|
|
<div
|
|
key={i}
|
|
className="group relative mb-6 break-inside-avoid overflow-hidden rounded-[25px] bg-tenext-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/tenext/home-9-img.png";
|
|
}}
|
|
/>
|
|
<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-tenext-teal">
|
|
/ {member.role} /
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</PageContainer>
|
|
</SectionContainer>
|
|
);
|
|
}
|