chore: remove pnpm, accidentally added out of habit

feat: initialize index file to export atoms
chore: add tailwind-animate-css package
2025-04-27 06:22:02 +07:00 · 2025-04-27 06:16:32 +07:00 · 2025-04-27 06:14:43 +07:00 · 2025-04-27 06:11:39 +07:00 · 2025-04-27 05:56:52 +07:00 · 2025-04-27 05:51:58 +07:00
89 changed files with 1141 additions and 11444 deletions
@@ -1,14 +1 @@
-# 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
+VITE_API_URL=https://api.example.com
@@ -24,14 +24,5 @@ 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
@@ -1,15 +1,22 @@
-const { composePlugins, withNx } = require('@nx/next');
-const { withPayload } = require('@payloadcms/next/withPayload');
+//@ts-check

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

-module.exports = composePlugins(withNx, withPayload)(nextConfig);
+const plugins = [
+  // Add more Next.js plugins to this list if needed.
+  withNx,
+];
+
+module.exports = composePlugins(...plugins)(nextConfig);
@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-
-export default function Layout({ children }: { children: ReactNode }) {
-  return <>{children}</>;
-}
@@ -1,3 +0,0 @@
-export default function Page() {
-  return <></>;
-}
@@ -1,3 +0,0 @@
-export default function Page() {
-  return <></>;
-}
@@ -1,110 +0,0 @@
-'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>
-  );
-}
@@ -1,137 +0,0 @@
-'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>
-  );
-}
@@ -1,71 +0,0 @@
-'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>
-  );
-}
@@ -1,247 +0,0 @@
-'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>
-  );
-}
@@ -1,164 +0,0 @@
-'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>
-  );
-}
@@ -1,21 +0,0 @@
-'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>
-  );
-}
@@ -1,21 +0,0 @@
-'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>
-  );
-}
@@ -1,7 +0,0 @@
-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>
-  );
-}
@@ -1,24 +0,0 @@
-'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>
-  );
-}
@@ -1,16 +0,0 @@
-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>
-  );
-}
@@ -1,26 +0,0 @@
-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>
-  );
-}
@@ -1,40 +0,0 @@
-'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>
-  );
-}
@@ -1,39 +0,0 @@
-'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>
-  );
-}
@@ -1,143 +0,0 @@
-'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>
-  );
-}
@@ -1,17 +0,0 @@
-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 />
-    </>
-  );
-}
@@ -1,3 +0,0 @@
-export default function Page() {
-  return <></>;
-}
@@ -1,3 +0,0 @@
-export default function Page() {
-  return <></>;
-}
@@ -1,13 +0,0 @@
-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>
-  );
-}
@@ -1,3 +0,0 @@
-export default function Page() {
-  return <></>;
-}
@@ -1,11 +0,0 @@
-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>
-  );
-}
@@ -1,14 +0,0 @@
-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>
-  );
-}
@@ -1,22 +0,0 @@
-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>
-  );
-}
@@ -1,29 +0,0 @@
-'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>
-  );
-}
@@ -1,34 +0,0 @@
-'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>
-  );
-}
@@ -1,16 +0,0 @@
-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>
-  );
-}
@@ -1,24 +0,0 @@
-'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>
-  );
-}
@@ -1,28 +0,0 @@
-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>
-  );
-}
@@ -1,27 +0,0 @@
-/* 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;
@@ -1,27 +0,0 @@
-/* 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;
@@ -1,5 +0,0 @@
-import { S3ClientUploadHandler as S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24 } from '@payloadcms/storage-s3/client'
-
-export const importMap = {
-  "@payloadcms/storage-s3/client#S3ClientUploadHandler": S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24
-}
@@ -1,19 +0,0 @@
-/* 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);
@@ -1,7 +0,0 @@
-/* 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);
@@ -1,8 +0,0 @@
-/* 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);
@@ -1,35 +0,0 @@
-/* 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;
@@ -1,21 +1,10 @@
 'use client';

-import { CallToActionSection } from '@/payload-types';
-import { Button } from '@components/atoms';
+import { Button } from '@imphnen-frontend-service/shadcn-ui/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;
-
+export function CallToAction() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, amount: 0.2 });

@@ -39,30 +28,29 @@ export function CallToAction(props: CallToActionSection) {

            <div className="relative z-10 text-center">
              <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
-                {title}{' '}
+                Siap Menjadi{' '}
                <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
-                  {highlightedTitle}
+                  Programmer Handal?
                </span>
              </h2>
              <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-                {subtitle}
+                Bergabunglah dengan komunitas IMPHNEN sekarang dan mulai
+                perjalanan programming mu dengan cara yang menyenangkan!
              </p>

              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button
                  size="lg"
-                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 font-bold text-black hover:text-white cursor-pointer"
-                  onClick={() => window.open(primaryButtonLink, '_blank')}
+                  className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90"
                >
-                  {primaryButtonLabel}
+                  Gabung Discord
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="border-primary hover:bg-primary/10"
-                  onClick={() => window.open(secondaryButtonLink, '_blank')}
                >
-                  {secondaryButtonLabel}
+                  Join Facebook Group
                </Button>
              </div>
            </div>
@@ -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>
+  );
+}
@@ -1,16 +1,45 @@
 'use client';

-import { FeaturesSection } from '@/payload-types';
-import { Icon } from '@iconify/react';
+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(props: FeaturesSection) {
-  const { heading, subheading, features } = props;
-
+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: {
@@ -35,6 +64,7 @@ export function Features(props: FeaturesSection) {
      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" />
@@ -52,10 +82,14 @@ export function Features(props: FeaturesSection) {
              Fitur Unggulan
            </div>
            <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl">
-              {heading}
+              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">
-              {subheading}
+              IMPHNEN hadir dengan berbagai fitur untuk membantu kamu menjadi
+              programmer handal tanpa harus pusing dengan coding.
            </p>
          </motion.div>
        </div>
@@ -66,7 +100,7 @@ export function Features(props: FeaturesSection) {
          initial="hidden"
          animate={isInView ? 'visible' : 'hidden'}
        >
-          {features?.map((feature, index) => (
+          {features.map((feature, index) => (
            <motion.div
              key={index}
              className="group relative overflow-hidden rounded-xl border bg-background/50 backdrop-blur-sm p-6 transition-all hover:shadow-md hover:shadow-primary/5 hover:border-primary/50"
@@ -76,10 +110,7 @@ export function Features(props: FeaturesSection) {

              <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"
-                  />
+                  {feature.icon}
                </div>
                <h3 className="mb-2 text-xl font-bold">{feature.title}</h3>
                <p className="text-muted-foreground">{feature.description}</p>
@@ -188,8 +188,7 @@ export default function Footer() {
                  placeholder="Email Anda"
                  className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
                />
-                <button className="inline-flex items-center justify-center rounded-md bg-primary px-3 py-1 text-sm 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">
+                <button className="inline-flex items-center justify-center rounded-md bg-primary px-3 py-1 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50">
                  Daftar
                </button>
              </div>
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -1,17 +1,65 @@
 'use client';

-import { LearningResourcesSection } from '@/payload-types';
-import { Button } from '@components/atoms';
-import { Icon } from '@iconify/react';
+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(props: LearningResourcesSection) {
-  const { resources, featured, title, description } = props;
-
+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: {
@@ -36,96 +84,96 @@ export function LearningResources(props: LearningResourcesSection) {
      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 } : {}}
+            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">
-              {title}
+              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">
-              {description}
+              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((r, i) => (
+          {resources.map((resource, index) => (
            <motion.div
-              key={i}
-              className="group relative overflow-hidden rounded-xl border bg-background p-6 hover:shadow-lg"
+              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 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>

+              <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"
-                  onClick={() => window.open(r.buttonLink, '_blank')}
                >
-                  {r.buttonText}
-                  <Icon icon="tabler:arrow-right" className="h-6 w-6" />
+                  {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 } : {}}
+          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 w-fit">
-                {featured.label}
+              <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">
-                {featured.title}
+                Kursus Lengkap Web Development
              </h3>
              <p className="text-muted-foreground mb-6">
-                {featured.description}
+                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 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 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">
@@ -1,6 +1,10 @@
 'use client';

-import { Button, MoonIcon, SunIcon } from '@components/atoms';
+import {
+  Button,
+  MoonIcon,
+  SunIcon,
+} from '@imphnen-frontend-service/shadcn-ui/atoms';
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';

@@ -25,7 +29,7 @@ export function SimpleThemeToggle() {
      variant="outline"
      size="icon"
      onClick={toggleTheme}
-      className="focus-visible:ring-0 cursor-pointer"
+      className="focus-visible:ring-0"
    >
      {theme === 'dark' ? (
        <SunIcon className="h-[1.2rem] w-[1.2rem]" />
@@ -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">
+                  "{testimonial.quote}"
+                </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>
+  );
+}
@@ -1,12 +1,13 @@
-import { poppins } from '@/lib/fonts';
-import '@/styles/globals.css';
 import { type Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import '../styles/globals.css';
 import { ThemeProvider } from './_components/theme-provider';

+const inter = Inter({ subsets: ['latin'] });
+
 export const metadata: Metadata = {
-  title: 'IMPHNEN - Ingin Menjadi Programmer Handal Namung Enggan Ngonding',
-  description:
-    'Komunitas Ingin Menjadi Programmer Handal Namung Enggan Ngonding',
+  title: 'IMPHNEN - Ingin Menjadi Programmer Handal?',
+  description: 'Komunitas belajar programming untuk semua level',
 };

 export default function RootLayout({
@@ -16,7 +17,7 @@ export default function RootLayout({
 }) {
  return (
    <html lang="id" suppressHydrationWarning>
-      <body className={poppins.className}>
+      <body className={inter.className}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
@@ -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>
+  );
+}
@@ -1,51 +0,0 @@
-import { GlobalConfig } from 'payload';
-
-export const CallToActionSection: GlobalConfig = {
-  slug: 'call-to-action-section',
-  label: 'Call To Action Section',
-  fields: [
-    {
-      name: 'title',
-      type: 'text',
-      required: true,
-      defaultValue: 'Siap Menjadi',
-    },
-    {
-      name: 'highlightedTitle',
-      type: 'text',
-      required: true,
-      defaultValue: 'Programmer Handal?',
-    },
-    {
-      name: 'subtitle',
-      type: 'textarea',
-      required: true,
-      defaultValue:
-        'Bergabunglah dengan komunitas IMPHNEN sekarang dan mulai perjalanan programming mu dengan cara yang menyenangkan!',
-    },
-    {
-      name: 'primaryButtonLabel',
-      type: 'text',
-      required: true,
-      defaultValue: 'Gabung Discord',
-    },
-    {
-      name: 'primaryButtonLink',
-      type: 'text',
-      required: true,
-      defaultValue: 'https://discord.gg/imphnen',
-    },
-    {
-      name: 'secondaryButtonLabel',
-      type: 'text',
-      required: true,
-      defaultValue: 'Join Facebook Group',
-    },
-    {
-      name: 'secondaryButtonLink',
-      type: 'text',
-      required: true,
-      defaultValue: 'https://facebook.com/groups/programmerhandal',
-    },
-  ],
-};
@@ -1,65 +0,0 @@
-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 },
-      ],
-    },
-  ],
-};
@@ -1,65 +0,0 @@
-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',
-        },
-      ],
-    },
-  ],
-};
@@ -1,104 +0,0 @@
-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' },
-      ],
-    },
-  ],
-};
@@ -1,117 +0,0 @@
-// 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: '#',
-        },
-      ],
-    },
-  ],
-};
@@ -1,16 +0,0 @@
-import type { CollectionConfig } from 'payload';
-
-export const Media: CollectionConfig = {
-  slug: 'media',
-  access: {
-    read: () => true,
-  },
-  fields: [
-    {
-      name: 'alt',
-      type: 'text',
-      required: true,
-    },
-  ],
-  upload: true,
-};
@@ -1,93 +0,0 @@
-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,
-    },
-  ],
-};
@@ -1,13 +0,0 @@
-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
-  ],
-};
@@ -1,8 +0,0 @@
-// fonts.ts
-import { Poppins } from 'next/font/google';
-
-export const poppins = Poppins({
-  subsets: ['latin'],
-  weight: ['300', '400', '500', '600', '700'],
-  display: 'swap',
-});
@@ -1,10 +0,0 @@
-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;
-}
@@ -1,6 +0,0 @@
-import type { paths } from '@/openapi-types';
-import createClient from 'openapi-fetch';
-
-export const fetcher = createClient<paths>({
-  baseUrl: 'https://api.imphnen.dev',
-});
@@ -1,4 +0,0 @@
-import { getPayload } from 'payload';
-import config from '../payload.config';
-
-export const payload = await getPayload({ config });
@@ -1,591 +0,0 @@
-/* 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 {}
-}
@@ -1,78 +0,0 @@
-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 }),
-        }),
-      },
-    }),
-  ],
-});
@@ -1,7 +0,0 @@
-import { payload } from '../lib/payload';
-
-export async function getGlobalsCallToActionSection() {
-  return await payload.findGlobal({
-    slug: 'call-to-action-section',
-  });
-}
@@ -1,7 +0,0 @@
-import { payload } from '../lib/payload';
-
-export async function getGlobalsCommunitiesSection() {
-  return await payload.findGlobal({
-    slug: 'communities-section',
-  });
-}
@@ -1,7 +0,0 @@
-import { payload } from '../lib/payload';
-
-export async function getGlobalsFeaturesSection() {
-  return await payload.findGlobal({
-    slug: 'features-section',
-  });
-}
@@ -1,7 +0,0 @@
-import { payload } from '../lib/payload';
-
-export async function getGlobalsHeroSection() {
-  return await payload.findGlobal({
-    slug: 'hero-section',
-  });
-}
@@ -1,7 +0,0 @@
-import { payload } from '../lib/payload';
-
-export async function getGlobalsLearningResourcesSection() {
-  return await payload.findGlobal({
-    slug: 'learning-resources-section',
-  });
-}
@@ -1,7 +0,0 @@
-import { payload } from '../lib/payload';
-
-export async function getGlobalsTestimonialsSection() {
-  return await payload.findGlobal({
-    slug: 'testimonials-section',
-  });
-}
@@ -1,12 +0,0 @@
-import { create } from 'zustand';
-
-interface MobileMenuState {
-  mobileMenuOpen: boolean;
-  toggleMobileMenu: () => void;
-}
-
-export const useMobileMenuStore = create<MobileMenuState>((set) => ({
-  mobileMenuOpen: false,
-  toggleMobileMenu: () =>
-    set((state) => ({ mobileMenuOpen: !state.mobileMenuOpen })),
-}));
@@ -1,22 +1,3 @@
@import 'tailwindcss';
-@import '../../../../libs/shadcn-ui/src/index.css';
+@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%
-    );
-  }
-}
@@ -6,12 +6,15 @@
    "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,
@@ -20,13 +23,7 @@
      {
        "name": "next"
      }
-    ],
-    "baseUrl": ".",
-    "paths": {
-      "@components/atoms": ["../../libs/shadcn-ui/src/atoms/index.ts"],
-      "@utils/ui": ["../../libs/utils/src/index.ts"],
-      "@/*": ["src/*"]
-    }
+    ]
  },
  "include": [
    "**/*.js",
