feat: enable rich colors for Toaster component in layout

.github/workflows/deploy-landing.yml

@@ -1,33 +0,0 @@
-name: Deploy Landing
-
-on:
-  push:
-    paths:
-      - 'apps/landing/**' # INI BASED ON PATH CHANGES JADI NTAR KALAU ADA PUSH DIISNI OTOMATIS DEPLOY
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@v4
-
-      - name: Deploy via SSH
-        uses: appleboy/ssh-action@v1.0.3
-        with:
-          host: ${{ secrets.SSH_HOST }}
-          username: ${{ secrets.SSH_USER }}
-          key: ${{ secrets.SSH_KEY }}
-          port: ${{ secrets.SSH_PORT }}
-          script: |
-            set -e
-            if [ ! -d ~/imphnen-frontend-service ]; then
-              git clone https://github.com/IMPHNEN/imphnen-frontend-service.git ~/imphnen-frontend-service
-            else
-              cd ~/imphnen-frontend-service && git pull
-            fi
-            echo "NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }}" > ~/imphnen-frontend-service/apps/landing/.env
-            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml down || true
-            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml build
-            docker compose -f ~/imphnen-frontend-service/docker-compose-landing.yml up -d
-            docker image prune -af

apps/dimentorin/src/app/(public)/(home)/_components/cta-section.tsx

@@ -1,154 +0,0 @@
-import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { cn } from '@imphnen-frontend-service/utils';
-import { FC, useRef } from 'react';
-import { motion, useInView, Variants } from 'framer-motion';
-
-export const CTASection: FC = () => {
-  const ref = useRef(null)
-  const isInView = useInView(ref, { once: true, amount: 0.2 })
-
-  const containerVariants: Variants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.1,
-        delayChildren: 0.2,
-      },
-    },
-  }
-
-  const scaleVariant: Variants = {
-    hidden: { scale: 0 },
-    visible: {
-      scale: 1,
-      transition: {
-        duration: 0.5,
-        ease: [0.25, 0.46, 0.45, 0.94],
-      },
-    },
-  }
-
-  const contentVariant: Variants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.5,
-        ease: [0.25, 0.46, 0.45, 0.94],
-      },
-    },
-  }
-
-  return (
-    <section ref={ref} className="w-full mx-auto px-8 py-4 md:px-[60px] md:py-8 lg:px-20">
-      <motion.div
-        className="relative max-w-7xl mx-auto bg-white rounded-lg border-2 border-primary-200 py-20 overflow-hidden md:rounded-3xl lg:py-24"
-        variants={containerVariants}
-        initial="hidden"
-        animate={isInView ? "visible" : "hidden"}
-      >
-        {/* Background gradients and shapes */}
-        <div className="absolute inset-0">
-          <motion.div
-            className={cn("absolute top-8 -left-14 size-28 bg-gradient-to-tl from-primary-400 to-primary-300 rounded-full",
-              "md:size-52 md:-top-20 md:-left-10 lg:size-72 lg:-top-16 lg:-left-14"
-            )}
-            variants={scaleVariant}
-            initial="hidden"
-            animate={isInView ? "visible" : "hidden"}
-          />
-          <motion.div
-            className={cn(
-              "absolute top-24 -right-14 size-[89px] bg-gradient-to-b from-primary-400 to-primary-300 rounded-full blur-[1.8px]",
-              "md:size-[182px] md:-right-24 md:blur-[2px] lg:size-[392px] lg:top-16 lg:-right-52 lg:blur-[4px]"
-            )}
-            variants={scaleVariant}
-            initial="hidden"
-            animate={isInView ? "visible" : "hidden"}
-          />
-          <motion.div
-            variants={scaleVariant}
-            initial="hidden"
-            animate={isInView ? "visible" : "hidden"}
-            className={cn(
-              "absolute bottom-10 -left-[88px] size-28 bg-primary-200 rounded-full flex justify-center items-center",
-              "md:size-56 md:-bottom-28 md:-left-28 lg:size-[274px] lg:-bottom-24 lg:-left-24"
-            )}
-          >
-            <motion.div
-              initial={{ scale: 0 }}
-              animate={{ scale: isInView ? 1 : 0 }}
-              transition={{ duration: 0.3, delay: 0.1 }}
-              className="size-[72px] bg-primary-50 rounded-full md:size-40 lg:size-[200px]"
-            />
-          </motion.div>
-
-          <div
-            className={cn(
-              "absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-primary-400 via-primary-200 opacity-90",
-              "md:h-[22%] md:opacity-85 lg:h-1/4"
-            )}
-          />
-        </div>
-
-        <motion.img
-          src="/logos/logo.svg"
-          alt="IMPHNEN Logo"
-          className="relative w-28 mx-auto mb-8 md:w-[186px]"
-          variants={contentVariant}
-        />
-
-        <div className="relative mb-8 max-w-52 mx-auto md:max-w-[446px] lg:max-w-[688px]">
-          <motion.h1
-            className={cn(
-              "mb-3 text-xl text-center font-semibold leading-tight text-primary-500",
-              "md:text-4xl md:mb-2 lg:text-5xl lg:font-bold"
-            )}
-            variants={contentVariant}
-          >
-            Start Your IT Journey Now!
-          </motion.h1>
-          <motion.p
-            className={cn(
-              "mb-6 text-[15px] font-medium text-center leading-tight text-primary-400",
-              "md:text-2xl md:mb-8 lg:text-[29px]"
-            )}
-            variants={contentVariant}
-          >
-            Jangan biarkan progress mu hanya jadi side story!
-          </motion.p>
-          <motion.p
-            className={cn(
-              "text-xs font-semibold text-center leading-tight text-primary-400",
-              "md:text-[19px] lg:text-[23px] lg:max-w-[628px] lg:mx-auto"
-            )}
-            variants={contentVariant}
-          >
-            Dapatkan mentor terbaik dan gunakan AI untuk belajar lebih cepat. Waktunya jadi protagonist dalam perjalanan IT-mu!
-          </motion.p>
-        </div>
-
-        <motion.div
-          className="relative max-w-52 mx-auto space-y-3 md:max-w-full md:flex md:gap-x-6 md:justify-center md:space-y-0 md:items-center"
-          variants={contentVariant}
-        >
-          <Button
-            type="button"
-            className="w-full h-auto py-2 text-[10px] font-medium md:w-max md:text-sm md:px-2.5 md:font-semibold lg:text-base"
-          >
-            Mulai Belajar Dengan AI
-          </Button>
-          <Button
-            type="button"
-            variant="secondary"
-            className="w-full h-auto py-2 text-[10px] font-medium md:w-max md:text-sm md:px-2.5 md:font-semibold lg:text-base"
-          >
-            Temukan Mentor
-          </Button>
-        </motion.div>
-      </motion.div>
-    </section>
-  )
-}

apps/dimentorin/src/app/(public)/(home)/_components/faq-section.tsx

