feat: simplify joinTitle rendering in Testimonials section

.env.example

@@ -1,14 +1,9 @@
-# API Endpoint
 VITE_API_URL=
 
-# Payload CMS Secret Key (minimum 32 characters)
+CMS_SECRET=
-CMS_SECRET=your-very-long-secret-key
+CMS_POSTGRES_URL=
 
-# PostgreSQL Connection String
+CMS_STORAGE_ENDPOINT=
-CMS_POSTGRES_URL=postgres://user:password@host:port/database
+CMS_STORAGE_ACCESS_KEY_ID=
-
+CMS_STORAGE_SECRET_ACCESS_KEY=
-# S3 Storage Configuration
-CMS_STORAGE_ENDPOINT=https://your-s3-endpoint.com
-CMS_STORAGE_ACCESS_KEY_ID=your-access-key-id
-CMS_STORAGE_SECRET_ACCESS_KEY=your-secret-access-key
 CMS_STORAGE_REGION=ap-southeast-1

apps/landing/next.config.js

@@ -1,15 +1,20 @@
+//@ts-check
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { composePlugins, withNx } = require('@nx/next');
 const { withPayload } = require('@payloadcms/next/withPayload');
 
-/** @type {import('@nx/next/plugins/with-nx').WithNxOptions} */
+/**
+ * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
+ **/
 const nextConfig = {
-  nx: { svgr: false },
+  nx: {
-  sassOptions: {
+    // Set this to true if you would like to to use SVGR
-    quietDeps: true,
+    // See: https://github.com/gregberge/svgr
-    logger: {
+    svgr: false,
-      warn: () => {},
-    },
   },
 };
 
-module.exports = composePlugins(withNx, withPayload)(nextConfig);
+const plugins = [withNx, withPayload];
+
+module.exports = composePlugins(...plugins)(nextConfig);

apps/landing/src/app/(frontend)/_components/call-to-action.tsx

@@ -1,21 +1,10 @@
 '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(props: CallToActionSection) {
+export function CallToAction() {
-  const {
-    title,
-    highlightedTitle,
-    subtitle,
-    primaryButtonLabel,
-    primaryButtonLink,
-    secondaryButtonLabel,
-    secondaryButtonLink,
-  } = props;
-
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, amount: 0.2 });
 
