arcanajs 2.5.4 → 3.0.0

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

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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

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

@@ -1,37 +0,0 @@
-import { Request, Response } from "arcanajs/server";
-
-/**
- * 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

@@ -1,38 +0,0 @@
-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 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 };
-  // },
-  // 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

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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

@@ -1,344 +0,0 @@
-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>
-  );
-}