jaecoo-cihampelas/components/landing-page/features-and-specifications...

87 lines
2.7 KiB
TypeScript

"use client";
import Image from "next/image";
export default function FeaturesAndSpecificationsJ8() {
return (
<section className="pt-10 px-4 sm:px-6 md:px-20 bg-white">
<h2 className="text-2xl mt-5 mb-8">
<span className="text-[#1F6779] font-semibold">
Jaecoo 8 SHS-P ARDIS
</span>{" "}
Fitur
</h2>
<div className="relative w-full h-[300px] sm:h-[400px] md:h-[600px]">
<Image
src="/fitur1.png"
alt="Aluminium Chassis"
fill
className="object-cover"
sizes="100vw"
/>
<div className="absolute bottom-26 left-3 sm:left-10 md:left-26 max-w-xs bg-white/60 rounded-lg p-4">
<h2 className="text-xl sm:text-sm font-semibold text-black">
Lane Changing Assistance
</h2>
<p className="text-xs sm:text-xs mt-2 text-black">
Advanced safety feature that monitors surrounding traffic and
provides alerts or steering support to help ensure sasfe and
confident lane changes
</p>
</div>
</div>
<div className="relative w-full h-[300px] sm:h-[400px] md:h-[600px] my-20">
<Image
src="/awd-fitur8.png"
alt="Aluminium Chassis"
fill
className="object-cover"
sizes="100vw"
/>
</div>
<h2 className="text-2xl mt-5 mb-8">
<span className="text-[#1F6779] font-semibold">
Jaecoo 8 SHS-P ARDIS
</span>{" "}
Spesifikasi
</h2>
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-32 gap-y-6 text-sm sm:text-base text-start my-10">
<div>
<p className="text-gray-500">Max Power</p>
<p className="font-bold">248ps</p>
</div>
<div>
<p className="text-gray-500">AWD Technology</p>
<p className="font-bold">ARDIS</p>
</div>
<div>
<p className="text-gray-500">Suspension</p>
<p className="font-bold">CDC Magnetic</p>
</div>
<div>
<p className="text-gray-500">ADAS</p>
<p className="font-bold">19 adas</p>
</div>
<div>
<p className="text-gray-500">Engine</p>
<p className="font-bold">2.0TGDI</p>
</div>
<div>
<p className="text-gray-500">0-100km-h</p>
<p className="font-bold">8.8s</p>
</div>
<div>
<p className="text-gray-500">airbag</p>
<p className="font-bold">10 airbags</p>
</div>
<div>
<p className="text-gray-500">Torque</p>
<p className="font-bold">385N.m</p>
</div>
</div>
</section>
);
}