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-e2e/eslint.config.mjs

@@ -1,12 +0,0 @@
-import playwright from 'eslint-plugin-playwright';
-import baseConfig from '../../eslint.config.mjs';
-
-export default [
-  playwright.configs['flat/recommended'],
-  ...baseConfig,
-  {
-    files: ['**/*.ts', '**/*.js'],
-    // Override or add rules here
-    rules: {},
-  },
-];

apps/landing-e2e/playwright.config.ts

@@ -1,68 +0,0 @@
-import { defineConfig, devices } from '@playwright/test';
-import { nxE2EPreset } from '@nx/playwright/preset';
-import { workspaceRoot } from '@nx/devkit';
-
-// For CI, you may want to set BASE_URL to the deployed application.
-const baseURL = process.env['BASE_URL'] || 'http://localhost:3000';
-
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig({
-  ...nxE2EPreset(__filename, { testDir: './src' }),
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-  use: {
-    baseURL,
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
-  },
-  /* Run your local dev server before starting the tests */
-  webServer: {
-    command: 'npx nx run landing:start',
-    url: 'http://localhost:3000',
-    reuseExistingServer: !process.env.CI,
-    cwd: workspaceRoot,
-  },
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-
-    // Uncomment for mobile browsers support
-    /* {
-      name: 'Mobile Chrome',
-      use: { ...devices['Pixel 5'] },
-    },
-    {
-      name: 'Mobile Safari',
-      use: { ...devices['iPhone 12'] },
-    }, */
-
-    // Uncomment for branded browsers
-    /* {
-      name: 'Microsoft Edge',
-      use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    },
-    {
-      name: 'Google Chrome',
-      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    } */
-  ],
-});

apps/landing-e2e/project.json

@@ -1,10 +0,0 @@
-{
-  "name": "landing-e2e",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
-  "sourceRoot": "apps/landing-e2e/src",
-  "tags": [],
-  "implicitDependencies": ["landing"],
-  "// targets": "to see all targets run: nx show project landing-e2e --web",
-  "targets": {}
-}

apps/landing-e2e/src/example.spec.ts

@@ -1,8 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test('has title', async ({ page }) => {
-  await page.goto('/');
-
-  // Expect h1 to contain a substring.
-  expect(await page.locator('h1').innerText()).toContain('Welcome');
-});

apps/landing-e2e/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "allowJs": true,
-    "outDir": "../../dist/out-tsc",
-    "sourceMap": false,
-    "module": "commonjs"
-  },
-  "include": [
-    "**/*.ts",
-    "**/*.js",
-    "playwright.config.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.spec.js",
-    "src/**/*.test.ts",
-    "src/**/*.test.js",
-    "src/**/*.d.ts"
-  ]
-}

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/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;

apps/landing/project.json

@@ -5,5 +5,20 @@
   "projectType": "application",
   "tags": [],
   "// targets": "to see all targets run: nx show project landing --web",
-  "targets": {}
+  "targets": {
+    "serve": {
+      "executor": "@nx/next:server",
+      "options": {
+        "buildTarget": "landing:build",
+        "dev": true
+      }
+    },
+    "build": {
+      "executor": "@nx/next:build",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/apps/landing"
+      }
+    }
+  }
 }

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

@@ -0,0 +1,78 @@
+'use client';
+
+import { CallToActionSection } from '@/payload-types';
+import { Button } from '@components/atoms';
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+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 });
+
+  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">
+                {title}{' '}
+                <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                  {highlightedTitle}
+                </span>
+              </h2>
+              <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
+                {subtitle}
+              </p>
+
+              <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                <Button
+                  size="lg"
+                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 font-bold text-black hover:text-white cursor-pointer"
+                  onClick={() => window.open(primaryButtonLink, '_blank')}
+                >
+                  {primaryButtonLabel}
+                </Button>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="border-primary hover:bg-primary/10"
+                  onClick={() => window.open(secondaryButtonLink, '_blank')}
+                >
+                  {secondaryButtonLabel}
+                </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/__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

