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

apps/www/src/data/diagramTemplates.ts

@@ -0,0 +1,59 @@
+import { createFlowDiagram, FlowStep } from "@/utils/asciiBuilder";
+
+/**
+ * Easy-to-use diagram templates that automatically handle spacing
+ * Perfect for non-coders who just want to define their flow
+ */
+
+// Example: Simple 3-step process
+export const createSimpleProcess = (steps: string[]) => {
+  return createFlowDiagram({
+    title: "Process Flow",
+    width: 60,
+    steps: steps.map((label) => ({
+      label,
+      type: "regular" as const,
+      shadow: true,
+    })),
+  });
+};
+
+// Example: Create a nested container diagram
+export const createNestedDiagram = (
+  title: string,
+  innerContent: FlowStep[],
+  width: number = 70,
+) => {
+  return createFlowDiagram({
+    title,
+    width,
+    steps: innerContent,
+  });
+};
+
+// Pre-built templates
+export const templates = {
+  simpleFlow: createSimpleProcess(["Start", "Process", "End"]),
+
+  apiFlow: createFlowDiagram({
+    title: "API Request Flow",
+    width: 65,
+    steps: [
+      { label: "Client Request", type: "regular", shadow: true },
+      { label: "API Gateway", type: "container", shadow: true },
+      { label: "Process", type: "inner", shadow: true },
+      { label: "Response", type: "regular", shadow: true },
+    ],
+  }),
+
+  dataPipeline: createFlowDiagram({
+    title: "Data Pipeline",
+    width: 70,
+    steps: [
+      { label: "Input Data", type: "regular", shadow: true },
+      { label: "Transform", type: "inner", shadow: true },
+      { label: "Validate", type: "regular", shadow: true },
+      { label: "Store", type: "regular", shadow: true },
+    ],
+  }),
+};