97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { Button } from "../ui/button";
|
|
import { motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
|
|
export default function HeaderProduct() {
|
|
return (
|
|
<>
|
|
<section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="flex flex-col items-center gap-6"
|
|
>
|
|
<div className="relative w-full h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
|
|
<Image
|
|
src="/product1.jpg"
|
|
alt="about-header"
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 768px) 100vw, 640px"
|
|
priority
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.3, duration: 0.6 }}
|
|
className="flex flex-col md:flex-row justify-between items-center my-8"
|
|
>
|
|
<p className="text-lg md:text-5xl font-bold">JAECOO 7 AWD</p>
|
|
<div className="flex items-center mt-2 md:mt-0 gap-3">
|
|
<a
|
|
href="https://drive.google.com/file/d/1Nici3bdjUG524sUYQgHfbeO63xW6f1_o/view"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Button className="bg-white text-black border w-[100px] h-[30px] md:w-[200px] md:h-[40px] rounded-xl hover:bg-amber-50 hover:cursor-pointer">
|
|
BROSUR
|
|
</Button>
|
|
</a>
|
|
|
|
<Link href={"/about"}>
|
|
<Button className="bg-[#1F6779] h-[30px] md:w-[200px] md:h-[40px] rounded-xl hover:cursor-pointer">
|
|
TEST DRIVE
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.5, duration: 0.8 }}
|
|
className="relative w-full h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden"
|
|
>
|
|
<Image
|
|
src="/color.png"
|
|
alt="about-header"
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 768px) 100vw, 640px"
|
|
priority
|
|
/>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -40 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: 0.8, duration: 0.6 }}
|
|
className="absolute top-1/2 left-5 md:left-56 transform -translate-y-1/2 flex flex-col gap-4 z-10"
|
|
>
|
|
{[
|
|
"linear-gradient(to bottom, #C9CCD3, #FFFFFF)",
|
|
"linear-gradient(to bottom, #788662, #C9CCD3)",
|
|
"linear-gradient(to bottom, #1A1A1A, #3A3A3A)",
|
|
"linear-gradient(to bottom, #E1ECF4, #FFFFFF)",
|
|
].map((bg, index) => (
|
|
<motion.button
|
|
key={index}
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="w-6 h-6 rounded-full border border-white shadow-md hover:cursor-pointer"
|
|
style={{ background: bg }}
|
|
/>
|
|
))}
|
|
</motion.div>
|
|
</motion.div>
|
|
</>
|
|
);
|
|
}
|