From 7e1a06fa26eb9482c3458381151a764015c05189 Mon Sep 17 00:00:00 2001 From: Sebastian Maniak Date: Thu, 3 Sep 2026 20:13:34 -0400 Subject: [PATCH 1/6] Redesign home page and add /build page from Solo.io design system Rebuilds the marketing home page from the "kagent Home v4" artboard and adds a /build page from the "kagent Build" artboard, using Tailwind utilities on top of a small set of design tokens (kg-* colours, Figtree / DM Sans / DM Mono). - Home: centered hero, Agent Substrate section (resume, density, isolation panels), scroll-driven Build walkthrough with a manifest panel, pipeline cards, features grid, adopters, community CTA - /build: declarative-build hero with install terminal, the same walkthrough, "whole loop" terminal and numbered pipeline - Tokens in globals.css (:root light, .dark dark) exposed via tailwind.config.ts; legacy rd-* custom CSS removed - Compact footer per the design; navbar left unchanged to match kagent.dev - Default theme set to dark (design is dark-first) - Brand assets added under public/images/brand Co-Authored-By: Claude Fable 5.1 Signed-off-by: Sebastian Maniak --- public/images/brand/binary-purple.svg | 249 ++++++ public/images/brand/circles.svg | 430 ++++++++++ public/images/brand/cncf.svg | 10 + public/images/brand/kagent-mark-purple.svg | 5 + src/app/build/page.tsx | 65 ++ src/app/globals.css | 868 ++------------------- src/app/layout.tsx | 4 +- src/app/page.tsx | 792 +++---------------- src/components/footer.tsx | 216 +---- src/components/home/build-flow.tsx | 151 ++++ src/components/home/primitives.tsx | 63 ++ src/components/home/sections.tsx | 106 +++ src/components/home/substrate-panels.tsx | 139 ++++ src/components/home/terminal.tsx | 52 ++ src/components/home/use-tick.ts | 21 + src/data/home-content.ts | 264 +++++++ tailwind.config.ts | 48 ++ 17 files changed, 1799 insertions(+), 1684 deletions(-) create mode 100644 public/images/brand/binary-purple.svg create mode 100644 public/images/brand/circles.svg create mode 100644 public/images/brand/cncf.svg create mode 100644 public/images/brand/kagent-mark-purple.svg create mode 100644 src/app/build/page.tsx create mode 100644 src/components/home/build-flow.tsx create mode 100644 src/components/home/primitives.tsx create mode 100644 src/components/home/sections.tsx create mode 100644 src/components/home/substrate-panels.tsx create mode 100644 src/components/home/terminal.tsx create mode 100644 src/components/home/use-tick.ts create mode 100644 src/data/home-content.ts diff --git a/public/images/brand/binary-purple.svg b/public/images/brand/binary-purple.svg new file mode 100644 index 00000000..495c793a --- /dev/null +++ b/public/images/brand/binary-purple.svg @@ -0,0 +1,249 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/brand/circles.svg b/public/images/brand/circles.svg new file mode 100644 index 00000000..35040167 --- /dev/null +++ b/public/images/brand/circles.svg @@ -0,0 +1,430 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/brand/cncf.svg b/public/images/brand/cncf.svg new file mode 100644 index 00000000..14c69fe9 --- /dev/null +++ b/public/images/brand/cncf.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/public/images/brand/kagent-mark-purple.svg b/public/images/brand/kagent-mark-purple.svg new file mode 100644 index 00000000..a961e500 --- /dev/null +++ b/public/images/brand/kagent-mark-purple.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/app/build/page.tsx b/src/app/build/page.tsx new file mode 100644 index 00000000..5f1b7314 --- /dev/null +++ b/src/app/build/page.tsx @@ -0,0 +1,65 @@ +import type { Metadata } from "next"; +import Link from "next/link"; +import { INSTALL_LINES, LOOP_LINES } from "@/data/home-content"; +import { ghostBtn, primaryBtn, Section } from "@/components/home/primitives"; +import { TerminalRoll } from "@/components/home/terminal"; +import { BuildFlow } from "@/components/home/build-flow"; +import { AdoptersSection, CommunityBand, FeaturesSection, PipelineGrid } from "@/components/home/sections"; + +export const metadata: Metadata = { + title: "Build agents the way you ship everything else | kagent", + description: + "Skills, tools and agents are Kubernetes resources. Write them, apply them, review them in a pull request. No framework to learn, no glue code to maintain.", +}; + +export default function BuildPage() { + return ( + <> + {/* Hero */} +
+
+
+
+
+ + the declarative way to build agents +
+

+ Build agents the way you ship everything else +

+

+ Skills, tools and agents are Kubernetes resources. Write them, apply them, review them in a pull request. No framework to + learn, no glue code to maintain. +

+
+ + Create your first agent + + + Read the docs + +
+ +
+
+ + {/* Build walkthrough */} +
+ +
+ + {/* The whole loop */} +
+

+ One apply, and the platform takes it from there +

+ + +
+ + + + + + ); +} diff --git a/src/app/globals.css b/src/app/globals.css index 30246c56..ff1b8414 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -63,8 +63,8 @@ @layer base { :root { - --background: 0 0% 100%; - --foreground: 224 71.4% 4.1%; + --background: 228 33% 97%; + --foreground: 227 30% 12%; --card: 0 0% 100%; --card-foreground: 224 71.4% 4.1%; --popover: 0 0% 100%; @@ -91,9 +91,9 @@ } .dark { - --background: 224 71.4% 4.1%; - --foreground: 210 20% 98%; - --card: 224 71.4% 4.1%; + --background: 226 37% 7%; + --foreground: 0 0% 100%; + --card: 224 37% 8%; --card-foreground: 210 20% 98%; --popover: 224 71.4% 4.1%; --popover-foreground: 210 20% 98%; @@ -148,825 +148,53 @@ } /* ============================================================ - REDESIGN — kagent.dev landing page (Design A) + kagent.dev redesign tokens — consumed through the Tailwind `kg-*` + utilities defined in tailwind.config.ts. Light values live on :root, + dark values on .dark (next-themes toggles the class). ============================================================ */ - -.rd-shell { - --rd-bg: #fff; - --rd-fg: #151927; - --rd-fg-muted: #3F4458; - --rd-border: #E1DEEC; - --rd-border-hover: #CFCAE0; - --rd-surface: #FAFAFB; - --rd-surface-alt: #F4F2FA; - --rd-accent: #8A3FFC; - --rd-accent-hover: #9C55FF; - --rd-card-bg: #fff; - --rd-card-shadow: rgba(15,19,35,0.06); - --rd-card-shadow-hover: rgba(15,19,35,0.12); - --rd-rule: #ECEAF2; - --rd-dot: #CFCAE0; - --rd-tint: #F7F5FB; - --rd-tint-strong: #F4EEFE; - --rd-tint-subtle: #F8F7FB; - --rd-fg-subtle: #6B7289; - width: 100%; - overflow: hidden; - background: var(--rd-bg); - color: var(--rd-fg); - font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif; - font-size: 16px; - line-height: 1.6; - -webkit-font-smoothing: antialiased; -} -.dark .rd-shell { - --rd-bg: hsl(var(--background)); - --rd-fg: hsl(var(--foreground)); - --rd-fg-muted: #a1a1aa; - --rd-border: #27272a; - --rd-border-hover: #3f3f46; - --rd-surface: #18181b; - --rd-surface-alt: #1e1b2e; - --rd-accent: #a78bfa; - --rd-accent-hover: #c4b5fd; - --rd-card-bg: #18181b; - --rd-card-shadow: rgba(0,0,0,0.3); - --rd-card-shadow-hover: rgba(0,0,0,0.5); - --rd-rule: #27272a; - --rd-dot: #52525b; - --rd-tint: #1c1a27; - --rd-tint-strong: #231f35; - --rd-tint-subtle: #1a1a1f; - --rd-fg-subtle: #71717a; -} -.rd-shell a { color: inherit; text-decoration: none; } - -/* ---- GitHub Stars bar ---- */ -.rd-stars-bar { - padding: 12px 0; -} -.rd-stars-chip { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 8px 16px 8px 12px; - border-radius: 999px; - border: 1px solid var(--rd-border); - font-family: 'DM Mono', monospace; - font-size: 13px; - color: var(--rd-fg-muted); - transition: all 200ms; - background: var(--rd-card-bg); -} -.rd-stars-chip:hover { - border-color: var(--rd-border-hover); - background: var(--rd-surface); - box-shadow: 0 1px 2px var(--rd-card-shadow), 0 4px 12px var(--rd-card-shadow); -} -.rd-stars-count { - font-weight: 600; - color: var(--rd-fg); -} - -.rd-container { - max-width: 1200px; - margin: 0 auto; - padding: 0 32px; -} - -/* ---- Type ---- */ -.rd-eyebrow { - display: inline-flex; - align-items: center; - gap: 8px; - font-family: 'DM Mono', monospace; - font-size: 12.5px; - font-weight: 400; - letter-spacing: 0.06em; - color: var(--rd-accent); -} -.rd-eyebrow::before { - content: ''; - width: 6px; height: 6px; - border-radius: 999px; - background: var(--rd-accent); -} - -.rd-shell h1, .rd-shell h2, .rd-shell h3, .rd-shell h4 { - font-family: 'Figtree', sans-serif; - font-weight: 500; - color: var(--rd-fg); - margin: 0; - letter-spacing: -0.02em; - text-wrap: balance; -} -.rd-shell h1 { font-size: clamp(40px, 5.5vw, 68px); line-height: 1.05; } -.rd-shell h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; } -.rd-shell h3 { font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; } -.rd-shell h4 { font-size: 17px; line-height: 1.35; } -.rd-shell p { margin: 0; color: var(--rd-fg-muted); text-wrap: pretty; } -.rd-lead { font-size: 19px; line-height: 1.55; color: var(--rd-fg-muted); max-width: 880px; margin-left: auto !important; margin-right: auto !important; margin-top: 24px; text-align: center !important; display: block; } - -/* ---- Buttons ---- */ -.rd-btn { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 12px 22px; - border-radius: 999px; - font-family: 'Figtree', sans-serif; - font-weight: 500; - font-size: 15px; - line-height: 1; - border: 1px solid transparent; - cursor: pointer; - transition: all 200ms cubic-bezier(.2,.6,.2,1); - white-space: nowrap; -} -.rd-btn--purple { background: var(--rd-accent); color: #fff !important; text-decoration: none; } -.rd-btn--purple:hover { background: var(--rd-accent-hover); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(138,63,252,0.35); } -.rd-btn--ghost { background: transparent; color: var(--rd-fg); border-color: var(--rd-border); } -.rd-btn--ghost:hover { background: var(--rd-surface); border-color: var(--rd-border-hover); } -.rd-btn:active { transform: scale(0.98); } -.rd-arrow { transition: transform 200ms cubic-bezier(.2,.6,.2,1); } -.rd-btn:hover .rd-arrow { transform: translateX(3px); } - -/* ---- Section head ---- */ -.rd-section-head { - text-align: center; - max-width: 720px; - margin: 0 auto 56px; -} -.rd-section-head h2 { margin-top: 16px; } -.rd-section-head p { margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--rd-fg-muted); } - -/* ---- Hero ---- */ -.rd-hero { - padding: 80px 0 100px; - position: relative; - overflow: hidden; -} -.rd-hero-wash { - position: absolute; - inset: -20% -10% auto -10%; - height: 80%; - background: radial-gradient(50% 50% at 50% 30%, rgba(138,63,252,0.08), rgba(138,63,252,0) 70%); - pointer-events: none; - z-index: 0; -} -.rd-hero-inner { position: relative; z-index: 1; } -.rd-hero-text { max-width: 880px; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } -.rd-hero-h1 { margin-top: 24px; text-align: center; } -.rd-grad { - background: linear-gradient(120deg, #8A3FFC 0%, #5B21B6 100%); - -webkit-background-clip: text; - background-clip: text; - color: transparent; -} -.rd-hero-ctas { - display: flex; - gap: 12px; - justify-content: center; - margin-top: 36px; - flex-wrap: wrap; -} -.rd-hero-meta { - display: flex; - align-items: center; - justify-content: center; - gap: 24px; - margin-top: 28px; - font-family: 'DM Mono', monospace; - font-size: 12.5px; - color: var(--rd-fg-subtle); - flex-wrap: wrap; -} -.rd-dot { width: 4px; height: 4px; border-radius: 999px; background: var(--rd-dot); } - -/* Hero visual */ -.rd-hero-visual { margin-top: 48px; position: relative; } -.rd-hero-frame { - position: relative; - border-radius: 20px; - overflow: visible; - background: linear-gradient(180deg, #FFFFFF 0%, #FAF8FE 100%); - box-shadow: 0 2px 4px rgba(15,19,35,0.04), 0 24px 48px rgba(91,33,182,0.10), 0 48px 96px rgba(15,19,35,0.08); - border: 1px solid var(--rd-border); -} -.rd-browser { border-radius: 20px; overflow: hidden; } -.dark .rd-browser img { filter: invert(0.88) hue-rotate(180deg); } -/* Mermaid: transparent fills so nodes and subgraphs follow the page background */ -.mermaid-diagram svg .node rect, -.mermaid-diagram svg .node polygon, -.mermaid-diagram svg .node circle, -.mermaid-diagram svg .cluster rect { - fill: transparent !important; -} -.rd-browser-bar { - height: 38px; - background: var(--rd-tint); - border-bottom: 1px solid var(--rd-rule); - display: flex; - align-items: center; - padding: 0 14px; - gap: 8px; -} -.rd-dots { display: flex; gap: 6px; } -.rd-dots i { width: 10px; height: 10px; border-radius: 999px; display: inline-block; background: var(--rd-dot); } -.rd-url { - flex: 1; - text-align: center; - font-family: 'DM Mono', monospace; - font-size: 11.5px; - color: var(--rd-fg-subtle); - background: var(--rd-card-bg); - padding: 5px 12px; - border-radius: 999px; - border: 1px solid var(--rd-rule); - max-width: 320px; - margin: 0 auto; -} - -/* Floating chips */ -.rd-float-chip { - position: absolute; - background: var(--rd-card-bg); - border: 1px solid var(--rd-border); - border-radius: 14px; - padding: 12px 14px; - box-shadow: 0 1px 2px var(--rd-card-shadow), 0 4px 12px var(--rd-card-shadow); - display: flex; - align-items: center; - gap: 10px; - font-size: 13.5px; - z-index: 2; -} -.rd-chip-icon { - width: 32px; height: 32px; - border-radius: 8px; - display: grid; place-items: center; - flex-shrink: 0; -} -.rd-chip-label { font-family: 'Figtree'; font-weight: 500; color: var(--rd-fg); } -.rd-chip-sub { font-size: 11.5px; color: var(--rd-fg-subtle); margin-top: 1px; } -.rd-float-l { left: -24px; top: 30%; } -.rd-float-r { right: -24px; top: 18%; } -.rd-float-b { right: 8%; bottom: -22px; } -.rd-float-b2 { left: 8%; bottom: -22px; } -.rd-float-t { right: -24px; top: 50%; } -.rd-float-l2 { left: -24px; bottom: 12%; } - -/* ---- Logo strip ---- */ -.rd-logo-strip { - padding: 56px 0; - border-top: 1px solid var(--rd-rule); - border-bottom: 1px solid var(--rd-rule); -} -.rd-logo-label { - text-align: center; - font-family: 'DM Mono', monospace; - font-size: 12px; - color: var(--rd-fg-subtle); - letter-spacing: 0.06em; - margin-bottom: 28px; -} -.rd-logo-row { - display: flex; - align-items: center; - justify-content: space-around; - gap: 32px; - flex-wrap: wrap; - filter: grayscale(1); - opacity: 0.65; -} -.rd-logo-text { - font-family: 'Figtree'; - font-weight: 600; - font-size: 18px; - color: var(--rd-fg-muted); - letter-spacing: -0.01em; -} - -/* ---- Quick Start ---- */ -.rd-quickstart { - margin-top: 36px; - max-width: 720px; - margin-left: auto; - margin-right: auto; -} -.rd-qs-terminal { - border-radius: 16px; - overflow: hidden; - background: #1A1D2E; - box-shadow: 0 2px 4px rgba(15,19,35,0.06), 0 16px 40px rgba(15,19,35,0.14); -} -.rd-qs-bar { - display: flex; - align-items: center; - gap: 12px; - padding: 0 16px; - height: 44px; - background: #151927; - border-bottom: 1px solid rgba(255,255,255,0.06); -} -.rd-qs-dots { - display: flex; - gap: 6px; - margin-right: 4px; -} -.rd-qs-dots i { - width: 10px; - height: 10px; - border-radius: 999px; - display: inline-block; -} -.rd-qs-dots i:nth-child(1) { background: #FF5F56; } -.rd-qs-dots i:nth-child(2) { background: #FFBD2E; } -.rd-qs-dots i:nth-child(3) { background: #27C93F; } -.rd-qs-tabs { - display: flex; - gap: 2px; -} -.rd-qs-tab { - padding: 6px 16px; - border-radius: 8px; - border: 1px solid transparent; - background: transparent; - color: rgba(255,255,255,0.45); - font-family: 'DM Mono', monospace; - font-size: 13px; - cursor: pointer; - transition: all 150ms; -} -.rd-qs-tab:hover { - color: rgba(255,255,255,0.7); -} -.rd-qs-tab.active { - background: rgba(138,63,252,0.15); - border-color: rgba(138,63,252,0.4); - color: #C4A1FF; -} -.rd-qs-copy { - margin-left: auto; - background: transparent; - border: none; - color: rgba(255,255,255,0.35); - cursor: pointer; - padding: 4px; - border-radius: 6px; - transition: all 150ms; - display: flex; - align-items: center; - justify-content: center; -} -.rd-qs-copy:hover { - color: rgba(255,255,255,0.7); - background: rgba(255,255,255,0.06); -} -.rd-qs-body { - padding: 28px 24px; - min-height: 60px; - display: flex; - align-items: center; -} -.rd-qs-body code { - font-family: 'DM Mono', monospace; - font-size: 14px; - line-height: 1.6; - color: rgba(255,255,255,0.85); - word-break: break-all; -} -.rd-qs-prompt { - color: #27C93F; - margin-right: 10px; - user-select: none; -} -.rd-qs-requires { - margin-top: 14px; - font-family: 'DM Mono', monospace; - font-size: 12.5px; - color: var(--rd-fg-subtle); - text-align: center; -} -.rd-qs-requires strong { - color: var(--rd-fg-muted); - font-weight: 500; -} -.rd-qs-requires a { - color: var(--rd-accent); - text-decoration: none; - transition: color 150ms; -} -.rd-qs-requires a:hover { - color: var(--rd-accent); - text-decoration: underline; -} - -/* ---- Why kagent ---- */ -.rd-why { padding: 120px 0; } -.rd-value-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 24px; -} -.rd-value-card { - background: var(--rd-card-bg); - border: 1px solid var(--rd-rule); - border-radius: 18px; - padding: 32px; - transition: all 240ms cubic-bezier(.2,.6,.2,1); -} -.rd-value-card:hover { - border-color: var(--rd-border); - transform: translateY(-2px); - box-shadow: 0 1px 2px var(--rd-card-shadow), 0 8px 24px var(--rd-card-shadow); -} -.rd-v-icon { - width: 44px; height: 44px; - border-radius: 11px; - background: var(--rd-tint-strong); - color: var(--rd-accent); - display: grid; place-items: center; - margin-bottom: 24px; -} -.rd-value-card h3 { margin-bottom: 10px; } -.rd-value-card p { font-size: 15px; line-height: 1.55; } - -/* ---- How it works ---- */ -.rd-how { - padding: 120px 0; - background: var(--rd-surface); - border-top: 1px solid var(--rd-rule); - border-bottom: 1px solid var(--rd-rule); -} -.rd-how-grid { - display: grid; - grid-template-columns: 380px 1fr; - gap: 64px; - align-items: start; -} -.rd-how-steps { display: flex; flex-direction: column; gap: 4px; } -.rd-how-step { - display: flex; - gap: 16px; - padding: 18px 18px 18px 14px; - border-radius: 14px; - cursor: pointer; - transition: all 200ms; - border: 1px solid transparent; - background: none; - text-align: left; - width: 100%; - font-family: inherit; - font-size: inherit; - color: inherit; -} -.rd-how-step:hover { background: rgba(255,255,255,0.6); } -.rd-how-step.active { - background: var(--rd-card-bg); - border-color: var(--rd-border); - box-shadow: 0 1px 2px var(--rd-card-shadow), 0 8px 24px var(--rd-card-shadow); -} -.rd-how-num { - flex-shrink: 0; - width: 28px; height: 28px; - border-radius: 999px; - background: var(--rd-tint-strong); - color: var(--rd-accent); - display: grid; place-items: center; - font-family: 'DM Mono'; - font-size: 12px; - font-weight: 500; - margin-top: 2px; -} -.rd-how-step.active .rd-how-num { background: var(--rd-accent); color: #fff; } -.rd-how-step h4 { margin-bottom: 4px; font-family: 'Figtree', sans-serif; font-weight: 500; color: var(--rd-fg); } -.rd-how-step p { font-size: 14px; color: var(--rd-fg-subtle); line-height: 1.5; } -.rd-how-step.active p { color: var(--rd-fg-muted); } -.rd-how-diagram { - background: var(--rd-card-bg); - border: 1px solid var(--rd-rule); - border-radius: 20px; - padding: 48px 32px; - min-height: 420px; - display: grid; - place-items: center; - box-shadow: 0 1px 2px var(--rd-card-shadow), 0 8px 24px var(--rd-card-shadow); -} - -/* ---- Use cases ---- */ -.rd-usecases { padding: 120px 0; } -.rd-uc-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 20px; -} -.rd-uc-card { - background: var(--rd-card-bg); - border: 1px solid var(--rd-rule); - border-radius: 20px; - padding: 36px; - transition: all 240ms cubic-bezier(.2,.6,.2,1); - display: flex; - flex-direction: column; - min-height: 280px; -} -.rd-uc-card:hover { - border-color: var(--rd-border); - box-shadow: 0 1px 2px var(--rd-card-shadow), 0 8px 24px var(--rd-card-shadow); - transform: translateY(-2px); -} -.rd-uc-icon { - width: 40px; height: 40px; - border-radius: 10px; - background: var(--rd-tint-strong); - color: var(--rd-accent); - display: grid; place-items: center; - margin-bottom: 20px; -} -.rd-uc-card h3 { margin-bottom: 10px; } -.rd-uc-card p { font-size: 15px; flex: 1; } -.rd-uc-link { - margin-top: 20px; - font-family: 'Figtree'; - font-weight: 500; - font-size: 14px; - color: var(--rd-accent); - display: inline-flex; - align-items: center; - gap: 6px; -} -.rd-uc-card:hover .rd-uc-link svg { transform: translateX(3px); } -.rd-uc-link svg { transition: transform 200ms; } - -/* ---- Standards ---- */ -.rd-standards { padding: 120px 0; background: var(--rd-surface-alt); } -.rd-std-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 20px; -} -.rd-std-card { - background: var(--rd-card-bg); - border: 1px solid var(--rd-rule); - border-radius: 16px; - padding: 28px 24px; - text-align: center; - transition: all 240ms; -} -.rd-std-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px var(--rd-card-shadow), 0 8px 24px var(--rd-card-shadow); } -.rd-std-mark { - width: 56px; height: 56px; - border-radius: 14px; - margin: 0 auto 16px; - display: grid; place-items: center; - font-family: 'Figtree'; - font-weight: 600; - font-size: 14px; - color: #fff; -} -.rd-std-card h4 { font-size: 16px; margin-bottom: 6px; font-family: 'Figtree', sans-serif; font-weight: 500; color: var(--rd-fg); } -.rd-std-card p { font-size: 13.5px; color: var(--rd-fg-subtle); line-height: 1.5; } - -/* ---- Editions ---- */ -.rd-editions { padding: 120px 0; } -.rd-ed-grid { - display: flex; - justify-content: center; - gap: 20px; -} -.rd-ed-card { - border-radius: 24px; - padding: 40px; - position: relative; - overflow: hidden; -} -.rd-ed-os { - background: var(--rd-card-bg); - border: 1px solid var(--rd-border); -} -.rd-ed-ent { - background: linear-gradient(150deg, #1a1029 0%, #2D1850 60%, #4C1D95 100%); - color: #fff; - border: 1px solid #2D1850; -} -.rd-ed-ent::before { - content: ''; - position: absolute; - top: -50%; right: -30%; - width: 600px; height: 600px; - background: radial-gradient(50% 50% at 50% 50%, rgba(138,63,252,0.35), rgba(138,63,252,0) 70%); - pointer-events: none; -} -.rd-ed-tag { - font-family: 'DM Mono', monospace; - font-size: 11.5px; - letter-spacing: 0.06em; - display: inline-flex; - align-items: center; - gap: 8px; - padding: 6px 12px; - border-radius: 999px; - background: var(--rd-surface); - color: var(--rd-fg-subtle); - margin-bottom: 24px; -} -.rd-ed-ent .rd-ed-tag { - background: rgba(255,255,255,0.08); - color: #C8A8FF; - border: 1px solid rgba(255,255,255,0.1); -} -.rd-ed-ent h3 { color: #fff !important; font-size: 28px; } -.rd-ed-os h3 { font-size: 28px; } -.rd-ed-sub { margin-top: 10px; max-width: 380px; } -.rd-ed-ent .rd-ed-sub { color: rgba(255,255,255,0.75); } -.rd-ed-list { - margin-top: 28px; - display: flex; - flex-direction: column; - gap: 12px; - position: relative; - z-index: 1; - list-style: none; - padding: 0; -} -.rd-ed-list li { - display: flex; - align-items: flex-start; - gap: 10px; - font-size: 14.5px; - color: var(--rd-fg-muted); -} -.rd-ed-ent .rd-ed-list li { color: rgba(255,255,255,0.85); } -.rd-ed-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--rd-accent); } -.rd-ed-ent .rd-ed-list li svg { color: #B388FF; } -.rd-ed-cta { margin-top: 36px; position: relative; z-index: 1; } - -/* ---- Community ---- */ -/* ---- Adopters ---- */ -.rd-adopters { padding: 100px 0; background: #151927; } -.rd-adopters-track { - overflow: hidden; - mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); - -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); - margin: 0 auto; -} -.rd-adopters-scroll { - display: flex; - gap: 16px; - width: max-content; - will-change: transform; - animation: marqueeScroll 30s linear infinite; -} -.rd-adopters-scroll:hover { - animation-play-state: paused; -} -.rd-adopter-item { - display: flex; - align-items: center; - justify-content: center; - padding: 16px 32px; - background: rgba(255,255,255,0.06); - border: 1px solid rgba(255,255,255,0.1); - border-radius: 14px; - flex-shrink: 0; - transition: box-shadow 200ms, border-color 200ms, transform 200ms, background 200ms; - opacity: 0.75; -} -.rd-adopter-item img { filter: brightness(0) invert(1); opacity: 0.7; transition: opacity 200ms; } -.rd-adopter-item:hover img { opacity: 1; } -.rd-adopter-item:hover { - box-shadow: 0 4px 20px rgba(138,63,252,0.15); - border-color: rgba(138,63,252,0.3); - background: rgba(255,255,255,0.1); - transform: translateY(-2px); - opacity: 1; -} -.rd-adopters .rd-section-head h2 { color: #fff; } -.rd-adopters .rd-section-head p { color: rgba(255,255,255,0.5); } -.rd-adopters .rd-eyebrow { color: #C4A1FF; } -.rd-adopters .rd-eyebrow::before { background: #C4A1FF; } -.rd-adopters-add { - text-align: center; - margin-top: 32px; -} -.rd-adopters-add a { - font-family: 'DM Mono', monospace; - font-size: 13px; - color: #C4A1FF; - text-decoration: underline; - text-underline-offset: 3px; - transition: color 150ms; -} -.rd-adopters-add a:hover { - color: #fff; -} - -/* ---- Community ---- */ -.rd-community { padding: 120px 0; background: var(--rd-surface); border-top: 1px solid var(--rd-rule); } -.rd-comm-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 20px; -} -.rd-comm-card { - background: var(--rd-card-bg); - border: 1px solid var(--rd-rule); - border-radius: 18px; - padding: 32px; - transition: all 240ms; -} -.rd-comm-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px var(--rd-card-shadow), 0 8px 24px var(--rd-card-shadow); border-color: var(--rd-border); } -.rd-c-icon { - width: 48px; height: 48px; - border-radius: 12px; - background: var(--rd-tint-strong); - color: var(--rd-accent); - display: grid; place-items: center; - margin-bottom: 20px; -} -.rd-stat { - font-family: 'Figtree'; - font-size: 36px; - font-weight: 500; - color: var(--rd-fg); - letter-spacing: -0.02em; - line-height: 1; -} -.rd-stat-l { - font-family: 'DM Mono'; - font-size: 12px; - color: var(--rd-fg-subtle); - margin-top: 6px; - letter-spacing: 0.04em; -} -.rd-comm-card h4 { margin-top: 16px; margin-bottom: 6px; font-family: 'Figtree', sans-serif; font-weight: 500; color: var(--rd-fg); } -.rd-comm-card p { font-size: 14px; color: var(--rd-fg-subtle); line-height: 1.5; } -.rd-c-link { - margin-top: 18px; - display: inline-flex; - align-items: center; - gap: 6px; - font-family: 'Figtree'; - font-weight: 500; - font-size: 14px; - color: var(--rd-accent); -} - -/* ---- CTA band ---- */ -.rd-cta-band { padding: 120px 0; } -.rd-cta-card { - background: linear-gradient(150deg, #0F0820 0%, #2D1850 50%, #5B21B6 100%); - border-radius: 28px; - padding: 80px 60px; - text-align: center; - color: #fff; - position: relative; - overflow: hidden; -} -.rd-cta-card::before, .rd-cta-card::after { - content: ''; - position: absolute; - border-radius: 50%; - pointer-events: none; -} -.rd-cta-card::before { - width: 600px; height: 600px; - top: -200px; left: -200px; - background: radial-gradient(50% 50% at 50% 50%, rgba(138,63,252,0.5), rgba(138,63,252,0) 70%); -} -.rd-cta-card::after { - width: 500px; height: 500px; - bottom: -150px; right: -100px; - background: radial-gradient(50% 50% at 50% 50%, rgba(32,183,243,0.25), rgba(32,183,243,0) 70%); -} -.rd-cta-card > * { position: relative; z-index: 1; } -.rd-cta-card h2 { color: #fff !important; font-size: clamp(32px, 4vw, 52px); } -.rd-cta-card .rd-lead { color: rgba(255,255,255,0.8); } -.rd-cta-card .rd-hero-ctas { margin-top: 36px; } -.rd-cta-card .rd-eyebrow::before { background: #9DD9F8; } - -/* ---- Scroll reveal ---- */ -.rv { - opacity: 0; - transform: translateY(16px); - transition: opacity 600ms cubic-bezier(.16,1,.3,1), transform 600ms cubic-bezier(.16,1,.3,1); +:root { + --kg-pg: #F6F7FB; + --kg-panel: #FFFFFF; + --kg-tx1: #151927; + --kg-tx2: #3B4258; + --kg-tx3: #6B7289; + --kg-tx4: #6B7289; + --kg-bd: rgba(15, 19, 35, 0.12); + --kg-bd-soft: rgba(15, 19, 35, 0.08); + --kg-sf: rgba(15, 19, 35, 0.035); + --kg-acc: #7A2FE8; + --kg-nav: rgba(255, 255, 255, 0.74); + --kg-pat: 0.035; + --kg-ykey: #7A2FE8; + --kg-yval: #3B4258; + --kg-ystr: #16794B; + --kg-ycom: #9AA0B5; + --kg-term: #0A0D16; + --kg-term-tx: #D3D8E8; + --kg-term-dim: #6C7390; } -.rv-in { - opacity: 1; - transform: translateY(0); +.dark { + --kg-pg: #0B0E18; + --kg-panel: #0D111C; + --kg-tx1: #FFFFFF; + --kg-tx2: #C8CCDB; + --kg-tx3: #8289A3; + --kg-tx4: #5A6078; + --kg-bd: rgba(255, 255, 255, 0.12); + --kg-bd-soft: rgba(255, 255, 255, 0.07); + --kg-sf: rgba(255, 255, 255, 0.035); + --kg-acc: #A971FF; + --kg-nav: rgba(15, 19, 35, 0.62); + --kg-pat: 0.05; + --kg-ykey: #A971FF; + --kg-yval: #C8CCDB; + --kg-ystr: #7FD1A8; + --kg-ycom: #5A6078; + --kg-term: #06080F; + --kg-term-tx: #D3D8E8; + --kg-term-dim: #6C7390; } -/* ---- Responsive ---- */ -@media (max-width: 980px) { - .rd-value-grid, .rd-uc-grid, .rd-comm-grid, .rd-ed-grid, .rd-std-grid { grid-template-columns: 1fr; } - .rd-how-grid { grid-template-columns: 1fr; } - .rd-float-l, .rd-float-r, .rd-float-b2, .rd-float-t, .rd-float-l2 { display: none; } - .rd-qs-bar { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 8px; } - .rd-qs-tabs { flex-wrap: wrap; } - .rd-qs-body code { font-size: 12.5px; } - .rd-qs-prereqs { padding: 20px 20px; } -} /* ============================================= New unified Navbar diff --git a/src/app/layout.tsx b/src/app/layout.tsx index cf980de3..36fe0cd9 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -32,8 +32,8 @@ export default function RootLayout({ children }: { children: React.ReactNode }) /> - - + +
{children}