Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -9,6 +9,7 @@ import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonia
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import TimelineCardStack from '@/components/cardStack/layouts/timelines/TimelineCardStack';
 
 export default function LandingPage() {
   return (
@@ -29,17 +30,13 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Fitur",
+          name: "Fitur",          id: "#fitur"},
-          id: "#fitur",
-        },
         {
-          name: "Analitik",
+          name: "Analitik",          id: "#analitik"},
-          id: "#analitik",
-        },
         {
-          name: "Testimoni",
+          name: "Testimoni",          id: "#testimoni"},
-          id: "#testimoni",
+        {
-        },
+          name: "Tren Sales",          id: "#tren-sales"},
       ]}
       brandName="Syndicate Pro"
     />
@@ -48,100 +45,57 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroSplitTestimonial
       background={{
-        variant: "gradient-bars",
+        variant: "gradient-bars"}}
-      }}
       title="Transformasi Bisnis UMKM dengan AI"
       description="Syndicate Pro AI membantu Anda mengubah data menjadi aksi nyata, mengoptimalkan keuntungan, dan memprediksi masa depan bisnis Anda hari ini."
       testimonials={[
         {
-          name: "Sarah A.",
+          name: "Sarah A.",          handle: "@sarah_fashion",          testimonial: "Syndicate Pro AI benar-benar mengubah cara kami mengelola stok. Efisiensi luar biasa!",          rating: 5,
-          handle: "@sarah_fashion",
+          imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-using-laptop-restaurant_23-2147956341.jpg"},
-          testimonial: "Syndicate Pro AI benar-benar mengubah cara kami mengelola stok. Efisiensi luar biasa!",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-using-laptop-restaurant_23-2147956341.jpg",
-        },
         {
-          name: "Budi K.",
+          name: "Budi K.",          handle: "@budi_toko",          testimonial: "Notifikasi stoknya sangat akurat. Kami tidak pernah kehabisan barang lagi.",          rating: 5,
-          handle: "@budi_toko",
+          imageSrc: "http://img.b2bpic.net/free-photo/happy-caucasian-fair-haired-woman-standing-near-rack-with-dresses-clothes-store-looking-camera-smiling-boutique-customer-shop-assistant-concept_74855-11778.jpg"},
-          testimonial: "Notifikasi stoknya sangat akurat. Kami tidak pernah kehabisan barang lagi.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-caucasian-fair-haired-woman-standing-near-rack-with-dresses-clothes-store-looking-camera-smiling-boutique-customer-shop-assistant-concept_74855-11778.jpg",
-        },
         {
-          name: "Dina R.",
+          name: "Dina R.",          handle: "@dina_fnb",          testimonial: "Fitur AI Visualizer menghemat biaya desainer kami setiap bulan.",          rating: 5,
-          handle: "@dina_fnb",
+          imageSrc: "http://img.b2bpic.net/free-photo/confident-young-businessman-standing-front-wooden-table-with-his-arm-crossed_23-2148087133.jpg"},
-          testimonial: "Fitur AI Visualizer menghemat biaya desainer kami setiap bulan.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/confident-young-businessman-standing-front-wooden-table-with-his-arm-crossed_23-2148087133.jpg",
-        },
         {
-          name: "Eka S.",
+          name: "Eka S.",          handle: "@eka_craft",          testimonial: "Luar biasa! Insight datanya membantu kami memperluas jangkauan pasar.",          rating: 5,
-          handle: "@eka_craft",
+          imageSrc: "http://img.b2bpic.net/free-photo/cropped-man-reading-text-message-his-smartphone-standing-office-building_1098-19118.jpg"},
-          testimonial: "Luar biasa! Insight datanya membantu kami memperluas jangkauan pasar.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/cropped-man-reading-text-message-his-smartphone-standing-office-building_1098-19118.jpg",
-        },
         {
-          name: "Fani W.",
+          name: "Fani W.",          handle: "@fani_books",          testimonial: "Manajemen toko menjadi jauh lebih mudah dengan automasi yang disediakan.",          rating: 5,
-          handle: "@fani_books",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-entrepreneur-cafe-owner-standing-door-entrance-smiling-looking_1258-199348.jpg"},
-          testimonial: "Manajemen toko menjadi jauh lebih mudah dengan automasi yang disediakan.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-entrepreneur-cafe-owner-standing-door-entrance-smiling-looking_1258-199348.jpg",
-        },
       ]}
       buttons={[
         {
-          text: "Mulai Gratis",
+          text: "Mulai Gratis",          href: "#"},
-          href: "#",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241199.jpg?_wi=1"
       imageAlt="Syndicate Pro AI Dashboard"
       mediaAnimation="slide-up"
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/smiling-businessman-using-laptop-restaurant_23-2147956341.jpg",
+          src: "http://img.b2bpic.net/free-photo/smiling-businessman-using-laptop-restaurant_23-2147956341.jpg",          alt: "User 1"},
-          alt: "User 1",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/happy-caucasian-fair-haired-woman-standing-near-rack-with-dresses-clothes-store-looking-camera-smiling-boutique-customer-shop-assistant-concept_74855-11778.jpg",
+          src: "http://img.b2bpic.net/free-photo/happy-caucasian-fair-haired-woman-standing-near-rack-with-dresses-clothes-store-looking-camera-smiling-boutique-customer-shop-assistant-concept_74855-11778.jpg",          alt: "User 2"},
-          alt: "User 2",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/confident-young-businessman-standing-front-wooden-table-with-his-arm-crossed_23-2148087133.jpg",
+          src: "http://img.b2bpic.net/free-photo/confident-young-businessman-standing-front-wooden-table-with-his-arm-crossed_23-2148087133.jpg",          alt: "User 3"},
-          alt: "User 3",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/cropped-man-reading-text-message-his-smartphone-standing-office-building_1098-19118.jpg",
+          src: "http://img.b2bpic.net/free-photo/cropped-man-reading-text-message-his-smartphone-standing-office-building_1098-19118.jpg",          alt: "User 4"},
-          alt: "User 4",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/portrait-young-female-entrepreneur-cafe-owner-standing-door-entrance-smiling-looking_1258-199348.jpg",
+          src: "http://img.b2bpic.net/free-photo/portrait-young-female-entrepreneur-cafe-owner-standing-door-entrance-smiling-looking_1258-199348.jpg",          alt: "User 5"},
-          alt: "User 5",
-        },
       ]}
       avatarText="Dipercaya oleh 500+ UMKM"
       marqueeItems={[
         {
-          type: "text",
+          type: "text",          text: "Pertumbuhan Bisnis"},
-          text: "Pertumbuhan Bisnis",
-        },
         {
-          type: "text",
+          type: "text",          text: "Efisiensi Operasional"},
-          text: "Efisiensi Operasional",
-        },
         {
-          type: "text",
+          type: "text",          text: "Prediksi Pasar"},
-          text: "Prediksi Pasar",
-        },
         {
-          type: "text",
+          type: "text",          text: "Optimasi Stok"},
-          text: "Optimasi Stok",
-        },
         {
-          type: "text",
+          type: "text",          text: "Automasi Pemasaran"},
-          text: "Automasi Pemasaran",
-        },
       ]}
     />
   </div>
