98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { Button } from "@/components/ui/button";
|
|
import { motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
|
|
const items = [
|
|
{
|
|
image: "/new-car2.png",
|
|
title: "JAECOO J7 AWD",
|
|
description: "DELICATE OFF-ROAD SUV",
|
|
},
|
|
{
|
|
image: "/new-car1.png",
|
|
title: "JAECOO J7 SHS",
|
|
description: "SUPER HYBRID SYSTEM = SUPER HEV + EV",
|
|
},
|
|
{
|
|
image: "/new-car3.png",
|
|
title: "JAECOO J8 AWD",
|
|
description: "FIRST CLASS OFF-ROAD",
|
|
},
|
|
];
|
|
|
|
export default function Items() {
|
|
return (
|
|
<section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
|
|
<div className="flex flex-col items-center gap-10">
|
|
{items.map((item, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{
|
|
duration: 0.7,
|
|
delay: index * 0.2,
|
|
ease: "easeOut",
|
|
}}
|
|
className="relative w-full min-h-[400px] sm:min-h-[500px] md:min-h-[600px] overflow-hidden"
|
|
>
|
|
<Image
|
|
src={item.image}
|
|
alt={item.title}
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 768px) 100vw, 768px"
|
|
priority
|
|
/>
|
|
|
|
<div className="absolute inset-0 z-10 flex flex-col justify-between">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: index * 0.25 + 0.3, duration: 0.5 }}
|
|
className="mt-3 ml-3 font-semibold text-white text-sm sm:text-xl px-4 py-2 rounded-lg max-w-[80%]"
|
|
>
|
|
{item.description}
|
|
</motion.div>
|
|
|
|
<div className="flex flex-col items-center pb-8 bg-gradient-to-t to-transparent">
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 0.25 + 0.4, duration: 0.6 }}
|
|
className="text-2xl sm:text-3xl md:text-2xl font-semibold text-white mb-4 text-center"
|
|
>
|
|
{item.title}
|
|
</motion.h1>
|
|
<motion.div
|
|
className="flex items-center gap-4"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 0.25 + 0.6, duration: 0.6 }}
|
|
>
|
|
<Link href="/about">
|
|
<Button className="rounded-full bg-[#155B6E] px-6 py-2 text-white hover:cursor-pointer">
|
|
TEST DRIVE
|
|
</Button>
|
|
</Link>
|
|
<Link href="/product">
|
|
<Button
|
|
variant="outline"
|
|
className="rounded-full border-white text-black px-6 py-2 hover:text-black hover:bg-amber-50 hover:border-white hover:cursor-pointer"
|
|
>
|
|
EXPLORE
|
|
</Button>
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|