@@ -1,114 +0,0 @@
-import { Button } from '@imphnen-frontend-service/ui/atoms'
-import { Accordion, AccordionOptions } from '@imphnen-frontend-service/ui/molecules'
-import { FC, useRef } from 'react'
-import { motion, useInView, Variants } from 'framer-motion'
-import { cn, For } from '@imphnen-frontend-service/utils'
-
-const FAQ_DATA: AccordionOptions[] = [
-  { title: 'Apakah saya bisa memilih mentor sendiri?', description: 'Tentu! Kamu bisa memilih mentor yang sesuai dengan kebutuhan dan level skill kamu.' },
-  { title: 'Apakah mentoring ini cocok untuk pemula?', description: 'Yap! Baik newbie maupun seasoned dev bisa menemukan mentor yang pas untuk mempercepat progres belajarnya.' },
-  { title: 'Apakah ini seperti sekolah coding biasa?', description: 'Nope! Ini lebih dari sekadar kursus-kursus AI guide dan mentor berpengalaman, kamu mendapatkan pengalaman belajar yang jauh lebih personal dan efektif.' },
-]
-
-export const FAQSection: FC = () => {
-  const ref = useRef(null)
-  const isInView = useInView(ref, { once: true, amount: 0.2 })
-
-  const containerVariants: Variants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.1,
-        delayChildren: 0.2,
-      },
-    },
-  }
-
-  const childVariants: Variants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.4,
-        ease: [0.25, 0.46, 0.45, 0.94],
-      },
-    },
-  }
-
-  return (
-    <section ref={ref} className="relative mx-auto py-4 px-8 overflow-x-clip md:py-8 md:px-[60px] lg:px-20 md:pb-8">
-      {/* Background shapes */}
-      <div className="absolute inset-0">
-        <motion.div
-          initial={{ scale: 0 }}
-          animate={{ scale: isInView ? 1 : 0 }}
-          transition={{ duration: 0.5 }}
-          className={cn(
-            "absolute -top-10 -right-14 size-60 bg-primary-200 rounded-full justify-center items-center hidden",
-            "md:flex lg:size-[344px] lg:top-48 lg:-right-[88px]"
-          )}
-        >
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: isInView ? 1 : 0 }}
-            transition={{ duration: 0.3, delay: 0.1 }}
-            className="size-[168px] bg-primary-50 rounded-full lg:size-64"
-          />
-        </motion.div>
-      </div>
-
-      <motion.div
-        initial={{ opacity: 0, y: 30 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
-        viewport={{ once: true }}
-        className="relative mb-6 flex justify-center md:mb-10"
-      >
-        <Button
-          type="button"
-          size="sm"
-          variant="bordered"
-          className="h-auto px-3 py-2 font-semibold bg-primary-100 md:text-base md:px-5 md:py-2.5 lg:text-2xl lg:px-6 lg:py-3"
-        >
-          Frequently Ask Question
-        </Button>
-      </motion.div>
-
-      <div
-        className={cn(
-          "relative grid max-w-7xl mx-auto gap-y-7 divide-y-2 divide-primary-200",
-          "md:grid-cols-11 md:gap-x-10 md:divide-y-0 md:divide-x-2 lg:grid-cols-7 lg:gap-x-[72px]"
-        )}
-      >
-        <motion.h1
-          className={cn(
-            "pb-7 text-2xl font-semibold text-primary-500 text-center leading-none",
-            "md:pe-10 md:pb-0 md:text-start md:col-span-5 lg:text-4xl lg:col-span-3 lg:pe-[72px]"
-          )}
-          initial={{ opacity: 0, y: 30 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-          viewport={{ once: true }}
-        >
-          Console log for new developers
-        </motion.h1>
-
-        <motion.div
-          className="flex flex-col gap-4 md:col-span-6 lg:col-span-4"
-          variants={containerVariants}
-          animate={isInView ? "visible" : "hidden"}
-        >
-          <For data={FAQ_DATA}>
-            {(props) => (
-              <motion.div key={props.title} variants={childVariants}>
-                <Accordion {...props} />
-              </motion.div>
-            )}
-          </For>
-        </motion.div>
-      </div>
-    </section>
-  )
-}

apps/dimentorin/src/app/(public)/(home)/_components/hero-section.tsx

@@ -1,73 +0,0 @@
-import { Button } from "@imphnen-frontend-service/ui/atoms";
-import { motion } from 'framer-motion'
-
-export function HeroSection() {
-  return (
-    <section className="relative w-full py-20 md:py-28 lg:py-32">
-      {/* Background gradients and shapes */}
-      <div className="absolute inset-0 -z-10 overflow-x-clip hidden md:block">
-        <motion.div
-          initial={{ scale: 0 }}
-          animate={{ scale: 1 }}
-          transition={{ duration: 0.5 }}
-          viewport={{ once: true }}
-          className="absolute top-10 -left-64 size-[448px] bg-primary-200 rounded-full justify-center items-center hidden lg:flex"
-        >
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ duration: 0.3, delay: 0.1 }}
-            viewport={{ once: true }}
-            className="size-[296px] bg-primary-50 rounded-full"
-          />
-        </motion.div>
-        <motion.div
-          initial={{ scale: 0 }}
-          animate={{ scale: 1 }}
-          transition={{ duration: 0.5 }}
-          viewport={{ once: true }}
-          className="absolute top-3/5 -right-56 size-96 bg-primary-500 rounded-full flex justify-center items-center lg:top-1/2 lg:-right-64 lg:size-[600px]"
-        >
-          <motion.div
-            initial={{ scale: 0 }}
-            animate={{ scale: 1 }}
-            transition={{ duration: 0.3, delay: 0.1 }}
-            viewport={{ once: true }}
-            className="size-64 bg-primary-50 rounded-full lg:size-[400px]"
-          />
-        </motion.div>
-
-        <div className="absolute -top-28 -left-20 size-[248px] bg-radial from-primary-300 rounded-full blur-3xl" />
-        <div className="absolute top-0 -right-72 size-[480px] bg-radial from-primary-400 rounded-full blur-[80px]" />
-      </div>
-
-      <div className="flex flex-col items-center gap-y-10">
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-          viewport={{ once: true }}
-          className="flex flex-col items-center gap-y-6"
-        >
-          <h1 className="text-2xl font-semibold text-primary-500 md:text-4xl md:font-bold lg:text-5xl">DIMENTORIN</h1>
-          <p className="max-w-52 text-center font-semibold text-xl leading-tight text-primary-500 md:max-w-72 lg:text-4xl lg:max-w-lg">
-            Learn IT smarter with AI & expert mentors!
-          </p>
-          <p className="max-w-3xs text-xs text-neutral-500 text-center font-medium md:max-w-lg md:text-base lg:text-lg lg:max-w-[646px]">
-            Apakah kamu siap untuk grind skill TI-mu ke level Ultimate? Dengan AI sebagai navigator dan mentor profesional sebagai sensei-mu, perjalanan belajarmu akan lebih cepat, efektif, dan penuh EXP!
-          </p>
-        </motion.div>
-
-        <motion.div initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.2 }} viewport={{ once: true }}>
-          <Button
-            type="button"
-            size="sm"
-            className="text-[10px] h-auto px-2.5 py-2 md:text-sm"
-          >
-            Belajar Dengan AI Sekarang
-          </Button>
-        </motion.div>
-      </div>
-    </section>
-  )
-}

apps/dimentorin/src/app/(public)/(home)/_components/testimonial-section.tsx