@@ -38,5 +35,10 @@
    "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"
+  ]
 }
@@ -8,7 +8,6 @@
      "name": "@imphnen-frontend-service/shadcn-ui",
      "version": "0.0.1",
      "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",
@@ -447,33 +446,6 @@
        "node": ">=18"
      }
    },
-    "node_modules/@radix-ui/react-avatar": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.9.tgz",
-      "integrity": "sha512-10tQokfvZdFvnvDkcOJPjm2pWiP8A0R4T83MoD7tb15bC/k2GU7B1YBuzJi8lNQ8V1QqhP8ocNqp27ByZaNagQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.2",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-is-hydrated": "0.1.0",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/@radix-ui/react-compose-refs": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -489,48 +461,10 @@
        }
      }
    },
-    "node_modules/@radix-ui/react-context": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
-      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-primitive": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.2.tgz",
-      "integrity": "sha512-uHa+l/lKfxuDD2zjN/0peM/RhhSmRjr5YWdk/37EnSv1nJ88uvG85DPexSm8HdFQROd2VdERJ6ynXbkCFi+APw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-slot": "1.2.2"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/@radix-ui/react-slot": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.2.tgz",
-      "integrity": "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
+      "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
      "license": "MIT",
      "dependencies": {
        "@radix-ui/react-compose-refs": "1.1.2"
@@ -545,54 +479,6 @@
        }
      }
    },