@@ -153,32 +107,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "f1",
+          id: "f1",          title: "Trend Scouting",          tags: [
-          title: "Trend Scouting",
+            "Prediktif",            "Peluang"],
-          tags: [
+          imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg?_wi=1"},
-            "Prediktif",
-            "Peluang",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg?_wi=1",
-        },
         {
-          id: "f2",
+          id: "f2",          title: "AI Copywriter",          tags: [
-          title: "AI Copywriter",
+            "Pemasaran",            "Otomatis"],
-          tags: [
+          imageSrc: "http://img.b2bpic.net/free-photo/team-working-together-project_23-2149325450.jpg?_wi=1"},
-            "Pemasaran",
-            "Otomatis",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/team-working-together-project_23-2149325450.jpg?_wi=1",
-        },
         {
-          id: "f3",
+          id: "f3",          title: "StokCerdas AI",          tags: [
-          title: "StokCerdas AI",
+            "Inventaris",            "Efisiensi"],
-          tags: [
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-manager-working-with-report-data_1262-3723.jpg?_wi=1"},
-            "Inventaris",
-            "Efisiensi",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-manager-working-with-report-data_1262-3723.jpg?_wi=1",
-        },
       ]}
       title="Fitur Unggulan Kami"
       description="Solusi cerdas untuk setiap masalah bisnis Anda."
