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

fix

This commit is contained in:
Anang Yusman 2026-02-03 14:52:48 +08:00
parent fbc021f3b4
commit 9c01e6f467
26 changed files with 215 additions and 241 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 Link from "next/link";
export default function Footer() {
return (
@ -13,72 +14,50 @@ 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="hover:text-white cursor-pointer">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
>
<g
fill="none"
stroke="currentColor"
// stroke-width="1.5"
<div className="flex gap-4 mt-6 ml-8 text-xl text-[#c7dbe3]">
<Link href={"https://www.instagram.com/jaecoocihampelasbdg"}>
<div className="hover:text-white cursor-pointer">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
>
<g
fill="none"
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.cihampelasbdg"}>
<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
// stroke-linecap="round"
// stroke-linejoin="round"
d="M12 16a4 4 0 1 0 0-8a4 4 0 0 0 0 8"
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"
/>
<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>
<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>
</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:jaecoocihampelas@gmail.com"
className="hover:underline"
>
jaecoocihampelas@gmail.com
</a>
</li>
<li>0817 222190</li>
<li>
<p className="font-semibold text-white">Jaecoo Bandung</p>

79
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,34 +65,62 @@ 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) => (
<div
key={`gallery-${item.id}`} // 🔥 WAJIB unik
className="relative w-full aspect-[3/2] bg-gray-100 rounded overflow-hidden"
>
{item.image_url ? (
<Image
src={item.image_url}
alt={item.title}
fill
className="object-cover"
unoptimized
/>
) : (
<div className="flex items-center justify-center h-full text-gray-400">
No Image
</div>
)}
</div>
))}
{filteredData.length > 0 ? (
filteredData.map((item: any) => (
<div
key={`gallery-${item.id}`}
className="relative w-full aspect-[3/2] bg-gray-100 rounded overflow-hidden"
>
{item.image_url ? (
<Image
src={item.image_url}
alt={item.title}
fill
className="object-cover"
unoptimized
/>
) : (
<div className="flex items-center justify-center h-full text-gray-400">
No Image
</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",

33
components/landing-page/header-product-j7-awd.tsx
View File

@ -16,27 +16,27 @@ 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 = [
"/jj7-cars.png", // index 0
"/green-j7-awd.png", // index 1
"/black-j7-awd.png", // index 2
"/white-j7-awd.png", // index 3
"/jj7-blue.png",
"/jj7-white.png",
"/jj7-silver.png",
"/jj7-black.png",
];
const gradients = [
"linear-gradient(to bottom, #B0B5C2, #B0B5C2)", // Hijau
"linear-gradient(to bottom, #5D6B4F, #5D6B4F)", // Silver
"linear-gradient(to bottom, #1A1A1A, #3A3A3A)", // Hitam
"linear-gradient(to bottom, #FFFFFF, #FFFFFF)", // Putih
"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 (
<>
@ -47,9 +47,9 @@ export default function HeaderProductJ7Awd() {
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">
<div className="relative w-full h-[300px] sm:h-[400px] md:h-[800px] overflow-hidden">
<Image
src="/product1.jpg"
src="/shs-header.png"
alt="about-header"
fill
className="object-cover"
@ -57,8 +57,6 @@ export default function HeaderProductJ7Awd() {
priority
/>
{/* Tombol di dalam gambar, posisi bawah tengah */}
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-3">
<Link
href="https://cms.jaecoo.id/uploads/Flyer_J7_SHS_6db27c3a25.pdf"
@ -82,7 +80,6 @@ export default function HeaderProductJ7Awd() {
</motion.div>
</section>
{/* Section warna */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}

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)",

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

@ -86,45 +86,19 @@ 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 && (
<div className="absolute inset-0 flex flex-col justify-center items-start px-4 sm:px-8 md:px-28 z-10">
<motion.h1
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-2xl sm:text-3xl md:text-5xl font-bold text-black mb-4"
>
{banner.title}
</motion.h1>
{banner.description && (
<motion.p
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.9, delay: 0.2 }}
className="text-sm sm:text-base md:text-lg text-black mb-6"
>
{banner.description}
</motion.p>
)}
</div>
)} */}
</div>
</CarouselItem>
))}

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"

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

@ -2,149 +2,128 @@
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 = ["/ig1-new.png", "/ig2-new.png", "/ig3-new.png"];
const tiktokPosts = ["/tk1.png", "/tk2.png", "/tk3.png"];
const youtubePosts = ["/tk1.png", "/tk2.png", "/tk3.png"];
const facebookPosts = ["/tk1.png", "/tk2.png", "/tk3.png"];
const instagramPosts = ["/ig1-new1.png", "/ig2-new2.png", "/ig3-new3.png"];
const tiktokPosts = [
"/tiktokchm1.jpeg",
"/tiktokchm2.jpeg",
"/tiktokchm3.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-center">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 ${
activeTab === tab
? "bg-[#BCD4DF] text-sky-700"
: "text-[gray-700] hover:bg-gray-100"
}`}
className={`px-5 py-2 rounded-full text-sm font-medium transition
${
activeTab === tab
? "bg-[#BCD4DF] text-sky-700"
: "bg-gray-100 text-gray-600 hover:bg-gray-200"
}`}
>
{tab}
</button>
))}
</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/jaecoocihampelasbdg"
target="_blank"
>
<Image
src={img}
alt={`Instagram post ${i + 1}`}
fill
className="w-full h-full object-cover"
/>
</div>
<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="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_cihampelasbdg"}>
<div className="flex justify-center mt-12">
<Link
href="https://www.instagram.com/jaecoocihampelasbdg"
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.cihampelasbdg"
target="_blank"
>
<Image
src={img}
alt={`Tiktok post ${i + 1}`}
fill
className="w-full h-full object-cover"
/>
</div>
<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}`}
fill
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 TikTok
</span>
</div>
</div>
</Link>
))}
</div>
<div className="flex justify-center mt-10">
<Link href={"https://www.tiktok.com/@jaecoo.cihampelasbdg"}>
<div className="flex justify-center mt-12">
<Link
href="https://www.tiktok.com/@jaecoo.cihampelasbdg"
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} />
</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} />
<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/ig1-new1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 825 KiB

BIN
public/ig2-new2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 KiB

BIN
public/ig3-new3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 501 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/tiktokchm1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 399 KiB

BIN
public/tiktokchm2.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 240 KiB

BIN
public/tiktokchm3.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB