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

update landing

This commit is contained in:
Anang Yusman 2026-02-03 14:28:00 +08:00
parent c5230fdc16
commit e2accd9599
22 changed files with 196 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
components/landing-page/footer.tsx
View File

@ -1,4 +1,5 @@
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
export default function Footer() { export default function Footer() {
return ( return (
@ -13,72 +14,50 @@ export default function Footer() {
className="ml-4" className="ml-4"
/> />
<div className="flex gap-4 mt-6 ml-24 md:ml-20 text-xl text-[#c7dbe3]"> <div className="flex gap-4 mt-6 ml-8 md:ml-8 text-xl text-[#c7dbe3]">
<div className="hover:text-white cursor-pointer"> <Link href={"https://www.instagram.com/jaecoo_kelapagading"}>
<svg <div className="hover:text-white cursor-pointer">
xmlns="http://www.w3.org/2000/svg" <svg
width="18" xmlns="http://www.w3.org/2000/svg"
height="18" width="18"
viewBox="0 0 24 24" height="18"
> viewBox="0 0 24 24"
<g >
fill="none" <g
stroke="currentColor" fill="none"
// stroke-width="1.5" stroke="currentColor"
// stroke-width="1.5"
>
<path
// stroke-linecap="round"
// stroke-linejoin="round"
d="M12 16a4 4 0 1 0 0-8a4 4 0 0 0 0 8"
/>
<path d="M3 16V8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5Z" />
<path
// stroke-linecap="round"
// stroke-linejoin="round"
d="m17.5 6.51l.01-.011"
/>
</g>
</svg>
</div>
</Link>
<Link href={"https://www.tiktok.com/@jaecoo_kelapagading"}>
<div className="hover:text-white cursor-pointer">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
> >
<path <path
// stroke-linecap="round" fill="currentColor"
// stroke-linejoin="round" d="M16 8.245V15.5a6.5 6.5 0 1 1-5-6.326v3.163a3.5 3.5 0 1 0 2 3.163V2h3a5 5 0 0 0 5 5v3a7.97 7.97 0 0 1-5-1.755"
d="M12 16a4 4 0 1 0 0-8a4 4 0 0 0 0 8"
/> />
<path d="M3 16V8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5Z" /> </svg>
<path </div>
// stroke-linecap="round" </Link>
// stroke-linejoin="round"
d="m17.5 6.51l.01-.011"
/>
</g>
</svg>
</div>
<div className="hover:text-white cursor-pointer">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
/>
</svg>
</div>
<div className="hover:text-white cursor-pointer">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M16 8.245V15.5a6.5 6.5 0 1 1-5-6.326v3.163a3.5 3.5 0 1 0 2 3.163V2h3a5 5 0 0 0 5 5v3a7.97 7.97 0 0 1-5-1.755"
/>
</svg>
</div>
<div className="hover:text-white cursor-pointer">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476zM9.999 8.5v7l6-3.5z"
/>
</svg>
</div>
</div> </div>
</div> </div>
<div className="md:w-8/12 "> <div className="md:w-8/12 ">
@ -130,10 +109,14 @@ export default function Footer() {
<h4 className="font-semibold text-white mb-4">CONTACT</h4> <h4 className="font-semibold text-white mb-4">CONTACT</h4>
<ul className="space-y-4 text-sm"> <ul className="space-y-4 text-sm">
<li> <li>
<a href="https://jaecoo.com" target="_blank" rel="noreferrer"> <a
jaecoo.com href="mailto:jaecookelapagading@gmail.com"
className="hover:underline"
>
jaecookelapagading@gmail.com
</a> </a>
</li> </li>
<li>0816 1124 631</li> <li>0816 1124 631</li>
<li> <li>
<p className="font-semibold text-white"> <p className="font-semibold text-white">

79
components/landing-page/galery.tsx
View File

@ -11,6 +11,17 @@ import {
export default function GallerySection() { export default function GallerySection() {
const [data, setData] = useState<any[]>([]); const [data, setData] = useState<any[]>([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const TABS = [
"All",
"Grand Opening",
"IIMS",
"GIIAS",
"GJAW",
"Exhibitions",
"Test Drive",
];
const [activeTab, setActiveTab] = useState("All");
const fetchData = async () => { const fetchData = async () => {
try { try {
@ -54,34 +65,62 @@ export default function GallerySection() {
fetchData(); fetchData();
}, []); }, []);
const filteredData = data.filter((item) => {
if (activeTab === "All") return true;
if (activeTab === "Grand Opening") return true; // sementara
return false; // tab lain belum ada konten
});
return ( return (
<section className="py-16 px-4 max-w-[1400px] mx-auto"> <section className="py-16 px-4 max-w-[1400px] mx-auto">
<h2 className="text-4xl font-bold mb-8">Galeri Kami</h2> <h2 className="text-4xl font-bold mb-8">Galeri Kami</h2>
<div className="flex justify-center gap-2 mb-10">
{TABS.map((tab) => (
<button
key={tab}
onClick={() => setActiveTab(tab)}
className={`px-4 py-2 rounded-full text-sm font-medium transition
${
activeTab === tab
? "bg-black text-white"
: "bg-gray-100 text-gray-600 hover:bg-gray-200"
}`}
>
{tab}
</button>
))}
</div>
{loading ? ( {loading ? (
<p className="text-center">Loading...</p> <p className="text-center">Loading...</p>
) : ( ) : (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{data.map((item: any) => ( {filteredData.length > 0 ? (
<div filteredData.map((item: any) => (
key={`gallery-${item.id}`} // 🔥 WAJIB unik <div
className="relative w-full aspect-[3/2] bg-gray-100 rounded overflow-hidden" key={`gallery-${item.id}`}
> className="relative w-full aspect-[3/2] bg-gray-100 rounded overflow-hidden"
{item.image_url ? ( >
<Image {item.image_url ? (
src={item.image_url} <Image
alt={item.title} src={item.image_url}
fill alt={item.title}
className="object-cover" fill
unoptimized className="object-cover"
/> unoptimized
) : ( />
<div className="flex items-center justify-center h-full text-gray-400"> ) : (
No Image <div className="flex items-center justify-center h-full text-gray-400">
</div> No Image
)} </div>
</div> )}
))} </div>
))
) : (
<p className="col-span-full text-center text-gray-400">
Konten belum tersedia
</p>
)}
</div> </div>
)} )}
</section> </section>

2
components/landing-page/header-price.tsx
View File

@ -45,7 +45,7 @@ export default function HeaderPriceInformation() {
{ {
title: "JAECOO J8 SHS-P ARDIS", title: "JAECOO J8 SHS-P ARDIS",
image: "/j8-awd-nobg.png", image: "/j8-awd-nobg.png",
price: "Rp 812.000.000", price: "Rp 828.000.000",
oldPrice: "Rp 828.000.000", oldPrice: "Rp 828.000.000",
capacity: "34,46kWh", capacity: "34,46kWh",
torque: "650Nm", torque: "650Nm",

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

@ -25,7 +25,12 @@ export default function HeaderProductJ8Awd() {
// const embedLink = `https://drive.google.com/file/d/${fileId}/preview`; // const embedLink = `https://drive.google.com/file/d/${fileId}/preview`;
// const downloadLink = `https://drive.google.com/uc?export=download&id=${fileId}`; // const downloadLink = `https://drive.google.com/uc?export=download&id=${fileId}`;
const images = ["/green.png", "/silver.png", "/white.png", "/black.png"]; const images = [
"/j8-green-ardis.png",
"/j8-silver-ardis.png",
"/j8-white-ardis.png",
"/j8-ardis-black.png",
];
const gradients = [ const gradients = [
"linear-gradient(to bottom, #527D97, #1F6779)", "linear-gradient(to bottom, #527D97, #1F6779)",

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

@ -86,18 +86,18 @@ export default function Header() {
const plugin = useRef(Autoplay({ delay: 4000, stopOnInteraction: false })); 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 mt-5">
<Carousel className="w-full relative" plugins={[plugin.current]}> <Carousel className="w-full relative" plugins={[plugin.current]}>
<CarouselContent> <CarouselContent>
{banners.map((banner, index) => ( {banners.map((banner, index) => (
<CarouselItem key={banner.id}> <CarouselItem key={banner.id}>
<div className="relative w-full h-[400px] sm:h-[500px] md:h-[810px]"> <div className="relative w-full aspect-[16/9]">
<Image <Image
src={banner.thumbnail_url} src={banner.thumbnail_url}
alt={banner.title} alt={banner.title}
fill fill
priority={index === 0} priority={index === 0}
className="object-cover" className="object-contain"
/> />
{/* {index === 0 && ( {/* {index === 0 && (

14
components/landing-page/interior-shs.tsx
View File

@ -5,10 +5,9 @@ import { useInView } from "react-intersection-observer";
const featuresInt = [ const featuresInt = [
{ {
title: "14.8 Screen with APPLE Carplay & Android Auto", title: "13.2 Screen with APPLE Carplay & Android Auto",
description: description: "13.2 Full HD Center Display",
"Stay connected and informed with a 14.8 display offering clear visuals and advanced functionality for a seamless driving experience.", image: "/headunit.png",
image: "/in-shs2.png",
}, },
{ {
title: "Horizontal Side by Side Cup Holder", title: "Horizontal Side by Side Cup Holder",
@ -24,9 +23,8 @@ const featuresInt = [
}, },
{ {
title: "Wireless Charging", title: "Wireless Charging",
description: description: "Fast Wireless Charging 50W",
"Stay powered up on the go with Wireless Charging, ensuring your devices are always ready when you are.", image: "/charging.png",
image: "/in-shs5.png",
}, },
]; ];
@ -78,7 +76,7 @@ export default function InteriorShs() {
transition={{ duration: 0.7 }} transition={{ duration: 0.7 }}
> >
<Image <Image
src="/in-shs.png" src="/inter.png"
alt="Interior Hero" alt="Interior Hero"
fill fill
className="object-cover" className="object-cover"

169
components/landing-page/social-media.tsx
View File

@ -2,151 +2,124 @@
import { useState } from "react"; import { useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { ArrowRight } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { ArrowRight } from "lucide-react";
const tabs = ["INSTAGRAM", "TIKTOK"]; const tabs = ["INSTAGRAM", "TIKTOK"];
const instagramPosts = ["/ig-news1.png", "/ig-news2.png", "/ig-news3.png"]; const instagramPosts = ["/Asset19.png", "/Asset20.png", "/isra.png"];
const tiktokPosts = ["/tk-news1.png", "/tk-news2.png", "/tk-news3.png"];
const youtubePosts = ["/tk-news1.png", "/tk-news2.png", "/tk-news3.png"]; const tiktokPosts = ["/tiktok1.jpeg", "/tiktok2.jpeg", "/tiktok3.jpeg"];
const facebookPosts = ["/tk-news1.png", "/tk-news2.png", "/tk-news3.png"];
export default function SosmedSection() { export default function SosmedSection() {
const [activeTab, setActiveTab] = useState("INSTAGRAM"); const [activeTab, setActiveTab] = useState("INSTAGRAM");
return ( return (
<section className="px-4 py-16 max-w-[1400px] mx-auto"> <section className="px-4 py-16 max-w-[1400px] mx-auto">
<h2 className="text-3xl font-bold mb-6 text-start ml-16"> {/* Title */}
Sosial Media Kami <h2 className="text-3xl font-bold mb-2 ml-4">Sosial Media Kami</h2>
</h2> <p className="text-gray-500 text-sm mb-8 ml-4">
Preview konten dari media sosial resmi kami
</p>
<div className="flex flex-wrap gap-4 items-center justify-center mb-8"> {/* Tabs */}
<div className="flex gap-4 justify-center mb-10">
{tabs.map((tab) => ( {tabs.map((tab) => (
<button <button
key={tab} key={tab}
onClick={() => setActiveTab(tab)} onClick={() => setActiveTab(tab)}
className={`text-sm font-medium px-4 py-2 rounded-full ${ className={`px-5 py-2 rounded-full text-sm font-medium transition
activeTab === tab ${
? "bg-[#BCD4DF] text-sky-700" activeTab === tab
: "text-[gray-700] hover:bg-gray-100" ? "bg-[#BCD4DF] text-sky-700"
}`} : "bg-gray-100 text-gray-600 hover:bg-gray-200"
}`}
> >
{tab} {tab}
</button> </button>
))} ))}
</div> </div>
{/* INSTAGRAM */}
{activeTab === "INSTAGRAM" && ( {activeTab === "INSTAGRAM" && (
<> <>
<div className="flex flex-wrap justify-center items-center gap-4"> <div className="flex flex-wrap justify-center gap-6">
{instagramPosts.map((img, i) => ( {instagramPosts.map((img, i) => (
<div <Link
key={i} key={i}
className="relative w-full sm:w-[300px] md:w-[350px] lg:w-[400px] h-[400px] sm:h-[450px] md:h-[500px]" href="https://www.instagram.com/jaecoo_kelapagading"
target="_blank"
> >
<Image <div className="relative w-full sm:w-[300px] md:w-[340px] aspect-[4/5] rounded-xl overflow-hidden bg-gray-100 group cursor-pointer shadow-sm">
src={img} <Image
alt={`Instagram post ${i + 1}`} src={img}
fill alt={`Instagram post ${i + 1}`}
className="w-full h-full object-cover" fill
/> className="object-cover transition-transform duration-300 group-hover:scale-105"
</div> />
{/* Overlay */}
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
<span className="text-white text-sm font-semibold">
View on Instagram
</span>
</div>
</div>
</Link>
))} ))}
</div> </div>
<div className="flex justify-center mt-10"> <div className="flex justify-center mt-12">
<Link href={"https://www.instagram.com/jaecoo_kelapagading"}> <Link
href="https://www.instagram.com/jaecoo_kelapagading"
target="_blank"
>
<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"> <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 Lihat Selengkapnya
<ArrowRight size={35} /> <ArrowRight size={28} />
</button> </button>
</Link> </Link>
</div> </div>
</> </>
)} )}
{/* TIKTOK */}
{activeTab === "TIKTOK" && ( {activeTab === "TIKTOK" && (
<> <>
<div className="flex flex-wrap justify-center items-center gap-4"> <div className="flex flex-wrap justify-center gap-6">
{tiktokPosts.map((img, i) => ( {tiktokPosts.map((img, i) => (
<div <Link
key={i} key={i}
className="relative w-full sm:w-[300px] md:w-[350px] lg:w-[400px] h-[400px] sm:h-[450px] md:h-[500px]" href="https://www.tiktok.com/@jaecoo_kelapagading"
target="_blank"
> >
<Image <div className="relative w-full sm:w-[260px] md:w-[300px] aspect-[9/16] rounded-xl overflow-hidden bg-gray-100 group cursor-pointer shadow-sm">
src={img} <Image
alt={`Tiktok post ${i + 1}`} src={img}
fill alt={`TikTok post ${i + 1}`}
className="w-full h-full object-cover" fill
/> className="object-cover transition-transform duration-300 group-hover:scale-105"
</div> />
{/* Overlay */}
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
<span className="text-white text-sm font-semibold">
View on TikTok
</span>
</div>
</div>
</Link>
))} ))}
</div> </div>
<div className="flex justify-center mt-10"> <div className="flex justify-center mt-12">
<Link href={"https://www.tiktok.com/@jaecoo_kelapagading"}> <Link
href="https://www.tiktok.com/@jaecoo_kelapagading"
target="_blank"
>
<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"> <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 Lihat Selengkapnya
<ArrowRight size={35} /> <ArrowRight size={28} />
</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> </button>
</Link> </Link>
</div> </div>

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

@ -45,15 +45,14 @@ 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-[600px] md:h-[800px]"> <div className="relative mb-10 w-full aspect-[16/9]">
<Image <Image
src={banner?.thumbnail_url || "/maintenance.png"} src={banner?.thumbnail_url || "/maintenance.png"}
alt={banner?.title || "Banner"} alt={banner?.title || "Banner"}
fill fill
className="object-cover" className="object-contain"
priority priority
/> />
s
</div> </div>
<div className="relative w-full h-[500px] overflow-hidden"> <div className="relative w-full h-[500px] overflow-hidden">

BIN
public/charging.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 206 KiB

BIN
public/front.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 330 KiB

BIN
public/headunit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 423 KiB

BIN
public/inter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 MiB

BIN
public/isra.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 340 KiB

BIN
public/j8-ardis-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 464 KiB

BIN
public/j8-green-ardis.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 570 KiB

BIN
public/j8-silver-ardis.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 465 KiB

BIN
public/j8-white-ardis.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 464 KiB

BIN
public/panoramic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 KiB

BIN
public/rear.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 286 KiB

BIN
public/tiktok1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 230 KiB

BIN
public/tiktok2.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 175 KiB

BIN
public/tiktok3.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 285 KiB