@@ -0,0 +1,95 @@
+'use client';
+
+import { FeaturesSection } from '@/payload-types';
+import { Icon } from '@iconify/react';
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+export function Features(props: FeaturesSection) {
+  const { heading, subheading, features } = 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="fitur"
+      className="w-full py-20 md:py-32 relative overflow-hidden"
+    >
+      <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" />
+      </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 }}
+            transition={{ duration: 0.5 }}
+          >
+            <div className="inline-block rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary">
+              Fitur Unggulan
+            </div>
+            <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl">
+              {heading}
+            </h2>
+            <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
+              {subheading}
+            </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'}
+        >
+          {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"
+              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-primary/10 group-hover:bg-primary/20 transition-colors">
+                  <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>
+              </div>
+
+              <div className="absolute bottom-0 left-0 h-1 w-0 bg-gradient-to-r from-primary to-blue-400 group-hover:w-full transition-all duration-300" />
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,144 @@
+'use client';
+
+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(props: LearningResourcesSection) {
+  const { resources, featured, title, description } = 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="sumber-belajar"
+      className="w-full py-20 md:py-32 relative overflow-hidden"
+    >
+      <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
+            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/tight lg:text-5xl">
+              {title}
+            </h2>
+            <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
+              {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((r, i) => (
+            <motion.div
+              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 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">{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')}
+                >
+                  {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>
+        <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 } : {}}
+          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 w-fit">
+                {featured.label}
+              </div>
+              <h3 className="text-2xl md:text-3xl font-bold mb-4">
+                {featured.title}
+              </h3>
+              <p className="text-muted-foreground mb-6">
+                {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 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>
+              </div>
+            </div>
+            <div className="relative h-64 md:h-auto">
+              <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-blue-400/20" />
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="w-16 h-16 rounded-full bg-background/80 backdrop-blur-sm flex items-center justify-center cursor-pointer hover:bg-background transition-colors">
+                  <div className="w-0 h-0 border-t-8 border-t-transparent border-l-12 border-l-primary border-b-8 border-b-transparent ml-1" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,208 @@
+import Link from 'next/link';
+
+export default function Footer() {
+  return (
+    <footer className="w-full border-t bg-background py-12 md:py-16">
+      <div className="container px-4 md:px-6">
+        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                IMPHNEN
+              </span>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Ingin Menjadi Programmer Handal merupakan komunitas Programmer
+              Indonesia.
+            </p>
+            <div className="flex space-x-4">
+              <Link
+                href="#"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
+                </svg>
+              </Link>
+              <Link
+                href="#"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" />
+                </svg>
+              </Link>
+              <Link
+                href="#"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
+                </svg>
+              </Link>
+              <Link
+                href="#"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z" />
+                </svg>
+              </Link>
+            </div>
+          </div>
+          <div className="space-y-4">
+            <h3 className="text-lg font-bold">Tautan Cepat</h3>
+            <ul className="space-y-2">
+              <li>
+                <Link
+                  href="#fitur"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Fitur
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="#komunitas"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Komunitas
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="#sumber-belajar"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Sumber Belajar
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="#testimoni"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Testimoni
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <div className="space-y-4">
+            <h3 className="text-lg font-bold">Sumber Belajar</h3>
+            <ul className="space-y-2">
+              <li>
+                <Link
+                  href="#"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Video Tutorial
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="#"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Artikel
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="#"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Tantangan Koding
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="#"
+                  className="text-sm text-muted-foreground hover:text-foreground"
+                >
+                  Sharing Session
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <div className="space-y-4">
+            <h3 className="text-lg font-bold">Bahasa Pemrograman</h3>
+            <div className="flex flex-wrap gap-2">
+              <span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/10 dark:bg-blue-900/30 dark:text-blue-400 dark:ring-blue-400/20">
+                PHP
+              </span>
+              <span className="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-yellow-600/10 dark:bg-yellow-900/30 dark:text-yellow-400 dark:ring-yellow-400/20">
+                JavaScript
+              </span>
+              <span className="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/10 dark:bg-green-900/30 dark:text-green-400 dark:ring-green-400/20">
+                Python
+              </span>
+              <span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/10 dark:bg-blue-900/30 dark:text-blue-400 dark:ring-blue-400/20">
+                C#
+              </span>
+              <span className="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10 dark:bg-red-900/30 dark:text-red-400 dark:ring-red-400/20">
+                Java
+              </span>
+              <span className="inline-flex items-center rounded-md bg-cyan-50 px-2 py-1 text-xs font-medium text-cyan-700 ring-1 ring-inset ring-cyan-600/10 dark:bg-cyan-900/30 dark:text-cyan-400 dark:ring-cyan-400/20">
+                Go
+              </span>
+              <span className="inline-flex items-center rounded-md bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-600/10 dark:bg-orange-900/30 dark:text-orange-400 dark:ring-orange-400/20">
+                Rust
+              </span>
+              <span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/10 dark:bg-blue-900/30 dark:text-blue-400 dark:ring-blue-400/20">
+                HTML
+              </span>
+            </div>
+
+            <div className="mt-6">
+              <h3 className="text-lg font-bold mb-2">Newsletter</h3>
+              <p className="text-sm text-muted-foreground mb-2">
+                Dapatkan update terbaru dari kami
+              </p>
+              <div className="flex gap-2">
+                <input
+                  type="email"
+                  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 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>
+            </div>
+          </div>
+        </div>
+        <div className="mt-8 border-t pt-8 text-center">
+          <p className="text-xs text-muted-foreground">
+            © {new Date().getFullYear()} IMPHNEN - Ingin Menjadi Programmer
+            Handal, Namun Enggan Ngoding. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

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

@@ -0,0 +1,38 @@
+'use client';
+
+import { Button, MoonIcon, SunIcon } from '@components/atoms';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+export function SimpleThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  const toggleTheme = () => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  };
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={toggleTheme}
+      className="focus-visible:ring-0 cursor-pointer"
+    >
+      {theme === 'dark' ? (
+        <SunIcon className="h-[1.2rem] w-[1.2rem]" />
+      ) : (
+        <MoonIcon className="h-[1.2rem] w-[1.2rem]" />
+      )}
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}

apps/landing/src/app/(frontend)/_components/theme-provider.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import type { ThemeProviderProps } from 'next-themes';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

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

@@ -0,0 +1,31 @@
+import { poppins } from '@/lib/fonts';
+import '@/styles/globals.css';
+import { type Metadata } from 'next';
+import { ThemeProvider } from './_components/theme-provider';
+
+export const metadata: Metadata = {
+  title: 'IMPHNEN - Ingin Menjadi Programmer Handal Namung Enggan Ngonding',
+  description:
+    'Komunitas Ingin Menjadi Programmer Handal Namung Enggan Ngonding',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="id" suppressHydrationWarning>
+      <body className={poppins.className}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

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);

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

@@ -0,0 +1,35 @@
+/* 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 { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts';
+import type { ServerFunctionClient } from 'payload';
+import React from 'react';
+
+import { importMap } from './admin/importMap.js';
+import './custom.scss';
+
+type Args = {
+  children: React.ReactNode;
+};
+
+const serverFunction: ServerFunctionClient = async function (args) {
+  'use server';
+  return handleServerFunctions({
+    ...args,
+    config,
+    importMap,
+  });
+};
+
+const Layout = ({ children }: Args) => (
+  <RootLayout
+    config={config}
+    importMap={importMap}
+    serverFunction={serverFunction}
+  >
+    {children}
+  </RootLayout>
+);
+
+export default Layout;

apps/landing/src/app/api/hello/route.ts

@@ -1,3 +0,0 @@
-export async function GET(request: Request) {
-  return new Response('Hello, from API!');
-}

apps/landing/src/app/global.css

@@ -1,72 +0,0 @@
-@import 'tailwindcss';
-@source './pages/**/*.{ts,tsx}';
-@source './components/**/*.{ts,tsx}';
-@source './app/**/*.{ts,tsx}';
-@source './src/**/*.{ts,tsx}';
-@source '*.{js,ts,jsx,tsx,mdx}';
-
-@theme {
-  --border: hsl(var(--border));
-  --input: hsl(var(--input));
-  --ring: hsl(var(--ring));
-  --background: hsl(var(--background));
-  --foreground: hsl(var(--foreground));
-
-  --primary: hsl(var(--primary));
-  --primary-foreground: hsl(var(--primary-foreground));
-
-  --secondary: hsl(var(--secondary));
-  --secondary-foreground: hsl(var(--secondary-foreground));
-
-  --destructive: hsl(var(--destructive));
-  --destructive-foreground: hsl(var(--destructive-foreground));
-
-  --muted: hsl(var(--muted));
-  --muted-foreground: hsl(var(--muted-foreground));
-
-  --accent: hsl(var(--accent));
-  --accent-foreground: hsl(var(--accent-foreground));
-
-  --popover: hsl(var(--popover));
-  --popover-foreground: hsl(var(--popover-foreground));
-
-  --card: hsl(var(--card));
-  --card-foreground: hsl(var(--card-foreground));
-
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
-}
-
-@layer base {
-  html {
-    /* Optional kalau mau style dasar */
-  }
-
-  /* Accordion animation (keyframes dan animation) */
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-
-  .accordion-down {
-    animation: accordion-down 0.2s ease-out;
-  }
-
-  .accordion-up {
-    animation: accordion-up 0.2s ease-out;
-  }
-}

apps/landing/src/app/layout.tsx

@@ -1,18 +0,0 @@
-import './global.css';
-
-export const metadata = {
-  title: 'Welcome to landing',
-  description: 'Generated by create-nx-workspace',
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  );
-}

apps/landing/src/app/page.tsx

@@ -1,467 +0,0 @@
-export default function Index() {
-  /*
-   * Replace the elements below with your own.
-   *
-   * Note: The corresponding styles are in the ./index.none file.
-   */
-  return (
-    <>
-      <div className="wrapper">
-        <div className="container">
-          <div id="welcome">
-            <h1>
-              <span> Hello there, </span>
-              Welcome landing 👋
-            </h1>
-          </div>
-
-          <div id="hero" className="rounded">
-            <div className="text-container">
-              <h2>
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
-                  />
-                </svg>
-                <span>You&apos;re up and running</span>
-              </h2>
-              <a href="#commands"> What&apos;s next? </a>
-            </div>
-            <div className="logo-container">
-              <svg
-                fill="currentColor"
-                role="img"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
-              </svg>
-            </div>
-          </div>
-
-          <div id="middle-content">
-            <div id="learning-materials" className="rounded shadow">
-              <h2>Learning materials</h2>
-              <a
-                href="https://nx.dev/getting-started/intro?utm_source=nx-project"
-                target="_blank"
-                rel="noreferrer"
-                className="list-item-link"
-              >
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
-                  />
-                </svg>
-                <span>
-                  Documentation
-                  <span> Everything is in there </span>
-                </span>
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M9 5l7 7-7 7"
-                  />
-                </svg>
-              </a>
-              <a
-                href="https://nx.dev/blog/?utm_source=nx-project"
-                target="_blank"
-                rel="noreferrer"
-                className="list-item-link"
-              >
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
-                  />
-                </svg>
-                <span>
-                  Blog
-                  <span> Changelog, features & events </span>
-                </span>
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M9 5l7 7-7 7"
-                  />
-                </svg>
-              </a>
-              <a
-                href="https://www.youtube.com/@NxDevtools/videos?utm_source=nx-project&sub_confirmation=1"
-                target="_blank"
-                rel="noreferrer"
-                className="list-item-link"
-              >
-                <svg
-                  role="img"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <title>YouTube</title>
-                  <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
-                </svg>
-                <span>
-                  YouTube channel
-                  <span> Nx Show, talks & tutorials </span>
-                </span>
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M9 5l7 7-7 7"
-                  />
-                </svg>
-              </a>
-              <a
-                href="https://nx.dev/react-tutorial/1-code-generation?utm_source=nx-project"
-                target="_blank"
-                rel="noreferrer"
-                className="list-item-link"
-              >
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
-                  />
-                </svg>
-                <span>
-                  Interactive tutorials
-                  <span> Create an app, step-by-step </span>
-                </span>
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M9 5l7 7-7 7"
-                  />
-                </svg>
-              </a>
-              <a
-                href="https://nxplaybook.com/?utm_source=nx-project"
-                target="_blank"
-                rel="noreferrer"
-                className="list-item-link"
-              >
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path d="M12 14l9-5-9-5-9 5 9 5z" />
-                  <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
-                  />
-                </svg>
-                <span>
-                  Video courses
-                  <span> Nx custom courses </span>
-                </span>
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M9 5l7 7-7 7"
-                  />
-                </svg>
-              </a>
-            </div>
-            <div id="other-links">
-              <a
-                id="nx-console"
-                className="button-pill rounded shadow"
-                href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <svg
-                  fill="currentColor"
-                  role="img"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <title>Visual Studio Code</title>
-                  <path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
-                </svg>
-                <span>
-                  Install Nx Console for VSCode
-                  <span>The official VSCode extension for Nx.</span>
-                </span>
-              </a>
-              <a
-                id="nx-console-jetbrains"
-                className="button-pill rounded shadow"
-                href="https://plugins.jetbrains.com/plugin/21060-nx-console"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <svg
-                  height="48"
-                  width="48"
-                  viewBox="20 20 60 60"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path d="m22.5 22.5h60v60h-60z" />
-                  <g fill="#fff">
-                    <path d="m29.03 71.25h22.5v3.75h-22.5z" />
-                    <path d="m28.09 38 1.67-1.58a1.88 1.88 0 0 0 1.47.87c.64 0 1.06-.44 1.06-1.31v-5.98h2.58v6a3.48 3.48 0 0 1 -.87 2.6 3.56 3.56 0 0 1 -2.57.95 3.84 3.84 0 0 1 -3.34-1.55z" />
-                    <path d="m36 30h7.53v2.19h-5v1.44h4.49v2h-4.42v1.49h5v2.21h-7.6z" />
-                    <path d="m47.23 32.29h-2.8v-2.29h8.21v2.27h-2.81v7.1h-2.6z" />
-                    <path d="m29.13 43.08h4.42a3.53 3.53 0 0 1 2.55.83 2.09 2.09 0 0 1 .6 1.53 2.16 2.16 0 0 1 -1.44 2.09 2.27 2.27 0 0 1 1.86 2.29c0 1.61-1.31 2.59-3.55 2.59h-4.44zm5 2.89c0-.52-.42-.8-1.18-.8h-1.29v1.64h1.24c.79 0 1.25-.26 1.25-.81zm-.9 2.66h-1.57v1.73h1.62c.8 0 1.24-.31 1.24-.86 0-.5-.4-.87-1.27-.87z" />
-                    <path d="m38 43.08h4.1a4.19 4.19 0 0 1 3 1 2.93 2.93 0 0 1 .9 2.19 3 3 0 0 1 -1.93 2.89l2.24 3.27h-3l-1.88-2.84h-.87v2.84h-2.56zm4 4.5c.87 0 1.39-.43 1.39-1.11 0-.75-.54-1.12-1.4-1.12h-1.44v2.26z" />
-                    <path d="m49.59 43h2.5l4 9.44h-2.79l-.67-1.69h-3.63l-.67 1.69h-2.71zm2.27 5.73-1-2.65-1.06 2.65z" />
-                    <path d="m56.46 43.05h2.6v9.37h-2.6z" />
-                    <path d="m60.06 43.05h2.42l3.37 5v-5h2.57v9.37h-2.26l-3.53-5.14v5.14h-2.57z" />
-                    <path d="m68.86 51 1.45-1.73a4.84 4.84 0 0 0 3 1.13c.71 0 1.08-.24 1.08-.65 0-.4-.31-.6-1.59-.91-2-.46-3.53-1-3.53-2.93 0-1.74 1.37-3 3.62-3a5.89 5.89 0 0 1 3.86 1.25l-1.26 1.84a4.63 4.63 0 0 0 -2.62-.92c-.63 0-.94.25-.94.6 0 .42.32.61 1.63.91 2.14.46 3.44 1.16 3.44 2.91 0 1.91-1.51 3-3.79 3a6.58 6.58 0 0 1 -4.35-1.5z" />
-                  </g>
-                </svg>
-                <span>
-                  Install Nx Console for JetBrains
-                  <span>
-                    Available for WebStorm, Intellij IDEA Ultimate and more!
-                  </span>
-                </span>
-              </a>
-              <div id="nx-cloud" className="rounded shadow">
-                <div>
-                  <svg
-                    id="nx-cloud-logo"
-                    role="img"
-                    xmlns="http://www.w3.org/2000/svg"
-                    stroke="currentColor"
-                    fill="transparent"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeWidth="2"
-                      d="M23 3.75V6.5c-3.036 0-5.5 2.464-5.5 5.5s-2.464 5.5-5.5 5.5-5.5 2.464-5.5 5.5H3.75C2.232 23 1 21.768 1 20.25V3.75C1 2.232 2.232 1 3.75 1h16.5C21.768 1 23 2.232 23 3.75Z"
-                    />
-                    <path
-                      strokeWidth="2"
-                      d="M23 6v14.1667C23 21.7307 21.7307 23 20.1667 23H6c0-3.128 2.53867-5.6667 5.6667-5.6667 3.128 0 5.6666-2.5386 5.6666-5.6666C17.3333 8.53867 19.872 6 23 6Z"
-                    />
-                  </svg>
-                  <h2>
-                    Nx Cloud
-                    <span>Enable faster CI & better DX</span>
-                  </h2>
-                </div>
-                <p>
-                  You can activate distributed tasks executions and caching by
-                  running:
-                </p>
-                <pre>nx connect</pre>
-                <a
-                  href="https://nx.app/?utm_source=nx-project"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {' '}
-                  What is Nx Cloud?{' '}
-                </a>
-              </div>
-              <a
-                id="nx-repo"
-                className="button-pill rounded shadow"
-                href="https://github.com/nrwl/nx?utm_source=nx-project"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <svg
-                  fill="currentColor"
-                  role="img"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
-                </svg>
-                <span>
-                  Nx is open source
-                  <span> Love Nx? Give us a star! </span>
-                </span>
-              </a>
-            </div>
-          </div>
-
-          <div id="commands" className="rounded shadow">
-            <h2>Next steps</h2>
-            <p>Here are some things you can do with Nx:</p>
-            <details>
-              <summary>
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                  />
-                </svg>
-                Add UI library
-              </summary>
-              <pre>
-                <span># Generate UI lib</span>
-                nx g @nx/next:library ui
-                <span># Add a component</span>
-                nx g @nx/next:component ui/src/lib/button
-              </pre>
-            </details>
-            <details>
-              <summary>
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                  />
-                </svg>
-                View project details
-              </summary>
-              <pre>nx show project landing --web</pre>
-            </details>
-            <details>
-              <summary>
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                  />
-                </svg>
-                View interactive project graph
-              </summary>
-              <pre>nx graph</pre>
-            </details>
-            <details>
-              <summary>
-                <svg
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                  />
-                </svg>
-                Run affected commands
-              </summary>
-              <pre>
-                <span># see what&apos;s been affected by changes</span>
-                nx affected:graph
-                <span># run tests for current changes</span>
-                nx affected:test
-                <span># run e2e tests for current changes</span>
-                nx affected:e2e
-              </pre>
-            </details>
-          </div>
-
-          <p id="love">
-            Carefully crafted with
-            <svg
-              fill="currentColor"
-              stroke="none"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-              />
-            </svg>
-          </p>
-        </div>
-      </div>
-    </>
-  );
-}

apps/landing/src/collections/CallToActionSection.ts

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,65 @@
+import { GlobalConfig } from 'payload';
+
+export const CommunitiesSection: GlobalConfig = {
+  slug: 'communities-section',
+  label: 'Communities Section',
+  fields: [
+    {
+      name: 'items',
+      type: 'array',
+      required: true,
+      defaultValue: [
+        {
+          iconName: 'tabler:brand-facebook',
+          title: 'Facebook Group',
+          description:
+            'Bergabunglah dengan grup Facebook kami untuk diskusi santai dan berbagi artikel menarik.',
+          buttonText: 'Gabung Sekarang',
+          buttonLink: 'https://facebook.com/groups/programmerhandal',
+        },
+        {
+          iconName: 'tabler:brand-instagram',
+          title: 'Instagram',
+          description:
+            'Ikuti kami di Instagram untuk tips programming, konten inspiratif, dan info event terbaru.',
+          buttonText: 'Follow Kami',
+          buttonLink: 'https://www.instagram.com/imphnen.dev',
+        },
+        {
+          iconName: 'tabler:brand-discord-filled',
+          title: 'Discord Server',
+          description:
+            'Diskusikan langsung dengan sesama programmer dan dapatkan bantuan langsung dari para ahli.',
+          buttonText: 'Join Server',
+          buttonLink: 'https://discord.com/invite/imphnen',
+        },
+      ],
+      fields: [
+        {
+          name: 'iconName',
+          type: 'text',
+          required: true,
+        },
+        { name: 'title', type: 'text', required: true },
+        { name: 'description', type: 'textarea', required: true },
+        { name: 'buttonText', type: 'text', required: true },
+        { name: 'buttonLink', type: 'text', required: true },
+      ],
+    },
+    {
+      name: 'stats',
+      type: 'array',
+      required: true,
+      defaultValue: [
+        { value: '100K+', label: 'Member Aktif' },
+        { value: '50+', label: 'Event Bulanan' },
+        { value: '100+', label: 'Mentor Profesional' },
+        { value: '5K+', label: 'Diskusi Mingguan' },
+      ],
+      fields: [
+        { name: 'value', type: 'text', required: true },
+        { name: 'label', type: 'text', required: true },
+      ],
+    },
+  ],
+};

apps/landing/src/collections/FeaturesSection.ts

@@ -0,0 +1,65 @@
+import { GlobalConfig } from 'payload';
+
+export const FeaturesSection: GlobalConfig = {
+  slug: 'features-section',
+  label: 'Features Section',
+  fields: [
+    {
+      name: 'heading',
+      type: 'text',
+      defaultValue: 'Belajar programming dengan cara yang lebih baik',
+    },
+    {
+      name: 'subheading',
+      type: 'text',
+      defaultValue:
+        'IMPHNEN hadir dengan berbagai fitur untuk membantu kamu menjadi programmer handal tanpa harus pusing dengan coding.',
+    },
+    {
+      name: 'features',
+      type: 'array',
+      defaultValue: [
+        {
+          iconName: 'tabler:device-laptop',
+          title: 'Belajar Tanpa Koding',
+          description:
+            'Pelajari konsep programming dengan cara yang mudah dipahami tanpa harus menulis kode yang rumit.',
+        },
+        {
+          iconName: 'tabler:users',
+          title: 'Komunitas Supportif',
+          description:
+            'Bergabunglah dengan komunitas programmer Indonesia yang siap membantu dan berbagi pengalaman.',
+        },
+        {
+          iconName: 'tabler:book',
+          title: 'Tutorial Interaktif',
+          description:
+            'Akses tutorial interaktif yang membuat konsep programming lebih mudah untuk dipahami.',
+        },
+        {
+          iconName: 'tabler:code',
+          title: 'Proyek Praktis',
+          description:
+            'Terapkan pengetahuan Anda dalam proyek nyata dengan panduan langkah demi langkah.',
+        },
+      ],
+      fields: [
+        {
+          name: 'iconName',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'title',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'description',
+          type: 'textarea',
+        },
+      ],
+    },
+  ],
+};

apps/landing/src/collections/HeroSection.ts

@@ -0,0 +1,104 @@
+import type { GlobalConfig } from 'payload';
+
+export const HeroSection: GlobalConfig = {
+  slug: 'hero-section',
+  label: 'Hero Section',
+  fields: [
+    {
+      name: 'heroImage',
+      label: 'Hero Image',
+      type: 'upload',
+      relationTo: 'media',
+      required: true,
+    },
+    {
+      name: 'badgeText',
+      label: 'Badge Text',
+      type: 'text',
+      required: true,
+      defaultValue: 'Komunitas Programmer Indonesia',
+    },
+    {
+      name: 'title',
+      label: 'Main Title',
+      type: 'text',
+      required: true,
+      defaultValue: 'Programmer Handal,',
+    },
+    {
+      name: 'highlight',
+      label: 'Highlight Text',
+      type: 'text',
+      required: true,
+      defaultValue: 'Tanpa Ribet',
+    },
+    {
+      name: 'description',
+      label: 'Description',
+      type: 'textarea',
+      required: true,
+      defaultValue:
+        'Temukan potensi programming Anda bersama komunitas yang mendukung, tutorial interaktif, dan sumber daya berkualitas tinggi.',
+    },
+    {
+      type: 'group',
+      name: 'buttons',
+      label: 'Buttons',
+      fields: [
+        {
+          name: 'primaryLabel',
+          label: 'Primary Button Label',
+          type: 'text',
+          required: true,
+          defaultValue: 'Mulai Belajar',
+        },
+        {
+          name: 'primaryUrl',
+          label: 'Primary Button URL',
+          type: 'text',
+          required: true,
+          defaultValue: 'https://facebook.com/groups/programmerhandal',
+        },
+        {
+          name: 'secondaryLabel',
+          label: 'Secondary Button Label',
+          type: 'text',
+          required: true,
+          defaultValue: 'Gabung Discord',
+        },
+        {
+          name: 'secondaryUrl',
+          label: 'Secondary Button URL',
+          type: 'text',
+          required: true,
+          defaultValue: 'https://discord.com/invite/imphnen',
+        },
+      ],
+    },
+    {
+      name: 'stats',
+      label: 'Statistics',
+      type: 'array',
+      minRows: 1,
+      fields: [
+        {
+          name: 'value',
+          label: 'Value',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'label',
+          label: 'Label',
+          type: 'text',
+          required: true,
+        },
+      ],
+      defaultValue: [
+        { value: '180K+', label: 'Member' },
+        { value: '500+', label: 'Tutorial' },
+        { value: '24/7', label: 'Yapping' },
+      ],
+    },
+  ],
+};

apps/landing/src/collections/LearningResourcesSection.ts

@@ -0,0 +1,117 @@
+// payload config
+import { GlobalConfig } from 'payload';
+
+export const LearningResourcesSection: GlobalConfig = {
+  slug: 'learning-resources-section',
+  label: 'Learning Resources Section',
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+      defaultValue: 'Sumber Belajar',
+    },
+    {
+      name: 'description',
+      type: 'textarea',
+      required: true,
+      defaultValue:
+        'Akses berbagai materi belajar yang akan membantu kamu menguasai konsep programming dengan cara yang menyenangkan.',
+    },
+    {
+      name: 'resources',
+      type: 'array',
+      required: true,
+      fields: [
+        { name: 'icon', type: 'text', required: true },
+        { name: 'title', type: 'text', required: true },
+        { name: 'description', type: 'textarea', required: true },
+        { name: 'buttonText', type: 'text', required: true },
+        { name: 'buttonLink', type: 'text', required: true },
+      ],
+      defaultValue: [
+        {
+          icon: 'tabler:video',
+          title: 'Video Tutorial',
+          description:
+            'Belajar melalui tutorial video dari langkah awal hingga mahir.',
+          buttonText: 'Lihat Semua Video',
+          buttonLink: '#',
+        },
+        {
+          icon: 'tabler:article',
+          title: 'Artikel & Tutorial',
+          description:
+            'Pelajari konsep programming melalui artikel yang disusun secara terstruktur.',
+          buttonText: 'Baca Artikel',
+          buttonLink: '#',
+        },
+        {
+          icon: 'tabler:brand-vscode',
+          title: 'Tantangan Koding',
+          description:
+            'Uji kemampuan koding kamu dengan tantangan yang menyenangkan dan menantang.',
+          buttonText: 'Mulai Tantangan',
+          buttonLink: '#',
+        },
+        {
+          icon: 'tabler:device-desktop-share',
+          title: 'Sharing Session',
+          description:
+            'Ikuti sesi berbagi pengalaman dari programmer berpengalaman dan belajar dari pengalaman mereka.',
+          buttonText: 'Jadwal Session',
+          buttonLink: '#',
+        },
+      ],
+    },
+    {
+      name: 'featured',
+      type: 'group',
+      fields: [
+        {
+          name: 'label',
+          type: 'text',
+          required: true,
+          defaultValue: 'Rekomendasi Terbaik',
+        },
+        {
+          name: 'title',
+          type: 'text',
+          required: true,
+          defaultValue: 'Kursus Lengkap Web Development',
+        },
+        {
+          name: 'description',
+          type: 'textarea',
+          required: true,
+          defaultValue:
+            'Pelajari HTML, CSS, JavaScript, React, dan Node.js dalam satu kursus komprehensif yang dirancang untuk pemula hingga tingkat menengah.',
+        },
+        {
+          name: 'primaryButtonText',
+          type: 'text',
+          required: true,
+          defaultValue: 'Mulai Kursus',
+        },
+        {
+          name: 'primaryButtonLink',
+          type: 'text',
+          required: true,
+          defaultValue: '#',
+        },
+        {
+          name: 'secondaryButtonText',
+          type: 'text',
+          required: true,
+          defaultValue: 'Lihat Silabus',
+        },
+        {
+          name: 'secondaryButtonLink',
+          type: 'text',
+          required: true,
+          defaultValue: '#',
+        },
+      ],
+    },
+  ],
+};

apps/landing/src/collections/Media.ts

@@ -0,0 +1,16 @@
+import type { CollectionConfig } from 'payload';
+
+export const Media: CollectionConfig = {
+  slug: 'media',
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: 'alt',
+      type: 'text',
+      required: true,
+    },
+  ],
+  upload: true,
+};

