87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
"use client";
|
|
import Image from "next/image";
|
|
import { motion } from "framer-motion";
|
|
import { useInView } from "react-intersection-observer";
|
|
|
|
const featuresJ8Awd = [
|
|
{
|
|
title: "Crystal Drive Mode Selector",
|
|
description:
|
|
"The stunning Crystal Drive Mode Selector offers seven distinct drive modes: City, Snow, Sand, Mud, Normal, ECO, and Sport. Its elegant design elevates cabin aesthetics while providing intuitive fingertip access to tailor the driving experience — from smooth city commutes to off-road adventures.",
|
|
image: "/in-j8awd2.png",
|
|
},
|
|
{
|
|
title: "Headrest Speaker",
|
|
description:
|
|
"Embedded within the premium 14-speaker Sony sound system, the headrest speakers deliver immersive, high-fidelity audio directly to occupants. Designed to enhance entertainment quality and ensure privacy during calls, this feature offers clear sound without disturbing others, blending innovation with comfort.",
|
|
image: "/in-j8awd3.png",
|
|
},
|
|
{
|
|
title: "Zero Gravity Seat",
|
|
description:
|
|
"Experience true zero-gravity relaxation with an adjustable 123° seat angle, an exclusive sleep headrest, and adjustable earpieces for an optimal fit. Double-layer noise-canceling acoustic glass effectively blocks out external noise, creating a peaceful retreat from the busy world.",
|
|
image: "/in-j8awd4.png",
|
|
},
|
|
];
|
|
|
|
export default function InteriorJ8Awd() {
|
|
const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });
|
|
|
|
return (
|
|
<section className="py-10 px-4 sm:px-6 md:px-20 bg-white" ref={ref}>
|
|
<motion.h2
|
|
className="text-2xl mt-5 mb-8"
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={inView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<span className="text-[#1F6779] font-semibold">Jaecoo 8 AWD</span>{" "}
|
|
Interior
|
|
</motion.h2>
|
|
|
|
<motion.div
|
|
className="relative w-full h-[300px] sm:h-[400px] md:h-[600px]"
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={inView ? { opacity: 1, scale: 1 } : {}}
|
|
transition={{ duration: 0.7 }}
|
|
>
|
|
<Image
|
|
src="/in-j8awd1.png"
|
|
alt="Interior Hero"
|
|
fill
|
|
className="object-cover"
|
|
sizes="100vw"
|
|
/>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 sm:gap-4 mt-5">
|
|
{featuresJ8Awd.map((item, index) => (
|
|
<motion.div
|
|
key={index}
|
|
className="relative aspect-[3/2] overflow-hidden group"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={inView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.4, delay: index * 0.1 }}
|
|
>
|
|
<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>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|