@@ -1,113 +0,0 @@
-import { Button } from '@imphnen-frontend-service/ui/atoms'
-import { For } from '@imphnen-frontend-service/utils'
-import { FC, useRef } from 'react'
-import { motion, useInView, Variants } from 'framer-motion'
-import { StarFilled } from '@ant-design/icons'
-
-export const TestimonialSection: FC = () => {
-  const ref = useRef(null)
-  const isInView = useInView(ref, { once: true, amount: 0.2 })
-
-  const containerVariants: Variants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.1,
-        delayChildren: 0.2,
-      },
-    },
-  }
-
-  const childVariants: Variants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.4,
-        ease: [0.25, 0.46, 0.45, 0.94],
-      },
-    },
-  }
-
-  return (
-    <section ref={ref} className="mx-auto py-4 md:py-8 xl:px-20">
-      <motion.div
-        initial={{ opacity: 0, y: 30 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
-        viewport={{ once: true }}
-        className="flex justify-center"
-      >
-        <Button
-          type="button"
-          size="sm"
-          variant="bordered"
-          className="h-auto px-3 py-2 font-semibold bg-primary-100 md:text-base md:px-5 md:py-2.5 lg:text-2xl lg:px-6 lg:py-3"
-        >
-          Testimonial
-        </Button>
-      </motion.div>
-
-      <motion.h1
-        initial={{ opacity: 0, y: 30 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
-        viewport={{ once: true }}
-        className="my-6 text-lg font-semibold mx-auto text-center text-primary-500 md:text-2xl lg:my-10 lg:text-4xl"
-      >
-        Words from our dellow devs
-      </motion.h1>
-
-      <div className="scrollbar-hide w-full mx-auto max-w-7xl px-8 overflow-auto md:px-[60px] xl:px-0">
-        <motion.div
-          className="mb-2 flex gap-x-5 min-w-max w-auto md:gap-x-6 xl:min-w-full xl:max-w-7xl xl:grid xl:grid-cols-2"
-          variants={containerVariants}
-          initial="hidden"
-          animate={isInView ? 'visible' : 'hidden'}
-        >
-          <For data={Array.from({ length: 2 })}>
-            {(_, index) => (
-              <motion.div
-                key={index}
-                variants={childVariants}
-                className="flex flex-col gap-6 p-6 w-52 bg-white rounded-xl shadow-md md:w-xl md:flex-row md:gap-8 xl:w-full"
-              >
-                <div className="w-full aspect-[8/7] rounded-lg overflow-hidden md:w-40 md:aspect-[7/6] lg:aspect-square">
-                  <img
-                    src="/image/testimonial.webp"
-                    alt="Testimonial"
-                    className="w-full object-cover"
-                  />
-                </div>
-                <div className="flex-1">
-                  <h3 className="mb-3 font-semibold text-primary-500 md:text-lg lg:text-2xl">
-                    Riko, Junior Web Developer
-                  </h3>
-                  <p className="mb-6 text-[10px] text-neutral-500 font-medium md:text-sm lg:text-base">
-                    Rasanya seperti punya AI waifu yang ngajarin ngoding! Mentoringnya juga super insightful. Thanks, Dimentorin!
-                  </p>
-                  <motion.div className="w-max" whileHover={{ scale: 1.1, rotate: -3 }}>
-                    <Button
-                      type="button"
-                      size="sm"
-                      variant="bordered"
-                      className="bg-primary-50 flex items-center gap-x-2 h-auto px-2 py-1 hover:bg-primary-50"
-                    >
-                      <StarFilled className="md:text-lg" />
-                      <span>
-                        <span className="text-sm font-medium md:text-lg md:font-semibold lg:text-xl">4.8</span>
-                        <span className="text-[10px] text-primary-300 md:text-sm md:font-medium lg:text-base">/5.0</span>
-                      </span>
-                    </Button>
-                  </motion.div>
-                </div>
-              </motion.div>
-            )}
-          </For>
-        </motion.div>
-      </div>
-    </section>
-  )
-}

apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx

@@ -1,84 +0,0 @@
-import { Button } from "@imphnen-frontend-service/ui/atoms";
-import { For } from "@imphnen-frontend-service/utils";
-import { FC, useRef } from "react";
-import { motion, useInView, Variants } from 'framer-motion'
-
-const OFFERS: { title: string; description: string; image: string }[] = [
-  { title: "AI-Powered Learning", description: "Level Up Instantly!", image: "/image/what-we-offer/ai-powered-learning.webp" },
-  { title: "1-on-1 Mentoring", description: "Sensei dari Dunia Nyata!", image: "/image/what-we-offer/1-on-1-mentoring.webp" },
-  { title: "Community & Resources", description: "Connect dengan Fellow Devs!", image: "/image/what-we-offer/community.webp" },
-]
-
-export const WhatWeOfferSection: FC = () => {
-  const ref = useRef(null)
-  const isInView = useInView(ref, { once: true, amount: 0.2 })
-
-  const containerVariants: Variants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.1,
-        delayChildren: 0.2,
-      },
-    },
-  }
-
-  const childVariants: Variants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.4,
-        ease: [0.25, 0.46, 0.45, 0.94],
-      },
-    },
-  }
-
-  return (
-    <section ref={ref} className="w-full mx-auto px-8 pb-4 md:px-[60px] lg:px-20 lg:pt-4">
-      <motion.div
-        initial={{ opacity: 0, y: 30 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
-        viewport={{ once: true }}
-        className="mb-6 flex justify-center lg:mb-10"
-      >
-        <Button
-          type="button"
-          size="sm"
-          variant="bordered"
-          className="h-auto px-3 py-2 font-semibold bg-primary-100 md:text-base md:px-5 md:py-2.5 lg:text-2xl lg:px-6 lg:py-3"
-        >
-          Apa yang Kami Tawarkan
-        </Button>
-      </motion.div>
-
-      <motion.div
-        className="grid gap-6 max-w-7xl mx-auto md:grid-cols-3" 
-        variants={containerVariants}
-        initial="hidden" 
-        animate={isInView ? "visible" : "hidden"}
-      >
-        <For data={OFFERS}>
-          {(offer) => (
-            <motion.div
-              key={offer.title}
-              className="relative aspect-[16/10] overflow-hidden rounded-lg md:aspect-[24/35] lg:aspect-[6/7]"
-              variants={childVariants}
-            >
-              <img src={offer.image} alt={offer.title} className="size-full object-cover" />
-              <div
-                className="absolute bottom-0 inset-x-0 p-4 h-1/2 text-primary-50 bg-gradient-to-t from-primary-500 via-primary-500/80 flex flex-col items-center justify-end gap-y-1 md:items-start lg:px-6 lg:pb-8"
-              >
-                <p className="font-semibold lg:text-[26px] lg:font-bold">{offer.title}</p>
-                <p className="text-xs lg:text-[22px] lg:font-medium">{offer.description}</p>
-              </div>
-            </motion.div>
-          )}
-        </For>
-      </motion.div>
-    </section>
-  )
-}

apps/dimentorin/src/app/(public)/(home)/page.tsx

@@ -1,20 +0,0 @@
-import { FC, ReactElement } from 'react';
-import { HeroSection } from './_components/hero-section';
-import { WhatWeOfferSection } from './_components/what-we-offer-section';
-import { TestimonialSection } from './_components/testimonial-section';
-import { FAQSection } from './_components/faq-section';
-import { CTASection } from './_components/cta-section';
-
-export const Components: FC = (): ReactElement => {
-  return (
-    <>
-      <HeroSection />
-      <WhatWeOfferSection />
-      <TestimonialSection />
-      <FAQSection />
-      <CTASection />
-    </>
-  );
-};
-
-export default Components;

apps/dimentorin/src/app/(public)/_components/footer.tsx

@@ -1,157 +0,0 @@
-import { DiscordOutlined, GithubOutlined, InstagramOutlined } from '@ant-design/icons';
-import { cn, For } from '@imphnen-frontend-service/utils';
-import React, { FC, useRef } from 'react';
-import { Link } from 'react-router-dom';
-import { motion, useInView, Variants } from 'framer-motion';
-import { SteamIcon } from '../../_components/icons';
-
-const PAGES: { label: string; href: string }[] = [
-  { label: "Home", href: "/" },
-  { label: 'Mentoring', href: '/mentoring' },
-  { label: 'Resources', href: '/resources' },
-  { label: 'Articles', href: '/articles' },
-]
-
-const COMMUNITY: { label: string; href: string; icon: React.ReactNode }[] = [
-  { label: 'Discord', href: 'https://discord.gg/imphnen', icon: <DiscordOutlined /> },
-  { label: 'Steam', href: 'https://steamcommunity.com/groups/IMPHNEN', icon: <SteamIcon /> },
-  { label: 'Github', href: 'https://github.com/IMPHNEN', icon: <GithubOutlined /> },
-  { label: 'Instagram', href: 'https://www.instagram.com/imphnen.dev', icon: <InstagramOutlined /> },
-]
-
-export const Footer: FC = () => {
-  const ref = useRef(null)
-  const isInView = useInView(ref, { once: true, amount: 0.2 })
-
-  const containerVariants: Variants = {
-    hidden: { opacity: 0 },
-    visible: { opacity: 1 },
-  }
-
-  const childVariants: Variants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.5,
-        ease: [0.25, 0.46, 0.45, 0.94],
-      },
-    },
-  }
-
-  const mascotVariants: Variants = {
-    hidden: { opacity: 0, y: 20, rotate: -12 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      rotate: 0,
-      transition: {
-        duration: 0.5,
-        ease: [0.25, 0.46, 0.45, 0.94],
-      },
-    },
-  }
-
-  const mascotTextVariants: Variants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.4,
-        delay: 0.4,
-        ease: [0.25, 0.46, 0.45, 0.94],
-      },
-    },
-  }
-
-  return (
-    <footer ref={ref} className="w-full mx-auto px-8 py-4 md:px-[60px] md:pt-8 md:pb-16 lg:px-20 lg:pb-20">
-      <motion.div
-        className={cn(
-          "relative max-w-7xl mx-auto px-10 py-8 bg-primary-500 text-primary-50 grid gap-10 rounded-lg",
-          "lg:grid-cols-3 lg:rounded-xl"
-        )}
-        variants={containerVariants}
-        initial="hidden"
-        animate={isInView ? "visible" : "hidden"}
-      >
-        {/* Mascot */}
-        <motion.div
-          className="hidden absolute bottom-0 right-0 size-40 md:block lg:size-72"
-          variants={mascotVariants}
-        >
-          <motion.img
-            src="/image/mascot-character.webp"
-            alt="IMPHNEN Mascot"
-            className="w-full h-auto absolute inset-x-0 bottom-0"
-          />
-          <motion.img
-            src="/image/mascot-text.webp"
-            alt="IMPHNEN Mascot"
-            className="w-4/6 absolute top-0 left-0"
-            variants={mascotTextVariants}
-          />
-        </motion.div>
-
-        <div className="relative">
-          <div className="text-center lg:text-start lg:mb-16">
-            <motion.img
-              src="/logos/logo.svg"
-              alt="IMPHNEN Logo"
-              className="w-[84px] mb-6 mx-auto md:w-32 lg:w-40 lg:ms-0"
-              variants={childVariants}
-            />
-
-            <motion.h4 className="mb-2 font-semibold text-[15px] md:mb-2.5 md:text-xl" variants={childVariants}>
-              Dimentorin by IMPHNEN
-            </motion.h4>
-            <motion.p className="font-medium text-xs md:text-[15px] md:max-w-[232px] md:mx-auto lg:ms-0" variants={childVariants}>
-              Karena Belajar IT Itu Harusnya Se-Seru Anime Favoritmu!
-            </motion.p>
-          </div>
-
-          <motion.p className="relative hidden text-xs font-medium text-[15px] lg:block" variants={childVariants}>
-            &copy; IMPHNEN {new Date().getFullYear()} All Rights Reserved
-          </motion.p>
-        </div>
-
-        <motion.div className="relative grid gap-10 md:flex md:justify-center lg:gap-x-20" variants={childVariants}>
-          <div className="text-center text-xs md:text-[15px] lg:text-start">
-            <h4 className="mb-5 font-medium md:mb-7 lg:text-xl">Pages</h4>
-            <ul className="font-semibold space-y-5">
-              <For data={PAGES}>
-                {({ label, href }) => (
-                  <li key={label}>
-                    <Link to={href}>{label}</Link>
-                  </li>
-                )}
-              </For>
-            </ul>
-          </div>
-
-          <div className="text-center text-xs md:text-[15px] lg:text-start">
-            <h4 className="mb-5 font-medium md:mb-7 lg:text-xl">Join Our Community</h4>
-            <ul className="font-semibold space-y-5">
-              <For data={COMMUNITY}>
-                {({ label, href, icon }) => (
-                  <li key={label}>
-                    <Link to={href} target="_blank" className="flex items-center justify-center gap-x-3 lg:justify-start">
-                      <span className="text-primary-900">{icon}</span>
-                      <span>{label}</span>
-                    </Link>
-                  </li>
-                )}
-              </For>
-            </ul>
-          </div>
-        </motion.div>
-
-        <motion.p className="relative text-center text-xs font-medium md:text-[15px] lg:hidden" variants={childVariants}>
-          &copy; IMPHNEN {new Date().getFullYear()} All Rights Reserved
-        </motion.p>
-      </motion.div>
-    </footer>
-  )
-}

