arcanajs 2.5.0 → 2.5.1

package/framework/templates/src/client/index.tsx

@@ -0,0 +1,7 @@
+import { hydrateArcanaJS } from "arcanajs/client";
+import "./globals.css";
+
+// @ts-ignore
+const views = require("arcana-views");
+
+hydrateArcanaJS(views);

package/framework/templates/src/db/mongo.ts

@@ -0,0 +1,10 @@
+export default async function dbConnect() {
+  // Example MongoDB connection using the official driver
+  const { MongoClient } = await import("mongodb");
+  const url = process.env.MONGO_URL || "mongodb://localhost:27017";
+  const dbName = process.env.MONGO_DB || "mydb";
+  const client = new MongoClient(url);
+  await client.connect();
+  const db = client.db(dbName);
+  return { client, db };
+}

package/framework/templates/src/db/mongoose.ts

@@ -0,0 +1,12 @@
+import mongoose from "mongoose";
+
+export default async function dbConnect() {
+  const uri =
+    process.env.MONGOOSE_URI ||
+    process.env.MONGO_URL ||
+    "mongodb://localhost:27017/mydb";
+  const options = {} as mongoose.ConnectOptions;
+
+  await mongoose.connect(uri, options);
+  return mongoose;
+}

package/framework/templates/src/db/mysql.ts

@@ -0,0 +1,15 @@
+export default async function dbConnect() {
+  const mysql = await import("mysql2/promise");
+  const uri = process.env.MYSQL_URL;
+  if (uri) {
+    return await mysql.createConnection(uri as any);
+  }
+
+  const connection = await mysql.createConnection({
+    host: process.env.MYSQL_HOST || "localhost",
+    user: process.env.MYSQL_USER || "root",
+    database: process.env.MYSQL_DB || "mydb",
+    password: process.env.MYSQL_PASSWORD || undefined,
+  });
+  return connection;
+}

package/framework/templates/src/db/postgres.ts

@@ -0,0 +1,8 @@
+export default async function dbConnect() {
+  const { Client } = await import("pg");
+  const connectionString =
+    process.env.PG_CONNECTION || process.env.DATABASE_URL;
+  const client = new Client({ connectionString });
+  await client.connect();
+  return client;
+}

package/framework/templates/src/server/controllers/HomeController.ts

@@ -0,0 +1,7 @@
+import { Request, Response } from "express";
+
+export default class HomeController {
+  home(req: Request, res: Response) {
+    res.renderPage("HomePage");
+  }
+}

package/framework/templates/src/server/controllers/UsersController.ts

@@ -0,0 +1,37 @@
+import { Request, Response } from "express";
+
+/**
+ * UsersController - example controller for users endpoints.
+ */
+export default class UsersController {
+  async users(req: Request, res: Response) {
+    try {
+      const normalized: any = (req as any).db || req.app?.locals?.db;
+      if (!normalized) return res.error("No DB connection", 500, null, null);
+
+      const client: any = normalized.client || normalized;
+      const db: any = normalized.db || normalized;
+
+      if (db && typeof db.collection === "function") {
+        const users = await db.collection("users").find().toArray();
+        return res.success(users, "Users retrieved successfully", 200);
+      }
+
+      if (client && typeof client.query === "function") {
+        const result = await client.query("SELECT * FROM users LIMIT 100");
+        const rows = result.rows || result[0] || result;
+        return res.success(rows, "Users retrieved successfully", 200);
+      }
+
+      return res.error(
+        "Unsupported DB client in template example",
+        400,
+        null,
+        null
+      );
+    } catch (err) {
+      console.error(err);
+      return res.error("Query failed", 500, err as any, null);
+    }
+  }
+}

package/framework/templates/src/server/index.ts

