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-06-23 15:38:07 +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/HowItWorksSection.tsx
+++ b/apps/www/src/components/HowItWorksSection.tsx
@ -0,0 +1,70 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+
+export function HowItWorksSection() {
+  return (
+    <section className="bg-[#1a1a1a] text-white pb-16 sm:pb-20 lg:pb-28 sm:pt-0 pt-20">
+      <div className="max-w-312 mx-auto sm:pl-0">
+        <div className="flex flex-col gap-8 sm:gap-12 lg:gap-16">
+          {/* Header and Description */}
+          <div className="max-w-4xl lg:-ml-[102px] lg:pl-[102px] sm:pl-0 pl-4">
+            <h2 className="font-sans font-normal text-xl sm:text-2xl lg:text-3xl tracking-[-1.6px] sm:tracking-[-2px]! text-white leading-[1.03] mb-6 sm:mb-8">
+              One configuration file to orchestrate
+            </h2>
+            <div className="text-white w-100 sm:w-full text-sm sm:text-lg lg:text-lg">
+              <p className="mb-0">
+                Plano offers a delightful developer experience with a simple
+                configuration file that describes the types of prompts your
+                agentic app supports, a set of APIs that need to be plugged in
+                for agentic scenarios (including retrieval queries) and your
+                choice of LLMs.
+              </p>
+            </div>
+          </div>
+
+          {/* Large Diagram - Scrollable on mobile, normal on desktop */}
+          {/* Mobile: Full-width scrollable container that extends to viewport edges */}
+          <div
+            className="mt-5 lg:hidden relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] w-screen overflow-x-auto overflow-y-visible"
+            style={{
+              scrollbarWidth: "none",
+              msOverflowStyle: "none",
+              WebkitOverflowScrolling: "touch",
+            }}
+          >
+            <style jsx>{`
+              .diagram-scroll-container::-webkit-scrollbar {
+                display: none;
+              }
+            `}</style>
+            <div className="diagram-scroll-container inline-block">
+              <Image
+                src="/HowItWorks.svg"
+                alt="How Plano Works Diagram"
+                width={1200}
+                height={600}
+                className="h-auto"
+                style={{ width: "1200px", maxWidth: "none", display: "block" }}
+                priority
+              />
+            </div>
+          </div>
+
+          {/* Desktop: Extends to container edges */}
+          <div className="hidden lg:block -w-[calc(10%+20px)] -mx-[10px]">
+            <Image
+              src="/HowItWorks.svg"
+              alt="How Plano Works Diagram"
+              width={10}
+              height={10}
+              className="w-full h-auto"
+              priority
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}