update
This commit is contained in:
parent
e38a41ce5f
commit
e4c0a938fd
|
|
@ -0,0 +1,16 @@
|
||||||
|
import Footer from "@/components/landing-page/footer";
|
||||||
|
import GallerySection from "@/components/landing-page/galery";
|
||||||
|
import Navbar from "@/components/landing-page/navbar";
|
||||||
|
|
||||||
|
export default function AboutPage() {
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
|
||||||
|
<div className="relative z-10 bg-white w-full mx-auto">
|
||||||
|
<Navbar />
|
||||||
|
<GallerySection />
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,14 +1,7 @@
|
||||||
import Agent from "@/components/landing-page/agent";
|
import Agent from "@/components/landing-page/agent";
|
||||||
import Footer from "@/components/landing-page/footer";
|
import Footer from "@/components/landing-page/footer";
|
||||||
import Galeri from "@/components/landing-page/galeri";
|
|
||||||
import HeaderAbout from "@/components/landing-page/header-about";
|
import HeaderAbout from "@/components/landing-page/header-about";
|
||||||
import HeaderItems from "@/components/landing-page/header-item";
|
|
||||||
import Help from "@/components/landing-page/help";
|
|
||||||
import FormJaecoo from "@/components/landing-page/jaecoo-form";
|
|
||||||
import Navbar from "@/components/landing-page/navbar";
|
import Navbar from "@/components/landing-page/navbar";
|
||||||
import NearestLocation from "@/components/landing-page/nearest-location";
|
|
||||||
|
|
||||||
import Service from "@/components/landing-page/service";
|
|
||||||
|
|
||||||
export default function AboutPage() {
|
export default function AboutPage() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -17,9 +10,6 @@ export default function AboutPage() {
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<HeaderAbout />
|
<HeaderAbout />
|
||||||
<Agent />
|
<Agent />
|
||||||
<Galeri />
|
|
||||||
<FormJaecoo />
|
|
||||||
<Help />
|
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import Footer from "@/components/landing-page/footer";
|
||||||
|
import Navbar from "@/components/landing-page/navbar";
|
||||||
|
|
||||||
|
import Service from "@/components/landing-page/service";
|
||||||
|
import SosmedSection from "@/components/landing-page/social-media";
|
||||||
|
|
||||||
|
export default function AboutPage() {
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
|
||||||
|
<div className="relative z-10 bg-white w-full mx-auto">
|
||||||
|
<Navbar />
|
||||||
|
<SosmedSection />
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import Footer from "@/components/landing-page/footer";
|
||||||
|
import HeaderAfterSalesServices from "@/components/landing-page/header-after-sales";
|
||||||
|
import Navbar from "@/components/landing-page/navbar";
|
||||||
|
|
||||||
|
export default function AfterSalesServicesPage() {
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
|
||||||
|
<div className="relative z-10 bg-white w-full mx-auto">
|
||||||
|
<Navbar />
|
||||||
|
<HeaderAfterSalesServices />
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import Footer from "@/components/landing-page/footer";
|
||||||
|
import HeaderSalesServices from "@/components/landing-page/header-sales";
|
||||||
|
import Navbar from "@/components/landing-page/navbar";
|
||||||
|
|
||||||
|
export default function SalesServicesPage() {
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
|
||||||
|
<div className="relative z-10 bg-white w-full mx-auto">
|
||||||
|
<Navbar />
|
||||||
|
<HeaderSalesServices />
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import Footer from "@/components/landing-page/footer";
|
import Footer from "@/components/landing-page/footer";
|
||||||
import Header from "@/components/landing-page/header";
|
import Header from "@/components/landing-page/header";
|
||||||
import Items from "@/components/landing-page/items";
|
import Items from "@/components/landing-page/items";
|
||||||
import Location from "@/components/landing-page/location";
|
|
||||||
import Navbar from "@/components/landing-page/navbar";
|
import Navbar from "@/components/landing-page/navbar";
|
||||||
import Video from "@/components/landing-page/video";
|
import Video from "@/components/landing-page/video";
|
||||||
import Agent from "@/components/landing-page/agent";
|
import Agent from "@/components/landing-page/agent";
|
||||||
|
|
@ -17,7 +16,7 @@ export default function Home() {
|
||||||
<Items />
|
<Items />
|
||||||
<Video />
|
<Video />
|
||||||
<Agent />
|
<Agent />
|
||||||
<Location />
|
{/* <Location /> */}
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import Footer from "@/components/landing-page/footer";
|
||||||
|
import HeaderPriceInformation from "@/components/landing-page/header-price";
|
||||||
|
import Navbar from "@/components/landing-page/navbar";
|
||||||
|
|
||||||
|
export default function PriceInformationPage() {
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
|
||||||
|
<div className="relative z-10 bg-white w-full mx-auto">
|
||||||
|
<Navbar />
|
||||||
|
<HeaderPriceInformation />
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import Footer from "@/components/landing-page/footer";
|
||||||
|
import Navbar from "@/components/landing-page/navbar";
|
||||||
|
import HeaderPromo from "@/components/landing-page/promo";
|
||||||
|
|
||||||
|
export default function PromoPage() {
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
|
||||||
|
<div className="relative z-10 bg-white w-full mx-auto">
|
||||||
|
<Navbar />
|
||||||
|
<HeaderPromo />
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import Exterior from "@/components/landing-page/exterior";
|
||||||
|
import FeaturesAndSpecifications from "@/components/landing-page/features-and-specifications";
|
||||||
|
import Footer from "@/components/landing-page/footer";
|
||||||
|
import HeaderProductJ7Awd from "@/components/landing-page/header-product-j7-awd";
|
||||||
|
import Interior from "@/components/landing-page/interior";
|
||||||
|
import Navbar from "@/components/landing-page/navbar";
|
||||||
|
|
||||||
|
export default function ProductJ7Page() {
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
|
||||||
|
<div className="relative z-10 bg-white w-full mx-auto">
|
||||||
|
<Navbar />
|
||||||
|
<HeaderProductJ7Awd />
|
||||||
|
<Exterior />
|
||||||
|
<Interior />
|
||||||
|
<FeaturesAndSpecifications />
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import ExteriorShs from "@/components/landing-page/exterior-shs";
|
||||||
|
import FeaturesAndSpecificationsShs from "@/components/landing-page/features-and-specifications-shs";
|
||||||
|
import Footer from "@/components/landing-page/footer";
|
||||||
|
import HeaderProductJ7Shs from "@/components/landing-page/header-product-j7-shs";
|
||||||
|
import InteriorShs from "@/components/landing-page/interior-shs";
|
||||||
|
import Navbar from "@/components/landing-page/navbar";
|
||||||
|
|
||||||
|
export default function ProductJ7ShsPage() {
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
|
||||||
|
<div className="relative z-10 bg-white w-full mx-auto">
|
||||||
|
<Navbar />
|
||||||
|
<HeaderProductJ7Shs />
|
||||||
|
<ExteriorShs />
|
||||||
|
<InteriorShs />
|
||||||
|
<FeaturesAndSpecificationsShs />
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import ExteriorJ8Awd from "@/components/landing-page/exterior-j8-awd";
|
||||||
|
import FeaturesAndSpecificationsJ8 from "@/components/landing-page/features-and-specifications-j8";
|
||||||
|
import Footer from "@/components/landing-page/footer";
|
||||||
|
import HeaderProductJ8Awd from "@/components/landing-page/header-product-j8-awd";
|
||||||
|
import InteriorJ8Awd from "@/components/landing-page/interior-j8-awd";
|
||||||
|
import Navbar from "@/components/landing-page/navbar";
|
||||||
|
|
||||||
|
export default function ProductJ8Page() {
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
|
||||||
|
<div className="relative z-10 bg-white w-full mx-auto">
|
||||||
|
<Navbar />
|
||||||
|
<HeaderProductJ8Awd />
|
||||||
|
<ExteriorJ8Awd />
|
||||||
|
<InteriorJ8Awd />
|
||||||
|
<FeaturesAndSpecificationsJ8 />
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import Exterior from "@/components/landing-page/exterior";
|
import Exterior from "@/components/landing-page/exterior";
|
||||||
import FeaturesAndSpecifications from "@/components/landing-page/features-and-specifications";
|
import FeaturesAndSpecifications from "@/components/landing-page/features-and-specifications";
|
||||||
import Footer from "@/components/landing-page/footer";
|
import Footer from "@/components/landing-page/footer";
|
||||||
import HeaderProduct from "@/components/landing-page/header-product";
|
import HeaderProduct from "@/components/landing-page/header-product-j7-awd";
|
||||||
import Interior from "@/components/landing-page/interior";
|
import Interior from "@/components/landing-page/interior";
|
||||||
import Navbar from "@/components/landing-page/navbar";
|
import Navbar from "@/components/landing-page/navbar";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import HeaderAfterSales from "@/components/landing-page/after-sales";
|
||||||
|
import Footer from "@/components/landing-page/footer";
|
||||||
|
import Navbar from "@/components/landing-page/navbar";
|
||||||
|
|
||||||
|
export default function AfterSalesPage() {
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
|
||||||
|
<div className="relative z-10 bg-white w-full mx-auto">
|
||||||
|
<Navbar />
|
||||||
|
<HeaderAfterSales />
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import Footer from "@/components/landing-page/footer";
|
||||||
|
import Navbar from "@/components/landing-page/navbar";
|
||||||
|
import HeaderProgramSales from "@/components/landing-page/program-sales";
|
||||||
|
|
||||||
|
export default function ProgramSalesPage() {
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
|
||||||
|
<div className="relative z-10 bg-white w-full mx-auto">
|
||||||
|
<Navbar />
|
||||||
|
<HeaderProgramSales />
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
export default function HeaderAfterSales() {
|
||||||
|
const services = [
|
||||||
|
{
|
||||||
|
image: "/after-sales.png",
|
||||||
|
title: "GARANSI KENDARAAN",
|
||||||
|
description:
|
||||||
|
"Jaecoo Indonesia berkomitmen seluruh pelanggan setia Jaecoo Indonesia dengan memberikan garansi kendaraan selama 6 tahun apabila terdapat cacat material atau kesalahan dari hasil kerja pabrik.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image: "/after-sales.png",
|
||||||
|
title: "GARANSI MESIN",
|
||||||
|
description:
|
||||||
|
"Jaecoo Indonesia memberikan garansi mesin selama 10 tahun apabila terdapat cacat material atau kesalahan dari hasil kerja pabrik.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image: "/after-sales.png",
|
||||||
|
title: "FREE BIAYA PERAWATAN",
|
||||||
|
description:
|
||||||
|
"Jaecoo Indonesia memberikan gratis biaya perawatan atau service di Dealer Resmi Jaecoo selama 4 tahun kepada seluruh pelanggan Jaecoo Indonesia.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image: "/after-sales2.png",
|
||||||
|
title: "SPAREPART",
|
||||||
|
description:
|
||||||
|
"Jaecoo Indonesia menyediakan sparepart berkualitas terbaik dan orisinil dari pabrik Jaecoo Indonesia.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
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 max-w-[1400px] mx-auto overflow-hidden">
|
||||||
|
<div className="relative pt-[40%]">
|
||||||
|
{" "}
|
||||||
|
{/* Ini mengatur tinggi sesuai rasio gambar */}
|
||||||
|
<Image
|
||||||
|
src="/banner-after-sales.png"
|
||||||
|
alt="about-header"
|
||||||
|
fill
|
||||||
|
className="object-contain"
|
||||||
|
sizes="(max-width: 768px) 100vw, 1400px"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full max-w-[1400px] mx-auto mt-12">
|
||||||
|
<h2 className="text-3xl font-bold text-black mb-8">
|
||||||
|
After Sales Services
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{services.map((item, index) => (
|
||||||
|
<div key={index} className="flex flex-col gap-4">
|
||||||
|
<div className="relative w-full h-80">
|
||||||
|
<Image
|
||||||
|
src={item.image}
|
||||||
|
alt={item.title}
|
||||||
|
fill
|
||||||
|
className="object-cover "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-[#1F6779]">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-[#1F6779] text-[18px]">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -4,6 +4,11 @@ import Image from "next/image";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
const agents = [
|
const agents = [
|
||||||
|
{
|
||||||
|
name: "Henny",
|
||||||
|
title: "Branch Manager Jaecoo Kelapa Gading",
|
||||||
|
image: "/henny.png",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "Zamroni",
|
name: "Zamroni",
|
||||||
title: "Spv Jaecoo Kelapa Gading",
|
title: "Spv Jaecoo Kelapa Gading",
|
||||||
|
|
@ -24,16 +29,11 @@ const agents = [
|
||||||
title: "Spv Jaecoo Kelapa Gading",
|
title: "Spv Jaecoo Kelapa Gading",
|
||||||
image: "/amendra.png",
|
image: "/amendra.png",
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: "Henny",
|
|
||||||
title: "Branch Manager Jaecoo Kelapa Gading",
|
|
||||||
image: "/henny.png",
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function Agent() {
|
export default function Agent() {
|
||||||
return (
|
return (
|
||||||
<section className="py-16 px-6 md:px-12 bg-[#f9f9f9] text-center mt-0">
|
<section className="py-16 px-6 md:px-5 bg-[#FAFDFF] 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 }}
|
||||||
|
|
@ -41,20 +41,10 @@ export default function Agent() {
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
className="text-3xl md:text-6xl font-semibold text-gray-900 mb-2"
|
className="text-3xl md:text-6xl font-semibold text-gray-900 mb-2"
|
||||||
>
|
>
|
||||||
Agen Unggulan Kami
|
Our Teams
|
||||||
</motion.h2>
|
</motion.h2>
|
||||||
|
|
||||||
<motion.p
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-2 place-items-center mt-10">
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.6, delay: 0.2 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
className="text-gray-600 mb-10 text-lg"
|
|
||||||
>
|
|
||||||
Temui anggota tim kami yang luar biasa
|
|
||||||
</motion.p>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6 justify-center">
|
|
||||||
{agents.map((agent, index) => (
|
{agents.map((agent, index) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={index}
|
key={index}
|
||||||
|
|
@ -66,9 +56,9 @@ export default function Agent() {
|
||||||
ease: "easeOut",
|
ease: "easeOut",
|
||||||
}}
|
}}
|
||||||
viewport={{ once: true, amount: 0.3 }}
|
viewport={{ once: true, amount: 0.3 }}
|
||||||
className="bg-white shadow-md px-4 py-10 flex flex-col items-center h-[317px]"
|
className="bg-white shadow-md py-4 gap-2 flex flex-col items-center h-[300px] w-[250px]"
|
||||||
>
|
>
|
||||||
<div className="relative w-36 h-40 mb-14">
|
<div className="relative w-44 h-48 mb-3">
|
||||||
<Image
|
<Image
|
||||||
src={agent.image}
|
src={agent.image}
|
||||||
alt={agent.name}
|
alt={agent.name}
|
||||||
|
|
@ -76,8 +66,8 @@ export default function Agent() {
|
||||||
className="rounded-full object-cover"
|
className="rounded-full object-cover"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-2xl text-gray-900">{agent.name}</h3>
|
<h3 className="text-lg text-gray-900 text-center">{agent.name}</h3>
|
||||||
<p className="text-xs text-gray-600 text-center mt-1">
|
<p className="text-sm text-gray-600 text-center mt-1">
|
||||||
{agent.title}
|
{agent.title}
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
const agents = [
|
||||||
|
{
|
||||||
|
name: "Johny Nugroho",
|
||||||
|
title: "Branch Manager Jaecoo Cihampelas Bandung",
|
||||||
|
image: "/johny.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Basuki Pamungkas",
|
||||||
|
title: "Spv Jaecoo Cihampelas Bandung",
|
||||||
|
image: "/basuki.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Deni Tihayar",
|
||||||
|
title: "Spv Jaecoo Cihampelas Bandung",
|
||||||
|
image: "/deni.png",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function BestAgent() {
|
||||||
|
return (
|
||||||
|
<section className="py-16 px-4 sm:px-6 md:px-12 bg-[#f9f9f9] text-center mt-0">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="text-2xl sm:text-3xl md:text-4xl font-semibold text-gray-900 mb-10"
|
||||||
|
>
|
||||||
|
Our Teams
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<div className="flex flex-col md:flex-row flex-wrap items-center justify-center gap-6">
|
||||||
|
{agents.map((agent, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 40 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{
|
||||||
|
duration: 0.6,
|
||||||
|
delay: index * 0.2 + 0.3,
|
||||||
|
ease: "easeOut",
|
||||||
|
}}
|
||||||
|
viewport={{ once: true, amount: 0.3 }}
|
||||||
|
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">
|
||||||
|
<Image
|
||||||
|
src={agent.image}
|
||||||
|
alt={agent.name}
|
||||||
|
fill
|
||||||
|
className="rounded-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg text-gray-900 text-center">{agent.name}</h3>
|
||||||
|
<p className="text-xs text-gray-600 text-center mt-1">
|
||||||
|
{agent.title}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { useInView } from "react-intersection-observer";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
const featuresJ8 = [
|
||||||
|
{
|
||||||
|
title: "ARDIS",
|
||||||
|
description:
|
||||||
|
"ARDIS (All-Road Drive Intelligent System) automatically adjusts power to each wheel, giving you better grip, stability, and control on any road.",
|
||||||
|
image: "/ex-j8.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "CDC Magnetic Suspension",
|
||||||
|
description:
|
||||||
|
"Equipped with real-time road condition detection, the J8 instantly adjusts shock absorbers to keep the vehicle stable, ensuring a smooth and controlled ride.",
|
||||||
|
image: "/ex-j8-2.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "2.0L Turbocharged Engine",
|
||||||
|
description:
|
||||||
|
"Equipped with a 2.0L turbo engine that delivers 183 kW and 385 Nm, the J8 offers strong performance and smooth control for any road.",
|
||||||
|
image: "/ex-j8-3.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Waterfall Grille Design",
|
||||||
|
description:
|
||||||
|
"Features a bold, flowing design that captures attention at first glance. The cascading pattern blends elegance with energy, reflecting modern confidence while optimizing airflow for improved vehicle performance.",
|
||||||
|
image: "/ex-j8-4.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "LED Tech Headlamp",
|
||||||
|
description: "",
|
||||||
|
image: "/ex-j8-5.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "20-inch Alloy Wheels",
|
||||||
|
description:
|
||||||
|
"Striking 20-inch alloy wheels deliver a blend of style and durability. ",
|
||||||
|
image: "/ex-j8-6.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Hidden door handles",
|
||||||
|
description:
|
||||||
|
"Seamlessly integrated into the vehicle body to reduce wind noise and drag.",
|
||||||
|
image: "/ex-j8-7.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Strong Through Waistline",
|
||||||
|
description:
|
||||||
|
"The J8’s exterior embodies bold simplicity with crisp, powerful lines and a golden-ratio silhouette.",
|
||||||
|
image: "/ex-j8-8.png",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ExteriorJ8Awd() {
|
||||||
|
const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.2 });
|
||||||
|
const [show, setShow] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (inView) {
|
||||||
|
setShow(true);
|
||||||
|
}
|
||||||
|
}, [inView]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
ref={ref}
|
||||||
|
className="py-10 px-4 sm:px-6 md:px-20 bg-white overflow-hidden"
|
||||||
|
>
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={show ? { opacity: 1, y: 0 } : {}}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="text-2xl mt-5 mb-8"
|
||||||
|
>
|
||||||
|
<span className="text-[#1F6779] font-semibold">Jaecoo 8 AWD</span>{" "}
|
||||||
|
Teknologi dan Exterior
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 50 }}
|
||||||
|
animate={show ? { opacity: 1, y: 0 } : {}}
|
||||||
|
transition={{ delay: 0.2, duration: 0.8 }}
|
||||||
|
className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2 sm:gap-4 mt-5"
|
||||||
|
>
|
||||||
|
{featuresJ8.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
className="relative aspect-[4/3] overflow-hidden group"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={item.image}
|
||||||
|
alt={item.title}
|
||||||
|
fill
|
||||||
|
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
||||||
|
sizes="(max-width: 768px) 100vw, 25vw"
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-0 bg-gradient-to-t from-black/80 to-transparent p-4">
|
||||||
|
<h3 className="text-sm sm:text-base font-bold text-white">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs sm:text-sm text-gray-300 mt-1">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,141 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { useInView } from "react-intersection-observer";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
const featuresshs = [
|
||||||
|
{
|
||||||
|
title: "Rear view mirrors",
|
||||||
|
description:
|
||||||
|
"The mirrors on the pillars are a discreet but aesthetic design detail of the Jaecoo J7 SHS. Their contrasting inserts harmoniously resonate with other accent touches of the exterior.",
|
||||||
|
image: "/ex-shs3.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Wheels 19”",
|
||||||
|
description:
|
||||||
|
"Built with a lightweight aluminum chassis, offering enhanced strength, durability, and improved performance for a superior driving experience.",
|
||||||
|
image: "/ex-shs4.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Retractable handles",
|
||||||
|
description:
|
||||||
|
"The designers used a spectacular solution - door handles that automatically extend using an electric drive. Minimal force is required to open the door.",
|
||||||
|
image: "/ex-shs5.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Rear Bumper Design",
|
||||||
|
description:
|
||||||
|
"Featuring refined lines and bold contours, the rear bumper enhances the vehicle's sporty and stylish character.",
|
||||||
|
image: "/ex-shs6.png",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ExteriorShs() {
|
||||||
|
const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.2 });
|
||||||
|
const [show, setShow] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (inView) {
|
||||||
|
setShow(true);
|
||||||
|
}
|
||||||
|
}, [inView]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
ref={ref}
|
||||||
|
className="py-10 px-4 sm:px-6 md:px-20 bg-white overflow-hidden"
|
||||||
|
>
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={show ? { opacity: 1, y: 0 } : {}}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="text-2xl mt-5 mb-8"
|
||||||
|
>
|
||||||
|
<span className="text-[#1F6779] font-semibold">Jaecoo 7 SHS</span>{" "}
|
||||||
|
Teknologi dan Exterior
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
animate={show ? { opacity: 1, scale: 1 } : {}}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
className="relative w-full h-[300px] sm:h-[400px] md:h-[600px] my-5"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="/ex-shs.png"
|
||||||
|
alt="Aluminium Chassis"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="100vw"
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-6 left-3 sm:left-3 md:left-6 max-w-5xl">
|
||||||
|
<h2 className="text-xl sm:text-xl font-semibold text-white">
|
||||||
|
5th generation 1.5t + 1dht
|
||||||
|
</h2>
|
||||||
|
<p className="text-xs sm:text-xs mt-2 text-gray-200">
|
||||||
|
Drive with peace of mind, protected by 7 strategically placed
|
||||||
|
airbags designed for maximum safety in every journey.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
animate={show ? { opacity: 1, scale: 1 } : {}}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
className="relative w-full h-[300px] sm:h-[400px] md:h-[600px]"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="/ex-shs2.png"
|
||||||
|
alt="Aluminium Chassis"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="100vw"
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-6 left-3 sm:left-3 md:left-6 max-w-5xl">
|
||||||
|
<h2 className="text-xl sm:text-xl font-semibold text-white">
|
||||||
|
IP68 protection hybrid battery
|
||||||
|
</h2>
|
||||||
|
<p className="text-xs sm:text-xs mt-2 text-gray-200">
|
||||||
|
Advanced Hybrid Battery Pack Designed for Durability and Performance
|
||||||
|
with IP68 Protection. Engineered for toughness, this hybrid battery
|
||||||
|
pack features IP68 protection and triple-layer safety against
|
||||||
|
damage.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 50 }}
|
||||||
|
animate={show ? { opacity: 1, y: 0 } : {}}
|
||||||
|
transition={{ delay: 0.2, duration: 0.8 }}
|
||||||
|
className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2 sm:gap-4 mt-5"
|
||||||
|
>
|
||||||
|
{featuresshs.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
className="relative aspect-[4/3] overflow-hidden group"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={item.image}
|
||||||
|
alt={item.title}
|
||||||
|
fill
|
||||||
|
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
||||||
|
sizes="(max-width: 768px) 100vw, 25vw"
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-0 bg-gradient-to-t from-black/80 to-transparent p-4">
|
||||||
|
<h3 className="text-sm sm:text-base font-bold text-white">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs sm:text-sm text-gray-300 mt-1">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
export default function FeaturesAndSpecificationsJ8() {
|
||||||
|
return (
|
||||||
|
<section className="pt-10 px-4 sm:px-6 md:px-20 bg-white">
|
||||||
|
<h2 className="text-2xl mt-5 mb-8">
|
||||||
|
<span className="text-[#1F6779] font-semibold">Jaecoo 8 AWD</span> Fitur
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="relative w-full h-[300px] sm:h-[400px] md:h-[600px]">
|
||||||
|
<Image
|
||||||
|
src="/fitur1.png"
|
||||||
|
alt="Aluminium Chassis"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="100vw"
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-26 left-3 sm:left-10 md:left-26 max-w-xs bg-white/60 rounded-lg p-4">
|
||||||
|
<h2 className="text-xl sm:text-sm font-semibold text-black">
|
||||||
|
Lane Changing Assistance
|
||||||
|
</h2>
|
||||||
|
<p className="text-xs sm:text-xs mt-2 text-black">
|
||||||
|
Advanced safety feature that monitors surrounding traffic and
|
||||||
|
provides alerts or steering support to help ensure sasfe and
|
||||||
|
confident lane changes
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative w-full h-[300px] sm:h-[400px] md:h-[600px] my-20">
|
||||||
|
<Image
|
||||||
|
src="/awd-fitur8.png"
|
||||||
|
alt="Aluminium Chassis"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="100vw"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-2xl mt-5 mb-8">
|
||||||
|
<span className="text-[#1F6779] font-semibold">Jaecoo 8 AWD</span>{" "}
|
||||||
|
Spesifikasi
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-32 gap-y-6 text-sm sm:text-base text-start my-10">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">Max Power</p>
|
||||||
|
<p className="font-bold">248ps</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">AWD Technology</p>
|
||||||
|
<p className="font-bold">ARDIS</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">Suspension</p>
|
||||||
|
<p className="font-bold">CDC Magnetic</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">ADAS</p>
|
||||||
|
<p className="font-bold">19 adas</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">Engine</p>
|
||||||
|
<p className="font-bold">2.0TGDI</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">0-100km-h</p>
|
||||||
|
<p className="font-bold">8.8s</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">airbag</p>
|
||||||
|
<p className="font-bold">10 airbags</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">Torque</p>
|
||||||
|
<p className="font-bold">385N.m</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
export default function FeaturesAndSpecificationsShs() {
|
||||||
|
return (
|
||||||
|
<section className="pt-10 px-4 sm:px-6 md:px-20 bg-white">
|
||||||
|
<h2 className="text-2xl mt-5 mb-8">
|
||||||
|
<span className="text-[#1F6779] font-semibold">Jaecoo 7 SHS</span> Fitur
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="relative w-full h-[300px] sm:h-[400px] md:h-[600px]">
|
||||||
|
<Image
|
||||||
|
src="/fitur1.png"
|
||||||
|
alt="Aluminium Chassis"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="100vw"
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-26 left-3 sm:left-10 md:left-26 max-w-xs bg-white/60 rounded-lg p-4">
|
||||||
|
<h2 className="text-xl sm:text-sm font-semibold text-black">
|
||||||
|
Lane Changing Assistance
|
||||||
|
</h2>
|
||||||
|
<p className="text-xs sm:text-xs mt-2 text-black">
|
||||||
|
Advanced safety feature that monitors surrounding traffic and
|
||||||
|
provides alerts or steering support to help ensure sasfe and
|
||||||
|
confident lane changes
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative w-full h-[300px] sm:h-[400px] md:h-[600px] my-20">
|
||||||
|
<Image
|
||||||
|
src="/fitur2.png"
|
||||||
|
alt="Aluminium Chassis"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="100vw"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-2xl mt-5 mb-8">
|
||||||
|
<span className="text-[#1F6779] font-semibold">Jaecoo 7 SHS</span>{" "}
|
||||||
|
Spesifikasi
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-x-32 gap-y-6 text-sm sm:text-base text-start my-10">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">Max Range</p>
|
||||||
|
<p className="font-bold">1,200km</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">Power Train</p>
|
||||||
|
<p className="font-bold">1.5T+1DHT</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">Pure EV Mode Range</p>
|
||||||
|
<p className="font-bold">WLTP 90km</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">ADAS</p>
|
||||||
|
<p className="font-bold">19 ADAS</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">Battery Capacity</p>
|
||||||
|
<p className="font-bold">18.3kWh</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">0-100km-h</p>
|
||||||
|
<p className="font-bold">8,5s</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">Airbag</p>
|
||||||
|
<p className="font-bold">8 airbags</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -75,99 +75,6 @@ export default function FeaturesAndSpecifications() {
|
||||||
<p className="font-bold">19 adas</p>
|
<p className="font-bold">19 adas</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-6 pt-10 ">
|
|
||||||
<div className="text-start px-4 border-l border-gray-300">
|
|
||||||
<div className="mb-14 ml-3">
|
|
||||||
<div className="text-4xl mb-2">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="30"
|
|
||||||
height="30"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<g fill="none">
|
|
||||||
<path
|
|
||||||
stroke="currentColor"
|
|
||||||
// stroke-linejoin="round"
|
|
||||||
// stroke-width="2"
|
|
||||||
d="M12 13v7.098c0 .399 0 .598-.129.67c-.129.071-.298-.035-.636-.246L4.94 16.588c-.46-.288-.69-.431-.815-.658C4 15.705 4 15.434 4 14.893V8m8 5L4 8m8 5l5.286-3.304c1.218-.761 1.827-1.142 1.827-1.696s-.609-.935-1.827-1.696L13.06 3.663c-.516-.323-.773-.484-1.06-.484s-.544.161-1.06.484L4 8"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M19 12a1 1 0 1 0 2 0zm.875-3.93L19 8.553zM19 9.107V12h2V9.108zm.59-2.544l-3.06-1.912l-1.06 1.696l3.06 1.913zM21 9.109c0-.252.001-.51-.02-.733a2 2 0 0 0-.23-.79l-1.75.97c-.027-.05-.02-.073-.011.01c.01.106.011.254.011.543zm-2.47-.848c.246.154.37.233.454.298c.067.05.043.045.016-.004l1.75-.97a2 2 0 0 0-.549-.614c-.177-.136-.397-.272-.611-.405z"
|
|
||||||
/>
|
|
||||||
<circle
|
|
||||||
cx="17.5"
|
|
||||||
cy="16.5"
|
|
||||||
r="2.5"
|
|
||||||
stroke="currentColor"
|
|
||||||
// stroke-width="2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
stroke="currentColor"
|
|
||||||
// stroke-linecap="round"
|
|
||||||
// stroke-width="2"
|
|
||||||
d="m21 20l-1.5-1.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M14.53 20.598a1 1 0 0 0-1.06-1.696zM11 20.375l-.53.848zm.937.444l-.063.998zm.126 0L12 19.82zm-.533-1.292l-3-1.875l-1.06 1.696l3 1.875zm1.94-.625l-.5.313l1.06 1.695l.5-.312zm-.5.313l-.5.312l1.06 1.696l.5-.312zm-2.5 2.008c.213.133.429.27.625.368c.214.108.47.206.779.226L12 19.82c.056.003.072.022-.005-.016a7 7 0 0 1-.465-.278zm2-1.696a7 7 0 0 1-.465.278c-.077.038-.061.02-.005.016l.126 1.996c.31-.02.565-.118.779-.226c.196-.099.412-.235.625-.368zm-.596 2.29q.126.008.252 0L12 19.82z"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p className="font-semibold mb-1"> {">"}TERSEDIA DALAM STOK</p>
|
|
||||||
<p className="text-gray-600 text-sm">
|
|
||||||
Jelajahi pilihan hebat kami dari mobil Jaecoo
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-start px-4 border-l border-r border-gray-300">
|
|
||||||
<div className="mb-14 ml-3">
|
|
||||||
<div className="text-2xl mb-2">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="30"
|
|
||||||
height="30"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7L4 8v10h16V8zm0-2l8-5H4zM4 8V6v12z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p className="font-semibold mb-1">{">"}BERITAHU SAYA</p>
|
|
||||||
<p className="text-gray-600 text-sm">
|
|
||||||
Daftar untuk semua berita terbaru dari Jaecoo
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-start px-4 border-r border-gray-300">
|
|
||||||
<div className="mb-14">
|
|
||||||
<div className="text-2xl mb-2">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="30"
|
|
||||||
height="30"
|
|
||||||
viewBox="0 0 512 512"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
// fill-rule="evenodd"
|
|
||||||
d="M256 42.667c117.821 0 213.334 95.513 213.334 213.333c0 117.821-95.513 213.334-213.334 213.334c-117.82 0-213.333-95.513-213.333-213.334C42.667 138.18 138.18 42.667 256 42.667M85.334 256c0 87.032 65.145 158.848 149.332 169.346V316.358c-21.87-7.73-38.283-27.01-41.913-50.51L85.636 245.762q-.301 5.081-.302 10.238m341.031-10.238l-107.118 20.086c-3.629 23.5-20.043 42.78-41.913 50.51v108.988C361.523 414.848 426.668 343.032 426.668 256q-.001-5.156-.302-10.238M256 85.334c-76.056 0-140.493 49.75-162.541 118.484l107.16 20.085C211.699 204.827 232.352 192 256 192c23.65 0 44.302 12.827 55.382 31.903l107.16-20.085C396.493 135.084 332.057 85.334 256 85.334"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p className="font-semibold mb-1">{">"}PESAN TEST DRIVE</p>
|
|
||||||
<p className="text-gray-600 text-sm">
|
|
||||||
Atur test drive di jalan melalui Dealer terdekat kami
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||||
|
|
||||||
|
const imagesPerPage = 6;
|
||||||
|
|
||||||
|
const galleryImages = [
|
||||||
|
"/gl1.png",
|
||||||
|
"/gl-2-news.png",
|
||||||
|
"/gl3.png",
|
||||||
|
"/gl4.png",
|
||||||
|
"/gl5.png",
|
||||||
|
"/gl6.png",
|
||||||
|
"/gl7.png",
|
||||||
|
"/gl8.png",
|
||||||
|
"/gl9.png",
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function GallerySection() {
|
||||||
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const totalPages = Math.ceil(galleryImages.length / imagesPerPage);
|
||||||
|
|
||||||
|
const paginatedImages = galleryImages.slice(
|
||||||
|
(currentPage - 1) * imagesPerPage,
|
||||||
|
currentPage * imagesPerPage
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-16 px-4 max-w-[1400px] mx-auto">
|
||||||
|
<h2 className="text-4xl font-bold mb-8">Galeri Kami</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||||
|
{paginatedImages.map((img, index) => (
|
||||||
|
<div key={index} className="relative w-full aspect-[3/2]">
|
||||||
|
<Image
|
||||||
|
src={img}
|
||||||
|
alt={`gallery-${index}`}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-center gap-2 mt-10">
|
||||||
|
<button
|
||||||
|
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
className="p-2 rounded-md hover:bg-gray-200 disabled:opacity-30"
|
||||||
|
>
|
||||||
|
<ChevronLeft />
|
||||||
|
</button>
|
||||||
|
{[...Array(totalPages)].map((_, i) => (
|
||||||
|
<button
|
||||||
|
key={i}
|
||||||
|
onClick={() => setCurrentPage(i + 1)}
|
||||||
|
className={`w-8 h-8 rounded-md border text-sm ${
|
||||||
|
currentPage === i + 1
|
||||||
|
? "bg-[#1F6779] text-white"
|
||||||
|
: "text-gray-700 hover:bg-gray-100"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{i + 1}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
||||||
|
}
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
className="p-2 rounded-md hover:bg-gray-200 disabled:opacity-30"
|
||||||
|
>
|
||||||
|
<ChevronRight />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -6,52 +6,112 @@ import { motion } from "framer-motion";
|
||||||
export default function HeaderAbout() {
|
export default function HeaderAbout() {
|
||||||
return (
|
return (
|
||||||
<section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
|
<section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
|
||||||
<div className="flex flex-col items-center gap-6">
|
|
||||||
<motion.div
|
<motion.div
|
||||||
className="relative w-full h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden "
|
initial={{ opacity: 0, y: 50 }}
|
||||||
initial={{ opacity: 0, y: 40 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
transition={{ duration: 0.8 }}
|
||||||
transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
|
className="flex flex-col items-center gap-6 mb-24"
|
||||||
viewport={{ once: true }}
|
|
||||||
>
|
>
|
||||||
|
<h2 className="text-4xl font-bold mb-1">
|
||||||
|
Mengenal Lebih Dekat Dealer Resmi{" "}
|
||||||
|
<span className="text-[#1F6779]">Jaecoo</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg">
|
||||||
|
Komitmen kami adalah memberikan layanan terbaik dan pengalaman premium
|
||||||
|
di setiap kunjungan Anda.
|
||||||
|
</p>
|
||||||
|
<div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[500px] overflow-hidden">
|
||||||
<Image
|
<Image
|
||||||
src="/about-i.png"
|
src="/journey-2.png"
|
||||||
alt="about-header"
|
alt="about-header"
|
||||||
fill
|
fill
|
||||||
className="object-cover"
|
className="object-cover"
|
||||||
sizes="(max-width: 768px) 100vw, 640px"
|
sizes="(max-width: 768px) 100vw, 640px"
|
||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</motion.div>
|
||||||
<div className="w-full flex flex-col lg:flex-row gap-10 mt-10">
|
<div className="max-w-[1400px] mx-auto flex flex-col lg:flex-row gap-10 my-10">
|
||||||
<motion.div
|
<motion.div
|
||||||
className="w-full lg:w-6/12 space-y-6 sm:ml-15"
|
className="relative w-full lg:w-[536px] h-[300px] sm:h-[400px] lg:h-[576px] overflow-hidden"
|
||||||
|
initial={{ opacity: 0, x: 40 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="/mas-group.png"
|
||||||
|
alt="Dealer Jaecoo"
|
||||||
|
fill
|
||||||
|
className="object-cover object-center"
|
||||||
|
sizes="(max-width: 768px) 100vw, 536px"
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
className="w-full lg:w-8/12 space-y-10 "
|
||||||
initial={{ opacity: 0, x: -40 }}
|
initial={{ opacity: 0, x: -40 }}
|
||||||
whileInView={{ opacity: 1, x: 0 }}
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
|
transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
>
|
>
|
||||||
<h2 className="text-2xl sm:text-3xl font-bold text-black">
|
<h2 className="text-2xl sm:text-3xl font-bold text-black">
|
||||||
Mengenal Lebih Dekat Dealer Resmi Jaecoo
|
<span className="text-[#1F6779]">Mas </span>Group
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-8 mt-5">
|
||||||
|
<p className="text-black leading-relaxed text-xl">
|
||||||
|
MAS Group began its journey as a vehicle rental service provider,
|
||||||
|
supporting Chevron Group’s oil and gas exploration vendors in Riau
|
||||||
|
Province. In 2002, with the entry of Ford Motor Company into the
|
||||||
|
Indonesian market, we were appointed as an authorized Ford dealer
|
||||||
|
for the Riau region.
|
||||||
|
</p>
|
||||||
|
<p className="text-black leading-relaxed text-xl">
|
||||||
|
Thanks to our team’s extensive experience and the strength of our
|
||||||
|
product offerings, we successfully secured large fleet contracts
|
||||||
|
and were consistently recognized by Ford Motor Indonesia as one of
|
||||||
|
its top-performing dealers over several consecutive years.
|
||||||
|
</p>
|
||||||
|
<p className="text-black leading-relaxed text-xl">
|
||||||
|
Building on this success, we expanded our automotive portfolio to
|
||||||
|
include Mercedes-Benz trucks dealership operations and broadened
|
||||||
|
our car rental services to meet the increasing demand from sectors
|
||||||
|
such as coal mining, oil and gas, palm oil plantations, and
|
||||||
|
logistics.
|
||||||
|
</p>
|
||||||
|
<p className="text-black leading-relaxed text-xl">
|
||||||
|
Today, we are proud to be a major EV dealer in Indonesia,
|
||||||
|
representing several leading brands: Chery & Tiggo ,Great Wall
|
||||||
|
Motors (Tank, Haval, Ora), MG, Omoda & Jaecoo and Lepas.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
<div className="max-w-[1400px] mx-auto flex flex-col lg:flex-row gap-10 mt-24">
|
||||||
|
<motion.div
|
||||||
|
className="w-full lg:w-8/12 space-y-6 "
|
||||||
|
initial={{ opacity: 0, x: -40 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl sm:text-4xl font-bold text-black">
|
||||||
|
Mengenal Lebih Dekat Dealer Resmi{" "}
|
||||||
|
<span className="text-[#1F6779]">Jaecoo</span>
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg sm:text-xl font-semibold text-gray-800 mb-2">
|
<p className="text-gray-600 leading-relaxed text-xl">
|
||||||
Deskripsi Singkat
|
Dealer resmi Jaecoo sejak 2025, berlokasi di Kelapa Gading. Kami
|
||||||
</h3>
|
|
||||||
<p className="text-gray-600 leading-relaxed text-base">
|
|
||||||
Dealer resmi Jaecoo sejak 2023, berlokasi di pusat Bandung. Kami
|
|
||||||
melayani penjualan, servis, serta test drive dengan fasilitas
|
melayani penjualan, servis, serta test drive dengan fasilitas
|
||||||
showroom modern dan teknisi bersertifikat.
|
showroom modern dan teknisi bersertifikat.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="text-gray-700 text-sm space-y-2">
|
<div className="text-gray-700 text-xl space-y-2">
|
||||||
<p>
|
<p>
|
||||||
<strong>Alamat:</strong> Jaecoo Cihampelas Bandung, Jl. Cihampelas
|
<strong>Alamat:</strong> Jaecoo 1S Kelapa Gading, Jl. Boulevard
|
||||||
No. 264-268, Bandung, Jawa Barat 40131
|
Raya Blok LA 6 No. 34-35, Kelapa Gading, Jakarta Utara 14240
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<strong>Telepon:</strong> 021-12345678
|
<strong>Telepon:</strong> 021-12345678
|
||||||
|
|
@ -70,7 +130,7 @@ export default function HeaderAbout() {
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src="/dealer.png"
|
src="/dealer-2.png"
|
||||||
alt="Dealer Jaecoo"
|
alt="Dealer Jaecoo"
|
||||||
fill
|
fill
|
||||||
className="object-cover object-center"
|
className="object-cover object-center"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,115 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
export default function HeaderAfterSalesServices() {
|
||||||
|
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">
|
||||||
|
Layanan Konsumen After Sales
|
||||||
|
</h2>
|
||||||
|
<div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src="/layanan-sales.png"
|
||||||
|
alt="about-header"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="(max-width: 768px) 100vw, 640px"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 50 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
className="flex flex-col items-center gap-6 mt-20"
|
||||||
|
>
|
||||||
|
<div className="w-full max-w-[1400px] mx-auto grid grid-cols-1 lg:grid-cols-[3fr_1fr] gap-6">
|
||||||
|
<div className="relative h-[300px] sm:h-[400px] md:h-[600px] w-full overflow-hidden ">
|
||||||
|
<Image
|
||||||
|
src="/further-news.png"
|
||||||
|
alt="Banner After Sales"
|
||||||
|
fill
|
||||||
|
className="rounded-md object-cover"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col items-center lg:items-start justify-center text-center lg:text-left gap-4 px-4 py-6">
|
||||||
|
<Image
|
||||||
|
src="/jhony.png"
|
||||||
|
alt="Johny"
|
||||||
|
width={150}
|
||||||
|
height={150}
|
||||||
|
className="rounded-md object-cover"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold">Taufik</h3>
|
||||||
|
<p className="text-sm text-gray-600 mt-1">
|
||||||
|
Silahkan Hubungi Taufik untuk Layanan Konsumen After Sales
|
||||||
|
Jaecoo Kelapa Gading
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
asChild
|
||||||
|
className="bg-transparent hover:bg-green-600 mt-4 w-full border border-[#BCD4DF] text-[#1F6779]"
|
||||||
|
size={"lg"}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://wa.me/62XXXXXXXXXX"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Whatsapp →
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,273 @@
|
||||||
|
"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="/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.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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,175 @@
|
||||||
|
"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";
|
||||||
|
|
||||||
|
export default function HeaderProductJ7Awd() {
|
||||||
|
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 = [
|
||||||
|
"/jj7-cars.png",
|
||||||
|
"/green-j7-awd.png",
|
||||||
|
"/black-j7-awd.png",
|
||||||
|
"/white-j7-awd.png",
|
||||||
|
];
|
||||||
|
|
||||||
|
const gradients = [
|
||||||
|
"linear-gradient(to bottom, #B0B5C2, #B0B5C2)",
|
||||||
|
"linear-gradient(to bottom, #5D6B4F, #5D6B4F)",
|
||||||
|
"linear-gradient(to bottom, #1A1A1A, #3A3A3A)",
|
||||||
|
"linear-gradient(to bottom, #FFFFFF, #FFFFFF)",
|
||||||
|
];
|
||||||
|
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="/product1.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">
|
||||||
|
<Dialog open={openBrosur} onOpenChange={setOpenBrosur}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<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>
|
||||||
|
</DialogTrigger>
|
||||||
|
|
||||||
|
<DialogContent className=" w-full p-0 overflow-hidden">
|
||||||
|
<div className="flex justify-end p-4 bg-white z-50">
|
||||||
|
<a
|
||||||
|
href={downloadLink}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="absolute top-2 right-3 z-50 bg-black text-white p-2 rounded hover:bg-gray-800 mb-3"
|
||||||
|
>
|
||||||
|
<Download size={18} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<iframe
|
||||||
|
src={embedLink}
|
||||||
|
className="w-full h-[70vh] border-t"
|
||||||
|
allow="autoplay"
|
||||||
|
></iframe>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button className="bg-[#1F6779] text-white h-[30px] md:w-[200px] md:h-[40px] rounded-xl 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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,175 @@
|
||||||
|
"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";
|
||||||
|
|
||||||
|
export default function HeaderProductJ7Shs() {
|
||||||
|
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 = [
|
||||||
|
"/jj7-blue.png",
|
||||||
|
"/jj7-white.png",
|
||||||
|
"/jj7-silver.png",
|
||||||
|
"/jj7-black.png",
|
||||||
|
];
|
||||||
|
|
||||||
|
const gradients = [
|
||||||
|
"linear-gradient(to bottom, #527D97, #527D97)",
|
||||||
|
"linear-gradient(to bottom, #FFFFFF, #FFFFFF)",
|
||||||
|
"linear-gradient(to bottom, #E1ECF4, #FFFFFF)",
|
||||||
|
"linear-gradient(to bottom, #1A1A1A, #3A3A3A)",
|
||||||
|
];
|
||||||
|
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-[700px] overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src="/shs-header.png"
|
||||||
|
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">
|
||||||
|
<Dialog open={openBrosur} onOpenChange={setOpenBrosur}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<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>
|
||||||
|
</DialogTrigger>
|
||||||
|
|
||||||
|
<DialogContent className=" w-full p-0 overflow-hidden">
|
||||||
|
<div className="flex justify-end p-4 bg-white z-50">
|
||||||
|
<a
|
||||||
|
href={downloadLink}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="absolute top-2 right-3 z-50 bg-black text-white p-2 rounded hover:bg-gray-800 mb-3"
|
||||||
|
>
|
||||||
|
<Download size={18} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<iframe
|
||||||
|
src={embedLink}
|
||||||
|
className="w-full h-[70vh] border-t"
|
||||||
|
allow="autoplay"
|
||||||
|
></iframe>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button className="bg-[#1F6779] text-white h-[30px] md:w-[200px] md:h-[40px] rounded-xl 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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,170 @@
|
||||||
|
"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";
|
||||||
|
|
||||||
|
export default function HeaderProductJ8Awd() {
|
||||||
|
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 = ["/green.png", "/silver.png", "/white.png", "/black.png"];
|
||||||
|
|
||||||
|
const gradients = [
|
||||||
|
"linear-gradient(to bottom, #527D97, #1F6779)",
|
||||||
|
"linear-gradient(to bottom, #FFFFFF, #FFFFFF)",
|
||||||
|
"linear-gradient(to bottom, #E1ECF4, #FFFFFF)",
|
||||||
|
"linear-gradient(to bottom, #1A1A1A, #3A3A3A)",
|
||||||
|
];
|
||||||
|
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-[200px] sm:h-[300px] md:h-[500px] lg:h-[700px] overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src="/awd-8.png"
|
||||||
|
alt="about-header"
|
||||||
|
fill
|
||||||
|
className="object-cover object-center"
|
||||||
|
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1400px"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-3">
|
||||||
|
<Dialog open={openBrosur} onOpenChange={setOpenBrosur}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<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>
|
||||||
|
</DialogTrigger>
|
||||||
|
|
||||||
|
<DialogContent className=" w-full p-0 overflow-hidden">
|
||||||
|
<div className="flex justify-end p-4 bg-white z-50">
|
||||||
|
<a
|
||||||
|
href={downloadLink}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="absolute top-2 right-3 z-50 bg-black text-white p-2 rounded hover:bg-gray-800 mb-3"
|
||||||
|
>
|
||||||
|
<Download size={18} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<iframe
|
||||||
|
src={embedLink}
|
||||||
|
className="w-full h-[70vh] border-t"
|
||||||
|
allow="autoplay"
|
||||||
|
></iframe>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button className="bg-[#1F6779] text-white h-[30px] md:w-[200px] md:h-[40px] rounded-xl 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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import Image from "next/image";
|
|
||||||
import { Button } from "../ui/button";
|
|
||||||
import { motion } from "framer-motion";
|
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
export default function HeaderProduct() {
|
|
||||||
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="/product1.jpg"
|
|
||||||
alt="about-header"
|
|
||||||
fill
|
|
||||||
className="object-cover"
|
|
||||||
sizes="(max-width: 768px) 100vw, 640px"
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ delay: 0.3, duration: 0.6 }}
|
|
||||||
className="flex flex-col md:flex-row justify-between items-center my-8"
|
|
||||||
>
|
|
||||||
<p className="text-lg md:text-5xl font-bold">JAECOO 7 AWD</p>
|
|
||||||
<div className="flex items-center mt-2 md:mt-0 gap-3">
|
|
||||||
<a
|
|
||||||
href="https://drive.google.com/file/d/1Nici3bdjUG524sUYQgHfbeO63xW6f1_o/view"
|
|
||||||
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>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<Link href={"/about"}>
|
|
||||||
<Button className="bg-[#1F6779] h-[30px] md:w-[200px] md:h-[40px] rounded-xl hover:cursor-pointer">
|
|
||||||
TEST DRIVE
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
transition={{ delay: 0.5, duration: 0.8 }}
|
|
||||||
className="relative w-full h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
src="/color.png"
|
|
||||||
alt="about-header"
|
|
||||||
fill
|
|
||||||
className="object-cover"
|
|
||||||
sizes="(max-width: 768px) 100vw, 640px"
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, x: -40 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
{[
|
|
||||||
"linear-gradient(to bottom, #C9CCD3, #FFFFFF)",
|
|
||||||
"linear-gradient(to bottom, #788662, #C9CCD3)",
|
|
||||||
"linear-gradient(to bottom, #1A1A1A, #3A3A3A)",
|
|
||||||
"linear-gradient(to bottom, #E1ECF4, #FFFFFF)",
|
|
||||||
].map((bg, index) => (
|
|
||||||
<motion.button
|
|
||||||
key={index}
|
|
||||||
whileHover={{ scale: 1.1 }}
|
|
||||||
whileTap={{ scale: 0.95 }}
|
|
||||||
className="w-6 h-6 rounded-full border border-white shadow-md hover:cursor-pointer"
|
|
||||||
style={{ background: bg }}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { Button } from "../ui/button";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
export default function HeaderSalesServices() {
|
||||||
|
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">Layanan Konsumen Sales</h2>
|
||||||
|
<div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src="/layanan-sales.png"
|
||||||
|
alt="about-header"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="(max-width: 768px) 100vw, 640px"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 50 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
className="flex flex-col items-center gap-6 mt-20"
|
||||||
|
>
|
||||||
|
<div className="w-full max-w-[1400px] mx-auto grid grid-cols-1 lg:grid-cols-[3fr_1fr] gap-6">
|
||||||
|
<div className="relative h-[300px] sm:h-[400px] md:h-[600px] w-full overflow-hidden ">
|
||||||
|
<Image
|
||||||
|
src="/further-news.png"
|
||||||
|
alt="Banner After Sales"
|
||||||
|
fill
|
||||||
|
className="rounded-md object-cover"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col items-center lg:items-start justify-center text-center lg:text-left gap-4 px-4 py-6">
|
||||||
|
<Image
|
||||||
|
src="/jhony.png"
|
||||||
|
alt="Johny"
|
||||||
|
width={150}
|
||||||
|
height={150}
|
||||||
|
className="rounded-md object-cover"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold">Taufik</h3>
|
||||||
|
<p className="text-sm text-gray-600 mt-1">
|
||||||
|
Silahkan Hubungi Taufik untuk Layanan Konsumen After Sales
|
||||||
|
Jaecoo Kelapa Gading
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
asChild
|
||||||
|
className="bg-transparent hover:bg-green-600 mt-4 w-full border border-[#BCD4DF] text-[#1F6779]"
|
||||||
|
size={"lg"}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://wa.me/62XXXXXXXXXX"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Whatsapp →
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -11,17 +11,44 @@ import {
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "../ui/dialog";
|
||||||
|
import { Input } from "../ui/input";
|
||||||
|
import { Textarea } from "../ui/textarea";
|
||||||
|
import { useState } from "react";
|
||||||
|
import Autoplay from "embla-carousel-autoplay"; // ✅ Import plugin autoplay
|
||||||
|
import { useRef } from "react";
|
||||||
|
|
||||||
const heroImages = ["/Hero.png", "/hero2.png", "/hero3.png"];
|
const heroImages = [
|
||||||
|
"/Hero.png",
|
||||||
|
"/Carousell-01.png",
|
||||||
|
"/Carousell-02.png",
|
||||||
|
"/Carousell-03.png",
|
||||||
|
"/Carousell-04.png",
|
||||||
|
"/Carousell-05.png",
|
||||||
|
];
|
||||||
|
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
// ✅ Gunakan useRef untuk plugin autoplay
|
||||||
|
const plugin = useRef(Autoplay({ delay: 4000, stopOnInteraction: false }));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="relative w-full overflow-hidden bg-white">
|
<section className="relative w-full overflow-hidden bg-white">
|
||||||
<Carousel className="w-full relative">
|
<Carousel
|
||||||
|
className="w-full relative"
|
||||||
|
plugins={[plugin.current]} // ✅ Tambahkan plugin di sini
|
||||||
|
>
|
||||||
<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}`}
|
||||||
|
|
@ -31,12 +58,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>
|
||||||
|
|
@ -49,36 +76,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 }}
|
||||||
>
|
>
|
||||||
<Link href={"/about"}>
|
<motion.div
|
||||||
<Button className="rounded-full bg-[#155B6E] px-6 py-2 text-white hover:cursor-pointer">
|
className="flex items-center gap-4"
|
||||||
|
initial={{ opacity: 0, y: 40 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{
|
||||||
|
duration: 1,
|
||||||
|
ease: "easeOut",
|
||||||
|
delay: 0.4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button className="bg-[#1F6779] text-white h-[30px] md:h-[40px] rounded-full hover:cursor-pointer">
|
||||||
TEST DRIVE
|
TEST DRIVE
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</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">
|
||||||
|
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"}>
|
<Link href={"/product"}>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="rounded-full border-black text-black px-6 py-2 hover:cursor-pointer hover:bg-amber-50"
|
className="rounded-full border-black text-black px-6 py-2 hover:cursor-pointer hover:bg-amber-50"
|
||||||
>
|
>
|
||||||
JELAJAHI
|
EXPLORE
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</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>
|
||||||
))}
|
))}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
"use client";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { useInView } from "react-intersection-observer";
|
||||||
|
|
||||||
|
const featuresJ8Awd = [
|
||||||
|
{
|
||||||
|
title: "Crystal Drive Mode Selector",
|
||||||
|
description:
|
||||||
|
"The stunning Crystal Drive Mode Selector offers seven distinct drive modes: City, Snow, Sand, Mud, Normal, ECO, and Sport. Its elegant design elevates cabin aesthetics while providing intuitive fingertip access to tailor the driving experience — from smooth city commutes to off-road adventures.",
|
||||||
|
image: "/in-j8awd2.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Headrest Speaker",
|
||||||
|
description:
|
||||||
|
"Embedded within the premium 14-speaker Sony sound system, the headrest speakers deliver immersive, high-fidelity audio directly to occupants. Designed to enhance entertainment quality and ensure privacy during calls, this feature offers clear sound without disturbing others, blending innovation with comfort.",
|
||||||
|
image: "/in-j8awd3.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Zero Gravity Seat",
|
||||||
|
description:
|
||||||
|
"Experience true zero-gravity relaxation with an adjustable 123° seat angle, an exclusive sleep headrest, and adjustable earpieces for an optimal fit. Double-layer noise-canceling acoustic glass effectively blocks out external noise, creating a peaceful retreat from the busy world.",
|
||||||
|
image: "/in-j8awd4.png",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function InteriorJ8Awd() {
|
||||||
|
const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-10 px-4 sm:px-6 md:px-20 bg-white" ref={ref}>
|
||||||
|
<motion.h2
|
||||||
|
className="text-2xl mt-5 mb-8"
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={inView ? { opacity: 1, y: 0 } : {}}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
>
|
||||||
|
<span className="text-[#1F6779] font-semibold">Jaecoo 8 AWD</span>{" "}
|
||||||
|
Interior
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className="relative w-full h-[300px] sm:h-[400px] md:h-[600px]"
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
animate={inView ? { opacity: 1, scale: 1 } : {}}
|
||||||
|
transition={{ duration: 0.7 }}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="/in-j8awd1.png"
|
||||||
|
alt="Interior Hero"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="100vw"
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 sm:gap-4 mt-5">
|
||||||
|
{featuresJ8Awd.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
className="relative aspect-[3/2] overflow-hidden group"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={inView ? { opacity: 1, y: 0 } : {}}
|
||||||
|
transition={{ duration: 0.4, delay: index * 0.1 }}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={item.image}
|
||||||
|
alt={item.title}
|
||||||
|
fill
|
||||||
|
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
||||||
|
sizes="(max-width: 768px) 100vw, 25vw"
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-0 bg-gradient-to-t from-black/80 to-transparent p-4">
|
||||||
|
<h3 className="text-sm sm:text-base font-bold text-white">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs sm:text-sm text-gray-300 mt-1">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,146 @@
|
||||||
|
"use client";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { useInView } from "react-intersection-observer";
|
||||||
|
|
||||||
|
const featuresInt = [
|
||||||
|
{
|
||||||
|
title: "14.8 Screen with APPLE Carplay & Android Auto",
|
||||||
|
description:
|
||||||
|
"Stay connected and informed with a 14.8 display offering clear visuals and advanced functionality for a seamless driving experience.",
|
||||||
|
image: "/in-shs2.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Horizontal Side by Side Cup Holder",
|
||||||
|
description:
|
||||||
|
"Keep your beverages secure and within reach with the stylish Horizontal Side-by-Side Cup Holder.",
|
||||||
|
image: "/in-shs3.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "EV/ HEV Button",
|
||||||
|
description:
|
||||||
|
"Effortlessly switch between power modes with the EV/HEV Button, designed for optimal driving efficiency.",
|
||||||
|
image: "/in-shs4.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Wireless Charging",
|
||||||
|
description:
|
||||||
|
"Stay powered up on the go with Wireless Charging, ensuring your devices are always ready when you are.",
|
||||||
|
image: "/in-shs5.png",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const interior = [
|
||||||
|
{
|
||||||
|
title: "Dual Door Armrest",
|
||||||
|
description:
|
||||||
|
"A seamless blend of style and performance with the Avantgrade Fighter-Inspired Transmission Shifter.",
|
||||||
|
image: "/in-shs6.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Ventilated Leather Seats",
|
||||||
|
description:
|
||||||
|
"Stay cool and comfortable with Ventilated Leather Seats, designed for luxury and relaxation.",
|
||||||
|
image: "/in-shs7.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Sony 8-Speaker Audio system",
|
||||||
|
description:
|
||||||
|
"Immerse yourself in rich, high-quality sound with the Sony 8-speaker audio system, delivering an exceptional listening experience on every journey.",
|
||||||
|
image: "/in-shs8.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Minimalist Door Latch Design",
|
||||||
|
description:
|
||||||
|
"Redefine sophistication with the Minimalist Door Latch Design, offering a seamless blend of style and utility.",
|
||||||
|
image: "/in-shs9.png",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
export default function InteriorShs() {
|
||||||
|
const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-10 px-4 sm:px-6 md:px-20 bg-white" ref={ref}>
|
||||||
|
<motion.h2
|
||||||
|
className="text-2xl mt-5 mb-8"
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={inView ? { opacity: 1, y: 0 } : {}}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
>
|
||||||
|
<span className="text-[#1F6779] font-semibold">Jaecoo 7 SHS</span>{" "}
|
||||||
|
Interior
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className="relative w-full h-[300px] sm:h-[400px] md:h-[600px]"
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
animate={inView ? { opacity: 1, scale: 1 } : {}}
|
||||||
|
transition={{ duration: 0.7 }}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="/in-shs.png"
|
||||||
|
alt="Interior Hero"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="100vw"
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2 sm:gap-4 mt-5">
|
||||||
|
{featuresInt.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
className="relative aspect-[4/3] overflow-hidden group"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={inView ? { opacity: 1, y: 0 } : {}}
|
||||||
|
transition={{ duration: 0.4, delay: index * 0.1 }}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={item.image}
|
||||||
|
alt={item.title}
|
||||||
|
fill
|
||||||
|
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
||||||
|
sizes="(max-width: 768px) 100vw, 25vw"
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-0 bg-gradient-to-t from-black/80 to-transparent p-4">
|
||||||
|
<h3 className="text-sm sm:text-base font-bold text-white">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs sm:text-sm text-gray-300 mt-1">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2 sm:gap-4 mt-5">
|
||||||
|
{interior.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
className="relative aspect-[4/3] overflow-hidden group"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={inView ? { opacity: 1, y: 0 } : {}}
|
||||||
|
transition={{ duration: 0.4, delay: index * 0.1 }}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={item.image}
|
||||||
|
alt={item.title}
|
||||||
|
fill
|
||||||
|
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
||||||
|
sizes="(max-width: 768px) 100vw, 25vw"
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-0 bg-gradient-to-t from-black/80 to-transparent p-4">
|
||||||
|
<h3 className="text-sm sm:text-base font-bold text-white">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs sm:text-sm text-gray-300 mt-1">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -4,26 +4,40 @@ import Image from "next/image";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "../ui/dialog";
|
||||||
|
import { Input } from "../ui/input";
|
||||||
|
import { Textarea } from "../ui/textarea";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
const items = [
|
const items = [
|
||||||
{
|
{
|
||||||
image: "/new-car2.png",
|
image: "/new-car2.png",
|
||||||
title: "JAECOO J7 AWD",
|
title: "JAECOO J7 AWD",
|
||||||
description: "DELICATE OFF-ROAD SUV",
|
description: "DELICATE OFF-ROAD SUV",
|
||||||
|
link: "/product/j7-awd",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: "/new-car1.png",
|
image: "/new-car1.png",
|
||||||
title: "JAECOO J7 SHS",
|
title: "JAECOO J7 SHS",
|
||||||
description: "SUPER HYBRID SYSTEM = SUPER HEV + EV",
|
description: "SUPER HYBRID SYSTEM = SUPER HEV + EV",
|
||||||
|
link: "/product/j7-shs",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: "/new-car3.png",
|
image: "/new-car3.png",
|
||||||
title: "JAECOO J8 AWD",
|
title: "JAECOO J8 AWD",
|
||||||
description: "FIRST CLASS OFF-ROAD",
|
description: "FIRST CLASS OFF-ROAD",
|
||||||
|
link: "/product/j8-awd",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function Items() {
|
export default function Items() {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
return (
|
return (
|
||||||
<section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
|
<section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
|
||||||
<div className="flex flex-col items-center gap-10">
|
<div className="flex flex-col items-center gap-10">
|
||||||
|
|
@ -73,12 +87,51 @@ export default function Items() {
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ delay: index * 0.25 + 0.6, duration: 0.6 }}
|
transition={{ delay: index * 0.25 + 0.6, duration: 0.6 }}
|
||||||
>
|
>
|
||||||
<Link href="/about">
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
<Button className="rounded-full bg-[#155B6E] px-6 py-2 text-white hover:cursor-pointer">
|
<DialogTrigger asChild>
|
||||||
|
<Button className="bg-[#1F6779] text-white h-[30px] md:h-[40px] rounded-full hover:cursor-pointer">
|
||||||
TEST DRIVE
|
TEST DRIVE
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</DialogTrigger>
|
||||||
<Link href="/product">
|
<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">
|
||||||
|
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>
|
||||||
|
<Link href={item?.link}>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="rounded-full border-white text-black px-6 py-2 hover:text-black hover:bg-amber-50 hover:border-white hover:cursor-pointer"
|
className="rounded-full border-white text-black px-6 py-2 hover:text-black hover:bg-amber-50 hover:border-white hover:cursor-pointer"
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,33 @@ import { ChevronDown, Lock, Menu, X } from "lucide-react";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
import { AnimatePresence, motion } from "framer-motion";
|
import { AnimatePresence, motion } from "framer-motion";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "../ui/dialog";
|
||||||
|
import { Input } from "../ui/input";
|
||||||
|
import { Textarea } from "../ui/textarea";
|
||||||
|
|
||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
const [showProdukMenu, setShowProdukMenu] = useState(false);
|
const [showProdukMenu, setShowProdukMenu] = useState(false);
|
||||||
|
const [showPriceMenu, setShowPriceMenu] = useState(false);
|
||||||
|
const [showServiceMenu, setShowServiceMenu] = useState(false);
|
||||||
|
const [showAboutMenu, setShowAboutMenu] = 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 + "/");
|
||||||
|
|
||||||
|
|
@ -28,17 +49,64 @@ export default function Navbar() {
|
||||||
{
|
{
|
||||||
name: "JAECOO J7 AWD",
|
name: "JAECOO J7 AWD",
|
||||||
img: "/j7awd.png",
|
img: "/j7awd.png",
|
||||||
link: "/produk/jaecoo7",
|
link: "/product/j7-awd",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "JAECOO J7 SHS",
|
name: "JAECOO J7 SHS",
|
||||||
img: "/j7shs.png",
|
img: "/j7shs.png",
|
||||||
link: "/produk/jaecoo7",
|
link: "/product/j7-shs",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "JAECOO J8 AWD",
|
name: "JAECOO J8 AWD",
|
||||||
img: "/j8awd.png",
|
img: "/j8awd.png",
|
||||||
link: "/produk/jaecoo8",
|
link: "/product/j8-awd",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const priceList = [
|
||||||
|
{
|
||||||
|
name: "INFORMASI HARGA",
|
||||||
|
link: "/price/price-information",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "PROMO",
|
||||||
|
link: "/price/promo",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const serviceList = [
|
||||||
|
{
|
||||||
|
name: "PROGRAM SERVICE",
|
||||||
|
link: "/service/program-service",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "AFTER SALES",
|
||||||
|
link: "/service/after-sales",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const aboutList = [
|
||||||
|
{
|
||||||
|
name: "PROFILE",
|
||||||
|
link: "/about/profile",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "SOCIAL MEDIA",
|
||||||
|
link: "/about/sosmed",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "GALERY",
|
||||||
|
link: "/about/galery",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const consumerList = [
|
||||||
|
{
|
||||||
|
name: "AFTER SALES",
|
||||||
|
link: "/customer-service/after-sales",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "SALES",
|
||||||
|
link: "/customer-service/sales",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
@ -72,11 +140,11 @@ export default function Navbar() {
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className={`hover:cursor-pointer rounded-full px-5 ${
|
className={`hover:cursor-pointer rounded-full font-bold px-5 ${
|
||||||
isActive("/") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
|
isActive("/") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
BERANDA
|
HOMEPAGE
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -94,7 +162,7 @@ export default function Navbar() {
|
||||||
: ""
|
: ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
PRODUK <ChevronDown className="w-4 h-4" />
|
PRODUCTS <ChevronDown className="w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
|
|
@ -127,20 +195,56 @@ export default function Navbar() {
|
||||||
/>
|
/>
|
||||||
<p className="font-bold mt-4 text-center">{car.name}</p>
|
<p className="font-bold mt-4 text-center">{car.name}</p>
|
||||||
<div className="flex flex-col sm:flex-row gap-2 mt-2 items-center">
|
<div className="flex flex-col sm:flex-row gap-2 mt-2 items-center">
|
||||||
<Link href="/about" className="w-[200px]">
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
<Button
|
<DialogTrigger asChild>
|
||||||
variant="default"
|
<Button className="bg-[#1F6779] text-white h-[30px] md:w-[200px] md:h-[40px] rounded-full hover:cursor-pointer">
|
||||||
className="bg-[#0C5B71] text-white px-4 rounded-full w-full hover:cursor-pointer"
|
|
||||||
>
|
|
||||||
TEST DRIVE
|
TEST DRIVE
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</DialogTrigger>
|
||||||
<Link href="/product" className="w-[200px]">
|
<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>
|
||||||
|
<Link href={car.link} className="w-[200px]">
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="rounded-full px-4 w-full hover:cursor-pointer hover:bg-amber-50"
|
className="rounded-full px-4 w-full hover:cursor-pointer hover:bg-amber-50"
|
||||||
>
|
>
|
||||||
JELAJAHI
|
EXPLORE
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -151,31 +255,194 @@ export default function Navbar() {
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
</li>
|
</li>
|
||||||
|
<li className="relative">
|
||||||
<li>
|
|
||||||
<Link href="/service">
|
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className={`hover:cursor-pointer rounded-full px-5 ${
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setShowPriceMenu((prev) => !prev);
|
||||||
|
}}
|
||||||
|
className={`flex items-center gap-1 font-bold text-sm focus:outline-none hover:cursor-pointer rounded-full px-5 py-2 ${
|
||||||
|
isActive("/price") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
HARGA <ChevronDown className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<AnimatePresence>
|
||||||
|
{showPriceMenu && (
|
||||||
|
<motion.div
|
||||||
|
key="harga-dropdown"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
className="absolute top-full mt-2 left-0 z-50 border-t-4 border-[#1F6779] bg-white shadow-xl py-4 w-[200px]"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-2 px-4">
|
||||||
|
{priceList.map((item, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: 10 }}
|
||||||
|
transition={{ delay: 0.1 * i }}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
href={item.link}
|
||||||
|
className="block w-full text-sm text-left px-3 py-2 rounded-md hover:bg-gray-100 hover:text-[#1F6779] font-medium"
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</li>
|
||||||
|
<li className="relative">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setShowServiceMenu((prev) => !prev);
|
||||||
|
}}
|
||||||
|
className={`flex items-center gap-1 font-bold text-sm focus:outline-none hover:cursor-pointer rounded-full px-5 py-2 ${
|
||||||
isActive("/service") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
|
isActive("/service") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
SERVIS
|
SERVICES <ChevronDown className="w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
|
<AnimatePresence>
|
||||||
|
{showServiceMenu && (
|
||||||
|
<motion.div
|
||||||
|
key="harga-dropdown"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
className="absolute top-full mt-2 left-0 z-50 border-t-4 border-[#1F6779] bg-white shadow-xl py-4 w-[200px]"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-2 px-4">
|
||||||
|
{serviceList.map((item, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: 10 }}
|
||||||
|
transition={{ delay: 0.1 * i }}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
href={item.link}
|
||||||
|
className="block w-full text-sm text-left px-3 py-2 rounded-md hover:bg-gray-100 hover:text-[#1F6779] font-medium"
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
</Link>
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li className="relative">
|
||||||
<Link href="/about">
|
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className={`hover:cursor-pointer rounded-full px-5 ${
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setShowAboutMenu((prev) => !prev);
|
||||||
|
}}
|
||||||
|
className={`flex items-center gap-1 font-bold text-sm focus:outline-none hover:cursor-pointer rounded-full px-5 py-2 ${
|
||||||
isActive("/about") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
|
isActive("/about") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
TENTANG DEALER JAECOO
|
TENTANG DEALER <ChevronDown className="w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
|
<AnimatePresence>
|
||||||
|
{showAboutMenu && (
|
||||||
|
<motion.div
|
||||||
|
key="harga-dropdown"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
className="absolute top-full mt-2 left-0 z-50 border-t-4 border-[#1F6779] bg-white shadow-xl py-4 w-[200px]"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-2 px-4">
|
||||||
|
{aboutList.map((item, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: 10 }}
|
||||||
|
transition={{ delay: 0.1 * i }}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
href={item.link}
|
||||||
|
className="block w-full text-sm text-left px-3 py-2 rounded-md hover:bg-gray-100 hover:text-[#1F6779] font-medium"
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
</Link>
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</li>
|
||||||
|
<li className="relative">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setShowConsumerMenu((prev) => !prev);
|
||||||
|
}}
|
||||||
|
className={`flex items-center gap-1 font-bold text-sm focus:outline-none hover:cursor-pointer rounded-full px-5 py-2 ${
|
||||||
|
isActive("/customer-service") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
LAYANAN KONSUMEN <ChevronDown className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<AnimatePresence>
|
||||||
|
{showConsumerMenu && (
|
||||||
|
<motion.div
|
||||||
|
key="harga-dropdown"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: 20 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
className="absolute top-full mt-2 left-0 z-50 border-t-4 border-[#1F6779] bg-white shadow-xl py-4 w-[200px]"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-2 px-4">
|
||||||
|
{consumerList.map((item, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: 10 }}
|
||||||
|
transition={{ delay: 0.1 * i }}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
href={item.link}
|
||||||
|
className="block w-full text-sm text-left px-3 py-2 rounded-md hover:bg-gray-100 hover:text-[#1F6779] font-medium"
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
@ -189,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"
|
||||||
|
|
@ -197,41 +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>
|
||||||
|
|
||||||
|
{showProdukMenuMobile && (
|
||||||
|
<div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
|
||||||
|
<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>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="/service" onClick={() => setIsMobileMenuOpen(false)}>
|
</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)}
|
||||||
|
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]" : ""
|
isActive("/service") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
SERVIS
|
SERVICES <ChevronDown className="w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
|
||||||
<Link href="/about" onClick={() => setIsMobileMenuOpen(false)}>
|
{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
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className={`w-full justify-start ${
|
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]" : ""
|
isActive("/about") ? "bg-[#C2D8E2] text-[#1F3D4A]" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
TENTANG DEALER JAECOO
|
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>
|
</Button>
|
||||||
</Link>
|
</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]"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
LAYANAN KONSUMEN <ChevronDown className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{showConsumerMenuMobile && (
|
||||||
|
<div className="w-full mt-2 bg-white shadow px-4 py-4 rounded-xl">
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
{consumerList.map((item, i) => (
|
||||||
|
<Link
|
||||||
|
key={i}
|
||||||
|
href={item.link}
|
||||||
|
onClick={() => {
|
||||||
|
setIsMobileMenuOpen(false);
|
||||||
|
setShowConsumerMenuMobile(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>
|
||||||
<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" />
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
const teamMembers = [
|
||||||
|
{
|
||||||
|
name: "Arlene McCoy",
|
||||||
|
role: "Service Advisor",
|
||||||
|
image: "/arlene.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Jacob Jones",
|
||||||
|
role: "Foreman / Kepala Mekanik",
|
||||||
|
image: "/jacob.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Cameron Williamson",
|
||||||
|
role: "Technician",
|
||||||
|
image: "/cameron.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Devon Lane",
|
||||||
|
role: "QC",
|
||||||
|
image: "/devon.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Esther Howard",
|
||||||
|
role: "Service Manager",
|
||||||
|
image: "/howard.png",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "LIA KURNIA PUTRI",
|
||||||
|
role: "CRO",
|
||||||
|
image: "/lia.png",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const topMembers = teamMembers.slice(0, 5);
|
||||||
|
const bottomMember = teamMembers[5];
|
||||||
|
|
||||||
|
export default function HeaderProgramSales() {
|
||||||
|
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">Program Services</h2>
|
||||||
|
|
||||||
|
<div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src="/promo.png"
|
||||||
|
alt="about-header"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="(max-width: 768px) 100vw, 1400px"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden mt-5">
|
||||||
|
<Image
|
||||||
|
src="/promo.png"
|
||||||
|
alt="about-header"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="(max-width: 768px) 100vw, 1400px"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full max-w-[1200px] mt-12">
|
||||||
|
<h2 className="text-3xl font-bold text-center mb-8">Our Teams</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6 justify-center">
|
||||||
|
{topMembers.map((member, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="bg-white rounded-lg shadow-sm p-6 text-center hover:shadow-md transition-shadow duration-300 h-[300px]"
|
||||||
|
>
|
||||||
|
<div className=" w-40 h-40 mx-auto rounded-full overflow-hidden mb-8">
|
||||||
|
<Image
|
||||||
|
src={member.image}
|
||||||
|
alt={member.name}
|
||||||
|
width={96}
|
||||||
|
height={96}
|
||||||
|
className="object-cover w-full h-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-md mb-3">{member.name}</h3>
|
||||||
|
<p className="text-gray-500 text-sm">{member.role}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:flex w-full md:justify-center mt-8">
|
||||||
|
<div className="bg-white rounded-lg shadow-sm p-6 text-center hover:shadow-md transition-shadow duration-300 h-[300px]">
|
||||||
|
<div className="w-40 h-40 rounded-full overflow-hidden mb-8 mx-auto md:mx-2">
|
||||||
|
<Image
|
||||||
|
src={bottomMember.image}
|
||||||
|
alt={bottomMember.name}
|
||||||
|
width={96}
|
||||||
|
height={96}
|
||||||
|
className="object-cover w-full h-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-md mb-3">
|
||||||
|
{bottomMember.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-500 text-sm">{bottomMember.role}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
export default function HeaderPromo() {
|
||||||
|
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 max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src="/promo.png"
|
||||||
|
alt="about-header"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
sizes="(max-width: 768px) 100vw, 640px"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -135,7 +135,6 @@ export const RetractingSidebar = ({
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
|
|
||||||
{/* Mobile Toggle Button */}
|
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
{!sidebarData && (
|
{!sidebarData && (
|
||||||
<motion.button
|
<motion.button
|
||||||
|
|
@ -154,7 +153,6 @@ export const RetractingSidebar = ({
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
|
|
||||||
{/* MOBILE SIDEBAR */}
|
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
{sidebarData && (
|
{sidebarData && (
|
||||||
<motion.div
|
<motion.div
|
||||||
|
|
@ -192,11 +190,8 @@ const SidebarContent = ({
|
||||||
const { theme, toggleTheme } = useTheme();
|
const { theme, toggleTheme } = useTheme();
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col h-full">
|
<div className="flex flex-col h-full">
|
||||||
{/* SCROLLABLE TOP SECTION */}
|
|
||||||
<div className="flex-1 overflow-y-auto">
|
<div className="flex-1 overflow-y-auto">
|
||||||
{/* HEADER SECTION */}
|
|
||||||
<div className="flex flex-col space-y-6">
|
<div className="flex flex-col space-y-6">
|
||||||
{/* Logo and Toggle */}
|
|
||||||
<div className="flex items-center justify-between px-4 py-6">
|
<div className="flex items-center justify-between px-4 py-6">
|
||||||
<Link href="/" className="flex items-center space-x-3">
|
<Link href="/" className="flex items-center space-x-3">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
|
|
@ -237,7 +232,6 @@ const SidebarContent = ({
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Navigation Sections */}
|
|
||||||
<div className="space-y-3 px-3 pb-6">
|
<div className="space-y-3 px-3 pb-6">
|
||||||
{sidebarSections.map((section, sectionIndex) => (
|
{sidebarSections.map((section, sectionIndex) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
|
|
@ -275,14 +269,7 @@ const SidebarContent = ({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* FIXED BOTTOM SECTION */}
|
|
||||||
<div className="flex-shrink-0 space-y-1 border-t border-slate-200/60 dark:border-slate-700/60 bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm">
|
<div className="flex-shrink-0 space-y-1 border-t border-slate-200/60 dark:border-slate-700/60 bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm">
|
||||||
{/* Divider */}
|
|
||||||
{/* <div className="px-3 pb-2">
|
|
||||||
<div className="h-px bg-gradient-to-r from-transparent via-slate-300 to-transparent"></div>
|
|
||||||
</div> */}
|
|
||||||
|
|
||||||
{/* Theme Toggle */}
|
|
||||||
<div className="px-3 pt-1">
|
<div className="px-3 pt-1">
|
||||||
<motion.button
|
<motion.button
|
||||||
onClick={toggleTheme}
|
onClick={toggleTheme}
|
||||||
|
|
@ -333,7 +320,6 @@ const SidebarContent = ({
|
||||||
</motion.button>
|
</motion.button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Settings */}
|
|
||||||
<div className="px-3">
|
<div className="px-3">
|
||||||
<Link href="/settings">
|
<Link href="/settings">
|
||||||
<Option
|
<Option
|
||||||
|
|
@ -347,7 +333,6 @@ const SidebarContent = ({
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* User Profile */}
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
|
@ -425,7 +410,6 @@ const Sidebar = () => {
|
||||||
width: open ? "120px" : "90px",
|
width: open ? "120px" : "90px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* BAGIAN ATAS */}
|
|
||||||
<div>
|
<div>
|
||||||
{!open && (
|
{!open && (
|
||||||
<div className="w-full flex justify-center items-center">
|
<div className="w-full flex justify-center items-center">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,157 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { ArrowRight } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
const tabs = ["INSTAGRAM", "TIKTOK", "FACEBOOK", "YOUTUBE"];
|
||||||
|
|
||||||
|
const instagramPosts = ["/ig-news1.png", "/ig-news2.png", "/ig-news3.png"];
|
||||||
|
const tiktokPosts = ["/tk-news1.png", "/tk-news2.png", "/tk-news3.png"];
|
||||||
|
const youtubePosts = ["/tk-news1.png", "/tk-news2.png", "/tk-news3.png"];
|
||||||
|
const facebookPosts = ["/tk-news1.png", "/tk-news2.png", "/tk-news3.png"];
|
||||||
|
|
||||||
|
export default function SosmedSection() {
|
||||||
|
const [activeTab, setActiveTab] = useState("INSTAGRAM");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="px-4 py-16 max-w-[1400px] mx-auto">
|
||||||
|
<h2 className="text-3xl font-bold mb-6 text-start ml-16">
|
||||||
|
Sosial Media Kami
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-4 items-center justify-center mb-8">
|
||||||
|
{tabs.map((tab) => (
|
||||||
|
<button
|
||||||
|
key={tab}
|
||||||
|
onClick={() => setActiveTab(tab)}
|
||||||
|
className={`text-sm font-medium px-4 py-2 rounded-full ${
|
||||||
|
activeTab === tab
|
||||||
|
? "bg-[#BCD4DF] text-sky-700"
|
||||||
|
: "text-[gray-700] hover:bg-gray-100"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{tab}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{activeTab === "INSTAGRAM" && (
|
||||||
|
<>
|
||||||
|
<div className="flex flex-wrap justify-center items-center gap-4">
|
||||||
|
{instagramPosts.map((img, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="relative w-full sm:w-[300px] md:w-[350px] lg:w-[400px] h-[400px] sm:h-[450px] md:h-[500px]"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={img}
|
||||||
|
alt={`Instagram post ${i + 1}`}
|
||||||
|
fill
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center mt-10">
|
||||||
|
<Link href={"https://www.instagram.com/jaecoo_kelapagading"}>
|
||||||
|
<button className="bg-[#1F6779] hover:bg-sky-800 text-white px-6 py-3 rounded-md flex items-center gap-2 text-lg font-medium">
|
||||||
|
Lihat Selengkapnya
|
||||||
|
<ArrowRight size={35} />
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === "TIKTOK" && (
|
||||||
|
<>
|
||||||
|
<div className="flex flex-wrap justify-center items-center gap-4">
|
||||||
|
{tiktokPosts.map((img, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="relative w-full sm:w-[300px] md:w-[350px] lg:w-[400px] h-[400px] sm:h-[450px] md:h-[500px]"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={img}
|
||||||
|
alt={`Tiktok post ${i + 1}`}
|
||||||
|
fill
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center mt-10">
|
||||||
|
<Link href={"https://www.tiktok.com/@jaecoo_kelapagading"}>
|
||||||
|
<button className="bg-[#1F6779] hover:bg-sky-800 text-white px-6 py-3 rounded-md flex items-center gap-2 text-lg font-medium">
|
||||||
|
Lihat Selengkapnya
|
||||||
|
<ArrowRight size={35} />
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === "FACEBOOK" && (
|
||||||
|
<>
|
||||||
|
<div className="flex flex-wrap justify-center items-center gap-4">
|
||||||
|
{facebookPosts.map((img, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="relative w-full sm:w-[300px] md:w-[350px] lg:w-[400px] h-[400px] sm:h-[450px] md:h-[500px]"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={img}
|
||||||
|
alt={`Facebook post ${i + 1}`}
|
||||||
|
fill
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center mt-10">
|
||||||
|
<Link href={"#"}>
|
||||||
|
<button className="bg-[#1F6779] hover:bg-sky-800 text-white px-6 py-3 rounded-md flex items-center gap-2 text-lg font-medium">
|
||||||
|
Lihat Selengkapnya
|
||||||
|
<ArrowRight size={35} />
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === "YOUTUBE" && (
|
||||||
|
<>
|
||||||
|
<div className="flex flex-wrap justify-center items-center gap-4">
|
||||||
|
{youtubePosts.map((img, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="relative w-full sm:w-[300px] md:w-[350px] lg:w-[400px] h-[400px] sm:h-[450px] md:h-[500px]"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={img}
|
||||||
|
alt={`YouTube post ${i + 1}`}
|
||||||
|
fill
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center mt-10">
|
||||||
|
<Link href={"#"}>
|
||||||
|
<button className="bg-[#1F6779] hover:bg-sky-800 text-white px-6 py-3 rounded-md flex items-center gap-2 text-lg font-medium">
|
||||||
|
Lihat Selengkapnya
|
||||||
|
<ArrowRight size={35} />
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,8 +1,20 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
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-[250px] sm:h-[500px] md:h-[700px]">
|
||||||
|
<Image
|
||||||
|
src={"/maintenance.png"}
|
||||||
|
alt="maintenance"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="relative w-full h-[500px] overflow-hidden">
|
<div className="relative w-full h-[500px] overflow-hidden">
|
||||||
<iframe
|
<iframe
|
||||||
className="w-full h-full"
|
className="w-full h-full"
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,7 @@
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"date-fns": "^4.1.0",
|
"date-fns": "^4.1.0",
|
||||||
"dompurify": "^3.2.6",
|
"dompurify": "^3.2.6",
|
||||||
|
"embla-carousel-autoplay": "^8.6.0",
|
||||||
"embla-carousel-react": "^8.6.0",
|
"embla-carousel-react": "^8.6.0",
|
||||||
"framer-motion": "^12.23.0",
|
"framer-motion": "^12.23.0",
|
||||||
"iconify": "^1.4.0",
|
"iconify": "^1.4.0",
|
||||||
|
|
@ -3036,6 +3037,7 @@
|
||||||
"version": "19.1.8",
|
"version": "19.1.8",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
|
||||||
"integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
|
"integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
|
||||||
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"csstype": "^3.0.2"
|
"csstype": "^3.0.2"
|
||||||
}
|
}
|
||||||
|
|
@ -3044,7 +3046,7 @@
|
||||||
"version": "19.1.6",
|
"version": "19.1.6",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.6.tgz",
|
||||||
"integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
|
"integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
|
||||||
"devOptional": true,
|
"dev": true,
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@types/react": "^19.0.0"
|
"@types/react": "^19.0.0"
|
||||||
}
|
}
|
||||||
|
|
@ -3594,6 +3596,14 @@
|
||||||
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
|
||||||
"integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA=="
|
"integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA=="
|
||||||
},
|
},
|
||||||
|
"node_modules/embla-carousel-autoplay": {
|
||||||
|
"version": "8.6.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.6.0.tgz",
|
||||||
|
"integrity": "sha512-OBu5G3nwaSXkZCo1A6LTaFMZ8EpkYbwIaH+bPqdBnDGQ2fh4+NbzjXjs2SktoPNKCtflfVMc75njaDHOYXcrsA==",
|
||||||
|
"peerDependencies": {
|
||||||
|
"embla-carousel": "8.6.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/embla-carousel-react": {
|
"node_modules/embla-carousel-react": {
|
||||||
"version": "8.6.0",
|
"version": "8.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -32,6 +32,7 @@
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"date-fns": "^4.1.0",
|
"date-fns": "^4.1.0",
|
||||||
"dompurify": "^3.2.6",
|
"dompurify": "^3.2.6",
|
||||||
|
"embla-carousel-autoplay": "^8.6.0",
|
||||||
"embla-carousel-react": "^8.6.0",
|
"embla-carousel-react": "^8.6.0",
|
||||||
"framer-motion": "^12.23.0",
|
"framer-motion": "^12.23.0",
|
||||||
"iconify": "^1.4.0",
|
"iconify": "^1.4.0",
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 498 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 723 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 558 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 463 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 829 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 321 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 722 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 280 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 293 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 465 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 440 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 548 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 568 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 304 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 313 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 303 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 320 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 398 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 472 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 332 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue