diff --git a/app/product/j5-ev/page.tsx b/app/product/j5-ev/page.tsx index 0e92ec1..5685108 100644 --- a/app/product/j5-ev/page.tsx +++ b/app/product/j5-ev/page.tsx @@ -1,6 +1,7 @@ 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 HeaderProductJ5Ev from "@/components/landing-page/header-product-j7-shs"; 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"; @@ -10,7 +11,7 @@ export default function ProductJ7ShsPage() {
- + diff --git a/components/landing-page/best-agent.tsx b/components/landing-page/best-agent.tsx index c4b3e8a..e2eace4 100644 --- a/components/landing-page/best-agent.tsx +++ b/components/landing-page/best-agent.tsx @@ -2,42 +2,68 @@ import Image from "next/image"; import { motion } from "framer-motion"; +import { useEffect, useState } from "react"; +import { getAgentData } from "@/service/agent"; -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", - }, -]; +type Agent = { + id: number; + name: string; + job_title: string; + status_id: number; + profile_picture_url: string; + created_at: string; +}; export default function BestAgent() { + const [agents, setAgents] = useState([]); + + useEffect(() => { + const fetchAgents = async () => { + try { + const req = { + limit: "10", + page: 1, + search: "", + }; + + const res = await getAgentData(req); + + const agentsData: Agent[] = res?.data?.data || []; + + const latestApprovedAgents = agentsData + .filter((agent) => agent.status_id === 2) // ✅ approved only + .sort( + (a, b) => + new Date(b.created_at).getTime() - + new Date(a.created_at).getTime(), + ) // ✅ newest first + .slice(0, 5); // ✅ max 5 + + setAgents(latestApprovedAgents); + } catch (error) { + console.error("Failed to fetch agents:", error); + } + }; + + fetchAgents(); + }, []); + return ( -
+
Our Teams -
+
{agents.map((agent, index) => ( -
+
{agent.name}
+

{agent.name}

-

- {agent.title} + +

+ {agent.job_title}

))} diff --git a/components/landing-page/galery.tsx b/components/landing-page/galery.tsx index 33b00b7..59d59fa 100644 --- a/components/landing-page/galery.tsx +++ b/components/landing-page/galery.tsx @@ -1,80 +1,89 @@ "use client"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import Image from "next/image"; -import { ChevronLeft, ChevronRight } from "lucide-react"; - -const imagesPerPage = 6; - -const galleryImages = [ - "/gl1.png", - "/gl2-new.png", - "/gl3.png", - "/gl4.png", - "/gl5.png", - "/gl6.png", - "/gl7.png", - "/gl8.png", - "/gl9.png", -]; +import { + getAllGaleryFiles, + getGaleryData, + getGaleryFileData, +} from "@/service/galery"; export default function GallerySection() { - const [currentPage, setCurrentPage] = useState(1); - const totalPages = Math.ceil(galleryImages.length / imagesPerPage); + const [data, setData] = useState([]); + const [loading, setLoading] = useState(false); - const paginatedImages = galleryImages.slice( - (currentPage - 1) * imagesPerPage, - currentPage * imagesPerPage - ); + const fetchData = async () => { + try { + setLoading(true); + + // 1️⃣ Ambil gallery (ada status_id) + const galleryRes = await getGaleryData({ + limit: "100", + page: 1, + search: "", + }); + + const galleries = galleryRes?.data?.data ?? []; + + // hanya approved + const approvedGalleries = galleries.filter((g: any) => g.status_id === 2); + + // 2️⃣ Ambil SEMUA files + const filesRes = await getAllGaleryFiles(); + const files = filesRes?.data?.data ?? []; + + // 3️⃣ Mapping gallery + file berdasarkan gallery_id + const merged = approvedGalleries.map((gallery: any) => { + const file = files.find((f: any) => f.gallery_id === gallery.id); + + return { + ...gallery, + image_url: file?.image_url ?? null, + }; + }); + + setData(merged); + } catch (err) { + console.error("Error fetch galeri:", err); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + fetchData(); + }, []); return (

Galeri Kami

-
- {paginatedImages.map((img, index) => ( -
- {`gallery-${index}`} -
- ))} -
- -
- - {[...Array(totalPages)].map((_, i) => ( - - ))} - -
+ {loading ? ( +

Loading...

+ ) : ( +
+ {data.map((item: any) => ( +
+ {item.image_url ? ( + {item.title} + ) : ( +
+ No Image +
+ )} +
+ ))} +
+ )}
); } diff --git a/components/landing-page/header-about.tsx b/components/landing-page/header-about.tsx index 8ceb679..f8543bd 100644 --- a/components/landing-page/header-about.tsx +++ b/components/landing-page/header-about.tsx @@ -144,6 +144,42 @@ export default function HeaderAbout() { />
+ {/* ===== Static Gallery Section ===== */} +
+ + Best Sales of The Month & SPV of The Month + + +
+ {["/Asset18.png", "/Asset19.png", "/Asset20.png", "/Asset21.png"].map( + (src, index) => ( + + {`static-gallery-${index}`} + + ), + )} +
+
); } diff --git a/components/landing-page/header-product-j7-awd.tsx b/components/landing-page/header-product-j7-awd.tsx index 305c949..0c64a02 100644 --- a/components/landing-page/header-product-j7-awd.tsx +++ b/components/landing-page/header-product-j7-awd.tsx @@ -14,6 +14,7 @@ import { import { motion } from "framer-motion"; import { useState } from "react"; import { Download } from "lucide-react"; +import Link from "next/link"; export default function HeaderProductJ7Awd() { const [open, setOpen] = useState(false); @@ -57,81 +58,25 @@ export default function HeaderProductJ7Awd() { /> {/* Tombol di dalam gambar, posisi bawah tengah */} +
- - - - + + + - - {/* Download Button */} -
- - - -
- - {/* Iframe Preview */} - - - - - {/* Trigger untuk modal */} - - - - - -
- MAS JAECOO Logo -
- - - FORM TEST DRIVE - - - - {/* Form */} -
- - - - -
- -
-