@@ -0,0 +1,35 @@
+import { ArcanaJSServer } from "arcanajs/server";
+import apiRoutes from "./routes/api";
+import webRoutes from "./routes/web";
+
+// Example DB connectors included in templates:
+// import mongoDb from '../db/mongo';
+// import mongooseDb from '../db/mongoose';
+// import pgDb from '../db/postgres';
+// import mysqlDb from '../db/mysql';
+
+const PORT = process.env.PORT || 3000;
+
+const server = new ArcanaJSServer({
+  port: PORT,
+  routes: webRoutes,
+  // Separate API routes (mounted under /api by default)
+  apiRoutes: apiRoutes,
+  // To change the base path, set apiBase: '/v1' for example or similar
+  apiBase: "/api",
+  // Example: provide a dbConnect function that returns the DB client/connection.
+  // You can connect to MySQL/Postgres/MongoDB here and return the client.
+  // dbConnect: async () => {
+  //   const { MongoClient } = await import('mongodb');
+  //   const client = new MongoClient(process.env.MONGO_URL || 'mongodb://localhost:27017');
+  //   await client.connect();
+  //   return client.db('mydb');
+  // },
+  // Or use one of the provided DB templates (uncomment one):
+  // dbConnect: mongoDb,
+  // dbConnect: mongooseDb,
+  // dbConnect: pgDb,
+  // dbConnect: mysqlDb,
+});
+
+server.start();

package/framework/templates/src/server/routes/api.ts

@@ -0,0 +1,6 @@
+import { Route } from "arcanajs/server";
+import UsersController from "../controllers/UsersController";
+
+router.get("/users", [UsersController, "users"]);
+
+export default Route.getRouter();

package/framework/templates/src/server/routes/web.ts

@@ -0,0 +1,7 @@
+import { Route } from "arcanajs/server";
+
+import HomeController from "../controllers/HomeController";
+
+Route.get("/", [HomeController, "home"]);
+
+export default Route.getRouter();

package/framework/templates/src/views/ErrorPage.tsx

@@ -0,0 +1,136 @@
+import { Body, Head, Link, Page } from "arcanajs";
+
+interface ErrorPageProps {
+  message?: string;
+  statusCode?: number;
+  stack?: string;
+}
+
+export default function ErrorPage({
+  message = "Something went wrong",
+  statusCode = 500,
+  stack,
+}: ErrorPageProps) {
+  const isDevelopment = process.env.NODE_ENV === "development";
+
+  return (
+    <Page>
+      <Head>
+        <title>{statusCode} - Server Error</title>
+        <meta name="description" content="An error occurred on the server" />
+      </Head>
+      <Body>
+        <div className="relative min-h-screen overflow-hidden bg-black text-white flex flex-col justify-center items-center px-4 font-sans">
+          {/* Animated Background */}
+          <div className="fixed inset-0 z-0 overflow-hidden pointer-events-none">
+            <div className="absolute inset-0 grid-pattern opacity-30"></div>
+            <div className="absolute top-1/4 right-1/4 w-96 h-96 bg-red-600 rounded-full opacity-20 blur-3xl animate-glow"></div>
+            <div
+              className="absolute bottom-1/4 left-1/4 w-96 h-96 bg-orange-600 rounded-full opacity-10 blur-3xl animate-glow"
+              style={{ animationDelay: "2s" }}
+            ></div>
+            <div className="absolute inset-0 hero-gradient"></div>
+          </div>
+
+          <div className="relative z-10 max-w-2xl w-full text-center animate-scale-in">
+            <div className="glass-card rounded-3xl p-12 border border-white/10 shadow-2xl">
+              <div className="mb-8">
+                <div className="text-6xl mb-6 animate-float">
+                  <span className="text-red-500 drop-shadow-lg filter">⚠️</span>
+                </div>
+                <h1 className="text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-red-500 to-orange-500 mb-4">
+                  {statusCode}
+                </h1>
+                <h2 className="text-3xl font-bold text-white mb-4">
+                  Server Error
+                </h2>
+                <p className="text-gray-400 text-lg leading-relaxed">
+                  {message}
+                </p>
+              </div>
+
+              <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
+                <Link
+                  href="/"
+                  className="btn-primary px-8 py-3.5 text-white font-semibold rounded-xl inline-flex items-center justify-center gap-2 w-full sm:w-auto bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-500 hover:to-orange-500 border-none shadow-red-900/20"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+                    />
+                  </svg>
+                  Go Home
+                </Link>
+
+                <button
+                  onClick={() => window.location.reload()}
+                  className="btn-secondary px-8 py-3.5 text-white font-semibold rounded-xl inline-flex items-center justify-center gap-2 w-full sm:w-auto"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                    />
+                  </svg>
+                  Try Again
+                </button>
+              </div>
+
+              {isDevelopment && stack && (
+                <div className="mt-8 text-left animate-slide-up">
+                  <details className="bg-black/40 border border-white/10 rounded-xl overflow-hidden group">
+                    <summary className="cursor-pointer font-medium text-gray-300 p-4 hover:bg-white/5 transition-colors flex items-center justify-between select-none">
+                      <span>Stack Trace (Development Only)</span>
+                      <svg
+                        className="w-5 h-5 text-gray-500 group-open:rotate-180 transition-transform"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M19 9l-7 7-7-7"
+                        />
+                      </svg>
+                    </summary>
+                    <pre className="text-xs text-red-300/80 p-4 overflow-x-auto whitespace-pre-wrap font-mono border-t border-white/5 bg-black/20">
+                      {stack}
+                    </pre>
+                  </details>
+                </div>
+              )}
+            </div>
+
+            <div className="mt-8 text-gray-500 text-sm">
+              If this problem persists, please{" "}
+              <Link
+                href="/contact"
+                className="text-red-400 hover:text-red-300 underline transition-colors"
+              >
+                contact support
+              </Link>
+              .
+            </div>
+          </div>
+        </div>
+      </Body>
+    </Page>
+  );
+}

package/framework/templates/src/views/HomePage.tsx

@@ -0,0 +1,344 @@
+import { Body, Head, Page } from "arcanajs";
+
+export default function HomePage() {
+  return (
+    <Page>
+      <Head>
+        <title>Welcome to ArcanaJS</title>
+        <meta
+          name="description"
+          content="A modern React framework with Tailwind CSS v4"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+      <Body>
+        <div className="relative min-h-screen overflow-hidden bg-black text-white">
+          {/* Animated Background */}
+          <div className="fixed inset-0 z-0 overflow-hidden pointer-events-none">
+            {/* Grid Pattern */}
+            <div className="absolute inset-0 grid-pattern opacity-30"></div>
+            <div className="absolute inset-0 grid-pattern opacity-30"></div>
+
+            {/* Animated Orbs */}
+            <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-orange-500 rounded-full opacity-20 blur-3xl animate-glow"></div>
+            <div
+              className="absolute top-1/3 right-1/4 w-96 h-96 bg-purple-500 rounded-full opacity-15 blur-3xl animate-glow"
+              style={{ animationDelay: "2s" }}
+            ></div>
+            <div
+              className="absolute bottom-1/4 left-1/2 w-96 h-96 bg-blue-500 rounded-full opacity-10 blur-3xl animate-glow"
+              style={{ animationDelay: "4s" }}
+            ></div>
+
+            {/* Radial Gradient Accent */}
+            <div className="absolute inset-0 hero-gradient"></div>
+          </div>
+
+          <div className="relative z-10">
+            {/* Navigation */}
+            <nav className="fixed top-0 w-full z-50 nav-blur animate-slide-down border-b border-white/5 backdrop-blur-sm">
+              <div className="container mx-auto px-6 py-4 flex items-center justify-between">
+                <div className="flex items-center gap-3 group cursor-pointer">
+                  <div className="relative w-16 h-16">
+                    <div className="absolute inset-0 bg-gradient-to-br from-orange-500 to-red-600 rounded-full blur-lg opacity-40 group-hover:opacity-100 transition-opacity"></div>
+                    <img
+                      src="arcanajs.png"
+                      alt="ArcanaJS Logo"
+                      className="relative w-full h-full object-contain"
+                    />
+                  </div>
+                </div>
+                <div className="hidden md:flex space-x-8">
+                  <a
+                    href="#features"
+                    className="text-gray-400 hover:text-white transition-colors text-sm font-medium"
+                  >
+                    Features
+                  </a>
+                  <a
+                    href="#docs"
+                    className="text-gray-400 hover:text-white transition-colors text-sm font-medium"
+                  >
+                    Docs
+                  </a>
+                  <a
+                    href="#examples"
+                    className="text-gray-400 hover:text-white transition-colors text-sm font-medium"
+                  >
+                    Examples
+                  </a>
+                </div>
+              </div>
+            </nav>
+
+            {/* Hero Section */}
+            <main className="pt-32 pb-12 px-4 sm:px-6 lg:px-8">
+              <div className="max-w-5xl mx-auto text-center">
+                <div className="glass-card rounded-3xl p-8 md:p-12 mb-12 animate-scale-in border-white/10">
+                  <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight drop-shadow-2xl">
+                    Welcome to <span className="gradient-text">ArcanaJS</span>
+                  </h1>
+                  <p className="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto text-balance font-light leading-relaxed">
+                    A modern React framework with server-side rendering and
+                    Tailwind CSS v4 support. Build fast, beautiful applications
+                    with zero configuration.
+                  </p>
+                  <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                    <button className="btn-primary px-8 py-3.5 text-lg font-semibold rounded-xl inline-flex items-center justify-center gap-2">
+                      Get Started
+                      <svg
+                        className="w-5 h-5"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M13 7l5 5m0 0l-5 5m5-5H6"
+                        />
+                      </svg>
+                    </button>
+                    <button className="btn-secondary px-8 py-3.5 text-lg font-semibold rounded-xl inline-flex items-center justify-center gap-2">
+                      View Examples
+                    </button>
+                  </div>
+                </div>
+
+                {/* Features Grid */}
+                <section
+                  id="features"
+                  className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12"
+                >
+                  <div className="glass-card rounded-2xl p-8 feature-card text-center group">
+                    <div className="w-14 h-14 bg-orange-500/10 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform border border-orange-500/20">
+                      <svg
+                        className="w-7 h-7 text-orange-500"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M13 10V3L4 14h7v7l9-11h-7z"
+                        />
+                      </svg>
+                    </div>
+                    <h3 className="text-xl font-bold text-white mb-2 group-hover:text-orange-400 transition-colors">
+                      Fast SSR
+                    </h3>
+                    <p className="text-gray-400 text-sm leading-relaxed">
+                      Server-side rendering for optimal performance and SEO.
+                    </p>
+                  </div>
+
+                  <div className="glass-card rounded-2xl p-8 feature-card text-center group">
+                    <div className="w-14 h-14 bg-purple-500/10 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform border border-purple-500/20">
+                      <svg
+                        className="w-7 h-7 text-purple-500"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                        />
+                      </svg>
+                    </div>
+                    <h3 className="text-xl font-bold text-white mb-2 group-hover:text-purple-400 transition-colors">
+                      TypeScript
+                    </h3>
+                    <p className="text-gray-400 text-sm leading-relaxed">
+                      Built-in TypeScript support for better developer
+                      experience.
+                    </p>
+                  </div>
+
+                  <div className="glass-card rounded-2xl p-8 feature-card text-center group">
+                    <div className="w-14 h-14 bg-blue-500/10 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform border border-blue-500/20">
+                      <svg
+                        className="w-7 h-7 text-blue-500"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h4a2 2 0 002-2V9a2 2 0 00-2-2H7a2 2 0 00-2 2v6a2 2 0 002 2z"
+                        />
+                      </svg>
+                    </div>
+                    <h3 className="text-xl font-bold text-white mb-2 group-hover:text-blue-400 transition-colors">
+                      Tailwind v4
+                    </h3>
+                    <p className="text-gray-400 text-sm leading-relaxed">
+                      Latest Tailwind CSS with CSS-first configuration.
+                    </p>
+                  </div>
+
+                  <div className="glass-card rounded-2xl p-8 feature-card text-center group">
+                    <div className="w-14 h-14 bg-green-500/10 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform border border-green-500/20">
+                      <svg
+                        className="w-7 h-7 text-green-500"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+                        />
+                      </svg>
+                    </div>
+                    <h3 className="text-xl font-bold text-white mb-2 group-hover:text-green-400 transition-colors">
+                      Hot Reload
+                    </h3>
+                    <p className="text-gray-400 text-sm leading-relaxed">
+                      Instant updates during development for faster iteration.
+                    </p>
+                  </div>
+
+                  <div className="glass-card rounded-2xl p-8 feature-card text-center group">
+                    <div className="w-14 h-14 bg-red-500/10 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform border border-red-500/20">
+                      <svg
+                        className="w-7 h-7 text-red-500"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2V7z"
+                        />
+                      </svg>
+                    </div>
+                    <h3 className="text-xl font-bold text-white mb-2 group-hover:text-red-400 transition-colors">
+                      File-based Routing
+                    </h3>
+                    <p className="text-gray-400 text-sm leading-relaxed">
+                      Intuitive routing based on your file structure.
+                    </p>
+                  </div>
+
+                  <div className="glass-card rounded-2xl p-8 feature-card text-center group">
+                    <div className="w-14 h-14 bg-indigo-500/10 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform border border-indigo-500/20">
+                      <svg
+                        className="w-7 h-7 text-indigo-500"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                        />
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                        />
+                      </svg>
+                    </div>
+                    <h3 className="text-xl font-bold text-white mb-2 group-hover:text-indigo-400 transition-colors">
+                      Zero Config
+                    </h3>
+                    <p className="text-gray-400 text-sm leading-relaxed">
+                      Get started immediately with sensible defaults.
+                    </p>
+                  </div>
+                </section>
+
+                {/* Code Example */}
+                <section
+                  id="examples"
+                  className="glass-card rounded-2xl p-8 text-left border-white/10"
+                >
+                  <h2 className="text-2xl font-bold text-white mb-6 text-center">
+                    Quick Start
+                  </h2>
+                  <div className="bg-black/50 rounded-xl p-6 text-sm font-mono text-gray-300 overflow-x-auto border border-white/10 shadow-inner">
+                    <div className="mb-4">
+                      <div className="text-gray-500 mb-1">
+                        # Create a new folder
+                      </div>
+                      <div className="text-orange-400">
+                        mkdir my-app cd my-app
+                      </div>
+                    </div>
+                    <div className="mb-4">
+                      <div className="text-gray-500 mb-1">
+                        # Initialize a new project
+                      </div>
+                      <div className="text-orange-400">npx arcanajs init</div>
+                    </div>
+                    <div className="mb-4">
+                      <div className="text-gray-500 mb-1">
+                        # Install dependencies
+                      </div>
+                      <div className="text-white">npm install</div>
+                    </div>
+                    <div className="mb-4">
+                      <div className="text-gray-500 mb-1">
+                        # Start development server
+                      </div>
+                      <div className="text-white">npm run dev</div>
+                    </div>
+                    <div className="mb-4">
+                      <div className="text-gray-500 mb-1">
+                        # Build for production
+                      </div>
+                      <div className="text-white">npm run build</div>
+                    </div>
+                    <div className="mb-4">
+                      <div className="text-gray-500 mb-1">
+                        # Start production server
+                      </div>
+                      <div className="text-white">npm start</div>
+                    </div>
+                  </div>
+                </section>
+              </div>
+            </main>
+
+            {/* Footer */}
+            <footer className="border-t border-white/5 mt-12 relative z-10 bg-black/20 backdrop-blur-md">
+              <div className="container mx-auto px-6 py-8">
+                <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+                  <div className="text-gray-500 text-sm">
+                    &copy; 2025 ArcanaJS. All rights reserved.
+                  </div>
+                  <div className="flex gap-6 text-gray-500 text-sm">
+                    <a href="#" className="hover:text-white transition-colors">
+                      GitHub
+                    </a>
+                    <a href="#" className="hover:text-white transition-colors">
+                      Docs
+                    </a>
+                    <a href="#" className="hover:text-white transition-colors">
+                      Community
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </footer>
+          </div>
+        </div>
+      </Body>
+    </Page>
+  );
+}