feat: update background and cleaning

Author: angga7togk

public/img/bg-turtle-pink-light.png

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
-import { Home, Route, Code2, Cog, Shield } from "lucide-react";
+import { Home, Route, Code2, Cog, Shield, Bug } from "lucide-react";
 
-type Section = "Entry" | "Router" | "Controller" | "Service" | "Middleware";
+type Section = "Entry" | "Router" | "Controller" | "Service" | "Middleware" | "ExceptionHandler";
 
 interface FileMap {
   file: string;
@@ -81,6 +81,22 @@ export default autoComposeMiddleware(async (ctx, next) => {
   return await next();
 });`,
   },
+  ExceptionHandler: {
+    file: "AppException.ts",
+    lang: "ts",
+    title: "Exception Handler",
+    desc: "Gaman has an exceptions handler, which can be called error handling, so it controls the existing error system. Its usage is quite simple",
+    code: `import { autoComposeExceptionHandler } from "@gaman/core";
+import { HttpException } from "@gaman/common";
+
+export default autoComposeExceptionHandler((err) => {
+    if(err instanceof HttpException){
+      return Res.json({
+        message: err.message
+      }, err.statusCode);
+    }
+});    `,
+  }
 };
 
 const ICONS: Record<Section, any> = {
@@ -89,6 +105,7 @@ const ICONS: Record<Section, any> = {
   Controller: Code2,
   Service: Cog,
   Middleware: Shield,
+  ExceptionHandler: Bug
 };
 
 export default function CodeTabs() {

public/img/bg-turtle-pink.png

@@ -1,79 +1,42 @@
 ---
-import Github from "../icons/github.astro";
-import { navbar } from "../utils/content";
+import { FaDiscord, FaGithub } from "react-icons/fa";
+// import ThemeToggle from "../components/buttons/ThemeToggle.astro";
 ---
 
-<nav
-  class="bg-[#1f1111]/40 backdrop-blur-sm md:bg-black/40 md:backdrop-blur-sm border-b border-gray-600/40 fixed inset-x-0 top-0 z-50"
->
+<nav class="fixed inset-x-0 top-0 z-50">
   <input type="checkbox" id="menu-toggle" class="peer hidden" />
 
   <div
-    class="max-w-[95rem] mx-auto flex items-center justify-between px-4 py-3"
+    class="px-4 md:px-0 md:max-w-7xl mx-auto flex items-center justify-between w-full py-3"
   >
     <!-- Logo -->
-    <a href="/" class="text-xl font-bold flex items-center gap-x-2">
-      <img class="h-14" src="/img/new/2.png" alt="GamanJS" />
-      <h1 class="text-3xl bg-gradient-to-r from-white to-pink-400 bg-clip-text text-transparent">GamanJS</h1>
+    <a href="/" class="text-xl font-bold flex items-center gap-x-1">
+      <img class="h-14" src="/img/new/2.png" alt="GamanJS" title="GamanJS" />
+      <h1 class="text-xl text-white hidden md:block">GamanJS</h1>
     </a>
 
-    <!-- Hamburger -->
-    <label
-      for="menu-toggle"
-      class="md:hidden flex flex-col space-y-2 cursor-pointer p-3 card bg-white/10"
-    >
-      <span
-        class="block w-6 h-0.5 bg-gray-300 transition-all duration-200 peer-checked:rotate-45 peer-checked:translate-y-1.5"
-      ></span>
-      <span
-        class="block w-6 h-0.5 bg-gray-300 transition-all duration-200 peer-checked:opacity-0"
-      ></span>
-      <span
-        class="block w-6 h-0.5 bg-gray-300 transition-all duration-500 peer-checked:-rotate-45 peer-checked:-translate-y-1.5"
-      ></span>
-    </label>
-
     <!-- Desktop Menu -->
-    <div class="hidden md:flex items-center gap-6">
-      <ul class="flex space-x-6 text-gray-400 font-medium">
-        {
-          navbar.links.map((item) => (
-            <li>
-              <a href={item.url} class="hover:text-pink-400 transition">
-                {item.label}
-              </a>
-            </li>
-          ))
-        }
-      </ul>
-      <div class="w-[2px] h-8 bg-gray-600 hidden md:block"></div>
+    <div class="flex items-center gap-5 text-gray-300 font-medium bg-gray-500/50 border border-gray-800 shadow-lg shadow-gray-500/30 py-2 px-4 rounded-full">
+      <a href="/docs" class="hover:text-pink-400 transition">Docs</a>
+
+      <div class="w-px h-6 bg-gray-600/80"></div>
+      <!-- <ThemeToggle client:load /> -->
       <a
         href="https://github.com/7TogkID/gaman"
         target="_blank"
-        class="hidden md:inline-flex items-center gap-1 bg-gradient-to-r from-pink-500 to-purple-500 px-6 py-3 rounded-full font-semibold text-white hover:shadow-lg hover:shadow-pink-500/40 transition-transform transform hover:scale-110"
+        class="hover:text-white hover:scale-110 transition-transform"
+        title="GitHub"
       >
-        <Github />
-        Give it Star
+        <FaGithub className="w-5 h-5" />
       </a>
-    </div>
-  </div>
 
-  <!-- Mobile Menu -->
-  <div
-    class="max-h-0 overflow-hidden peer-checked:max-h-96 transition-all duration-500 ease-in-out md:hidden border-b border-gray-600/40"
-  >
-    <div class="flex flex-col space-y-4 px-4 py-6">
-      <a href="/" class="block hover:text-pink-400 transition-all">Home</a>
-      <a href="/docs" class="block hover:text-pink-400 transition-all">Docs</a>
-      <a href="/about" class="block hover:text-pink-400 transition-all">About</a
-      >
       <a
-        href="https://github.com/7TogkID/gaman"
+        href="https://discord.gg/"
         target="_blank"
-        class="inline-flex md:hidden justify-center items-center gap-1 bg-gradient-to-r from-pink-500 to-purple-500 px-6 py-3 rounded-full font-semibold text-white hover:shadow-lg hover:shadow-pink-500/40"
+        class="hover:text-white hover:scale-110 transition-transform"
+        title="Discord"
       >
-        <Github />
-        Give it Star
+        <FaDiscord className="w-5 h-5" />
       </a>
     </div>
   </div>

public/img/gaman-new-banner-pink.png

@@ -0,0 +1,39 @@
+<button
+  id="theme-toggle"
+  class="p-2 transition-all flex items-center justify-center hover:scale-110 duration-300 text-gray-300 hover:text-white"
+  aria-label="Toggle theme"
+>
+  <svg id="theme-icon" xmlns="http://www.w3.org/2000/svg" class="h-6 " viewBox="0 0 24 24" fill="currentColor">
+    <path d="M21.64 13.64A9 9 0 0110.36 2.36 7 7 0 0012 22a9 9 0 009.64-8.36z"/>
+  </svg>
+</button>
+
+<script is:inline>
+  const root = document.documentElement;
+  const btn = document.getElementById("theme-toggle");
+  const icon = document.getElementById("theme-icon");
+
+  // ⛅️ Ambil tema dari localStorage atau sistem
+  const saved = localStorage.getItem("theme");
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const current = saved || (prefersDark ? "dark" : "light");
+
+  // Terapkan langsung sebelum render
+  root.setAttribute("data-theme", current);
+  updateIcon(current);
+
+  btn.addEventListener("click", () => {
+    const newTheme = root.getAttribute("data-theme") === "light" ? "dark" : "light";
+    root.setAttribute("data-theme", newTheme);
+    localStorage.setItem("theme", newTheme);
+    updateIcon(newTheme);
+  });
+
+  function updateIcon(theme) {
+    if (theme === "light") {
+      icon.innerHTML = '<path d="M21.64 13.64A9 9 0 0110.36 2.36 7 7 0 0012 22a9 9 0 009.64-8.36z"/>';
+    } else {
+      icon.innerHTML = '<path d="M12 4.354a1 1 0 011 1V7a1 1 0 11-2 0V5.354a1 1 0 011-1zm5.657 1.989a1 1 0 010 1.414L16.414 9a1 1 0 11-1.414-1.414l1.243-1.243a1 1 0 011.414 0zM18.646 11a1 1 0 010 2h-1.646a1 1 0 110-2h1.646zM6.343 6.343a1 1 0 010 1.414L5.1 9a1 1 0 01-1.414-1.414l1.243-1.243a1 1 0 011.414 0zM12 17a5 5 0 110-10 5 5 0 010 10zM4.354 11a1 1 0 010 2H2.708a1 1 0 110-2h1.646zM6.343 17.657a1 1 0 010-1.414L7.586 15a1 1 0 011.414 1.414l-1.243 1.243a1 1 0 01-1.414 0zM12 18.646a1 1 0 011-1H13a1 1 0 010 2h-.354a1 1 0 01-1-1z"/>';
+    }
+  }
+</script>

public/img/gaman-new-banner.png

@@ -49,7 +49,7 @@ export default function HeroSection() {
   return (
     <section className="relative flex flex-col items-center justify-center text-center px-6 h-[100dvh] overflow-hidden">
 
-      <div className="absolute inset-0 bg-[url('/img/pattern.png')] bg-black/50 bg-blend-multiply before:absolute before:inset-0 before:bg-gradient-to-t before:from-black before:via-black/60 before:to-transparent after:absolute after:inset-0 after:bg-[radial-gradient(ellipse_at_center,_rgba(255,0,150,0.1),_transparent_70%)]" />
+      <div className="absolute inset-0 bg-[url('/img/bg-turtle-pink.png')] bg-cover bg-bg-primary/50 bg-blend-multiply before:absolute before:inset-0 before:bg-gradient-to-t before:from-bg-primary before:via-bg-primary/60 before:to-transparent after:absolute after:inset-0 after:bg-[radial-gradient(ellipse_at_center,_rgba(255,0,150,0.1),_transparent_70%)]" />
 
       <div className="absolute -top-20 -left-32 w-96 h-96 bg-pink-500/20 rounded-full blur-[160px] animate-pulse" />
       <div className="absolute -top-20 right-0 w-[28rem] h-[28rem] bg-purple-600/20 rounded-full blur-[180px] animate-pulse delay-1000" />
@@ -63,7 +63,7 @@ export default function HeroSection() {
           Fast
         </h1>
 
-        <p className="text-lg md:text-xl md:max-w-3xl text-stone-300 leading-relaxed mb-10">
+        <p className="text-lg md:text-xl md:max-w-3xl text-text-primary leading-relaxed mb-10">
           GamanJS is a modern backend framework built for resilience,
           scalability, simplicity, and blazing performance — empowering
           developers to build beautiful APIs faster than ever.

src/components/CodeTabs.tsx

@@ -15,13 +15,32 @@ import { features, plugins } from "../utils/content";
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GamanJS - Backend Framework</title>
-    <link rel="shortcut icon" href="/img/new/1.png" type="image/png" />
+    <link
+      id="favicon"
+      rel="icon"
+      type="image/png"
+      href="/img/new/3.png"
+    />
+
+    <script is:inline>
+      const favicon = document.getElementById("favicon");
+      const activeIcon = "/img/new/3.png"; // saat tab aktif
+      const inactiveIcon = "/img/new/2.png"; // saat tab tidak aktif
+
+      document.addEventListener("visibilitychange", () => {
+        if (document.hidden) {
+          favicon.href = inactiveIcon;
+        } else {
+          favicon.href = activeIcon;
+        }
+      });
+    </script>
   </head>
-  <body class="bg-black text-pink-100 relative overflow-x-hidden">
+  <body class="bg-bg-primary text-pink-100 relative overflow-x-hidden">
     <Navbar />
 
     <main class="backdrop-blur-[2px]">
-      <HeroSection client:load/>
+      <HeroSection client:load />
 
       <!-- END: Hero Content -->
 
@@ -33,7 +52,7 @@ import { features, plugins } from "../utils/content";
           >
             The GamanJS Structure
           </h3>
-          <p class="w-[90%] text-stone-400 mb-10">
+          <p class="w-[90%] text-text-primary mb-10">
             GamanJS adopts a <span class="text-pink-300">functional-first</span>
             design. Instead of relying on heavy OOP patterns, everything — from routes
             to controllers — is built through <span class="text-purple-300"
@@ -54,7 +73,7 @@ import { features, plugins } from "../utils/content";
         </div>
       </section>
 
-      <section class="relative py-16 px-4 bg-black/40 backdrop-blur-sm">
+      <section class="relative py-16 px-4 bg-bg-primary/40 backdrop-blur-sm">
         <div
           class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-[1fr_2fr] gap-10 items-start"
         >
@@ -65,7 +84,7 @@ import { features, plugins } from "../utils/content";
             >
               Framework Performance Overview
             </h3>
-            <p class="text-stone-400 leading-relaxed">
+            <p class="text-text-primary leading-relaxed">
               A quick look at how <span class="text-pink-300 font-semibold"
                 >GamanJS</span
               >
@@ -95,7 +114,7 @@ import { features, plugins } from "../utils/content";
                 >
                 </div>
               </div>
-              <p class="text-stone-400 text-sm mt-2">
+              <p class="text-text-primary text-sm mt-2">
                 Lightweight, modular, and purely functional — crafted for
                 clarity and speed.
               </p>
@@ -105,15 +124,15 @@ import { features, plugins } from "../utils/content";
             <div class="relative">
               <div class="flex justify-between mb-2 text-sm font-mono">
                 <span class="text-stone-300">NestJS</span>
-                <span class="text-stone-400">Balanced</span>
+                <span class="text-text-primary">Balanced</span>
               </div>
               <div class="w-full h-4 bg-white/10 rounded-full overflow-hidden">
                 <div
                   class="h-full bg-gradient-to-r from-purple-600 to-purple-700 rounded-full w-[70%]"
                 >
                 </div>
               </div>
-              <p class="text-stone-400 text-sm mt-2">
+              <p class="text-text-primary text-sm mt-2">
                 OOP-based and well-structured, but introduces runtime overhead.
               </p>
             </div>
@@ -122,15 +141,15 @@ import { features, plugins } from "../utils/content";
             <div class="relative">
               <div class="flex justify-between mb-2 text-sm font-mono">
                 <span class="text-stone-300">AdonisJS</span>
-                <span class="text-stone-400">Feature-rich</span>
+                <span class="text-text-primary">Feature-rich</span>
               </div>
               <div class="w-full h-4 bg-white/10 rounded-full overflow-hidden">
                 <div
                   class="h-full bg-gradient-to-r from-pink-800 to-purple-900 rounded-full w-[50%]"
                 >
                 </div>
               </div>
-              <p class="text-stone-400 text-sm mt-2">
+              <p class="text-text-primary text-sm mt-2">
                 Complete ecosystem and full-stack tools — trades off performance
                 for convenience.
               </p>
@@ -148,14 +167,14 @@ import { features, plugins } from "../utils/content";
         >
         </div>
       </section>
-      <section class="relative py-16 px-4 bg-black/40 backdrop-blur-sm">
+      <section class="relative py-16 px-4 bg-bg-primary/40 backdrop-blur-sm">
         <div class="max-w-6xl mx-auto">
           <GamanLivePreview client:load />
         </div>
       </section>
 
       <section
-        class="py-16 px-6 bg-gradient-to-b from-purple-500/10 to-transparent relative "
+        class="py-16 px-6 bg-gradient-to-b from-purple-500/10 to-transparent relative"
       >
         <div
           class="absolute top-0 left-1/2 -translate-x-1/2 w-[90%] h-px bg-gradient-to-r from-transparent via-purple-500/40 to-transparent"
@@ -167,7 +186,7 @@ import { features, plugins } from "../utils/content";
           >
             Contributors
           </h3>
-          <p class="text-stone-400 mb-10">
+          <p class="text-text-primary mb-10">
             These amazing developers have helped shape GamanJS and its
             documentation.
           </p>

src/components/Navbar.astro

@@ -1,10 +1,26 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 @import "tailwindcss";
 
+/* input.css or your main CSS file */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+:root {
+  --bg-primary: #233241;
+  --text-primary: #d6d3d1;
+}
+
+:root[data-theme="light"] {
+  --bg-primary: #edfafd;
+  --text-primary: #31454e; 
+}
+
 @theme {
   --font-poppins: "Poppins", sans-serif;
+  --color-bg-primary: var(--bg-primary);
+  --color-text-primary: var(--text-primary);
 }
 
+
 @layer utilities {
   body {
     @apply font-poppins;
@@ -63,4 +79,4 @@
 * {
   scrollbar-width: thin;
   scrollbar-color: #ff9ecf #b44378;
-}
+}