90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Image from "next/image";
|
||
|
|
import {
|
||
|
|
Carousel,
|
||
|
|
CarouselContent,
|
||
|
|
CarouselItem,
|
||
|
|
CarouselNext,
|
||
|
|
CarouselPrevious,
|
||
|
|
} from "@/components/ui/carousel";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { motion } from "framer-motion";
|
||
|
|
import Link from "next/link";
|
||
|
|
|
||
|
|
const heroImages = ["/Hero.png", "/hero2.png", "/hero3.png"];
|
||
|
|
|
||
|
|
export default function Header() {
|
||
|
|
return (
|
||
|
|
<section className="relative w-full overflow-hidden bg-white">
|
||
|
|
<Carousel className="w-full relative">
|
||
|
|
<CarouselContent>
|
||
|
|
{heroImages.map((img, index) => (
|
||
|
|
<CarouselItem key={index}>
|
||
|
|
<div className="relative w-full h-[810px]">
|
||
|
|
<Image
|
||
|
|
src={img}
|
||
|
|
alt={`JAECOO Image ${index + 1}`}
|
||
|
|
width={1400}
|
||
|
|
height={810}
|
||
|
|
className="object-cover w-full h-full"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{index === 0 && (
|
||
|
|
<div className="absolute inset-0 flex flex-col justify-center items-start px-6 md:px-28 z-10">
|
||
|
|
<motion.h1
|
||
|
|
initial={{ opacity: 0, y: 40 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
||
|
|
className="text-3xl sm:text-4xl md:text-5xl font-bold text-black mb-4"
|
||
|
|
>
|
||
|
|
JAECOO J7 AWD
|
||
|
|
</motion.h1>
|
||
|
|
|
||
|
|
<motion.p
|
||
|
|
initial={{ opacity: 0, y: 40 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{
|
||
|
|
duration: 0.9,
|
||
|
|
ease: "easeOut",
|
||
|
|
delay: 0.2,
|
||
|
|
}}
|
||
|
|
className="text-lg text-black mb-6"
|
||
|
|
>
|
||
|
|
DELICATE OFF-ROAD SUV
|
||
|
|
</motion.p>
|
||
|
|
|
||
|
|
<motion.div
|
||
|
|
className="flex items-center gap-4"
|
||
|
|
initial={{ opacity: 0, y: 40 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 1, ease: "easeOut", delay: 0.4 }}
|
||
|
|
>
|
||
|
|
<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-black text-black px-6 py-2 hover:cursor-pointer hover:bg-amber-50"
|
||
|
|
>
|
||
|
|
JELAJAHI
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<CarouselPrevious className="absolute left-6 top-1/2 -translate-y-1/2 z-20 border border-[#155B6E] text-[#155B6E] bg-white" />
|
||
|
|
<CarouselNext className="absolute right-6 top-1/2 -translate-y-1/2 z-20 border border-[#155B6E] text-[#155B6E] bg-white" />
|
||
|
|
</div>
|
||
|
|
</CarouselItem>
|
||
|
|
))}
|
||
|
|
</CarouselContent>
|
||
|
|
</Carousel>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|