apps/dimentorin/src/app/(public)/_components/header.tsx

@@ -1,93 +0,0 @@
-import { CloseOutlined, MenuOutlined } from "@ant-design/icons";
-import { Button } from "@imphnen-frontend-service/ui/atoms";
-import { cn, For, Show } from "@imphnen-frontend-service/utils";
-import { motion, useMotionValueEvent, useScroll, Variants } from "framer-motion";
-import { FC, useState } from "react";
-import { Link, useLocation } from "react-router-dom";
-
-const MENUS: { label: string; href: string }[] = [
-  { label: "Home", href: "/" },
-  { label: 'Mentoring', href: '/mentoring' },
-  { label: 'Resources', href: '/resources' },
-  { label: 'Articles', href: '/articles' },
-]
-
-export const Header: FC = () => {
-  const location = useLocation();
-  const { scrollY } = useScroll()
-
-  const [expandMenu, setExpandMenu] = useState(false);
-  const [show, setShow] = useState(true)
-
-  const headerVariants: Variants = {
-    hidden: { opacity: 0, y: -100 },
-    show: { opacity: 1, y: 0 },
-  };
-
-  useMotionValueEvent(scrollY, "change", (latest) => {
-    const prev = scrollY.getPrevious() || 0
-    if (latest > prev && latest > 100) setShow(false) 
-    else setShow(true)
-  })
-
-  return (
-    <div className="w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky overflow-hidden">
-      <motion.header
-        className="bg-white shadow-lg rounded-lg h-12 flex justify-between w-full max-w-7xl xl:mx-auto md:h-[60px] lg:h-[71px]"
-        aria-roledescription="nav"
-        variants={headerVariants}
-        animate={show ? "show" : "hidden"}
-        transition={{ duration: 0.5, ease: "easeInOut" }}
-      >
-        <div className="flex w-full items-center justify-between p-4 md:px-8 md:py-2.5">
-          <div className="flex items-center">
-            <img
-              src="/logos/simple.svg"
-              alt="IMPHNEN Logo"
-              className="h-8 md:h-10 lg:h-[52px] w-auto"
-            />
-          </div>
-
-          <nav
-            className={cn(
-              "flex flex-col items-center py-2 fixed top-24 bg-white shadow-lg rounded-lg transition-all duration-300",
-              "md:top-32 lg:static lg:py-0 lg:flex-row lg:bg-transparent lg:shadow-none lg:gap-x-4",
-              !expandMenu ? "-right-96" : "right-8 md:right-[60px]"
-            )}
-          >
-            <For data={MENUS}>
-              {(menu) => (
-                <Button
-                key={menu.label}
-                type="button"
-                variant="text"
-                className={cn(
-                  "px-10 py-1.5 text-neutral-300 hover:text-neutral-400 lg:px-2.5 lg:py-2",
-                  location.pathname === menu.href && "text-primary-500 hover:text-primary-500"
-                )}
-              >
-                <Link to={menu.href}>{menu.label}</Link>
-              </Button>
-              )}
-            </For>
-            <Button type="button" className="px-12 py-1 md:hidden">Login</Button>
-          </nav>
-
-          <div>
-            <Button type="button" className="px-5 py-2 hidden lg:block">Login</Button>
-            <Button
-              type="button"
-              variant="text"
-              className={cn("transition-transform duration-300 rotate-0 lg:hidden", expandMenu && "rotate-90")}
-              onClick={() => setExpandMenu(prev => !prev)}
-            >
-              <Show condition={!expandMenu} fallback={<CloseOutlined />}>
-                <MenuOutlined />
-              </Show>
-            </Button>
-          </div>
-        </div>
-      </motion.header>
-    </div>
-  );
-}

