Merge version_5_1783181030069 into main

Bob AI: Apply the following revisions while maintaining the establis
2026-07-04 16:06:52 +00:00 · 2026-07-04 16:06:08 +00:00 · 2026-07-03 09:04:14 +00:00 · 2026-07-03 09:03:31 +00:00 · 2026-07-03 08:55:29 +00:00 · 2026-07-03 08:54:46 +00:00
9 changed files with 405 additions and 165 deletions
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,177 +1,37 @@
-import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
-import BlogArticle from '@/components/sections/blog/BlogArticle';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
-import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
-import HeroSplitVerticalMarqueeTall from '@/components/sections/hero/HeroSplitVerticalMarqueeTall';
-import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
-import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in the sibling sections/ folder (one file per section).
+// Edit those section files directly. Non-block content (wrappers,
+// non-inlinable sections) is preserved inline; extracted section blocks
+// become component refs.

-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import MetricsSection from './HomePage/sections/Metrics';
+import AboutSection from './HomePage/sections/About';
+import UnitSection from './HomePage/sections/Unit';
+import InsightSection from './HomePage/sections/Insight';
+import RegionSection from './HomePage/sections/Region';
+import TestimonialSection from './HomePage/sections/Testimonial';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
  return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroSplitVerticalMarqueeTall
-      tag="ERA Buana PIK"
-      title="Property Analyst-nya PIK"
-      description="Kami bukan sekadar agen. Kami adalah konsultan properti berbasis data yang memberikan analisis mendalam mengenai ROI, rental yield, dan tren pasar eksklusif di Pantai Indah Kapuk."
-      primaryButton={{
-        text: "Konsultasi via WhatsApp",        href: "https://wa.me/628123456789"}}
-      secondaryButton={{
-        text: "Lihat Analisis Pasar",        href: "#insight"}}
-      leftItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-posing-outdoors_23-2149405907.jpg"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-luxury-villa-with-pool_23-2151974385.jpg"},
-      ]}
-      rightItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-scandinavian-living-room-with-design-mint-sofa-furnitures-mock-up-poster-map-plants-eleg_1258-152152.jpg"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-beautiful-white-interior-modern-architecture_181624-21886.jpg"},
-      ]}
-      textAnimation="fade-blur"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />

-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsSimpleCards
-      tag="Data & Pengalaman"
-      title="Kredibilitas Berbasis Data"
-      description="Kami melayani klien dengan dedikasi penuh pada transparansi dan akurasi informasi pasar PIK."
-      metrics={[
-        {
-          value: "15+",          description: "Tahun Pengalaman Profesional"},
-        {
-          value: "500+",          description: "Transaksi Properti Sukses"},
-        {
-          value: "100%",          description: "Fokus Kawasan PIK (1, 2 & Golf Island)"},
-      ]}
-      textAnimation="slide-up"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />

-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutTestimonial
-      tag="Tentang Kami"
-      quote="Tugas kami adalah meminimalkan risiko investasi Anda. Sebagai analis, kami mengedepankan data, tren, dan potensi masa depan properti di Pantai Indah Kapuk, bukan sekadar komisi."
-      author="Analyst Lead"
-      role="ERA Buana PIK"
-      textAnimation="fade"
-      imageSrc="http://img.b2bpic.net/free-photo/portrait-smiling-mature-businessman-leaning-railing_23-2147956322.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />

