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

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

@ -1,4 +1,5 @@
import Image from "next/image";
import Link from "next/link";
export default function Footer() {
return (
@ -13,7 +14,8 @@ export default function Footer() {
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]">
<Link href={"https://www.instagram.com/jaecoo_kelapagading"}>
<div className="hover:text-white cursor-pointer">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -40,19 +42,8 @@ export default function Footer() {
</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>
</Link>
<Link href={"https://www.tiktok.com/@jaecoo_kelapagading"}>
<div className="hover:text-white cursor-pointer">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -66,19 +57,7 @@ export default function Footer() {
/>
</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>
</Link>
</div>
</div>
<div className="md:w-8/12 ">
@ -130,10 +109,14 @@ export default function Footer() {
<h4 className="font-semibold text-white mb-4">CONTACT</h4>
<ul className="space-y-4 text-sm">
<li>
<a href="https://jaecoo.com" target="_blank" rel="noreferrer">
jaecoo.com
<a
href="mailto:jaecookelapagading@gmail.com"
className="hover:underline"
>
jaecookelapagading@gmail.com
</a>
</li>
<li>0816 1124 631</li>
<li>
<p className="font-semibold text-white">

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

@ -11,6 +11,17 @@ import {
export default function GallerySection() {
const [data, setData] = useState<any[]>([]);
const [loading, setLoading] = useState(false);
const TABS = [
"All",
"Grand Opening",
"IIMS",
"GIIAS",
"GJAW",
"Exhibitions",
"Test Drive",
];
const [activeTab, setActiveTab] = useState("All");
const fetchData = async () => {
try {
@ -54,17 +65,40 @@ export default function GallerySection() {
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 (
<section className="py-16 px-4 max-w-[1400px] mx-auto">
<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 ? (
<p className="text-center">Loading...</p>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{data.map((item: any) => (
{filteredData.length > 0 ? (
filteredData.map((item: any) => (
<div
key={`gallery-${item.id}`} // 🔥 WAJIB unik
key={`gallery-${item.id}`}
className="relative w-full aspect-[3/2] bg-gray-100 rounded overflow-hidden"
>
{item.image_url ? (
@ -81,7 +115,12 @@ export default function GallerySection() {
</div>
)}
</div>
))}
))
) : (
<p className="col-span-full text-center text-gray-400">
Konten belum tersedia
</p>
)}
</div>
)}
</section>

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

@ -45,7 +45,7 @@ export default function HeaderPriceInformation() {
{
title: "JAECOO J8 SHS-P ARDIS",
image: "/j8-awd-nobg.png",
price: "Rp 812.000.000",
price: "Rp 828.000.000",
oldPrice: "Rp 828.000.000",
capacity: "34,46kWh",
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 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 = [
"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 }));
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]}>
<CarouselContent>
{banners.map((banner, index) => (
<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
src={banner.thumbnail_url}
alt={banner.title}
fill
priority={index === 0}
className="object-cover"
className="object-contain"
/>
{/* {index === 0 && (

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

@ -5,10 +5,9 @@ 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: "13.2 Screen with APPLE Carplay & Android Auto",
description: "13.2 Full HD Center Display",
image: "/headunit.png",
},
{
title: "Horizontal Side by Side Cup Holder",
@ -24,9 +23,8 @@ const featuresInt = [
},
{
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",
description: "Fast Wireless Charging 50W",
image: "/charging.png",
},
];
@ -78,7 +76,7 @@ export default function InteriorShs() {
transition={{ duration: 0.7 }}
>
<Image
src="/in-shs.png"
src="/inter.png"
alt="Interior Hero"
fill
className="object-cover"

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

@ -2,34 +2,37 @@
import { useState } from "react";
import Image from "next/image";
import { ArrowRight } from "lucide-react";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
const tabs = ["INSTAGRAM", "TIKTOK"];
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"];
const instagramPosts = ["/Asset19.png", "/Asset20.png", "/isra.png"];
const tiktokPosts = ["/tiktok1.jpeg", "/tiktok2.jpeg", "/tiktok3.jpeg"];
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>
{/* Title */}
<h2 className="text-3xl font-bold mb-2 ml-4">Sosial Media Kami</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) => (
<button
key={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"
: "text-[gray-700] hover:bg-gray-100"
: "bg-gray-100 text-gray-600 hover:bg-gray-200"
}`}
>
{tab}
@ -37,116 +40,86 @@ export default function SosmedSection() {
))}
</div>
{/* 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) => (
<div
<Link
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"
>
<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">
<Image
src={img}
alt={`Instagram post ${i + 1}`}
fill
className="w-full h-full object-cover"
className="object-cover transition-transform duration-300 group-hover:scale-105"
/>
{/* 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 className="flex justify-center mt-10">
<Link href={"https://www.instagram.com/jaecoo_kelapagading"}>
<div className="flex justify-center mt-12">
<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">
Lihat Selengkapnya
<ArrowRight size={35} />
<ArrowRight size={28} />
</button>
</Link>
</div>
</>
)}
{/* 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) => (
<div
<Link
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"
>
<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">
<Image
src={img}
alt={`Tiktok post ${i + 1}`}
alt={`TikTok post ${i + 1}`}
fill
className="w-full h-full object-cover"
className="object-cover transition-transform duration-300 group-hover:scale-105"
/>
</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>
{/* 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>
</>
)}
{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]"
<div className="flex justify-center mt-12">
<Link
href="https://www.tiktok.com/@jaecoo_kelapagading"
target="_blank"
>
<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} />
<ArrowRight size={28} />
</button>
</Link>
</div>

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

@ -45,15 +45,14 @@ export default function Video() {
return (
<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
src={banner?.thumbnail_url || "/maintenance.png"}
alt={banner?.title || "Banner"}
fill
className="object-cover"
className="object-contain"
priority
/>
s
</div>
<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