apps/dimentorin/src/app/(public)/layout.tsx

@@ -1,15 +0,0 @@
-import { Outlet } from "react-router-dom";
-import { Header } from "./_components/header";
-import { Footer } from "./_components/footer";
-
-export default function Layout() {
-  return (
-    <div className="flex min-h-screen flex-col bg-primary-50">
-      <Header />
-      <main className="flex-1 z-0">
-        <Outlet />
-      </main>
-      <Footer />
-    </div>
-  );
-}

apps/dimentorin/src/app/_components/icons/index.ts

@@ -1 +0,0 @@
-export * from './steam';

apps/dimentorin/src/app/_hooks/use-resend-otp.ts

@@ -1,10 +0,0 @@
-import { useSendOTP } from '@imphnen-frontend-service/utils';
-
-export const useResendOtpHook = () => {
-
-  const { resendOTP, isLoading } = useSendOTP();
-
-  return {
-    resendOTP
-  };
-};

apps/dimentorin/src/app/auth/register/otp/page.tsx

@@ -1,38 +1,12 @@
-import { FC, ReactElement, useEffect, useState } from 'react';
+import { FC, ReactElement } from 'react';
 import { ControlledInputField, RegisterResetBanner } from "@imphnen-frontend-service/ui/organisms";
 import { useOtpHook } from '../../../_hooks/use-otp';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { useSearchParams } from 'react-router-dom';
