update
This commit is contained in:
parent
9c3b082c7e
commit
fbc021f3b4
|
|
@ -1,125 +0,0 @@
|
|||
"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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue