Initial Commit

Commit pertama, memindahkan repository dari github ke gitea.

app/admin/page.tsx

@@ -0,0 +1,896 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import {
+  Lock,
+  LogOut,
+  Plus,
+  Edit,
+  Trash2,
+  ExternalLink,
+  Sparkles,
+  Terminal,
+  Gamepad2,
+  FlaskConical,
+  Search,
+  CheckCircle,
+  AlertCircle,
+  Database,
+  ArrowLeft,
+  X,
+  RefreshCw,
+} from "lucide-react";
+
+interface ProjectItem {
+  id: string;
+  title: string;
+  category: "software" | "games" | "lab";
+  categoryLabel: string;
+  tagline: string;
+  status: string;
+  statusType: "active" | "alpha" | "prototype" | "upcoming";
+  releaseTarget: string;
+  description: string;
+  longDescription: string;
+  features: string[];
+  stack: string[];
+  accentGradient: string;
+  borderGlow: string;
+  iconName: string;
+  orderIndex?: number;
+}
+
+export default function AdminPage() {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [loginError, setLoginError] = useState("");
+  const [loginLoading, setLoginLoading] = useState(false);
+
+  // Dashboard state
+  const [projects, setProjects] = useState<ProjectItem[]>([]);
+  const [loadingProjects, setLoadingProjects] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState<string>("all");
+
+  // Modal state
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingProject, setEditingProject] = useState<ProjectItem | null>(null);
+  const [formError, setFormError] = useState("");
+  const [formSubmitting, setFormSubmitting] = useState(false);
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
+
+  // Form Fields
+  const [formId, setFormId] = useState("");
+  const [formTitle, setFormTitle] = useState("");
+  const [formCategory, setFormCategory] = useState<"software" | "games" | "lab">("software");
+  const [formCategoryLabel, setFormCategoryLabel] = useState("");
+  const [formTagline, setFormTagline] = useState("");
+  const [formStatus, setFormStatus] = useState("In Active Dev");
+  const [formStatusType, setFormStatusType] = useState<"active" | "alpha" | "prototype" | "upcoming">("active");
+  const [formReleaseTarget, setFormReleaseTarget] = useState("2027");
+  const [formDescription, setFormDescription] = useState("");
+  const [formLongDescription, setFormLongDescription] = useState("");
+  const [formFeatures, setFormFeatures] = useState("");
+  const [formStack, setFormStack] = useState("");
+  const [formIconName, setFormIconName] = useState("Terminal");
+  const [formAccentGradient, setFormAccentGradient] = useState("from-cyan-500/20 via-blue-600/10 to-transparent");
+
+  // Check initial authentication
+  useEffect(() => {
+    checkAuthStatus();
+  }, []);
+
+  const checkAuthStatus = async () => {
+    try {
+      const res = await fetch("/api/auth/me");
+      const data = await res.json();
+      setIsAuthenticated(data.authenticated === true);
+      if (data.authenticated) {
+        fetchProjects();
+      }
+    } catch {
+      setIsAuthenticated(false);
+    }
+  };
+
+  const fetchProjects = async () => {
+    setLoadingProjects(true);
+    try {
+      const res = await fetch("/api/projects");
+      const data = await res.json();
+      if (data.success && Array.isArray(data.data)) {
+        setProjects(data.data);
+      }
+    } catch {
+      showToast("Error loading projects from database", true);
+    } finally {
+      setLoadingProjects(false);
+    }
+  };
+
+  const showToast = (msg: string, isError = false) => {
+    setToastMessage(msg);
+    setTimeout(() => {
+      setToastMessage(null);
+    }, 4000);
+  };
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoginError("");
+    setLoginLoading(true);
+
+    try {
+      const res = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, password }),
+      });
+
+      const data = await res.json();
+      if (res.ok && data.success) {
+        setIsAuthenticated(true);
+        fetchProjects();
+      } else {
+        setLoginError(data.error || "Authentication failed. Check credentials.");
+      }
+    } catch {
+      setLoginError("Network connection error to database.");
+    } finally {
+      setLoginLoading(false);
+    }
+  };
+
+  const handleLogout = async () => {
+    await fetch("/api/auth/logout", { method: "POST" });
+    setIsAuthenticated(false);
+    setUsername("");
+    setPassword("");
+  };
+
+  const openCreateModal = () => {
+    setEditingProject(null);
+    setFormId("");
+    setFormTitle("");
+    setFormCategory("software");
+    setFormCategoryLabel("Creative Tool");
+    setFormTagline("");
+    setFormStatus("In Active Dev");
+    setFormStatusType("active");
+    setFormReleaseTarget("2027");
+    setFormDescription("");
+    setFormLongDescription("");
+    setFormFeatures("");
+    setFormStack("Rust, WebGPU, TypeScript");
+    setFormIconName("Terminal");
+    setFormAccentGradient("from-cyan-500/20 via-blue-600/10 to-transparent");
+    setFormError("");
+    setIsModalOpen(true);
+  };
+
+  const openEditModal = (p: ProjectItem) => {
+    setEditingProject(p);
+    setFormId(p.id);
+    setFormTitle(p.title);
+    setFormCategory(p.category);
+    setFormCategoryLabel(p.categoryLabel);
+    setFormTagline(p.tagline);
+    setFormStatus(p.status);
+    setFormStatusType(p.statusType);
+    setFormReleaseTarget(p.releaseTarget);
+    setFormDescription(p.description);
+    setFormLongDescription(p.longDescription);
+    setFormFeatures(p.features ? p.features.join("\n") : "");
+    setFormStack(p.stack ? p.stack.join(", ") : "");
+    setFormIconName(p.iconName || "Terminal");
+    setFormAccentGradient(p.accentGradient || "from-cyan-500/20 via-blue-600/10 to-transparent");
+    setFormError("");
+    setIsModalOpen(true);
+  };
+
+  const handleDelete = async (id: string, title: string) => {
+    if (!confirm(`Are you sure you want to delete "${title}" from the database?`)) {
+      return;
+    }
+
+    try {
+      const res = await fetch(`/api/projects/${id}`, { method: "DELETE" });
+      if (res.ok) {
+        setProjects((prev) => prev.filter((p) => p.id !== id));
+        showToast(`Project "${title}" deleted from database.`);
+      } else {
+        const data = await res.json();
+        showToast(data.error || "Failed to delete", true);
+      }
+    } catch {
+      showToast("Error deleting project", true);
+    }
+  };
+
+  const handleSaveProject = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setFormError("");
+    setFormSubmitting(true);
+
+    try {
+      const featuresArray = formFeatures
+        .split("\n")
+        .map((s) => s.trim())
+        .filter((s) => s.length > 0);
+
+      const stackArray = formStack
+        .split(",")
+        .map((s) => s.trim())
+        .filter((s) => s.length > 0);
+
+      const payload = {
+        id: formId || formTitle.toLowerCase().replace(/[^a-z0-9]+/g, "-"),
+        title: formTitle,
+        category: formCategory,
+        categoryLabel: formCategoryLabel,
+        tagline: formTagline,
+        status: formStatus,
+        statusType: formStatusType,
+        releaseTarget: formReleaseTarget,
+        description: formDescription,
+        longDescription: formLongDescription,
+        features: featuresArray,
+        stack: stackArray,
+        iconName: formIconName,
+        accentGradient: formAccentGradient,
+        borderGlow: `hover:border-${formCategory === "games" ? "cyan" : formCategory === "lab" ? "emerald" : "purple"}-400/50`,
+      };
+
+      if (editingProject) {
+        // Update existing
+        const res = await fetch(`/api/projects/${editingProject.id}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+
+        if (res.ok) {
+          showToast(`Project "${formTitle}" updated successfully!`);
+          setIsModalOpen(false);
+          fetchProjects();
+        } else {
+          const data = await res.json();
+          setFormError(data.error || "Failed to update project");
+        }
+      } else {
+        // Create new
+        const res = await fetch("/api/projects", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+
+        if (res.ok) {
+          showToast(`New project "${formTitle}" deployed to database!`);
+          setIsModalOpen(false);
+          fetchProjects();
+        } else {
+          const data = await res.json();
+          setFormError(data.error || "Failed to create project");
+        }
+      }
+    } catch {
+      setFormError("Network error while saving project.");
+    } finally {
+      setFormSubmitting(false);
+    }
+  };
+
+  // Filter projects by category and search
+  const filteredProjects = projects.filter((p) => {
+    const matchesCategory =
+      selectedCategory === "all" || p.category === selectedCategory;
+    const matchesSearch =
+      p.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      p.tagline.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      p.categoryLabel.toLowerCase().includes(searchQuery.toLowerCase());
+    return matchesCategory && matchesSearch;
+  });
+
+  // Loading screen during session check
+  if (isAuthenticated === null) {
+    return (
+      <div className="min-h-screen bg-[#0a0a12] flex items-center justify-center text-cyan-400 font-mono text-sm">
+        <div className="flex items-center gap-3">
+          <div className="w-5 h-5 rounded-full border-2 border-cyan-400 border-t-transparent animate-spin" />
+          <span>CHECKING SECURE COCKPIT CREDENTIALS...</span>
+        </div>
+      </div>
+    );
+  }
+
+  // LOGIN SCREEN
+  if (!isAuthenticated) {
+    return (
+      <div className="min-h-screen bg-[#0a0a12] flex flex-col justify-center items-center px-4 relative overflow-hidden">
+        {/* Background ambient lighting */}
+        <div className="absolute top-1/4 left-1/3 w-96 h-96 bg-cyan-500/10 rounded-full blur-[120px] pointer-events-none" />
+        <div className="absolute bottom-1/4 right-1/3 w-96 h-96 bg-purple-600/10 rounded-full blur-[140px] pointer-events-none" />
+
+        <div className="w-full max-w-md relative z-10">
+          <div className="glass-panel p-8 sm:p-10 rounded-3xl border border-cyan-500/30 shadow-[0_0_50px_rgba(56,189,248,0.15)] space-y-6">
+            
+            {/* Header */}
+            <div className="text-center space-y-2">
+              <div className="w-12 h-12 rounded-2xl bg-cyan-400/10 border border-cyan-400/30 flex items-center justify-center text-cyan-400 mx-auto shadow-lg">
+                <Lock className="w-6 h-6" />
+              </div>
+              <h1 className="text-2xl font-black font-mono text-white tracking-wider pt-2">
+                AGHATIS STUDIO
+              </h1>
+              <p className="text-xs font-mono text-cyan-300 tracking-widest uppercase">
+                ADMIN COMMAND CONSOLE // AUTHENTICATION
+              </p>
+            </div>
+
+            {loginError && (
+              <div className="p-3 rounded-xl bg-rose-950/40 border border-rose-500/30 text-rose-300 text-xs font-mono flex items-center gap-2">
+                <AlertCircle className="w-4 h-4 shrink-0" />
+                <span>{loginError}</span>
+              </div>
+            )}
+
+            <form onSubmit={handleLogin} className="space-y-4">
+              <div>
+                <label className="block text-xs font-mono uppercase tracking-wider text-slate-300 mb-1.5">
+                  Commander Username
+                </label>
+                <input
+                  type="text"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  placeholder="Enter username"
+                  required
+                  className="w-full px-4 py-2.5 rounded-xl bg-black/40 border border-white/15 text-white font-mono text-xs focus:outline-none focus:border-cyan-400 transition-colors"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-mono uppercase tracking-wider text-slate-300 mb-1.5">
+                  Security Passkey
+                </label>
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="••••••••••••"
+                  required
+                  className="w-full px-4 py-2.5 rounded-xl bg-black/40 border border-white/15 text-white font-mono text-xs focus:outline-none focus:border-cyan-400 transition-colors"
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={loginLoading}
+                className="w-full py-3 rounded-xl bg-gradient-to-r from-cyan-400 via-sky-300 to-indigo-400 text-slate-950 font-mono text-xs uppercase tracking-wider font-bold shadow-[0_0_20px_rgba(56,189,248,0.3)] hover:opacity-95 transition-opacity flex items-center justify-center gap-2 cursor-pointer disabled:opacity-50"
+              >
+                {loginLoading ? (
+                  <>
+                    <div className="w-3.5 h-3.5 rounded-full border-2 border-slate-950 border-t-transparent animate-spin" />
+                    <span>AUTHENTICATING WITH MYSQL...</span>
+                  </>
+                ) : (
+                  <>
+                    <Lock className="w-4 h-4" />
+                    <span>Access Admin Console</span>
+                  </>
+                )}
+              </button>
+            </form>
+
+            <div className="text-center pt-2">
+              <a
+                href="/"
+                className="text-xs font-mono text-slate-500 hover:text-cyan-400 transition-colors inline-flex items-center gap-1.5"
+              >
+                <ArrowLeft className="w-3.5 h-3.5" />
+                <span>Return to Public Website</span>
+              </a>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // AUTHENTICATED DASHBOARD
+  return (
+    <div className="min-h-screen bg-[#0a0a12] text-slate-100 flex flex-col font-sans selection:bg-cyan-500 selection:text-slate-950">
+      
+      {/* Toast Alert */}
+      {toastMessage && (
+        <div className="fixed top-6 right-6 z-50 px-4 py-3 rounded-xl glass-panel border border-cyan-400/50 text-cyan-300 font-mono text-xs flex items-center gap-2 shadow-[0_0_25px_rgba(56,189,248,0.25)] animate-in fade-in slide-in-from-top-2">
+          <CheckCircle className="w-4 h-4 text-cyan-400" />
+          <span>{toastMessage}</span>
+        </div>
+      )}
+
+      {/* Top Navbar Header */}
+      <header className="border-b border-white/10 bg-[#08080f]/90 backdrop-blur-xl sticky top-0 z-40 px-4 sm:px-8 py-3.5 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-cyan-400 to-indigo-500 flex items-center justify-center text-slate-950 font-black text-xs">
+            AS
+          </div>
+          <div>
+            <div className="flex items-center gap-2">
+              <span className="font-mono font-bold tracking-wider text-sm text-white">
+                AGHATIS STUDIO
+              </span>
+              <span className="text-[10px] font-mono px-2 py-0.5 rounded bg-cyan-500/20 text-cyan-300 border border-cyan-400/30">
+                ADMIN COCKPIT
+              </span>
+            </div>
+            <div className="flex items-center gap-1.5 text-[11px] font-mono text-emerald-400">
+              <Database className="w-3 h-3" />
+              <span>MySQL 103.155.224.244 • aghatis_studio_db</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <a
+            href="/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-lg glass-panel text-xs font-mono text-slate-300 hover:text-white transition-colors"
+          >
+            <span>Live Website</span>
+            <ExternalLink className="w-3.5 h-3.5" />
+          </a>
+
+          <button
+            onClick={fetchProjects}
+            title="Refresh database records"
+            className="p-2 rounded-lg glass-panel text-slate-300 hover:text-white transition-colors cursor-pointer"
+          >
+            <RefreshCw className={`w-4 h-4 ${loadingProjects ? "animate-spin text-cyan-400" : ""}`} />
+          </button>
+
+          <button
+            onClick={handleLogout}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-rose-950/40 border border-rose-500/30 text-rose-300 hover:text-white hover:bg-rose-900/50 text-xs font-mono transition-colors cursor-pointer"
+          >
+            <LogOut className="w-3.5 h-3.5" />
+            <span className="hidden sm:inline">Sign Out</span>
+          </button>
+        </div>
+      </header>
+
+      {/* Main Container */}
+      <main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
+        
+        {/* Metric Cards Row */}
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
+          <div className="glass-card p-5 rounded-2xl border-white/10">
+            <div className="text-xs font-mono uppercase tracking-wider text-slate-400">
+              Total Fleet Projects
+            </div>
+            <div className="text-3xl font-black font-mono text-white mt-2">
+              {projects.length}
+            </div>
+            <div className="text-[11px] font-mono text-cyan-400 mt-1">
+              Active in Database
+            </div>
+          </div>
+
+          <div className="glass-card p-5 rounded-2xl border-white/10">
+            <div className="text-xs font-mono uppercase tracking-wider text-slate-400">
+              Software Tools
+            </div>
+            <div className="text-3xl font-black font-mono text-cyan-400 mt-2">
+              {projects.filter((p) => p.category === "software").length}
+            </div>
+            <div className="text-[11px] font-mono text-slate-400 mt-1">
+              Native Workstations & Pipelines
+            </div>
+          </div>
+
+          <div className="glass-card p-5 rounded-2xl border-white/10">
+            <div className="text-xs font-mono uppercase tracking-wider text-slate-400">
+              Original Games
+            </div>
+            <div className="text-3xl font-black font-mono text-purple-400 mt-2">
+              {projects.filter((p) => p.category === "games").length}
+            </div>
+            <div className="text-[11px] font-mono text-slate-400 mt-1">
+              Atmospheric Titles
+            </div>
+          </div>
+
+          <div className="glass-card p-5 rounded-2xl border-white/10">
+            <div className="text-xs font-mono uppercase tracking-wider text-slate-400">
+              Lab R&D Prototypes
+            </div>
+            <div className="text-3xl font-black font-mono text-emerald-400 mt-2">
+              {projects.filter((p) => p.category === "lab").length}
+            </div>
+            <div className="text-[11px] font-mono text-slate-400 mt-1">
+              Procedural & Audio Experiments
+            </div>
+          </div>
+        </div>
+
+        {/* Action Controls & Filtering Bar */}
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-4 glass-panel p-4 rounded-2xl border-white/10">
+          {/* Category Filter Pills */}
+          <div className="flex items-center gap-2 overflow-x-auto w-full sm:w-auto pb-1 sm:pb-0">
+            {[
+              { id: "all", label: "All Projects" },
+              { id: "software", label: "Software" },
+              { id: "games", label: "Games" },
+              { id: "lab", label: "Lab R&D" },
+            ].map((cat) => (
+              <button
+                key={cat.id}
+                onClick={() => setSelectedCategory(cat.id)}
+                className={`px-3.5 py-1.5 rounded-xl font-mono text-xs uppercase tracking-wider transition-colors cursor-pointer shrink-0 ${
+                  selectedCategory === cat.id
+                    ? "bg-cyan-500/20 border border-cyan-400/50 text-cyan-300 font-bold"
+                    : "text-slate-400 hover:text-white"
+                }`}
+              >
+                {cat.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Search Input & Add Button */}
+          <div className="flex items-center gap-3 w-full sm:w-auto justify-end">
+            <div className="relative flex-1 sm:w-64">
+              <Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search projects..."
+                className="w-full pl-9 pr-3 py-1.5 rounded-xl bg-white/5 border border-white/10 text-xs font-mono text-white placeholder-slate-500 focus:outline-none focus:border-cyan-400"
+              />
+            </div>
+
+            <button
+              onClick={openCreateModal}
+              className="px-4 py-2 rounded-xl bg-gradient-to-r from-cyan-400 to-indigo-400 text-slate-950 font-mono text-xs uppercase tracking-wider font-bold shadow-lg hover:opacity-90 transition-opacity flex items-center gap-1.5 cursor-pointer shrink-0"
+            >
+              <Plus className="w-4 h-4" />
+              <span>Deploy Project</span>
+            </button>
+          </div>
+        </div>
+
+        {/* Project Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredProjects.map((p) => (
+            <div
+              key={p.id}
+              className="glass-card rounded-2xl p-6 border-white/10 flex flex-col justify-between space-y-4 hover:border-cyan-500/30 transition-all group"
+            >
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px] font-mono uppercase px-2 py-0.5 rounded bg-white/5 border border-white/10 text-cyan-300">
+                    {p.categoryLabel}
+                  </span>
+                  <span className="text-[10px] font-mono uppercase px-2 py-0.5 rounded bg-indigo-950/60 border border-indigo-400/20 text-indigo-300">
+                    {p.status}
+                  </span>
+                </div>
+
+                <div>
+                  <h3 className="text-lg font-bold font-mono text-white group-hover:text-cyan-300 transition-colors">
+                    {p.title}
+                  </h3>
+                  <div className="text-[11px] font-mono text-slate-500">
+                    ID: {p.id} • Target: {p.releaseTarget}
+                  </div>
+                  <p className="text-xs text-slate-400 line-clamp-2 mt-2">
+                    {p.tagline}
+                  </p>
+                </div>
+
+                {/* Stack Badges */}
+                <div className="flex flex-wrap gap-1.5 pt-1">
+                  {p.stack?.slice(0, 3).map((item) => (
+                    <span
+                      key={item}
+                      className="text-[10px] font-mono px-2 py-0.5 rounded bg-white/5 text-slate-400"
+                    >
+                      {item}
+                    </span>
+                  ))}
+                  {p.stack?.length > 3 && (
+                    <span className="text-[10px] font-mono text-slate-500">
+                      +{p.stack.length - 3} more
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              {/* Action Buttons */}
+              <div className="pt-4 border-t border-white/10 flex items-center justify-between">
+                <div className="text-[11px] font-mono text-slate-500">
+                  {p.features?.length || 0} Features
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => openEditModal(p)}
+                    className="p-2 rounded-lg glass-panel hover:border-cyan-400/50 text-slate-300 hover:text-cyan-300 transition-colors cursor-pointer"
+                    title="Edit project"
+                  >
+                    <Edit className="w-3.5 h-3.5" />
+                  </button>
+                  <button
+                    onClick={() => handleDelete(p.id, p.title)}
+                    className="p-2 rounded-lg bg-rose-950/30 hover:bg-rose-900/50 text-rose-400 transition-colors cursor-pointer"
+                    title="Delete project"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+
+          {filteredProjects.length === 0 && (
+            <div className="col-span-full py-16 text-center text-slate-500 font-mono text-xs">
+              NO PROJECTS FOUND IN THIS SECTOR
+            </div>
+          )}
+        </div>
+
+      </main>
+
+      {/* CREATE / EDIT MODAL */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-xl overflow-y-auto">
+          <div className="relative w-full max-w-2xl bg-[#0e0e1c] border border-cyan-500/30 rounded-3xl p-6 sm:p-8 shadow-2xl my-8 space-y-6">
+            
+            {/* Modal Header */}
+            <div className="flex items-center justify-between pb-4 border-b border-white/10">
+              <div className="space-y-1">
+                <h2 className="text-xl font-bold font-mono text-white">
+                  {editingProject ? `Edit Project: ${editingProject.title}` : "Deploy New Original Project"}
+                </h2>
+                <p className="text-xs font-mono text-cyan-400">
+                  Data will be committed directly to MySQL database
+                </p>
+              </div>
+              <button
+                onClick={() => setIsModalOpen(false)}
+                className="p-2 rounded-full glass-panel text-slate-400 hover:text-white transition-colors cursor-pointer"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            {formError && (
+              <div className="p-3 rounded-xl bg-rose-950/40 border border-rose-500/30 text-rose-300 text-xs font-mono flex items-center gap-2">
+                <AlertCircle className="w-4 h-4 shrink-0" />
+                <span>{formError}</span>
+              </div>
+            )}
+
+            <form onSubmit={handleSaveProject} className="space-y-4">
+              
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
+                    Project ID / Slug
+                  </label>
+                  <input
+                    type="text"
+                    value={formId}
+                    onChange={(e) => setFormId(e.target.value)}
+                    placeholder="e.g. aetheria"
+                    disabled={!!editingProject}
+                    required
+                    className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400 disabled:opacity-50"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
+                    Project Title
+                  </label>
+                  <input
+                    type="text"
+                    value={formTitle}
+                    onChange={(e) => setFormTitle(e.target.value)}
+                    placeholder="e.g. Aetheria: Chrono Drift"
+                    required
+                    className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                <div>
+                  <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
+                    Category Track
+                  </label>
+                  <select
+                    value={formCategory}
+                    onChange={(e) => setFormCategory(e.target.value as "software" | "games" | "lab")}
+                    className="w-full px-3 py-2 rounded-xl bg-[#141428] border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
+                  >
+                    <option value="software">Software Products</option>
+                    <option value="games">Original Games</option>
+                    <option value="lab">Experimental Lab</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
+                    Category Sub-label
+                  </label>
+                  <input
+                    type="text"
+                    value={formCategoryLabel}
+                    onChange={(e) => setFormCategoryLabel(e.target.value)}
+                    placeholder="e.g. Tactical Flight RPG"
+                    required
+                    className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
+                    Status Badge
+                  </label>
+                  <input
+                    type="text"
+                    value={formStatus}
+                    onChange={(e) => setFormStatus(e.target.value)}
+                    placeholder="e.g. In Active Dev"
+                    required
+                    className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                <div>
+                  <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
+                    Status Type
+                  </label>
+                  <select
+                    value={formStatusType}
+                    onChange={(e) => setFormStatusType(e.target.value as "active" | "alpha" | "prototype" | "upcoming")}
+                    className="w-full px-3 py-2 rounded-xl bg-[#141428] border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
+                  >
+                    <option value="active">Active</option>
+                    <option value="alpha">Alpha</option>
+                    <option value="prototype">Prototype</option>
+                    <option value="upcoming">Upcoming</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
+                    Target Release
+                  </label>
+                  <input
+                    type="text"
+                    value={formReleaseTarget}
+                    onChange={(e) => setFormReleaseTarget(e.target.value)}
+                    placeholder="e.g. Alpha 2027"
+                    required
+                    className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
+                    Visual Icon
+                  </label>
+                  <select
+                    value={formIconName}
+                    onChange={(e) => setFormIconName(e.target.value)}
+                    className="w-full px-3 py-2 rounded-xl bg-[#141428] border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
+                  >
+                    <option value="Terminal">Terminal (Software)</option>
+                    <option value="Gamepad2">Gamepad2 (Games)</option>
+                    <option value="FlaskConical">FlaskConical (Lab)</option>
+                  </select>
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
+                  Tagline (1 sentence hook)
+                </label>
+                <input
+                  type="text"
+                  value={formTagline}
+                  onChange={(e) => setFormTagline(e.target.value)}
+                  placeholder="Atmospheric spaceflight RPG driven by Newtonian physics & relativistic time mechanics."
+                  required
+                  className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
+                  Card Short Description
+                </label>
+                <textarea
+                  value={formDescription}
+                  onChange={(e) => setFormDescription(e.target.value)}
+                  rows={2}
+                  placeholder="Pilot handcrafted atmospheric ships through uncharted cosmic sectors..."
+                  required
+                  className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
+                  Modal Long Description & Manifesto
+                </label>
+                <textarea
+                  value={formLongDescription}
+                  onChange={(e) => setFormLongDescription(e.target.value)}
+                  rows={3}
+                  placeholder="Deep dive narrative and design philosophy..."
+                  required
+                  className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
+                  Key Architectural Features (1 per line)
+                </label>
+                <textarea
+                  value={formFeatures}
+                  onChange={(e) => setFormFeatures(e.target.value)}
+                  rows={3}
+                  placeholder="True orbital mechanics and gravitational slingshots&#10;Non-linear stellar narrative&#10;Procedurally synthesized nebula volumetric rendering"
+                  className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-mono uppercase text-slate-300 mb-1">
+                  Tech Stack (Comma-separated)
+                </label>
+                <input
+                  type="text"
+                  value={formStack}
+                  onChange={(e) => setFormStack(e.target.value)}
+                  placeholder="Godot 4.3, C++ GDExtension, Bespoke GLSL, FMOD"
+                  className="w-full px-3 py-2 rounded-xl bg-white/5 border border-white/15 text-xs font-mono text-white focus:outline-none focus:border-cyan-400"
+                />
+              </div>
+
+              <div className="flex items-center justify-end gap-3 pt-4 border-t border-white/10">
+                <button
+                  type="button"
+                  onClick={() => setIsModalOpen(false)}
+                  className="px-4 py-2.5 rounded-xl glass-panel text-xs font-mono text-slate-400 hover:text-white transition-colors cursor-pointer"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={formSubmitting}
+                  className="px-6 py-2.5 rounded-xl bg-gradient-to-r from-cyan-400 to-indigo-400 text-slate-950 font-mono text-xs uppercase tracking-wider font-bold shadow-lg hover:opacity-95 transition-opacity cursor-pointer disabled:opacity-50"
+                >
+                  {formSubmitting ? "Committing to MySQL..." : editingProject ? "Save Changes" : "Deploy Project"}
+                </button>
+              </div>
+
+            </form>
+          </div>
+        </div>
+      )}
+
+    </div>
+  );
+}

app/api/auth/login/route.ts

@@ -0,0 +1,43 @@
+import { NextResponse } from "next/server";
+import { verifyUserCredentials, createSessionToken, SESSION_COOKIE_NAME } from "@/lib/auth";
+
+export async function POST(req: Request) {
+  try {
+    const { username, password } = await req.json();
+
+    if (!username || !password) {
+      return NextResponse.json(
+        { error: "Username and password are required" },
+        { status: 400 }
+      );
+    }
+
+    const authResult = await verifyUserCredentials(username, password);
+    if (!authResult.success) {
+      return NextResponse.json(
+        { error: "Invalid username or password" },
+        { status: 401 }
+      );
+    }
+
+    const token = createSessionToken(username);
+
+    const response = NextResponse.json({
+      success: true,
+      user: authResult.user || { username },
+    });
+
+    response.cookies.set(SESSION_COOKIE_NAME, token, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "lax",
+      path: "/",
+      maxAge: 60 * 60 * 24 * 7, // 7 days
+    });
+
+    return response;
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : "Unknown error";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

app/api/auth/logout/route.ts

@@ -0,0 +1,8 @@
+import { NextResponse } from "next/server";
+import { SESSION_COOKIE_NAME } from "@/lib/auth";
+
+export async function POST() {
+  const response = NextResponse.json({ success: true });
+  response.cookies.delete(SESSION_COOKIE_NAME);
+  return response;
+}

app/api/auth/me/route.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server";
+import { isAuthenticated } from "@/lib/auth";
+
+export async function GET() {
+  const authed = await isAuthenticated();
+  if (!authed) {
+    return NextResponse.json({ authenticated: false }, { status: 401 });
+  }
+  return NextResponse.json({ authenticated: true, user: { username: "Aghatis" } });
+}

app/api/projects/[id]/route.ts

@@ -0,0 +1,147 @@
+import { NextResponse } from "next/server";
+import { query } from "@/lib/db";
+import { isAuthenticated } from "@/lib/auth";
+import type { DBProject } from "../route";
+
+export async function GET(
+  _req: Request,
+  props: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await props.params;
+    const rows = await query<DBProject[]>(
+      "SELECT * FROM projects WHERE id = ? LIMIT 1",
+      [id]
+    );
+
+    if (!rows || rows.length === 0) {
+      return NextResponse.json({ error: "Project not found" }, { status: 404 });
+    }
+
+    const p = rows[0];
+    const formatted = {
+      id: p.id,
+      title: p.title,
+      category: p.category,
+      categoryLabel: p.category_label,
+      tagline: p.tagline,
+      status: p.status,
+      statusType: p.status_type,
+      releaseTarget: p.release_target,
+      description: p.description,
+      longDescription: p.long_description,
+      features: typeof p.features === "string" ? JSON.parse(p.features) : p.features || [],
+      stack: typeof p.stack === "string" ? JSON.parse(p.stack) : p.stack || [],
+      accentGradient: p.accent_gradient,
+      borderGlow: p.border_glow,
+      iconName: p.icon_name,
+      orderIndex: p.order_index,
+    };
+
+    return NextResponse.json({ success: true, data: formatted });
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : "Database error";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
+
+export async function PUT(
+  req: Request,
+  props: { params: Promise<{ id: string }> }
+) {
+  try {
+    const authed = await isAuthenticated();
+    if (!authed) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const { id } = await props.params;
+    const body = await req.json();
+
+    const title = body.title?.trim();
+    const category = body.category || "software";
+    const category_label = body.categoryLabel || body.category_label || "Original Software";
+    const tagline = body.tagline?.trim() || "";
+    const status = body.status?.trim() || "In Active Dev";
+    const status_type = body.statusType || body.status_type || "active";
+    const release_target = body.releaseTarget || body.release_target || "2027";
+    const description = body.description?.trim() || "";
+    const long_description = body.longDescription || body.long_description || "";
+    const features = JSON.stringify(Array.isArray(body.features) ? body.features : []);
+    const stack = JSON.stringify(Array.isArray(body.stack) ? body.stack : []);
+    const accent_gradient =
+      body.accentGradient ||
+      body.accent_gradient ||
+      "from-cyan-500/20 via-blue-600/10 to-transparent";
+    const border_glow =
+      body.borderGlow ||
+      body.border_glow ||
+      "hover:border-cyan-400/50 hover:shadow-[0_0_30px_rgba(56,189,248,0.25)]";
+    const icon_name = body.iconName || body.icon_name || "Terminal";
+    const order_index = Number(body.orderIndex ?? body.order_index ?? 0);
+
+    await query(
+      `UPDATE projects SET 
+        title = ?,
+        category = ?,
+        category_label = ?,
+        tagline = ?,
+        status = ?,
+        status_type = ?,
+        release_target = ?,
+        description = ?,
+        long_description = ?,
+        features = ?,
+        stack = ?,
+        accent_gradient = ?,
+        border_glow = ?,
+        icon_name = ?,
+        order_index = ?,
+        updated_at = CURRENT_TIMESTAMP
+      WHERE id = ?`,
+      [
+        title,
+        category,
+        category_label,
+        tagline,
+        status,
+        status_type,
+        release_target,
+        description,
+        long_description,
+        features,
+        stack,
+        accent_gradient,
+        border_glow,
+        icon_name,
+        order_index,
+        id,
+      ]
+    );
+
+    return NextResponse.json({ success: true, message: "Project updated" });
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : "Database error";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
+
+export async function DELETE(
+  _req: Request,
+  props: { params: Promise<{ id: string }> }
+) {
+  try {
+    const authed = await isAuthenticated();
+    if (!authed) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const { id } = await props.params;
+    await query("DELETE FROM projects WHERE id = ?", [id]);
+
+    return NextResponse.json({ success: true, message: "Project deleted" });
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : "Database error";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

app/api/projects/route.ts

@@ -0,0 +1,121 @@
+import { NextResponse } from "next/server";
+import { query } from "@/lib/db";
+import { isAuthenticated } from "@/lib/auth";
+
+export interface DBProject {
+  id: string;
+  title: string;
+  category: "software" | "games" | "lab";
+  category_label: string;
+  tagline: string;
+  status: string;
+  status_type: "active" | "alpha" | "prototype" | "upcoming";
+  release_target: string;
+  description: string;
+  long_description: string;
+  features: string[] | string;
+  stack: string[] | string;
+  accent_gradient: string;
+  border_glow: string;
+  icon_name: string;
+  order_index?: number;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export async function GET() {
+  try {
+    const rows = await query<DBProject[]>(
+      "SELECT * FROM projects ORDER BY order_index ASC, created_at DESC"
+    );
+
+    const formatted = rows.map((p) => ({
+      id: p.id,
+      title: p.title,
+      category: p.category,
+      categoryLabel: p.category_label,
+      tagline: p.tagline,
+      status: p.status,
+      statusType: p.status_type,
+      releaseTarget: p.release_target,
+      description: p.description,
+      longDescription: p.long_description,
+      features: typeof p.features === "string" ? JSON.parse(p.features) : p.features || [],
+      stack: typeof p.stack === "string" ? JSON.parse(p.stack) : p.stack || [],
+      accentGradient: p.accent_gradient,
+      borderGlow: p.border_glow,
+      iconName: p.icon_name,
+      orderIndex: p.order_index,
+    }));
+
+    return NextResponse.json({ success: true, data: formatted });
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : "Database query error";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
+
+export async function POST(req: Request) {
+  try {
+    const authed = await isAuthenticated();
+    if (!authed) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const body = await req.json();
+
+    const id = (body.id || body.title.toLowerCase().replace(/[^a-z0-9]+/g, "-")).trim();
+    const title = body.title?.trim();
+    const category = body.category || "software";
+    const category_label = body.categoryLabel || body.category_label || "Original Software";
+    const tagline = body.tagline?.trim() || "";
+    const status = body.status?.trim() || "In Active Dev";
+    const status_type = body.statusType || body.status_type || "active";
+    const release_target = body.releaseTarget || body.release_target || "2027";
+    const description = body.description?.trim() || "";
+    const long_description = body.longDescription || body.long_description || "";
+    const features = JSON.stringify(Array.isArray(body.features) ? body.features : []);
+    const stack = JSON.stringify(Array.isArray(body.stack) ? body.stack : []);
+    const accent_gradient =
+      body.accentGradient ||
+      body.accent_gradient ||
+      "from-cyan-500/20 via-blue-600/10 to-transparent";
+    const border_glow =
+      body.borderGlow ||
+      body.border_glow ||
+      "hover:border-cyan-400/50 hover:shadow-[0_0_30px_rgba(56,189,248,0.25)]";
+    const icon_name = body.iconName || body.icon_name || "Terminal";
+    const order_index = Number(body.orderIndex ?? body.order_index ?? 0);
+
+    await query(
+      `INSERT INTO projects (
+        id, title, category, category_label, tagline, status, status_type,
+        release_target, description, long_description, features, stack,
+        accent_gradient, border_glow, icon_name, order_index
+      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+      [
+        id,
+        title,
+        category,
+        category_label,
+        tagline,
+        status,
+        status_type,
+        release_target,
+        description,
+        long_description,
+        features,
+        stack,
+        accent_gradient,
+        border_glow,
+        icon_name,
+        order_index,
+      ]
+    );
+
+    return NextResponse.json({ success: true, id });
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : "Database error";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

app/globals.css

@@ -0,0 +1,120 @@
+@import "tailwindcss";
+
+:root {
+  --background: #0a0a12;
+  --foreground: #f1f5f9;
+  --nebula-glow: rgba(99, 102, 241, 0.15);
+  --cyan-glow: rgba(56, 189, 248, 0.2);
+}
+
+@theme {
+  --color-cosmic-950: #05050a;
+  --color-cosmic-900: #0a0a12;
+  --color-cosmic-800: #101020;
+  --color-cosmic-700: #16162d;
+  --color-cosmic-600: #232344;
+  --color-nebula-cyan: #38bdf8;
+  --color-nebula-purple: #a855f7;
+  --color-nebula-indigo: #6366f1;
+  --color-nebula-pink: #f43f5e;
+}
+
+body {
+  background-color: #0a0a12;
+  color: #f1f5f9;
+  overflow-x: hidden;
+  selection-background-color: #6366f1;
+  selection-color: #ffffff;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #0a0a12;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #1f1f38;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #2e2e54;
+}
+
+/* Glassmorphism helpers */
+.glass-panel {
+  background: rgba(14, 14, 28, 0.65);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.glass-panel-glow {
+  background: rgba(16, 16, 32, 0.7);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(139, 92, 246, 0.2);
+  box-shadow: 0 0 35px -5px rgba(99, 102, 241, 0.15);
+}
+
+.glass-card {
+  background: linear-gradient(135deg, rgba(25, 25, 48, 0.4) 0%, rgba(12, 12, 24, 0.6) 100%);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.glass-card:hover {
+  border-color: rgba(99, 102, 241, 0.4);
+  box-shadow: 0 10px 40px -10px rgba(99, 102, 241, 0.25);
+  transform: translateY(-2px);
+}
+
+/* Nebula & Planet ambient glow */
+.planet-glow-cyan {
+  box-shadow: 0 0 50px -10px rgba(56, 189, 248, 0.35);
+}
+
+.planet-glow-purple {
+  box-shadow: 0 0 50px -10px rgba(168, 85, 247, 0.35);
+}
+
+.text-gradient-cosmic {
+  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #94a3b8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.text-gradient-cyan {
+  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.text-gradient-nebula {
+  background: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #38bdf8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Subtle glow animations */
+@keyframes pulse-slow {
+  0%, 100% {
+    opacity: 0.4;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.05);
+  }
+}
+
+.animate-pulse-slow {
+  animation: pulse-slow 8s infinite ease-in-out;
+}

app/layout.tsx

@@ -0,0 +1,64 @@
+import type { Metadata, Viewport } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Aghatis Studio | Independent Product Studio & Game Lab",
+  description:
+    "An independent product studio dedicated to engineering and publishing original software, interactive worlds, and atmospheric games.",
+  keywords: [
+    "Aghatis Studio",
+    "Indie Game Studio",
+    "Independent Software Lab",
+    "Original IP",
+    "Creative Technology",
+    "Three.js",
+    "Game Development",
+    "Product Studio",
+  ],
+  authors: [{ name: "Aghatis Studio" }],
+  openGraph: {
+    title: "Aghatis Studio | Independent Product & Game Lab",
+    description:
+      "Synthesizing original software and games. An autonomous indie lab building uncompromised digital artifacts.",
+    type: "website",
+    locale: "en_US",
+  },
+  icons: {
+    icon: "/favicon.ico",
+  },
+};
+
+export const viewport: Viewport = {
+  themeColor: "#0a0a12",
+  colorScheme: "dark",
+  width: "device-width",
+  initialScale: 1,
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} dark scroll-smooth`}
+    >
+      <body className="min-h-screen bg-[#0a0a12] text-slate-100 font-sans antialiased overflow-x-hidden selection:bg-indigo-500 selection:text-white">
+        {children}
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,32 @@
+import CosmicGalaxyDynamic from "@/components/canvas/CosmicGalaxyDynamic";
+import Navbar from "@/components/navbar/Navbar";
+import Hero from "@/components/hero/Hero";
+import About from "@/components/about/About";
+import CoreFocus from "@/components/focus/CoreFocus";
+import Portfolio from "@/components/showcase/Portfolio";
+import StudioCreed from "@/components/creed/StudioCreed";
+import Footer from "@/components/footer/Footer";
+
+export default function Home() {
+  return (
+    <div className="relative min-h-screen bg-[#0a0a12] text-slate-100 flex flex-col selection:bg-cyan-500 selection:text-slate-950 overflow-x-hidden">
+      {/* 3D Interstellar Starfield & Galaxy Dust Backdrop */}
+      <CosmicGalaxyDynamic />
+
+      {/* Floating Glassmorphic Navigation */}
+      <Navbar />
+
+      {/* Main Experience Flow */}
+      <main className="relative z-10 flex-1 flex flex-col">
+        <Hero />
+        <About />
+        <CoreFocus />
+        <Portfolio />
+        <StudioCreed />
+      </main>
+
+      {/* Cosmic Studio Footer */}
+      <Footer />
+    </div>
+  );
+}