feat: change all public page to public dir

* fix: hero section responsiveness

* fix: adjust max-width for hero section on smaller screens

* fix: increase title font size in hero section

.env.example

@@ -1 +1,14 @@
-VITE_API_URL=https://api.example.com
+# API Endpoint
+VITE_API_URL=
+
+# Payload CMS Secret Key (minimum 32 characters)
+CMS_SECRET=your-very-long-secret-key
+
+# PostgreSQL Connection String
+CMS_POSTGRES_URL=postgres://user:password@host:port/database
+
+# 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

.github/workflows/test-build.yml

@@ -24,5 +24,14 @@ jobs:
       - name: Install dependencies
         run: npm install
 
+      - name: Set env vars
+        run: |
+          echo "CMS_SECRET=${{ secrets.CMS_SECRET }}" >> $GITHUB_ENV
+          echo "CMS_STORAGE_REGION=${{ secrets.CMS_STORAGE_REGION }}" >> $GITHUB_ENV
+          echo "CMS_STORAGE_ENDPOINT=${{ secrets.CMS_STORAGE_ENDPOINT }}" >> $GITHUB_ENV
+          echo "CMS_STORAGE_ACCESS_KEY_ID=${{ secrets.CMS_STORAGE_ACCESS_KEY_ID }}" >> $GITHUB_ENV
+          echo "CMS_STORAGE_SECRET_ACCESS_KEY=${{ secrets.CMS_STORAGE_SECRET_ACCESS_KEY }}" >> $GITHUB_ENV
+          echo "CMS_POSTGRES_URL=${{ secrets.CMS_POSTGRES_URL }}" >> $GITHUB_ENV
+
       - name: Nx Build
         run: npx nx run-many --target=build --all

apps/landing/next.config.js

@@ -1,22 +1,15 @@
-//@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: {
-    // Set this to true if you would like to to use SVGR
-    // See: https://github.com/gregberge/svgr
-    svgr: false,
+  nx: { svgr: false },
+  sassOptions: {
+    quietDeps: true,
+    logger: {
+      warn: () => {},
+    },
   },
 };
 
-const plugins = [
-  // Add more Next.js plugins to this list if needed.
-  withNx,
-];
-
-module.exports = composePlugins(...plugins)(nextConfig);
+module.exports = composePlugins(withNx, withPayload)(nextConfig);

apps/landing/src/app/(frontend)/(auth)/layout.tsx

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

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

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <></>;
+}

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

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <></>;
+}

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

@@ -1,10 +1,21 @@
 'use client';
 
-import { Button } from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { CallToActionSection } from '@/payload-types';
+import { Button } from '@components/atoms';
 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,29 +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"
+                  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>

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

