291 lines
13 KiB
TypeScript
291 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { Button } from "../ui/button";
|
|
import { motion } from "framer-motion";
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "../ui/dialog";
|
|
import { Input } from "../ui/input";
|
|
import { Textarea } from "../ui/textarea";
|
|
|
|
export default function HeaderPriceInformation() {
|
|
const [open, setOpen] = useState(false);
|
|
const cars = [
|
|
{
|
|
title: "JAECOO J7 SHS-P",
|
|
image: "/j7-awd-nobg.png",
|
|
price: "Rp 509.900.000",
|
|
oldPrice: "Rp 509.900.000",
|
|
capacity: "18.3kWh",
|
|
power: "-",
|
|
torque: "310 N.m",
|
|
wheels: `19"`,
|
|
seats: "Leather",
|
|
display: `14.8"`,
|
|
},
|
|
{
|
|
title: "JAECOO J5 EV",
|
|
image: "/price-j5.png",
|
|
price: "Rp 309.900.000",
|
|
oldPrice: "Rp 309.900.000",
|
|
capacity: "60.9kWh",
|
|
power: "155kW",
|
|
torque: "288Nm",
|
|
wheels: `19"`,
|
|
seats: "Leather",
|
|
display: `14.8"`,
|
|
},
|
|
{
|
|
title: "JAECOO J8 SHS-P ARDIS",
|
|
image: "/j8-awd-nobg.png",
|
|
price: "Rp 828.000.000",
|
|
oldPrice: "Rp 828.000.000",
|
|
capacity: "34,46kWh",
|
|
torque: "650Nm",
|
|
wheels: `19"`,
|
|
seats: "Leather",
|
|
display: `14.8"`,
|
|
},
|
|
];
|
|
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"
|
|
>
|
|
<h2 className="text-4xl font-bold mb-1">
|
|
Harga Terbaik Di Dealer Resmi Kami
|
|
</h2>
|
|
<p className="text-lg">
|
|
Dapatkan penawaran terbaik di dealer resmi kami untuk pengalaman
|
|
berkendara yang tak terlupakan!
|
|
</p>
|
|
<div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
|
|
<Image
|
|
src="/price-header.png"
|
|
alt="about-header"
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 768px) 100vw, 640px"
|
|
priority
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 w-full max-w-[1400px] mt-10">
|
|
{cars.map((car, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="relative rounded-2xl border p-6 pt-10 flex flex-col items-center shadow-sm"
|
|
>
|
|
<span className="absolute top-4 left-4 bg-[#1F6779] text-white text-sm px-3 py-1 rounded-md z-10">
|
|
NEW OFFER
|
|
</span>
|
|
|
|
<h3 className="text-3xl font-bold text-center mt-5">
|
|
{car.title}
|
|
</h3>
|
|
<div className="relative w-full h-48 my-4">
|
|
<Image
|
|
src={car.image}
|
|
alt={car.title}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-center border rounded-lg p-3 w-full text-center mb-2 gap-3">
|
|
<p className="text-xs text-[#1F6779]">START FROM</p>
|
|
<p className="text-2xl font-bold text-[#1F6779]">
|
|
{car.price}
|
|
</p>
|
|
<div className="text-[#1F6779]">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="13"
|
|
height="13"
|
|
viewBox="0 0 32 32"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m0 26a12 12 0 1 1 12-12a12 12 0 0 1-12 12"
|
|
/>
|
|
<path
|
|
fill="currentColor"
|
|
d="M15 8h2v11h-2zm1 14a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 16 22"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
{/* <p className="text-[15px] text-black text-start mb-4">
|
|
*Save Rp 5.000.000 on the previous driveway price of{" "}
|
|
{car.oldPrice}. Offer ends 31st August 2025.
|
|
</p> */}
|
|
<div className="grid grid-cols-2 gap-2 w-full text-lg text-center mb-4">
|
|
<div className="bg-[#EAF7FF] p-5 rounded-md flex items-center gap-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="36"
|
|
height="36"
|
|
viewBox="0 0 36 36"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M22 4V2.62a.6.6 0 0 0-.58-.62h-6.84a.6.6 0 0 0-.58.62V4h-4a1.09 1.09 0 0 0-1 1.07v28a1 1 0 0 0 1 .93h16a1 1 0 0 0 1-.94v-28A1.09 1.09 0 0 0 26 4Zm-1.74 21.44a1.2 1.2 0 0 1-2.15 1.07l-5.46-10.95l6 1l-2.29-4a1.2 1.2 0 1 1 2.08-1.2l4.83 8.37l-6.37-1.03Z"
|
|
className="clr-i-solid clr-i-solid-path-1"
|
|
/>
|
|
<path fill="none" d="M0 0h36v36H0z" />
|
|
</svg>
|
|
<div className="flex flex-col items-center">
|
|
<span className="font-bold">{car.capacity}</span>{" "}
|
|
<span className="text-sm">Battery Capacity</span>
|
|
</div>
|
|
</div>
|
|
<div className="bg-[#EAF7FF] p-5 rounded-md flex items-center gap-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
// fill-rule="evenodd"
|
|
d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10m5.954-9.25h-3.049a3 3 0 0 1-.803 1.39l1.524 2.64a6 6 0 0 0 2.328-4.03m-3.626 4.782l-1.525-2.64a3 3 0 0 1-1.606 0l-1.525 2.64A6 6 0 0 0 12 18c.825 0 1.612-.167 2.328-.468m-5.954-.751l1.524-2.64a3 3 0 0 1-.804-1.391H6.046a6 6 0 0 0 2.328 4.03m9.58-5.531h-3.049a3 3 0 0 0-.803-1.39l1.524-2.64a6 6 0 0 1 2.328 4.03m-3.626-4.782A6 6 0 0 0 12 6c-.825 0-1.612.167-2.328.468l1.525 2.64a3 3 0 0 1 1.606 0zM9.898 9.86L8.374 7.22a6 6 0 0 0-2.328 4.03h3.049c.138-.535.42-1.013.803-1.39"
|
|
// clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<div className="flex flex-col items-center justify-center text-center">
|
|
<span className="font-bold">{car.power}</span>{" "}
|
|
<span className="text-sm">Max Power</span>
|
|
</div>
|
|
</div>
|
|
<div className="bg-[#EAF7FF] p-5 rounded-md flex items-center gap-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 48 48"
|
|
>
|
|
<path
|
|
// fill="none"
|
|
// stroke="currentColor"
|
|
// stroke-linecap="round"
|
|
// stroke-linejoin="round"
|
|
d="M28.413 30.857v-7.529h1.694a3.294 3.294 0 0 1 3.293 3.294v.941a3.294 3.294 0 0 1-3.293 3.294ZM14.6 28.363a2.494 2.494 0 0 0 4.987 0v-2.54a2.494 2.494 0 0 0-4.987 0Zm10.096-1.27a1.882 1.882 0 0 1 0 3.764h-3.105v-7.529h3.105a1.882 1.882 0 0 1 0 3.764m0 .001h-3.105m-3.448-12.39a1.7 1.7 0 0 1 0-3.39h12a1.7 1.7 0 1 1 0 3.39Zm-10.25 16.87a1.7 1.7 0 0 1-3.39 0h0v-10.17a1.7 1.7 0 1 1 3.39 0Zm0-5.09h2.109m14.14-9.021v-2.759"
|
|
stroke-width="1"
|
|
/>
|
|
<path
|
|
// fill="none"
|
|
// stroke="currentColor"
|
|
// stroke-linecap="round"
|
|
// stroke-linejoin="round"
|
|
d="M36.773 25.063h2.3v-3.26h2.11l2.32 7.2l-2.33 7.2h-2.1v-3.14h-2.3l.02 2.05a1.58 1.58 0 0 1-1.58 1.58h-13.56a1.17 1.17 0 0 1-.66-.2l-4.99-3.47h-4.21a1.79 1.79 0 0 1-1.79-1.79v-.041h0v-9.4a1.8 1.8 0 0 1 1.79-1.77h1.4l2.66-2.26a1.13 1.13 0 0 1 .73-.27h15.26a1.59 1.59 0 0 1 1.58 1.53v2.15h1.79a1.59 1.59 0 0 1 1.58 1.59h0Z"
|
|
stroke-width="1"
|
|
/>
|
|
</svg>
|
|
<div className="flex flex-col items-center justify-center text-center ml-5">
|
|
<span className="font-bold">{car.torque}</span>{" "}
|
|
<span className="text-sm"> Torque</span>
|
|
</div>
|
|
</div>
|
|
<div className="bg-[#EAF7FF] p-5 rounded-md flex items-center gap-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 36 36"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M32.5 3h-29A1.5 1.5 0 0 0 2 4.5v21A1.5 1.5 0 0 0 3.5 27h29a1.5 1.5 0 0 0 1.5-1.5v-21A1.5 1.5 0 0 0 32.5 3M32 25H4V5h28Z"
|
|
className="clr-i-outline clr-i-outline-path-1"
|
|
/>
|
|
<path
|
|
fill="currentColor"
|
|
d="M7.7 8.76h20.43l1.81-1.6H6.1V23h1.6z"
|
|
className="clr-i-outline clr-i-outline-path-2"
|
|
/>
|
|
<path
|
|
fill="currentColor"
|
|
d="M26 32h-1.74a3.6 3.6 0 0 1-1.5-2.52v-1.35h-1.52v1.37a4.2 4.2 0 0 0 .93 2.5h-8.34a4.2 4.2 0 0 0 .93-2.52v-1.35h-1.52v1.37a3.6 3.6 0 0 1-1.5 2.5h-1.8a1 1 0 1 0 0 2h16.12a.92.92 0 0 0 1-1A1 1 0 0 0 26 32"
|
|
className="clr-i-outline clr-i-outline-path-3"
|
|
/>
|
|
<path fill="none" d="M0 0h36v36H0z" />
|
|
</svg>
|
|
<div className="flex flex-col items-center justify-center text-center ml-5">
|
|
<span className="font-bold">{car.display}</span>{" "}
|
|
<span className="text-sm"> Display</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2 w-full ">
|
|
<Link href={"/product"} className="w-full">
|
|
<Button
|
|
className=" w-full border-[#1F6779] text-lg p-6"
|
|
variant="outline"
|
|
>
|
|
View Specs
|
|
</Button>
|
|
</Link>
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button className="bg-[#1F6779] text-white h-[30px] md:w-[200px] md:h-[50px] p-6 hover:cursor-pointer">
|
|
TEST DRIVE
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-[1400px] h-[600px]">
|
|
<div className="flex items-center gap-4">
|
|
<Image
|
|
src="/masjaecoonav.png"
|
|
alt="MAS JAECOO Logo"
|
|
width={300}
|
|
height={30}
|
|
className=" object-fill"
|
|
/>
|
|
</div>
|
|
<DialogHeader>
|
|
<DialogTitle className="text-4xl text-center mb-4 font-bold">
|
|
FORM TEST DRIVE
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
{/* Form */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-10">
|
|
<Input placeholder="Nama" />
|
|
<Input placeholder="Email" />
|
|
<Input placeholder="Mobile Number" />
|
|
<Input placeholder="Location" />
|
|
</div>
|
|
|
|
<div className="mt-3 px-10">
|
|
<Textarea placeholder="Full Message" rows={4} />
|
|
</div>
|
|
|
|
<div className="mt-6 text-left ml-10">
|
|
<Button
|
|
onClick={() => setOpen(false)}
|
|
className="bg-[#1F6779] text-white rounded-full"
|
|
>
|
|
SEND INQUIRY
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|