diff --git a/docs/app/(home)/components/Accordion/Accordion.tsx b/docs/app/(home)/components/Accordion/Accordion.tsx
new file mode 100644
index 000000000..3ddc498a4
--- /dev/null
+++ b/docs/app/(home)/components/Accordion/Accordion.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { AnimatePresence, motion, type TargetAndTransition, type Transition } from "motion/react";
+import type { ReactNode } from "react";
+
+const NO_SHADOW = "0px 0px 0px rgba(0,0,0,0)";
+const DEFAULT_PANEL_INITIAL = { height: 0, opacity: 0 };
+const DEFAULT_PANEL_ANIMATE = { height: "auto", opacity: 1 };
+const DEFAULT_PANEL_EXIT = { height: 0, opacity: 0 };
+
+interface AccordionItemProps {
+  open: boolean;
+  expandedHeight: number;
+  collapsedHeight: number;
+  className?: string;
+  activeShadow?: string;
+  zIndexOpen?: number;
+  zIndexClosed?: number;
+  transition?: Transition;
+  onActivate?: () => void;
+  children: ReactNode;
+}
+
+export function AccordionItem({
+  open,
+  expandedHeight,
+  collapsedHeight,
+  className,
+  activeShadow = NO_SHADOW,
+  zIndexOpen = 2,
+  zIndexClosed = 1,
+  transition,
+  onActivate,
+  children,
+}: AccordionItemProps) {
+  return (
+    <motion.div
+      className={className}
+      animate={{
+        height: open ? expandedHeight : collapsedHeight,
+        boxShadow: open ? activeShadow : NO_SHADOW,
+        zIndex: open ? zIndexOpen : zIndexClosed,
+      }}
+      transition={transition}
+      onClick={onActivate}
+      onMouseEnter={onActivate}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+interface AccordionPanelProps {
+  open: boolean;
+  className?: string;
+  transition?: Transition;
+  initial?: TargetAndTransition;
+  animate?: TargetAndTransition;
+  exit?: TargetAndTransition;
+  children: ReactNode;
+}
+
+export function AccordionPanel({
+  open,
+  className,
+  transition,
+  initial = DEFAULT_PANEL_INITIAL,
+  animate = DEFAULT_PANEL_ANIMATE,
+  exit = DEFAULT_PANEL_EXIT,
+  children,
+}: AccordionPanelProps) {
+  return (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          className={className}
+          initial={initial}
+          animate={animate}
+          exit={exit}
+          transition={transition}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/docs/app/(home)/components/BuildChatSection/BuildChatSection.tsx b/docs/app/(home)/components/BuildChatSection/BuildChatSection.tsx
deleted file mode 100644
index 59510327d..000000000
--- a/docs/app/(home)/components/BuildChatSection/BuildChatSection.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-"use client";
-
-import dashboardImg from "@/public/images/home/d67b5e94653944c1d0d4998c6b169c37f98060ad.png";
-import Image from "next/image";
-import { useEffect, useRef, useState } from "react";
-import { CopyIcon } from "../shared/shared";
-import styles from "./BuildChatSection.module.css";
-
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-
-const CARD_SHADOW = "0px 8px 16px -4px rgba(22,34,51,0.08)";
-const COMMAND = "npx @openuidev/cli@latest create";
-
-// ---------------------------------------------------------------------------
-// Sub-components
-// ---------------------------------------------------------------------------
-
-function SectionTitle() {
-  return <p className={styles.title}>Build a Generative UI chat in minutes</p>;
-}
-
-function CtaButton() {
-  const [copied, setCopied] = useState(false);
-  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (resetTimeoutRef.current) {
-        clearTimeout(resetTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  const handleClick = async () => {
-    if (copied) return;
-
-    try {
-      await navigator.clipboard.writeText(COMMAND);
-      setCopied(true);
-      resetTimeoutRef.current = setTimeout(() => {
-        setCopied(false);
-      }, 3000);
-    } catch {
-      setCopied(false);
-    }
-  };
-
-  return (
-    <div className={styles.ctaWrap}>
-      <button onClick={handleClick} className={styles.ctaButton}>
-        <span className={styles.ctaDesktopLabel}>{COMMAND}</span>
-        <span className={styles.ctaMobileLabel}>
-          <span className={styles.ctaTicker}>
-            <span className={styles.ctaTickerText}>{COMMAND}</span>
-            <span aria-hidden="true" className={styles.ctaTickerText}>
-              {COMMAND}
-            </span>
-          </span>
-        </span>
-        <span className={styles.iconBadge}>
-          <span className={styles.iconFrame}>
-            <span
-              className={`${styles.iconLayer} ${copied ? styles.iconHidden : styles.iconVisible}`}
-            >
-              <CopyIcon color="white" />
-            </span>
-            <svg
-              className={`${styles.iconLayer} ${copied ? styles.iconVisible : styles.iconHidden}`}
-              fill="none"
-              viewBox="0 0 14 14"
-            >
-              <path
-                d="M11.6667 3.5L5.25 9.91667L2.33334 7"
-                stroke="white"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="1.5"
-              />
-            </svg>
-          </span>
-        </span>
-      </button>
-    </div>
-  );
-}
-
-function DashboardIllustration() {
-  return (
-    <Image
-      src={dashboardImg}
-      alt="AI chat dashboard illustration"
-      className={styles.dashboardImage}
-      placeholder="blur"
-    />
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Main component
-// ---------------------------------------------------------------------------
-
-export function BuildChatSection() {
-  return (
-    <div className={styles.section}>
-      <div className={styles.container}>
-        <div className={styles.card}>
-          {/* Border + shadow overlay */}
-          <div aria-hidden="true" className={styles.overlay} style={{ boxShadow: CARD_SHADOW }} />
-
-          <div className={styles.content}>
-            {/* Left: text content */}
-            <div className={styles.copyColumn}>
-              <div className={styles.copyStack}>
-                <SectionTitle />
-              </div>
-              <CtaButton />
-            </div>
-
-            {/* Right: illustration */}
-            <div className={styles.mediaColumn}>
-              <DashboardIllustration />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/docs/app/(home)/components/Button/Button.module.css b/docs/app/(home)/components/Button/Button.module.css
new file mode 100644
index 000000000..a5657db06
--- /dev/null
+++ b/docs/app/(home)/components/Button/Button.module.css
@@ -0,0 +1,35 @@
+.clipboardCommandButton {
+  font-family: var(--font-geist-mono);
+}
+
+.copyIcon {
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+}
+
+.copyIconFrame {
+  position: relative;
+  display: flex;
+  height: 1rem;
+  width: 1rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.iconLayer {
+  position: absolute;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+}
+
+.iconVisible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.iconHidden {
+  opacity: 0;
+  transform: scale(0.5);
+}
diff --git a/docs/app/(home)/components/Button/Button.tsx b/docs/app/(home)/components/Button/Button.tsx
new file mode 100644
index 000000000..18779c396
--- /dev/null
+++ b/docs/app/(home)/components/Button/Button.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import { Check, Copy } from "lucide-react";
+import Link from "next/link";
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ButtonHTMLAttributes,
+  type ReactNode,
+} from "react";
+import styles from "./Button.module.css";
+
+type ButtonType = ButtonHTMLAttributes<HTMLButtonElement>["type"];
+const COPY_FEEDBACK_MS = 3000;
+
+function CopyIcon({ color = "white" }: { color?: string }) {
+  return <Copy className={styles.copyIcon} color={color} strokeWidth={1.75} />;
+}
+
+function CheckIcon({ color = "white" }: { color?: string }) {
+  return <Check className={styles.copyIcon} color={color} strokeWidth={2} />;
+}
+
+interface CopyStatusIconProps {
+  copied: boolean;
+  className?: string;
+  frameClassName?: string;
+  color?: string;
+}
+
+function CopyStatusIcon({
+  copied,
+  className = "",
+  frameClassName = "",
+  color = "white",
+}: CopyStatusIconProps) {
+  return (
+    <span className={[styles.copyIconFrame, frameClassName].filter(Boolean).join(" ")}>
+      <span
+        className={[
+          styles.iconLayer,
+          copied ? styles.iconHidden : styles.iconVisible,
+          className,
+        ].filter(Boolean).join(" ")}
+      >
+        <CopyIcon color={color} />
+      </span>
+      <span
+        className={[
+          styles.iconLayer,
+          copied ? styles.iconVisible : styles.iconHidden,
+          className,
+        ].filter(Boolean).join(" ")}
+      >
+        <CheckIcon color={color} />
+      </span>
+    </span>
+  );
+}
+
+interface ClipboardCommandButtonProps {
+  command: string;
+  children: ReactNode;
+  className?: string;
+  iconContainerClassName?: string;
+  iconFrameClassName?: string;
+  iconPosition?: "start" | "end";
+  copyIconColor?: string;
+  type?: ButtonType;
+}
+
+export function ClipboardCommandButton({
+  command,
+  children,
+  className = "",
+  iconContainerClassName = "",
+  iconFrameClassName = "",
+  iconPosition = "end",
+  copyIconColor = "white",
+  type = "button",
+}: ClipboardCommandButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (resetTimeoutRef.current) {
+        clearTimeout(resetTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleClick = async () => {
+    if (copied) return;
+
+    try {
+      await navigator.clipboard.writeText(command);
+      setCopied(true);
+      if (resetTimeoutRef.current) {
+        clearTimeout(resetTimeoutRef.current);
+      }
+      resetTimeoutRef.current = setTimeout(() => {
+        setCopied(false);
+      }, COPY_FEEDBACK_MS);
+    } catch {
+      setCopied(false);
+    }
+  };
+
+  const icon = (
+    <span className={iconContainerClassName || undefined}>
+      <CopyStatusIcon
+        copied={copied}
+        frameClassName={iconFrameClassName}
+        color={copyIconColor}
+      />
+    </span>
+  );
+
+  return (
+    <button
+      type={type}
+      onClick={handleClick}
+      className={[styles.clipboardCommandButton, className].filter(Boolean).join(" ")}
+    >
+      {iconPosition === "start" ? icon : null}
+      {children}
+      {iconPosition === "end" ? icon : null}
+    </button>
+  );
+}
+
+interface PillLinkProps {
+  href: string;
+  children: ReactNode;
+  className?: string;
+  arrow?: ReactNode;
+  external?: boolean;
+}
+
+export function PillLink({
+  href,
+  children,
+  className = "",
+  arrow,
+  external = false,
+}: PillLinkProps) {
+  const content = (
+    <>
+      {children}
+      {arrow}
+    </>
+  );
+
+  if (external) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={className}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <Link href={href} className={className}>
+      {content}
+    </Link>
+  );
+}
diff --git a/docs/app/(home)/components/FadeInSection/FadeInSection.module.css b/docs/app/(home)/components/FadeInSection/FadeInSection.module.css
deleted file mode 100644
index 88de80d08..000000000
--- a/docs/app/(home)/components/FadeInSection/FadeInSection.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.root {
-  width: 100%;
-}
diff --git a/docs/app/(home)/components/FadeInSection/FadeInSection.tsx b/docs/app/(home)/components/FadeInSection/FadeInSection.tsx
deleted file mode 100644
index adf65cea7..000000000
--- a/docs/app/(home)/components/FadeInSection/FadeInSection.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import styles from "./FadeInSection.module.css";
-
-interface FadeInSectionProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export function FadeInSection({ children, className = "" }: FadeInSectionProps) {
-  return (
-    <div className={`${styles.root} ${className}`.trim()}>
-      {children}
-    </div>
-  );
-}
diff --git a/docs/app/(home)/components/FeatureList/FeatureList.module.css b/docs/app/(home)/components/FeatureList/FeatureList.module.css
new file mode 100644
index 000000000..88e8ed1e4
--- /dev/null
+++ b/docs/app/(home)/components/FeatureList/FeatureList.module.css
@@ -0,0 +1,108 @@
+.featureIcon {
+  display: flex;
+  height: 2.25rem;
+  width: 2.25rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--home-border-default);
+  border-radius: var(--home-radius-pill);
+  background: var(--home-color-surface);
+}
+
+.featureIconSvg {
+  height: 18px;
+  width: 18px;
+}
+
+.desktopList {
+  display: none;
+}
+
+.mobileList {
+  display: block;
+}
+
+.desktopRow {
+  display: flex;
+  height: 72px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.desktopRowLead {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.desktopTitle,
+.desktopDescription {
+  font-family: "Inter Display", sans-serif;
+  font-size: 22px;
+  line-height: 1.4;
+}
+
+.desktopTitle {
+  color: #000;
+}
+
+.desktopDescription {
+  text-align: right;
+  color: var(--home-color-text-muted);
+}
+
+.mobileRow {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding-block: 1rem;
+}
+
+.mobileCopy {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.mobileTitle,
+.mobileDescription {
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+}
+
+.mobileTitle {
+  font-weight: 500;
+  line-height: 1.25;
+  color: #000;
+}
+
+.mobileDescription {
+  line-height: 1.4;
+  color: var(--home-color-text-muted);
+}
+
+.divider {
+  height: 1px;
+  width: 100vw;
+  margin-left: calc(-50vw + 50%);
+}
+
+.desktopDivider {
+  background: var(--home-border-default);
+}
+
+.mobileDivider {
+  background: var(--home-color-surface-muted);
+}
+
+@media (min-width: 1024px) {
+  .desktopList {
+    display: block;
+  }
+
+  .mobileList {
+    display: none;
+  }
+}
diff --git a/docs/app/(home)/components/FeatureList/FeatureList.tsx b/docs/app/(home)/components/FeatureList/FeatureList.tsx
new file mode 100644
index 000000000..5040a3079
--- /dev/null
+++ b/docs/app/(home)/components/FeatureList/FeatureList.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import styles from "./FeatureList.module.css";
+
+export interface FeatureListItem {
+  title: string;
+  description: string;
+  iconPath: string;
+}
+
+interface FeatureListProps {
+  items: FeatureListItem[];
+}
+
+function FeatureIcon({ path, index }: { path: string; index: number }) {
+  const clipId = `clip_feat_${index}`;
+
+  return (
+    <div className={styles.featureIcon}>
+      <svg className={styles.featureIconSvg} fill="none" viewBox="0 0 18 18">
+        <g clipPath={`url(#${clipId})`}>
+          <path d={path} fill="black" />
+        </g>
+        <defs>
+          <clipPath id={clipId}>
+            <rect fill="white" height="18" width="18" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function DesktopFeatureRow({
+  item,
+  index,
+}: {
+  item: FeatureListItem;
+  index: number;
+}) {
+  return (
+    <div className={styles.desktopRow}>
+      <div className={styles.desktopRowLead}>
+        <div>
+          <FeatureIcon path={item.iconPath} index={index} />
+        </div>
+        <span className={styles.desktopTitle}>{item.title}</span>
+      </div>
+      <span className={styles.desktopDescription}>{item.description}</span>
+    </div>
+  );
+}
+
+function MobileFeatureRow({
+  item,
+  index,
+  iconIndexOffset,
+}: {
+  item: FeatureListItem;
+  index: number;
+  iconIndexOffset: number;
+}) {
+  return (
+    <div className={styles.mobileRow}>
+      <div className={styles.mobileCopy}>
+        <span className={styles.mobileTitle}>{item.title}</span>
+        <span className={styles.mobileDescription}>{item.description}</span>
+      </div>
+      <div>
+        <FeatureIcon path={item.iconPath} index={index + iconIndexOffset} />
+      </div>
+    </div>
+  );
+}
+
+function Divider({ className }: { className: string }) {
+  return <div className={`${styles.divider} ${className}`.trim()} />;
+}
+
+export function FeatureList({ items }: FeatureListProps) {
+  const lastItemIndex = items.length - 1;
+
+  return (
+    <>
+      <div className={styles.desktopList}>
+        {items.map((item, index) => (
+          <div key={item.title}>
+            <DesktopFeatureRow item={item} index={index} />
+            {index < lastItemIndex && <Divider className={styles.desktopDivider} />}
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.mobileList}>
+        {items.map((item, index) => (
+          <div key={item.title}>
+            <MobileFeatureRow item={item} index={index} iconIndexOffset={items.length} />
+            {index < lastItemIndex && <Divider className={styles.mobileDivider} />}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/docs/app/(home)/components/FeaturesSection/FeaturesSection.module.css b/docs/app/(home)/components/FeaturesSection/FeaturesSection.module.css
deleted file mode 100644
index 8dac57417..000000000
--- a/docs/app/(home)/components/FeaturesSection/FeaturesSection.module.css
+++ /dev/null
@@ -1,191 +0,0 @@
-.section {
-  width: 100%;
-  padding-inline: 1.25rem;
-}
-
-.container {
-  max-width: 75rem;
-  margin-inline: auto;
-}
-
-.featureIcon {
-  display: flex;
-  height: 2.25rem;
-  width: 2.25rem;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgb(0 0 0 / 10%);
-  border-radius: 999px;
-  background: #fff;
-}
-
-.featureIconSvg {
-  height: 18px;
-  width: 18px;
-}
-
-.desktopList {
-  display: none;
-}
-
-.mobileList {
-  display: block;
-}
-
-.desktopRow {
-  display: flex;
-  height: 72px;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.desktopRowLead {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.desktopTitle,
-.desktopDescription {
-  font-family: "Inter Display", sans-serif;
-  font-size: 22px;
-  line-height: 1.4;
-}
-
-.desktopTitle {
-  color: #000;
-}
-
-.desktopDescription {
-  text-align: right;
-  color: rgb(0 0 0 / 40%);
-}
-
-.mobileRow {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding-block: 1rem;
-}
-
-.mobileCopy {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.mobileTitle,
-.mobileDescription {
-  font-family: "Inter", sans-serif;
-  font-size: 16px;
-}
-
-.mobileTitle {
-  font-weight: 500;
-  line-height: 1.25;
-  color: #000;
-}
-
-.mobileDescription {
-  line-height: 1.4;
-  color: rgb(0 0 0 / 40%);
-}
-
-.divider {
-  height: 1px;
-  width: 100vw;
-  margin-left: calc(-50vw + 50%);
-}
-
-.desktopDivider {
-  background: rgb(0 0 0 / 10%);
-}
-
-.mobileDivider {
-  background: rgb(0 0 0 / 8%);
-}
-
-.ctaWrap {
-  display: flex;
-  justify-content: center;
-  margin-top: 2.5rem;
-}
-
-.ctaLink {
-  width: 100%;
-  max-width: 280px;
-  text-decoration: none;
-}
-
-.ctaButton {
-  display: flex;
-  height: 3rem;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  padding-inline: 1rem;
-  border: 1.25px solid rgb(0 0 0 / 8%);
-  border-radius: 999px;
-  background: #fff;
-  box-shadow: var(--features-cta-shadow, none);
-  color: #000;
-  cursor: pointer;
-  transition:
-    transform 0.2s ease,
-    box-shadow 0.2s ease;
-  font-family: "Inter", sans-serif;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 1.5rem;
-}
-
-.ctaButton:hover {
-  transform: scale(0.99);
-  box-shadow: none;
-}
-
-.mobileLabel {
-  display: inline;
-}
-
-.desktopLabel {
-  display: none;
-}
-
-@media (min-width: 1024px) {
-  .section {
-    padding-inline: 2rem;
-  }
-
-  .desktopList {
-    display: block;
-  }
-
-  .mobileList {
-    display: none;
-  }
-
-  .ctaWrap {
-    margin-top: 5rem;
-  }
-
-  .ctaLink {
-    width: auto;
-    max-width: none;
-  }
-
-  .ctaButton {
-    width: auto;
-    font-size: 18px;
-  }
-
-  .mobileLabel {
-    display: none;
-  }
-
-  .desktopLabel {
-    display: inline;
-  }
-}
diff --git a/docs/app/(home)/components/FeaturesSection/FeaturesSection.tsx b/docs/app/(home)/components/FeaturesSection/FeaturesSection.tsx
deleted file mode 100644
index c64d53872..000000000
--- a/docs/app/(home)/components/FeaturesSection/FeaturesSection.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-"use client";
-
-import svgPaths from "@/imports/svg-urruvoh2be";
-import Link from "next/link";
-import type { CSSProperties } from "react";
-import { BUTTON_SHADOW } from "../shared/shared";
-import styles from "./FeaturesSection.module.css";
-
-// ---------------------------------------------------------------------------
-// Data
-// ---------------------------------------------------------------------------
-
-interface Feature {
-  title: string;
-  description: string;
-  iconPath: string;
-}
-
-const FEATURES: Feature[] = [
-  {
-    title: "Performance Optimized",
-    description: "Up to 3.0x faster rendering than json-render",
-    iconPath: svgPaths.p7658f00,
-  },
-  {
-    title: "Token efficient",
-    description: "Up to 67.1% lesser tokens than json-render",
-    iconPath: svgPaths.p2a8ddd80,
-  },
-  {
-    title: "Native Types",
-    description: "Performant and memory safe",
-    iconPath: svgPaths.p10e86100,
-  },
-  {
-    title: "Works across platforms",
-    description: "JS Runtime. Native support for iOS & Android coming soon",
-    iconPath: svgPaths.p2cbb5d00,
-  },
-  {
-    title: "Streaming Native",
-    description: "Streaming and partial responses",
-    iconPath: svgPaths.p33780400,
-  },
-  {
-    title: "Interactive",
-    description: "Handles inputs and interactive flows",
-    iconPath: svgPaths.p17c7f700,
-  },
-  {
-    title: "Safe by Default",
-    description: "No arbitrary code execution",
-    iconPath: svgPaths.p16eec200,
-  },
-];
-
-const LAST_FEATURE_INDEX = FEATURES.length - 1;
-const FEATURES_CTA_STYLE = {
-  "--features-cta-shadow": BUTTON_SHADOW,
-} as CSSProperties;
-
-// ---------------------------------------------------------------------------
-// Sub-components
-// ---------------------------------------------------------------------------
-
-function FeatureIcon({ path, index }: { path: string; index: number }) {
-  const clipId = `clip_feat_${index}`;
-  return (
-    <div className={styles.featureIcon}>
-      <svg className={styles.featureIconSvg} fill="none" viewBox="0 0 18 18">
-        <g clipPath={`url(#${clipId})`}>
-          <path d={path} fill="black" />
-        </g>
-        <defs>
-          <clipPath id={clipId}>
-            <rect fill="white" height="18" width="18" />
-          </clipPath>
-        </defs>
-      </svg>
-    </div>
-  );
-}
-
-function DesktopFeatureRow({ feature, index }: { feature: Feature; index: number }) {
-  return (
-    <div className={styles.desktopRow}>
-      <div className={styles.desktopRowLead}>
-        <div>
-          <FeatureIcon path={feature.iconPath} index={index} />
-        </div>
-        <span className={styles.desktopTitle}>
-          {feature.title}
-        </span>
-      </div>
-      <span className={styles.desktopDescription}>
-        {feature.description}
-      </span>
-    </div>
-  );
-}
-
-function MobileFeatureRow({ feature, index }: { feature: Feature; index: number }) {
-  return (
-    <div className={styles.mobileRow}>
-      <div className={styles.mobileCopy}>
-        <span className={styles.mobileTitle}>
-          {feature.title}
-        </span>
-        <span className={styles.mobileDescription}>
-          {feature.description}
-        </span>
-      </div>
-      <div>
-        <FeatureIcon path={feature.iconPath} index={index + FEATURES.length} />
-      </div>
-    </div>
-  );
-}
-
-function Divider({ className = "" }: { className?: string }) {
-  return <div className={`${styles.divider} ${className}`} />;
-}
-
-// ---------------------------------------------------------------------------
-// Main component
-// ---------------------------------------------------------------------------
-
-export function FeaturesSection() {
-  return (
-    <div className={styles.section}>
-      <div className={styles.container}>
-        {/* Desktop */}
-        <div className={styles.desktopList}>
-          {FEATURES.map((f, i) => (
-            <div key={f.title}>
-              <DesktopFeatureRow feature={f} index={i} />
-              {i < LAST_FEATURE_INDEX && <Divider className={styles.desktopDivider} />}
-            </div>
-          ))}
-        </div>
-
-        {/* Mobile */}
-        <div className={styles.mobileList}>
-          {FEATURES.map((f, i) => (
-            <div key={f.title}>
-              <MobileFeatureRow feature={f} index={i} />
-              {i < LAST_FEATURE_INDEX && <Divider className={styles.mobileDivider} />}
-            </div>
-          ))}
-        </div>
-
-        {/* CTA button */}
-        <div className={styles.ctaWrap}>
-          <Link href="/docs/openui-lang/benchmarks" className={styles.ctaLink}>
-            <span className={styles.ctaButton} style={FEATURES_CTA_STYLE}>
-              <span className={styles.mobileLabel}>Detailed comparison</span>
-              <span className={styles.desktopLabel}>View Comparison</span>
-            </span>
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/docs/app/(home)/components/GradientDivider/GradientDivider.module.css b/docs/app/(home)/components/GradientDivider/GradientDivider.module.css
deleted file mode 100644
index 73efe5a11..000000000
--- a/docs/app/(home)/components/GradientDivider/GradientDivider.module.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.divider {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  gap: 2px;
-  transform: rotate(180deg);
-}
-
-.bar {
-  height: var(--bar-h-mobile);
-  width: 100%;
-  flex-shrink: 0;
-  background: rgb(0 0 0 / 4%);
-}
-
-@media (min-width: 1024px) {
-  .divider {
-    gap: 6px;
-  }
-
-  .bar {
-    height: var(--bar-h);
-  }
-}
diff --git a/docs/app/(home)/components/GradientDivider/GradientDivider.tsx b/docs/app/(home)/components/GradientDivider/GradientDivider.tsx
deleted file mode 100644
index b61b4b41a..000000000
--- a/docs/app/(home)/components/GradientDivider/GradientDivider.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { CSSProperties } from "react";
-import styles from "./GradientDivider.module.css";
-
-const BAR_HEIGHTS = [
-  60, 48, 32, 20.942, 16.754, 12.565, 10.471, 8.377, 6.283, 4.188, 3.141, 2.094, 1.047,
-];
-
-export function GradientDivider({ direction = "down" }: { direction?: "down" | "up" }) {
-  const bars = direction === "up" ? [...BAR_HEIGHTS].reverse() : BAR_HEIGHTS;
-
-  return (
-    <div className={styles.divider}>
-      {bars.map((h) => (
-        <div
-          key={h}
-          className={styles.bar}
-          style={{ "--bar-h-mobile": `${h / 2}px`, "--bar-h": `${h}px` } as CSSProperties}
-        />
-      ))}
-    </div>
-  );
-}
diff --git a/docs/app/(home)/components/StepsSection/StepsSection.module.css b/docs/app/(home)/components/StepsAccordion/StepsAccordion.module.css
similarity index 82%
rename from docs/app/(home)/components/StepsSection/StepsSection.module.css
rename to docs/app/(home)/components/StepsAccordion/StepsAccordion.module.css
index 43a9021d5..e73b176b8 100644
--- a/docs/app/(home)/components/StepsSection/StepsSection.module.css
+++ b/docs/app/(home)/components/StepsAccordion/StepsAccordion.module.css
@@ -1,20 +1,13 @@
-.section {
-  width: 100%;
-  padding-inline: 1.25rem;
-}
-
-.container {
-  max-width: 75rem;
-  margin-inline: auto;
-}
-
 .card {
+  border: 1px solid var(--home-border-subtle);
   border-radius: 18px;
-  background: #fff;
+  background: var(--home-color-surface);
+  box-shadow: var(--home-shadow-elevated);
 }
 
 .desktopSteps {
   display: none;
+  height: 733px;
   overflow: hidden;
 }
 
@@ -29,18 +22,18 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  border: 1px solid rgb(0 0 0 / 10%);
-  border-radius: 999px;
+  border: 1px solid var(--home-border-default);
+  border-radius: var(--home-radius-pill);
 }
 
 .stepBadgeActive {
-  background: #000;
+  background: var(--home-color-surface-inverse);
   color: #fff;
 }
 
 .stepBadgeInactive {
-  background: #fff;
-  color: #000;
+  background: var(--home-color-surface);
+  color: var(--home-color-text-primary);
 }
 
 .stepBadgeLabel {
@@ -53,7 +46,7 @@
 .divider {
   height: 1px;
   width: 100%;
-  background: rgb(0 0 0 / 8%);
+  background: var(--home-color-surface-muted);
 }
 
 .stepDetails {
@@ -66,7 +59,7 @@
   font-family: "Inter Display", sans-serif;
   font-size: 18px;
   line-height: 1.2;
-  color: rgb(0 0 0 / 40%);
+  color: var(--home-color-text-muted);
 }
 
 .stepDetailsTitle {
@@ -102,6 +95,9 @@
 .mobileIllustrationScale {
   position: absolute;
   inset: 0;
+  width: 610px;
+  height: 432px;
+  transform: scale(var(--mobile-illustration-scale, 1));
   transform-origin: top left;
 }
 
@@ -126,6 +122,7 @@
   flex: 1;
   flex-direction: column;
   gap: 1.5rem;
+  padding-right: 60px;
 }
 
 .desktopStepTitle {
@@ -188,10 +185,6 @@
 }
 
 @media (min-width: 1024px) {
-  .section {
-    padding-inline: 2rem;
-  }
-
   .desktopSteps {
     display: block;
   }
diff --git a/docs/app/(home)/components/StepsAccordion/StepsAccordion.tsx b/docs/app/(home)/components/StepsAccordion/StepsAccordion.tsx
new file mode 100644
index 000000000..8faed721c
--- /dev/null
+++ b/docs/app/(home)/components/StepsAccordion/StepsAccordion.tsx
@@ -0,0 +1,231 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, type ComponentType } from "react";
+import { AccordionItem, AccordionPanel } from "../Accordion/Accordion";
+import styles from "./StepsAccordion.module.css";
+
+export interface StepsAccordionItem {
+  number: number;
+  title: string;
+  description: string;
+  detailsTitle?: string;
+  details: string[];
+  Illustration: ComponentType;
+}
+
+interface StepsAccordionProps {
+  steps: StepsAccordionItem[];
+}
+
+const EXPANDED_HEIGHT = 480;
+const COLLAPSED_HEIGHT = 84;
+const ACTIVE_STEP_SHADOW = "0px 1px 3px rgba(22,34,51,0.08), 0px 10px 20px rgba(22,34,51,0.03)";
+
+const TRANSITION = {
+  expand: { duration: 0.5, ease: [0.4, 0, 0.2, 1] as const },
+  content: { duration: 0.3, delay: 0.15 },
+  preview: { duration: 0.4, delay: 0.1 },
+  mobile: { duration: 0.35, ease: [0.4, 0, 0.2, 1] as const },
+} as const;
+
+function StepBadge({ num, isActive }: { num: number; isActive: boolean }) {
+  return (
+    <div
+      className={`${styles.stepBadge} ${isActive ? styles.stepBadgeActive : styles.stepBadgeInactive}`}
+    >
+      <span className={styles.stepBadgeLabel}>{num}</span>
+    </div>
+  );
+}
+
+function Divider() {
+  return <div className={styles.divider} />;
+}
+
+function StepDetails({ step, hideDetails }: { step: StepsAccordionItem; hideDetails?: boolean }) {
+  return (
+    <div className={styles.stepDetails}>
+      <p className={styles.stepDescription}>{step.description}</p>
+      {!hideDetails && step.details.length > 0 && (
+        <div className={styles.stepDescription}>
+          {step.detailsTitle && <p className={styles.stepDetailsTitle}>{step.detailsTitle}</p>}
+          <ul className={styles.stepDetailsList}>
+            {step.details.map((line) => (
+              <li key={line}>{line}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StepIllustration({ step, mobile }: { step: StepsAccordionItem; mobile?: boolean }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const scaleRef = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState(1);
+
+  useEffect(() => {
+    if (!mobile || !containerRef.current) return;
+
+    const updateScale = () => {
+      if (containerRef.current) {
+        setScale(containerRef.current.offsetWidth / 610);
+      }
+    };
+
+    updateScale();
+    const observer = new ResizeObserver(updateScale);
+    observer.observe(containerRef.current);
+
+    return () => observer.disconnect();
+  }, [mobile]);
+
+  useEffect(() => {
+    if (!mobile || !scaleRef.current) return;
+    scaleRef.current.style.setProperty("--mobile-illustration-scale", String(scale));
+  }, [mobile, scale]);
+
+  const Illustration = step.Illustration;
+
+  if (!Illustration) {
+    return <div className={styles.illustrationFallback} />;
+  }
+
+  if (mobile) {
+    return (
+      <div ref={containerRef} className={styles.mobileIllustrationFrame}>
+        <div ref={scaleRef} className={styles.mobileIllustrationScale}>
+          <Illustration />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.desktopIllustrationFrame}>
+      <Illustration />
+    </div>
+  );
+}
+
+function DesktopStep({
+  step,
+  isActive,
+  onActivate,
+}: {
+  step: StepsAccordionItem;
+  isActive: boolean;
+  onActivate: () => void;
+}) {
+  return (
+    <AccordionItem
+      open={isActive}
+      expandedHeight={EXPANDED_HEIGHT}
+      collapsedHeight={COLLAPSED_HEIGHT}
+      className={styles.desktopStep}
+      activeShadow={ACTIVE_STEP_SHADOW}
+      transition={TRANSITION.expand}
+      onActivate={onActivate}
+    >
+      <div className={styles.desktopStepLead}>
+        <StepBadge num={step.number} isActive={isActive} />
+
+        <div className={styles.desktopStepCopy}>
+          <h3 className={styles.desktopStepTitle}>{step.title}</h3>
+
+          <AccordionPanel
+            open={isActive}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 10 }}
+            transition={TRANSITION.content}
+          >
+            <StepDetails step={step} />
+          </AccordionPanel>
+        </div>
+      </div>
+
+      <AccordionPanel
+        open={isActive}
+        className={styles.desktopStepPreview}
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        exit={{ opacity: 0, scale: 0.95 }}
+        transition={TRANSITION.preview}
+      >
+        <StepIllustration step={step} />
+      </AccordionPanel>
+    </AccordionItem>
+  );
+}
+
+function MobileStep({
+  step,
+  isActive,
+  onToggle,
+}: {
+  step: StepsAccordionItem;
+  isActive: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <div>
+      <button className={styles.mobileStepButton} onClick={onToggle}>
+        <StepBadge num={step.number} isActive={isActive} />
+        <span className={styles.mobileStepTitle}>{step.title}</span>
+      </button>
+
+      <AccordionPanel
+        open={isActive}
+        className={styles.mobileStepPanel}
+        transition={TRANSITION.mobile}
+      >
+        <div className={styles.mobileStepContent}>
+          <div className={styles.mobileStepDetails}>
+            <StepDetails step={step} hideDetails />
+          </div>
+          <div className={styles.mobileStepIllustrationWrap}>
+            <StepIllustration step={step} mobile />
+          </div>
+        </div>
+      </AccordionPanel>
+    </div>
+  );
+}
+
+export function StepsAccordion({ steps }: StepsAccordionProps) {
+  const [activeStep, setActiveStep] = useState(1);
+  const lastStepIndex = steps.length - 1;
+  const activate = useCallback((stepNumber: number) => setActiveStep(stepNumber), []);
+
+  return (
+    <div className={styles.card}>
+      <div className={styles.desktopSteps}>
+        {steps.map((step, index) => (
+          <div key={step.number}>
+            <DesktopStep
+              step={step}
+              isActive={activeStep === step.number}
+              onActivate={() => activate(step.number)}
+            />
+            {index < lastStepIndex && <Divider />}
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.mobileSteps}>
+        {steps.map((step, index) => (
+          <div key={step.number}>
+            <MobileStep
+              step={step}
+              isActive={activeStep === step.number}
+              onToggle={() => activate(step.number)}
+            />
+            {index < lastStepIndex && <Divider />}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/docs/app/(home)/components/StepsSection/StepsSection.tsx b/docs/app/(home)/components/StepsSection/StepsSection.tsx
deleted file mode 100644
index c21a70d9c..000000000
--- a/docs/app/(home)/components/StepsSection/StepsSection.tsx
+++ /dev/null
@@ -1,326 +0,0 @@
-"use client";
-
-import LlmRespondsInOpenUiLang from "@/imports/LlmRespondsInOpenUiLang";
-import OpenUiGeneratesSchema from "@/imports/OpenUiGeneratesSchema";
-import OpenUiRendererRendersIt from "@/imports/OpenUiRendererRendersIt-43-427";
-import YouRegisterComponents from "@/imports/YouRegisterComponents-43-365";
-import { AnimatePresence, motion } from "motion/react";
-import { useCallback, useEffect, useRef, useState, type ComponentType } from "react";
-import styles from "./StepsSection.module.css";
-
-// ---------------------------------------------------------------------------
-// Types & data
-// ---------------------------------------------------------------------------
-
-interface Step {
-  number: number;
-  title: string;
-  description: string;
-  detailsTitle?: string;
-  details: string[];
-}
-
-const STEPS: Step[] = [
-  {
-    number: 1,
-    title: "You define your library",
-    description: "Register components with defineComponent and createLibrary.",
-    details: [],
-  },
-  {
-    number: 2,
-    title: "OpenUI generates system prompt",
-    description:
-      "Generate a system prompt from your library with the OpenUI CLI or library.prompt() and send it to the LLM.",
-    details: [],
-  },
-  {
-    number: 3,
-    title: "LLM responds in OpenUI Lang",
-    description: "The model returns token-efficient, line-oriented OpenUI Lang (not markdown).",
-    details: [],
-  },
-  {
-    number: 4,
-    title: "Renderer parses and renders UI",
-    description: "Renderer parses the output and renders interactive UI in real time.",
-    details: [],
-  },
-];
-
-/** Maps step number → Figma illustration component */
-const STEP_ILLUSTRATIONS: Record<number, ComponentType> = {
-  1: YouRegisterComponents,
-  2: OpenUiGeneratesSchema,
-  3: LlmRespondsInOpenUiLang,
-  4: OpenUiRendererRendersIt,
-};
-
-// ---------------------------------------------------------------------------
-// Layout constants
-// ---------------------------------------------------------------------------
-
-const EXPANDED_HEIGHT = 480;
-const COLLAPSED_HEIGHT = 84;
-const LAST_STEP_INDEX = STEPS.length - 1;
-const TOTAL_DESKTOP_HEIGHT = EXPANDED_HEIGHT + LAST_STEP_INDEX * COLLAPSED_HEIGHT + LAST_STEP_INDEX;
-
-const CARD_SHADOW = "0px 1px 3px 0px rgba(22,34,51,0.08), 0px 12px 24px 0px rgba(22,34,51,0.04)";
-const CARD_BORDER = "0.391px solid rgba(0,0,0,0.08)";
-
-// ---------------------------------------------------------------------------
-// Animation presets
-// ---------------------------------------------------------------------------
-
-const TRANSITION = {
-  expand: { duration: 0.5, ease: [0.4, 0, 0.2, 1] as const },
-  content: { duration: 0.3, delay: 0.15 },
-  preview: { duration: 0.4, delay: 0.1 },
-  mobile: { duration: 0.35, ease: [0.4, 0, 0.2, 1] as const },
-} as const;
-
-// ---------------------------------------------------------------------------
-// Shared sub-components
-// ---------------------------------------------------------------------------
-
-function StepBadge({ num, isActive }: { num: number; isActive: boolean }) {
-  return (
-    <div
-      className={`${styles.stepBadge} ${isActive ? styles.stepBadgeActive : styles.stepBadgeInactive}`}
-    >
-      <span className={styles.stepBadgeLabel}>
-        {num}
-      </span>
-    </div>
-  );
-}
-
-function Divider() {
-  return <div className={styles.divider} />;
-}
-
-function StepDetails({ step, hideDetails }: { step: Step; hideDetails?: boolean }) {
-  return (
-    <div className={styles.stepDetails}>
-      <p className={styles.stepDescription}>
-        {step.description}
-      </p>
-      {!hideDetails && step.details.length > 0 && (
-        <div className={styles.stepDescription}>
-          {step.detailsTitle && <p className={styles.stepDetailsTitle}>{step.detailsTitle}</p>}
-          <ul className={styles.stepDetailsList}>
-            {step.details.map((line) => (
-              <li key={line}>{line}</li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function StepIllustration({ stepNumber, mobile }: { stepNumber: number; mobile?: boolean }) {
-  const Illustration = STEP_ILLUSTRATIONS[stepNumber];
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [scale, setScale] = useState(1);
-
-  useEffect(() => {
-    if (!mobile || !containerRef.current) return;
-    const updateScale = () => {
-      if (containerRef.current) {
-        setScale(containerRef.current.offsetWidth / 610);
-      }
-    };
-    updateScale();
-    const ro = new ResizeObserver(updateScale);
-    ro.observe(containerRef.current);
-    return () => ro.disconnect();
-  }, [mobile]);
-
-  if (!Illustration) return <div className={styles.illustrationFallback} />;
-
-  if (mobile) {
-    return (
-      <div
-        ref={containerRef}
-        className={styles.mobileIllustrationFrame}
-      >
-        <div
-          className={styles.mobileIllustrationScale}
-          style={{ width: 610, height: 432, transform: `scale(${scale})` }}
-        >
-          <Illustration />
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={styles.desktopIllustrationFrame}>
-      <Illustration />
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Desktop step row
-// ---------------------------------------------------------------------------
-
-function DesktopStep({
-  step,
-  isActive,
-  onActivate,
-}: {
-  step: Step;
-  isActive: boolean;
-  onActivate: () => void;
-}) {
-  return (
-    <motion.div
-      className={styles.desktopStep}
-      animate={{
-        height: isActive ? EXPANDED_HEIGHT : COLLAPSED_HEIGHT,
-        boxShadow: isActive
-          ? "0px 1px 3px rgba(22,34,51,0.08), 0px 10px 20px rgba(22,34,51,0.03)"
-          : "0px 0px 0px rgba(0,0,0,0)",
-        zIndex: isActive ? 2 : 1,
-      }}
-      transition={TRANSITION.expand}
-      onClick={onActivate}
-      onMouseEnter={onActivate}
-    >
-      {/* Left: number + text */}
-      <div className={styles.desktopStepLead}>
-        <StepBadge num={step.number} isActive={isActive} />
-
-        <div className={styles.desktopStepCopy}>
-          <h3 className={styles.desktopStepTitle}>
-            {step.title}
-          </h3>
-
-          <AnimatePresence>
-            {isActive && (
-              <motion.div
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 10 }}
-                transition={TRANSITION.content}
-              >
-                <StepDetails step={step} />
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </div>
-
-      {/* Right: illustration preview */}
-      <AnimatePresence>
-        {isActive && (
-          <motion.div
-            className={styles.desktopStepPreview}
-            initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.95 }}
-            transition={TRANSITION.preview}
-          >
-            <StepIllustration stepNumber={step.number} />
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </motion.div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Mobile step row
-// ---------------------------------------------------------------------------
-
-function MobileStep({
-  step,
-  isActive,
-  onToggle,
-}: {
-  step: Step;
-  isActive: boolean;
-  onToggle: () => void;
-}) {
-  return (
-    <div>
-      <button className={styles.mobileStepButton} onClick={onToggle}>
-        <StepBadge num={step.number} isActive={isActive} />
-        <span className={styles.mobileStepTitle}>
-          {step.title}
-        </span>
-      </button>
-
-      <AnimatePresence>
-        {isActive && (
-          <motion.div
-            className={styles.mobileStepPanel}
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: "auto", opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={TRANSITION.mobile}
-          >
-            <div className={styles.mobileStepContent}>
-              <div className={styles.mobileStepDetails}>
-                <StepDetails step={step} hideDetails />
-              </div>
-              <div className={styles.mobileStepIllustrationWrap}>
-                <StepIllustration stepNumber={step.number} mobile />
-              </div>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Main component
-// ---------------------------------------------------------------------------
-
-export function StepsSection() {
-  const [activeStep, setActiveStep] = useState(1);
-  const activate = useCallback((n: number) => setActiveStep(n), []);
-
-  return (
-    <section className={styles.section}>
-      <div className={styles.container}>
-        <div
-          className={styles.card}
-          style={{ border: CARD_BORDER, boxShadow: CARD_SHADOW }}
-        >
-          {/* Desktop */}
-          <div className={styles.desktopSteps} style={{ height: TOTAL_DESKTOP_HEIGHT }}>
-            {STEPS.map((step, i) => (
-              <div key={step.number}>
-                <DesktopStep
-                  step={step}
-                  isActive={activeStep === step.number}
-                  onActivate={() => activate(step.number)}
-                />
-                {i < LAST_STEP_INDEX && <Divider />}
-              </div>
-            ))}
-          </div>
-
-          {/* Mobile */}
-          <div className={styles.mobileSteps}>
-            {STEPS.map((step, i) => (
-              <div key={step.number}>
-                <MobileStep
-                  step={step}
-                  isActive={activeStep === step.number}
-                  onToggle={() => activate(step.number)}
-                />
-                {i < LAST_STEP_INDEX && <Divider />}
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/docs/app/(home)/components/shared/shared.module.css b/docs/app/(home)/components/shared/shared.module.css
deleted file mode 100644
index 5a98b10b2..000000000
--- a/docs/app/(home)/components/shared/shared.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.copyIcon {
-  height: 1rem;
-  width: 1rem;
-  flex-shrink: 0;
-}
diff --git a/docs/app/(home)/components/shared/shared.tsx b/docs/app/(home)/components/shared/shared.tsx
deleted file mode 100644
index d7078a5db..000000000
--- a/docs/app/(home)/components/shared/shared.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import svgPaths from "@/imports/svg-urruvoh2be";
-import styles from "./shared.module.css";
-
-// ---------------------------------------------------------------------------
-// Design tokens shared across multiple sections
-// ---------------------------------------------------------------------------
-
-export const BUTTON_SHADOW = "0px 1px 3px 0px rgba(22,34,51,0.08), 0px 12px 24px 0px rgba(22,34,51,0.04)";
-
-// ---------------------------------------------------------------------------
-// Shared components
-// ---------------------------------------------------------------------------
-
-/** Clipboard/copy icon used in CTA buttons across Hero, BuildChat, etc. */
-export function CopyIcon({ color = "white" }: { color?: string }) {
-  return (
-    <svg className={styles.copyIcon} fill="none" viewBox="0 0 14.6667 14.6667">
-      <path
-        d={svgPaths.p102ea840}
-        stroke={color}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.33333"
-      />
-    </svg>
-  );
-}
diff --git a/docs/app/(home)/globals.css b/docs/app/(home)/globals.css
new file mode 100644
index 000000000..4a06e60bc
--- /dev/null
+++ b/docs/app/(home)/globals.css
@@ -0,0 +1,27 @@
+.homeTheme {
+  --home-color-text-primary: #000;
+  --home-color-text-inverse: #fff;
+  --home-color-text-muted: rgb(0 0 0 / 40%);
+  --home-color-text-subtle: rgb(0 0 0 / 30%);
+  --home-color-text-secondary: rgb(0 0 0 / 60%);
+  --home-color-surface: #fff;
+  --home-color-surface-inverse: #000;
+  --home-color-surface-soft: rgb(0 0 0 / 5%);
+  --home-color-surface-muted: rgb(0 0 0 / 8%);
+  --home-color-surface-subtle: rgb(0 0 0 / 4%);
+  --home-border-soft: rgb(0 0 0 / 6%);
+  --home-border-subtle: rgb(0 0 0 / 8%);
+  --home-border-default: rgb(0 0 0 / 10%);
+  --home-shadow-elevated: 0 1px 3px 0 rgb(22 34 51 / 8%), 0 12px 24px 0 rgb(22 34 51 / 4%);
+  --home-shadow-soft-card: 0 1px 2px 0 rgb(22 34 51 / 4%), 0 8px 16px 0 rgb(22 34 51 / 4%);
+  --home-shadow-panel: 0 10px 20px rgb(0 0 0 / 10%);
+  --home-radius-pill: 999px;
+  --home-pill-padding-inline: 1.25rem;
+  --home-section-padding-inline: 1.25rem;
+}
+
+@media (min-width: 1024px) {
+  .homeTheme {
+    --home-section-padding-inline: 2rem;
+  }
+}
diff --git a/docs/app/(home)/layout.tsx b/docs/app/(home)/layout.tsx
index ddf1f5288..9fa9c2bc7 100644
--- a/docs/app/(home)/layout.tsx
+++ b/docs/app/(home)/layout.tsx
@@ -1,10 +1,11 @@
-import { Navbar } from "./components/Navbar/Navbar";
+import "./globals.css";
+import { Navbar } from "./sections/Navbar/Navbar";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <>
+    <div className="homeTheme">
       <Navbar />
       {children}
-    </>
+    </div>
   );
 }
diff --git a/docs/app/(home)/page.module.css b/docs/app/(home)/page.module.css
index dfebcea5d..70fa2ab41 100644
--- a/docs/app/(home)/page.module.css
+++ b/docs/app/(home)/page.module.css
@@ -6,10 +6,6 @@
   background: #fff;
 }
 
-.mascotSection {
-  margin-top: 4rem;
-}
-
 .contentSection {
   position: relative;
   margin-top: 4rem;
@@ -36,7 +32,6 @@
 }
 
 @media (min-width: 1024px) {
-  .mascotSection,
   .contentSection {
     margin-top: 6rem;
   }
diff --git a/docs/app/(home)/page.tsx b/docs/app/(home)/page.tsx
index 394a7f9ed..5c8dc74b7 100644
--- a/docs/app/(home)/page.tsx
+++ b/docs/app/(home)/page.tsx
@@ -1,23 +1,20 @@
-import { BuildChatSection } from "./components/BuildChatSection/BuildChatSection";
-import { CompatibilitySection } from "./components/CompatibilitySection/CompatibilitySection";
-import { FadeInSection } from "./components/FadeInSection/FadeInSection";
-import { FeaturesSection } from "./components/FeaturesSection/FeaturesSection";
-import { Footer } from "./components/Footer/Footer";
-import { GradientDivider } from "./components/GradientDivider/GradientDivider";
-import { HeroSection } from "./components/HeroSection/HeroSection";
-import { PossibilitiesSection } from "./components/PossibilitiesSection/PossibilitiesSection";
-import { ShiroMascot } from "./components/ShiroMascot/ShiroMascot";
-import { StepsSection } from "./components/StepsSection/StepsSection";
-import { UILibrariesSection } from "./components/UILibrariesSection/UILibrariesSection";
+import { BuildChatSection } from "./sections/BuildChatSection/BuildChatSection";
+import { CompatibilitySection } from "./sections/CompatibilitySection/CompatibilitySection";
+import { FeaturesSection } from "./sections/FeaturesSection/FeaturesSection";
+import { Footer } from "./sections/Footer/Footer";
+import { GradientDivider } from "./sections/GradientDivider/GradientDivider";
+import { HeroSection } from "./sections/HeroSection/HeroSection";
+import { PossibilitiesSection } from "./sections/PossibilitiesSection/PossibilitiesSection";
+import { ShiroMascot } from "./sections/ShiroMascot/ShiroMascot";
+import { StepsSection } from "./sections/StepsSection/StepsSection";
+import { UILibrariesSection } from "./sections/UILibrariesSection/UILibrariesSection";
 import styles from "./page.module.css";
 
 export default function HomePage() {
   return (
     <div className={styles.page}>
       <HeroSection />
-      <div className={styles.mascotSection}>
-        <ShiroMascot />
-      </div>
+      <ShiroMascot />
       <StepsSection />
       <div className={styles.contentSection}>
         <GradientDivider direction="down" />
@@ -27,9 +24,7 @@ export default function HomePage() {
             <UILibrariesSection />
             <CompatibilitySection />
           </div>
-          <FadeInSection>
-            <FeaturesSection />
-          </FadeInSection>
+          <FeaturesSection />
           <BuildChatSection />
         </div>
         <GradientDivider direction="up" />
diff --git a/docs/app/(home)/components/BuildChatSection/BuildChatSection.module.css b/docs/app/(home)/sections/BuildChatSection/BuildChatSection.module.css
similarity index 56%
rename from docs/app/(home)/components/BuildChatSection/BuildChatSection.module.css
rename to docs/app/(home)/sections/BuildChatSection/BuildChatSection.module.css
index 6f3767d44..a4f9a3a51 100644
--- a/docs/app/(home)/components/BuildChatSection/BuildChatSection.module.css
+++ b/docs/app/(home)/sections/BuildChatSection/BuildChatSection.module.css
@@ -1,6 +1,6 @@
 .section {
   width: 100%;
-  padding-inline: 1.25rem;
+  padding-inline: var(--home-section-padding-inline);
 }
 
 .container {
@@ -12,15 +12,16 @@
   position: relative;
   overflow: hidden;
   border-radius: 32px;
-  background: #fff;
+  background: var(--home-color-surface);
 }
 
 .overlay {
   position: absolute;
   inset: 0;
   pointer-events: none;
-  border: 1px solid rgb(0 0 0 / 10%);
+  border: 1px solid var(--home-border-default);
   border-radius: 32px;
+  box-shadow: var(--home-shadow-elevated);
 }
 
 .content {
@@ -49,7 +50,7 @@
   font-size: 32px;
   font-weight: 600;
   line-height: 1.2;
-  color: #000;
+  color: var(--home-color-text-primary);
   margin: auto;
   text-align: center;
 }
@@ -62,7 +63,7 @@
   font-family: "Inter Display", sans-serif;
   font-size: 18px;
   line-height: 1.4;
-  color: rgb(0 0 0 / 40%);
+  color: var(--home-color-text-muted);
 }
 
 .ctaWrap {
@@ -81,11 +82,10 @@
   justify-content: center;
   gap: 0.625rem;
   height: 3rem;
-  padding-left: 1.25rem;
-  padding-right: 0.5rem;
+  padding-inline: var(--home-pill-padding-inline);
   border: 0;
   border-radius: 999px;
-  background: #000;
+  background: var(--home-color-surface-inverse);
   cursor: pointer;
   transition: transform 0.2s ease;
 }
@@ -95,85 +95,14 @@
   box-shadow: none;
 }
 
-.ctaDesktopLabel {
-  display: none;
-  white-space: nowrap;
-  font-family: "Inter Display", sans-serif;
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 1.5rem;
-  color: #fff;
-}
-
-.ctaMobileLabel {
+.ctaLabel {
   position: relative;
-  display: block;
-  min-width: 0;
-  flex: 1;
-  overflow: hidden;
-}
-
-.ctaTicker {
-  display: flex;
-  width: max-content;
-  align-items: center;
-  animation: ctaTickerScroll 10s linear infinite;
-}
-
-.ctaTickerText {
   white-space: nowrap;
-  padding-right: 2rem;
-  font-family: "Inter Display", sans-serif;
-  font-size: 18px;
-  font-weight: 500;
+  font-family: var(--font-geist-mono);
+  font-size: 12px;
+  font-weight: 400;
   line-height: 1.5rem;
-  color: #fff;
-}
-
-.iconBadge {
-  display: flex;
-  height: 2rem;
-  width: 2rem;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: rgb(255 255 255 / 15%);
-}
-
-.iconFrame {
-  position: relative;
-  display: flex;
-  height: 1rem;
-  width: 1rem;
-  align-items: center;
-  justify-content: center;
-}
-
-.iconLayer {
-  position: absolute;
-  transition:
-    opacity 0.3s ease,
-    transform 0.3s ease;
-}
-
-.iconVisible {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.iconHidden {
-  opacity: 0;
-  transform: scale(0.5);
-}
-
-@keyframes ctaTickerScroll {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(-50%);
-  }
+  color: var(--home-color-text-inverse);
 }
 
 .mediaColumn {
@@ -189,10 +118,6 @@
 }
 
 @media (min-width: 1024px) {
-  .section {
-    padding-inline: 2rem;
-  }
-
   .content {
     flex-direction: row;
     gap: 0;
@@ -200,16 +125,17 @@
 
   .copyColumn {
     min-height: 0;
-    padding: 16px;
+    padding:16px;
   }
 
+
   .title {
     max-width: 430px;
     font-family: "Inter", sans-serif;
     font-size: 36px;
     font-weight: 600;
     line-height: 1.2;
-    color: #000;
+    color: var(--home-color-text-primary);
     margin: 4px 0 0 4px;
     text-align: left;
   }
@@ -225,12 +151,8 @@
     justify-content: flex-start;
   }
 
-  .ctaDesktopLabel {
-    display: inline;
-  }
-
-  .ctaMobileLabel {
-    display: none;
+  .ctaLabel {
+    font-size: 16px;
   }
 
   .mediaColumn {
diff --git a/docs/app/(home)/sections/BuildChatSection/BuildChatSection.tsx b/docs/app/(home)/sections/BuildChatSection/BuildChatSection.tsx
new file mode 100644
index 000000000..fb3a6f652
--- /dev/null
+++ b/docs/app/(home)/sections/BuildChatSection/BuildChatSection.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import dashboardImg from "@/public/images/home/d67b5e94653944c1d0d4998c6b169c37f98060ad.png";
+import Image from "next/image";
+import { ClipboardCommandButton } from "../../components/Button/Button";
+import styles from "./BuildChatSection.module.css";
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+function SectionTitle() {
+  return <p className={styles.title}>Build a Generative UI chat in minutes</p>;
+}
+
+function CtaButton() {
+  return (
+    <div className={styles.ctaWrap}>
+      <ClipboardCommandButton
+        command="npx @openuidev/cli@latest create"
+        className={styles.ctaButton}
+        iconPosition="start"
+      >
+        <span className={styles.ctaLabel}>
+          npx @openuidev/cli@latest create
+        </span>
+      </ClipboardCommandButton>
+    </div>
+  );
+}
+
+function DashboardIllustration() {
+  return (
+    <Image
+      src={dashboardImg}
+      alt="AI chat dashboard illustration"
+      className={styles.dashboardImage}
+      placeholder="blur"
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export function BuildChatSection() {
+  return (
+    <div className={styles.section}>
+      <div className={styles.container}>
+        <div className={styles.card}>
+          {/* Border + shadow overlay */}
+          <div aria-hidden="true" className={styles.overlay} />
+
+          <div className={styles.content}>
+            {/* Left: text content */}
+            <div className={styles.copyColumn}>
+              <div className={styles.copyStack}>
+                <SectionTitle />
+              </div>
+              <CtaButton />
+            </div>
+
+            {/* Right: illustration */}
+            <div className={styles.mediaColumn}>
+              <DashboardIllustration />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/app/(home)/components/CompatibilitySection/CompatibilitySection.module.css b/docs/app/(home)/sections/CompatibilitySection/CompatibilitySection.module.css
similarity index 65%
rename from docs/app/(home)/components/CompatibilitySection/CompatibilitySection.module.css
rename to docs/app/(home)/sections/CompatibilitySection/CompatibilitySection.module.css
index e087df6a3..ae04d9414 100644
--- a/docs/app/(home)/components/CompatibilitySection/CompatibilitySection.module.css
+++ b/docs/app/(home)/sections/CompatibilitySection/CompatibilitySection.module.css
@@ -1,6 +1,6 @@
 .section {
   width: 100%;
-  padding-inline: 1.25rem;
+  padding-inline: var(--home-section-padding-inline);
 }
 
 .container {
@@ -28,7 +28,7 @@
   line-height: 1;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: rgb(0 0 0 / 30%);
+  color: var(--home-color-text-subtle);
 }
 
 .chips {
@@ -43,9 +43,9 @@
   align-items: center;
   gap: 0.375rem;
   padding: 0.375rem 0.625rem;
-  border: 1px solid rgb(0 0 0 / 8%);
-  border-radius: 999px;
-  background: #fff;
+  border: 1px solid var(--home-border-subtle);
+  border-radius: var(--home-radius-pill);
+  background: var(--home-color-surface);
   box-shadow: 0 2px 8px -2px rgb(22 34 51 / 8%);
 }
 
@@ -60,8 +60,36 @@
   border-radius: 5px;
 }
 
+.badgeWhite {
+  background: var(--home-color-surface);
+}
+
+.badgeBlack {
+  background: var(--home-color-surface-inverse);
+}
+
+.badgeAnthropic {
+  background: #d4a574;
+}
+
+.badgeMistral {
+  background: #ff7000;
+}
+
+.badgeLangChain {
+  background: #1c3144;
+}
+
+.badgeCrewAi {
+  background: #ff4b4b;
+}
+
+.badgeGoogle {
+  background: #4285f4;
+}
+
 .badgeWithBorder {
-  border: 1px solid rgb(0 0 0 / 10%);
+  border: 1px solid var(--home-border-default);
 }
 
 .badgeImage {
@@ -76,7 +104,7 @@
   font-size: 13px;
   line-height: 1;
   white-space: nowrap;
-  color: rgb(0 0 0 / 60%);
+  color: var(--home-color-text-secondary);
 }
 
 .chipLabel {
@@ -85,7 +113,7 @@
 
 .more {
   margin-left: 0.25rem;
-  color: rgb(0 0 0 / 30%);
+  color: var(--home-color-text-subtle);
 }
 
 .divider {
@@ -94,10 +122,6 @@
 }
 
 @media (min-width: 1024px) {
-  .section {
-    padding-inline: 2rem;
-  }
-
   .stack {
     gap: 1.25rem;
   }
diff --git a/docs/app/(home)/components/CompatibilitySection/CompatibilitySection.tsx b/docs/app/(home)/sections/CompatibilitySection/CompatibilitySection.tsx
similarity index 78%
rename from docs/app/(home)/components/CompatibilitySection/CompatibilitySection.tsx
rename to docs/app/(home)/sections/CompatibilitySection/CompatibilitySection.tsx
index b2717d257..571b1c8a4 100644
--- a/docs/app/(home)/components/CompatibilitySection/CompatibilitySection.tsx
+++ b/docs/app/(home)/sections/CompatibilitySection/CompatibilitySection.tsx
@@ -9,8 +9,7 @@ interface CompatibilityItem {
   slug?: string;
   localSrc?: string;
   iconColor: string;
-  badgeBg: string;
-  border?: boolean;
+  badgeClassName?: string;
 }
 
 const LLMS: CompatibilityItem[] = [
@@ -18,27 +17,35 @@ const LLMS: CompatibilityItem[] = [
     name: "OpenAI",
     localSrc: "/brand-icons/openai.svg",
     iconColor: "000000",
-    badgeBg: "#ffffff",
-    border: true,
+    badgeClassName: `${styles.badgeWhite} ${styles.badgeWithBorder}`,
   },
-  { name: "Anthropic", slug: "anthropic", iconColor: "ffffff", badgeBg: "#D4A574" },
-  { name: "Gemini", slug: "googlegemini", iconColor: "000000", badgeBg: "#ffffff", border: true },
-  { name: "Mistral", slug: "mistralai", iconColor: "ffffff", badgeBg: "#FF7000" },
+  { name: "Anthropic", slug: "anthropic", iconColor: "ffffff", badgeClassName: styles.badgeAnthropic },
+  {
+    name: "Gemini",
+    slug: "googlegemini",
+    iconColor: "000000",
+    badgeClassName: `${styles.badgeWhite} ${styles.badgeWithBorder}`,
+  },
+  { name: "Mistral", slug: "mistralai", iconColor: "ffffff", badgeClassName: styles.badgeMistral },
 ];
 
 const FRAMEWORKS: CompatibilityItem[] = [
-  { name: "Vercel AI SDK", slug: "vercel", iconColor: "ffffff", badgeBg: "#000000" },
-  { name: "LangChain", slug: "langchain", iconColor: "ffffff", badgeBg: "#1C3144" },
-  { name: "CrewAI", slug: "crewai", iconColor: "ffffff", badgeBg: "#FF4B4B" },
+  { name: "Vercel AI SDK", slug: "vercel", iconColor: "ffffff", badgeClassName: styles.badgeBlack },
+  { name: "LangChain", slug: "langchain", iconColor: "ffffff", badgeClassName: styles.badgeLangChain },
+  { name: "CrewAI", slug: "crewai", iconColor: "ffffff", badgeClassName: styles.badgeCrewAi },
   {
     name: "OpenAI Agents SDK",
     localSrc: "/brand-icons/openai.svg",
     iconColor: "000000",
-    badgeBg: "#ffffff",
-    border: true,
+    badgeClassName: `${styles.badgeWhite} ${styles.badgeWithBorder}`,
+  },
+  {
+    name: "Anthropic Agents SDK",
+    slug: "anthropic",
+    iconColor: "ffffff",
+    badgeClassName: styles.badgeAnthropic,
   },
-  { name: "Anthropic Agents SDK", slug: "anthropic", iconColor: "ffffff", badgeBg: "#D4A574" },
-  { name: "Google ADK", slug: "google", iconColor: "ffffff", badgeBg: "#4285F4" },
+  { name: "Google ADK", slug: "google", iconColor: "ffffff", badgeClassName: styles.badgeGoogle },
 ];
 
 // ---------------------------------------------------------------------------
@@ -49,10 +56,7 @@ function Chip({ item }: { item: CompatibilityItem }) {
   const imgSrc = item.localSrc ?? `https://cdn.simpleicons.org/${item.slug}/${item.iconColor}`;
   return (
     <div className={styles.chip}>
-      <div
-        className={`${styles.badge} ${item.border ? styles.badgeWithBorder : ""}`}
-        style={{ backgroundColor: item.badgeBg }}
-      >
+      <div className={`${styles.badge} ${item.badgeClassName ?? ""}`.trim()}>
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={imgSrc}
diff --git a/docs/app/(home)/sections/FeaturesSection/FeaturesSection.module.css b/docs/app/(home)/sections/FeaturesSection/FeaturesSection.module.css
new file mode 100644
index 000000000..75e3fa67c
--- /dev/null
+++ b/docs/app/(home)/sections/FeaturesSection/FeaturesSection.module.css
@@ -0,0 +1,80 @@
+.section {
+  width: 100%;
+  padding-inline: var(--home-section-padding-inline);
+}
+
+.container {
+  max-width: 75rem;
+  margin-inline: auto;
+}
+
+.ctaWrap {
+  display: flex;
+  justify-content: center;
+  margin-top: 2.5rem;
+}
+
+.ctaLink {
+  width: 100%;
+  max-width: 280px;
+  text-decoration: none;
+}
+
+.ctaButton {
+  display: flex;
+  height: 3rem;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding-inline: 1rem;
+  border: 1.25px solid var(--home-border-subtle);
+  border-radius: var(--home-radius-pill);
+  background: var(--home-color-surface);
+  box-shadow: var(--home-shadow-elevated);
+  color: var(--home-color-text-primary);
+  cursor: pointer;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.ctaButton:hover {
+  transform: scale(0.99);
+  box-shadow: none;
+}
+
+.mobileLabel {
+  display: inline;
+}
+
+.desktopLabel {
+  display: none;
+}
+
+@media (min-width: 1024px) {
+  .ctaWrap {
+    margin-top: 5rem;
+  }
+
+  .ctaLink {
+    width: auto;
+    max-width: none;
+  }
+
+  .ctaButton {
+    width: auto;
+    font-size: 18px;
+  }
+
+  .mobileLabel {
+    display: none;
+  }
+
+  .desktopLabel {
+    display: inline;
+  }
+}
diff --git a/docs/app/(home)/sections/FeaturesSection/FeaturesSection.tsx b/docs/app/(home)/sections/FeaturesSection/FeaturesSection.tsx
new file mode 100644
index 000000000..e8f273b5e
--- /dev/null
+++ b/docs/app/(home)/sections/FeaturesSection/FeaturesSection.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import svgPaths from "@/imports/svg-urruvoh2be";
+import { PillLink } from "../../components/Button/Button";
+import { FeatureList, type FeatureListItem } from "../../components/FeatureList/FeatureList";
+import styles from "./FeaturesSection.module.css";
+
+// ---------------------------------------------------------------------------
+// Data
+// ---------------------------------------------------------------------------
+
+const FEATURES: FeatureListItem[] = [
+  {
+    title: "Performance Optimized",
+    description: "Up to 3.0x faster rendering than json-render",
+    iconPath: svgPaths.p7658f00,
+  },
+  {
+    title: "Token efficient",
+    description: "Up to 67.1% lesser tokens than json-render",
+    iconPath: svgPaths.p2a8ddd80,
+  },
+  {
+    title: "Native Types",
+    description: "Performant and memory safe",
+    iconPath: svgPaths.p10e86100,
+  },
+  {
+    title: "Works across platforms",
+    description: "JS Runtime. Native support for iOS & Android coming soon",
+    iconPath: svgPaths.p2cbb5d00,
+  },
+  {
+    title: "Streaming Native",
+    description: "Streaming and partial responses",
+    iconPath: svgPaths.p33780400,
+  },
+  {
+    title: "Interactive",
+    description: "Handles inputs and interactive flows",
+    iconPath: svgPaths.p17c7f700,
+  },
+  {
+    title: "Safe by Default",
+    description: "No arbitrary code execution",
+    iconPath: svgPaths.p16eec200,
+  },
+];
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export function FeaturesSection() {
+  return (
+    <div className={styles.section}>
+      <div className={styles.container}>
+        <FeatureList items={FEATURES} />
+
+        {/* CTA button */}
+        <div className={styles.ctaWrap}>
+          <PillLink
+            href="/docs/openui-lang/benchmarks"
+            className={`${styles.ctaLink} ${styles.ctaButton}`}
+          >
+            <span>
+              <span className={styles.mobileLabel}>Detailed comparison</span>
+              <span className={styles.desktopLabel}>View Comparison</span>
+            </span>
+          </PillLink>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/app/(home)/components/Footer/Footer.module.css b/docs/app/(home)/sections/Footer/Footer.module.css
similarity index 68%
rename from docs/app/(home)/components/Footer/Footer.module.css
rename to docs/app/(home)/sections/Footer/Footer.module.css
index 9dc6d9e0d..20bb4e943 100644
--- a/docs/app/(home)/components/Footer/Footer.module.css
+++ b/docs/app/(home)/sections/Footer/Footer.module.css
@@ -11,7 +11,7 @@
 
 .handcraftedSection {
   width: 100%;
-  padding-inline: 1.25rem;
+  padding-inline: var(--home-section-padding-inline);
 }
 
 .handcraftedContainer {
@@ -26,8 +26,8 @@
 
 .mascotWrap {
   position: relative;
-  height: 140px;
-  width: 140px;
+  height: 96px;
+  width: 96px;
   flex-shrink: 0;
 }
 
@@ -39,15 +39,22 @@
 
 .handcraftedCopy {
   text-align: center;
-  font-family: "Playwrite US Trad", serif;
-  font-size: 16px;
+  font-family: var(--font-geist-mono);
+  font-size: 18px;
   line-height: 1.2;
-  color: #000;
+  color: var(--home-color-text-primary);
+  margin-top: 12px;
+}
+
+.handcraftedCursor {
+  display: inline-block;
+  margin-left: 0.06em;
+  animation: handcraftedCursorBlink 1s steps(1, end) infinite;
 }
 
 .contentSection {
-  padding: 60px 1.25rem 1rem;
-  background: #fff;
+  padding: 60px var(--home-section-padding-inline) 1rem;
+  background: var(--home-color-surface);
 }
 
 .contentContainer {
@@ -87,7 +94,7 @@
   font-family: "Inter", sans-serif;
   font-size: 15px;
   line-height: 1.5;
-  color: rgb(0 0 0 / 40%);
+  color: var(--home-color-text-muted);
 }
 
 .desktopMetaLeft {
@@ -121,6 +128,26 @@
   position: absolute;
 }
 
+.socialIconTwitter {
+  inset: 10.82% 4.33% 18.35% 4.17%;
+}
+
+.socialIconYoutube {
+  left: 50%;
+  top: 50%;
+  width: 22px;
+  height: 15.469px;
+  transform: translate(-50%, -50%);
+}
+
+.socialIconLinkedIn {
+  left: 50%;
+  top: 50%;
+  width: 19px;
+  height: 19px;
+  transform: translate(-50%, -50%);
+}
+
 .mobileMeta {
   margin-top: 2.5rem;
   text-align: center;
@@ -130,18 +157,22 @@
   font-family: "Inter", sans-serif;
   font-size: 12px;
   line-height: 1.5;
-  color: rgb(0 0 0 / 40%);
+  color: var(--home-color-text-muted);
 }
 
-@media (min-width: 1024px) {
-  .handcraftedSection,
-  .contentSection {
-    padding-inline: 2rem;
+@keyframes handcraftedCursorBlink {
+  0%,
+  49% {
+    opacity: 1;
   }
 
-  .handcraftedCopy {
-    font-size: 22px;
+  50%,
+  100% {
+    opacity: 0;
   }
+}
+
+@media (min-width: 1024px) {
 
   .desktopLogoRow {
     display: flex;
diff --git a/docs/app/(home)/components/Footer/Footer.tsx b/docs/app/(home)/sections/Footer/Footer.tsx
similarity index 90%
rename from docs/app/(home)/components/Footer/Footer.tsx
rename to docs/app/(home)/sections/Footer/Footer.tsx
index af87b02c9..d86a8af2d 100644
--- a/docs/app/(home)/components/Footer/Footer.tsx
+++ b/docs/app/(home)/sections/Footer/Footer.tsx
@@ -1,6 +1,4 @@
 "use client";
-
-import type { CSSProperties } from "react";
 import svgPaths from "@/imports/svg-urruvoh2be";
 import mascotSvgPaths from "@/imports/svg-xeurqn3j1r";
 import styles from "./Footer.module.css";
@@ -14,7 +12,7 @@ interface SocialLink {
   href: string;
   viewBox: string;
   path: string;
-  wrapperStyle?: CSSProperties;
+  wrapperClassName?: string;
   clipId?: string;
   clipSize?: { width: string; height: string };
 }
@@ -25,7 +23,7 @@ const SOCIAL_LINKS: SocialLink[] = [
     href: "https://x.com/thesysdev",
     viewBox: "0 0 24 24",
     path: svgPaths.pa1e7100,
-    wrapperStyle: { inset: "10.82% 4.33% 18.35% 4.17%" },
+    wrapperClassName: styles.socialIconTwitter,
   },
   {
     label: "Discord",
@@ -38,13 +36,7 @@ const SOCIAL_LINKS: SocialLink[] = [
     href: "https://www.youtube.com/@thesysdev",
     viewBox: "0 0 22 15.4688",
     path: svgPaths.p23dbbd00,
-    wrapperStyle: {
-      left: "50%",
-      top: "50%",
-      width: "22px",
-      height: "15.469px",
-      transform: "translate(-50%, -50%)",
-    },
+    wrapperClassName: styles.socialIconYoutube,
     clipId: "clip_yt",
     clipSize: { width: "22", height: "15.4688" },
   },
@@ -53,13 +45,7 @@ const SOCIAL_LINKS: SocialLink[] = [
     href: "https://www.linkedin.com/company/thesysdev/",
     viewBox: "0 0 19 19",
     path: svgPaths.p26fc3100,
-    wrapperStyle: {
-      left: "50%",
-      top: "50%",
-      width: "19px",
-      height: "19px",
-      transform: "translate(-50%, -50%)",
-    },
+    wrapperClassName: styles.socialIconLinkedIn,
     clipId: "clip_li",
     clipSize: { width: "19", height: "19" },
   },
@@ -95,8 +81,8 @@ function SocialIcon({ link }: { link: SocialLink }) {
       className={styles.socialLink}
       aria-label={link.label}
     >
-      {link.wrapperStyle ? (
-        <div className={styles.socialIconWrap} style={link.wrapperStyle}>
+      {link.wrapperClassName ? (
+        <div className={`${styles.socialIconWrap} ${link.wrapperClassName}`.trim()}>
           {svgContent}
         </div>
       ) : (
@@ -159,7 +145,10 @@ export function Footer() {
             </svg>
           </div>
           <p className={styles.handcraftedCopy}>
-            Handcrafted with a lot of love.
+            Handcrafted with a lot of love
+            <span aria-hidden="true" className={styles.handcraftedCursor}>
+              _
+            </span>
           </p>
         </div>
       </div>
diff --git a/docs/app/(home)/sections/GradientDivider/GradientDivider.module.css b/docs/app/(home)/sections/GradientDivider/GradientDivider.module.css
new file mode 100644
index 000000000..231e1e927
--- /dev/null
+++ b/docs/app/(home)/sections/GradientDivider/GradientDivider.module.css
@@ -0,0 +1,123 @@
+.divider {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 2px;
+  transform: rotate(180deg);
+}
+
+.bar {
+  width: 100%;
+  flex-shrink: 0;
+  background: rgb(0 0 0 / 4%);
+}
+
+.barHeight60 {
+  height: 30px;
+}
+
+.barHeight48 {
+  height: 24px;
+}
+
+.barHeight32 {
+  height: 16px;
+}
+
+.barHeight20942 {
+  height: 10.471px;
+}
+
+.barHeight16754 {
+  height: 8.377px;
+}
+
+.barHeight12565 {
+  height: 6.2825px;
+}
+
+.barHeight10471 {
+  height: 5.2355px;
+}
+
+.barHeight8377 {
+  height: 4.1885px;
+}
+
+.barHeight6283 {
+  height: 3.1415px;
+}
+
+.barHeight4188 {
+  height: 2.094px;
+}
+
+.barHeight3141 {
+  height: 1.5705px;
+}
+
+.barHeight2094 {
+  height: 1.047px;
+}
+
+.barHeight1047 {
+  height: 0.5235px;
+}
+
+@media (min-width: 1024px) {
+  .divider {
+    gap: 6px;
+  }
+
+  .barHeight60 {
+    height: 60px;
+  }
+
+  .barHeight48 {
+    height: 48px;
+  }
+
+  .barHeight32 {
+    height: 32px;
+  }
+
+  .barHeight20942 {
+    height: 20.942px;
+  }
+
+  .barHeight16754 {
+    height: 16.754px;
+  }
+
+  .barHeight12565 {
+    height: 12.565px;
+  }
+
+  .barHeight10471 {
+    height: 10.471px;
+  }
+
+  .barHeight8377 {
+    height: 8.377px;
+  }
+
+  .barHeight6283 {
+    height: 6.283px;
+  }
+
+  .barHeight4188 {
+    height: 4.188px;
+  }
+
+  .barHeight3141 {
+    height: 3.141px;
+  }
+
+  .barHeight2094 {
+    height: 2.094px;
+  }
+
+  .barHeight1047 {
+    height: 1.047px;
+  }
+}
diff --git a/docs/app/(home)/sections/GradientDivider/GradientDivider.tsx b/docs/app/(home)/sections/GradientDivider/GradientDivider.tsx
new file mode 100644
index 000000000..b28070648
--- /dev/null
+++ b/docs/app/(home)/sections/GradientDivider/GradientDivider.tsx
@@ -0,0 +1,32 @@
+import styles from "./GradientDivider.module.css";
+
+const BAR_HEIGHT_CLASSES = [
+  styles.barHeight60,
+  styles.barHeight48,
+  styles.barHeight32,
+  styles.barHeight20942,
+  styles.barHeight16754,
+  styles.barHeight12565,
+  styles.barHeight10471,
+  styles.barHeight8377,
+  styles.barHeight6283,
+  styles.barHeight4188,
+  styles.barHeight3141,
+  styles.barHeight2094,
+  styles.barHeight1047,
+];
+
+export function GradientDivider({ direction = "down" }: { direction?: "down" | "up" }) {
+  const bars = direction === "up" ? [...BAR_HEIGHT_CLASSES].reverse() : BAR_HEIGHT_CLASSES;
+
+  return (
+    <div className={styles.divider}>
+      {bars.map((barClassName) => (
+        <div
+          key={barClassName}
+          className={`${styles.bar} ${barClassName}`.trim()}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/docs/app/(home)/components/HeroSection/HeroSection.module.css b/docs/app/(home)/sections/HeroSection/HeroSection.module.css
similarity index 76%
rename from docs/app/(home)/components/HeroSection/HeroSection.module.css
rename to docs/app/(home)/sections/HeroSection/HeroSection.module.css
index 346663af9..62d489b81 100644
--- a/docs/app/(home)/components/HeroSection/HeroSection.module.css
+++ b/docs/app/(home)/sections/HeroSection/HeroSection.module.css
@@ -2,23 +2,6 @@
   width: 100%;
 }
 
-.iconLayer {
-  position: absolute;
-  transition:
-    opacity 0.3s ease,
-    transform 0.3s ease;
-}
-
-.iconVisible {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.iconHidden {
-  opacity: 0;
-  transform: scale(0.5);
-}
-
 .npmButton {
   display: flex;
   height: 3rem;
@@ -28,10 +11,10 @@
   gap: 0.625rem;
   padding-left: 1.25rem;
   padding-right: 0.5rem;
-  border: 1px solid rgb(0 0 0 / 6%);
-  border-radius: 999px;
-  background: #fff;
-  box-shadow: var(--hero-button-shadow, none);
+  border: 1px solid var(--home-border-soft);
+  border-radius: var(--home-radius-pill);
+  background: var(--home-color-surface);
+  box-shadow: var(--home-shadow-elevated);
   cursor: pointer;
   transition:
     transform 0.2s ease,
@@ -44,23 +27,28 @@
 }
 
 .desktopPlaygroundButton:hover {
-  background: rgb(0 0 0 / 5%);
+  background: var(--home-color-surface-soft);
 }
 
 .npmDesktopLabel,
-.desktopPlaygroundButton,
 .npmTickerText,
+.desktopPlaygroundButton,
 .mobilePlaygroundLabel {
-  font-family: "Inter Display", sans-serif;
   font-size: 18px;
   font-weight: 500;
   line-height: 1.5rem;
 }
 
+.desktopPlaygroundButton,
+.mobilePlaygroundLabel {
+  font-family: "Inter Display", sans-serif;
+}
+
 .npmDesktopLabel {
   display: none;
+  font-family: var(--font-geist-mono);
   white-space: nowrap;
-  color: #000;
+  color: var(--home-color-text-primary);
 }
 
 .npmMobileLabel {
@@ -79,9 +67,10 @@
 }
 
 .npmTickerText {
+  font-family: var(--font-geist-mono);
   white-space: nowrap;
   padding-right: 2rem;
-  color: #000;
+  color: var(--home-color-text-primary);
 }
 
 .npmIconBadge {
@@ -92,16 +81,7 @@
   align-items: center;
   justify-content: center;
   border-radius: 999px;
-  background: #000;
-}
-
-.npmIconFrame {
-  position: relative;
-  display: flex;
-  height: 1rem;
-  width: 1rem;
-  align-items: center;
-  justify-content: center;
+  background: var(--home-color-surface-inverse);
 }
 
 .desktopPlaygroundButton,
@@ -116,16 +96,16 @@
 }
 
 .desktopPlaygroundButton {
-  padding-inline: 1.25rem;
-  color: #000;
+  padding-inline: var(--home-pill-padding-inline);
+  color: var(--home-color-text-primary);
   transition: background-color 0.2s ease;
 }
 
 .mobilePlaygroundButton {
   flex-shrink: 0;
-  padding-inline: 1.25rem;
+  padding-inline: var(--home-pill-padding-inline);
   border-radius: 100px;
-  background: #000;
+  background: var(--home-color-surface-inverse);
   transition: background-color 0.2s ease;
 }
 
@@ -135,11 +115,11 @@
 
 .mobilePlaygroundLabel {
   white-space: nowrap;
-  color: #fff;
+  color: var(--home-color-text-inverse);
 }
 
 .mobilePlaygroundArrow {
-  color: #fff;
+  color: var(--home-color-text-inverse);
   font-size: 20px;
   line-height: 1;
 }
@@ -169,16 +149,11 @@
   visibility: hidden;
 }
 
-.heroLayerFade,
 .heroLayerMotion {
   position: absolute;
   inset: 0;
 }
 
-.heroLayerFade {
-  will-change: opacity;
-}
-
 .heroLayerMotion,
 .desktopCtaLayer {
   will-change: transform, opacity;
@@ -189,26 +164,10 @@
   height: 100%;
 }
 
-.leftFade,
-.rightFade {
-  position: absolute;
-  inset-block: 0;
-  width: 40px;
-  pointer-events: none;
-}
-
-.leftFade {
-  left: 0;
-  background: linear-gradient(to right, #fff, transparent);
-}
-
-.rightFade {
-  right: 0;
-  background: linear-gradient(to left, #fff, transparent);
-}
-
 .desktopCtaLayer {
   position: absolute;
+  left: 50%;
+  top: 71.19%;
 }
 
 .desktopCtaStack {
@@ -228,7 +187,7 @@
 
 .mobileHeroIntro {
   position: relative;
-  padding: 60px 1.25rem 1.25rem;
+  padding: 32px var(--home-section-padding-inline) var(--home-section-padding-inline);
 }
 
 .mobileHeroStack {
@@ -242,6 +201,13 @@
   padding-block: 2.5rem;
 }
 
+.mobileBrandGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0rem;
+}
+
 .mobileGithubBanner {
   display: inline-flex;
   align-items: center;
@@ -249,9 +215,9 @@
   gap: 0.5rem;
   min-height: 2.5rem;
   padding-inline: 1rem;
-  border-radius: 999px;
-  background: rgb(0 0 0 / 5%);
-  color: #000;
+  border-radius: var(--home-radius-pill);
+  background: var(--home-color-surface-soft);
+  color: var(--home-color-text-primary);
   text-decoration: none;
   font-family: "Inter Display", sans-serif;
   font-size: 16px;
@@ -261,7 +227,7 @@
 }
 
 .mobileGithubBanner:hover {
-  background: rgb(0 0 0 / 8%);
+  background: var(--home-color-surface-muted);
 }
 
 .mobileGithubBannerLead {
@@ -284,8 +250,8 @@
 
 .mobileMascotWrap {
   position: relative;
-  height: 140px;
-  width: 140px;
+  height: 120px;
+  width: 120px;
   flex-shrink: 0;
 }
 
@@ -293,16 +259,18 @@
   text-align: center;
   font-family: "Inter Display", sans-serif;
   font-size: 80px;
+  font-weight: 600;
   line-height: 1.25;
-  color: #000;
+  color: var(--home-color-text-primary);
 }
 
 .mobileSubtitle {
   text-align: center;
   font-family: "Inter Display", sans-serif;
   font-size: 22px;
+  font-weight: 500;
   line-height: 1.2;
-  color: rgb(0 0 0 / 40%);
+  color: var(--home-color-text-muted);
 }
 
 .mobileCtaStack {
@@ -338,6 +306,9 @@
 .previewScaleFrame {
   position: absolute;
   left: 50%;
+  width: 1600px;
+  height: 518px;
+  transform: translateX(-50%) scale(var(--preview-scale, 1));
   transform-origin: top center;
 }
 
@@ -355,12 +326,16 @@
 
 .previewFrame {
   position: relative;
+  width: calc(100% + 240px);
+  max-width: 100vw;
+  aspect-ratio: 1600 / 518;
+  margin-inline: -120px;
   overflow: hidden;
 }
 
 .taglineSection {
   margin-top: 1.25rem;
-  padding-inline: 1.25rem;
+  padding-inline: var(--home-section-padding-inline);
 }
 
 .taglineContainer {
@@ -374,7 +349,7 @@
   font-size: 22px;
   font-weight: 500;
   line-height: 1.4;
-  color: rgb(0 0 0 / 40%);
+  color: var(--home-color-text-muted);
 }
 
 .taglineBreak {
@@ -406,7 +381,7 @@
     position: relative;
     width: 100%;
     overflow: hidden;
-    padding: 5.5rem 2rem 5.5rem;
+    padding: 5.5rem var(--home-section-padding-inline) 5.5rem;
   }
 
   .previewSection {
@@ -419,7 +394,7 @@
 
   .taglineSection {
     margin-top: 2.5rem;
-    padding: 2.5rem 2rem 0;
+    padding: 2.5rem var(--home-section-padding-inline) 0;
   }
 
   .tagline {
diff --git a/docs/app/(home)/components/HeroSection/HeroSection.tsx b/docs/app/(home)/sections/HeroSection/HeroSection.tsx
similarity index 59%
rename from docs/app/(home)/components/HeroSection/HeroSection.tsx
rename to docs/app/(home)/sections/HeroSection/HeroSection.tsx
index 4a7ef8423..bf47ab6b2 100644
--- a/docs/app/(home)/components/HeroSection/HeroSection.tsx
+++ b/docs/app/(home)/sections/HeroSection/HeroSection.tsx
@@ -4,122 +4,72 @@ import { GitHubIcon } from "@/components/brand-logo";
 import HeroPreviewFrame from "@/imports/Frame2147239423";
 import svgMascotPaths from "@/imports/svg-148i9mcxjn";
 import svgHeroPaths from "@/imports/svg-a5kdrdeeao";
-import { lazy, Suspense, useEffect, useRef, useState, type CSSProperties } from "react";
-import { CopyIcon } from "../shared/shared";
+import { lazy, Suspense, useEffect, useRef, useState } from "react";
+import { ClipboardCommandButton, PillLink } from "../../components/Button/Button";
 import styles from "./HeroSection.module.css";
 
 const LazyMobileActionFigure = lazy(() => import("@/imports/MobileActionFigure"));
 
-const HERO_BUTTON_SHADOW = "0 1.5px 5px 0 rgba(22, 34, 51, 0.06), 0 12px 24px 0 rgba(22, 34, 51, 0.04)";
-const HERO_BUTTON_STYLE = {
-  "--hero-button-shadow": HERO_BUTTON_SHADOW,
-} as CSSProperties;
-
 // CTAs
 const primaryCTA = "npx @openuidev/cli@latest create";
 const secondaryCTA = "Try Playground";
-const COPIED_FEEDBACK_MS = 3000;
 // ---------------------------------------------------------------------------
 // Buttons
 // ---------------------------------------------------------------------------
 
 function NpmButton({ className = "" }: { className?: string }) {
-  const [copied, setCopied] = useState(false);
-  const copiedTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (copiedTimeoutRef.current) {
-        clearTimeout(copiedTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  const onCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(primaryCTA);
-      setCopied(true);
-      if (copiedTimeoutRef.current) {
-        clearTimeout(copiedTimeoutRef.current);
-      }
-      copiedTimeoutRef.current = setTimeout(() => {
-        setCopied(false);
-      }, COPIED_FEEDBACK_MS);
-    } catch {
-      setCopied(false);
-    }
-  };
-
   return (
-    <>
-      <button
-        className={`${styles.npmButton} ${className}`.trim()}
-        style={HERO_BUTTON_STYLE}
-        onClick={onCopy}
-      >
-        <span className={styles.npmDesktopLabel}>
-          {primaryCTA}
-        </span>
-        <span className={styles.npmMobileLabel}>
-          <span className={styles.npmTicker}>
-            <span className={styles.npmTickerText}>
-              {primaryCTA}
-            </span>
-            <span
-              aria-hidden="true"
-              className={styles.npmTickerText}
-            >
-              {primaryCTA}
-            </span>
+    <ClipboardCommandButton
+      command={primaryCTA}
+      className={`${styles.npmButton} ${className}`.trim()}
+      iconContainerClassName={styles.npmIconBadge}
+      copyIconColor="white"
+    >
+      <span className={styles.npmDesktopLabel}>
+        {primaryCTA}
+      </span>
+      <span className={styles.npmMobileLabel}>
+        <span className={styles.npmTicker}>
+          <span className={styles.npmTickerText}>
+            {primaryCTA}
           </span>
-        </span>
-        <span className={styles.npmIconBadge}>
-          <span className={styles.npmIconFrame}>
-            <span
-              className={`${styles.iconLayer} ${copied ? styles.iconHidden : styles.iconVisible}`}
-            >
-              <CopyIcon color="white" />
-            </span>
-            <svg
-              className={`${styles.iconLayer} ${copied ? styles.iconVisible : styles.iconHidden}`}
-              fill="none"
-              viewBox="0 0 14 14"
-            >
-              <path
-                d="M11.6667 3.5L5.25 9.91667L2.33334 7"
-                stroke="white"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="1.5"
-              />
-            </svg>
+          <span
+            aria-hidden="true"
+            className={styles.npmTickerText}
+          >
+            {primaryCTA}
           </span>
         </span>
-      </button>
-    </>
+      </span>
+    </ClipboardCommandButton>
   );
 }
 
 function DesktopPlaygroundButton({ className = "" }: { className?: string }) {
   return (
-    <a
+    <PillLink
       href="/playground"
       className={`${styles.desktopPlaygroundButton} ${className}`.trim()}
+      arrow={<span aria-hidden="true">→</span>}
     >
       <span>{secondaryCTA}</span>
-      <span aria-hidden="true">→</span>
-    </a>
+    </PillLink>
   );
 }
 
 function MobilePlaygroundButton({ className = "" }: { className?: string }) {
   return (
-    <a href="/playground" className={`${styles.mobilePlaygroundButton} ${className}`.trim()}>
+    <PillLink
+      href="/playground"
+      className={`${styles.mobilePlaygroundButton} ${className}`.trim()}
+      arrow={
+        <span aria-hidden="true" className={styles.mobilePlaygroundArrow}>
+          →
+        </span>
+      }
+    >
       <span className={styles.mobilePlaygroundLabel}>{secondaryCTA}</span>
-      <span aria-hidden="true" className={styles.mobilePlaygroundArrow}>
-        →
-      </span>
-    </a>
+    </PillLink>
   );
 }
 
@@ -176,39 +126,6 @@ function DesktopHero() {
           <rect width="1600" height="376" />
         </svg>
 
-        {/* Grid lines */}
-        <div className={styles.heroLayerFade}>
-          <svg
-            className={styles.fillSvg}
-            fill="none"
-            viewBox="0 0 1600 376"
-            preserveAspectRatio="none"
-          >
-            <defs>
-              {[189, 787].map((x) => (
-                <linearGradient
-                  key={x}
-                  id={`heroVFade${x}`}
-                  x1={x}
-                  x2={x}
-                  y1="0"
-                  y2="376"
-                  gradientUnits="userSpaceOnUse"
-                >
-                  <stop stopColor="black" stopOpacity="0" />
-                  <stop offset="0.15" stopColor="black" stopOpacity="1" />
-                  <stop offset="0.85" stopColor="black" stopOpacity="1" />
-                  <stop offset="1" stopColor="black" stopOpacity="0" />
-                </linearGradient>
-              ))}
-            </defs>
-            <path d="M0 112H1600" stroke="black" strokeOpacity="0.1" />
-            <path d="M0 243H1600" stroke="black" strokeOpacity="0.1" />
-            <path d="M189 0V376" stroke="url(#heroVFade189)" strokeOpacity="0.1" />
-            <path d="M787 0V376" stroke="url(#heroVFade787)" strokeOpacity="0.1" />
-          </svg>
-        </div>
-
         {/* Title */}
         <div className={styles.heroLayerMotion}>
           <svg className={styles.fillSvg} fill="none" viewBox="0 0 1600 376">
@@ -227,15 +144,8 @@ function DesktopHero() {
           </svg>
         </div>
 
-        {/* Edge fades */}
-        <div className={styles.leftFade} />
-        <div className={styles.rightFade} />
-
         {/* CTA buttons */}
-        <div
-          className={styles.desktopCtaLayer}
-          style={{ left: "50%", top: "71.19%" }}
-        >
+        <div className={styles.desktopCtaLayer}>
           <div className={styles.desktopCtaStack}>
             <NpmButton />
             <DesktopPlaygroundButton />
@@ -271,17 +181,20 @@ function MobileHero() {
               →
             </span>
           </a>
-          <div className={styles.mobileMascotWrap}>
-            <MascotSvg />
-          </div>
 
-          {/* Title */}
-          <p className={styles.mobileTitle} style={{ fontWeight: 600 }}>
-            OpenUI
-          </p>
+          <div className={styles.mobileBrandGroup}>
+            <div className={styles.mobileMascotWrap}>
+              <MascotSvg />
+            </div>
+
+            {/* Title */}
+            <p className={styles.mobileTitle}>
+              OpenUI
+            </p>
+          </div>
 
           {/* Subtitle */}
-          <p className={styles.mobileSubtitle} style={{ fontWeight: 500 }}>
+          <p className={styles.mobileSubtitle}>
             The Open Standard
             <br />
             for Generative UI
@@ -310,11 +223,11 @@ function MobileHero() {
 // ---------------------------------------------------------------------------
 
 const PREVIEW_NATIVE_WIDTH = 1600;
-const PREVIEW_NATIVE_HEIGHT = 518;
 const PREVIEW_SCALE_MULTIPLIER = 1.25;
 
 function ScaledPreview() {
   const containerRef = useRef<HTMLDivElement>(null);
+  const frameRef = useRef<HTMLDivElement>(null);
   const [scale, setScale] = useState(1);
 
   useEffect(() => {
@@ -327,16 +240,14 @@ function ScaledPreview() {
     return () => observer.disconnect();
   }, []);
 
+  useEffect(() => {
+    if (!frameRef.current) return;
+    frameRef.current.style.setProperty("--preview-scale", String(scale * PREVIEW_SCALE_MULTIPLIER));
+  }, [scale]);
+
   return (
     <div ref={containerRef} className={styles.previewScaleContainer}>
-      <div
-        className={styles.previewScaleFrame}
-        style={{
-          width: PREVIEW_NATIVE_WIDTH,
-          height: PREVIEW_NATIVE_HEIGHT,
-          transform: `translateX(-50%) scale(${scale * PREVIEW_SCALE_MULTIPLIER})`,
-        }}
-      >
+      <div ref={frameRef} className={styles.previewScaleFrame}>
         <HeroPreviewFrame />
       </div>
     </div>
@@ -347,15 +258,7 @@ function PreviewImage() {
   return (
     <div className={styles.previewSection}>
       <div className={styles.previewDesktopOnly}>
-        <div
-          className={styles.previewFrame}
-          style={{
-            width: "calc(100% + 240px)",
-            maxWidth: "100vw",
-            aspectRatio: `${PREVIEW_NATIVE_WIDTH} / ${PREVIEW_NATIVE_HEIGHT}`,
-            marginInline: "-120px",
-          }}
-        >
+        <div className={styles.previewFrame}>
           <ScaledPreview />
         </div>
       </div>
diff --git a/docs/app/(home)/components/Navbar/Navbar.module.css b/docs/app/(home)/sections/Navbar/Navbar.module.css
similarity index 91%
rename from docs/app/(home)/components/Navbar/Navbar.module.css
rename to docs/app/(home)/sections/Navbar/Navbar.module.css
index ee02c7cc1..9978c3a58 100644
--- a/docs/app/(home)/components/Navbar/Navbar.module.css
+++ b/docs/app/(home)/sections/Navbar/Navbar.module.css
@@ -8,6 +8,10 @@
   transition: border-color 0.2s ease;
 }
 
+.navScrolled {
+  border-bottom: 1px solid var(--home-border-default);
+}
+
 .navInner {
   display: flex;
   max-width: 75rem;
@@ -25,7 +29,7 @@
 .logoDivider {
   height: 1rem;
   width: 1px;
-  background: rgb(0 0 0 / 10%);
+  background: var(--home-border-default);
 }
 
 .desktopTabs,
@@ -62,7 +66,6 @@
 .hamburgerIcon {
   height: 1.25rem;
   width: 1.25rem;
-  color: #000;
 }
 
 .mobileMenuButton {
@@ -105,7 +108,7 @@
   border-bottom-left-radius: 18px;
   border-bottom-right-radius: 18px;
   background: #fff;
-  box-shadow: 0 10px 20px rgb(0 0 0 / 10%);
+  box-shadow: var(--home-shadow-panel);
 }
 
 .mobileTrayInner {
@@ -170,9 +173,9 @@
   position: absolute;
   inset: 0;
   pointer-events: none;
-  border: 1px solid rgb(0 0 0 / 10%);
-  border-radius: 999px;
-  box-shadow: var(--mobile-github-button-shadow, none);
+  border: 1px solid var(--home-border-default);
+  border-radius: var(--home-radius-pill);
+  box-shadow: var(--home-shadow-elevated);
   transition: box-shadow 0.2s ease;
 }
 
diff --git a/docs/app/(home)/components/Navbar/Navbar.tsx b/docs/app/(home)/sections/Navbar/Navbar.tsx
similarity index 88%
rename from docs/app/(home)/components/Navbar/Navbar.tsx
rename to docs/app/(home)/sections/Navbar/Navbar.tsx
index 5da6d286a..625658596 100644
--- a/docs/app/(home)/components/Navbar/Navbar.tsx
+++ b/docs/app/(home)/sections/Navbar/Navbar.tsx
@@ -9,8 +9,7 @@ import {
   useGitHubStarCount,
 } from "@/components/brand-logo";
 import { AnimatePresence, motion } from "motion/react";
-import { useCallback, useEffect, useState, type CSSProperties } from "react";
-import { BUTTON_SHADOW } from "../shared/shared";
+import { useCallback, useEffect, useState } from "react";
 import styles from "./Navbar.module.css";
 
 // ---------------------------------------------------------------------------
@@ -25,10 +24,6 @@ const TAB_URLS: Record<string, string> = {
   Components: "/docs/components",
   Blog: "/blog",
 };
-const NAVBAR_BORDER_COLOR = "rgba(0,0,0,0.1)";
-const MOBILE_GITHUB_BUTTON_STYLE = {
-  "--mobile-github-button-shadow": BUTTON_SHADOW,
-} as CSSProperties;
 
 // Sub-components
 // ---------------------------------------------------------------------------
@@ -76,7 +71,7 @@ function HamburgerIcon({ isOpen }: { isOpen: boolean }) {
   );
 }
 
-function MobileMenu({ starCount, onClose }: { starCount: number; onClose: () => void }) {
+function MobileMenu({ starCount, onClose }: { starCount: number | null; onClose: () => void }) {
   return (
     <>
       {/* Backdrop overlay — below navbar (absolute top-full), covers rest of viewport */}
@@ -122,11 +117,7 @@ function MobileMenu({ starCount, onClose }: { starCount: number; onClose: () =>
             rel="noopener noreferrer"
             className={styles.mobileGithubButton}
           >
-            <div
-              aria-hidden="true"
-              className={styles.mobileGithubButtonOverlay}
-              style={MOBILE_GITHUB_BUTTON_STYLE}
-            />
+            <div aria-hidden="true" className={styles.mobileGithubButtonOverlay} />
             <GitHubIcon />
             <StarCountBadge count={starCount} isHighlighted={false} />
           </a>
@@ -160,10 +151,7 @@ export function Navbar() {
   }, []);
 
   return (
-    <nav
-      className={styles.nav}
-      style={{ borderBottom: `1px solid ${isScrolled ? NAVBAR_BORDER_COLOR : "transparent"}` }}
-    >
+    <nav className={`${styles.nav} ${isScrolled ? styles.navScrolled : ""}`.trim()}>
       <div className={styles.navInner}>
         {/* Left: Logos */}
         <div className={styles.logoCluster}>
diff --git a/docs/app/(home)/components/PossibilitiesSection/PossibilitiesSection.module.css b/docs/app/(home)/sections/PossibilitiesSection/PossibilitiesSection.module.css
similarity index 93%
rename from docs/app/(home)/components/PossibilitiesSection/PossibilitiesSection.module.css
rename to docs/app/(home)/sections/PossibilitiesSection/PossibilitiesSection.module.css
index 2ea12e2b6..8de47f2de 100644
--- a/docs/app/(home)/components/PossibilitiesSection/PossibilitiesSection.module.css
+++ b/docs/app/(home)/sections/PossibilitiesSection/PossibilitiesSection.module.css
@@ -5,7 +5,7 @@
 .headerContainer {
   max-width: 75rem;
   margin-inline: auto;
-  padding-inline: 1.25rem;
+  padding-inline: var(--home-section-padding-inline);
 }
 
 .header {
@@ -93,7 +93,7 @@
   position: absolute;
   inset: 0;
   pointer-events: none;
-  border: 1px solid rgb(0 0 0 / 6%);
+  border: 1px solid var(--home-border-soft);
   border-radius: 14px;
   box-shadow:
     0 1px 2px 0 rgb(22 34 51 / 4%),
@@ -101,10 +101,6 @@
 }
 
 @media (min-width: 1024px) {
-  .headerContainer {
-    padding-inline: 2rem;
-  }
-
   .title {
     font-size: 32px;
   }
diff --git a/docs/app/(home)/components/PossibilitiesSection/PossibilitiesSection.tsx b/docs/app/(home)/sections/PossibilitiesSection/PossibilitiesSection.tsx
similarity index 100%
rename from docs/app/(home)/components/PossibilitiesSection/PossibilitiesSection.tsx
rename to docs/app/(home)/sections/PossibilitiesSection/PossibilitiesSection.tsx
diff --git a/docs/app/(home)/components/ShiroMascot/ShiroMascot.module.css b/docs/app/(home)/sections/ShiroMascot/ShiroMascot.module.css
similarity index 75%
rename from docs/app/(home)/components/ShiroMascot/ShiroMascot.module.css
rename to docs/app/(home)/sections/ShiroMascot/ShiroMascot.module.css
index 646b96e15..81a054514 100644
--- a/docs/app/(home)/components/ShiroMascot/ShiroMascot.module.css
+++ b/docs/app/(home)/sections/ShiroMascot/ShiroMascot.module.css
@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-top: 4rem;
 }
 
 .figure {
@@ -19,3 +20,9 @@
   width: 83.84%;
   height: 115.47%;
 }
+
+@media (min-width: 1024px) {
+  .root {
+    margin-top: 6rem;
+  }
+}
diff --git a/docs/app/(home)/components/ShiroMascot/ShiroMascot.tsx b/docs/app/(home)/sections/ShiroMascot/ShiroMascot.tsx
similarity index 100%
rename from docs/app/(home)/components/ShiroMascot/ShiroMascot.tsx
rename to docs/app/(home)/sections/ShiroMascot/ShiroMascot.tsx
diff --git a/docs/app/(home)/sections/StepsSection/StepsSection.module.css b/docs/app/(home)/sections/StepsSection/StepsSection.module.css
new file mode 100644
index 000000000..fe0ef96ce
--- /dev/null
+++ b/docs/app/(home)/sections/StepsSection/StepsSection.module.css
@@ -0,0 +1,10 @@
+.section {
+  width: 100%;
+  padding-inline: var(--home-section-padding-inline);
+}
+
+.container {
+  max-width: 75rem;
+  margin-inline: auto;
+}
+
diff --git a/docs/app/(home)/sections/StepsSection/StepsSection.tsx b/docs/app/(home)/sections/StepsSection/StepsSection.tsx
new file mode 100644
index 000000000..20998b2a2
--- /dev/null
+++ b/docs/app/(home)/sections/StepsSection/StepsSection.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import LlmRespondsInOpenUiLang from "@/imports/LlmRespondsInOpenUiLang";
+import OpenUiGeneratesSchema from "@/imports/OpenUiGeneratesSchema";
+import OpenUiRendererRendersIt from "@/imports/OpenUiRendererRendersIt-43-427";
+import YouRegisterComponents from "@/imports/YouRegisterComponents-43-365";
+import { StepsAccordion, type StepsAccordionItem } from "../../components/StepsAccordion/StepsAccordion";
+import styles from "./StepsSection.module.css";
+
+// ---------------------------------------------------------------------------
+// Types & data
+// ---------------------------------------------------------------------------
+
+const STEPS: StepsAccordionItem[] = [
+  {
+    number: 1,
+    title: "You define your library",
+    description: "Register components with defineComponent and createLibrary.",
+    details: [],
+    Illustration: YouRegisterComponents,
+  },
+  {
+    number: 2,
+    title: "OpenUI generates system prompt",
+    description:
+      "Generate a system prompt from your library with the OpenUI CLI or library.prompt() and send it to the LLM.",
+    details: [],
+    Illustration: OpenUiGeneratesSchema,
+  },
+  {
+    number: 3,
+    title: "LLM responds in OpenUI Lang",
+    description: "The model returns token-efficient, line-oriented OpenUI Lang (not markdown).",
+    details: [],
+    Illustration: LlmRespondsInOpenUiLang,
+  },
+  {
+    number: 4,
+    title: "Renderer parses and renders UI",
+    description: "Renderer parses the output and renders interactive UI in real time.",
+    details: [],
+    Illustration: OpenUiRendererRendersIt,
+  },
+];
+
+export function StepsSection() {
+  return (
+    <section className={styles.section}>
+      <div className={styles.container}>
+        <StepsAccordion steps={STEPS} />
+      </div>
+    </section>
+  );
+}
diff --git a/docs/app/(home)/components/UILibrariesSection/UILibrariesSection.module.css b/docs/app/(home)/sections/UILibrariesSection/UILibrariesSection.module.css
similarity index 74%
rename from docs/app/(home)/components/UILibrariesSection/UILibrariesSection.module.css
rename to docs/app/(home)/sections/UILibrariesSection/UILibrariesSection.module.css
index 77fc6c1c5..99e6f36d0 100644
--- a/docs/app/(home)/components/UILibrariesSection/UILibrariesSection.module.css
+++ b/docs/app/(home)/sections/UILibrariesSection/UILibrariesSection.module.css
@@ -1,6 +1,6 @@
 .section {
   width: 100%;
-  padding-inline: 1.25rem;
+  padding-inline: var(--home-section-padding-inline);
 }
 
 .container {
@@ -39,9 +39,9 @@
   display: flex;
   flex: 1;
   height: 3.5rem;
-  border: 1px solid rgb(0 0 0 / 10%);
+  border: 1px solid var(--home-border-default);
   border-radius: 14px;
-  background: #fff;
+  background: var(--home-color-surface);
   box-shadow: 0 4px 10px -4px rgb(22 34 51 / 5%);
 }
 
@@ -64,6 +64,18 @@
   border-radius: 6.4px;
 }
 
+.iconBadgeOpenUi {
+  background: var(--home-color-surface-muted);
+}
+
+.iconBadgeShadcn {
+  background: #000;
+}
+
+.iconBadgeMaterial {
+  background: #a485ff;
+}
+
 .mascotCenter {
   position: absolute;
   inset: 0;
@@ -97,10 +109,20 @@
 
 .iconPlacement {
   position: absolute;
-  left: var(--icon-mobile-left);
-  top: var(--icon-mobile-top);
-  height: var(--icon-mobile-size);
-  width: var(--icon-mobile-size);
+}
+
+.iconPlacementShadcn {
+  left: 8px;
+  top: 8px;
+  height: 16px;
+  width: 16px;
+}
+
+.iconPlacementMaterial {
+  left: 6px;
+  top: 6px;
+  height: 20px;
+  width: 20px;
 }
 
 .name {
@@ -112,10 +134,6 @@
 }
 
 @media (min-width: 1024px) {
-  .section {
-    padding-inline: 2rem;
-  }
-
   .header {
     margin-bottom: 2rem;
   }
@@ -157,10 +175,20 @@
   }
 
   .iconPlacement {
-    left: var(--icon-desktop-left);
-    top: var(--icon-desktop-top);
-    height: var(--icon-desktop-size);
-    width: var(--icon-desktop-size);
+  }
+
+  .iconPlacementShadcn {
+    left: 12px;
+    top: 12px;
+    height: 24px;
+    width: 24px;
+  }
+
+  .iconPlacementMaterial {
+    left: 9px;
+    top: 9px;
+    height: 30px;
+    width: 30px;
   }
 
   .name {
diff --git a/docs/app/(home)/components/UILibrariesSection/UILibrariesSection.tsx b/docs/app/(home)/sections/UILibrariesSection/UILibrariesSection.tsx
similarity index 80%
rename from docs/app/(home)/components/UILibrariesSection/UILibrariesSection.tsx
rename to docs/app/(home)/sections/UILibrariesSection/UILibrariesSection.tsx
index 9cb5cdaee..096513d80 100644
--- a/docs/app/(home)/components/UILibrariesSection/UILibrariesSection.tsx
+++ b/docs/app/(home)/sections/UILibrariesSection/UILibrariesSection.tsx
@@ -1,4 +1,3 @@
-import type { CSSProperties } from "react";
 import mascotSvgPaths from "@/imports/svg-10waxq0xyc";
 import svgPaths from "@/imports/svg-urruvoh2be";
 import styles from "./UILibrariesSection.module.css";
@@ -13,9 +12,8 @@ interface UILibrary {
   desktopName?: string;
   /** Mobile-only name override (optional) */
   mobileName?: string;
-  iconBackground: string;
-  iconSize?: { mobile: number; desktop: number };
-  iconPosition?: { mobile: { left: number; top: number }; desktop: { left: number; top: number } };
+  iconBadgeClassName?: string;
+  iconPlacementClassName?: string;
   iconViewBox: string;
   iconPath: string;
   iconFill: string;
@@ -27,7 +25,7 @@ interface UILibrary {
 const LIBRARIES: UILibrary[] = [
   {
     name: "OpenUI Design system",
-    iconBackground: "rgb(0 0 0 / 8%)",
+    iconBadgeClassName: styles.iconBadgeOpenUi,
     iconViewBox: "",
     iconPath: "",
     iconFill: "black",
@@ -35,9 +33,8 @@ const LIBRARIES: UILibrary[] = [
   },
   {
     name: "ShadCN",
-    iconBackground: "#000000",
-    iconSize: { mobile: 16, desktop: 24 },
-    iconPosition: { mobile: { left: 8, top: 8 }, desktop: { left: 12, top: 12 } },
+    iconBadgeClassName: styles.iconBadgeShadcn,
+    iconPlacementClassName: styles.iconPlacementShadcn,
     iconViewBox: "0 0 24 24",
     iconPath: svgPaths.p46a4800,
     iconFill: "white",
@@ -47,9 +44,8 @@ const LIBRARIES: UILibrary[] = [
   {
     name: "Material Design system",
     mobileName: "Material Design system Guidelines",
-    iconBackground: "#a485ff",
-    iconSize: { mobile: 20, desktop: 30 },
-    iconPosition: { mobile: { left: 6, top: 6 }, desktop: { left: 9, top: 9 } },
+    iconBadgeClassName: styles.iconBadgeMaterial,
+    iconPlacementClassName: styles.iconPlacementMaterial,
     iconViewBox: "0 0 30 30",
     iconPath: svgPaths.p3a7bdd80,
     iconFill: "white",
@@ -63,18 +59,6 @@ const LIBRARIES: UILibrary[] = [
 // ---------------------------------------------------------------------------
 
 function LibraryCard({ lib }: { lib: UILibrary }) {
-  const iconStyle =
-    lib.iconSize && lib.iconPosition
-      ? ({
-          "--icon-mobile-left": `${lib.iconPosition.mobile.left}px`,
-          "--icon-mobile-top": `${lib.iconPosition.mobile.top}px`,
-          "--icon-mobile-size": `${lib.iconSize.mobile}px`,
-          "--icon-desktop-left": `${lib.iconPosition.desktop.left}px`,
-          "--icon-desktop-top": `${lib.iconPosition.desktop.top}px`,
-          "--icon-desktop-size": `${lib.iconSize.desktop}px`,
-        } as CSSProperties)
-      : undefined;
-
   const displayName = lib.mobileName ? (
     <>
       <span className={styles.mobileOnly}>{lib.mobileName}</span>
@@ -105,10 +89,7 @@ function LibraryCard({ lib }: { lib: UILibrary }) {
     <div className={styles.card}>
       <div className={styles.cardContent}>
         {/* Icon */}
-        <div
-          className={styles.iconBadge}
-          style={{ backgroundColor: lib.iconBackground }}
-        >
+        <div className={`${styles.iconBadge} ${lib.iconBadgeClassName ?? ""}`.trim()}>
           {lib.isMascot ? (
             <div className={styles.mascotCenter}>
               <div className={styles.mascotFrame}>
@@ -157,7 +138,7 @@ function LibraryCard({ lib }: { lib: UILibrary }) {
               </div>
             </div>
           ) : (
-            <div className={styles.iconPlacement} style={iconStyle}>
+            <div className={`${styles.iconPlacement} ${lib.iconPlacementClassName ?? ""}`.trim()}>
               {iconContent}
             </div>
           )}
diff --git a/docs/app/blog/components/BlogNavbar.tsx b/docs/app/blog/components/BlogNavbar.tsx
index f4823b52e..9a8360916 100644
--- a/docs/app/blog/components/BlogNavbar.tsx
+++ b/docs/app/blog/components/BlogNavbar.tsx
@@ -2,6 +2,7 @@
 
 import {
   GitHubIcon,
+  GitHubStarButton,
   OpenUILogo,
   StarCountBadge,
   ThesysLogo,
@@ -65,7 +66,7 @@ function HamburgerIcon({ isOpen }: { isOpen: boolean }) {
   );
 }
 
-function MobileMenu({ starCount, onClose }: { starCount: number; onClose: () => void }) {
+function MobileMenu({ starCount, onClose }: { starCount: number | null; onClose: () => void }) {
   const mobileGithubStyle = {
     "--mobile-github-button-shadow": BUTTON_SHADOW,
   } as CSSProperties;
@@ -177,18 +178,8 @@ export function BlogNavbar() {
         <DesktopNavTabs />
 
         <div className="hidden lg:flex items-center gap-2">
-          <a
-            href="https://github.com/thesysdev/openui"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center justify-center size-9 rounded-lg text-fd-muted-foreground no-underline hover:text-fd-foreground hover:bg-fd-accent transition-colors"
-            aria-label="GitHub"
-          >
-            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
-              <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" />
-            </svg>
-          </a>
           <ThemeToggle />
+          <GitHubStarButton repo="thesysdev/openui" isScrolled={isScrolled} />
         </div>
 
         <button
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
index 0afd913f6..06a3f8213 100644
--- a/docs/app/layout.tsx
+++ b/docs/app/layout.tsx
@@ -1,6 +1,6 @@
 import { RootProvider } from "fumadocs-ui/provider/next";
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Geist_Mono, Inter } from "next/font/google";
 import Script from "next/script";
 import { BASE_URL } from "../lib/source";
 import "./global.css";
@@ -10,30 +10,88 @@ const inter = Inter({
   subsets: ["latin"],
 });
 
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+const SITE_TITLE = "OpenUI — The Open Standard for Generative UI";
+const SITE_DESCRIPTION =
+  "OpenUI is a full-stack Generative UI framework with a compact streaming-first language, a React runtime with built-in components, and ready-to-use chat interfaces—using up to 67% fewer tokens than JSON.";
+const SITE_IMAGE = "/docs/images/home/meta-image.png";
+
 export const metadata: Metadata = {
   metadataBase: new URL(BASE_URL),
   title: {
-    default: "OpenUI",
-    template: "%s | OpenUI",
+    default: SITE_TITLE,
+    template: `%s | ${SITE_TITLE}`,
   },
-  description: "The Open Standard for Generative UI",
-  openGraph: {
-    images: ["/meta-image.png"],
-  },
-  twitter: {
-    card: "summary_large_image",
-    images: ["/meta-image.png"],
+  description: SITE_DESCRIPTION,
+  applicationName: SITE_TITLE,
+  referrer: "origin-when-cross-origin",
+  keywords: [
+    "OpenUI",
+    "Generative UI",
+    "AI UI",
+    "OpenUI Lang",
+    "React",
+    "LLM",
+    "AI apps",
+    "streaming UI",
+  ],
+  authors: [{ name: "OpenUI" }],
+  creator: "OpenUI",
+  publisher: "OpenUI",
+  category: "technology",
+  alternates: {
+    canonical: "/",
   },
   icons: {
     icon: "/favicon.svg",
     shortcut: "/favicon.svg",
     apple: "/favicon.svg",
   },
+  openGraph: {
+    type: "website",
+    url: "/",
+    siteName: SITE_TITLE,
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
+    images: [
+      {
+        url: SITE_IMAGE,
+        width: 1200,
+        height: 630,
+        alt: "OpenUI preview",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: SITE_TITLE,
+    description: SITE_DESCRIPTION,
+    images: [SITE_IMAGE],
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+      "max-video-preview": -1,
+    },
+  },
 };
 
 export default function Layout({ children }: LayoutProps<"/">) {
   return (
-    <html lang="en" className={inter.className} suppressHydrationWarning>
+    <html
+      lang="en"
+      className={`${inter.className} ${geistMono.variable}`}
+      suppressHydrationWarning
+    >
       <body className="flex flex-col min-h-screen">
         <PHProvider>
           <RootProvider>{children}</RootProvider>
diff --git a/docs/components/brand-logo.tsx b/docs/components/brand-logo.tsx
index 2eb664bd1..ab148f66f 100644
--- a/docs/components/brand-logo.tsx
+++ b/docs/components/brand-logo.tsx
@@ -7,7 +7,7 @@ import { AnimatePresence, motion } from "motion/react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
-const COUNT_UP_DURATION = 3000;
+const COUNT_UP_DURATION = 1500;
 const BUTTON_SHADOW = "0px 1px 3px 0px rgba(22,34,51,0.08), 0px 12px 24px 0px rgba(22,34,51,0.04)";
 
 const LOGO_SPRING = { type: "spring", stiffness: 400, damping: 15 } as const;
@@ -162,32 +162,47 @@ export function OpenUILogo({ variant = "light" }: { variant?: LogoVariant }) {
 // ---------------------------------------------------------------------------
 
 export function useGitHubStarCount(repo: string) {
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState<number | null>(null);
 
   useEffect(() => {
+    let cancelled = false;
+
     fetch(`https://api.github.com/repos/${repo}`)
-      .then((res) => res.json())
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(`GitHub star count fetch failed: ${res.status}`);
+        }
+        return res.json();
+      })
       .then((data) => {
         const target: unknown = data.stargazers_count;
         if (typeof target !== "number") return;
+        if (!cancelled) {
+          const startCount = Math.max(target - 50, 0);
+          const startTime = performance.now();
+
+          setCount(startCount);
 
-        let cancelled = false;
-        const startTime = performance.now();
+          const tick = () => {
+            if (cancelled) return;
 
-        const tick = () => {
-          if (cancelled) return;
-          const progress = Math.min((performance.now() - startTime) / COUNT_UP_DURATION, 1);
-          const eased = 1 - Math.pow(1 - progress, 3);
-          setCount(Math.round(eased * target));
-          if (progress < 1) requestAnimationFrame(tick);
-        };
+            const progress = Math.min((performance.now() - startTime) / COUNT_UP_DURATION, 1);
+            const nextCount = Math.round(startCount + (target - startCount) * progress);
+            setCount(nextCount);
 
-        requestAnimationFrame(tick);
-        return () => {
-          cancelled = true;
-        };
+            if (progress < 1) {
+              requestAnimationFrame(tick);
+            }
+          };
+
+          requestAnimationFrame(tick);
+        }
       })
       .catch(() => {});
+
+    return () => {
+      cancelled = true;
+    };
   }, [repo]);
 
   return count;
@@ -214,19 +229,20 @@ export function StarCountBadge({
   count,
   isHighlighted,
 }: {
-  count: number;
+  count: number | null;
   isHighlighted: boolean;
 }) {
   return (
     <div
-      className="rounded-full h-7 flex items-center justify-center px-2 transition-colors duration-200"
+      className="rounded-full h-7 min-w-14 flex items-center justify-center px-2 transition-colors duration-200"
       style={{ backgroundColor: isHighlighted ? "black" : "rgba(0,0,0,0.06)" }}
     >
       <span
-        className="font-['Inter',sans-serif] font-medium text-[15px] leading-6 tabular-nums transition-colors duration-200"
+        className="font-['Inter',sans-serif] font-medium text-[15px] leading-6 tabular-nums transition-[color,opacity] duration-200"
         style={{ color: isHighlighted ? "white" : "black" }}
+        aria-hidden={count === null}
       >
-        {count}
+        <span className={count === null ? "opacity-0" : "opacity-100"}>{count ?? "0000"}</span>
       </span>
     </div>
   );
diff --git a/docs/components/docs-navbar.tsx b/docs/components/docs-navbar.tsx
index 96cde91ef..b8f9dd332 100644
--- a/docs/components/docs-navbar.tsx
+++ b/docs/components/docs-navbar.tsx
@@ -7,7 +7,7 @@ import { useTheme } from "next-themes";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
-import { OpenUILogo, ThesysLogo } from "./brand-logo";
+import { GitHubStarButton, OpenUILogo, ThesysLogo } from "./brand-logo";
 import { ThemeToggle } from "./theme-toggle";
 
 const tabs = [
@@ -110,7 +110,7 @@ export function DocsNavbar({ showSidebarToggle = false }: { showSidebarToggle?:
         {/* Actions */}
         <div className="hidden md:flex items-center gap-3 ml-auto shrink-0">
           <SearchBar />
-          <div className="flex items-center gap-0.5">
+          <div className="flex items-center gap-2">
             {/* Discord */}
             <Link
               href={siteConfig.discordUrl}
@@ -123,20 +123,9 @@ export function DocsNavbar({ showSidebarToggle = false }: { showSidebarToggle?:
                 <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
               </svg>
             </Link>
-            {/* GitHub */}
-            <Link
-              href={siteConfig.githubUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center justify-center size-9 rounded-lg text-fd-muted-foreground no-underline hover:text-fd-foreground hover:bg-fd-accent transition-colors"
-              aria-label="GitHub"
-            >
-              <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
-                <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" />
-              </svg>
-            </Link>
             {/* Theme toggle */}
             <ThemeToggle />
+            <GitHubStarButton repo="thesysdev/openui" />
           </div>
         </div>
       </div>
diff --git a/docs/public/images/home/meta-image.png b/docs/public/images/home/meta-image.png
new file mode 100644
index 000000000..3e513db15
Binary files /dev/null and b/docs/public/images/home/meta-image.png differ
diff --git a/examples/form-generator/next-env.d.ts b/examples/form-generator/next-env.d.ts
new file mode 100644
index 000000000..c4b7818fb
--- /dev/null
+++ b/examples/form-generator/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.