apps/landing/src/collections/TestimonialsSection.ts

@@ -0,0 +1,93 @@
+import { GlobalConfig } from 'payload';
+
+export const TestimonialsSection: GlobalConfig = {
+  slug: 'testimonials-section',
+  label: 'Testimonials Section',
+  fields: [
+    {
+      name: 'title',
+      label: 'Section Title',
+      type: 'text',
+      defaultValue: 'Testimoni Member',
+      required: true,
+    },
+    {
+      name: 'subtitle',
+      label: 'Section Subtitle',
+      type: 'textarea',
+      defaultValue:
+        'Apa kata mereka yang telah bergabung dengan komunitas IMPHNEN?',
+      required: true,
+    },
+    {
+      name: 'items',
+      label: 'Testimonials Items',
+      type: 'array',
+      fields: [
+        { name: 'quote', type: 'textarea', label: 'Quote', required: true },
+        { name: 'name', type: 'text', label: 'Name', required: true },
+        { name: 'role', type: 'text', label: 'Role', required: true },
+        {
+          name: 'avatar',
+          type: 'upload',
+          label: 'Avatar',
+          relationTo: 'media',
+          required: true,
+        },
+      ],
+      defaultValue: [
+        {
+          quote:
+            'Saya yang tadinya tidak mengerti apa-apa tentang programming, sekarang bisa membuat website sendiri dengan mudah. Terima kasih IMPHNEN!',
+          name: 'Budi Santoso',
+          role: 'Web Developer Pemula',
+          avatar: { id: '', relationTo: 'media' },
+        },
+        {
+          quote:
+            'Komunitas yang sangat supportif! Setiap pertanyaan selalu dijawab dengan cepat dan jelas. Diskusi programnya mudah dipahami.',
+          name: 'Anita Ratna',
+          role: 'Mobile App Developer',
+          avatar: { id: '', relationTo: 'media' },
+        },
+        {
+          quote:
+            'Server Discord IMPHNEN adalah tempat belajar terbaik untuk programmer pemula seperti saya. Materinya lengkap dan komunitasnya sangat membantu!',
+          name: 'Dedi Permana',
+          role: 'Data Scientist',
+          avatar: { id: '', relationTo: 'media' },
+        },
+      ],
+    },
+    {
+      name: 'stats',
+      label: 'Statistics',
+      type: 'array',
+      fields: [
+        { name: 'value', type: 'text', label: 'Value', required: true },
+        { name: 'label', type: 'text', label: 'Label', required: true },
+      ],
+      defaultValue: [
+        { value: '98%', label: 'Tingkat Kemalasan' },
+        { value: '4.9/5', label: 'Rating Drama' },
+        { value: '85%', label: 'Mendapat Pekerjaan' },
+        { value: '24/7', label: 'Yapping' },
+      ],
+    },
+    {
+      name: 'joinTitle',
+      label: 'Join Section Title',
+      type: 'text',
+      defaultValue: 'Bergabunglah dengan 10,000+ programmer Indonesia lainnya',
+      required: true,
+    },
+    {
+      name: 'joinText',
+      label: 'Join Section Text',
+      type: 'textarea',
+      defaultValue:
+        'Komunitas kami terus berkembang dengan programmer dari berbagai latar belakang dan tingkat keahlian. Bersama-sama, kita belajar, berbagi, dan tumbuh sebagai profesional.',
+      required: true,
+    },
+  ],
+};