-  <div id="unit" data-section="unit">
-    <SectionErrorBoundary name="unit">
-          <FeaturesRevealCardsBento
-      tag="Listing Unggulan"
-      title="Pilihan Properti Premium"
-      description="Kurasi unit eksklusif di kawasan Pantai Indah Kapuk dengan potensi yield terbaik."
-      items={[
-        {
-          title: "Unit PIK 2 - Modern Minimalist",          description: "Yield 8% / Tahun",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-interior-design_23-2150870804.jpg"},
-        {
-          title: "Golf Island Luxury Villa",          description: "Yield 7.5% / Tahun",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/monochromatic-urban-minimal-landscape_23-2151011597.jpg"},
-        {
-          title: "PIK 1 Commercial Lot",          description: "Prime Location",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/cozy-lively-home-interior-design_23-2151119010.jpg"},
-        {
-          title: "Apartemen PIK 2",          description: "Rental Yield 9%",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/white-business-center-with-beautiful-textures-unique-design-with-interior-staircases_181624-5365.jpg"},
-        {
-          title: "Waterfront Luxury Home",          description: "Yield 8.2% / Tahun",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/coral-color-grunge-texture-with-copyspace_24972-244.jpg"},
-        {
-          title: "PIK 2 Ruko Strategis",          description: "High ROI Potential",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-architectural-structure-city_23-2148798659.jpg"},
-        {
-          title: "Premium Golf Estate",          description: "Limited Listing",          href: "#",          imageSrc: "http://img.b2bpic.net/free-photo/facade-window-colonial-style-bangkok-thailand_1150-10807.jpg"},
-      ]}
-      textAnimation="slide-up"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <UnitSection />

-  <div id="insight" data-section="insight">
-    <SectionErrorBoundary name="insight">
-          <BlogArticle
-      category="Market Insight"
-      title="Tren Properti PIK Tahun Ini"
-      excerpt="Analisis mendalam mengenai pergerakan harga properti di kawasan PIK 2 dan potensi investasi yang menjanjikan."
-      content="Kawasan Pantai Indah Kapuk terus menunjukkan ketahanan investasi yang luar biasa. Dengan pembangunan infrastruktur yang masif di PIK 2, permintaan akan hunian premium terus meningkat. Kami telah mengumpulkan data komprehensif mengenai pertumbuhan harga dalam 12 bulan terakhir."
-      imageSrc="http://img.b2bpic.net/free-photo/woman-working-with-papers_23-2147668819.jpg"
-      authorName="Property Analyst Team"
-      authorImageSrc="http://img.b2bpic.net/free-photo/portrait-attractive-young-businesswoman_329181-15813.jpg"
-      date="2024-05-20"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <InsightSection />

-  <div id="region" data-section="region">
-    <SectionErrorBoundary name="region">
-          <FeaturesMediaCarousel
-      tag="Why PIK?"
-      title="Kenapa PIK Menjadi Pusat Investasi?"
-      description="Infrastruktur kelas dunia, konektivitas yang baik, dan ekosistem gaya hidup yang terus berkembang."
-      items={[
-        {
-          title: "Konektivitas Terbaik",          description: "Akses tol langsung dan dekat dengan bandara internasional.",          buttonIcon: "ArrowRight",          imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-skyscrapers-downtown-sydney-australia_1127-3574.jpg"},
-        {
-          title: "Fasilitas Gaya Hidup",          description: "Pusat kuliner, pendidikan, dan medis bertaraf internasional.",          buttonIcon: "ArrowRight",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-wooden-sale-lettering-wooden-houses_23-2148346243.jpg"},
-        {
-          title: "Ekosistem Modern",          description: "Kawasan hunian yang terintegrasi dan aman bagi keluarga.",          buttonIcon: "ArrowRight",          imageSrc: "http://img.b2bpic.net/free-photo/residential-building-city_23-2148798612.jpg"},
-      ]}
-      textAnimation="slide-up"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <RegionSection />

-  <div id="testimonial" data-section="testimonial">
-    <SectionErrorBoundary name="testimonial">
-          <TestimonialOverlayCards
-      tag="Testimoni"
-      title="Apa Kata Klien Kami"
-      description="Pengalaman nyata dari investor properti di PIK."
-      testimonials={[
-        {
-          name: "Budi Santoso",          role: "Investor",          company: "Jakarta Holdings",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-office-composition-with-businessman_23-2147900145.jpg"},
-        {
-          name: "Siska Wijaya",          role: "Entrepreneur",          company: "Creative Hub",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-using-sign-language_23-2148740328.jpg"},
-        {
-          name: "Hendra Pratama",          role: "Property Enthusiast",          company: "Independent Investor",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/aspirated-confident-businesswoman-looking-forward_1262-5277.jpg"},
-        {
-          name: "Andi Gunawan",          role: "Business Owner",          company: "Growth Co.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-business-man-greeting-colleague_74855-1519.jpg"},
-        {
-          name: "Maya Lestari",          role: "Investor",          company: "Strategic PIK",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-mixed-race-dark-skinned-man-with-bristle-dark-eyes-has-headphones_273609-8594.jpg"},
-      ]}
-      textAnimation="slide-up"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialSection />

-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Hubungi Kami"
-      text="Dapatkan analisis properti PIK secara gratis untuk keputusan investasi Anda."
-      primaryButton={{
-        text: "WhatsApp Sekarang",        href: "https://wa.me/628123456789"}}
-      secondaryButton={{
-        text: "Jadwalkan Konsultasi",        href: "#contact-form"}}
-      textAnimation="fade-blur"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
    </>
  );
 }
--- a/src/pages/HomePage/sections/About.tsx
+++ b/src/pages/HomePage/sections/About.tsx
@@ -0,0 +1,23 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutTestimonial
+        tag="Tentang Kami"
+        quote="Tugas saya adalah meminimalkan risiko investasi Anda. Sebagai analis, saya mengedepankan data, tren, dan potensi masa depan properti di Pantai Indah Kapuk, bukan sekadar komisi."
+        author="Hendra (Manzz) — Property Analyst PIK, ERA Buana"
+        role="@pik.pik2.golfisland"
+        textAnimation="fade"
+        imageSrc="http://img.b2bpic.net/free-photo/portrait-smiling-mature-businessman-leaning-railing_23-2147956322.jpg"
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Contact.tsx
+++ b/src/pages/HomePage/sections/Contact.tsx
@@ -0,0 +1,23 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+              <ContactCta
+        tag="Hubungi Kami"
+        text="Dapatkan analisis properti PIK secara gratis untuk keputusan investasi Anda."
+        primaryButton={{"href":"https://wa.me/6282116881699?text=Halo%20Pak%20Hendra,%20saya%20tertarik%20konsultasi%20properti%20PIK","text":"WhatsApp Sekarang"}}
+        secondaryButton={{
+            text: "Jadwalkan Konsultasi",        href: "#contact-form"}}
+        textAnimation="fade-blur"
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Hero.tsx
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,36 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroSplitVerticalMarqueeTall from '@/components/sections/hero/HeroSplitVerticalMarqueeTall';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroSplitVerticalMarqueeTall
+        tag="ERA Buana PIK"
+        title="Property Analyst-nya PIK"
+        description="Saya bukan sekadar agen. Saya adalah konsultan properti berbasis data yang memberikan analisis mendalam mengenai ROI, rental yield, dan tren pasar eksklusif di Pantai Indah Kapuk."
+        primaryButton={{"href":"https://wa.me/6282116881699?text=Halo%20Pak%20Hendra,%20saya%20tertarik%20konsultasi%20properti%20PIK","text":"Konsultasi via WhatsApp"}}
+        secondaryButton={{
+            text: "Lihat Analisis Pasar",        href: "#insight"}}
+        leftItems={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-posing-outdoors_23-2149405907.jpg"},
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/modern-luxury-villa-with-pool_23-2151974385.jpg"},
+          ]}
+        rightItems={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/stylish-scandinavian-living-room-with-design-mint-sofa-furnitures-mock-up-poster-map-plants-eleg_1258-152152.jpg"},
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-beautiful-white-interior-modern-architecture_181624-21886.jpg"},
+          ]}
+        textAnimation="fade-blur"
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Insight.tsx
+++ b/src/pages/HomePage/sections/Insight.tsx
@@ -0,0 +1,25 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "insight" section.
+
+import React from 'react';
+import BlogArticle from '@/components/sections/blog/BlogArticle';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function InsightSection(): React.JSX.Element {
+  return (
+    <div id="insight" data-section="insight">
+        <SectionErrorBoundary name="insight">
+              <BlogArticle
+        category="Market Insight"
+        title="Analisis Harga PIK 2 Q2 2026: Naik atau Stagnan?"
+        excerpt="Analisis mendalam mengenai pergerakan harga properti di kawasan PIK 2 dan potensi investasi yang menjanjikan."
+        content="Kawasan Pantai Indah Kapuk terus menunjukkan ketahanan investasi yang luar biasa. Dengan pembangunan infrastruktur yang masif di PIK 2, permintaan akan hunian premium terus meningkat. Kami telah mengumpulkan data komprehensif mengenai pertumbuhan harga dalam 12 bulan terakhir."
+        imageSrc="http://img.b2bpic.net/free-photo/woman-working-with-papers_23-2147668819.jpg"
+        authorName="Hendra — Property Analyst PIK"
+        authorImageSrc="http://img.b2bpic.net/free-photo/portrait-attractive-young-businesswoman_329181-15813.jpg"
+        date="2026-05-20"
+      />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Metrics.tsx
+++ b/src/pages/HomePage/sections/Metrics.tsx
@@ -0,0 +1,29 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsSimpleCards
+          tag="Data & Pengalaman"
+          title="Kredibilitas Berbasis Data"
+          description="Kami melayani klien dengan dedikasi penuh pada transparansi dan akurasi informasi pasar PIK."
+          metrics={[
+            {
+              value: "15+",          description: "Tahun Pengalaman Profesional"},
+            {
+              value: "500+",          description: "Transaksi Properti Sukses"},
+            {
+              value: "100%",          description: "Fokus Kawasan PIK (1, 2 & Golf Island)"},
+          ]}
+          textAnimation="slide-up"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Region.tsx
+++ b/src/pages/HomePage/sections/Region.tsx
@@ -0,0 +1,29 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "region" section.
+
+import React from 'react';
+import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function RegionSection(): React.JSX.Element {
+  return (
+    <div id="region" data-section="region">
+        <SectionErrorBoundary name="region">
+              <FeaturesMediaCarousel
+          tag="Why PIK?"
+          title="Kenapa PIK Menjadi Pusat Investasi?"
+          description="Infrastruktur kelas dunia, konektivitas yang baik, dan ekosistem gaya hidup yang terus berkembang."
+          items={[
+            {
+              title: "Konektivitas Terbaik",          description: "Akses tol langsung dan dekat dengan bandara internasional.",          buttonIcon: "ArrowRight",          imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-skyscrapers-downtown-sydney-australia_1127-3574.jpg"},
+            {
+              title: "Fasilitas Gaya Hidup",          description: "Pusat kuliner, pendidikan, dan medis bertaraf internasional.",          buttonIcon: "ArrowRight",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-wooden-sale-lettering-wooden-houses_23-2148346243.jpg"},
+            {
+              title: "Ekosistem Modern",          description: "Kawasan hunian yang terintegrasi dan aman bagi keluarga.",          buttonIcon: "ArrowRight",          imageSrc: "http://img.b2bpic.net/free-photo/residential-building-city_23-2148798612.jpg"},
+          ]}
+          textAnimation="slide-up"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Testimonial.tsx
+++ b/src/pages/HomePage/sections/Testimonial.tsx
@@ -0,0 +1,38 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonial" section.
+
+import React from 'react';
+import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialSection(): React.JSX.Element {
+  return (
+    <div id="testimonial" data-section="testimonial">
+        <SectionErrorBoundary name="testimonial">
+              <TestimonialOverlayCards
+          tag="Testimoni"
+          title="Apa Kata Klien Kami"
+          description="Pengalaman nyata dari investor properti di PIK."
+          testimonials={[
+            {
+              name: "Budi Santoso",          role: "Investor",          company: "Jakarta Holdings",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/modern-office-composition-with-businessman_23-2147900145.jpg"},
+            {
+              name: "Siska Wijaya",          role: "Entrepreneur",          company: "Creative Hub",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-using-sign-language_23-2148740328.jpg"},
+            {
+              name: "Hendra Pratama",          role: "Property Enthusiast",          company: "Independent Investor",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/aspirated-confident-businesswoman-looking-forward_1262-5277.jpg"},
+            {
+              name: "Andi Gunawan",          role: "Business Owner",          company: "Growth Co.",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/cheerful-business-man-greeting-colleague_74855-1519.jpg"},
+            {
+              name: "Maya Lestari",          role: "Investor",          company: "Strategic PIK",          rating: 5,
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-mixed-race-dark-skinned-man-with-bristle-dark-eyes-has-headphones_273609-8594.jpg"},
+          ]}
+          textAnimation="slide-up"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Unit.tsx
+++ b/src/pages/HomePage/sections/Unit.tsx
@@ -0,0 +1,177 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import { cls } from "@/lib/utils";
+
+const items = [
+  {
+    title: "Golf Island Luxury Land View Sea and Golf",
+    description: "Yield 8% / Tahun",
+    href: "#",
+    images: [
+      "https://storage.googleapis.com/webild/users/user_3FvUPWGNNPPM6YThQS6Bj8ckkfW/uploaded-1783068149447-if6m1jur.jpg",
+      "https://storage.googleapis.com/webild/users/user_3FvUPWGNNPPM6YThQS6Bj8ckkfW/uploaded-1783068149448-7yddeln2.jpg",
+      "https://storage.googleapis.com/webild/users/user_3FvUPWGNNPPM6YThQS6Bj8ckkfW/uploaded-1783068149449-yjivk24i.jpg"
+    ]
+  },
+  {
+    title: "Elegant Homie Home PIK 1",
+    description: "Premium Living",
+    href: "#",
+    images: [
+      "https://storage.googleapis.com/webild/users/user_3FvUPWGNNPPM6YThQS6Bj8ckkfW/uploaded-1783069324979-6szh1ae2.jpg",
+      "https://storage.googleapis.com/webild/users/user_3FvUPWGNNPPM6YThQS6Bj8ckkfW/uploaded-1783069324980-v842er21.jpg",
+      "https://storage.googleapis.com/webild/users/user_3FvUPWGNNPPM6YThQS6Bj8ckkfW/uploaded-1783069324980-jhupzx4e.jpg",
+      "https://storage.googleapis.com/webild/users/user_3FvUPWGNNPPM6YThQS6Bj8ckkfW/uploaded-1783069324981-w13cg9rw.jpg",
+      "https://storage.googleapis.com/webild/users/user_3FvUPWGNNPPM6YThQS6Bj8ckkfW/uploaded-1783069324981-3ek0tysx.jpg"
+    ]
+  },
+  {
+    title: "Apartemen PIK 2",
+    description: "Rental Yield 9%",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/white-business-center-with-beautiful-textures-unique-design-with-interior-staircases_181624-5365.jpg"
+  },
+  {
+    title: "Waterfront Luxury Home",
+    description: "Yield 8.2% / Tahun",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/coral-color-grunge-texture-with-copyspace_24972-244.jpg"
+  },
+  {
+    title: "PIK 2 Ruko Strategis",
+    description: "High ROI Potential",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/low-angle-architectural-structure-city_23-2148798659.jpg"
+  },
+  {
+    title: "Premium Golf Estate",
+    description: "Limited Listing",
+    href: "#",
+    imageSrc: "http://img.b2bpic.net/free-photo/facade-window-colonial-style-bangkok-thailand_1150-10807.jpg"
+  }
+];
+
+type FeatureItem = {
+  title: string;
+  description: string;
+  href: string;
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+interface FeaturesRevealCardsBentoProps {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  items: [FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem];
+  textAnimation: "slide-up" | "fade-blur" | "fade";
+}
+
+const UnitInline = () => {
+  const gridClasses = [
+    "md:col-span-6",
+    "md:col-span-6",
+    "md:col-span-3",
+    "md:col-span-3",
+    "md:col-span-3",
+    "md:col-span-3",
+  ];
+
+  const staggerDelays = [
+    0,
+    0.1,
+    0.2,
+    0.3,
+    0.1,
+    0.2,
+  ];
+
+  return (
+    <section aria-label="Features reveal cards bento section" className="py-20">
+      <div className="flex flex-col gap-8 md:gap-10">
+        <div className="flex flex-col items-center w-content-width mx-auto gap-2">
+          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+            <p>{"Listing Unggulan"}</p>
+          </div>
+
+          <TextAnimation
+            text={"Pilihan Properti Premium"}
+            variant={"slide-up"}
+            gradientText={true}
+            tag="h2"
+            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
+          />
+
+          <TextAnimation
+            text={"Kurasi unit eksklusif di kawasan Pantai Indah Kapuk dengan potensi yield terbaik."}
+            variant={"slide-up"}
+            gradientText={false}
+            tag="p"
+            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+          />
+
+          {(undefined || undefined) && (
+            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary" animationDelay={0.1} />}
+            </div>
+          )}
+        </div>
+
+        <div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-6 gap-3">
+          {items.map((item, index) => (
+            <ScrollReveal key={item.title} variant="fade" delay={staggerDelays[index]} className={cls("col-span-1 group", gridClasses[index])}>
+              <a href={item.href} className="block relative overflow-hidden rounded">
+                <div className="h-80 xl:h-100 2xl:h-120 overflow-hidden">
+                  {item.images ? (
+                    <div className={cls("grid h-full w-full gap-1", item.images.length === 5 ? "grid-cols-5" : "grid-cols-3")}>
+                      {item.images.map((src, i) => (
+                        <ImageOrVideo
+                          key={i}
+                          imageSrc={src}
+                          className="rounded h-full w-full object-cover group-hover:scale-105 transition-transform duration-500"
+                        />
+                      ))}
+                    </div>
+                  ) : (
+                    <ImageOrVideo
+                      imageSrc={item.imageSrc}
+                      videoSrc={item.videoSrc}
+                      className="rounded h-full w-full object-cover group-hover:scale-105 transition-transform duration-500"
+                    />
+                  )}
+                </div>
+                <div className="absolute -inset-x-px -bottom-px h-2/5 backdrop-blur-xl mask-fade-top-overlay" aria-hidden="true" />
+                <div className="absolute inset-x-3 bottom-3 2xl:inset-x-4 2xl:bottom-4 z-10">
+                  <div className="relative flex flex-col gap-1 md:gap-0 md:group-hover:gap-1 p-3 2xl:p-4 transition-all duration-400">
+                    <div className="absolute inset-0 -z-10 card rounded translate-y-0 opacity-100 md:translate-y-full md:opacity-0 transition-all duration-400 ease-out md:group-hover:translate-y-0 md:group-hover:opacity-100" />
+                    <h3 className="text-2xl font-semibold leading-snug text-foreground md:text-white transition-colors duration-400 md:group-hover:text-foreground">
+                      {item.title}
+                    </h3>
+                    <div className="grid grid-rows-[1fr] md:grid-rows-[0fr] transition-all duration-400 ease-out md:group-hover:grid-rows-[1fr]">
+                      <p className="overflow-hidden text-base leading-snug text-foreground opacity-100 md:opacity-0 transition-opacity duration-400 md:group-hover:opacity-100">
+                        {item.description}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default function UnitSection() {
+  return (
+    <div data-webild-section="unit" data-section="unit" id="unit">
+      <UnitInline />
+    </div>
+  );
+}
Author	SHA1	Message	Date
bender	9ec63e21da	Merge version_5_1783181030069 into main Merge version_5_1783181030069 into main	2026-07-04 16:06:52 +00:00
kudinDmitriyUp	9c5bd19b3b	Bob AI: Apply the following revisions while maintaining the establis	2026-07-04 16:06:08 +00:00
bender	126203c9aa	Merge version_4_1783069326980 into main Merge version_4_1783069326980 into main	2026-07-03 09:04:14 +00:00
kudinDmitriyUp	5c22fa9e1a	Bob AI: Added Elegant Homie Home PIK 1 unit with 5 images	2026-07-03 09:03:31 +00:00
bender	e84bb58ce6	Merge version_3_1783068756893 into main Merge version_3_1783068756893 into main	2026-07-03 08:55:29 +00:00
kudinDmitriyUp	9f2b5763dd	Bob AI: Combine 3 images into a single card in Listing Unggulan	2026-07-03 08:54:46 +00:00
bender	13ad4d0021	Merge version_2_1783068151064 into main Merge version_2_1783068151064 into main	2026-07-03 08:44:04 +00:00
kudinDmitriyUp	91ff1dcf76	Bob AI: Update listing unggulan with new images and titles	2026-07-03 08:43:18 +00:00
bender	4453ff25fa	Merge version_1_1783066958084 into main Merge version_1_1783066958084 into main	2026-07-03 08:24:25 +00:00