From c9f7ce24edeb5cb8dcd2ce232d8763ca1368a45d Mon Sep 17 00:00:00 2001
From: ArraysID <arraysdotid@gmail.com>
Date: Sat, 10 May 2025 15:19:54 +0700
Subject: [PATCH] feat: implement CallToAction section with dynamic data
 fetching and UI integration

---
 .../(frontend)/_components/call-to-action.tsx | 29 +++++++----
 apps/landing/src/app/(frontend)/page.tsx      |  5 +-
 .../src/collections/CallToActionSection.ts    | 50 +++++++++++++++++++
 .../src/collections/CommunitiesSection.ts     |  2 +-
 apps/landing/src/collections/HeroSection.ts   |  2 +-
 apps/landing/src/payload-types.ts             | 34 +++++++++++++
 apps/landing/src/payload.config.ts            |  2 +
 .../get-globals-call-to-action-section.ts     |  7 +++
 8 files changed, 119 insertions(+), 12 deletions(-)
 create mode 100644 apps/landing/src/collections/CallToActionSection.ts
 create mode 100644 apps/landing/src/services/get-globals-call-to-action-section.ts

diff --git a/apps/landing/src/app/(frontend)/_components/call-to-action.tsx b/apps/landing/src/app/(frontend)/_components/call-to-action.tsx
index 0ffc74a..a6ee70c 100644
--- a/apps/landing/src/app/(frontend)/_components/call-to-action.tsx
+++ b/apps/landing/src/app/(frontend)/_components/call-to-action.tsx
@@ -1,10 +1,21 @@
 'use client';
 
 import { Button } from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { CallToActionSection } from 'apps/landing/src/payload-types';
 import { motion, useInView } from 'framer-motion';
 import { useRef } from 'react';
 
-export function CallToAction() {
+export function CallToAction(props: CallToActionSection) {
+  const {
+    title,
+    highlightedTitle,
+    subtitle,
+    primaryButtonLabel,
+    primaryButtonLink,
+    secondaryButtonLabel,
+    secondaryButtonLink,
+  } = props;
+
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, amount: 0.2 });
 
