274 lines
12 KiB
TypeScript
274 lines
12 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 AWD",
|
||
|
|
image: "/j7-awd-nobg.png",
|
||
|
|
price: "Rp 549.000.000",
|
||
|
|
oldPrice: "Rp 544.000.000",
|
||
|
|
capacity: "18.3kWh",
|
||
|
|
wheels: `19"`,
|
||
|
|
seats: "Leather",
|
||
|
|
display: `14.8"`,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "JAECOO J7 SHS",
|
||
|
|
image: "/j7-shs-nobg.png",
|
||
|
|
price: "Rp 599.000.000",
|
||
|
|
oldPrice: "Rp 594.000.000",
|
||
|
|
capacity: "18.3kWh",
|
||
|
|
wheels: `19"`,
|
||
|
|
seats: "Leather",
|
||
|
|
display: `14.8"`,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "JAECOO J8 AWD",
|
||
|
|
image: "/j8-awd-nobg.png",
|
||
|
|
price: "Rp 812.000.000",
|
||
|
|
oldPrice: "Rp 807.000.000",
|
||
|
|
capacity: "18.3kWh",
|
||
|
|
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="/product1.jpg"
|
||
|
|
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.wheels}</span>{" "}
|
||
|
|
<span className="text-sm">Alloy Wheels</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 512 512"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fill="currentColor"
|
||
|
|
d="m71.47 18.38l-.01.01c-6.58-.1-14.25.79-21.52 2.41c-8.31 1.84-16.18 4.69-21.3 7.56c-2.57 1.44-4.42 2.9-5.24 3.8l25.86 90.54c7.22-9.1 15.41-16.6 23.75-22.2c9.69-6.44 19.19-10.67 27.89-12.47c0-13.14-.3-25.92-1.8-36.76c-1.9-13.05-5.6-23.03-11.5-28.91c-1.3-1.35-6.28-3.44-13.39-3.88c-.89 0-1.81-.1-2.74-.1m29.03 92.12c-6.7.4-14.2 3.5-21.1 8.7c-13.68 10.3-24.04 28.7-24.34 40.2l45.74 240.3c7.6-9.5 19.2-15.7 32.2-15.7c11.5 0 22 4.9 29.5 12.7c5.1-1.1 10.5-2.2 16.4-3.3c1.5-.3 3.1-.5 4.7-.8c-13.5-92.5-35.3-199.6-65.2-275.3c-5.2-4.8-10.3-6.7-15.6-6.8zm283 39.5l-53.6 167.4l17.2 5.4l24-75.1l117.1 37.5l5.4-17.2l-117-37.4l24.1-75.2zm-38.7 245.3c-21.5.1-46.3 1.4-71 3.7c-33 2.9-66 7.4-91.6 12.1c-3.5.6-6.8 1.3-10 1.9q1.8 5.7 1.8 12c0 22.5-18.5 41-41 41c-5.6 0-11-1.2-15.9-3.2c-3.1 8.9-5.4 17.6-6.7 24.2H398c5 0 7.7-1.8 10.7-6.4c3.1-4.7 5.4-12.4 6.3-21.5c1.9-18.1-2.1-41.2-9.1-55.1c.3.5-2.8-2.5-10.2-4.4s-18.1-3.3-30.7-3.9c-6.3-.3-13.1-.4-20.2-.4M133 402c-12.8 0-23 10.2-23 23s10.2 23 23 23s23-10.2 23-23s-10.2-23-23-23"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
<div className="flex flex-col items-center justify-center text-center ml-5">
|
||
|
|
<span className="font-bold">{car.seats}</span>{" "}
|
||
|
|
<span className="text-sm"> Seats</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>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|