45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import Image from "next/image";
|
|
|
|
const technologies = [
|
|
{ name: "Tableau", src: "/image/tableu.png" },
|
|
{ name: "TVU Networks", src: "/image/tvu.png" },
|
|
{ name: "AWS", src: "/image/aws.png" },
|
|
{ name: "Dell", src: "/image/dell.png" },
|
|
{ name: "Zenlayer", src: "/image/zen.png" },
|
|
{ name: "Ui", src: "/image/uipath.png" },
|
|
];
|
|
|
|
export default function Technology() {
|
|
return (
|
|
<section className="relative overflow-hidden bg-gradient-to-r from-[#faf6ee] to-[#f4efe6] py-14">
|
|
<div className="container mx-auto px-6">
|
|
{/* Title */}
|
|
<p className="text-center text-lg font-semibold tracking-widest text-gray-500 mb-8">
|
|
TECHNOLOGY PARTNERS
|
|
</p>
|
|
|
|
{/* Slider */}
|
|
<div className="relative w-full overflow-hidden">
|
|
<div className="flex w-max animate-tech-scroll gap-14">
|
|
{/* duplicated for seamless loop */}
|
|
{[...technologies, ...technologies].map((tech, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center justify-center min-w-[140px] opacity-80 hover:opacity-100 transition"
|
|
>
|
|
<Image
|
|
src={tech.src}
|
|
alt={tech.name}
|
|
width={120}
|
|
height={50}
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|