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.

packages/ui/src/components/Footer.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+
+const footerLinks = {
+  company: [
+    { label: "Product", href: "/product" },
+    { label: "Use Cases", href: "/use-cases" },
+    { label: "Blog", href: "/blog" },
+    { label: "Plano LLMs", href: "/llms" },
+  ],
+  developerResources: [{ label: "Documentation", href: "/docs" }],
+};
+
+export function Footer() {
+  return (
+    <footer
+      className="relative overflow-hidden pt-20 px-6 lg:px-[102px] pb-48"
+      style={{ background: "linear-gradient(to top right, #ffffff, #dcdfff)" }}
+    >
+      <div className="max-w-[81rem] mx-auto relative z-10">
+        {/* Main Grid Layout */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-20">
+          {/* Left Column - Tagline and Copyright */}
+          <div className="flex flex-col">
+            <p className="font-sans font-normal text-lg sm:text-xl lg:text-2xl text-black tracking-[-1.2px] sm:tracking-[-1.5px] lg:tracking-[-1.7px]! leading-7  mb-6 sm:mb-8">
+              Plano is the powerful, intelligent platform that empowers teams to
+              seamlessly build, automate, and scale agentic systems with ease.
+            </p>
+
+            {/* Copyright */}
+            <div className="mt-auto">
+              <p className="font-sans text-sm sm:text-base text-black/63 tracking-[-0.6px] sm:tracking-[-0.8px]!">
+                © Katanemo Labs, Inc. 2025 / Plano by Katanemo Labs, Inc.
+              </p>
+            </div>
+          </div>
+
+          {/* Right Column - Navigation Links */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
+            {/* Company Links */}
+            <div>
+              <h3 className="font-sans font-normal text-xl sm:text-2xl lg:text-3xl text-black tracking-[-1.2px] sm:tracking-[-1.4px] lg:tracking-[-1.6px]! mb-4 sm:mb-6">
+                Company
+              </h3>
+              <nav className="space-y-3 sm:space-y-4">
+                {footerLinks.company.map((link) => (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    className="block font-sans font-normal text-sm sm:text-base lg:text-lg text-black tracking-[-0.8px] sm:tracking-[-0.9px] lg:tracking-[-1px]! hover:text-[var(--primary)] transition-colors"
+                  >
+                    {link.label}
+                  </Link>
+                ))}
+              </nav>
+            </div>
+
+            {/* Developer Resources */}
+            <div>
+              <h3 className="font-sans font-normal text-xl sm:text-2xl lg:text-3xl text-black tracking-[-1.2px] sm:tracking-[-1.4px] lg:tracking-[-1.6px]! mb-4 sm:mb-6">
+                Developer Resources
+              </h3>
+              <nav className="space-y-3 sm:space-y-4">
+                {footerLinks.developerResources.map((link) => (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    className="block font-sans font-normal text-sm sm:text-base lg:text-lg text-black tracking-[-0.8px] sm:tracking-[-0.9px] lg:tracking-[-1px]! hover:text-[var(--primary)] transition-colors"
+                  >
+                    {link.label}
+                  </Link>
+                ))}
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Half-Cut Plano Logo Background */}
+      <div className="absolute bottom-0 left-0 right-0 overflow-hidden pointer-events-none">
+        <div className="max-w-[81rem] mx-auto px-6 lg:px-[1px]">
+          <div className="relative w-full flex justify-start">
+            <Image
+              src="/LogoOutline.svg"
+              alt="Plano Logo"
+              width={1800}
+              height={200}
+              className="w-150 h-auto opacity-30 select-none"
+              style={{
+                transform: "translateY(0%)", // Push logo down more while showing top part
+                transformOrigin: "center bottom",
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+