@@ -28,30 +39,30 @@ export function CallToAction() {
 
             <div className="relative z-10 text-center">
               <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
-                Siap Menjadi{' '}
+                {title}{' '}
                 <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
-                  Programmer Handal?
+                  {highlightedTitle}
                 </span>
               </h2>
               <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-                Bergabunglah dengan komunitas IMPHNEN sekarang dan mulai
-                perjalanan programming mu dengan cara yang menyenangkan!
+                {subtitle}
               </p>
 
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
                 <Button
                   size="lg"
-                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 
-font-bold text-black hover:text-white cursor-pointer"
+                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 font-bold text-black hover:text-white cursor-pointer"
+                  onClick={() => window.open(primaryButtonLink, '_blank')}
                 >
-                  Gabung Discord
+                  {primaryButtonLabel}
                 </Button>
                 <Button
                   size="lg"
                   variant="outline"
                   className="border-primary hover:bg-primary/10"
+                  onClick={() => window.open(secondaryButtonLink, '_blank')}
                 >
-                  Join Facebook Group
+                  {secondaryButtonLabel}
                 </Button>
               </div>
             </div>
diff --git a/apps/landing/src/app/(frontend)/page.tsx b/apps/landing/src/app/(frontend)/page.tsx
index a45ae0d..e50e601 100644
--- a/apps/landing/src/app/(frontend)/page.tsx
+++ b/apps/landing/src/app/(frontend)/page.tsx
@@ -1,3 +1,4 @@
+import { getGlobalsCallToActionSection } from '../../services/get-globals-call-to-action-section';
 import { getGlobalsCommunitiesSection } from '../../services/get-globals-communitues-section';
 import { getGlobalsFeaturesSection } from '../../services/get-globals-features-section';
 import { getGlobalsHeroSection } from '../../services/get-globals-hero-section';
@@ -19,12 +20,14 @@ export default async function Page() {
     communitiesData,
     learningResourcesData,
     testimonialsData,
+    callToActionData,
   ] = await Promise.all([
     getGlobalsHeroSection(),
     getGlobalsFeaturesSection(),
     getGlobalsCommunitiesSection(),
     getGlobalsLearningResourcesSection(),
     getGlobalsTestimonialsSection(),
+    getGlobalsCallToActionSection(),
   ]);
 
   return (
@@ -34,7 +37,7 @@ export default async function Page() {
       <Community {...communitiesData} />
       <LearningResources {...learningResourcesData} />
       <Testimonials {...testimonialsData} />
-      <CallToAction />
+      <CallToAction {...callToActionData} />
     </>
   );
 }
diff --git a/apps/landing/src/collections/CallToActionSection.ts b/apps/landing/src/collections/CallToActionSection.ts
new file mode 100644
index 0000000..67a5691
--- /dev/null
+++ b/apps/landing/src/collections/CallToActionSection.ts
@@ -0,0 +1,50 @@
+import { GlobalConfig } from 'payload';
+
+export const CallToActionSection: GlobalConfig = {
+  slug: 'call-to-action-section',
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+      defaultValue: 'Siap Menjadi',
+    },
+    {
+      name: 'highlightedTitle',
+      type: 'text',
+      required: true,
+      defaultValue: 'Programmer Handal?',
+    },
+    {
+      name: 'subtitle',
+      type: 'textarea',
+      required: true,
+      defaultValue:
+        'Bergabunglah dengan komunitas IMPHNEN sekarang dan mulai perjalanan programming mu dengan cara yang menyenangkan!',
+    },
+    {
+      name: 'primaryButtonLabel',
+      type: 'text',
+      required: true,
+      defaultValue: 'Gabung Discord',
+    },
+    {
+      name: 'primaryButtonLink',
+      type: 'text',
+      required: true,
+      defaultValue: 'https://discord.gg/imphnen',
+    },
+    {
+      name: 'secondaryButtonLabel',
+      type: 'text',
+      required: true,
+      defaultValue: 'Join Facebook Group',
+    },
+    {
+      name: 'secondaryButtonLink',
+      type: 'text',
+      required: true,
+      defaultValue: 'https://facebook.com/groups/programmerhandal',
+    },
+  ],
+};
diff --git a/apps/landing/src/collections/CommunitiesSection.ts b/apps/landing/src/collections/CommunitiesSection.ts
index 56ae7db..1c04430 100644
--- a/apps/landing/src/collections/CommunitiesSection.ts
+++ b/apps/landing/src/collections/CommunitiesSection.ts
@@ -15,7 +15,7 @@ export const CommunitiesSection: GlobalConfig = {
           description:
             'Bergabunglah dengan grup Facebook kami untuk diskusi santai dan berbagi artikel menarik.',
           buttonText: 'Gabung Sekarang',
-          buttonLink: 'https://facebook.com/groups/1032515944638255',
+          buttonLink: 'https://facebook.com/groups/programmerhandal',
         },
         {
           iconName: 'tabler:brand-instagram',
diff --git a/apps/landing/src/collections/HeroSection.ts b/apps/landing/src/collections/HeroSection.ts
index 6ba0109..da1df61 100644
--- a/apps/landing/src/collections/HeroSection.ts
+++ b/apps/landing/src/collections/HeroSection.ts
@@ -57,7 +57,7 @@ export const HeroSection: GlobalConfig = {
           label: 'Primary Button URL',
           type: 'text',
           required: true,
-          defaultValue: 'https://web.facebook.com/groups/1032515944638255',
+          defaultValue: 'https://facebook.com/groups/programmerhandal',
         },
         {
           name: 'secondaryLabel',
diff --git a/apps/landing/src/payload-types.ts b/apps/landing/src/payload-types.ts
index ca962da..4e4d9f6 100644
--- a/apps/landing/src/payload-types.ts
+++ b/apps/landing/src/payload-types.ts
@@ -90,6 +90,7 @@ export interface Config {
     'communities-section': CommunitiesSection;
     'learning-resources-section': LearningResourcesSection;
     'testimonials-section': TestimonialsSection;
+    'call-to-action-section': CallToActionSection;
   };
   globalsSelect: {
     'hero-section': HeroSectionSelect<false> | HeroSectionSelect<true>;
@@ -97,6 +98,7 @@ export interface Config {
     'communities-section': CommunitiesSectionSelect<false> | CommunitiesSectionSelect<true>;
     'learning-resources-section': LearningResourcesSectionSelect<false> | LearningResourcesSectionSelect<true>;
     'testimonials-section': TestimonialsSectionSelect<false> | TestimonialsSectionSelect<true>;
+    'call-to-action-section': CallToActionSectionSelect<false> | CallToActionSectionSelect<true>;
   };
   locale: null;
   user: User & {
@@ -408,6 +410,22 @@ export interface TestimonialsSection {
   updatedAt?: string | null;
   createdAt?: string | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "call-to-action-section".
+ */
+export interface CallToActionSection {
+  id: number;
+  title: string;
+  highlightedTitle: string;
+  subtitle: string;
+  primaryButtonLabel: string;
+  primaryButtonLink: string;
+  secondaryButtonLabel: string;
+  secondaryButtonLink: string;
+  updatedAt?: string | null;
+  createdAt?: string | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "hero-section_select".
@@ -543,6 +561,22 @@ export interface TestimonialsSectionSelect<T extends boolean = true> {
   createdAt?: T;
   globalType?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "call-to-action-section_select".
+ */
+export interface CallToActionSectionSelect<T extends boolean = true> {
+  title?: T;
+  highlightedTitle?: T;
+  subtitle?: T;
+  primaryButtonLabel?: T;
+  primaryButtonLink?: T;
+  secondaryButtonLabel?: T;
+  secondaryButtonLink?: T;
+  updatedAt?: T;
+  createdAt?: T;
+  globalType?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "auth".
diff --git a/apps/landing/src/payload.config.ts b/apps/landing/src/payload.config.ts
index 215958e..3e26c96 100644
--- a/apps/landing/src/payload.config.ts
+++ b/apps/landing/src/payload.config.ts
@@ -8,6 +8,7 @@ import { buildConfig } from 'payload';
 import sharp from 'sharp';
 import { fileURLToPath } from 'url';
 
+import { CallToActionSection } from './collections/CallToActionSection';
 import { CommunitiesSection } from './collections/CommunitiesSection';
 import { FeaturesSection } from './collections/FeaturesSection';
 import { HeroSection } from './collections/HeroSection';
@@ -39,6 +40,7 @@ export default buildConfig({
     CommunitiesSection,
     LearningResourcesSection,
     TestimonialsSection,
+    CallToActionSection
   ],
   editor: lexicalEditor(),
   secret: process.env.CMS_SECRET || '',
diff --git a/apps/landing/src/services/get-globals-call-to-action-section.ts b/apps/landing/src/services/get-globals-call-to-action-section.ts
new file mode 100644
index 0000000..c742304
--- /dev/null
+++ b/apps/landing/src/services/get-globals-call-to-action-section.ts
@@ -0,0 +1,7 @@
+import { payload } from '../lib/payload';
+
+export async function getGlobalsCallToActionSection() {
+  return await payload.findGlobal({
+    slug: 'call-to-action-section',
+  });
+}