jaecoo
/
jaecoo-cihampelas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

This commit is contained in:
Anang Yusman 2025-07-13 19:27:37 +08:00
parent 3f6e848b97
commit 27e04f61f6
8 changed files with 352 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/landing-page/agent.tsx
View File

@ -44,7 +44,7 @@ export default function Agent() {
Temui anggota tim kami yang luar biasa Temui anggota tim kami yang luar biasa
</motion.p> </motion.p>
<div className=" flex flex-row items-center justify-center gap-2"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 place-items-center">
{agents.map((agent, index) => ( {agents.map((agent, index) => (
<motion.div <motion.div
key={index} key={index}

9
components/landing-page/best-agent.tsx
View File

@ -23,17 +23,18 @@ const agents = [
export default function BestAgent() { export default function BestAgent() {
return ( return (
<section className="py-16 px-6 md:px-12 bg-[#f9f9f9] text-center mt-0"> <section className="py-16 px-4 sm:px-6 md:px-12 bg-[#f9f9f9] text-center mt-0">
<motion.h2 <motion.h2
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
viewport={{ once: true }} viewport={{ once: true }}
className="text-3xl md:text-4xl font-semibold text-gray-900 mb-10" className="text-2xl sm:text-3xl md:text-4xl font-semibold text-gray-900 mb-10"
> >
Our Teams Our Teams
</motion.h2> </motion.h2>
<div className=" flex flex-row items-center justify-center gap-2">
<div className="flex flex-col md:flex-row flex-wrap items-center justify-center gap-6">
{agents.map((agent, index) => ( {agents.map((agent, index) => (
<motion.div <motion.div
key={index} key={index}
@ -45,7 +46,7 @@ export default function BestAgent() {
ease: "easeOut", ease: "easeOut",
}} }}
viewport={{ once: true, amount: 0.3 }} viewport={{ once: true, amount: 0.3 }}
className="bg-white shadow-md px-2 py-4 gap-4 flex flex-col items-center h-[300px] w-[224px]" className="bg-white shadow-md p-4 flex flex-col items-center w-full max-w-[224px] h-[340px] sm:h-[300px]"
> >
<div className="relative w-28 h-36 mb-3"> <div className="relative w-28 h-36 mb-3">
<Image <Image

24
components/landing-page/header-product-j7-awd.tsx
View File

@ -142,22 +142,24 @@ export default function HeaderProductJ7Awd() {
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ delay: 0.5, duration: 0.8 }} transition={{ delay: 0.5, duration: 0.8 }}
className="relative w-full h-[300px] sm:h-[400px] md:h-[740px] overflow-hidden" className="relative w-full h-[200px] sm:h-[400px] md:h-[740px] overflow-hidden"
> >
<Image <div className="relative w-full h-[200px] sm:h-[300px] md:h-[740px] lg:h-[740px]">
src={images[selectedColorIndex]} <Image
alt="about-header" src={images[selectedColorIndex]}
fill alt="about-header"
className="object-cover" fill
sizes="(max-width: 768px) 100vw, 640px" className="object-cover"
priority sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1400px"
/> priority
/>
</div>
<motion.div <motion.div
initial={{ opacity: 0, x: -40 }} initial={{ opacity: 0, x: -40 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.8, duration: 0.6 }} 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" 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) => ( {gradients.map((bg, index) => (
<motion.button <motion.button
@ -165,7 +167,7 @@ export default function HeaderProductJ7Awd() {
onClick={() => setSelectedColorIndex(index)} onClick={() => setSelectedColorIndex(index)}
whileHover={{ scale: 1.1 }} whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
className={`w-6 h-6 rounded-full border-2 ${ className={`w-4 h-4 md:w-6 md:h-6 rounded-full border-2 ${
selectedColorIndex === index ? "border-black" : "border-white" selectedColorIndex === index ? "border-black" : "border-white"
} shadow-md hover:cursor-pointer`} } shadow-md hover:cursor-pointer`}
style={{ background: bg }} style={{ background: bg }}

24
components/landing-page/header-product-j7-shs.tsx
View File

@ -142,22 +142,24 @@ export default function HeaderProductJ7Shs() {
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ delay: 0.5, duration: 0.8 }} transition={{ delay: 0.5, duration: 0.8 }}
className="relative w-full h-[300px] sm:h-[400px] md:h-[740px] overflow-hidden" className="relative w-full h-[200px] sm:h-[400px] md:h-[740px] overflow-hidden"
> >
<Image <div className="relative w-full h-[200px] sm:h-[300px] md:h-[740px] lg:h-[740px]">
src={images[selectedColorIndex]} <Image
alt="about-header" src={images[selectedColorIndex]}
fill alt="about-header"
className="object-cover" fill
sizes="(max-width: 768px) 100vw, 640px" className="object-cover"
priority sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1400px"
/> priority
/>
</div>
<motion.div <motion.div
initial={{ opacity: 0, x: -40 }} initial={{ opacity: 0, x: -40 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.8, duration: 0.6 }} 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" 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) => ( {gradients.map((bg, index) => (
<motion.button <motion.button
@ -165,7 +167,7 @@ export default function HeaderProductJ7Shs() {
onClick={() => setSelectedColorIndex(index)} onClick={() => setSelectedColorIndex(index)}
whileHover={{ scale: 1.1 }} whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
className={`w-6 h-6 rounded-full border-2 ${ className={`w-4 h-4 md:w-6 md:h-6 rounded-full border-2 ${
selectedColorIndex === index ? "border-black" : "border-white" selectedColorIndex === index ? "border-black" : "border-white"
} shadow-md hover:cursor-pointer`} } shadow-md hover:cursor-pointer`}
style={{ background: bg }} style={{ background: bg }}

30
components/landing-page/header-product-j8-awd.tsx
View File

@ -46,13 +46,13 @@ export default function HeaderProductJ8Awd() {
transition={{ duration: 0.8 }} transition={{ duration: 0.8 }}
className="flex flex-col items-center gap-6" className="flex flex-col items-center gap-6"
> >
<div className="relative w-full h-[300px] sm:h-[400px] md:h-[700px] overflow-hidden"> <div className="relative w-full h-[200px] sm:h-[300px] md:h-[500px] lg:h-[700px] overflow-hidden">
<Image <Image
src="/awd-8.png" src="/awd-8.png"
alt="about-header" alt="about-header"
fill fill
className="object-cover" className="object-cover object-center"
sizes="(max-width: 768px) 100vw, 640px" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1400px"
priority priority
/> />
@ -142,22 +142,24 @@ export default function HeaderProductJ8Awd() {
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ delay: 0.5, duration: 0.8 }} transition={{ delay: 0.5, duration: 0.8 }}
className="relative w-full h-[300px] sm:h-[400px] md:h-[740px] overflow-hidden" className="relative w-full h-[200px] sm:h-[400px] md:h-[740px] overflow-hidden"
> >
<Image <div className="relative w-full h-[200px] sm:h-[300px] md:h-[740px] lg:h-[740px]">
src={images[selectedColorIndex]} <Image
alt="about-header" src={images[selectedColorIndex]}
fill alt="about-header"
className="object-cover" fill
sizes="(max-width: 768px) 100vw, 640px" className="object-cover"
priority sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1400px"
/> priority
/>
</div>
<motion.div <motion.div
initial={{ opacity: 0, x: -40 }} initial={{ opacity: 0, x: -40 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.8, duration: 0.6 }} 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" 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) => ( {gradients.map((bg, index) => (
<motion.button <motion.button
@ -165,7 +167,7 @@ export default function HeaderProductJ8Awd() {
onClick={() => setSelectedColorIndex(index)} onClick={() => setSelectedColorIndex(index)}
whileHover={{ scale: 1.1 }} whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
className={`w-6 h-6 rounded-full border-2 ${ className={`w-4 h-4 md:w-6 md:h-6 rounded-full border-2 ${
selectedColorIndex === index ? "border-black" : "border-white" selectedColorIndex === index ? "border-black" : "border-white"
} shadow-md hover:cursor-pointer`} } shadow-md hover:cursor-pointer`}
style={{ background: bg }} style={{ background: bg }}

124
components/landing-page/header.tsx
View File

@ -41,7 +41,7 @@ export default function Header() {
<CarouselContent> <CarouselContent>
{heroImages.map((img, index) => ( {heroImages.map((img, index) => (
<CarouselItem key={index}> <CarouselItem key={index}>
<div className="relative w-full h-[810px]"> <div className="relative w-full h-[400px] sm:h-[500px] md:h-[810px]">
<Image <Image
src={img} src={img}
alt={`JAECOO Image ${index + 1}`} alt={`JAECOO Image ${index + 1}`}
@ -51,12 +51,12 @@ export default function Header() {
/> />
{index === 0 && ( {index === 0 && (
<div className="absolute inset-0 flex flex-col justify-center items-start px-6 md:px-28 z-10"> <div className="absolute inset-0 flex flex-col justify-center items-start px-4 sm:px-8 md:px-28 z-10">
<motion.h1 <motion.h1
initial={{ opacity: 0, y: 40 }} initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }} transition={{ duration: 0.8, ease: "easeOut" }}
className="text-3xl sm:text-4xl md:text-5xl font-bold text-black mb-4" className="text-2xl sm:text-3xl md:text-5xl font-bold text-black mb-4"
> >
JAECOO J7 AWD JAECOO J7 AWD
</motion.h1> </motion.h1>
@ -69,74 +69,82 @@ export default function Header() {
ease: "easeOut", ease: "easeOut",
delay: 0.2, delay: 0.2,
}} }}
className="text-lg text-black mb-6" className="text-sm sm:text-base md:text-lg text-black mb-6"
> >
DELICATE OFF-ROAD SUV DELICATE OFF-ROAD SUV
</motion.p> </motion.p>
<motion.div <motion.div
className="flex items-center gap-4" className="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4"
initial={{ opacity: 0, y: 40 }} initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1, ease: "easeOut", delay: 0.4 }} transition={{ duration: 1, ease: "easeOut", delay: 0.4 }}
> >
<Dialog open={open} onOpenChange={setOpen}> <motion.div
<DialogTrigger asChild> className="flex items-center gap-4"
<Button className="bg-[#1F6779] text-white h-[30px] md:h-[40px] rounded-full hover:cursor-pointer"> initial={{ opacity: 0, y: 40 }}
TEST DRIVE animate={{ opacity: 1, y: 0 }}
</Button> transition={{
</DialogTrigger> duration: 1,
<DialogContent className="sm:max-w-[1400px] h-[600px]"> ease: "easeOut",
<div className="flex items-center gap-4"> delay: 0.4,
<Image }}
src="/masjaecoonav.png" >
alt="MAS JAECOO Logo" <Dialog open={open} onOpenChange={setOpen}>
width={300} <DialogTrigger asChild>
height={30} <Button className="bg-[#1F6779] text-white h-[30px] md:h-[40px] rounded-full hover:cursor-pointer">
className=" object-fill" TEST DRIVE
/>
</div>
<DialogHeader>
<DialogTitle className="text-2xl text-center mb-4">
FORM TEST DRIVE
</DialogTitle>
</DialogHeader>
<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> </Button>
</div> </DialogTrigger>
</DialogContent> <DialogContent className="sm:max-w-[1400px] h-[600px]">
</Dialog> <div className="flex items-center gap-4">
<Link href={"/product"}> <Image
<Button src="/masjaecoonav.png"
variant="outline" alt="MAS JAECOO Logo"
className="rounded-full border-black text-black px-6 py-2 hover:cursor-pointer hover:bg-amber-50" width={300}
> height={30}
EXPLORE className=" object-fill"
</Button> />
</Link> </div>
<DialogHeader>
<DialogTitle className="text-2xl text-center mb-4">
FORM TEST DRIVE
</DialogTitle>
</DialogHeader>
<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>
<Link href={"/product"}>
<Button
variant="outline"
className="rounded-full border-black text-black px-6 py-2 hover:cursor-pointer hover:bg-amber-50"
>
EXPLORE
</Button>
</Link>
</motion.div>
</motion.div> </motion.div>
</div> </div>
)} )}
{/* <CarouselPrevious className="absolute left-6 top-1/2 -translate-y-1/2 z-20 border border-[#155B6E] text-[#155B6E] bg-white" />
<CarouselNext className="absolute right-6 top-1/2 -translate-y-1/2 z-20 border border-[#155B6E] text-[#155B6E] bg-white" /> */}
</div> </div>
</CarouselItem> </CarouselItem>
))} ))}

284
components/landing-page/navbar.tsx
View File

@ -26,6 +26,13 @@ export default function Navbar() {
const [showConsumerMenu, setShowConsumerMenu] = useState(false); const [showConsumerMenu, setShowConsumerMenu] = useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [showProdukMenuMobile, setShowProdukMenuMobile] = useState(false); // fix here
const [openMobile, setOpenMobile] = useState(false);
const [showPriceMenuMobile, setShowPriceMenuMobile] = useState(false);
const [showServiceMenuMobile, setShowServiceMenuMobile] = useState(false);
const [showAboutMenuMobile, setShowAboutMenuMobile] = useState(false);
const [showConsumerMenuMobile, setShowConsumerMenuMobile] = useState(false);
const isActive = (path: string) => const isActive = (path: string) =>
pathname === path || pathname.startsWith(path + "/"); pathname === path || pathname.startsWith(path + "/");
@ -449,7 +456,7 @@ export default function Navbar() {
</div> </div>
{isMobileMenuOpen && ( {isMobileMenuOpen && (
<div className="absolute top-full left-0 right-0 bg-white px-6 py-4 shadow-md flex flex-col gap-4 text-sm font-medium sm:hidden z-40"> <div className="absolute top-full left-0 right-0 bg-white px-6 py-4 shadow-md flex flex-col gap-4 text-sm font-bold sm:hidden z-40">
<Link href="/" onClick={() => setIsMobileMenuOpen(false)}> <Link href="/" onClick={() => setIsMobileMenuOpen(false)}>
<Button <Button
variant="ghost" variant="ghost"
@ -457,76 +464,245 @@ export default function Navbar() {
isActive("/") ? "bg-[#C2D8E2] text-[#1F3D4A]" : "" isActive("/") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
}`} }`}
> >
BERANDA HOMEPAGE
</Button> </Button>
</Link> </Link>
<Link href="/product" onClick={() => setIsMobileMenuOpen(false)}> <div className="block lg:hidden w-full">
<Button <Button
variant="ghost" variant="ghost"
className={`flex items-center gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${ onClick={() => setShowProdukMenuMobile((prev) => !prev)} // ← FIX
className={`w-full text-left flex items-center justify-start gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${
isActive("/product") || isActive("/produk") isActive("/product") || isActive("/produk")
? "bg-[#C2D8E2] text-[#1F3D4A]" ? "bg-[#C2D8E2] text-[#1F3D4A]"
: "" : ""
}`} }`}
> >
PRODUK PRODUCTS <ChevronDown className="w-4 h-4" />
</Button> </Button>
</Link>
<Link {showProdukMenuMobile && (
href="/price/price-information" <div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
onClick={() => setIsMobileMenuOpen(false)} <div className="flex flex-col gap-6">
> {produkList.map((car, i) => (
<div
key={i}
className="flex flex-col items-center text-center"
>
<Image
src={car.img}
alt={car.name}
width={250}
height={150}
className="object-contain"
/>
<p className="font-bold mt-4">{car.name}</p>
<div className="flex flex-col gap-2 mt-2 w-full items-center">
<Dialog open={openMobile} onOpenChange={setOpenMobile}>
<DialogTrigger asChild>
<Button className="bg-[#1F6779] text-white h-[40px] w-full rounded-full 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-2xl text-center mb-4 font-bold">
FORM TEST DRIVE
</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 ">
<Input placeholder="Nama" />
<Input placeholder="Email" />
<Input placeholder="Mobile Number" />
<Input placeholder="Location" />
</div>
<div className="mt-3 ">
<Textarea placeholder="Full Message" rows={4} />
</div>
<div className="mt-6 text-left">
<Button
onClick={() => setOpen(false)}
className="bg-[#1F6779] text-white rounded-full"
>
SEND INQUIRY
</Button>
</div>
</DialogContent>
</Dialog>
<Link href={car.link} className="w-full">
<Button
variant="outline"
className="rounded-full px-4 w-full hover:cursor-pointer hover:bg-amber-50"
>
EXPLORE
</Button>
</Link>
</div>
</div>
))}
</div>
</div>
)}
</div>
<div className="block lg:hidden w-full">
<Button <Button
variant="ghost" variant="ghost"
className={`w-full justify-start ${ onClick={() => setShowPriceMenuMobile((prev) => !prev)}
isActive("/price/information") className={`w-full text-left flex items-center justify-start gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${
isActive("/price") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
}`}
>
HARGA <ChevronDown className="w-4 h-4" />
</Button>
{showPriceMenuMobile && (
<div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
<div className="flex flex-col gap-4">
{priceList.map((item, i) => (
<Link
key={i}
href={item.link}
onClick={() => {
setIsMobileMenuOpen(false);
setShowPriceMenuMobile(false);
}}
className="block w-full"
>
<Button
variant="ghost"
className="w-full justify-start text-left text-sm font-medium hover:bg-gray-100 hover:text-[#1F6779]"
>
{item.name}
</Button>
</Link>
))}
</div>
</div>
)}
</div>
<div className="block lg:hidden w-full">
<Button
variant="ghost"
onClick={() => setShowServiceMenuMobile((prev) => !prev)}
className={`w-full text-left flex items-center justify-start gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${
isActive("/service") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
}`}
>
SERVICES <ChevronDown className="w-4 h-4" />
</Button>
{showServiceMenuMobile && (
<div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
<div className="flex flex-col gap-4">
{serviceList.map((item, i) => (
<Link
key={i}
href={item.link}
onClick={() => {
setIsMobileMenuOpen(false);
setShowServiceMenuMobile(false);
}}
className="block w-full"
>
<Button
variant="ghost"
className="w-full justify-start text-left text-sm font-medium hover:bg-gray-100 hover:text-[#1F6779]"
>
{item.name}
</Button>
</Link>
))}
</div>
</div>
)}
</div>
<div className="block lg:hidden w-full">
<Button
variant="ghost"
onClick={() => setShowAboutMenuMobile((prev) => !prev)}
className={`w-full text-left flex items-center justify-start gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${
isActive("/about") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
}`}
>
TENTANG DEALER JAECOO <ChevronDown className="w-4 h-4" />
</Button>
{showAboutMenuMobile && (
<div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
<div className="flex flex-col gap-4">
{aboutList.map((item, i) => (
<Link
key={i}
href={item.link}
onClick={() => {
setIsMobileMenuOpen(false);
setShowAboutMenuMobile(false);
}}
className="block w-full"
>
<Button
variant="ghost"
className="w-full justify-start text-left text-sm font-medium hover:bg-gray-100 hover:text-[#1F6779]"
>
{item.name}
</Button>
</Link>
))}
</div>
</div>
)}
</div>
<div className="block lg:hidden w-full">
<Button
variant="ghost"
onClick={() => setShowConsumerMenuMobile((prev) => !prev)}
className={`w-full text-left flex items-center justify-start gap-1 font-bold text-sm focus:outline-none rounded-full px-5 py-2 ${
isActive("/customer-service")
? "bg-[#C2D8E2] text-[#1F3D4A]" ? "bg-[#C2D8E2] text-[#1F3D4A]"
: "" : ""
}`} }`}
> >
HARGA LAYANAN KONSUMEN <ChevronDown className="w-4 h-4" />
</Button> </Button>
</Link>
<Link {showConsumerMenuMobile && (
href="/service/program-service" <div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
onClick={() => setIsMobileMenuOpen(false)} <div className="flex flex-col gap-4">
> {consumerList.map((item, i) => (
<Button <Link
variant="ghost" key={i}
className={`w-full justify-start ${ href={item.link}
isActive("/service/program-service") onClick={() => {
? "bg-[#C2D8E2] text-[#1F3D4A]" setIsMobileMenuOpen(false);
: "" setShowConsumerMenuMobile(false);
}`} }}
> className="block w-full"
SERVICES >
</Button> <Button
</Link> variant="ghost"
<Link href="/about/galery" onClick={() => setIsMobileMenuOpen(false)}> className="w-full justify-start text-left text-sm font-medium hover:bg-gray-100 hover:text-[#1F6779]"
<Button >
variant="ghost" {item.name}
className={`w-full justify-start ${ </Button>
isActive("/about/galery") ? "bg-[#C2D8E2] text-[#1F3D4A]" : "" </Link>
}`} ))}
> </div>
TENTANG DEALER JAECOO </div>
</Button> )}
</Link> </div>
<Link
href="/customer-service/after-sales"
onClick={() => setIsMobileMenuOpen(false)}
>
<Button
variant="ghost"
className={`w-full justify-start ${
isActive("/customer-service/after-sales")
? "bg-[#C2D8E2] text-[#1F3D4A]"
: ""
}`}
>
LAYANAN KONSUMEN
</Button>
</Link>
<Link href="/auth" onClick={() => setIsMobileMenuOpen(false)}> <Link href="/auth" onClick={() => setIsMobileMenuOpen(false)}>
<Button className="bg-[#1F6779] w-full justify-start"> <Button className="bg-[#1F6779] w-full justify-start">
<Lock className="w-3 h-3 mr-1" /> <Lock className="w-3 h-3 mr-1" />

10
components/landing-page/video.tsx
View File

@ -5,8 +5,14 @@ import Image from "next/image";
export default function Video() { export default function Video() {
return ( return (
<section className="pt-10 bg-white"> <section className="pt-10 bg-white">
<div className="relative mb-10 w-full h-[600px]"> <div className="relative mb-10 w-full h-[250px] sm:h-[400px] md:h-[600px]">
<Image src={"/maintenance.png"} alt="maintenance" fill /> <Image
src={"/maintenance.png"}
alt="maintenance"
fill
className="object-cover"
priority
/>
</div> </div>
<div className="relative w-full h-[500px] overflow-hidden"> <div className="relative w-full h-[500px] overflow-hidden">