apps/landing/src/collections/Users.ts

@@ -0,0 +1,13 @@
+import type { CollectionConfig } from 'payload';
+
+export const Users: CollectionConfig = {
+  slug: 'users',
+  admin: {
+    useAsTitle: 'email',
+  },
+  auth: true,
+  fields: [
+    // Email added by default
+    // Add more fields as needed
+  ],
+};

apps/landing/src/lib/fonts.ts

@@ -0,0 +1,8 @@
+// fonts.ts
+import { Poppins } from 'next/font/google';
+
+export const poppins = Poppins({
+  subsets: ['latin'],
+  weight: ['300', '400', '500', '600', '700'],
+  display: 'swap',
+});

apps/landing/src/lib/format.ts

@@ -0,0 +1,10 @@
+import { Media } from '../payload-types';
+
+export function formatCMSImageDataToMedia(
+  image: number | Media | null | undefined
+): Media | null {
+  if (image && typeof image === 'object' && 'url' in image) {
+    return image as Media;
+  }
+  return null;
+}

apps/landing/src/lib/openapi.ts

@@ -0,0 +1,6 @@
+import type { paths } from '@/openapi-types';
+import createClient from 'openapi-fetch';
+
+export const fetcher = createClient<paths>({
+  baseUrl: 'https://api.imphnen.dev',
+});

