feat: redesign archgw -> plano + website in Next.js (#613)

* feat: redesign archgw -> plano + website * feat(www): refactor landing page sections, add new diagrams and UI improvements * feat(www): sections enhanced for clarify & diagrams added * feat(www): improvements to mobile design, layout of diagrams * feat(www): clean + typecheck * feat(www): feedback loop changes * feat(www): fix type error * fix lib/utils error * feat(www): ran biome formatting * feat(www): graphic changes * feat(www): web analytics * fea(www): changes * feat(www): introduce monorepo This change brings Turborepo monorepo to independently handle the marketing website, the docs website and any other future use cases for mutli-platform support. They are using internal @katanemo package handlers for the design system and logic. * fix(www): transpiler failure * fix(www): tsconfig issue * fix(www): next.config issue * feat(docs): hold off on docs * Delete next.config.ts * feat(www): content fix * feat(www): introduce blog * feat(www): content changes * Update package-lock.json * feat: update text * Update IntroSection.tsx * feat: Turbopack issue * fix * Update IntroSection.tsx * feat: updated Research page * refactor(www): text clarity, padding adj. * format(www) * fix: add missing lib/ files to git - fixes Vercel GitHub deployment - Updated .gitignore to properly exclude Python lib/ but include Next.js lib/ directories - Added packages/ui/src/lib/utils.ts (cn utility function) - Added apps/www/src/lib/sanity.ts (Sanity client configuration) - Fixes module resolution errors in Vercel GitHub deployments (case-sensitive filesystem) * Update .gitignore * style(www): favicon + metadata * fix(www): links * fix(www): add analytics * fix(www): add * fix(www): fix links + image * fix(www): fix links + image * fix(www): fix links * fix(www): remove from tools testing.md
2026-05-03 12:52:56 +02:00 · 2025-12-18 15:55:15 -08:00 · 2025-12-18 15:55:15 -08:00 · 0c3efdbef2
commit 0c3efdbef2
parent 48bbc7cce7
119 changed files with 27142 additions and 266 deletions
--- a/apps/www/src/components/AsciiDiagram.tsx
+++ b/apps/www/src/components/AsciiDiagram.tsx
@ -0,0 +1,90 @@
+import React from "react";
+
+interface AsciiDiagramProps {
+  title?: string;
+  content: string;
+  className?: string;
+}
+
+export const AsciiDiagram: React.FC<AsciiDiagramProps> = ({
+  title,
+  content,
+  className = "",
+}) => {
+  return (
+    <div className={`max-w-4xl mx-auto mb-8 ${className}`}>
+      {title && (
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-zinc-50 mb-4">
+          {title}
+        </h2>
+      )}
+      <div className="bg-gray-900 dark:bg-gray-950 rounded-lg p-6 shadow-xl overflow-x-auto">
+        <pre
+          className="relative font-mono text-xs leading-none text-white m-0 whitespace-pre"
+          style={{ fontFamily: "var(--font-jetbrains-mono), monospace" }}
+        >
+          <code>{content}</code>
+        </pre>
+      </div>
+    </div>
+  );
+};
+
+// Programmatic diagram builder for non-coders
+interface DiagramStep {
+  id: string;
+  label: string;
+  type?: "input" | "inner" | "regular";
+  x: number;
+  y: number;
+}
+
+interface FlowConnection {
+  from: string;
+  to: string;
+  label?: string;
+}
+
+interface DiagramConfig {
+  title: string;
+  steps: DiagramStep[];
+  connections: FlowConnection[];
+}
+
+// Simple ASCII diagram generator
+export const createDiagram = (config: DiagramConfig): string => {
+  // This is a simplified version - you can extend this to automatically generate
+  // the ASCII art from the config
+  // For now, return the manually created diagrams
+  return "";
+};
+
+// Helper to create boxes
+export const createBox = (
+  label: string,
+  type: "input" | "inner" | "regular" = "regular",
+  width: number = 20,
+): string[] => {
+  const padding = Math.max(0, Math.floor((width - label.length) / 2));
+  const spaces = " ".repeat(padding);
+  const remaining = width - label.length - padding;
+
+  let chars;
+  switch (type) {
+    case "input":
+      chars = { tl: "╔", tr: "╗", bl: "╚", br: "╝", h: "═", v: "║" };
+      break;
+    case "inner":
+      chars = { tl: "┏", tr: "┓", bl: "┗", br: "┛", h: "━", v: "┃" };
+      break;
+    case "regular":
+    default:
+      chars = { tl: "┌", tr: "┐", bl: "└", br: "┘", h: "─", v: "│" };
+  }
+
+  return [
+    `${chars.tl}${chars.h.repeat(width)}${chars.tr}`,
+    `${chars.v}${spaces}${label}${" ".repeat(remaining)}${chars.v}`,
+    `${chars.bl}${chars.h.repeat(width)}${chars.br}`,
+  ];
+};