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 adbc481..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", - "/gl-2-news.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 f3eed0a..ccfde4f 100644 --- a/components/landing-page/header-about.tsx +++ b/components/landing-page/header-about.tsx @@ -144,6 +144,41 @@ export default function HeaderAbout() { />
+
+ + 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 d6b9fe9..a4dd154 100644 --- a/components/landing-page/header-product-j7-awd.tsx +++ b/components/landing-page/header-product-j7-awd.tsx @@ -14,30 +14,29 @@ import { import { motion } from "framer-motion"; import { useState } from "react"; import { Download } from "lucide-react"; +import Link from "next/link"; -export default function HeaderProductJ7Awd() { +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 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 = [ - "/j5-putih.png", - "/j5-hitam.png", - "/j5-silver.png", - "/j5-biru.png", - "/j5-hijau.png", + "/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)", - "linear-gradient(to bottom, #B0B5C2, #B0B5C2)", - "linear-gradient(to bottom, #233a77, #233a77)", - "linear-gradient(to bottom, #5D6B4F, #5D6B4F)", ]; return ( <> @@ -48,9 +47,9 @@ export default function HeaderProductJ7Awd() { transition={{ duration: 0.8 }} className="flex flex-col items-center gap-6" > -
+
about-header
- - - - + + + - -
- - - -
- - - - - - - - - - -
- MAS JAECOO Logo -
- - - FORM TEST DRIVE - - - -
- - - - -
- -
-