@@ -192,31 +131,16 @@ export default function LandingPage() {
       useInvertedBackground={false}
       metrics={[
         {
-          id: "m1",
+          id: "m1",          value: "35%",          title: "Prediksi Lonjakan Permintaan",          items: [
-          value: "35%",
+            "Mingguan",            "Akurasi Tinggi"],
-          title: "Prediksi Lonjakan Permintaan",
-          items: [
-            "Mingguan",
-            "Akurasi Tinggi",
-          ],
         },
         {
-          id: "m2",
+          id: "m2",          value: "2x",          title: "Efisiensi Operasional",          items: [
-          value: "2x",
+            "CS Cepat",            "Respon AI"],
-          title: "Efisiensi Operasional",
-          items: [
-            "CS Cepat",
-            "Respon AI",
-          ],
         },
         {
-          id: "m3",
+          id: "m3",          value: "100%",          title: "Automasi Pemasaran",          items: [
-          value: "100%",
+            "Visual",            "Caption"],
-          title: "Automasi Pemasaran",
-          items: [
-            "Visual",
-            "Caption",
-          ],
         },
       ]}
       title="Analitik Proaktif"
@@ -224,66 +148,35 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="tren-sales" data-section="tren-sales">
+      <TimelineCardStack
+      title="Analisis Tren Penjualan"
+      description="Pantau performa bisnis Anda melalui visualisasi data terkini dan dapatkan rekomendasi strategis untuk meningkatkan keuntungan."
+      textboxLayout="split"
+      useInvertedBackground={true}
+      >
+        {/* Content placeholder for sales trends visual component */}
+        <div className="w-full h-96 flex items-center justify-center bg-gray-50 rounded-2xl border-2 border-dashed border-gray-300">
+          <p className="text-gray-500">Grafik Tren Penjualan & Dashboard Insight akan muncul di sini.</p>
+        </div>
+      </TimelineCardStack>
+  </div>
+
   <div id="testimoni" data-section="testimoni">
       <TestimonialCardFive
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "t1",
+          id: "t1",          name: "Sarah A.",          date: "12 Jan 2025",          title: "CEO Fashion",          quote: "Sangat membantu!",          tag: "SaaS",          avatarSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-using-laptop-restaurant_23-2147956341.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241199.jpg?_wi=2",          imageAlt: "saas dashboard interface dark mode"},
-          name: "Sarah A.",
-          date: "12 Jan 2025",
-          title: "CEO Fashion",
-          quote: "Sangat membantu!",
-          tag: "SaaS",
-          avatarSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-using-laptop-restaurant_23-2147956341.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241199.jpg?_wi=2",
-          imageAlt: "saas dashboard interface dark mode",
-        },
         {
-          id: "t2",
+          id: "t2",          name: "Budi K.",          date: "15 Jan 2025",          title: "Toko Retail",          quote: "AI yang cerdas.",          tag: "Retail",          avatarSrc: "http://img.b2bpic.net/free-photo/happy-caucasian-fair-haired-woman-standing-near-rack-with-dresses-clothes-store-looking-camera-smiling-boutique-customer-shop-assistant-concept_74855-11778.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg?_wi=2",          imageAlt: "ai technology concept business"},
-          name: "Budi K.",
-          date: "15 Jan 2025",
-          title: "Toko Retail",
-          quote: "AI yang cerdas.",
-          tag: "Retail",
-          avatarSrc: "http://img.b2bpic.net/free-photo/happy-caucasian-fair-haired-woman-standing-near-rack-with-dresses-clothes-store-looking-camera-smiling-boutique-customer-shop-assistant-concept_74855-11778.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg?_wi=2",
-          imageAlt: "ai technology concept business",
-        },
         {
-          id: "t3",
+          id: "t3",          name: "Dina R.",          date: "20 Jan 2025",          title: "Kuliner",          quote: "Hemat waktu.",          tag: "F&B",          avatarSrc: "http://img.b2bpic.net/free-photo/confident-young-businessman-standing-front-wooden-table-with-his-arm-crossed_23-2148087133.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/team-working-together-project_23-2149325450.jpg?_wi=2",          imageAlt: "content marketing social media ui"},
-          name: "Dina R.",
-          date: "20 Jan 2025",
-          title: "Kuliner",
-          quote: "Hemat waktu.",
-          tag: "F&B",
-          avatarSrc: "http://img.b2bpic.net/free-photo/confident-young-businessman-standing-front-wooden-table-with-his-arm-crossed_23-2148087133.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/team-working-together-project_23-2149325450.jpg?_wi=2",
-          imageAlt: "content marketing social media ui",
-        },
         {
-          id: "t4",
+          id: "t4",          name: "Eka S.",          date: "22 Jan 2025",          title: "Kerajinan",          quote: "Sangat inovatif.",          tag: "Arts",          avatarSrc: "http://img.b2bpic.net/free-photo/cropped-man-reading-text-message-his-smartphone-standing-office-building_1098-19118.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-manager-working-with-report-data_1262-3723.jpg?_wi=2",          imageAlt: "inventory management system dashboard"},
-          name: "Eka S.",
-          date: "22 Jan 2025",
-          title: "Kerajinan",
-          quote: "Sangat inovatif.",
-          tag: "Arts",
-          avatarSrc: "http://img.b2bpic.net/free-photo/cropped-man-reading-text-message-his-smartphone-standing-office-building_1098-19118.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-manager-working-with-report-data_1262-3723.jpg?_wi=2",
-          imageAlt: "inventory management system dashboard",
-        },
         {
-          id: "t5",
+          id: "t5",          name: "Fani W.",          date: "25 Jan 2025",          title: "Toko Buku",          quote: "Meningkatkan margin.",          tag: "Retail",          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-entrepreneur-cafe-owner-standing-door-entrance-smiling-looking_1258-199348.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg?_wi=1",          imageAlt: "profit margins financial chart"},
-          name: "Fani W.",
-          date: "25 Jan 2025",
-          title: "Toko Buku",
-          quote: "Meningkatkan margin.",
-          tag: "Retail",
-          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-entrepreneur-cafe-owner-standing-door-entrance-smiling-looking_1258-199348.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg?_wi=1",
-          imageAlt: "profit margins financial chart",
-        },
       ]}
       title="Apa Kata Mereka"
       description="UMKM yang telah bertumbuh bersama Syndicate Pro AI."