-    "node_modules/@radix-ui/react-use-callback-ref": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
-      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-is-hydrated": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
-      "integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
-      "license": "MIT",
-      "dependencies": {
-        "use-sync-external-store": "^1.5.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-layout-effect": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
-      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/@rollup/rollup-android-arm-eabi": {
      "version": "4.40.0",
      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.0.tgz",
@@ -1578,19 +1464,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/react-dom": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
-      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "scheduler": "^0.26.0"
-      },
-      "peerDependencies": {
-        "react": "^19.1.0"
-      }
-    },
    "node_modules/react-icons": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
@@ -1640,13 +1513,6 @@
        "fsevents": "~2.3.2"
      }
    },
-    "node_modules/scheduler": {
-      "version": "0.26.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
-      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
-      "license": "MIT",
-      "peer": true
-    },
    "node_modules/source-map-js": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1709,15 +1575,6 @@
        "url": "https://github.com/sponsors/Wombosvideo"
      }
    },
-    "node_modules/use-sync-external-store": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
-      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
    "node_modules/vite": {
      "version": "6.3.3",
      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.3.tgz",
@@ -10,7 +10,6 @@
    }
  },
  "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",
@@ -1,49 +0,0 @@
-'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 };
@@ -1,9 +1,9 @@
 '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';
