fix: update header component to use router for navigation and add signin page

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

@@ -41,7 +41,7 @@ export function CallToAction() {
               <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"
+                  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')
                   }

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

@@ -1,45 +1,13 @@
 '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 items = [
-    {
-      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',
-    },
-  ];
-
-  const stats = [
-    { value: '100K+', label: 'Member Aktif' },
-    { value: '50+', label: 'Event Bulanan' },
-    { value: '100+', label: 'Mentor Profesional' },
-    { value: '5K+', label: 'Diskusi Mingguan' },
-  ];
-
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, amount: 0.2 });
 
@@ -93,7 +61,7 @@ export function Community() {
           initial="hidden"
           animate={isInView ? 'visible' : 'hidden'}
         >
-          {items.map((c, i) => (
+          {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"
@@ -127,7 +95,7 @@ export function Community() {
           animate={isInView ? { opacity: 1, y: 0 } : {}}
           transition={{ duration: 0.5, delay: 0.3 }}
         >
-          {stats.map((s, i) => (
+          {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}

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

@@ -1,37 +1,11 @@
 '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 features = [
-    {
-      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.',
-    },
-  ];
-
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, amount: 0.2 });
 
@@ -91,7 +65,7 @@ export function Features() {
           initial="hidden"
           animate={isInView ? 'visible' : 'hidden'}
         >
-          {features.map((feature, index) => (
+          {FEATURES.map((feature, index) => (
             <motion.div
               key={index}
               className="group relative overflow-hidden rounded-xl border bg-background/50 backdrop-blur-sm p-6 transition-all hover:shadow-md hover:shadow-primary/5 hover:border-primary/50"

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

@@ -1,17 +1,12 @@
 'use client';
 
-import { Button, CodeIcon, SparklesIcon, UsersIcon } from '@components';
+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 stats = [
-    { value: '180K+', label: 'Member' },
-    { value: '500+', label: 'Tutorial' },
-    { value: '24/7', label: 'Yapping' },
-  ];
-
   const [scrollY, setScrollY] = useState(0);
 
   useEffect(() => {
@@ -74,7 +69,7 @@ export function Hero() {
             <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
               <Button
                 size="lg"
-                className="w-full sm:w-auto bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer"
+                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',
@@ -97,8 +92,8 @@ export function Hero() {
               </Button>
             </div>
 
-            <div className="flex flex-wrap justify-center gap-6 sm:gap-8">
-              {stats.map(({ value, label }, i) => (
+            <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">
@@ -106,7 +101,7 @@ export function Hero() {
                     </div>
                     <div className="text-xs text-muted-foreground">{label}</div>
                   </div>
-                  {i < stats.length - 1 && (
+                  {i < HERO_STATS.length - 1 && (
                     <div className="hidden sm:block h-10 border-r border-border mx-4" />
                   )}
                 </Fragment>
@@ -120,24 +115,13 @@ export function Hero() {
             animate={{ opacity: 1, scale: 1 }}
             transition={{ duration: 0.5, delay: 0.2 }}
           >
-            <div className="relative">
-              <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>
-              <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="/logo.webp"
-                  alt="logo"
-                  width={600}
-                  height={500}
-                  className="w-full h-auto object-cover"
-                />
-              </div>
-            </div>
+            <Image
+              src="/logo.webp"
+              alt="logo"
+              width={600}
+              height={500}
+              className="w-full h-auto object-cover"
+            />
           </motion.div>
         </div>
       </div>

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

@@ -1,46 +1,12 @@
 '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 resources = [
-    {
-      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: '#',
-    },
-  ];
-
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, amount: 0.2 });
 
@@ -95,7 +61,7 @@ export function LearningResources() {
           initial="hidden"
           animate={isInView ? 'visible' : 'hidden'}
         >
-          {resources.map((r, i) => (
+          {LEARNING_RESOURCES.map((r, i) => (
             <motion.div
               key={i}
               className="group relative overflow-hidden rounded-xl border bg-background p-6 hover:shadow-lg"
@@ -146,7 +112,7 @@ export function LearningResources() {
               </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"
+                  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

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

@@ -1,42 +1,13 @@
 'use client';
 
+import TESTIMONIAL_STATS from '@/data/testimonial-stats.json';
+import TESTIMONIALS from '@/data/testimonials.json';
 import { QuoteIcon } from '@components';
 import { motion, useInView } from 'framer-motion';
 import Image from 'next/image';
 import { useRef } from 'react';
 
 export function Testimonials() {
-  const items = [
-    {
-      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: '',
-    },
-    {
-      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: '',
-    },
-    {
-      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: '',
-    },
-  ];
-
-  const stats = [
-    { value: '98%', label: 'Tingkat Kemalasan' },
-    { value: '4.9/5', label: 'Rating Drama' },
-    { value: '85%', label: 'Mendapat Pekerjaan' },
-    { value: '24/7', label: 'Yapping' },
-  ];
-
   const ref = useRef<HTMLDivElement>(null);
   const isInView = useInView(ref, { once: true, amount: 0.2 });
 
@@ -85,7 +56,7 @@ export function Testimonials() {
           initial="hidden"
           animate={isInView ? 'visible' : 'hidden'}
         >
-          {items.map((t, idx) => (
+          {TESTIMONIALS.map((t, idx) => (
             <motion.div
               key={idx}
               className="group relative overflow-hidden rounded-xl border bg-background p-6 transition-all hover:shadow-lg"
@@ -106,6 +77,7 @@ export function Testimonials() {
                       width={600}
                       height={500}
                       className="object-cover"
+                      unoptimized
                     />
                   </div>
                   <div>
@@ -137,7 +109,7 @@ export function Testimonials() {
               </p>
             </div>
             <div className="grid grid-cols-2 gap-4">
-              {stats.map((s, idx) => (
+              {TESTIMONIAL_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}

apps/landing/src/app/_components/header.tsx

@@ -4,10 +4,13 @@ import { Button, MenuIcon, XIcon } from '@components';
 import { cn } from '@utils';
 import Image from 'next/image';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { SimpleThemeToggle } from './simple-theme-toggle';
 
 export function Header() {
+  const router = useRouter();
+
   const [isScrolled, setIsScrolled] = useState(false);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
@@ -33,7 +36,7 @@ export function Header() {
           <div className="relative overflow-hidden rounded">
             <Link href="/">
               <Image
-                src="/logo.png"
+                src="/logo.webp"
                 alt="IMPHNEN"
                 width={64}
                 height={64}
@@ -78,16 +81,14 @@ export function Header() {
           </Link>
         </nav>
 
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-x-2">
           <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 font-bold text-black hover:text-white cursor-pointer"
-            onClick={() =>
-              window.open('https://discord.com/invite/imphnen', '_blank')
-            }
+            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={() => router.push('/signin')}
           >
-            Gabung Discord
+            Login
           </Button>
 
           {/* Mobile Menu Button */}
@@ -138,15 +139,13 @@ export function Header() {
             >
               Testimoni
             </Link>
-            <a
-              href="https://discord.com/invite/imphnen"
-              target="_blank"
-              className="mt-4"
+
+            <Button
+              onClick={() => router.push('/signin')}
+              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"
             >
-              <Button className="mt-4 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">
-                Gabung Discord
-              </Button>
-            </a>
+              Login
+            </Button>
           </nav>
         </div>
       )}

apps/landing/src/app/layout.tsx

@@ -1,6 +1,6 @@
+import '@/styles/globals.css';
 import { type Metadata } from 'next';
 import { Inter } from 'next/font/google';
-import '../../styles/globals.css';
 import Footer from './_components/footer';
 import { Header } from './_components/header';
 import { ThemeProvider } from './_components/theme-provider';

apps/landing/src/app/signin/page.tsx

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

apps/landing/src/data/communities-stats.json

@@ -0,0 +1,6 @@
+[
+  { "value": "100K+", "label": "Member Aktif" },
+  { "value": "50+", "label": "Event Bulanan" },
+  { "value": "100+", "label": "Mentor Profesional" },
+  { "value": "5K+", "label": "Diskusi Mingguan" }
+]

apps/landing/src/data/communities.json

@@ -0,0 +1,23 @@
+[
+  {
+    "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"
+  }
+]

apps/landing/src/data/features.json

@@ -0,0 +1,22 @@
+[
+  {
+    "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."
+  }
+]

apps/landing/src/data/hero-stats.json

@@ -0,0 +1,5 @@
+[
+  { "value": "180K+", "label": "Member" },
+  { "value": "500+", "label": "Tutorial" },
+  { "value": "24/7", "label": "Yapping" }
+]

apps/landing/src/data/learning-resources.json

@@ -0,0 +1,30 @@
+[
+  {
+    "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": "#"
+  }
+]

apps/landing/src/data/testimonial-stats.json

@@ -0,0 +1,6 @@
+[
+  { "value": "98%", "label": "Tingkat Kemalasan" },
+  { "value": "4.9/5", "label": "Rating Drama" },
+  { "value": "85%", "label": "Mendapat Pekerjaan" },
+  { "value": "24/7", "label": "Yapping" }
+]

apps/landing/src/data/testimonials.json

@@ -0,0 +1,20 @@
+[
+  {
+    "quote": "Sebagai seseorang yang awalnya buta sama sekali tentang programming, kini saya bisa membuat website sendiri dengan percaya diri. IMPHNEN benar-benar jadi pintu gerbang saya ke dunia web development!",
+    "name": "Ega",
+    "role": "Web Developer",
+    "avatar": "https://avatars.githubusercontent.com/u/97678571?v=4"
+  },
+  {
+    "quote": "IMPHNEN bukan cuma komunitas, tapi juga jadi tempat saya berkembang sebagai backend engineer. Diskusi teknisnya berbobot, dan respon dari komunitas selalu cepat dan tepat sasaran.",
+    "name": "Maulana",
+    "role": "Backend Engineer",
+    "avatar": "https://avatars.githubusercontent.com/u/53475078?v=4"
+  },
+  {
+    "quote": "Sebagai fullstack engineer pemula, saya merasa sangat terbantu dengan komunitas Discord IMPHNEN. Materinya praktikal, pembahasannya jelas, dan member-nya selalu siap membantu.",
+    "name": "Rasyid",
+    "role": "Fullstack Engineer",
+    "avatar": "https://avatars.githubusercontent.com/u/49753444?v=4"
+  }
+]