feat: integrate payload cms to landing page (#25)

* feat: integrate payload cms to landing page

* feat: add payload configuration and update TypeScript target

* fix: update TypeScript paths for payload configuration

* refactor: update config import paths to use local payload.config

* fix: update quotation marks for testimonials to use HTML entities

* fix: include withPayload in Next.js plugins for proper configuration

.env.example

@@ -1 +1,4 @@
-VITE_API_URL=https://api.example.com
+VITE_API_URL=
+
+CMS_SECRET=
+CMS_POSTGRES_URL=

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

@@ -2,6 +2,7 @@
 
 // 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}
@@ -14,9 +15,6 @@ const nextConfig = {
   },
 };
 
-const plugins = [
-  // Add more Next.js plugins to this list if needed.
-  withNx,
-];
+const plugins = [withNx, withPayload];
 
 module.exports = composePlugins(...plugins)(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)/_components/call-to-action.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { Button } from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+export function CallToAction() {
+  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">
+                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="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90"
+                >
+                  Gabung Discord
+                </Button>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="border-primary hover:bg-primary/10"
+                >
+                  Join Facebook Group
+                </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)/_components/community.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import {
+  Button,
+  FacebookIcon,
+  InstagramIcon,
+  MessageCircleIcon,
+} from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+export function Community() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  const communities = [
+    {
+      icon: (
+        <FacebookIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+      ),
+      iconBg: 'bg-blue-100 dark:bg-blue-900',
+      title: 'Facebook Group',
+      description:
+        'Bergabunglah dengan grup Facebook kami untuk diskusi santai dan berbagi artikel menarik.',
+      buttonText: 'Gabung Sekarang',
+      buttonLink: '#',
+    },
+    {
+      icon: (
+        <InstagramIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+      ),
+      iconBg: 'bg-blue-100 dark:bg-blue-900',
+      title: 'Instagram',
+      description:
+        'Ikuti kami di Instagram untuk tips programming, konten inspiratif, dan info event terbaru.',
+      buttonText: 'Follow Kami',
+      buttonLink: '#',
+    },
+    {
+      icon: (
+        <MessageCircleIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+      ),
+      iconBg: 'bg-blue-100 dark:bg-blue-900',
+      title: 'Discord Server',
+      description:
+        'Diskusikan langsung dengan sesama programmer dan dapatkan bantuan langsung dari para ahli.',
+      buttonText: 'Join Server',
+      buttonLink: '#',
+    },
+  ];
+
+  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="komunitas"
+      className="w-full py-20 md:py-32 bg-muted relative overflow-hidden"
+    >
+      {/* Background Elements */}
+      <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}>
+        <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 }}
+          >
+            <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl">
+              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 md:text-lg">
+              Bergabunglah dengan ribuan programmer Indonesia yang saling
+              membantu dan berbagi pengalaman.
+            </p>
+          </motion.div>
+        </div>
+
+        <motion.div
+          className="grid gap-8 md:grid-cols-3"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {communities.map((community, index) => (
+            <motion.div
+              key={index}
+              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 ${community.iconBg}`}
+                >
+                  {community.icon}
+                </div>
+                <h3 className="mb-2 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 group-hover:text-primary-foreground transition-colors duration-300"
+                >
+                  {community.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>
+
+        {/* Community Stats */}
+        <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 } : { opacity: 0, y: 20 }}
+          transition={{ duration: 0.5, delay: 0.3 }}
+        >
+          <div className="space-y-2">
+            <div className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+              10K+
+            </div>
+            <div className="text-sm text-muted-foreground">Member Aktif</div>
+          </div>
+          <div className="space-y-2">
+            <div className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+              50+
+            </div>
+            <div className="text-sm text-muted-foreground">Event Bulanan</div>
+          </div>
+          <div className="space-y-2">
+            <div className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+              100+
+            </div>
+            <div className="text-sm text-muted-foreground">
+              Mentor Profesional
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+              5K+
+            </div>
+            <div className="text-sm text-muted-foreground">
+              Diskusi Mingguan
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,126 @@
+'use client';
+
+import {
+  BookOpenIcon,
+  CodeIcon,
+  LaptopIcon,
+  UsersIcon,
+} from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+export function Features() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  const features = [
+    {
+      icon: <LaptopIcon className="h-6 w-6 text-primary" />,
+      title: 'Belajar Tanpa Koding',
+      description:
+        'Pelajari konsep programming dengan cara yang mudah dipahami tanpa harus menulis kode yang rumit.',
+    },
+    {
+      icon: <UsersIcon className="h-6 w-6 text-primary" />,
+      title: 'Komunitas Supportif',
+      description:
+        'Bergabunglah dengan komunitas programmer Indonesia yang siap membantu dan berbagi pengalaman.',
+    },
+    {
+      icon: <BookOpenIcon className="h-6 w-6 text-primary" />,
+      title: 'Tutorial Interaktif',
+      description:
+        'Akses tutorial interaktif yang membuat konsep programming lebih mudah untuk dipahami.',
+    },
+    {
+      icon: <CodeIcon className="h-6 w-6 text-primary" />,
+      title: 'Proyek Praktis',
+      description:
+        'Terapkan pengetahuan Anda dalam proyek nyata dengan panduan langkah demi langkah.',
+    },
+  ];
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      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"
+    >
+      {/* Background Elements */}
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-gradient-to-b from-background via-background to-muted/50" />
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full bg-gradient-to-tr from-primary/5 to-blue-400/5 blur-3xl" />
+      </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">
+              Belajar programming dengan{' '}
+              <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                cara yang lebih baik
+              </span>
+            </h2>
+            <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
+              IMPHNEN hadir dengan berbagai fitur untuk membantu kamu menjadi
+              programmer handal tanpa harus pusing dengan coding.
+            </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">
+                  {feature.icon}
+                </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)/_components/header.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import {
+  Button,
+  MenuIcon,
+  XIcon,
+} from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { cn } from '@imphnen-frontend-service/utils';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { SimpleThemeToggle } from './simple-theme-toggle';
+
+export function Header() {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = 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'
+      )}
+    >
+      <div className="container flex h-16 items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="relative overflow-hidden rounded">
+            <Image
+              src="/logo.png"
+              alt="IMPHNEN Logo"
+              width={64}
+              height={64}
+              className="object-cover"
+            />
+          </div>
+        </div>
+
+        {/* Desktop Navigation */}
+        <nav className="hidden md:flex items-center gap-8">
+          <Link href="#fitur" className="text-sm font-medium relative group">
+            <span className="transition-colors hover:text-primary">Fitur</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="#komunitas"
+            className="text-sm font-medium relative group"
+          >
+            <span className="transition-colors hover:text-primary">
+              Komunitas
+            </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="#sumber-belajar"
+            className="text-sm font-medium relative group"
+          >
+            <span className="transition-colors hover:text-primary">
+              Sumber Belajar
+            </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="#testimoni"
+            className="text-sm font-medium relative group"
+          >
+            <span className="transition-colors hover:text-primary">
+              Testimoni
+            </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>
+
+        <div className="flex items-center gap-4">
+          <SimpleThemeToggle />
+          <Button className="hidden md:flex bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300">
+            Gabung Discord
+          </Button>
+
+          {/* Mobile Menu Button */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="md:hidden"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          >
+            {mobileMenuOpen ? (
+              <XIcon className="h-6 w-6" />
+            ) : (
+              <MenuIcon className="h-6 w-6" />
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      {mobileMenuOpen && (
+        <div className="md:hidden border-t bg-background/95 backdrop-blur-md">
+          <nav className="container flex flex-col py-4 text-center">
+            <Link
+              href="#fitur"
+              className="py-3 text-sm font-medium border-b border-border/50"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Fitur
+            </Link>
+            <Link
+              href="#komunitas"
+              className="py-3 text-sm font-medium border-b border-border/50"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Komunitas
+            </Link>
+            <Link
+              href="#sumber-belajar"
+              className="py-3 text-sm font-medium border-b border-border/50"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Sumber Belajar
+            </Link>
+            <Link
+              href="#testimoni"
+              className="py-3 text-sm font-medium"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Testimoni
+            </Link>
+            <Button className="mt-4 bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90">
+              Gabung Discord
+            </Button>
+          </nav>
+        </div>
+      )}
+    </header>
+  );
+}

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

@@ -0,0 +1,153 @@
+'use client';
+
+import {
+  Button,
+  CodeIcon,
+  SparklesIcon,
+  UsersIcon,
+} from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+
+export function Hero() {
+  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-20 md:py-32 lg:py-40 overflow-hidden">
+      {/* Background Elements */}
+      <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" />
+
+        {/* Animated Gradient Orbs */}
+        <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.001),
+          }}
+        />
+        <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.001),
+          }}
+        />
+
+        {/* Grid Pattern */}
+        <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>
+
+      <div className="container px-4 md:px-6 relative">
+        <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
+          <motion.div
+            className="flex flex-col justify-center space-y-8"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+          >
+            <div className="inline-flex items-center rounded-full border px-3 py-1 text-sm">
+              <SparklesIcon className="mr-1 h-3.5 w-3.5 text-primary" />
+              <span>Komunitas Programmer Indonesia</span>
+            </div>
+
+            <div className="space-y-4">
+              <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70">
+                Programmer Handal, <br />
+                <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                  Tanpa Ribet
+                </span>
+              </h1>
+              <p className="max-w-[600px] text-muted-foreground md:text-xl">
+                Temukan potensi programming Anda bersama komunitas yang
+                mendukung, tutorial interaktif, dan sumber daya berkualitas
+                tinggi.
+              </p>
+            </div>
+
+            <div className="flex flex-col sm:flex-row gap-4">
+              <a href="https://facebook.com">
+                <Button
+                  size="lg"
+                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300"
+                >
+                  Mulai Belajar
+                </Button>
+              </a>
+              <Button
+                size="lg"
+                variant="outline"
+                className="group relative overflow-hidden border-primary"
+              >
+                <span className="absolute inset-0 bg-gradient-to-r from-primary/10 to-blue-400/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></span>
+                <span className="relative">Gabung Discord</span>
+              </Button>
+            </div>
+
+            <div className="flex items-center gap-8">
+              <div className="flex flex-col items-center">
+                <div className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                  100K+
+                </div>
+                <div className="text-xs text-muted-foreground">Member</div>
+              </div>
+              <div className="h-10 border-r border-border"></div>
+              <div className="flex flex-col items-center">
+                <div className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                  500+
+                </div>
+                <div className="text-xs text-muted-foreground">Tutorial</div>
+              </div>
+              <div className="h-10 border-r border-border"></div>
+              <div className="flex flex-col items-center">
+                <div className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                  24/7
+                </div>
+                <div className="text-xs text-muted-foreground">Yapping</div>
+              </div>
+            </div>
+          </motion.div>
+
+          <motion.div
+            className="relative mx-auto lg:ml-auto"
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+          >
+            <div className="relative">
+              {/* Decorative Elements */}
+              <div className="absolute -top-6 -left-6 w-12 h-12 rounded-lg border border-primary/30 bg-background/50 backdrop-blur-sm flex items-center justify-center">
+                <CodeIcon className="h-6 w-6 text-primary" />
+              </div>
+              <div className="absolute -bottom-6 -right-6 w-12 h-12 rounded-lg border border-blue-400/30 bg-background/50 backdrop-blur-sm flex items-center justify-center">
+                <UsersIcon className="h-6 w-6 text-blue-400" />
+              </div>
+
+              {/* Main Image */}
+              <div className="relative z-10 rounded-2xl overflow-hidden border shadow-2xl">
+                <div className="absolute inset-0 bg-gradient-to-tr from-primary/10 to-blue-400/10" />
+                <Image
+                  src="/hero.jpeg"
+                  width={600}
+                  height={500}
+                  alt="IMPHNEN Programming Community"
+                  className="w-full h-auto object-cover"
+                />
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

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

@@ -0,0 +1,42 @@
+'use client';
+
+import {
+  Button,
+  MoonIcon,
+  SunIcon,
+} from '@imphnen-frontend-service/shadcn-ui/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"
+    >
+      {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/testimonials.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { QuoteIcon } from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { motion, useInView } from 'framer-motion';
+import Image from 'next/image';
+import { useRef } from 'react';
+
+export function Testimonials() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  const testimonials = [
+    {
+      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: '/placeholder.svg?height=64&width=64',
+    },
+    {
+      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: '/placeholder.svg?height=64&width=64',
+    },
+    {
+      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: '/placeholder.svg?height=64&width=64',
+    },
+  ];
+
+  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"
+    >
+      {/* Background Elements */}
+      <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" 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 }}
+          >
+            <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl">
+              Testimoni{' '}
+              <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                Member
+              </span>
+            </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>
+        </div>
+
+        <motion.div
+          className="grid gap-8 md:grid-cols-3"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {testimonials.map((testimonial, index) => (
+            <motion.div
+              key={index}
+              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;{testimonial.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">
+                    <Image
+                      src={testimonial.avatar || '/placeholder.svg'}
+                      alt={testimonial.name}
+                      width={48}
+                      height={48}
+                      className="object-cover"
+                    />
+                  </div>
+                  <div>
+                    <h4 className="font-bold">{testimonial.name}</h4>
+                    <p className="text-sm text-muted-foreground">
+                      {testimonial.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>
+
+        {/* Testimonial Stats */}
+        <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 } : { opacity: 0, y: 20 }}
+          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">
+                Bergabunglah dengan{' '}
+                <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                  10,000+
+                </span>{' '}
+                programmer Indonesia lainnya
+              </h3>
+              <p className="text-muted-foreground">
+                Komunitas kami terus berkembang dengan programmer dari berbagai
+                latar belakang dan tingkat keahlian. Bersama-sama, kita belajar,
+                berbagi, dan tumbuh sebagai profesional.
+              </p>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div 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">
+                  98%
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  Tingkat Kemalasan
+                </div>
+              </div>
+              <div 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">
+                  4.9/5
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  Rating Drama
+                </div>
+              </div>
+              <div 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">
+                  85%
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  Mendapat Pekerjaan
+                </div>
+              </div>
+              <div 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">
+                  24/7
+                </div>
+                <div className="text-sm text-muted-foreground">Yapping</div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

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,32 @@
+import { type Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import '../../styles/globals.css';
+import { ThemeProvider } from './_components/theme-provider';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'IMPHNEN - Ingin Menjadi Programmer Handal?',
+  description: 'Komunitas belajar programming untuk semua level',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="id" suppressHydrationWarning>
+      <body className={inter.className}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

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

@@ -0,0 +1,25 @@
+import { CallToAction } from './_components/call-to-action';
+import { Community } from './_components/community';
+import { Features } from './_components/features';
+import Footer from './_components/footer';
+import { Header } from './_components/header';
+import { Hero } from './_components/hero';
+import { LearningResources } from './_components/learning-resources';
+import { Testimonials } from './_components/testimonials';
+
+export default function Page() {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Header />
+      <main className="flex-1">
+        <Hero />
+        <Features />
+        <Community />
+        <LearningResources />
+        <Testimonials />
+        <CallToAction />
+      </main>
+      <Footer />
+    </div>
+  );
+}

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 { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views';
+import config from '../../../../payload.config';
+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 { RootPage, generatePageMetadata } from '@payloadcms/next/views';
+import config from '../../../../payload.config';
+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 @@
+export const importMap = {};

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 '@payloadcms/next/css';
+import {
+  REST_DELETE,
+  REST_GET,
+  REST_OPTIONS,
+  REST_PATCH,
+  REST_POST,
+  REST_PUT,
+} from '@payloadcms/next/routes';
+import config from '../../../../payload.config';
+
+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 '@payloadcms/next/css';
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes';
+import config from '../../../../payload.config';
+
+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 { GRAPHQL_POST, REST_OPTIONS } from '@payloadcms/next/routes';
+import config from '../../../../payload.config';
+
+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 '@payloadcms/next/css';
+import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts';
+import type { ServerFunctionClient } from 'payload';
+import React from 'react';
+import config from '../../payload.config';
+
+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/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/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/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,285 @@
+/* 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: {};
+  globalsSelect: {};
+  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` "auth".
+ */
+export interface Auth {
+  [k: string]: unknown;
+}
+
+
+declare module 'payload' {
+  export interface GeneratedTypes extends Config {}
+}

apps/landing/src/payload.config.ts

@@ -0,0 +1,40 @@
+import { postgresAdapter } from '@payloadcms/db-postgres';
+import { lexicalEditor } from '@payloadcms/richtext-lexical';
+import path from 'path';
+import { buildConfig } from 'payload';
+import sharp from 'sharp';
+import { fileURLToPath } from 'url';
+
+import { Media } from './collections/Media';
+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],
+  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: [],
+});

apps/landing/src/styles/globals.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+@import "../../../../libs/shadcn-ui/src/index.css";
+@source "../../../../libs/shadcn-ui/src/atoms/**/*.{ts,tsx}";

apps/landing/tsconfig.json

@@ -2,32 +2,44 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "jsx": "preserve",
-
     "strict": true,
     "noEmit": true,
     "emitDeclarationOnly": false,
     "esModuleInterop": true,
+    "target": "ES2022",
     "module": "esnext",
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "incremental": true,
-    "plugins": [{ "name": "next" }]
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
   "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"]
+  "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,25 @@
+{
+  "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-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/button.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { cn } from '@imphnen-frontend-service/utils';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+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 };