Initial Commit

Commit pertama, memindahkan repository dari github ke gitea.
2026-11-04 17:18:53 +07:00
commit 13a47fbebf
@@ -0,0 +1,161 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Sparkles, Menu, X, Compass, Layers, ShieldCheck, Box } from "lucide-react";
+import CosmicAudioToggle from "../ui/CosmicAudioToggle";
+
+export default function Navbar() {
+  const [scrolled, setScrolled] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 20);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const navLinks = [
+    { name: "About", href: "#about", icon: Compass },
+    { name: "Core Tracks", href: "#focus", icon: Layers },
+    { name: "Showcase", href: "#portfolio", icon: Box },
+    { name: "Studio Creed", href: "#creed", icon: ShieldCheck },
+  ];
+
+  return (
+    <header
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+        scrolled
+          ? "py-3 bg-[#0a0a12]/80 backdrop-blur-xl border-b border-white/10 shadow-[0_4px_30px_rgba(0,0,0,0.5)]"
+          : "py-5 bg-transparent"
+      }`}
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between">
+          {/* Brand Logo */}
+          <a
+            href="#"
+            className="flex items-center gap-3 group focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 rounded-lg p-1"
+          >
+            <div className="relative flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500/20 via-purple-500/10 to-cyan-500/20 border border-white/15 group-hover:border-cyan-400/50 transition-colors shadow-inner">
+              <span className="w-2.5 h-2.5 rounded-full bg-cyan-400 group-hover:scale-125 transition-transform shadow-[0_0_12px_#38bdf8]" />
+              <div className="absolute inset-0 rounded-xl border border-indigo-500/30 group-hover:rotate-45 transition-transform duration-500 pointer-events-none" />
+            </div>
+
+            <div className="flex flex-col">
+              <div className="flex items-center gap-2">
+                <span className="font-extrabold tracking-widest text-lg text-white group-hover:text-cyan-200 transition-colors">
+                  AGHATIS
+                </span>
+                <span className="text-[10px] font-mono tracking-widest uppercase px-1.5 py-0.5 rounded bg-indigo-500/15 border border-indigo-400/20 text-indigo-300">
+                  STUDIO
+                </span>
+              </div>
+              <span className="text-[10px] font-mono text-slate-400 tracking-wider">
+                ORIGINAL IP LAB
+              </span>
+            </div>
+          </a>
+
+          {/* Desktop Navigation Links */}
+          <nav className="hidden md:flex items-center gap-1 glass-panel px-4 py-1.5 rounded-full border border-white/10">
+            {navLinks.map((link) => (
+              <a
+                key={link.name}
+                href={link.href}
+                className="px-3.5 py-1.5 text-xs font-mono uppercase tracking-wider text-slate-300 hover:text-white rounded-full hover:bg-white/5 transition-all duration-200"
+              >
+                {link.name}
+              </a>
+            ))}
+          </nav>
+
+          {/* Right actions: Audio Toggle, Live Status & CTA */}
+          <div className="hidden sm:flex items-center gap-3">
+            <CosmicAudioToggle />
+
+            {/* In-house status pill */}
+            <div className="hidden lg:flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-950/40 border border-indigo-500/20 text-[11px] font-mono text-indigo-200">
+              <span className="w-1.5 h-1.5 rounded-full bg-indigo-400 animate-pulse" />
+              <span>100% PRODUCT LAB</span>
+            </div>
+
+            <a
+              href="#portfolio"
+              className="relative inline-flex items-center justify-center px-4 py-2 text-xs font-mono tracking-wider font-semibold uppercase text-slate-900 bg-gradient-to-r from-cyan-400 via-sky-300 to-indigo-300 rounded-lg shadow-[0_0_20px_rgba(56,189,248,0.35)] hover:shadow-[0_0_25px_rgba(56,189,248,0.6)] transition-all duration-300 hover:scale-[1.02] active:scale-95"
+            >
+              <Sparkles className="w-3.5 h-3.5 mr-1.5 text-slate-950" />
+              Explore IP
+            </a>
+          </div>
+
+          {/* Mobile Menu Button */}
+          <div className="flex sm:hidden items-center gap-2">
+            <CosmicAudioToggle />
+            <button
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              className="p-2 rounded-lg glass-panel text-slate-300 hover:text-white focus:outline-none"
+              aria-label="Toggle navigation menu"
+            >
+              {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Drawer Menu */}
+      <AnimatePresence>
+        {mobileMenuOpen && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.25 }}
+            className="sm:hidden border-b border-white/10 bg-[#0a0a12]/95 backdrop-blur-2xl overflow-hidden"
+          >
+            <div className="px-6 py-6 space-y-4">
+              <div className="flex items-center justify-between pb-3 border-b border-white/10 text-xs font-mono text-slate-400">
+                <span>SECTOR // AGH-MOBILE-HUD</span>
+                <span className="text-cyan-400">STATUS: NOMINAL</span>
+              </div>
+
+              <div className="space-y-1">
+                {navLinks.map((link) => {
+                  const Icon = link.icon;
+                  return (
+                    <a
+                      key={link.name}
+                      href={link.href}
+                      onClick={() => setMobileMenuOpen(false)}
+                      className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-mono text-slate-300 hover:text-white hover:bg-white/5 transition-colors"
+                    >
+                      <Icon className="w-4 h-4 text-cyan-400" />
+                      <span>{link.name}</span>
+                    </a>
+                  );
+                })}
+              </div>
+
+              <div className="pt-2">
+                <a
+                  href="#portfolio"
+                  onClick={() => setMobileMenuOpen(false)}
+                  className="w-full flex items-center justify-center gap-2 px-4 py-3 text-xs font-mono uppercase tracking-wider font-semibold text-slate-950 bg-gradient-to-r from-cyan-400 to-indigo-400 rounded-lg shadow-lg"
+                >
+                  <Sparkles className="w-4 h-4 text-slate-950" />
+                  Explore Original IP
+                </a>
+              </div>
+
+              <div className="text-[11px] font-mono text-center text-slate-400 pt-2 border-t border-white/5">
+                Independent Product Studio • Original Software & Games
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </header>
+  );
+}