apps/landing/src/lib/payload.ts

@@ -0,0 +1,4 @@
+import { getPayload } from 'payload';
+import config from '../payload.config';
+
+export const payload = await getPayload({ config });

apps/landing/src/payload-types.ts

@@ -0,0 +1,591 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * This file was automatically generated by Payload.
+ * DO NOT MODIFY IT BY HAND. Instead, modify your source Payload config,
+ * and re-run `payload generate:types` to regenerate this file.
+ */
+
+/**
+ * Supported timezones in IANA format.
+ *
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "supportedTimezones".
+ */
+export type SupportedTimezones =
+  | 'Pacific/Midway'
+  | 'Pacific/Niue'
+  | 'Pacific/Honolulu'
+  | 'Pacific/Rarotonga'
+  | 'America/Anchorage'
+  | 'Pacific/Gambier'
+  | 'America/Los_Angeles'
+  | 'America/Tijuana'
+  | 'America/Denver'
+  | 'America/Phoenix'
+  | 'America/Chicago'
+  | 'America/Guatemala'
+  | 'America/New_York'
+  | 'America/Bogota'
+  | 'America/Caracas'
+  | 'America/Santiago'
+  | 'America/Buenos_Aires'
+  | 'America/Sao_Paulo'
+  | 'Atlantic/South_Georgia'
+  | 'Atlantic/Azores'
+  | 'Atlantic/Cape_Verde'
+  | 'Europe/London'
+  | 'Europe/Berlin'
+  | 'Africa/Lagos'
+  | 'Europe/Athens'
+  | 'Africa/Cairo'
+  | 'Europe/Moscow'
+  | 'Asia/Riyadh'
+  | 'Asia/Dubai'
+  | 'Asia/Baku'
+  | 'Asia/Karachi'
+  | 'Asia/Tashkent'
+  | 'Asia/Calcutta'
+  | 'Asia/Dhaka'
+  | 'Asia/Almaty'
+  | 'Asia/Jakarta'
+  | 'Asia/Bangkok'
+  | 'Asia/Shanghai'
+  | 'Asia/Singapore'
+  | 'Asia/Tokyo'
+  | 'Asia/Seoul'
+  | 'Australia/Brisbane'
+  | 'Australia/Sydney'
+  | 'Pacific/Guam'
+  | 'Pacific/Noumea'
+  | 'Pacific/Auckland'
+  | 'Pacific/Fiji';
+
+export interface Config {
+  auth: {
+    users: UserAuthOperations;
+  };
+  blocks: {};
+  collections: {
+    users: User;
+    media: Media;
+    'payload-locked-documents': PayloadLockedDocument;
+    'payload-preferences': PayloadPreference;
+    'payload-migrations': PayloadMigration;
+  };
+  collectionsJoins: {};
+  collectionsSelect: {
+    users: UsersSelect<false> | UsersSelect<true>;
+    media: MediaSelect<false> | MediaSelect<true>;
+    'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
+    'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
+    'payload-migrations': PayloadMigrationsSelect<false> | PayloadMigrationsSelect<true>;
+  };
+  db: {
+    defaultIDType: number;
+  };
+  globals: {
+    'hero-section': HeroSection;
+    'features-section': FeaturesSection;
+    'communities-section': CommunitiesSection;
+    'learning-resources-section': LearningResourcesSection;
+    'testimonials-section': TestimonialsSection;
+    'call-to-action-section': CallToActionSection;
+  };
+  globalsSelect: {
+    'hero-section': HeroSectionSelect<false> | HeroSectionSelect<true>;
+    'features-section': FeaturesSectionSelect<false> | FeaturesSectionSelect<true>;
+    '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 & {
+    collection: 'users';
+  };
+  jobs: {
+    tasks: unknown;
+    workflows: unknown;
+  };
+}
+export interface UserAuthOperations {
+  forgotPassword: {
+    email: string;
+    password: string;
+  };
+  login: {
+    email: string;
+    password: string;
+  };
+  registerFirstUser: {
+    email: string;
+    password: string;
+  };
+  unlock: {
+    email: string;
+    password: string;
+  };
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "users".
+ */
+export interface User {
+  id: number;
+  updatedAt: string;
+  createdAt: string;
+  email: string;
+  resetPasswordToken?: string | null;
+  resetPasswordExpiration?: string | null;
+  salt?: string | null;
+  hash?: string | null;
+  loginAttempts?: number | null;
+  lockUntil?: string | null;
+  password?: string | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "media".
+ */
+export interface Media {
+  id: number;
+  alt: string;
+  updatedAt: string;
+  createdAt: string;
+  url?: string | null;
+  thumbnailURL?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  focalX?: number | null;
+  focalY?: number | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-locked-documents".
+ */
+export interface PayloadLockedDocument {
+  id: number;
+  document?:
+    | ({
+        relationTo: 'users';
+        value: number | User;
+      } | null)
+    | ({
+        relationTo: 'media';
+        value: number | Media;
+      } | null);
+  globalSlug?: string | null;
+  user: {
+    relationTo: 'users';
+    value: number | User;
+  };
+  updatedAt: string;
+  createdAt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-preferences".
+ */
+export interface PayloadPreference {
+  id: number;
+  user: {
+    relationTo: 'users';
+    value: number | User;
+  };
+  key?: string | null;
+  value?:
+    | {
+        [k: string]: unknown;
+      }
+    | unknown[]
+    | string
+    | number
+    | boolean
+    | null;
+  updatedAt: string;
+  createdAt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-migrations".
+ */
+export interface PayloadMigration {
+  id: number;
+  name?: string | null;
+  batch?: number | null;
+  updatedAt: string;
+  createdAt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "users_select".
+ */
+export interface UsersSelect<T extends boolean = true> {
+  updatedAt?: T;
+  createdAt?: T;
+  email?: T;
+  resetPasswordToken?: T;
+  resetPasswordExpiration?: T;
+  salt?: T;
+  hash?: T;
+  loginAttempts?: T;
+  lockUntil?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "media_select".
+ */
+export interface MediaSelect<T extends boolean = true> {
+  alt?: T;
+  updatedAt?: T;
+  createdAt?: T;
+  url?: T;
+  thumbnailURL?: T;
+  filename?: T;
+  mimeType?: T;
+  filesize?: T;
+  width?: T;
+  height?: T;
+  focalX?: T;
+  focalY?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-locked-documents_select".
+ */
+export interface PayloadLockedDocumentsSelect<T extends boolean = true> {
+  document?: T;
+  globalSlug?: T;
+  user?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-preferences_select".
+ */
+export interface PayloadPreferencesSelect<T extends boolean = true> {
+  user?: T;
+  key?: T;
+  value?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-migrations_select".
+ */
+export interface PayloadMigrationsSelect<T extends boolean = true> {
+  name?: T;
+  batch?: T;
+  updatedAt?: T;
+  createdAt?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "hero-section".
+ */
+export interface HeroSection {
+  id: number;
+  heroImage: number | Media;
+  badgeText: string;
+  title: string;
+  highlight: string;
+  description: string;
+  buttons: {
+    primaryLabel: string;
+    primaryUrl: string;
+    secondaryLabel: string;
+    secondaryUrl: string;
+  };
+  stats?:
+    | {
+        value: string;
+        label: string;
+        id?: string | null;
+      }[]
+    | null;
+  updatedAt?: string | null;
+  createdAt?: string | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "features-section".
+ */
+export interface FeaturesSection {
+  id: number;
+  heading?: string | null;
+  subheading?: string | null;
+  features?:
+    | {
+        iconName: string;
+        title: string;
+        description?: string | null;
+        id?: string | null;
+      }[]
+    | null;
+  updatedAt?: string | null;
+  createdAt?: string | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "communities-section".
+ */
+export interface CommunitiesSection {
+  id: number;
+  items: {
+    iconName: string;
+    title: string;
+    description: string;
+    buttonText: string;
+    buttonLink: string;
+    id?: string | null;
+  }[];
+  stats: {
+    value: string;
+    label: string;
+    id?: string | null;
+  }[];
+  updatedAt?: string | null;
+  createdAt?: string | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "learning-resources-section".
+ */
+export interface LearningResourcesSection {
+  id: number;
+  title: string;
+  description: string;
+  resources: {
+    icon: string;
+    title: string;
+    description: string;
+    buttonText: string;
+    buttonLink: string;
+    id?: string | null;
+  }[];
+  featured: {
+    label: string;
+    title: string;
+    description: string;
+    primaryButtonText: string;
+    primaryButtonLink: string;
+    secondaryButtonText: string;
+    secondaryButtonLink: string;
+  };
+  updatedAt?: string | null;
+  createdAt?: string | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "testimonials-section".
+ */
+export interface TestimonialsSection {
+  id: number;
+  title: string;
+  subtitle: string;
+  items?:
+    | {
+        quote: string;
+        name: string;
+        role: string;
+        avatar: number | Media;
+        id?: string | null;
+      }[]
+    | null;
+  stats?:
+    | {
+        value: string;
+        label: string;
+        id?: string | null;
+      }[]
+    | null;
+  joinTitle: string;
+  joinText: string;
+  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".
+ */
+export interface HeroSectionSelect<T extends boolean = true> {
+  heroImage?: T;
+  badgeText?: T;
+  title?: T;
+  highlight?: T;
+  description?: T;
+  buttons?:
+    | T
+    | {
+        primaryLabel?: T;
+        primaryUrl?: T;
+        secondaryLabel?: T;
+        secondaryUrl?: T;
+      };
+  stats?:
+    | T
+    | {
+        value?: T;
+        label?: T;
+        id?: T;
+      };
+  updatedAt?: T;
+  createdAt?: T;
+  globalType?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "features-section_select".
+ */
+export interface FeaturesSectionSelect<T extends boolean = true> {
+  heading?: T;
+  subheading?: T;
+  features?:
+    | T
+    | {
+        iconName?: T;
+        title?: T;
+        description?: T;
+        id?: T;
+      };
+  updatedAt?: T;
+  createdAt?: T;
+  globalType?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "communities-section_select".
+ */
+export interface CommunitiesSectionSelect<T extends boolean = true> {
+  items?:
+    | T
+    | {
+        iconName?: T;
+        title?: T;
+        description?: T;
+        buttonText?: T;
+        buttonLink?: T;
+        id?: T;
+      };
+  stats?:
+    | T
+    | {
+        value?: T;
+        label?: T;
+        id?: T;
+      };
+  updatedAt?: T;
+  createdAt?: T;
+  globalType?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "learning-resources-section_select".
+ */
+export interface LearningResourcesSectionSelect<T extends boolean = true> {
+  title?: T;
+  description?: T;
+  resources?:
+    | T
+    | {
+        icon?: T;
+        title?: T;
+        description?: T;
+        buttonText?: T;
+        buttonLink?: T;
+        id?: T;
+      };
+  featured?:
+    | T
+    | {
+        label?: T;
+        title?: T;
+        description?: T;
+        primaryButtonText?: T;
+        primaryButtonLink?: T;
+        secondaryButtonText?: T;
+        secondaryButtonLink?: T;
+      };
+  updatedAt?: T;
+  createdAt?: T;
+  globalType?: T;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "testimonials-section_select".
+ */
+export interface TestimonialsSectionSelect<T extends boolean = true> {
+  title?: T;
+  subtitle?: T;
+  items?:
+    | T
+    | {
+        quote?: T;
+        name?: T;
+        role?: T;
+        avatar?: T;
+        id?: T;
+      };
+  stats?:
+    | T
+    | {
+        value?: T;
+        label?: T;
+        id?: T;
+      };
+  joinTitle?: T;
+  joinText?: T;
+  updatedAt?: T;
+  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".
+ */
+export interface Auth {
+  [k: string]: unknown;
+}
+
+
+declare module 'payload' {
+  export interface GeneratedTypes extends Config {}
+}

apps/landing/src/payload.config.ts

@@ -0,0 +1,78 @@
+import { postgresAdapter } from '@payloadcms/db-postgres';
+import { lexicalEditor } from '@payloadcms/richtext-lexical';
+import { s3Storage } from '@payloadcms/storage-s3';
+import { NodeHttpHandler } from '@smithy/node-http-handler';
+import https from 'https';
+import path from 'path';
+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';
+import { LearningResourcesSection } from './collections/LearningResourcesSection';
+import { Media } from './collections/Media';
+import { TestimonialsSection } from './collections/TestimonialsSection';
+import { Users } from './collections/Users';
+
+const filename = fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
+
+export default buildConfig({
+  admin: {
+    user: Users.slug,
+    importMap: {
+      importMapFile: path.resolve(
+        __dirname,
+        'app',
+        '(payload)',
+        'admin',
+        'importMap.js'
+      ),
+    },
+  },
+  collections: [Users, Media],
+  globals: [
+    HeroSection,
+    FeaturesSection,
+    CommunitiesSection,
+    LearningResourcesSection,
+    TestimonialsSection,
+    CallToActionSection,
+  ],
+  editor: lexicalEditor(),
+  secret: process.env.CMS_SECRET || '',
+  typescript: {
+    outputFile: path.resolve(dirname, 'payload-types.ts'),
+  },
+  db: postgresAdapter({
+    pool: {
+      connectionString: process.env.CMS_POSTGRES_URL || '',
+    },
+  }),
+  sharp,
+  plugins: [
+    s3Storage({
+      collections: {
+        media: {
+          disableLocalStorage: true,
+        },
+      },
+      bucket: 'landing-cms',
+      config: {
+        endpoint: process.env.CMS_STORAGE_ENDPOINT,
+        credentials: {
+          accessKeyId: process.env.CMS_STORAGE_ACCESS_KEY_ID!,
+          secretAccessKey: process.env.CMS_STORAGE_SECRET_ACCESS_KEY!,
+        },
+        region: process.env.CMS_STORAGE_REGION!,
+        forcePathStyle: true,
+        requestHandler: new NodeHttpHandler({
+          httpsAgent: new https.Agent({ rejectUnauthorized: false }),
+        }),
+      },
+    }),
+  ],
+});

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

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

apps/landing/src/services/get-globals-communitues-section.ts

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

apps/landing/src/services/get-globals-features-section.ts

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

apps/landing/src/services/get-globals-hero-section.ts

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

apps/landing/src/services/get-globals-learning-resources-section.ts

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

apps/landing/src/services/get-globals-testimonials-section.ts

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

apps/landing/src/stores/mobile-menu-store.ts

@@ -0,0 +1,12 @@
+import { create } from 'zustand';
+
+interface MobileMenuState {
+  mobileMenuOpen: boolean;
+  toggleMobileMenu: () => void;
+}
+
+export const useMobileMenuStore = create<MobileMenuState>((set) => ({
+  mobileMenuOpen: false,
+  toggleMobileMenu: () =>
+    set((state) => ({ mobileMenuOpen: !state.mobileMenuOpen })),
+}));

apps/landing/src/styles/globals.css

@@ -0,0 +1,22 @@
+@import 'tailwindcss';
+@import '../../../../libs/shadcn-ui/src/index.css';
+@source "../../../../libs/shadcn-ui/src/atoms/**/*.{ts,tsx}";
+
+@layer utilities {
+  .marquee-container {
+    mask-image: linear-gradient(
+      to right,
+      transparent 0%,
+      black 5%,
+      black 95%,
+      transparent 100%
+    );
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent 0%,
+      black 5%,
+      black 95%,
+      transparent 100%
+    );
+  }
+}

apps/landing/tsconfig.json

@@ -2,11 +2,11 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "jsx": "preserve",
-
     "strict": true,
     "noEmit": true,
     "emitDeclarationOnly": false,
     "esModuleInterop": true,
+    "target": "ES2022",
     "module": "esnext",
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
@@ -16,18 +16,27 @@
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "incremental": true,
-    "plugins": [{ "name": "next" }]
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@components/atoms": ["../../libs/shadcn-ui/src/atoms/index.ts"],
+      "@utils/ui": ["../../libs/utils/src/index.ts"],
+      "@/*": ["src/*"]
+    }
   },
   "include": [
-    "**/*.ts",
-    "**/*.tsx",
     "**/*.js",
     "**/*.jsx",
-
+    "**/*.ts",
+    "**/*.tsx",
     "../../apps/landing/.next/types/**/*.ts",
     "../../dist/apps/landing/.next/types/**/*.ts",
-
-    "next-env.d.ts"
+    "next-env.d.ts",
+    ".next/types/**/*.ts"
   ],
   "exclude": ["node_modules", "jest.config.ts", "**/*.spec.ts", "**/*.test.ts"]
 }

libs/shadcn-ui/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/shadcn-ui/README.md

@@ -0,0 +1,7 @@
+# shadcn-ui
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test shadcn-ui` to execute the unit tests via [Vitest](https://vitest.dev/).

libs/shadcn-ui/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@imphnen-frontend-service/service/components",
+    "utils": "@imphnen-frontend-service/service/lib/utils",
+    "ui": "@imphnen-frontend-service/service/components/ui",
+    "lib": "@imphnen-frontend-service/service/lib",
+    "hooks": "@imphnen-frontend-service/service/hooks"
+  },
+  "iconLibrary": "lucide"
+}

libs/shadcn-ui/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@imphnen-frontend-service/shadcn-ui",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.9",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@tailwindcss/vite": "^4.1.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.503.0",
+    "react-icons": "^5.5.0",
+    "tailwind-merge": "^3.2.0",
+    "tailwindcss": "^4.1.4"
+  },
+  "devDependencies": {
+    "tw-animate-css": "^1.2.8"
+  }
+}

libs/shadcn-ui/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "shadcn-ui",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/shadcn-ui/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project shadcn-ui --web",
+  "targets": {}
+}

libs/shadcn-ui/src/atoms/avatar.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
+import { cn } from './className';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-[inherit] bg-secondary text-xs',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarFallback, AvatarImage };

libs/shadcn-ui/src/atoms/button.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from './className';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

libs/shadcn-ui/src/atoms/className.ts

@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};

libs/shadcn-ui/src/atoms/icons.tsx

@@ -0,0 +1,37 @@
+import {
+  LuArrowDown as ArrowDownIcon,
+  LuBookOpen as BookOpenIcon,
+  LuCode as CodeIcon,
+  LuFacebook as FacebookIcon,
+  LuInstagram as InstagramIcon,
+  LuLaptop as LaptopIcon,
+  LuMenu as MenuIcon,
+  LuMessageCircle as MessageCircleIcon,
+  LuMoon as MoonIcon,
+  LuQuote as QuoteIcon,
+  LuShare2 as Share2Icon,
+  LuSparkles as SparklesIcon,
+  LuSun as SunIcon,
+  LuUsers as UsersIcon,
+  LuVideo as VideoIcon,
+  LuX as XIcon,
+} from 'react-icons/lu';
+
+export {
+  ArrowDownIcon,
+  BookOpenIcon,
+  CodeIcon,
+  FacebookIcon,
+  InstagramIcon,
+  LaptopIcon,
+  MenuIcon,
+  MessageCircleIcon,
+  MoonIcon,
+  QuoteIcon,
+  Share2Icon,
+  SparklesIcon,
+  SunIcon,
+  UsersIcon,
+  VideoIcon,
+  XIcon,
+};

libs/shadcn-ui/src/atoms/index.ts

@@ -0,0 +1,3 @@
+export * from './avatar';
+export * from './button';
+export * from './icons';

libs/shadcn-ui/src/index.css

@@ -0,0 +1,134 @@
+@import 'tailwindcss';
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 1rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.623 0.214 259.815);
+  --primary-foreground: oklch(0.97 0.014 254.604);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.623 0.214 259.815);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.623 0.214 259.815);
+  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.623 0.214 259.815);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.546 0.245 262.881);
+  --primary-foreground: oklch(0.379 0.146 265.522);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.488 0.243 264.376);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.546 0.245 262.881);
+  --sidebar-primary-foreground: oklch(0.379 0.146 265.522);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.488 0.243 264.376);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* https://github.com/tailwindlabs/tailwindcss/issues/13129 */
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  width: 100%;
+}
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1400px;
+  }
+}