@@ -297,24 +190,16 @@ export default function LandingPage() {
       description="Mari konsultasikan bisnis Anda hari ini."
       inputs={[
         {
-          name: "name",
+          name: "name",          type: "text",          placeholder: "Nama Anda",          required: true,
-          type: "text",
-          placeholder: "Nama Anda",
-          required: true,
         },
         {
-          name: "email",
+          name: "email",          type: "email",          placeholder: "Email Anda",          required: true,
-          type: "email",
-          placeholder: "Email Anda",
-          required: true,
         },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg?_wi=2"
       mediaAnimation="slide-up"
       textarea={{
-        name: "message",
+        name: "message",        placeholder: "Ceritakan kebutuhan bisnis Anda",        rows: 4,
-        placeholder: "Ceritakan kebutuhan bisnis Anda",
-        rows: 4,
       }}
     />
   </div>
@@ -324,42 +209,29 @@ export default function LandingPage() {
       imageSrc="http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241199.jpg?_wi=3"
       columns={[
         {
-          title: "Perusahaan",
+          title: "Perusahaan",          items: [
-          items: [
             {
-              label: "Tentang",
+              label: "Tentang",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Karir",
+              label: "Karir",              href: "#"},
-              href: "#",
-            },
           ],
         },
         {
-          title: "Produk",
+          title: "Produk",          items: [
-          items: [
             {
-              label: "Fitur",
+              label: "Fitur",              href: "#fitur"},
-              href: "#fitur",
-            },
             {
-              label: "Analitik",
+              label: "Analitik",              href: "#analitik"},
-              href: "#analitik",
+            {
-            },
+              label: "Tren Sales",              href: "#tren-sales"},
           ],
         },
         {
-          title: "Legal",
+          title: "Legal",          items: [
-          items: [
             {
-              label: "Privasi",
+              label: "Privasi",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Ketentuan",
+              label: "Ketentuan",              href: "#"},
-              href: "#",
-            },
           ],
         },
       ]}