-import { useResendOtpHook } from '../../../_hooks/use-resend-otp';
 
 export const Components: FC = (): ReactElement => {
   const { form, onSubmit, isLoading } = useOtpHook()
   const [ searchParams ] = useSearchParams()
-  const [ disabled, setDisabled]  = useState(true);
-  const [ timeLeft, setTimeLeft ] = useState(5 * 60);
-  const { resendOTP } = useResendOtpHook()
-
-  useEffect(() => {
-    if (disabled) {
-      const interval = setInterval(() => {
-        setTimeLeft(prev => {
-          if (prev <= 1) {
-            clearInterval(interval);
-            setDisabled(false);
-            return 0;
-          }
-          return prev - 1;
-        });
-      }, 1000);
-      return () => clearInterval(interval);
-    }
-  }, [disabled]);
-
-  const formatTime = (seconds: number) => {
-    const m = Math.floor(seconds / 60);
-    const s = seconds % 60;
-    return `${m}:${s.toString().padStart(2, '0')}`;
-  };
 
   return (
     <div className='flex flex-col justify-center items-center min-h-screen py-[60px] px-[80px]'>
@@ -52,13 +26,6 @@ export const Components: FC = (): ReactElement => {
               maxLength={6}
               control={form.control}
             />
-            <Button type="button" className="mt-2" disabled={disabled} onClick={
-              () => {
-                resendOTP({email: searchParams.get("email") || ""})
-                setDisabled(true)
-                setTimeLeft(5 * 60)
-              }
-            }>Kirim ulang otp {disabled? `(${formatTime(timeLeft)})`: ""}</Button>
             <Button className="xl:w-full mt-2" disabled={(!form.formState.isValid || isLoading)}>Linked Start !!!</Button>
           </form>
         </div>

apps/dimentorin/src/app/page.tsx

@@ -0,0 +1,7 @@
+import { FC, ReactElement } from 'react';
+
+export const Components: FC = (): ReactElement => {
+  return <>Hallo</>;
+};
+
+export default Components;

apps/dimentorin/src/index.css

@@ -119,9 +119,3 @@
     font-weight: 400;
   }
 }
-
-@layer utilities {
-  .scrollbar-hide::-webkit-scrollbar {
-    @apply hidden;
-  }
-}

apps/landing/.env.example

@@ -1,4 +1,2 @@
 NEXT_PUBLIC_API_URL=
-
-TURNSTILE_SECRET_KEY=
-NEXT_PUBLIC_TURNSTILE_SITEKEY=
+NEXT_PUBLIC_TURNSTILE_SITEKEY=1x00000000000000000000AA

apps/landing/next.config.js

@@ -1,10 +1,8 @@
 const { composePlugins, withNx } = require('@nx/next');
-const path = require('path');
 
 /** @type {import('@nx/next/plugins/with-nx').WithNxOptions} */
 const nextConfig = {
   nx: { svgr: false },
-  output: 'standalone',
 };
 
 module.exports = composePlugins(withNx)(nextConfig);

apps/landing/src/app/(auth)/forgot-password/_actions/forgot-password-action.ts

@@ -1,8 +1,6 @@
 'use server';
 
 import { fetcher } from '@/lib/fetcher';
-import { getRemoteIp } from '@/lib/headers';
-import { fetchPostverifyTurnstile } from '../../_http/fetch-post-verify-turnstile';
 import {
   forgotPasswordValidationSchema,
   ForgotPasswordValidationType,
@@ -12,14 +10,6 @@ export async function ForgotPasswordAction(
   request: ForgotPasswordValidationType
 ) {
   const validRequest = forgotPasswordValidationSchema.parse(request);
-  const remoteIp = await getRemoteIp();
-
-  const isCapchaValid = await fetchPostverifyTurnstile(
-    validRequest.token,
-    remoteIp
-  );
-
-  if (!isCapchaValid) throw new Error('Failed to verify captcha');
 
   const { data, error } = await fetcher.POST('/v1/auth/forgot', {
     body: {
@@ -27,6 +17,8 @@ export async function ForgotPasswordAction(
     },
   });
 
+  console.log(data, error);
+
   if (error) throw new Error(error.message);
 
   return data;

apps/landing/src/app/(auth)/forgot-password/_components/forgot-password-form.tsx

@@ -11,7 +11,7 @@ import {
   Input,
 } from '@components';
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import { LuLoader } from 'react-icons/lu';
 import { useFormForgotPassword } from '../_hooks/use-form-forgot-password';
 import { usePostForgotPassowrd } from '../_hooks/use-post-forgot-password';
@@ -20,41 +20,22 @@ import { ForgotPasswordValidationType } from '../_validation/forgot-password-val
 export function ForgotPasswordForm() {
   const ref = useRef<TurnstileInstance | null>(null);
 
-  const [step, setStep] = useState<number>(1);
-  const [emailValue, setEmailValue] = useState<string>('');
-
   const form = useFormForgotPassword();
   const { mutate, isPending, error } = usePostForgotPassowrd(form);
 
-  const handleFirstStep = (values: ForgotPasswordValidationType) => {
-    setEmailValue(values.email);
-    setStep(2);
-  };
-
-  const handleSecondStep = () => {
-    mutate({ email: emailValue, token: form.getValues('token') });
+  const onSubmit = (values: ForgotPasswordValidationType) => {
+    mutate(values);
   };
 
   return (
     <Form {...form}>
-      <form
-        onSubmit={
-          step === 1
-            ? form.handleSubmit(handleFirstStep)
-            : (e) => {
-                e.preventDefault();
-                handleSecondStep();
-              }
-        }
-        className="w-full space-y-4"
-      >
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-4">
         {error && (
           <div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm">
             {(error as Error).message}
           </div>
         )}
 
-        {step === 1 && (
         <FormField
           control={form.control}
           name="email"
@@ -68,26 +49,25 @@ export function ForgotPasswordForm() {
             </FormItem>
           )}
         />
-        )}
 
-        {step === 2 && (
         <Turnstile
           ref={ref}
           siteKey={String(process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY)}
           onSuccess={(token) => form.setValue('token', token)}
-            options={{ theme: 'light', size: 'flexible', language: 'id' }}
+          options={{
+            theme: 'light',
+            size: 'flexible',
+            language: 'id',
+          }}
         />
-        )}
 
         <Button
           type="submit"
-          disabled={isPending || (step === 2 && !form.watch('token'))}
+          disabled={isPending}
           className="w-full hover:bg-[#5fbaef] bg-[#22a5f1] font-bold"
         >
           {isPending ? (
             <LuLoader className="h-5 w-5 animate-spin" />
-          ) : step === 1 ? (
-            'Selanjutnya'
           ) : (
             'Reset password'
           )}

apps/landing/src/app/(auth)/forgot-password/_hooks/use-post-forgot-password.ts

@@ -10,11 +10,7 @@ export function usePostForgotPassowrd(
     mutationFn: ForgotPasswordAction,
     onSuccess: ({ message }) => {
       form.reset();
-      toast.success(message);
-    },
-    onError: ({ message }) => {
-      form.reset();
-      toast.error(message);
+      toast(message);
     },
   });
 }

apps/landing/src/app/(auth)/reset-password/_actions/reset-password-actions.ts

@@ -1,28 +0,0 @@
-'use server';
-
-import { fetcher } from '@/lib/fetcher';
-import {
-  resetPasswordValidationSchema,
-  ResetPasswordValidationSchema,
-} from '../_validation/reset-password-validation';
-
-export async function resetPasswordAction(
-  request: ResetPasswordValidationSchema
-) {
-  const validRequest = resetPasswordValidationSchema.parse(request);
-
-  if (validRequest.confirm_password !== validRequest.confirm_password) {
-    throw new Error('Password missmatch');
-  }
-
-  const { data, error } = await fetcher.POST('/v1/auth/new-password', {
-    body: {
-      password: validRequest.password,
-      token: validRequest.token,
-    },
-  });
-
-  if (error) throw new Error(error.message);
-
-  return data;
-}

apps/landing/src/app/(auth)/reset-password/_components/reset-password-form.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import {
-  Button,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-} from '@components';
-import { LuLoaderCircle } from 'react-icons/lu';
-import { usePostResetPassword } from '../_hooks/use-post-reset-password';
-import { useResetPasswordForm } from '../_hooks/use-reset-password-form';
-import { ResetPasswordValidationSchema } from '../_validation/reset-password-validation';
-
-export function ResetPasswordForm() {
-  const form = useResetPasswordForm();
-  const { mutate, error, isPending } = usePostResetPassword(form);
-
-  const onSubmit = (values: ResetPasswordValidationSchema) => {
-    mutate(values);
-  };
-
-  return (
-    <Form {...form}>
-      {error && (
-        <div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm w-full">
-          {(error as Error).message}
-        </div>
-      )}
-
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 w-full">
-        <FormField
-          control={form.control}
-          name="password"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>New Password</FormLabel>
-              <FormControl>
-                <Input type="password" placeholder="••••••••" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="confirm_password"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Confirm New Password</FormLabel>
-              <FormControl>
-                <Input type="password" placeholder="••••••••" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <Button type="submit" className="w-full" disabled={isPending}>
-          {isPending ? (
-            <LuLoaderCircle className="size-5 animate-spin" />
-          ) : (
-            'Ubah password'
-          )}
-        </Button>
-      </form>
-    </Form>
-  );
-}

apps/landing/src/app/(auth)/reset-password/_hooks/use-post-reset-password.ts

@@ -1,24 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-import { useRouter } from 'next/navigation';
-import { toast } from 'sonner';
-import { resetPasswordAction } from '../_actions/reset-password-actions';
-import { useResetPasswordForm } from './use-reset-password-form';
-
-export function usePostResetPassword(
-  form: ReturnType<typeof useResetPasswordForm>
-) {
-  const router = useRouter();
-
-  return useMutation({
-    mutationFn: resetPasswordAction,
-    onSuccess: ({ message }) => {
-      form.reset();
-      router.replace('/signin');
-      toast.success(message);
-    },
-    onError: ({ message }) => {
-      form.reset();
-      toast.error(message);
-    },
-  });
-}

apps/landing/src/app/(auth)/reset-password/_hooks/use-reset-password-form.ts

@@ -1,22 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useSearchParams } from 'next/navigation';
-import { useForm } from 'react-hook-form';
-
-import {
-  resetPasswordValidationSchema,
-  ResetPasswordValidationSchema,
-} from '../_validation/reset-password-validation';
-
-export function useResetPasswordForm() {
-  const searchParams = useSearchParams();
-  const tokenFromQuery = searchParams.get('token') ?? '';
-
-  return useForm<ResetPasswordValidationSchema>({
-    resolver: zodResolver(resetPasswordValidationSchema),
-    defaultValues: {
-      password: '',
-      confirm_password: '',
-      token: tokenFromQuery,
-    },
-  });
-}

apps/landing/src/app/(auth)/reset-password/_validation/reset-password-validation.ts

@@ -1,31 +0,0 @@
-import { z } from 'zod';
-
-export const resetPasswordValidationSchema = z
-  .object({
-    password: z
-      .string({
-        required_error: 'Password tidak boleh kosong',
-        invalid_type_error: 'Password harus berupa string',
-      })
-      .min(8, 'Password harus minimal 8 karakter')
-      .max(50, 'Password tidak boleh lebih dari 50 karakter')
-      .regex(
-        /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W).+$/,
-        'Password harus mengandung setidaknya satu huruf kapital, satu huruf kecil, satu angka, dan satu karakter spesial'
-      ),
-    confirm_password: z
-      .string({
-        required_error: 'Konfirmasi password tidak boleh kosong',
-      })
-      .min(8, 'Konfirmasi password harus minimal 8 karakter')
-      .max(50, 'Konfirmasi password tidak boleh lebih dari 50 karakter'),
-    token: z.string(),
-  })
-  .refine((data) => data.password === data.confirm_password, {
-    message: 'Password dan Konfirmasi Password harus sama',
-    path: ['confirm_password'],
-  });
-
-export type ResetPasswordValidationSchema = z.infer<
-  typeof resetPasswordValidationSchema
->;

apps/landing/src/app/(auth)/reset-password/page.tsx

@@ -1,30 +0,0 @@
-import { LogoSimple } from '@/app/_components/logo';
-import { redirect } from 'next/navigation';
-import { use } from 'react';
-import { ResetPasswordForm } from './_components/reset-password-form';
-
-export const dynamic = 'force-dynamic';
-
-export default function Page({
-  searchParams,
-}: {
-  searchParams: Promise<{ token?: string }>;
-}) {
-  const { token } = use(searchParams);
-
-  if (!token) redirect('/signin');
-
-  return (
-    <>
-      <div className="flex flex-col items-center gap-4">
-        <LogoSimple />
-
-        <p className="text-muted-foreground text-center text-sm sm:text-base">
-          Ubah passwordmu
-        </p>
-
-        <ResetPasswordForm />
-      </div>
-    </>
-  );
-}

apps/landing/src/app/(auth)/signin/_actions/signin-action.ts

@@ -8,6 +8,8 @@ import {
 } from '../_validation/signin-validation';
 
 export async function SigninAction(request: SignInValidationType) {
+  console.log(request);
+
   const validRequest = signInValidationSchema.parse(request);
 
   const { data } = await fetchPostSignin(validRequest);

apps/landing/src/app/(auth)/signin/_hooks/use-post-signin.ts

@@ -1,6 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
-import { toast } from 'sonner';
 import { SigninAction } from '../_actions/signin-action';
 import { useFormSignin } from './use-form-signin';
 
@@ -9,20 +8,11 @@ export function usePostSignin(form: ReturnType<typeof useFormSignin>) {
 
   return useMutation({
     mutationFn: SigninAction,
-
     onSuccess: () => {
       router.push('/');
     },
-    onError: (error, variables) => {
+    onError: () => {
       form.resetField('password');
-
-      if (error.message.includes('not active')) {
-        setTimeout(() => {
-          router.push(`/verification?ref=${variables.email}`);
-        }, 750);
-      }
-
-      toast.error(error.message);
     },
   });
 }

apps/landing/src/app/(auth)/signup/_actions/signup-action.ts

@@ -1,23 +1,20 @@
 'use server';
 
-import { getRemoteIp } from '@/lib/headers';
 import { z } from 'zod';
-import { fetchPostverifyTurnstile } from '../../_http/fetch-post-verify-turnstile';
 import { fetchPostSignin } from '../_http/fetch-post-signup';
+import { fetchPostverifyTurnstile } from '../_http/fetch-post-verify-turnstile';
 import { signupValidationSchema } from '../_validation/signup-validation';
 
 export async function SignupAction(
   request: z.infer<typeof signupValidationSchema>
 ) {
   const validRequest = signupValidationSchema.parse(request);
-  const remoteIp = await getRemoteIp();
 
-  const isCapchaValid = await fetchPostverifyTurnstile(
-    validRequest.token,
-    remoteIp
+  const isCapchaValidationValid = await fetchPostverifyTurnstile(
+    validRequest.token
   );
 
-  if (!isCapchaValid) throw new Error('Failed to verify captcha');
+  if (!isCapchaValidationValid) throw new Error('Failed to verify captcha');
 
   const data = await fetchPostSignin(validRequest);
 

apps/landing/src/app/(auth)/verification/_actions/resend-otp-action.ts

@@ -1,8 +1,7 @@
 'use server';
 
 import { fetcher } from '@/lib/fetcher';
-import { getRemoteIp } from '@/lib/headers';
-import { fetchPostverifyTurnstile } from '../../_http/fetch-post-verify-turnstile';
+import { fetchPostverifyTurnstile } from '../_http/fetch-post-verify-turnstile';
 import {
   resendOTPValidationSchema,
   type ResendOTPValidationType,
@@ -10,22 +9,20 @@ import {
 
 export async function resendOTPAction(request: ResendOTPValidationType) {
   const validRequest = resendOTPValidationSchema.parse(request);
-  const remoteIp = await getRemoteIp();
 
-  const isCapchaValid = await fetchPostverifyTurnstile(
-    validRequest.token,
-    remoteIp
+  const isCapchaValidationValid = await fetchPostverifyTurnstile(
+    validRequest.token
   );
 
-  if (!isCapchaValid) throw new Error('Failed to verify captcha');
+  if (!isCapchaValidationValid) throw new Error('Failed to verify captcha');
 
-  const { data, error } = await fetcher.POST('/v1/auth/send-otp', {
+  const { data } = await fetcher.POST('/v1/auth/send-otp', {
     body: {
       email: validRequest.email,
     },
   });
 
-  if (error) throw new Error(error.message);
+  console.log(data);
 
-  return data;
+  return data?.message;
 }

apps/landing/src/app/(auth)/verification/_components/verification-tabs.tsx

@@ -31,7 +31,7 @@ export function VerificationTabs() {
           )}
           onClick={() => setActiveTab('resend')}
         >
-          Resend OTP
+          Kirim Ulang OTP
         </button>
       </div>
 

apps/landing/src/app/(auth)/verification/_hooks/use-post-resend-otp.ts

@@ -1,18 +1,13 @@
 import { useMutation } from '@tanstack/react-query';
-import { toast } from 'sonner';
+import { useRouter } from 'next/navigation';
 import { resendOTPAction } from '../_actions/resend-otp-action';
 import { useFormResendOTP } from './use-form-resend-otp';
 
 export function usePostResendOTP(form: ReturnType<typeof useFormResendOTP>) {
+  const router = useRouter();
+
   return useMutation({
     mutationFn: resendOTPAction,
-    onSuccess: ({ message }) => {
-      form.reset();
-      toast.success(message);
-    },
-    onError: ({ message }) => {
-      form.reset();
-      toast.error(message);
-    },
+    onSuccess: () => router.replace('/verification?success=true'),
   });
 }

apps/landing/src/app/(auth)/verification/_http/fetch-post-verify-turnstile.ts

@@ -0,0 +1,41 @@
+export async function fetchPostverifyTurnstile(
+  token: string,
+  remoteIp?: string
+): Promise<boolean> {
+  const url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
+  const params = new URLSearchParams({
+    secret: String(process.env.TURNSTILE_SECRET_KEY),
+    response: token,
+  });
+  if (remoteIp) {
+    params.append('remoteip', remoteIp);
+  }
+
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    body: params.toString(),
+  });
+
+  if (!res.ok) {
+    console.error('Turnstile verify HTTP error', res.status);
+    return false;
+  }
+
+  const data = (await res.json()) as TurnstileVerifyResponse;
+  if (!data.success) {
+    console.warn('Turnstile failure', data['error-codes']);
+    return false;
+  }
+
+  return true;
+}
+
+interface TurnstileVerifyResponse {
+  success: boolean;
+  challenge_ts: string;
+  hostname: string;
+  'error-codes'?: string[];
+}

apps/landing/src/app/(auth)/verification/page.tsx

@@ -1,4 +1,3 @@
-import { Suspense } from 'react';
 import { LogoSimple } from '../../_components/logo';
 import { VerificationTabs } from './_components/verification-tabs';
 
@@ -13,9 +12,7 @@ export default function Page() {
         </p>
       </div>
 
-      <Suspense>
       <VerificationTabs />
-      </Suspense>
     </>
   );
 }

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

@@ -0,0 +1,75 @@
+'use client';
+
+import { Button } from '@components';
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+export function CallToAction() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  return (
+    <section className="w-full py-20 md:py-32 relative overflow-hidden">
+      {/* Background Elements */}
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-gradient-to-b from-background to-primary/20" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.2),transparent_70%)]" />
+      </div>
+
+      <div className="container px-4 md:px-6" ref={ref}>
+        <motion.div
+          className="max-w-4xl mx-auto rounded-2xl overflow-hidden border shadow-lg"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+          transition={{ duration: 0.5 }}
+        >
+          <div className="relative p-8 md:p-12 lg:p-16 bg-background">
+            <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-blue-400/5" />
+
+            <div className="relative z-10 text-center">
+              <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
+                Siap Menjadi{' '}
+                <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                  Programmer Handal?
+                </span>
+              </h2>
+              <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
+                Bergabunglah dengan komunitas IMPHNEN sekarang dan mulai
+                perjalanan programming mu dengan cara yang menyenangkan!
+              </p>
+
+              <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                <Button
+                  size="lg"
+                  className="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 cursor-pointer"
+                  onClick={() =>
+                    window.open('https://discord.gg/imphnen', '_blank')
+                  }
+                >
+                  Gabung Discord
+                </Button>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="border-primary hover:bg-primary/10"
+                  onClick={() =>
+                    window.open(
+                      'https://facebook.com/groups/programmerhandal',
+                      '_blank'
+                    )
+                  }
+                >
+                  Join Facebook Group
+                </Button>
+              </div>
+            </div>
+
+            {/* Decorative Elements */}
+            <div className="absolute -top-12 -left-12 w-24 h-24 rounded-full bg-primary/10 blur-2xl" />
+            <div className="absolute -bottom-12 -right-12 w-24 h-24 rounded-full bg-blue-400/10 blur-2xl" />
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,110 @@
+'use client';
+
+import COMMUNITIES_STATS from '@/data/communities-stats.json';
+import COMMUNITIES from '@/data/communities.json';
+import { Button } from '@components';
+import { Icon } from '@iconify/react';
+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 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"
+    >
+      <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'}
+        >
+          {COMMUNITIES.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 }}
+        >
+          {COMMUNITIES_STATS.map((s, i) => (
+            <div key={i} className="space-y-2">
+              <div className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                {s.value}
+              </div>
+              <div className="text-sm text-muted-foreground">{s.label}</div>
+            </div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,94 @@
+'use client';
+
+import FEATURES from '@/data/features.json';
+import { Icon } from '@iconify/react';
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+export function Features() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <section
+      id="fitur"
+      className="w-full py-20 md:py-32 relative overflow-hidden"
+    >
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-gradient-to-b from-background via-background to-muted/50" />
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full bg-gradient-to-tr from-primary/5 to-blue-400/5 blur-3xl" />
+      </div>
+
+      <div className="container px-4 md:px-6" ref={ref}>
+        <div className="flex flex-col items-center justify-center space-y-4 text-center mb-16">
+          <motion.div
+            className="space-y-2"
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+            transition={{ duration: 0.5 }}
+          >
+            <div className="inline-block rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary">
+              Fitur Unggulan
+            </div>
+            <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl">
+              Belajar programming dengan cara yang lebih baik
+            </h2>
+            <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
+              IMPHNEN hadir dengan berbagai fitur untuk membantu kamu menjadi
+              programmer handal tanpa harus pusing dengan coding.
+            </p>
+          </motion.div>
+        </div>
+
+        <motion.div
+          className="grid gap-8 md:grid-cols-2 lg:grid-cols-4"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {FEATURES.map((feature, index) => (
+            <motion.div
+              key={index}
+              className="group relative overflow-hidden rounded-xl border bg-background/50 backdrop-blur-sm p-6 transition-all hover:shadow-md hover:shadow-primary/5 hover:border-primary/50"
+              variants={itemVariants}
+            >
+              <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-blue-400/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+              <div className="relative z-10">
+                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 group-hover:bg-primary/20 transition-colors">
+                  <Icon
+                    icon={feature.iconName}
+                    className="h-6 w-6 text-primary"
+                  />
+                </div>
+                <h3 className="mb-2 text-xl font-bold">{feature.title}</h3>
+                <p className="text-muted-foreground">{feature.description}</p>
+              </div>
+
+              <div className="absolute bottom-0 left-0 h-1 w-0 bg-gradient-to-r from-primary to-blue-400 group-hover:w-full transition-all duration-300" />
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,130 @@
+'use client';
+
+import HERO_STATS from '@/data/hero-stats.json';
+import { Button, SparklesIcon } from '@components';
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+import { Fragment, 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">
+      <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.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),
+          }}
+        />
+        <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 w-fit">
+              <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 md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70">
+                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 w-full sm:w-auto">
+              <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 cursor-pointer"
+                onClick={() =>
+                  window.open(
+                    'https://facebook.com/groups/programmerhandal',
+                    '_blank'
+                  )
+                }
+              >
+                Mulai Belajar
+              </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                className="w-full sm:w-auto group relative overflow-hidden border-primary"
+                onClick={() =>
+                  window.open('https://discord.com/invite/imphnen', '_blank')
+                }
+              >
+                <span className="absolute inset-0 bg-gradient-to-r from-primary/10 to-blue-400/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
+                <span className="relative">Gabung Discord</span>
+              </Button>
+            </div>
+
+            <div className="flex flex-wrap justify-center md:justify-start gap-6 sm:gap-8">
+              {HERO_STATS.map(({ value, label }, i) => (
+                <Fragment key={i}>
+                  <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">
+                      {value}
+                    </div>
+                    <div className="text-xs text-muted-foreground">{label}</div>
+                  </div>
+                  {i < HERO_STATS.length - 1 && (
+                    <div className="hidden sm:block h-10 border-r border-border mx-4" />
+                  )}
+                </Fragment>
+              ))}
+            </div>
+          </motion.div>
+
+          <motion.div
+            className="relative w-full lg:w-auto mx-auto lg:ml-auto"
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+          >
+            <Image
+              src="/logo.webp"
+              alt="logo"
+              width={600}
+              height={500}
+              className="w-full h-auto object-cover"
+            />
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,141 @@
+'use client';
+
+import LEARNING_RESOURCES from '@/data/learning-resources.json';
+import { Button } from '@components';
+import { Icon } from '@iconify/react';
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+export function LearningResources() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  return (
+    <section
+      id="sumber-belajar"
+      className="w-full py-20 md:py-32 relative overflow-hidden"
+    >
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-gradient-to-b from-background via-background to-background" />
+        <div className="absolute top-0 right-0 w-1/2 h-1/2 bg-gradient-to-bl from-primary/5 to-transparent blur-3xl" />
+        <div className="absolute bottom-0 left-0 w-1/2 h-1/2 bg-gradient-to-tr from-blue-400/5 to-transparent blur-3xl" />
+      </div>
+      <div className="container px-4 md:px-6" ref={ref}>
+        <div className="flex flex-col items-center justify-center space-y-4 text-center mb-16">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.5 }}
+          >
+            <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl">
+              Sumber Belajar
+            </h2>
+            <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
+              Akses berbagai materi belajar yang akan membantu kamu menguasai
+              konsep programming dengan cara yang menyenangkan.
+            </p>
+          </motion.div>
+        </div>
+        <motion.div
+          className="grid gap-8 md:grid-cols-2 lg:grid-cols-4"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {LEARNING_RESOURCES.map((r, i) => (
+            <motion.div
+              key={i}
+              className="group relative overflow-hidden rounded-xl border bg-background p-6 hover:shadow-lg"
+              variants={itemVariants}
+            >
+              <div className="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-primary/50 to-blue-400/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+              <div className="relative z-10">
+                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
+                  <Icon
+                    icon={r.icon}
+                    className="h-6 w-6 text-blue-600 dark:text-blue-400"
+                  />
+                </div>
+                <h3 className="mb-2 text-xl font-bold">{r.title}</h3>
+                <p className="mb-6 text-muted-foreground">{r.description}</p>
+
+                <Button
+                  variant="link"
+                  className="p-0 h-auto font-medium text-primary hover:text-primary/80"
+                  onClick={() => window.open(r.buttonLink, '_blank')}
+                >
+                  {r.buttonText}
+                  <Icon icon="tabler:arrow-right" className="h-6 w-6" />
+                </Button>
+              </div>
+              <div className="absolute -bottom-32 -right-32 w-64 h-64 bg-gradient-to-tl from-primary/10 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 group-hover:-translate-y-10 group-hover:-translate-x-10" />
+            </motion.div>
+          ))}
+        </motion.div>
+        <motion.div
+          className="mt-20 rounded-xl overflow-hidden border bg-background/50 backdrop-blur-sm"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.5, delay: 0.3 }}
+        >
+          <div className="grid md:grid-cols-2 gap-0">
+            <div className="p-8 md:p-12 flex flex-col justify-center">
+              <div className="inline-block rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary mb-4 w-fit">
+                Rekomendasi Terbaik
+              </div>
+              <h3 className="text-2xl md:text-3xl font-bold mb-4">
+                Kursus Lengkap Web Development
+              </h3>
+              <p className="text-muted-foreground mb-6">
+                Pelajari HTML, CSS, JavaScript, React, dan Node.js dalam satu
+                kursus komprehensif yang dirancang untuk pemula hingga tingkat
+                menengah.
+              </p>
+              <div className="flex flex-wrap gap-4">
+                <Button
+                  className="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 cursor-pointer"
+                  onClick={() => window.open('/', '_blank')}
+                >
+                  Mulai Kursus
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => window.open('/', '_blank')}
+                >
+                  Lihat Silabus
+                </Button>
+              </div>
+            </div>
+            <div className="relative h-64 md:h-auto">
+              <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-blue-400/20" />
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="w-16 h-16 rounded-full bg-background/80 backdrop-blur-sm flex items-center justify-center cursor-pointer hover:bg-background transition-colors">
+                  <div className="w-0 h-0 border-t-8 border-t-transparent border-l-12 border-l-primary border-b-8 border-b-transparent ml-1" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}