119 lines
3.7 KiB
TypeScript
119 lines
3.7 KiB
TypeScript
"use client";
|
||
|
||
import Image from "next/image";
|
||
import { motion } from "framer-motion";
|
||
import { useInView } from "react-intersection-observer";
|
||
import { useEffect, useState } from "react";
|
||
|
||
const features = [
|
||
{
|
||
title: "REAR BUMPER DESIGN",
|
||
description:
|
||
"Featuring refined lines and bold contours, the rear bumper enhances the vehicle’s sporty and stylish character.",
|
||
image: "/pj7-1.png",
|
||
},
|
||
{
|
||
title: "PANORAMIC SUNROOF",
|
||
description:
|
||
"The Panoramic Sunroof transforms your journey, creating a brighter and more spacious atmosphere.",
|
||
image: "/pj7-2.png",
|
||
},
|
||
{
|
||
title: "REAR BUMPER DESIGN",
|
||
description:
|
||
"Featuring refined lines and bold contours, the rear bumper enhances the vehicle’s sporty and stylish character.",
|
||
image: "/pj7-3.png",
|
||
},
|
||
{
|
||
title: "NATURAL DAYLIGHT LED LIGHTING SYSTEM",
|
||
description:
|
||
"Illuminate your journey with the Natural Daylight LED Lighting System, designed to mimic the clarity and warmth of sunlight.",
|
||
image: "/pj7-4.png",
|
||
},
|
||
];
|
||
|
||
export default function Exterior() {
|
||
const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.2 });
|
||
const [show, setShow] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (inView) {
|
||
setShow(true);
|
||
}
|
||
}, [inView]);
|
||
|
||
return (
|
||
<section
|
||
ref={ref}
|
||
className="py-10 px-4 sm:px-6 md:px-20 bg-white overflow-hidden"
|
||
>
|
||
<motion.h2
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={show ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.6 }}
|
||
className="text-2xl mt-5 mb-8"
|
||
>
|
||
<span className="text-[#1F6779] font-semibold">Jaecoo 7 SHS-P</span>{" "}
|
||
Teknologi dan Exterior
|
||
</motion.h2>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
animate={show ? { opacity: 1, scale: 1 } : {}}
|
||
transition={{ duration: 0.8 }}
|
||
className="relative w-full h-[300px] sm:h-[400px] md:h-[600px]"
|
||
>
|
||
<Image
|
||
src="/jj7-awd.png"
|
||
alt="Aluminium Chassis"
|
||
fill
|
||
className="object-cover"
|
||
sizes="100vw"
|
||
/>
|
||
<div className="absolute bottom-6 left-3 sm:left-3 md:left-6 max-w-5xl">
|
||
<h2 className="text-xl sm:text-xl font-semibold text-white">
|
||
ALUMINIUM CHASSIS
|
||
</h2>
|
||
<p className="text-xs sm:text-xs mt-2 text-gray-200">
|
||
Built with a lightweight aluminum chassis, offering enhanced
|
||
strength, durability, and improved performance for a superior
|
||
driving experience.
|
||
</p>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50 }}
|
||
animate={show ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ delay: 0.2, duration: 0.8 }}
|
||
className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2 sm:gap-4 mt-5"
|
||
>
|
||
{features.map((item, index) => (
|
||
<motion.div
|
||
key={index}
|
||
className="relative aspect-[4/3] overflow-hidden group"
|
||
whileHover={{ scale: 1.02 }}
|
||
transition={{ duration: 0.3 }}
|
||
>
|
||
<Image
|
||
src={item.image}
|
||
alt={item.title}
|
||
fill
|
||
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
||
sizes="(max-width: 768px) 100vw, 25vw"
|
||
/>
|
||
<div className="absolute bottom-0 bg-gradient-to-t from-black/80 to-transparent p-4">
|
||
<h3 className="text-sm sm:text-base font-bold text-white">
|
||
{item.title}
|
||
</h3>
|
||
<p className="text-xs sm:text-sm text-gray-300 mt-1">
|
||
{item.description}
|
||
</p>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
</section>
|
||
);
|
||
}
|