@@ -0,0 +1,110 @@
+'use client';
+
+import { CommunitiesSection } from '@/payload-types';
+import { Button } from '@components/atoms';
+import { Icon } from '@iconify/react';
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+export function Community(props: CommunitiesSection) {
+  const { items, stats } = props;
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <section
+      id="community"
+      className="w-full py-20 md:py-32 bg-muted relative overflow-hidden"
+    >
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.1),transparent_70%)]" />
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(59,130,246,0.01)_1px,transparent_1px),linear-gradient(to_bottom,rgba(59,130,246,0.01)_1px,transparent_1px)] bg-[size:14px_14px]" />
+      </div>
+      <div className="container px-4 md:px-6" ref={ref}>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+        >
+          <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl text-center mb-4">
+            Komunitas{' '}
+            <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+              Kami
+            </span>
+          </h2>
+          <p className="max-w-[800px] mx-auto text-muted-foreground text-center md:text-lg">
+            Bergabunglah dengan ribuan programmer Indonesia yang saling membantu
+            dan berbagi pengalaman.
+          </p>
+        </motion.div>
+        <motion.div
+          className="grid gap-8 md:grid-cols-3 mt-12"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {items?.map((c, i) => (
+            <motion.div
+              key={i}
+              className="group relative overflow-hidden rounded-xl border bg-background p-6 transition-all hover:shadow-xl"
+              variants={itemVariants}
+            >
+              <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-blue-400/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+              <div className="relative z-10">
+                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
+                  <Icon
+                    icon={c.iconName}
+                    className="h-6 w-6 text-blue-600 dark:text-blue-400"
+                  />
+                </div>
+                <h3 className="mb-2 text-xl font-bold">{c.title}</h3>
+                <p className="mb-6 text-muted-foreground">{c.description}</p>
+                <Button
+                  variant="outline"
+                  className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300"
+                  onClick={() => window.open(c.buttonLink, '_blank')}
+                >
+                  {c.buttonText}
+                </Button>
+              </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>
+          ))}
+        </motion.div>
+        <motion.div
+          className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8 text-center"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.5, delay: 0.3 }}
+        >
+          {stats?.map((s, i) => (
+            <div key={i} className="space-y-2">
+              <div className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                {s.value}
+              </div>
+              <div className="text-sm text-muted-foreground">{s.label}</div>
+            </div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}

apps/landing/src/app/(frontend)/(public)/(home)/_components/__depcrecated__/features.tsx

@@ -1,45 +1,16 @@
 'use client';
 
-import {
-  BookOpenIcon,
-  CodeIcon,
-  LaptopIcon,
-  UsersIcon,
-} from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { FeaturesSection } from '@/payload-types';
+import { Icon } from '@iconify/react';
 import { motion, useInView } from 'framer-motion';
 import { useRef } from 'react';
 
-export function Features() {
+export function Features(props: FeaturesSection) {
+  const { heading, subheading, features } = props;
+
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, amount: 0.2 });
 
-  const features = [
-    {
-      icon: <LaptopIcon className="h-6 w-6 text-primary" />,
-      title: 'Belajar Tanpa Koding',
-      description:
-        'Pelajari konsep programming dengan cara yang mudah dipahami tanpa harus menulis kode yang rumit.',
-    },
-    {
-      icon: <UsersIcon className="h-6 w-6 text-primary" />,
-      title: 'Komunitas Supportif',
-      description:
-        'Bergabunglah dengan komunitas programmer Indonesia yang siap membantu dan berbagi pengalaman.',
-    },
-    {
-      icon: <BookOpenIcon className="h-6 w-6 text-primary" />,
-      title: 'Tutorial Interaktif',
-      description:
-        'Akses tutorial interaktif yang membuat konsep programming lebih mudah untuk dipahami.',
-    },
-    {
-      icon: <CodeIcon className="h-6 w-6 text-primary" />,
-      title: 'Proyek Praktis',
-      description:
-        'Terapkan pengetahuan Anda dalam proyek nyata dengan panduan langkah demi langkah.',
-    },
-  ];
-
   const containerVariants = {
     hidden: { opacity: 0 },
     visible: {
@@ -64,7 +35,6 @@ export function Features() {
       id="fitur"
       className="w-full py-20 md:py-32 relative overflow-hidden"
     >
-      {/* Background Elements */}
       <div className="absolute inset-0 -z-10">
         <div className="absolute inset-0 bg-gradient-to-b from-background via-background to-muted/50" />
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full bg-gradient-to-tr from-primary/5 to-blue-400/5 blur-3xl" />
@@ -82,14 +52,10 @@ export function Features() {
               Fitur Unggulan
             </div>
             <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl">
-              Belajar programming dengan{' '}
-              <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
-                cara yang lebih baik
-              </span>
+              {heading}
             </h2>
             <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
-              IMPHNEN hadir dengan berbagai fitur untuk membantu kamu menjadi
-              programmer handal tanpa harus pusing dengan coding.
+              {subheading}
             </p>
           </motion.div>
         </div>
@@ -100,7 +66,7 @@ export function Features() {
           initial="hidden"
           animate={isInView ? 'visible' : 'hidden'}
         >
-          {features.map((feature, index) => (
+          {features?.map((feature, index) => (
             <motion.div
               key={index}
               className="group relative overflow-hidden rounded-xl border bg-background/50 backdrop-blur-sm p-6 transition-all hover:shadow-md hover:shadow-primary/5 hover:border-primary/50"
@@ -110,7 +76,10 @@ export function Features() {
 
               <div className="relative z-10">
                 <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 group-hover:bg-primary/20 transition-colors">
-                  {feature.icon}
+                  <Icon
+                    icon={feature.iconName}
+                    className="h-6 w-6 text-primary"
+                  />
                 </div>
                 <h3 className="mb-2 text-xl font-bold">{feature.title}</h3>
                 <p className="text-muted-foreground">{feature.description}</p>

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

@@ -1,65 +1,17 @@
 'use client';
 
-import {
-  BookOpenIcon,
-  Button,
-  CodeIcon,
-  Share2Icon,
-  VideoIcon,
-} from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { LearningResourcesSection } from '@/payload-types';
+import { Button } from '@components/atoms';
+import { Icon } from '@iconify/react';
 import { motion, useInView } from 'framer-motion';
-
 import { useRef } from 'react';
 
-export function LearningResources() {
+export function LearningResources(props: LearningResourcesSection) {
+  const { resources, featured, title, description } = props;
+
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, amount: 0.2 });
 
-  const resources = [
-    {
-      icon: <VideoIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />,
-      iconBg: 'bg-blue-100 dark:bg-blue-900',
-      title: 'Video Tutorial',
-      description:
-        'Belajar melalui tutorial video dari langkah awal hingga mahir.',
-      buttonText: 'Lihat Semua Video',
-      buttonLink: '#',
-      color: 'from-blue-500 to-blue-700',
-    },
-    {
-      icon: (
-        <BookOpenIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
-      ),
-      iconBg: 'bg-blue-100 dark:bg-blue-900',
-      title: 'Artikel & Tutorial',
-      description:
-        'Pelajari konsep programming melalui artikel yang disusun secara terstruktur.',
-      buttonText: 'Baca Artikel',
-      buttonLink: '#',
-      color: 'from-blue-500 to-blue-700',
-    },
-    {
-      icon: <CodeIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />,
-      iconBg: 'bg-blue-100 dark:bg-blue-900',
-      title: 'Tantangan Koding',
-      description:
-        'Uji kemampuan koding kamu dengan tantangan yang menyenangkan dan menantang.',
-      buttonText: 'Mulai Tantangan',
-      buttonLink: '#',
-      color: 'from-blue-500 to-blue-700',
-    },
-    {
-      icon: <Share2Icon className="h-6 w-6 text-blue-600 dark:text-blue-400" />,
-      iconBg: 'bg-blue-100 dark:bg-blue-900',
-      title: 'Sharing Session',
-      description:
-        'Ikuti sesi berbagi pengalaman dari programmer berpengalaman dan belajar dari pengalaman mereka.',
-      buttonText: 'Jadwal Session',
-      buttonLink: '#',
-      color: 'from-blue-500 to-blue-700',
-    },
-  ];
-
   const containerVariants = {
     hidden: { opacity: 0 },
     visible: {
@@ -84,96 +36,96 @@ export function LearningResources() {
       id="sumber-belajar"
       className="w-full py-20 md:py-32 relative overflow-hidden"
     >
-      {/* Background Elements */}
       <div className="absolute inset-0 -z-10">
         <div className="absolute inset-0 bg-gradient-to-b from-background via-background to-background" />
         <div className="absolute top-0 right-0 w-1/2 h-1/2 bg-gradient-to-bl from-primary/5 to-transparent blur-3xl" />
         <div className="absolute bottom-0 left-0 w-1/2 h-1/2 bg-gradient-to-tr from-blue-400/5 to-transparent blur-3xl" />
       </div>
-
       <div className="container px-4 md:px-6" ref={ref}>
         <div className="flex flex-col items-center justify-center space-y-4 text-center mb-16">
           <motion.div
-            className="space-y-2"
             initial={{ opacity: 0, y: 20 }}
-            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.5 }}
           >
             <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl">
-              Sumber{' '}
-              <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
-                Belajar
-              </span>
+              {title}
             </h2>
             <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
-              Akses berbagai materi belajar yang akan membantu kamu menguasai
-              konsep programming dengan cara yang menyenangkan.
+              {description}
             </p>
           </motion.div>
         </div>
-
         <motion.div
           className="grid gap-8 md:grid-cols-2 lg:grid-cols-4"
           variants={containerVariants}
           initial="hidden"
           animate={isInView ? 'visible' : 'hidden'}
         >
-          {resources.map((resource, index) => (
+          {resources.map((r, i) => (
             <motion.div
-              key={index}
-              className="group relative overflow-hidden rounded-xl border bg-background p-6 transition-all hover:shadow-lg"
+              key={i}
+              className="group relative overflow-hidden rounded-xl border bg-background p-6 hover:shadow-lg"
               variants={itemVariants}
             >
               <div className="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-primary/50 to-blue-400/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-
               <div className="relative z-10">
-                <div
-                  className={`mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full ${resource.iconBg}`}
-                >
-                  {resource.icon}
+                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
+                  <Icon
+                    icon={r.icon}
+                    className="h-6 w-6 text-blue-600 dark:text-blue-400"
+                  />
                 </div>
-                <h3 className="mb-2 text-xl font-bold">{resource.title}</h3>
-                <p className="mb-6 text-muted-foreground">
-                  {resource.description}
-                </p>
+                <h3 className="mb-2 text-xl font-bold">{r.title}</h3>
+                <p className="mb-6 text-muted-foreground">{r.description}</p>
+
                 <Button
                   variant="link"
                   className="p-0 h-auto font-medium text-primary hover:text-primary/80"
+                  onClick={() => window.open(r.buttonLink, '_blank')}
                 >
-                  {resource.buttonText} →
+                  {r.buttonText}
+                  <Icon icon="tabler:arrow-right" className="h-6 w-6" />
                 </Button>
               </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>
           ))}
         </motion.div>
-
-        {/* Featured Resource */}
         <motion.div
           className="mt-20 rounded-xl overflow-hidden border bg-background/50 backdrop-blur-sm"
           initial={{ opacity: 0, y: 20 }}
-          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
           transition={{ duration: 0.5, delay: 0.3 }}
         >
           <div className="grid md:grid-cols-2 gap-0">
             <div className="p-8 md:p-12 flex flex-col justify-center">
-              <div className="inline-block rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary mb-4">
-                Rekomendasi Terbaik
+              <div className="inline-block rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary mb-4 w-fit">
+                {featured.label}
               </div>
               <h3 className="text-2xl md:text-3xl font-bold mb-4">
-                Kursus Lengkap Web Development
+                {featured.title}
               </h3>
               <p className="text-muted-foreground mb-6">
-                Pelajari HTML, CSS, JavaScript, React, dan Node.js dalam satu
-                kursus komprehensif yang dirancang untuk pemula hingga tingkat
-                menengah.
+                {featured.description}
               </p>
               <div className="flex flex-wrap gap-4">
-                <Button className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90">
-                  Mulai Kursus
+                <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={() =>
+                    window.open(featured.primaryButtonLink, '_blank')
+                  }
+                >
+                  {featured.primaryButtonText}
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() =>
+                    window.open(featured.secondaryButtonLink, '_blank')
+                  }
+                >
+                  {featured.secondaryButtonText}
                 </Button>
-                <Button variant="outline">Lihat Silabus</Button>
               </div>
             </div>
             <div className="relative h-64 md:h-auto">

apps/landing/src/app/(frontend)/(public)/(home)/_components/__depcrecated__/testimonials.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { formatCMSImageDataToMedia } from '@/lib/format';
+import { TestimonialsSection } from '@/payload-types';
+import { QuoteIcon } from '@components/atoms';
+import { motion, useInView } from 'framer-motion';
+import Image from 'next/image';
+import { useRef } from 'react';
+
+export function Testimonials(props: TestimonialsSection) {
+  const { title, subtitle, items, stats, joinTitle, joinText } = props;
+
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: { y: 0, opacity: 1, transition: { duration: 0.5 } },
+  };
+
+  return (
+    <section
+      id="testimoni"
+      className="w-full py-20 md:py-32 bg-muted relative overflow-hidden"
+      ref={ref}
+    >
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(59,130,246,0.1),transparent_50%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,rgba(96,165,250,0.1),transparent_50%)]" />
+      </div>
+
+      <div className="container px-4 md:px-6">
+        <motion.div
+          className="flex flex-col items-center justify-center space-y-4 text-center mb-16"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.5 }}
+        >
+          <h2 className="text-3xl font-bold tracking-tighter md:text-4xl lg:text-5xl">
+            {title.split(' ').map((word, i) =>
+              i === title.split(' ').length - 1 ? (
+                <span
+                  key={i}
+                  className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400"
+                >
+                  {word}
+                </span>
+              ) : (
+                <span key={i}>{word} </span>
+              )
+            )}
+          </h2>
+          <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
+            {subtitle}
+          </p>
+        </motion.div>
+
+        <motion.div
+          className="grid gap-8 md:grid-cols-3"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {items?.map((t, idx) => (
+            <motion.div
+              key={idx}
+              className="group relative overflow-hidden rounded-xl border bg-background p-6 transition-all hover:shadow-lg"
+              variants={itemVariants}
+            >
+              <div className="absolute top-6 right-6 text-primary/20 group-hover:text-primary/40 transition-colors">
+                <QuoteIcon className="h-8 w-8" />
+              </div>
+              <div className="relative z-10">
+                <p className="mb-6 text-muted-foreground italic">
+                  &ldquo;{t.quote}&rdquo;
+                </p>
+                <div className="flex items-center gap-4">
+                  <div className="relative h-12 w-12 overflow-hidden rounded-full border-2 border-primary/20">
+                    {(() => {
+                      const media = formatCMSImageDataToMedia(t.avatar);
+                      if (!media) return null;
+                      return (
+                        <Image
+                          src={media.url!}
+                          alt={media.alt}
+                          width={600}
+                          height={500}
+                          className="object-cover"
+                        />
+                      );
+                    })()}
+                  </div>
+                  <div>
+                    <h4 className="font-bold">{t.name}</h4>
+                    <p className="text-sm text-muted-foreground">{t.role}</p>
+                  </div>
+                </div>
+              </div>
+              <div className="absolute -bottom-1 -left-1 w-20 h-20 bg-gradient-to-tr from-primary/10 to-transparent rounded-tr-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+            </motion.div>
+          ))}
+        </motion.div>
+
+        <motion.div
+          className="mt-20 rounded-xl overflow-hidden border bg-background/50 backdrop-blur-sm p-8 md:p-12"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.5, delay: 0.3 }}
+        >
+          <div className="grid md:grid-cols-2 gap-8 items-center">
+            <div>
+              <h3 className="text-2xl md:text-3xl font-bold mb-4">
+                {joinTitle}
+              </h3>
+              <p className="text-muted-foreground">{joinText}</p>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              {stats?.map((s, idx) => (
+                <div key={idx} className="rounded-lg border p-4 text-center">
+                  <div className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                    {s.value}
+                  </div>
+                  <div className="text-sm text-muted-foreground">{s.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,71 @@
+'use client';
+
+import { Button } from '@components/atoms';
+import { motion, useInView } from 'framer-motion';
+import { useRouter } from 'next/navigation';
+import { useRef } from 'react';
+
+export function CallToAction() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  const router = useRouter();
+
+  return (
+    <section className="w-full py-20 md:py-32 relative overflow-hidden">
+      {/* Background Elements */}
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-gradient-to-b from-background to-primary/20" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.2),transparent_70%)]" />
+      </div>
+
+      <div className="container px-4 md:px-6" ref={ref}>
+        <motion.div
+          className="max-w-4xl mx-auto rounded-2xl overflow-hidden border shadow-lg"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+          transition={{ duration: 0.5 }}
+        >
+          <div className="relative p-8 md:p-12 lg:p-16 bg-background">
+            <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-blue-400/5" />
+
+            <div className="relative z-10 text-center">
+              <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
+                Siap Menjadi{' '}
+                <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                  Programmer Handal?
+                </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!
+              </p>
+
+              <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                <Button
+                  size="lg"
+                  className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg"
+                  onClick={() => router.push('#community')}
+                >
+                  Gabung Komunitas
+                </Button>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="border-primary hover:bg-primary/10"
+                  onClick={() => router.push('/events')}
+                >
+                  Explore Event
+                </Button>
+              </div>
+            </div>
+
+            {/* Decorative Elements */}
+            <div className="absolute -top-12 -left-12 w-24 h-24 rounded-full bg-primary/10 blur-2xl" />
+            <div className="absolute -bottom-12 -right-12 w-24 h-24 rounded-full bg-blue-400/10 blur-2xl" />
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

apps/landing/src/app/(frontend)/(public)/(home)/_components/communites/index.tsx

@@ -0,0 +1,247 @@
+'use client';
+
+import { Button } from '@components/atoms';
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+import {
+  FaDiscord,
+  FaFacebook,
+  FaInstagram,
+  FaLinkedin,
+  FaTiktok,
+} from 'react-icons/fa';
+
+export function Communities() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  const communities = [
+    {
+      icon: FaFacebook,
+      title: 'Facebook Group',
+      description:
+        'Komunitas aktif dengan 180K+ anggota berdiskusi seputar programming dan sharing meme',
+      buttonText: 'Gabung Sekarang',
+      buttonLink: 'https://facebook.com/groups/programmerhandal',
+    },
+    {
+      icon: FaDiscord,
+      title: 'Discord Server',
+      description:
+        'Diskusi real-time dengan  developer berbagai level, mulai dari pemula sampai expert!',
+      buttonText: 'Join Server',
+      buttonLink: 'https://discord.com/invite/imphnen',
+    },
+    {
+      icon: FaInstagram,
+      title: 'Instagram',
+      description:
+        'Temukan visual tutorial coding & tech trends terkini setiap harinya',
+      buttonText: 'Follow Kami',
+      buttonLink: 'https://www.instagram.com/imphnen.dev',
+    },
+    {
+      icon: FaTiktok,
+      title: 'TikTok',
+      description:
+        'Tips coding singkat & trik development praktis dalam 60 detik',
+      buttonText: 'Follow Sekarang',
+      buttonLink: 'https://www.tiktok.com/@imphnen',
+    },
+    {
+      icon: FaLinkedin,
+      title: 'LinkedIn',
+      description:
+        'Bangun jaringan profesional dengan perusahaan teknologi ternama & recruiter IT',
+      buttonText: 'Segera Hadir',
+      buttonLink: '#',
+    },
+  ];
+
+  const stats = [
+    { value: '180K+', label: 'Komunitas Aktif' },
+    { value: '25K+', label: 'Postingan/Bulan' },
+    { value: '95%', label: 'Respon Cepat' },
+    { value: '10K+', label: 'Problem Solved' },
+  ];
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.15,
+        delayChildren: 0.2,
+      },
+    },
+  };
+
+  const cardVariants = {
+    hidden: { y: 40, opacity: 0, scale: 0.95 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      scale: 1,
+      transition: {
+        type: 'spring',
+        stiffness: 100,
+        damping: 20,
+      },
+    },
+  };
+
+  const statVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: (i: number) => ({
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: i * 0.1 + 0.5,
+        duration: 0.6,
+      },
+    }),
+  };
+
+  return (
+    <section
+      id="community"
+      className="w-full py-20 md:py-32 relative overflow-hidden container"
+    >
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-gradient-to-b from-background via-background to-background" />
+        <div className="absolute top-0 right-0 w-1/2 h-1/2 bg-gradient-to-bl from-primary/5 to-transparent blur-3xl" />
+        <div className="absolute bottom-0 left-0 w-1/2 h-1/2 bg-gradient-to-tr from-primary/5 to-transparent blur-3xl" />
+      </div>
+
+      <div className="w-full px-4 md:px-6 lg:px-0" ref={ref}>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.8 }}
+        >
+          <h2 className="text-4xl font-bold tracking-tighter md:text-5xl/tight lg:text-6xl text-center mb-6">
+            <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/80">
+              Komunitas Programmer
+            </span>{' '}
+            <br className="hidden md:block" />
+            Terbesar di Indonesia
+          </h2>
+          <p className="max-w-4xl mx-auto text-muted-foreground text-center md:text-xl text-balance">
+            Bergabung dengan jaringan developer profesional untuk berkolaborasi,
+            belajar, dan berkembang bersama komunitas yang aktif dan suportif
+          </p>
+        </motion.div>
+
+        {/* First Row - Facebook & Discord */}
+        <motion.div
+          className="grid gap-4 grid-cols-1 md:grid-cols-2 w-full mt-16"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {communities.slice(0, 2).map((community, index) => (
+            <motion.div
+              key={index}
+              variants={cardVariants}
+              className="group relative overflow-hidden rounded-2xl border bg-background p-8 hover:shadow-xl transition-shadow h-full"
+              whileHover={{
+                y: -5,
+                transition: { duration: 0.2 },
+              }}
+            >
+              <div className="absolute top-0 left-0 h-1.5 w-full bg-gradient-to-r from-primary to-primary/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+              <div className="relative z-10">
+                <div className="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10">
+                  <community.icon className="h-7 w-7 text-primary" />
+                </div>
+
+                <h3 className="mb-4 text-2xl font-bold">{community.title}</h3>
+                <p className="mb-8 text-muted-foreground text-lg">
+                  {community.description}
+                </p>
+
+                <Button
+                  variant="outline"
+                  className="w-full group-hover:bg-primary/10 group-hover:border-primary/20 group-hover:text-foreground transition-all duration-300 hover:scale-[1.02] border-primary/10 text-base h-12"
+                  onClick={() => window.open(community.buttonLink, '_blank')}
+                >
+                  {community.buttonText}
+                </Button>
+              </div>
+
+              <div className="absolute -bottom-40 -right-40 w-80 h-80 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-20 group-hover:-translate-x-20" />
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Second Row - Instagram, TikTok, LinkedIn */}
+        <motion.div
+          className="grid gap-4 grid-cols-1 md:grid-cols-3 w-full mt-8"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {communities.slice(2).map((community, index) => (
+            <motion.div
+              key={index + 2}
+              variants={cardVariants}
+              className="group relative overflow-hidden rounded-2xl border bg-background p-6 hover:shadow-xl transition-shadow h-full"
+              whileHover={{
+                y: -5,
+                transition: { duration: 0.2 },
+              }}
+            >
+              <div className="absolute top-0 left-0 h-1.5 w-full bg-gradient-to-r from-primary/50 to-primary/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+              <div className="relative z-10">
+                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
+                  <community.icon className="h-6 w-6 text-primary" />
+                </div>
+
+                <h3 className="mb-3 text-xl font-bold">{community.title}</h3>
+                <p className="mb-6 text-muted-foreground">
+                  {community.description}
+                </p>
+
+                <Button
+                  variant="outline"
+                  className="w-full group-hover:bg-primary/10 group-hover:border-primary/20 group-hover:text-foreground transition-all duration-300 hover:scale-[1.02] border-primary/10 h-11"
+                  onClick={() => window.open(community.buttonLink, '_blank')}
+                  disabled={community.title === 'LinkedIn'}
+                >
+                  {community.buttonText}
+                </Button>
+              </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>
+          ))}
+        </motion.div>
+
+        {/* Stats Section */}
+        <motion.div
+          className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8 text-center"
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {stats.map((stat, index) => (
+            <motion.div
+              key={index}
+              variants={statVariants}
+              custom={index}
+              className="space-y-3 p-6 rounded-xl bg-background border"
+            >
+              <div className="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/80">
+                {stat.value}
+              </div>
+              <div className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
+                {stat.label}
+              </div>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}

apps/landing/src/app/(frontend)/(public)/(home)/_components/events/index.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { Button } from '@components/atoms';
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+export function Events() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  const events = [
+    {
+      image: '/images/event-1.jpg',
+      title: 'Tech Summit 2024',
+      description:
+        'Konferensi teknologi terbesar tahun ini dengan pembicara expert dari perusahaan unicorn',
+      type: 'offline',
+      price: 'berbayar',
+      link: '#',
+    },
+    {
+      image: '/images/event-2.jpg',
+      title: 'Web Development Bootcamp',
+      description:
+        'Pelatihan intensif full-stack development selama 2 minggu secara online',
+      type: 'online',
+      price: 'gratis',
+      link: '#',
+    },
+    {
+      image: '/images/event-3.jpg',
+      title: 'UI/UX Workshop',
+      description:
+        'Workshop praktis membuat prototype aplikasi dengan Figma dan Framer',
+      type: 'hybrid',
+      price: 'berbayar',
+      link: '#',
+    },
+  ];
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.15,
+        delayChildren: 0.2,
+      },
+    },
+  };
+
+  const cardVariants = {
+    hidden: { y: 40, opacity: 0, scale: 0.95 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      scale: 1,
+      transition: {
+        type: 'spring',
+        stiffness: 100,
+        damping: 20,
+      },
+    },
+  };
+
+  return (
+    <section
+      id="events"
+      className="w-full py-20 md:py-32 relative overflow-hidden container"
+    >
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-gradient-to-b from-background via-background to-background" />
+        <div className="absolute top-0 right-0 w-1/2 h-1/2 bg-gradient-to-bl from-primary/5 to-transparent blur-3xl" />
+        <div className="absolute bottom-0 left-0 w-1/2 h-1/2 bg-gradient-to-tr from-primary/5 to-transparent blur-3xl" />
+      </div>
+
+      <div className="w-full px-4 md:px-6 lg:px-0" ref={ref}>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.8 }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-4xl font-bold tracking-tighter md:text-5xl/tight lg:text-6xl mb-6">
+            <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/80">
+              Event Terbaru
+            </span>
+          </h2>
+          <p className="max-w-2xl mx-auto text-muted-foreground text-center md:text-xl text-balance">
+            Lihat dan ikuti event terbaru dari IMPHNEN
+          </p>
+        </motion.div>
+
+        <motion.div
+          className="grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 w-full"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {events.map((event, index) => (
+            <motion.div
+              key={index}
+              variants={cardVariants}
+              className="group relative overflow-hidden rounded-2xl border bg-background hover:shadow-xl transition-shadow h-full"
+              whileHover={{
+                y: -5,
+                transition: { duration: 0.2 },
+              }}
+            >
+              <div className="absolute top-0 left-0 h-1.5 w-full bg-gradient-to-r from-primary to-primary/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+              <div className="relative z-10">
+                <div className="h-48 bg-muted/20 relative overflow-hidden">
+                  <div className="absolute inset-0 bg-gradient-to-t from-background to-transparent z-10" />
+                  <div className="absolute top-4 right-4 flex gap-2">
+                    <span
+                      className={`px-3 py-1 rounded-full text-sm font-medium ${
+                        event.type === 'online'
+                          ? 'bg-green-500/10 text-green-500'
+                          : event.type === 'offline'
+                          ? 'bg-purple-500/10 text-purple-500'
+                          : 'bg-yellow-500/10 text-yellow-500'
+                      }`}
+                    >
+                      {event.type === 'hybrid'
+                        ? 'Hybrid'
+                        : event.type.toUpperCase()}
+                    </span>
+                    <span
+                      className={`px-3 py-1 rounded-full text-sm font-medium ${
+                        event.price === 'gratis'
+                          ? 'bg-blue-500/10 text-blue-500'
+                          : 'bg-orange-500/10 text-orange-500'
+                      }`}
+                    >
+                      {event.price.toUpperCase()}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="p-6">
+                  <h3 className="text-2xl font-bold mb-3">{event.title}</h3>
+                  <p className="text-muted-foreground mb-6">
+                    {event.description}
+                  </p>
+
+                  <Button
+                    variant="outline"
+                    className="w-full group-hover:bg-primary/10 group-hover:border-primary/20 group-hover:text-foreground transition-all duration-300 hover:scale-[1.02] border-primary/10 text-base h-12"
+                    onClick={() => window.open(event.link, '_blank')}
+                  >
+                    Lihat Detail
+                  </Button>
+                </div>
+              </div>
+
+              <div className="absolute -bottom-40 -right-40 w-80 h-80 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-20 group-hover:-translate-x-20" />
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}

apps/landing/src/app/(frontend)/(public)/(home)/_components/hero/button-explore-event.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { Button } from '@components/atoms';
+import { useRouter } from 'next/navigation';
+import { TbCalendarStar } from 'react-icons/tb';
+
+export function ButtonExploreEvent() {
+  const router = useRouter();
+
+  return (
+    <Button
+      size="lg"
+      variant="outline"
+      className="w-full sm:w-auto group relative overflow-hidden border-primary flex items-center justify-center gap-2"
+      onClick={() => router.push('/events')}
+    >
+      <TbCalendarStar className="size-7" />
+      <span className="relative">Explore Event</span>
+    </Button>
+  );
+}

apps/landing/src/app/(frontend)/(public)/(home)/_components/hero/button-join-community.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { Button } from '@components/atoms';
+import { useRouter } from 'next/navigation';
+import { TbLocationFilled } from 'react-icons/tb';
+
+export function ButtonJoinCommunity() {
+  const router = useRouter();
+
+  return (
+    <Button
+      variant="default"
+      size="lg"
+      className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg"
+      onClick={() => router.push('#community')}
+    >
+      <TbLocationFilled className="size-6" />
+      Gabung Komunitas
+    </Button>
+  );
+}

apps/landing/src/app/(frontend)/(public)/(home)/_components/hero/hero-badge.tsx

@@ -0,0 +1,7 @@
+export function HeroBadge() {
+  return (
+    <div className="inline-flex items-center rounded-full border px-3 py-1 text-sm w-fit truncate">
+      <span>🇮🇩 Komunitas Programmer Indonesia</span>
+    </div>
+  );
+}

apps/landing/src/app/(frontend)/(public)/(home)/_components/hero/hero-image.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+
+export function HeroImage() {
+  return (
+    <motion.div
+      className="relative w-full lg:w-auto mx-auto lg:ml-auto max-w-[600px] mt-8 lg:mt-0"
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.5, delay: 0.2 }}
+    >
+      <Image
+        src="/logo.png"
+        alt=""
+        width={800}
+        height={600}
+        className="w-full h-auto object-cover"
+        priority
+      />
+    </motion.div>
+  );
+}

apps/landing/src/app/(frontend)/(public)/(home)/_components/hero/hero-main-text.tsx

@@ -0,0 +1,16 @@
+export function HeroMainText() {
+  return (
+    <div className="space-y-4">
+      <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70 leading-tight">
+        Programmer Handal <br />
+        <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+          Namun Enggan Ngoding
+        </span>
+      </h1>
+      <p className="max-w-[600px] text-muted-foreground md:text-xl lg:text-lg">
+        Tempat para programmer struggle bersama, berbagi meme, pengalaman,
+        tutorial, dan tempat yapping yang nyaman
+      </p>
+    </div>
+  );
+}

apps/landing/src/app/(frontend)/(public)/(home)/_components/hero/hero-stat.tsx

@@ -0,0 +1,26 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@components/atoms';
+
+export function HeroStat() {
+  return (
+    <div className="flex items-center rounded-full border border-border bg-background p-1 shadow shadow-black/5 md:w-fit">
+      <div className="flex -space-x-4">
+        <Avatar>
+          <AvatarImage src="/maulana.webp" />
+          <AvatarFallback />
+        </Avatar>
+        <Avatar>
+          <AvatarImage src="/rasyid.webp" />
+          <AvatarFallback />
+        </Avatar>
+        <Avatar>
+          <AvatarImage src="/ega.webp" />
+          <AvatarFallback />
+        </Avatar>
+      </div>
+      <p className="px-2 text-xs text-muted-foreground">
+        <strong className="font-medium text-foreground">180K+</strong>{' '}
+        Programmer Indonesia telah bergabung
+      </p>
+    </div>
+  );
+}

apps/landing/src/app/(frontend)/(public)/(home)/_components/hero/hero-wrapper.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { ReactNode, useEffect, useState } from 'react';
+
+export function HeroWrapper({ children }: { children: ReactNode }) {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrollY(window.scrollY);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <section className="relative w-full py-16 md:py-24 lg:py-32 xl:py-40 overflow-hidden">
+      <div className="absolute inset-0 -z-10 overflow-hidden">
+        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-background to-background/50" />
+        <div
+          className="absolute top-1/4 -left-20 w-80 h-80 rounded-full bg-gradient-to-r from-primary/20 to-blue-400/20 blur-3xl"
+          style={{
+            transform: `translate(${scrollY * 0.1}px, ${scrollY * -0.05}px)`,
+            opacity: Math.max(0.2, 1 - scrollY * 0.0005),
+          }}
+        />
+        <div
+          className="absolute bottom-1/3 -right-20 w-80 h-80 rounded-full bg-gradient-to-r from-blue-400/20 to-primary/20 blur-3xl"
+          style={{
+            transform: `translate(${scrollY * -0.1}px, ${scrollY * 0.05}px)`,
+            opacity: Math.max(0.2, 1 - scrollY * 0.0005),
+          }}
+        />
+        <div className="absolute inset-0 bg-[linear-gradient(rgba(59,130,246,0.05)_1px,transparent_1px),linear-gradient(to_right,rgba(59,130,246,0.05)_1px,transparent_1px)] bg-[size:40px_40px]" />
+      </div>
+      {children}
+    </section>
+  );
+}

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

@@ -0,0 +1,39 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { ButtonExploreEvent } from './button-explore-event';
+import { ButtonJoinCommunity } from './button-join-community';
+import { HeroBadge } from './hero-badge';
+import { HeroImage } from './hero-image';
+import { HeroMainText } from './hero-main-text';
+import { HeroStat } from './hero-stat';
+import { HeroWrapper } from './hero-wrapper';
+
+export function Hero() {
+  return (
+    <HeroWrapper>
+      <div className="container px-4 md:px-8 relative">
+        <div className="grid gap-8 lg:grid-cols-2 lg:gap-16 items-center">
+          <motion.div
+            className="flex flex-col justify-center space-y-4"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+          >
+            <HeroBadge />
+            <HeroMainText />
+
+            <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
+              <ButtonJoinCommunity />
+              <ButtonExploreEvent />
+            </div>
+
+            <HeroStat />
+          </motion.div>
+
+          <HeroImage />
+        </div>
+      </div>
+    </HeroWrapper>
+  );
+}

apps/landing/src/app/(frontend)/(public)/(home)/_components/testimonials/index.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { Button } from '@components/atoms';
+import { motion, useInView } from 'framer-motion';
+import Image from 'next/image';
+import { useRef } from 'react';
+import { ImPencil2 } from 'react-icons/im';
+
+const testimonials = [
+  {
+    author: {
+      name: 'Ega',
+      role: 'Backend Engineer',
+      avatar: '/ega.webp',
+    },
+    quote:
+      'Tralalero Tralala, IMPHENOTRUNASA merupakan anomali yang sering datang ketika melihat orang ngoding',
+  },
+  {
+    author: {
+      name: 'Rasyid',
+      role: 'Fullsnack Engineer',
+      avatar: '/rasyid.webp',
+    },
+    quote:
+      'Dapet job dari meme yang di-share disini. Gak nyangka yapping random bisa jadi koneksi kerja akwokaowkoak',
+  },
+  {
+    author: {
+      name: 'Maulana Sodiqin',
+      role: 'Backend Engineer',
+      avatar: '/maulana.webp',
+    },
+    quote: 'Anjay aku bohong? Admin yang bohong',
+  },
+];
+
+export function Testimonials() {
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  // Double the testimonials for seamless loop
+  const duplicatedTestimonials = [...testimonials, ...testimonials];
+
+  return (
+    <section
+      id="testimoni"
+      className="w-full py-20 md:py-32 bg-muted relative overflow-hidden"
+      ref={ref}
+    >
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(var(--primary)/0.1),transparent_50%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,rgba(var(--primary)/0.1),transparent_50%)]" />
+      </div>
+
+      <div className="container px-4 md:px-6">
+        <motion.div
+          className="flex flex-col items-center justify-center space-y-4 text-center mb-16"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.5 }}
+        >
+          <h2 className="text-3xl font-bold tracking-tighter md:text-4xl lg:text-5xl">
+            <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+              Testimoni{' '}
+            </span>
+            Member
+          </h2>
+          <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
+            Apa kata mereka yang telah bergabung dengan komunitas IMPHNEN?
+          </p>
+        </motion.div>
+
+        {/* Infinite Marquee Section */}
+        <div className="relative w-full overflow-hidden py-4 marquee-container">
+          <motion.div
+            className="flex"
+            animate={{
+              x: ['0%', '-100%'],
+            }}
+            transition={{
+              duration: 40,
+              ease: 'linear',
+              repeat: Infinity,
+            }}
+          >
+            {duplicatedTestimonials.map((testimonial, i) => (
+              <div
+                key={i}
+                className="w-[300px] md:w-[400px] shrink-0 mx-4 p-6 rounded-xl bg-background border border-border/20 hover:border-primary/30 transition-colors group flex flex-col"
+                style={{ minHeight: '200px' }} // Set a fixed minimum height
+              >
+                <div className="flex flex-col gap-4 flex-grow">
+                  <p className="text-muted-foreground italic leading-relaxed line-clamp-4">
+                    &ldquo;{testimonial.quote}&rdquo;
+                  </p>
+                  <div className="mt-auto">
+                    {' '}
+                    {/* This pushes the author info to the bottom */}
+                    <div className="flex items-center gap-4">
+                      <div className="relative h-12 w-12 rounded-full overflow-hidden border-2 border-primary/20 group-hover:border-primary/50 transition-colors">
+                        <Image
+                          src={testimonial.author.avatar}
+                          alt={testimonial.author.name}
+                          width={48}
+                          height={48}
+                          className="object-cover"
+                          unoptimized
+                        />
+                      </div>
+                      <div>
+                        <h4 className="font-bold">{testimonial.author.name}</h4>
+                        <p className="text-sm text-muted-foreground">
+                          {testimonial.author.role}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </motion.div>
+        </div>
+
+        {/* Call to Action */}
+        <motion.div
+          className="mt-16 text-center"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ delay: 0.2 }}
+        >
+          <Button
+            size="lg"
+            className="group relative w-full sm:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 transition-all duration-300 font-bold text-white hover:text-white/90 shadow-lg"
+          >
+            <ImPencil2 className="size-5" />
+            Tulis dan Tampilkan Disini
+          </Button>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,17 @@
+import { CallToAction } from './_components/call-to-action';
+import { Communities } from './_components/communites';
+import { Events } from './_components/events';
+import { Hero } from './_components/hero';
+import { Testimonials } from './_components/testimonials';
+
+export default function Page() {
+  return (
+    <>
+      <Hero />
+      <Events />
+      <Communities />
+      <Testimonials />
+      <CallToAction />
+    </>
+  );
+}

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

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <></>;
+}

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

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <></>;
+}

apps/landing/src/app/(frontend)/(public)/layout.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import Footer from '../_components/footer';
+import { Header } from '../_components/header';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Header />
+      <main className="flex-1">{children}</main>
+      <Footer />
+    </div>
+  );
+}

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

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <></>;
+}

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

@@ -188,7 +188,8 @@ export default function Footer() {
                   placeholder="Email Anda"
                   className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
                 />
-                <button className="inline-flex items-center justify-center rounded-md bg-primary px-3 py-1 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50">
+                <button className="inline-flex items-center justify-center rounded-md bg-primary px-3 py-1 text-sm shadow hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 
+font-bold text-black hover:text-white cursor-pointer">
                   Daftar
                 </button>
               </div>

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

@@ -0,0 +1,11 @@
+import { buttonVariants } from '@components/atoms';
+import { cn } from '@utils/ui';
+import Link from 'next/link';
+
+export function ButtonSignin() {
+  return (
+    <Link href="/signin" className={cn(buttonVariants(), 'hidden lg:flex')}>
+      Masuk
+    </Link>
+  );
+}

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

@@ -0,0 +1,14 @@
+import { buttonVariants } from '@components/atoms';
+import { cn } from '@utils/ui';
+import Link from 'next/link';
+
+export function ButtonSignup() {
+  return (
+    <Link
+      href="/signup"
+      className={cn(buttonVariants({ variant: 'outline' }), 'hidden lg:flex')}
+    >
+      Daftar
+    </Link>
+  );
+}

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

@@ -0,0 +1,22 @@
+import Link from 'next/link';
+
+export function DesktopNavigation() {
+  return (
+    <nav className="hidden md:flex items-center gap-8">
+      <Link href="/about" className="text-sm font-medium relative group">
+        <span className="transition-colors hover:text-primary">About</span>
+        <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
+      </Link>
+      <Link href="/events" className="text-sm font-medium relative group">
+        <span className="transition-colors hover:text-primary">Event</span>
+        <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
+      </Link>
+      <Link href="/testimonials" className="text-sm font-medium relative group">
+        <span className="transition-colors hover:text-primary">
+          Testimonial
+        </span>
+        <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
+      </Link>
+    </nav>
+  );
+}

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

@@ -0,0 +1,29 @@
+'use client';
+
+import { cn } from '@utils/ui';
+import { ReactNode, useEffect, useState } from 'react';
+
+export function HeaderWrapper({ children }: { children: ReactNode }) {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 10);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <header
+      className={cn(
+        'sticky top-0 z-50 w-full transition-all duration-300',
+        isScrolled
+          ? 'bg-background/80 backdrop-blur-md border-b shadow-sm'
+          : 'bg-transparent'
+      )}
+    >
+      {children}
+    </header>
+  );
+}

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

@@ -0,0 +1,34 @@
+'use client';
+
+import { useMobileMenuStore } from '@/stores/mobile-menu-store';
+import { ButtonSignin } from './button-signin';
+import { ButtonSignup } from './button-signup';
+import { DesktopNavigation } from './desktop-navigation';
+import { HeaderWrapper } from './header-wrapper';
+import { Logo } from './logo';
+import { MobileMenuHamburger } from './mobile-menu-hamburger';
+import { MobileNavigation } from './mobile-navigation';
+import { SimpleThemeToggle } from './simple-theme-toggle';
+
+export function Header() {
+  const mobileMenuOpen = useMobileMenuStore((s) => s.mobileMenuOpen);
+
+  return (
+    <HeaderWrapper>
+      <div className="container flex h-16 items-center justify-between">
+        <Logo />
+
+        <DesktopNavigation />
+
+        <div className="flex items-center gap-x-2">
+          <ButtonSignin />
+          <ButtonSignup />
+          <SimpleThemeToggle />
+          <MobileMenuHamburger />
+        </div>
+      </div>
+
+      {mobileMenuOpen && <MobileNavigation />}
+    </HeaderWrapper>
+  );
+}

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

@@ -0,0 +1,16 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+export function Logo() {
+  return (
+    <Link href="/">
+      <Image
+        src="/logo.png"
+        alt="IMPHNEN"
+        width={64}
+        height={64}
+        className="object-cover"
+      />
+    </Link>
+  );
+}

apps/landing/src/app/(frontend)/_components/header/mobile-menu-hamburger.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useMobileMenuStore } from '@/stores/mobile-menu-store';
+import { Button, MenuIcon, XIcon } from '@components/atoms';
+
+export function MobileMenuHamburger() {
+  const mobileMenuOpen = useMobileMenuStore((s) => s.mobileMenuOpen);
+  const toggleMobileMenu = useMobileMenuStore((s) => s.toggleMobileMenu);
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="md:hidden"
+      onClick={toggleMobileMenu}
+    >
+      {mobileMenuOpen ? (
+        <XIcon className="h-6 w-6" />
+      ) : (
+        <MenuIcon className="h-6 w-6" />
+      )}
+    </Button>
+  );
+}

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

@@ -0,0 +1,28 @@
+import Link from 'next/link';
+
+export function MobileNavigation() {
+  return (
+    <div className="md:hidden border-t bg-background/95 backdrop-blur-md">
+      <nav className="container flex flex-col py-4 text-center">
+        <Link
+          href="/about"
+          className="py-3 text-sm font-medium border-b border-border/50"
+        >
+          About
+        </Link>
+        <Link
+          href="/events"
+          className="py-3 text-sm font-medium border-b border-border/50"
+        >
+          Event
+        </Link>
+        <Link
+          href="/testimonias"
+          className="py-3 text-sm font-medium border-b border-border/50"
+        >
+          Testimonial
+        </Link>
+      </nav>
+    </div>
+  );
+}

apps/landing/src/app/(frontend)/_components/header/simple-theme-toggle.tsx

@@ -1,10 +1,6 @@
 'use client';
 
-import {
-  Button,
-  MoonIcon,
-  SunIcon,
-} from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { Button, MoonIcon, SunIcon } from '@components/atoms';
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
 
@@ -29,7 +25,7 @@ export function SimpleThemeToggle() {
       variant="outline"
       size="icon"
       onClick={toggleTheme}
-      className="focus-visible:ring-0"
+      className="focus-visible:ring-0 cursor-pointer"
     >
       {theme === 'dark' ? (
         <SunIcon className="h-[1.2rem] w-[1.2rem]" />

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

@@ -1,13 +1,12 @@
+import { poppins } from '@/lib/fonts';
+import '@/styles/globals.css';
 import { type Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import '../styles/globals.css';
 import { ThemeProvider } from './_components/theme-provider';
 
-const inter = Inter({ subsets: ['latin'] });
-
 export const metadata: Metadata = {
-  title: 'IMPHNEN - Ingin Menjadi Programmer Handal?',
-  description: 'Komunitas belajar programming untuk semua level',
+  title: 'IMPHNEN - Ingin Menjadi Programmer Handal Namung Enggan Ngonding',
+  description:
+    'Komunitas Ingin Menjadi Programmer Handal Namung Enggan Ngonding',
 };
 
 export default function RootLayout({
@@ -17,7 +16,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="id" suppressHydrationWarning>
-      <body className={inter.className}>
+      <body className={poppins.className}>
         <ThemeProvider
           attribute="class"
           defaultTheme="system"

apps/landing/src/app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -0,0 +1,27 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import type { Metadata } from 'next';
+
+import config from '@/payload.config';
+import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views';
+import { importMap } from '../importMap';
+
+type Args = {
+  params: Promise<{
+    segments: string[];
+  }>;
+  searchParams: Promise<{
+    [key: string]: string | string[];
+  }>;
+};
+
+export const generateMetadata = ({
+  params,
+  searchParams,
+}: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams });
+
+const NotFound = ({ params, searchParams }: Args) =>
+  NotFoundPage({ config, params, searchParams, importMap });
+
+export default NotFound;

apps/landing/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -0,0 +1,27 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import type { Metadata } from 'next';
+
+import config from '@/payload.config';
+import { RootPage, generatePageMetadata } from '@payloadcms/next/views';
+import { importMap } from '../importMap';
+
+type Args = {
+  params: Promise<{
+    segments: string[];
+  }>;
+  searchParams: Promise<{
+    [key: string]: string | string[];
+  }>;
+};
+
+export const generateMetadata = ({
+  params,
+  searchParams,
+}: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams });
+
+const Page = ({ params, searchParams }: Args) =>
+  RootPage({ config, params, searchParams, importMap });
+
+export default Page;

apps/landing/src/app/(payload)/admin/importMap.js

@@ -0,0 +1,5 @@
+import { S3ClientUploadHandler as S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24 } from '@payloadcms/storage-s3/client'
+
+export const importMap = {
+  "@payloadcms/storage-s3/client#S3ClientUploadHandler": S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24
+}

apps/landing/src/app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,19 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@/payload.config';
+import '@payloadcms/next/css';
+import {
+  REST_DELETE,
+  REST_GET,
+  REST_OPTIONS,
+  REST_PATCH,
+  REST_POST,
+  REST_PUT,
+} from '@payloadcms/next/routes';
+
+export const GET = REST_GET(config);
+export const POST = REST_POST(config);
+export const DELETE = REST_DELETE(config);
+export const PATCH = REST_PATCH(config);
+export const PUT = REST_PUT(config);
+export const OPTIONS = REST_OPTIONS(config);

apps/landing/src/app/(payload)/api/graphql-playground/route.ts

@@ -0,0 +1,7 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@/payload.config';
+import '@payloadcms/next/css';
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes';
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config);

apps/landing/src/app/(payload)/api/graphql/route.ts

@@ -0,0 +1,8 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@/payload.config';
+import { GRAPHQL_POST, REST_OPTIONS } from '@payloadcms/next/routes';
+
+export const POST = GRAPHQL_POST(config);
+
+export const OPTIONS = REST_OPTIONS(config);