80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
|
"use client";
|
||
|
|
import Image from "next/image";
|
||
|
|
import { easeOut, motion } from "framer-motion";
|
||
|
|
|
||
|
|
const services = [
|
||
|
|
{ image: "/s1.png", title: "ELECTRONIC VEHICLE HEALTH CHECK" },
|
||
|
|
{ image: "/s2.png", title: "REQUEST A SERVICE" },
|
||
|
|
{ image: "/s3.png", title: "SERVICE PLANS" },
|
||
|
|
{ image: "/s4.png", title: "BODY AND PAINT" },
|
||
|
|
{ image: "/s5.png", title: "GENUINE PARTS" },
|
||
|
|
{ image: "/s6.png", title: "JAECOO REPAIRS" },
|
||
|
|
];
|
||
|
|
|
||
|
|
const containerVariants = {
|
||
|
|
hidden: {},
|
||
|
|
visible: {
|
||
|
|
transition: {
|
||
|
|
staggerChildren: 0.15,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
const itemVariants = {
|
||
|
|
hidden: { opacity: 0, y: 50 },
|
||
|
|
visible: {
|
||
|
|
opacity: 1,
|
||
|
|
y: 0,
|
||
|
|
transition: { duration: 0.6, ease: easeOut },
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function Service() {
|
||
|
|
return (
|
||
|
|
<section className="py-16 px-4 sm:px-6 lg:px-10 bg-white">
|
||
|
|
<div className="w-full mx-auto text-start">
|
||
|
|
<motion.h2
|
||
|
|
className="text-2xl sm:text-3xl font-bold mb-2"
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.6, ease: "easeOut" }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
>
|
||
|
|
Performa Hebat, Layanan Terjamin
|
||
|
|
</motion.h2>
|
||
|
|
|
||
|
|
<motion.p
|
||
|
|
className="text-gray-700 mb-10 w-full md:w-6/12"
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
>
|
||
|
|
Servis resmi Jaecoo untuk kendaraan Anda dikerjakan oleh teknisi
|
||
|
|
tersertifikasi dengan suku cadang asli dan sistem booking online.
|
||
|
|
</motion.p>
|
||
|
|
|
||
|
|
<motion.div
|
||
|
|
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 justify-items-center"
|
||
|
|
variants={containerVariants}
|
||
|
|
initial="hidden"
|
||
|
|
whileInView="visible"
|
||
|
|
viewport={{ once: true, amount: 0.2 }}
|
||
|
|
>
|
||
|
|
{services.map((service, index) => (
|
||
|
|
<motion.div key={index} variants={itemVariants} className="w-full">
|
||
|
|
<Image
|
||
|
|
src={service.image}
|
||
|
|
alt={service.title}
|
||
|
|
width={413}
|
||
|
|
height={170}
|
||
|
|
className="w-full object-contain"
|
||
|
|
/>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|