@@ -39,30 +28,30 @@ export function CallToAction(props: CallToActionSection) {
 
             <div className="relative z-10 text-center">
               <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
-                {title}{' '}
+                Siap Menjadi{' '}
                 <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
-                  {highlightedTitle}
+                  Programmer Handal?
                 </span>
               </h2>
               <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-                {subtitle}
+                Bergabunglah dengan komunitas IMPHNEN sekarang dan mulai
+                perjalanan programming mu dengan cara yang menyenangkan!
               </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 
-                  onClick={() => window.open(primaryButtonLink, '_blank')}
+font-bold text-black hover:text-white cursor-pointer"
                 >
-                  {primaryButtonLabel}
+                  Gabung Discord
                 </Button>
                 <Button
                   size="lg"
                   variant="outline"
                   className="border-primary hover:bg-primary/10"
-                  onClick={() => window.open(secondaryButtonLink, '_blank')}
                 >
-                  {secondaryButtonLabel}
+                  Join Facebook Group
                 </Button>
               </div>
             </div>

apps/landing/src/app/(frontend)/_components/community.tsx

@@ -77,13 +77,14 @@ export function Community(props: CommunitiesSection) {
                 </div>
                 <h3 className="mb-2 text-xl font-bold">{c.title}</h3>
                 <p className="mb-6 text-muted-foreground">{c.description}</p>
-                <Button
+                <a href={c.buttonLink} target="_blank">
-                  variant="outline"
+                  <Button
-                  className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300"
+                    variant="outline"
-                  onClick={() => window.open(c.buttonLink, '_blank')}
+                    className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300"
-                >
+                  >
-                  {c.buttonText}
+                    {c.buttonText}
-                </Button>
+                  </Button>
+                </a>
               </div>
               <div className="absolute -bottom-1 -right-1 w-20 h-20 bg-gradient-to-tl from-primary/20 to-transparent rounded-tl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
             </motion.div>

apps/landing/src/app/(frontend)/_components/header.tsx

@@ -35,15 +35,13 @@ export function Header() {
       <div className="container flex h-16 items-center justify-between">
         <div className="flex items-center gap-2">
           <div className="relative overflow-hidden rounded">
-            <Link href="/">
+            <Image
-              <Image
+              src="/logo.png"
-                src="/logo.png"
+              alt="IMPHNEN Logo"
-                alt="IMPHNEN"
+              width={64}
-                width={64}
+              height={64}
-                height={64}
+              className="object-cover cursor-pointer"
-                className="object-cover"
+            />
-              />
-            </Link>
           </div>
         </div>
 
@@ -84,13 +82,7 @@ export function Header() {
 
         <div className="flex items-center gap-4">
           <SimpleThemeToggle />
-
+          <Button className="hidden md:flex bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer">
-          <Button
-            className="hidden md:flex bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer"
-            onClick={() =>
-              window.open('https://discord.com/invite/imphnen', '_blank')
-            }
-          >
             Gabung Discord
           </Button>
 

apps/landing/src/app/(frontend)/_components/hero.tsx

@@ -69,7 +69,7 @@ export function Hero(props: HeroSection) {
             </div>
 
             <div className="space-y-4">
-              <h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70">
+              <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70">
                 {title} <br />
                 <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
                   {highlight}
@@ -80,26 +80,29 @@ export function Hero(props: HeroSection) {
               </p>
             </div>
 
-            <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
+            <div className="flex flex-col sm:flex-row gap-4">
-              <Button
+              <a href={buttons.primaryUrl} target="_blank">
-                size="lg"
+                <Button
-                className="w-full sm:w-auto bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer"
+                  size="lg"
-                onClick={() => window.open(buttons.primaryUrl, '_blank')}
+                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 
-              >
+font-bold text-black hover:text-white cursor-pointer"
-                {buttons.primaryLabel}
+                >
-              </Button>
+                  {buttons.primaryLabel}
-              <Button
+                </Button>
-                size="lg"
+              </a>
-                variant="outline"
+              <a href={buttons.secondaryUrl} target="_blank">
-                className="w-full sm:w-auto group relative overflow-hidden border-primary"
+                <Button
-                onClick={() => window.open(buttons.secondaryUrl, '_blank')}
+                  size="lg"
-              >
+                  variant="outline"
-                <span className="absolute inset-0 bg-gradient-to-r from-primary/10 to-blue-400/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
+                  className="group relative overflow-hidden border-primary"
-                <span className="relative">{buttons.secondaryLabel}</span>
+                >
-              </Button>
+                  <span className="absolute inset-0 bg-gradient-to-r from-primary/10 to-blue-400/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
+                  <span className="relative">{buttons.secondaryLabel}</span>
+                </Button>
+              </a>
             </div>
 
-            <div className="flex flex-wrap justify-center gap-6 sm:gap-8">
+            <div className="flex items-center gap-8">
               {stats?.map(({ value, label }, i) => (
                 <Fragment key={i}>
                   <div className="flex flex-col items-center">
@@ -109,7 +112,7 @@ export function Hero(props: HeroSection) {
                     <div className="text-xs text-muted-foreground">{label}</div>
                   </div>
                   {i < stats.length - 1 && (
-                    <div className="hidden sm:block h-10 border-r border-border mx-4" />
+                    <div className="h-10 border-r border-border mx-4" />
                   )}
                 </Fragment>
               ))}
@@ -117,7 +120,7 @@ export function Hero(props: HeroSection) {
           </motion.div>
 
           <motion.div
-            className="relative w-full lg:w-auto mx-auto lg:ml-auto"
+            className="relative mx-auto lg:ml-auto"
             initial={{ opacity: 0, scale: 0.9 }}
             animate={{ opacity: 1, scale: 1 }}
             transition={{ duration: 0.5, delay: 0.2 }}

apps/landing/src/app/(frontend)/_components/learning-resources.tsx

@@ -78,15 +78,15 @@ export function LearningResources(props: LearningResourcesSection) {
                 </div>
                 <h3 className="mb-2 text-xl font-bold">{r.title}</h3>
                 <p className="mb-6 text-muted-foreground">{r.description}</p>
-
+                <a href={r.buttonLink} target="_blank">
-                <Button
+                  <Button
-                  variant="link"
+                    variant="link"
-                  className="p-0 h-auto font-medium text-primary hover:text-primary/80"
+                    className="p-0 h-auto font-medium text-primary hover:text-primary/80"
-                  onClick={() => window.open(r.buttonLink, '_blank')}
+                  >
-                >
+                    {r.buttonText}
-                  {r.buttonText}
+                    <Icon icon="tabler:arrow-right" className="h-6 w-6" />
-                  <Icon icon="tabler:arrow-right" className="h-6 w-6" />
+                  </Button>
-                </Button>
+                </a>
               </div>
               <div className="absolute -bottom-32 -right-32 w-64 h-64 bg-gradient-to-tl from-primary/10 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 group-hover:-translate-y-10 group-hover:-translate-x-10" />
             </motion.div>
@@ -110,22 +110,16 @@ export function LearningResources(props: LearningResourcesSection) {
                 {featured.description}
               </p>
               <div className="flex flex-wrap gap-4">
-                <Button
+                <a href={featured.primaryButtonLink} target="_blank">
-                  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"
+                  <Button 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={() =>
+                    {featured.primaryButtonText}
-                    window.open(featured.primaryButtonLink, '_blank')
+                  </Button>
-                  }
+                </a>
-                >
+                <a href={featured.secondaryButtonLink} target="_blank">
-                  {featured.primaryButtonText}
+                  <Button variant="outline">
-                </Button>
+                    {featured.secondaryButtonText}
-                <Button
+                  </Button>
-                  variant="outline"
+                </a>
-                  onClick={() =>
-                    window.open(featured.secondaryButtonLink, '_blank')
-                  }
-                >
-                  {featured.secondaryButtonText}
-                </Button>
               </div>
             </div>
             <div className="relative h-64 md:h-auto">

apps/landing/src/app/(frontend)/page.tsx

@@ -1,4 +1,3 @@
-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';
@@ -20,14 +19,12 @@ export default async function Page() {
     communitiesData,
     learningResourcesData,
     testimonialsData,
-    callToActionData,
   ] = await Promise.all([
     getGlobalsHeroSection(),
     getGlobalsFeaturesSection(),
     getGlobalsCommunitiesSection(),
     getGlobalsLearningResourcesSection(),
     getGlobalsTestimonialsSection(),
-    getGlobalsCallToActionSection(),
   ]);
 
   return (
@@ -37,7 +34,7 @@ export default async function Page() {
       <Community {...communitiesData} />
       <LearningResources {...learningResourcesData} />
       <Testimonials {...testimonialsData} />
-      <CallToAction {...callToActionData} />
+      <CallToAction />
     </>
   );
 }

apps/landing/src/collections/CallToActionSection.ts

@@ -1,51 +0,0 @@
-import { GlobalConfig } from 'payload';
-
-export const CallToActionSection: GlobalConfig = {
-  slug: 'call-to-action-section',
-  label: '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',
-    },
-  ],
-};

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/programmerhandal',
+          buttonLink: 'https://facebook.com/groups/1032515944638255',
         },
         {
           iconName: 'tabler:brand-instagram',

apps/landing/src/collections/HeroSection.ts

@@ -57,7 +57,7 @@ export const HeroSection: GlobalConfig = {
           label: 'Primary Button URL',
           type: 'text',
           required: true,
-          defaultValue: 'https://facebook.com/groups/programmerhandal',
+          defaultValue: 'https://web.facebook.com/groups/1032515944638255',
         },
         {
           name: 'secondaryLabel',

apps/landing/src/payload-types.ts

@@ -90,7 +90,6 @@ 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>;
@@ -98,7 +97,6 @@ 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 & {
@@ -410,22 +408,6 @@ 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".
@@ -561,22 +543,6 @@ 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".

apps/landing/src/payload.config.ts

@@ -8,7 +8,6 @@ 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';
@@ -40,7 +39,6 @@ export default buildConfig({
     CommunitiesSection,
     LearningResourcesSection,
     TestimonialsSection,
-    CallToActionSection,
   ],
   editor: lexicalEditor(),
   secret: process.env.CMS_SECRET || '',

apps/landing/src/services/get-globals-call-to-action-section.ts

@@ -1,7 +0,0 @@
-import { payload } from '../lib/payload';
-
-export async function getGlobalsCallToActionSection() {
-  return await payload.findGlobal({
-    slug: 'call-to-action-section',
-  });
-}