126 lines
4.5 KiB
TypeScript
126 lines
4.5 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { Button } from "../ui/button";
|
|
import { Input } from "../ui/input";
|
|
import { Textarea } from "../ui/textarea";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "../ui/dialog";
|
|
import { motion } from "framer-motion";
|
|
import { useState } from "react";
|
|
import { Download } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
export default function HeaderProductJ5Ev() {
|
|
const [open, setOpen] = useState(false);
|
|
const [selectedColorIndex, setSelectedColorIndex] = useState(0);
|
|
const [openBrosur, setOpenBrosur] = useState(false);
|
|
// const fileId = "1Nici3bdjUG524sUYQgHfbeO63xW6f1_o";
|
|
// const fileLink = `https://drive.google.com/file/d/${fileId}/view`;
|
|
// const embedLink = `https://drive.google.com/file/d/${fileId}/preview`;
|
|
// const downloadLink = `https://drive.google.com/uc?export=download&id=${fileId}`;
|
|
|
|
const images = [
|
|
"/j5-putih.png",
|
|
"/j5-hitam.png",
|
|
"/j5-silver.png",
|
|
"/j5-biru.png",
|
|
"/j5-hijau.png",
|
|
];
|
|
|
|
const gradients = [
|
|
"linear-gradient(to bottom, #FFFFFF, #FFFFFF)",
|
|
"linear-gradient(to bottom, #1A1A1A, #3A3A3A)",
|
|
"linear-gradient(to bottom, #B0B5C2, #B0B5C2)",
|
|
"linear-gradient(to bottom, #233a77, #233a77)",
|
|
"linear-gradient(to bottom, #5D6B4F, #5D6B4F)",
|
|
];
|
|
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="/j5-new1.jpg"
|
|
alt="about-header"
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 768px) 100vw, 640px"
|
|
priority
|
|
/>
|
|
|
|
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-3">
|
|
<Link
|
|
href="https://cms.jaecoo.id/uploads/Flyer_J5_EV_Ver3_smaller_file_size_d81b0f960c.pdf"
|
|
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>
|
|
</Link>
|
|
|
|
<Link
|
|
href={`mailto:jaecookelapagading@gmail.com?subject=Test Drive J5 EV &body=Halo Jaecoo,%0D%0A%0D%0ASaya tertarik untuk melakukan test drive kendaraan J5 EV.%0D%0A%0D%0ANama:%0D%0ANomor HP:%0D%0ALokasi:%0D%0A%0D%0ATerima kasih.`}
|
|
>
|
|
<Button className="bg-[#1F6779] text-white h-[30px] md:h-[40px] rounded-full hover:cursor-pointer">
|
|
TEST DRIVE
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.5, duration: 0.8 }}
|
|
className="relative w-full h-[200px] sm:h-[400px] md:h-[740px] overflow-hidden"
|
|
>
|
|
<div className="relative w-full h-[200px] sm:h-[300px] md:h-[740px] lg:h-[740px]">
|
|
<Image
|
|
src={images[selectedColorIndex]}
|
|
alt="about-header"
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1400px"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -40 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: 0.8, duration: 0.6 }}
|
|
className="absolute top-32 md:top-1/2 left-14 md:left-56 transform -translate-y-1/2 flex flex-col gap-4 z-10"
|
|
>
|
|
{gradients.map((bg, index) => (
|
|
<motion.button
|
|
key={index}
|
|
onClick={() => setSelectedColorIndex(index)}
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className={`w-4 h-4 md:w-6 md:h-6 rounded-full border-2 ${
|
|
selectedColorIndex === index ? "border-black" : "border-white"
|
|
} shadow-md hover:cursor-pointer`}
|
|
style={{ background: bg }}
|
|
aria-label={`Pilih warna ${index + 1}`}
|
|
/>
|
|
))}
|
|
</motion.div>
|
|
</motion.div>
|
|
</>
|
|
);
|
|
}
|