123 lines
3.8 KiB
TypeScript
123 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { motion } from "framer-motion";
|
|
|
|
const teamMembers = [
|
|
{
|
|
name: "Arlene McCoy",
|
|
role: "Service Advisor",
|
|
image: "/arlene.png",
|
|
},
|
|
{
|
|
name: "Jacob Jones",
|
|
role: "Foreman / Kepala Mekanik",
|
|
image: "/jacob.png",
|
|
},
|
|
{
|
|
name: "Cameron Williamson",
|
|
role: "Technician",
|
|
image: "/cameron.png",
|
|
},
|
|
{
|
|
name: "Devon Lane",
|
|
role: "QC",
|
|
image: "/devon.png",
|
|
},
|
|
{
|
|
name: "Esther Howard",
|
|
role: "Service Manager",
|
|
image: "/howard.png",
|
|
},
|
|
{
|
|
name: "LIA KURNIA PUTRI",
|
|
role: "CRO",
|
|
image: "/lia.png",
|
|
},
|
|
];
|
|
|
|
const topMembers = teamMembers.slice(0, 5);
|
|
const bottomMember = teamMembers[5];
|
|
|
|
export default function HeaderProgramSales() {
|
|
return (
|
|
<>
|
|
<section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="flex flex-col items-center gap-6"
|
|
>
|
|
<h2 className="text-4xl font-bold mb-1">Program Services</h2>
|
|
|
|
<div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
|
|
<Image
|
|
src="/promo.png"
|
|
alt="about-header"
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 768px) 100vw, 1400px"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden mt-5">
|
|
<Image
|
|
src="/promo.png"
|
|
alt="about-header"
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 768px) 100vw, 1400px"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
<div className="w-full max-w-[1200px] mt-12">
|
|
<h2 className="text-3xl font-bold text-center mb-8">Our Teams</h2>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6 justify-center">
|
|
{topMembers.map((member, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-white rounded-lg shadow-sm p-6 text-center hover:shadow-md transition-shadow duration-300 h-[300px]"
|
|
>
|
|
<div className=" w-40 h-40 mx-auto rounded-full overflow-hidden mb-8">
|
|
<Image
|
|
src={member.image}
|
|
alt={member.name}
|
|
width={96}
|
|
height={96}
|
|
className="object-cover w-full h-full"
|
|
/>
|
|
</div>
|
|
<h3 className="font-semibold text-md mb-3">{member.name}</h3>
|
|
<p className="text-gray-500 text-sm">{member.role}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="md:flex w-full md:justify-center mt-8">
|
|
<div className="bg-white rounded-lg shadow-sm p-6 text-center hover:shadow-md transition-shadow duration-300 h-[300px]">
|
|
<div className="w-40 h-40 rounded-full overflow-hidden mb-8 mx-auto md:mx-2">
|
|
<Image
|
|
src={bottomMember.image}
|
|
alt={bottomMember.name}
|
|
width={96}
|
|
height={96}
|
|
className="object-cover w-full h-full"
|
|
/>
|
|
</div>
|
|
<h3 className="font-semibold text-md mb-3">
|
|
{bottomMember.name}
|
|
</h3>
|
|
<p className="text-gray-500 text-sm">{bottomMember.role}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|