-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',
@@ -1,6 +0,0 @@
-import { ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export const cn = (...inputs: ClassValue[]) => {
-  return twMerge(clsx(inputs));
-};
@@ -1,3 +1,2 @@
-export * from './avatar';
 export * from './button';
 export * from './icons';
@@ -18,9 +18,6 @@
    "landing:dev": "nx serve landing",
    "landing:build": "nx build landing",
    "landing:prod": "cd ./dist/apps/landing && npx next start",
-    "landing:openapi": "npx openapi-typescript https://api.imphnen.dev/openapi.json -o ./apps/landing/src/openapi-types.ts",
-    "landing:generate:importmap": "PAYLOAD_CONFIG_PATH=apps/landing/src/payload.config.ts payload generate:importmap",
-    "landing:generate:types": "PAYLOAD_CONFIG_PATH=apps/landing/src/payload.config.ts payload generate:types",
    "ui:test": "nx test ui",
    "ui:build": "nx build ui",
    "ui:storybook": "nx storybook ui"
@@ -29,14 +26,7 @@
  "dependencies": {
    "@ant-design/icons": "^6.0.0",
    "@hookform/resolvers": "^5.0.1",
-    "@iconify/react": "^6.0.0",
-    "@payloadcms/db-postgres": "^3.37.0",
-    "@payloadcms/next": "^3.37.0",
-    "@payloadcms/richtext-lexical": "^3.37.0",
-    "@payloadcms/storage-s3": "^3.37.0",
-    "@radix-ui/react-avatar": "^1.1.9",
    "@radix-ui/react-slot": "^1.2.0",
-    "@smithy/node-http-handler": "^4.0.4",
    "@tanstack/react-query": "^5.74.4",
    "@tanstack/react-store": "^0.7.0",
    "@tanstack/react-table": "^8.21.2",
@@ -44,22 +34,17 @@
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "framer-motion": "^12.9.2",
-    "graphql": "^16.11.0",
    "js-cookie": "^3.0.5",
    "next": "~15.2.4",
    "next-themes": "^0.4.6",
-    "openapi-fetch": "^0.14.0",
-    "payload": "^3.37.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-hook-form": "^7.55.0",
    "react-icons": "^5.5.0",
    "react-router-dom": "^7.3.0",
-    "sharp": "^0.34.1",
    "sonner": "^2.0.3",
    "tailwind-merge": "^3.0.2",
-    "zod": "^3.24.2",
-    "zustand": "^5.0.4"
+    "zod": "^3.24.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.5",
Author	SHA1	Message	Date
ArraysID	4f394bacf1	chore: remove pnpm, accidentally added out of habit	2025-04-27 06:22:02 +07:00
ArraysID	d4bd7f4e1a	feat: initialize index file to export atoms	2025-04-27 06:16:32 +07:00
ArraysID	1b6b442078	chore: add tailwind-animate-css package	2025-04-27 06:14:43 +07:00
ArraysID	f9191708f4	feat: update dependencies in package.json and package-lock.json	2025-04-27 06:11:39 +07:00
ArraysID	10da7d0a16	feat: migrate simple theme switcher component	2025-04-27 05:56:52 +07:00
ArraysID	c07c75f23b	feat: migrate footer component	2025-04-27 05:51:58 +07:00
ArraysID	e9622234fe	feat: migrate call to action component	2025-04-27 05:50:47 +07:00
ArraysID	aedc2b5dfb	feat: migrate testimonials component	2025-04-27 05:49:50 +07:00
ArraysID	5b1b700ccb	feat: migrate learning resources component	2025-04-27 05:47:43 +07:00
ArraysID	0478d12ffc	feat: migrate community component	2025-04-27 05:44:11 +07:00
ArraysID	5929c5a667	feat: migrate features component	2025-04-27 05:38:34 +07:00
ArraysID	206a426120	feat: migrate hero component	2025-04-27 05:35:49 +07:00
ArraysID	b4708ab2aa	feat: migrate header component	2025-04-27 05:28:37 +07:00
ArraysID	53b069f242	feat: remove unused tw-animate-css import	2025-04-26 22:51:49 +07:00
ArraysID	c2a50a86bd	feat: add path mapping for shadcn-ui atoms in tsconfig	2025-04-26 22:38:50 +07:00
ArraysID	edec847eee	feat: update landing app with shadcnI integration	2025-04-26 22:38:28 +07:00
ArraysID	9182440ab3	feat(shadcn-ui): initialize shadcn ui libs	2025-04-26 22:37:29 +07:00
ArraysID	259262a1ef	chore: cleanup nextjs project	2025-04-26 21:13:19 +07:00