88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { motion } from "framer-motion";
|
|
|
|
export default function HeaderAfterSales() {
|
|
const services = [
|
|
{
|
|
image: "/after-sales.png",
|
|
title: "GARANSI KENDARAAN",
|
|
description:
|
|
"Jaecoo Indonesia berkomitmen seluruh pelanggan setia Jaecoo Indonesia dengan memberikan garansi kendaraan selama 6 tahun apabila terdapat cacat material atau kesalahan dari hasil kerja pabrik.",
|
|
},
|
|
{
|
|
image: "/after-sales.png",
|
|
title: "GARANSI MESIN",
|
|
description:
|
|
"Jaecoo Indonesia memberikan garansi mesin selama 10 tahun apabila terdapat cacat material atau kesalahan dari hasil kerja pabrik.",
|
|
},
|
|
{
|
|
image: "/after-sales.png",
|
|
title: "FREE BIAYA PERAWATAN",
|
|
description:
|
|
"Jaecoo Indonesia memberikan gratis biaya perawatan atau service di Dealer Resmi Jaecoo selama 4 tahun kepada seluruh pelanggan Jaecoo Indonesia.",
|
|
},
|
|
{
|
|
image: "/after-sales2.png",
|
|
title: "SPAREPART",
|
|
description:
|
|
"Jaecoo Indonesia menyediakan sparepart berkualitas terbaik dan orisinil dari pabrik Jaecoo Indonesia.",
|
|
},
|
|
];
|
|
|
|
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"
|
|
>
|
|
<div className="relative w-full max-w-[1400px] mx-auto overflow-hidden">
|
|
<div className="relative pt-[40%]">
|
|
{" "}
|
|
{/* Ini mengatur tinggi sesuai rasio gambar */}
|
|
<Image
|
|
src="/banner-after-sales.png"
|
|
alt="about-header"
|
|
fill
|
|
className="object-contain"
|
|
sizes="(max-width: 768px) 100vw, 1400px"
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full max-w-[1400px] mx-auto mt-12">
|
|
<h2 className="text-3xl font-bold text-black mb-8">
|
|
After Sales Services
|
|
</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{services.map((item, index) => (
|
|
<div key={index} className="flex flex-col gap-4">
|
|
<div className="relative w-full h-80">
|
|
<Image
|
|
src={item.image}
|
|
alt={item.title}
|
|
fill
|
|
className="object-cover "
|
|
/>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-[#1F6779]">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-[#1F6779] text-[18px]">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|