From 6e1aeae1208e2f216b62d716f8064c535b570cb4 Mon Sep 17 00:00:00 2001
From: pr3khar <prakhar19376@iiitd.ac.in>
Date: Wed, 11 Mar 2026 15:28:20 +0530
Subject: [PATCH 1/2] styling optimizations and added a github banner for
 mobile

---
 .../BuildChatSection.module.css               | 186 ++++++++
 .../BuildChatSection.tsx                      |  51 +--
 .../CompatibilitySection.module.css           | 109 +++++
 .../CompatibilitySection.tsx                  |  56 +--
 docs/app/(home)/components/FadeInSection.tsx  |  26 --
 .../FadeInSection/FadeInSection.module.css    |   3 +
 .../FadeInSection/FadeInSection.tsx           |  17 +
 .../app/(home)/components/FeaturesSection.tsx | 233 ----------
 .../FeaturesSection.module.css                | 191 ++++++++
 .../FeaturesSection/FeaturesSection.tsx       | 164 +++++++
 .../components/Footer/Footer.module.css       | 167 +++++++
 .../(home)/components/{ => Footer}/Footer.tsx |  78 ++--
 .../GradientDivider.module.css                |  24 +
 .../{ => GradientDivider}/GradientDivider.tsx |   5 +-
 .../HeroSection/HeroSection.module.css        | 432 ++++++++++++++++++
 .../{ => HeroSection}/HeroSection.tsx         | 238 ++++------
 .../components/Navbar/Navbar.module.css       | 189 ++++++++
 .../(home)/components/{ => Navbar}/Navbar.tsx |  68 ++-
 .../PossibilitiesSection.module.css           | 135 ++++++
 .../PossibilitiesSection.tsx                  |  33 +-
 .../ShiroMascot/ShiroMascot.module.css        |  21 +
 .../{ => ShiroMascot}/ShiroMascot.tsx         |  13 +-
 .../StepsSection/StepsSection.module.css      | 213 +++++++++
 .../{ => StepsSection}/StepsSection.tsx       |  65 +--
 .../UILibrariesSection.module.css             | 169 +++++++
 .../UILibrariesSection.tsx                    |  83 ++--
 .../components/shared/shared.module.css       |   5 +
 .../(home)/components/{ => shared}/shared.tsx |   5 +-
 docs/app/(home)/layout.tsx                    |   2 +-
 docs/app/(home)/page.module.css               |  47 ++
 docs/app/(home)/page.tsx                      |  33 +-
 docs/components/brand-logo.tsx                |   8 +-
 32 files changed, 2409 insertions(+), 660 deletions(-)
 create mode 100644 docs/app/(home)/components/BuildChatSection/BuildChatSection.module.css
 rename docs/app/(home)/components/{ => BuildChatSection}/BuildChatSection.tsx (56%)
 create mode 100644 docs/app/(home)/components/CompatibilitySection/CompatibilitySection.module.css
 rename docs/app/(home)/components/{ => CompatibilitySection}/CompatibilitySection.tsx (60%)
 delete mode 100644 docs/app/(home)/components/FadeInSection.tsx
 create mode 100644 docs/app/(home)/components/FadeInSection/FadeInSection.module.css
 create mode 100644 docs/app/(home)/components/FadeInSection/FadeInSection.tsx
 delete mode 100644 docs/app/(home)/components/FeaturesSection.tsx
 create mode 100644 docs/app/(home)/components/FeaturesSection/FeaturesSection.module.css
 create mode 100644 docs/app/(home)/components/FeaturesSection/FeaturesSection.tsx
 create mode 100644 docs/app/(home)/components/Footer/Footer.module.css
 rename docs/app/(home)/components/{ => Footer}/Footer.tsx (65%)
 create mode 100644 docs/app/(home)/components/GradientDivider/GradientDivider.module.css
 rename docs/app/(home)/components/{ => GradientDivider}/GradientDivider.tsx (75%)
 create mode 100644 docs/app/(home)/components/HeroSection/HeroSection.module.css
 rename docs/app/(home)/components/{ => HeroSection}/HeroSection.tsx (51%)
 create mode 100644 docs/app/(home)/components/Navbar/Navbar.module.css
 rename docs/app/(home)/components/{ => Navbar}/Navbar.tsx (65%)
 create mode 100644 docs/app/(home)/components/PossibilitiesSection/PossibilitiesSection.module.css
 rename docs/app/(home)/components/{ => PossibilitiesSection}/PossibilitiesSection.tsx (75%)
 create mode 100644 docs/app/(home)/components/ShiroMascot/ShiroMascot.module.css
 rename docs/app/(home)/components/{ => ShiroMascot}/ShiroMascot.tsx (68%)
 create mode 100644 docs/app/(home)/components/StepsSection/StepsSection.module.css
 rename docs/app/(home)/components/{ => StepsSection}/StepsSection.tsx (77%)
 create mode 100644 docs/app/(home)/components/UILibrariesSection/UILibrariesSection.module.css
 rename docs/app/(home)/components/{ => UILibrariesSection}/UILibrariesSection.tsx (64%)
 create mode 100644 docs/app/(home)/components/shared/shared.module.css
 rename docs/app/(home)/components/{ => shared}/shared.tsx (78%)
 create mode 100644 docs/app/(home)/page.module.css

diff --git a/docs/app/(home)/components/BuildChatSection/BuildChatSection.module.css b/docs/app/(home)/components/BuildChatSection/BuildChatSection.module.css
new file mode 100644
index 000000000..e88468323
--- /dev/null
+++ b/docs/app/(home)/components/BuildChatSection/BuildChatSection.module.css
@@ -0,0 +1,186 @@
+.section {
+  width: 100%;
+  padding-inline: 1.25rem;
+}
+
+.container {
+  max-width: 75rem;
+  margin-inline: auto;
+}
+
+.card {
+  position: relative;
+  overflow: hidden;
+  border-radius: 32px;
+  background: #fff;
+}
+
+.overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border: 1px solid rgb(0 0 0 / 10%);
+  border-radius: 32px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem;
+}
+
+.copyColumn {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.copyStack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.title {
+  max-width: 430px;
+  font-family: "Inter", sans-serif;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 1.2;
+  color: #000;
+  margin: auto;
+  text-align: center;
+}
+
+.descriptionWrap {
+  max-width: 357px;
+}
+
+.description {
+  font-family: "Inter Display", sans-serif;
+  font-size: 18px;
+  line-height: 1.4;
+  color: rgb(0 0 0 / 40%);
+}
+
+.ctaWrap {
+  display: flex;
+  justify-content: center;
+  padding-top: 1rem;
+  margin-top: 1.5rem;
+}
+
+.ctaButton {
+  position: relative;
+  display: flex;
+  width: 100%;
+  max-width: 280px;
+  align-items: center;
+  justify-content: center;
+  gap: 0.625rem;
+  height: 3rem;
+  padding-inline: 1.25rem;
+  border: 0;
+  border-radius: 999px;
+  background: #000;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.ctaButton:hover {
+  transform: scale(0.99);
+  box-shadow: none;
+}
+
+.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);
+}
+
+.ctaLabel {
+  position: relative;
+  white-space: nowrap;
+  font-family: "Inter Display", sans-serif;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.5rem;
+  color: #fff;
+}
+
+.mediaColumn {
+  width: 100%;
+  flex-shrink: 0;
+}
+
+.dashboardImage {
+  width: 100%;
+  height: auto;
+  border-radius: 12px;
+  object-fit: contain;
+}
+
+@media (min-width: 1024px) {
+  .section {
+    padding-inline: 2rem;
+  }
+
+  .content {
+    flex-direction: row;
+    gap: 0;
+  }
+
+  .copyColumn {
+    min-height: 0;
+    padding:16px;
+  }
+
+
+  .title {
+    max-width: 430px;
+    font-family: "Inter", sans-serif;
+    font-size: 36px;
+    font-weight: 600;
+    line-height: 1.2;
+    color: #000;
+    margin: 4px 0 0 4px;
+    text-align: left;
+  }
+
+  .ctaWrap {
+    justify-content: flex-start;
+    margin-top: 0;
+  }
+
+  .ctaButton {
+    width: auto;
+    max-width: none;
+    justify-content: flex-start;
+  }
+
+  .mediaColumn {
+    width: 600px;
+  }
+}
diff --git a/docs/app/(home)/components/BuildChatSection.tsx b/docs/app/(home)/components/BuildChatSection/BuildChatSection.tsx
similarity index 56%
rename from docs/app/(home)/components/BuildChatSection.tsx
rename to docs/app/(home)/components/BuildChatSection/BuildChatSection.tsx
index a40a62f95..2d50ed0a6 100644
--- a/docs/app/(home)/components/BuildChatSection.tsx
+++ b/docs/app/(home)/components/BuildChatSection/BuildChatSection.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { CopyIcon } from "./shared";
+import { CopyIcon } from "../shared/shared";
+import styles from "./BuildChatSection.module.css";
 
 const dashboardImg = "/images/home/d67b5e94653944c1d0d4998c6b169c37f98060ad.png";
 
@@ -16,22 +17,7 @@ const CARD_SHADOW = "0px 8px 16px -4px rgba(22,34,51,0.08)";
 // ---------------------------------------------------------------------------
 
 function SectionTitle() {
-  return (
-    <p className="font-['Inter',sans-serif] font-semibold text-[22px] lg:text-4xl text-black leading-[1.25] max-w-[430px]">
-      Build an AI chat in minutes
-    </p>
-  );
-}
-
-function SectionDescription() {
-  return (
-    <div className="max-w-[357px]">
-      <p className="font-['Inter_Display',sans-serif] text-lg text-black/40 leading-[1.4]">
-        This scaffolds a Reference chat interface with a beautiful Component library and a fully
-        functional OpenUI lang and Renderer.
-      </p>
-    </div>
-  );
+  return <p className={styles.title}>Build a Generative UI chat in minutes</p>;
 }
 
 function CtaButton() {
@@ -61,19 +47,19 @@ function CtaButton() {
   };
 
   return (
-    <div className="flex items-center justify-center lg:justify-start mt-6 lg:mt-0 pt-4">
+    <div className={styles.ctaWrap}>
       <button
         onClick={handleClick}
-        className="bg-black rounded-full h-12 px-5 flex items-center gap-2.5 cursor-pointer relative transition-all duration-200 hover:scale-105 w-full max-w-[280px] lg:max-w-none lg:w-auto justify-center lg:justify-start"
+        className={styles.ctaButton}
       >
-        <span className="relative size-4 flex items-center justify-center">
+        <span className={styles.iconFrame}>
           <span
-            className={`absolute transition-all duration-300 ${copied ? "opacity-0 scale-50" : "opacity-100 scale-100"}`}
+            className={`${styles.iconLayer} ${copied ? styles.iconHidden : styles.iconVisible}`}
           >
             <CopyIcon />
           </span>
           <svg
-            className={`size-4 absolute transition-all duration-300 ${copied ? "opacity-100 scale-100" : "opacity-0 scale-50"}`}
+            className={`${styles.iconLayer} ${copied ? styles.iconVisible : styles.iconHidden}`}
             fill="none"
             viewBox="0 0 14 14"
           >
@@ -86,7 +72,7 @@ function CtaButton() {
             />
           </svg>
         </span>
-        <span className="font-['Inter_Display',sans-serif] font-medium text-[18px] leading-6 text-white relative whitespace-nowrap">
+        <span className={styles.ctaLabel}>
           npx create openui-app chat
         </span>
       </button>
@@ -99,7 +85,7 @@ function DashboardIllustration() {
     <img
       src={dashboardImg}
       alt="AI chat dashboard illustration"
-      className="w-full h-auto rounded-[12px] object-contain"
+      className={styles.dashboardImage}
     />
   );
 }
@@ -110,28 +96,27 @@ function DashboardIllustration() {
 
 export function BuildChatSection() {
   return (
-    <div className="w-full px-5 lg:px-8">
-      <div className="max-w-[1200px] mx-auto">
-        <div className="bg-white rounded-[16px] relative overflow-hidden">
+    <div className={styles.section}>
+      <div className={styles.container}>
+        <div className={styles.card}>
           {/* Border + shadow overlay */}
           <div
             aria-hidden="true"
-            className="absolute border border-[rgba(0,0,0,0.1)] border-solid inset-0 pointer-events-none rounded-[16px]"
+            className={styles.overlay}
             style={{ boxShadow: CARD_SHADOW }}
           />
 
-          <div className="flex flex-col lg:flex-row p-6 gap-6 lg:gap-0">
+          <div className={styles.content}>
             {/* Left: text content */}
-            <div className="flex flex-col flex-1 justify-between min-h-[240px] lg:min-h-0">
-              <div className="flex flex-col gap-3">
+            <div className={styles.copyColumn}>
+              <div className={styles.copyStack}>
                 <SectionTitle />
-                <SectionDescription />
               </div>
               <CtaButton />
             </div>
 
             {/* Right: illustration */}
-            <div className="w-full lg:w-[600px] shrink-0">
+            <div className={styles.mediaColumn}>
               <DashboardIllustration />
             </div>
           </div>
diff --git a/docs/app/(home)/components/CompatibilitySection/CompatibilitySection.module.css b/docs/app/(home)/components/CompatibilitySection/CompatibilitySection.module.css
new file mode 100644
index 000000000..e087df6a3
--- /dev/null
+++ b/docs/app/(home)/components/CompatibilitySection/CompatibilitySection.module.css
@@ -0,0 +1,109 @@
+.section {
+  width: 100%;
+  padding-inline: 1.25rem;
+}
+
+.container {
+  max-width: 75rem;
+  margin-inline: auto;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.label {
+  flex-shrink: 0;
+  font-family: "Inter", sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgb(0 0 0 / 30%);
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.chip {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.625rem;
+  border: 1px solid rgb(0 0 0 / 8%);
+  border-radius: 999px;
+  background: #fff;
+  box-shadow: 0 2px 8px -2px rgb(22 34 51 / 8%);
+}
+
+.badge {
+  display: flex;
+  height: 1.375rem;
+  width: 1.375rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 5px;
+}
+
+.badgeWithBorder {
+  border: 1px solid rgb(0 0 0 / 10%);
+}
+
+.badgeImage {
+  height: 0.875rem;
+  width: 0.875rem;
+  object-fit: contain;
+}
+
+.chipLabel,
+.more {
+  font-family: "Inter", sans-serif;
+  font-size: 13px;
+  line-height: 1;
+  white-space: nowrap;
+  color: rgb(0 0 0 / 60%);
+}
+
+.chipLabel {
+  font-weight: 500;
+}
+
+.more {
+  margin-left: 0.25rem;
+  color: rgb(0 0 0 / 30%);
+}
+
+.divider {
+  height: 1px;
+  background: rgb(0 0 0 / 6%);
+}
+
+@media (min-width: 1024px) {
+  .section {
+    padding-inline: 2rem;
+  }
+
+  .stack {
+    gap: 1.25rem;
+  }
+
+  .row {
+    flex-direction: row;
+    align-items: center;
+  }
+}
diff --git a/docs/app/(home)/components/CompatibilitySection.tsx b/docs/app/(home)/components/CompatibilitySection/CompatibilitySection.tsx
similarity index 60%
rename from docs/app/(home)/components/CompatibilitySection.tsx
rename to docs/app/(home)/components/CompatibilitySection/CompatibilitySection.tsx
index 7685a73c8..b2717d257 100644
--- a/docs/app/(home)/components/CompatibilitySection.tsx
+++ b/docs/app/(home)/components/CompatibilitySection/CompatibilitySection.tsx
@@ -2,6 +2,8 @@
 // Data
 // ---------------------------------------------------------------------------
 
+import styles from "./CompatibilitySection.module.css";
+
 interface CompatibilityItem {
   name: string;
   slug?: string;
@@ -16,27 +18,27 @@ const LLMS: CompatibilityItem[] = [
     name: "OpenAI",
     localSrc: "/brand-icons/openai.svg",
     iconColor: "000000",
-    badgeBg: "bg-white",
+    badgeBg: "#ffffff",
     border: true,
   },
-  { name: "Anthropic", slug: "anthropic", iconColor: "ffffff", badgeBg: "bg-[#D4A574]" },
-  { name: "Gemini", slug: "googlegemini", iconColor: "000000", badgeBg: "bg-white", border: true },
-  { name: "Mistral", slug: "mistralai", iconColor: "ffffff", badgeBg: "bg-[#FF7000]" },
+  { 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" },
 ];
 
 const FRAMEWORKS: CompatibilityItem[] = [
-  { name: "Vercel AI SDK", slug: "vercel", iconColor: "ffffff", badgeBg: "bg-black" },
-  { name: "LangChain", slug: "langchain", iconColor: "ffffff", badgeBg: "bg-[#1C3144]" },
-  { name: "CrewAI", slug: "crewai", iconColor: "ffffff", badgeBg: "bg-[#FF4B4B]" },
+  { 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: "OpenAI Agents SDK",
     localSrc: "/brand-icons/openai.svg",
     iconColor: "000000",
-    badgeBg: "bg-white",
+    badgeBg: "#ffffff",
     border: true,
   },
-  { name: "Anthropic Agents SDK", slug: "anthropic", iconColor: "ffffff", badgeBg: "bg-[#D4A574]" },
-  { name: "Google ADK", slug: "google", iconColor: "ffffff", badgeBg: "bg-[#4285F4]" },
+  { name: "Anthropic Agents SDK", slug: "anthropic", iconColor: "ffffff", badgeBg: "#D4A574" },
+  { name: "Google ADK", slug: "google", iconColor: "ffffff", badgeBg: "#4285F4" },
 ];
 
 // ---------------------------------------------------------------------------
@@ -44,12 +46,12 @@ const FRAMEWORKS: CompatibilityItem[] = [
 // ---------------------------------------------------------------------------
 
 function Chip({ item }: { item: CompatibilityItem }) {
-  const borderClass = item.border ? "border border-black/10" : "";
   const imgSrc = item.localSrc ?? `https://cdn.simpleicons.org/${item.slug}/${item.iconColor}`;
   return (
-    <div className="flex items-center gap-1.5 bg-white rounded-full px-2.5 py-1.5 border border-black/8 shadow-[0px_2px_8px_-2px_rgba(22,34,51,0.08)]">
+    <div className={styles.chip}>
       <div
-        className={`${item.badgeBg} ${borderClass} rounded-[5px] size-5.5 shrink-0 flex items-center justify-center overflow-hidden`}
+        className={`${styles.badge} ${item.border ? styles.badgeWithBorder : ""}`}
+        style={{ backgroundColor: item.badgeBg }}
       >
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
@@ -57,10 +59,10 @@ function Chip({ item }: { item: CompatibilityItem }) {
           alt={item.name}
           width={14}
           height={14}
-          className="size-3.5 object-contain"
+          className={styles.badgeImage}
         />
       </div>
-      <span className="font-['Inter',sans-serif] text-[13px] font-medium text-black/60 leading-none whitespace-nowrap">
+      <span className={styles.chipLabel}>
         {item.name}
       </span>
     </div>
@@ -73,37 +75,37 @@ function Chip({ item }: { item: CompatibilityItem }) {
 
 export function CompatibilitySection() {
   return (
-    <div className="w-full px-5 lg:px-8">
-      <div className="max-w-300 mx-auto">
-        <div className="flex flex-col gap-4 lg:gap-5">
+    <div className={styles.section}>
+      <div className={styles.container}>
+        <div className={styles.stack}>
           {/* LLMs row */}
-          <div className="flex flex-col lg:flex-row lg:items-center gap-3">
-            <span className="font-['Inter',sans-serif] text-[13px] font-medium text-black/30 uppercase tracking-wider shrink-0">
+          <div className={styles.row}>
+            <span className={styles.label}>
               Any LLM
             </span>
-            <div className="flex flex-wrap items-center gap-2">
+            <div className={styles.chips}>
               {LLMS.map((item) => (
                 <Chip key={item.name} item={item} />
               ))}
-              <span className="font-['Inter',sans-serif] text-[13px] text-black/30 ml-1">
+              <span className={styles.more}>
                 + more
               </span>
             </div>
           </div>
 
           {/* Divider */}
-          <div className="h-px bg-black/6" />
+          <div className={styles.divider} />
 
           {/* Frameworks row */}
-          <div className="flex flex-col lg:flex-row lg:items-center gap-3">
-            <span className="font-['Inter',sans-serif] text-[13px] font-medium text-black/30 uppercase tracking-wider shrink-0">
+          <div className={styles.row}>
+            <span className={styles.label}>
               Any Framework
             </span>
-            <div className="flex flex-wrap items-center gap-2">
+            <div className={styles.chips}>
               {FRAMEWORKS.map((item) => (
                 <Chip key={item.name} item={item} />
               ))}
-              <span className="font-['Inter',sans-serif] text-[13px] text-black/30 ml-1">
+              <span className={styles.more}>
                 + more
               </span>
             </div>
diff --git a/docs/app/(home)/components/FadeInSection.tsx b/docs/app/(home)/components/FadeInSection.tsx
deleted file mode 100644
index 16f76130d..000000000
--- a/docs/app/(home)/components/FadeInSection.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client";
-
-import { motion, useInView } from "motion/react";
-import { useRef, type ReactNode } from "react";
-
-interface FadeInSectionProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export function FadeInSection({ children, className = "" }: FadeInSectionProps) {
-  const ref = useRef<HTMLDivElement>(null);
-  const isInView = useInView(ref, { once: true, margin: "-100px 0px" });
-
-  return (
-    <motion.div
-      ref={ref}
-      className={className}
-      initial={{ opacity: 0, y: 32 }}
-      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 32 }}
-      transition={{ duration: 0.6, ease: "easeOut" }}
-    >
-      {children}
-    </motion.div>
-  );
-}
diff --git a/docs/app/(home)/components/FadeInSection/FadeInSection.module.css b/docs/app/(home)/components/FadeInSection/FadeInSection.module.css
new file mode 100644
index 000000000..88de80d08
--- /dev/null
+++ b/docs/app/(home)/components/FadeInSection/FadeInSection.module.css
@@ -0,0 +1,3 @@
+.root {
+  width: 100%;
+}
diff --git a/docs/app/(home)/components/FadeInSection/FadeInSection.tsx b/docs/app/(home)/components/FadeInSection/FadeInSection.tsx
new file mode 100644
index 000000000..adf65cea7
--- /dev/null
+++ b/docs/app/(home)/components/FadeInSection/FadeInSection.tsx
@@ -0,0 +1,17 @@
+"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/FeaturesSection.tsx b/docs/app/(home)/components/FeaturesSection.tsx
deleted file mode 100644
index ef33407a4..000000000
--- a/docs/app/(home)/components/FeaturesSection.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-"use client";
-
-import svgPaths from "@/imports/svg-urruvoh2be";
-import { motion, useInView } from "motion/react";
-import Link from "next/link";
-import { useRef } from "react";
-import { BUTTON_SHADOW } from "./shared";
-
-// ---------------------------------------------------------------------------
-// Data
-// ---------------------------------------------------------------------------
-
-interface Feature {
-  title: string;
-  description: string;
-  iconPath: string;
-}
-
-const FEATURES: Feature[] = [
-  {
-    title: "Performance Optimized",
-    description: "2.1x faster rendering than json-render",
-    iconPath: svgPaths.p7658f00,
-  },
-  {
-    title: "Token efficient",
-    description: "52% 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;
-
-// ---------------------------------------------------------------------------
-// Sub-components
-// ---------------------------------------------------------------------------
-
-function FeatureIcon({ path, index }: { path: string; index: number }) {
-  const clipId = `clip_feat_${index}`;
-  return (
-    <div className="bg-white size-9 rounded-full border border-black/10 flex items-center justify-center shrink-0">
-      <svg className="size-[18px]" 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>
-  );
-}
-
-// Stagger timing: each row starts after the previous; within a row, icon → title → description
-const ROW_STAGGER = 0.12; // seconds between rows
-const ELEMENT_STAGGER = 0.14; // seconds between icon, title, description within a row
-const FADE_DURATION = 0.55;
-
-function DesktopFeatureRow({ feature, index }: { feature: Feature; index: number }) {
-  const rowRef = useRef<HTMLDivElement>(null);
-  const isInView = useInView(rowRef, { once: true, margin: "-100px 0px" });
-
-  const baseDelay = index * ROW_STAGGER;
-  const iconDelay = baseDelay;
-  const titleDelay = baseDelay + ELEMENT_STAGGER;
-  const descDelay = baseDelay + ELEMENT_STAGGER * 2;
-
-  return (
-    <div ref={rowRef} className="flex items-center justify-between h-[72px]">
-      <div className="flex items-center gap-3">
-        <motion.div
-          initial={{ opacity: 0, y: 12 }}
-          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 12 }}
-          transition={{ duration: FADE_DURATION, delay: iconDelay, ease: "easeOut" }}
-        >
-          <FeatureIcon path={feature.iconPath} index={index} />
-        </motion.div>
-        <motion.span
-          className="font-['Inter_Display',sans-serif] text-[22px] text-black leading-[1.4]"
-          initial={{ opacity: 0, y: 10 }}
-          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }}
-          transition={{ duration: FADE_DURATION, delay: titleDelay, ease: "easeOut" }}
-        >
-          {feature.title}
-        </motion.span>
-      </div>
-      <motion.span
-        className="font-['Inter_Display',sans-serif] text-[22px] text-black/40 leading-[1.4] text-right"
-        initial={{ opacity: 0, y: 10 }}
-        animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }}
-        transition={{ duration: FADE_DURATION, delay: descDelay, ease: "easeOut" }}
-      >
-        {feature.description}
-      </motion.span>
-    </div>
-  );
-}
-
-function MobileFeatureRow({ feature, index }: { feature: Feature; index: number }) {
-  const rowRef = useRef<HTMLDivElement>(null);
-  const isInView = useInView(rowRef, { once: true, margin: "-60px 0px" });
-
-  const baseDelay = index * ROW_STAGGER;
-  const titleDelay = baseDelay;
-  const descDelay = baseDelay + ELEMENT_STAGGER;
-  const iconDelay = baseDelay + ELEMENT_STAGGER * 2;
-
-  return (
-    <div ref={rowRef} className="flex items-center gap-1.5 py-4">
-      <div className="flex flex-col gap-1 flex-1">
-        <motion.span
-          className="font-['Inter',sans-serif] font-medium text-base text-black leading-[1.25]"
-          initial={{ opacity: 0, y: 10 }}
-          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }}
-          transition={{ duration: FADE_DURATION, delay: titleDelay, ease: "easeOut" }}
-        >
-          {feature.title}
-        </motion.span>
-        <motion.span
-          className="font-['Inter',sans-serif] text-base text-black/40 leading-[1.4]"
-          initial={{ opacity: 0, y: 10 }}
-          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }}
-          transition={{ duration: FADE_DURATION, delay: descDelay, ease: "easeOut" }}
-        >
-          {feature.description}
-        </motion.span>
-      </div>
-      <motion.div
-        initial={{ opacity: 0, y: 12 }}
-        animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 12 }}
-        transition={{ duration: FADE_DURATION, delay: iconDelay, ease: "easeOut" }}
-      >
-        <FeatureIcon path={feature.iconPath} index={index + FEATURES.length} />
-      </motion.div>
-    </div>
-  );
-}
-
-function Divider({ className = "" }: { className?: string }) {
-  return (
-    <div
-      className={`h-px ${className}`}
-      style={{ width: "100vw", marginLeft: "calc(-50vw + 50%)" }}
-    />
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Main component
-// ---------------------------------------------------------------------------
-
-export function FeaturesSection() {
-  const lastRowDesktopRef = useRef<HTMLDivElement>(null);
-  const lastRowMobileRef = useRef<HTMLDivElement>(null);
-  const lastRowDesktopInView = useInView(lastRowDesktopRef, { once: true, margin: "-100px 0px" });
-  const lastRowMobileInView = useInView(lastRowMobileRef, { once: true, margin: "-60px 0px" });
-
-  const lastRowInView = lastRowDesktopInView || lastRowMobileInView;
-
-  // Button appears after the last row's elements finish animating
-  const lastRowTotalDelay =
-    (FEATURES.length - 1) * ROW_STAGGER + ELEMENT_STAGGER * 2 + FADE_DURATION;
-  const buttonDelay = lastRowTotalDelay * 0.6; // overlap slightly so it feels connected
-
-  return (
-    <div className="w-full px-5 lg:px-8">
-      <div className="max-w-[1200px] mx-auto">
-        {/* Desktop */}
-        <div className="hidden lg:block">
-          {FEATURES.map((f, i) => (
-            <div key={f.title} ref={i === LAST_FEATURE_INDEX ? lastRowDesktopRef : undefined}>
-              <DesktopFeatureRow feature={f} index={i} />
-              {i < LAST_FEATURE_INDEX && <Divider className="bg-black/10" />}
-            </div>
-          ))}
-        </div>
-
-        {/* Mobile */}
-        <div className="lg:hidden">
-          {FEATURES.map((f, i) => (
-            <div key={f.title} ref={i === LAST_FEATURE_INDEX ? lastRowMobileRef : undefined}>
-              <MobileFeatureRow feature={f} index={i} />
-              {i < LAST_FEATURE_INDEX && <Divider className="bg-black/8" />}
-            </div>
-          ))}
-        </div>
-
-        {/* CTA button */}
-        <Link href="/docs/openui-lang/benchmarks">
-          <div className="flex justify-center mt-10 lg:mt-20">
-            <motion.button
-              className="bg-white text-black rounded-full h-12 px-4 font-['Inter',sans-serif] font-medium text-base lg:text-lg leading-6 border-[1.25px] border-black/8 w-full max-w-[280px] lg:max-w-none lg:w-auto transition-all duration-200 hover:scale-105 cursor-pointer"
-              style={{ boxShadow: BUTTON_SHADOW }}
-              initial={{ opacity: 0, y: 12 }}
-              animate={lastRowInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 12 }}
-              transition={{ duration: FADE_DURATION, delay: buttonDelay, ease: "easeOut" }}
-            >
-              <span className="lg:hidden">Detailed comparison</span>
-              <span className="hidden lg:inline">View Comparison</span>
-            </motion.button>
-          </div>
-        </Link>
-      </div>
-    </div>
-  );
-}
diff --git a/docs/app/(home)/components/FeaturesSection/FeaturesSection.module.css b/docs/app/(home)/components/FeaturesSection/FeaturesSection.module.css
new file mode 100644
index 000000000..8dac57417
--- /dev/null
+++ b/docs/app/(home)/components/FeaturesSection/FeaturesSection.module.css
@@ -0,0 +1,191 @@
+.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
new file mode 100644
index 000000000..c9daf0217
--- /dev/null
+++ b/docs/app/(home)/components/FeaturesSection/FeaturesSection.tsx
@@ -0,0 +1,164 @@
+"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: "2.1x faster rendering than json-render",
+    iconPath: svgPaths.p7658f00,
+  },
+  {
+    title: "Token efficient",
+    description: "52% 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/Footer/Footer.module.css b/docs/app/(home)/components/Footer/Footer.module.css
new file mode 100644
index 000000000..9dc6d9e0d
--- /dev/null
+++ b/docs/app/(home)/components/Footer/Footer.module.css
@@ -0,0 +1,167 @@
+.footer {
+  width: 100%;
+}
+
+.absoluteSvg {
+  position: absolute;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.handcraftedSection {
+  width: 100%;
+  padding-inline: 1.25rem;
+}
+
+.handcraftedContainer {
+  display: flex;
+  max-width: 75rem;
+  margin-inline: auto;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.625rem;
+  padding-block: 4rem;
+}
+
+.mascotWrap {
+  position: relative;
+  height: 140px;
+  width: 140px;
+  flex-shrink: 0;
+}
+
+.handcraftedMascot {
+  position: absolute;
+  inset: 9.29% 0 10% 0;
+  display: block;
+}
+
+.handcraftedCopy {
+  text-align: center;
+  font-family: "Playwrite US Trad", serif;
+  font-size: 16px;
+  line-height: 1.2;
+  color: #000;
+}
+
+.contentSection {
+  padding: 60px 1.25rem 1rem;
+  background: #fff;
+}
+
+.contentContainer {
+  max-width: 75rem;
+  margin-inline: auto;
+}
+
+.desktopLogoRow {
+  display: none;
+}
+
+.mobileLogoRow {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logoWrap {
+  position: relative;
+  height: 3rem;
+  width: 124px;
+}
+
+.bottomBar {
+  margin-top: 2.5rem;
+  padding-block: 1rem;
+  border-top: 1px solid rgb(0 0 0 / 4%);
+}
+
+.desktopBottomBar {
+  display: none;
+}
+
+.desktopMetaLeft,
+.desktopMetaRight {
+  font-family: "Inter", sans-serif;
+  font-size: 15px;
+  line-height: 1.5;
+  color: rgb(0 0 0 / 40%);
+}
+
+.desktopMetaLeft {
+  text-align: left;
+}
+
+.desktopMetaRight {
+  text-align: right;
+}
+
+.mobileBottomBar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 2.5rem 0 1.25rem;
+}
+
+.socialIcons {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.socialLink {
+  position: relative;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.socialIconWrap {
+  position: absolute;
+}
+
+.mobileMeta {
+  margin-top: 2.5rem;
+  text-align: center;
+}
+
+.mobileMetaText {
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  line-height: 1.5;
+  color: rgb(0 0 0 / 40%);
+}
+
+@media (min-width: 1024px) {
+  .handcraftedSection,
+  .contentSection {
+    padding-inline: 2rem;
+  }
+
+  .handcraftedCopy {
+    font-size: 22px;
+  }
+
+  .desktopLogoRow {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .mobileLogoRow,
+  .mobileBottomBar {
+    display: none;
+  }
+
+  .bottomBar {
+    margin-top: 60px;
+  }
+
+  .desktopBottomBar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+}
diff --git a/docs/app/(home)/components/Footer.tsx b/docs/app/(home)/components/Footer/Footer.tsx
similarity index 65%
rename from docs/app/(home)/components/Footer.tsx
rename to docs/app/(home)/components/Footer/Footer.tsx
index 8dff47c6b..72af74f92 100644
--- a/docs/app/(home)/components/Footer.tsx
+++ b/docs/app/(home)/components/Footer/Footer.tsx
@@ -1,7 +1,9 @@
 "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";
 
 // ---------------------------------------------------------------------------
 // Data
@@ -12,8 +14,7 @@ interface SocialLink {
   href: string;
   viewBox: string;
   path: string;
-  /** Optional wrapper for icons that need precise positioning */
-  wrapperClass?: string;
+  wrapperStyle?: CSSProperties;
   clipId?: string;
   clipSize?: { width: string; height: string };
 }
@@ -30,14 +31,20 @@ const SOCIAL_LINKS: SocialLink[] = [
     href: "#",
     viewBox: "0 0 21.9611 17",
     path: svgPaths.p3885cd00,
-    wrapperClass: "inset-[10.82%_4.33%_18.35%_4.17%]",
+    wrapperStyle: { inset: "10.82% 4.33% 18.35% 4.17%" },
   },
   {
     label: "YouTube",
     href: "#",
     viewBox: "0 0 22 15.4688",
     path: svgPaths.p23dbbd00,
-    wrapperClass: "-translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2 h-[15.469px] w-[22px]",
+    wrapperStyle: {
+      left: "50%",
+      top: "50%",
+      width: "22px",
+      height: "15.469px",
+      transform: "translate(-50%, -50%)",
+    },
     clipId: "clip_yt",
     clipSize: { width: "22", height: "15.4688" },
   },
@@ -46,7 +53,13 @@ const SOCIAL_LINKS: SocialLink[] = [
     href: "#",
     viewBox: "0 0 19 19",
     path: svgPaths.p26fc3100,
-    wrapperClass: "-translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2 size-[19px]",
+    wrapperStyle: {
+      left: "50%",
+      top: "50%",
+      width: "19px",
+      height: "19px",
+      transform: "translate(-50%, -50%)",
+    },
     clipId: "clip_li",
     clipSize: { width: "19", height: "19" },
   },
@@ -58,7 +71,7 @@ const SOCIAL_LINKS: SocialLink[] = [
 
 function SocialIcon({ link }: { link: SocialLink }) {
   const svgContent = link.clipId ? (
-    <svg className="absolute block size-full" fill="none" viewBox={link.viewBox}>
+    <svg className={styles.absoluteSvg} fill="none" viewBox={link.viewBox}>
       <g clipPath={`url(#${link.clipId})`}>
         <path d={link.path} fill="black" fillOpacity="0.4" />
       </g>
@@ -69,15 +82,17 @@ function SocialIcon({ link }: { link: SocialLink }) {
       </defs>
     </svg>
   ) : (
-    <svg className="absolute block size-full" fill="none" viewBox={link.viewBox}>
+    <svg className={styles.absoluteSvg} fill="none" viewBox={link.viewBox}>
       <path d={link.path} fill="black" fillOpacity="0.4" />
     </svg>
   );
 
   return (
-    <a href={link.href} className="size-6 relative" aria-label={link.label}>
-      {link.wrapperClass ? (
-        <div className={`absolute ${link.wrapperClass}`}>{svgContent}</div>
+    <a href={link.href} className={styles.socialLink} aria-label={link.label}>
+      {link.wrapperStyle ? (
+        <div className={styles.socialIconWrap} style={link.wrapperStyle}>
+          {svgContent}
+        </div>
       ) : (
         svgContent
       )}
@@ -87,7 +102,7 @@ function SocialIcon({ link }: { link: SocialLink }) {
 
 function SocialIcons() {
   return (
-    <div className="flex gap-6">
+    <div className={styles.socialIcons}>
       {SOCIAL_LINKS.map((link) => (
         <SocialIcon key={link.label} link={link} />
       ))}
@@ -97,8 +112,8 @@ function SocialIcons() {
 
 function ThesysLogo() {
   return (
-    <div className="h-12 w-[124px] relative">
-      <svg className="absolute block size-full" fill="none" viewBox="0 0 123.871 49.5484">
+    <div className={styles.logoWrap}>
+      <svg className={styles.absoluteSvg} fill="none" viewBox="0 0 123.871 49.5484">
         <path d={svgPaths.p16775200} fill="black" />
         <path clipRule="evenodd" d={svgPaths.p29abae30} fill="black" fillRule="evenodd" />
         <path d={svgPaths.p318aaf80} fill="black" />
@@ -116,14 +131,13 @@ function ThesysLogo() {
 
 export function Footer() {
   return (
-    <footer className="w-full">
+    <footer className={styles.footer}>
       {/* Handcrafted */}
-      <div className="w-full px-5 lg:px-8">
-        <div className="max-w-[1200px] mx-auto flex flex-col items-center gap-2.5 py-16">
-          <div className="relative shrink-0 size-[140px]">
+      <div className={styles.handcraftedSection}>
+        <div className={styles.handcraftedContainer}>
+          <div className={styles.mascotWrap}>
             <svg
-              className="absolute block"
-              style={{ inset: "9.29% 0 10% 0" }}
+              className={styles.handcraftedMascot}
               fill="none"
               preserveAspectRatio="xMidYMid meet"
               viewBox="0 0 141.2 114.2"
@@ -138,43 +152,43 @@ export function Footer() {
               <path d={mascotSvgPaths.p4076200} fill="black" stroke="black" strokeWidth="0.6" />
             </svg>
           </div>
-          <p className="font-['Playwrite_US_Trad',serif] text-base lg:text-[22px] text-black leading-[1.2] text-center">
+          <p className={styles.handcraftedCopy}>
             Handcrafted with a lot of love.
           </p>
         </div>
       </div>
 
       {/* Footer content */}
-      <div className="bg-white px-5 lg:px-8 pt-[60px] pb-4">
-        <div className="max-w-[1200px] mx-auto">
+      <div className={styles.contentSection}>
+        <div className={styles.contentContainer}>
           {/* Desktop */}
-          <div className="hidden lg:flex flex-col items-center">
+          <div className={styles.desktopLogoRow}>
             <ThesysLogo />
           </div>
           {/* Mobile */}
-          <div className="lg:hidden flex w-full flex-col items-center">
+          <div className={styles.mobileLogoRow}>
             <ThesysLogo />
           </div>
 
           {/* Bottom bar */}
-          <div className="mt-10 lg:mt-[60px] border-t border-black/4 py-4 lg:py-4">
-            <div className="hidden lg:flex items-center justify-between gap-2">
-              <p className="font-['Inter',sans-serif] text-[15px] text-black/40 leading-[1.5] text-left">
+          <div className={styles.bottomBar}>
+            <div className={styles.desktopBottomBar}>
+              <p className={styles.desktopMetaLeft}>
                 355 Bryant St, San Francisco, CA 94107
               </p>
               <SocialIcons />
-              <p className="font-['Inter',sans-serif] text-[15px] text-black/40 leading-[1.5] text-right">
+              <p className={styles.desktopMetaRight}>
                 © {new Date().getFullYear()} Thesys Inc. All Rights Reserved
               </p>
             </div>
 
-            <div className="lg:hidden flex flex-col items-center justify-start pt-10 pb-5">
+            <div className={styles.mobileBottomBar}>
               <SocialIcons />
-              <div className="mt-10 text-center">
-                <p className="font-['Inter',sans-serif] text-xs text-black/40 leading-[1.5]">
+              <div className={styles.mobileMeta}>
+                <p className={styles.mobileMetaText}>
                   © {new Date().getFullYear()} Thesys Inc. All Rights Reserved
                 </p>
-                <p className="font-['Inter',sans-serif] text-xs text-black/40 leading-[1.5]">
+                <p className={styles.mobileMetaText}>
                   355 Bryant St, San Francisco, CA 94107
                 </p>
               </div>
diff --git a/docs/app/(home)/components/GradientDivider/GradientDivider.module.css b/docs/app/(home)/components/GradientDivider/GradientDivider.module.css
new file mode 100644
index 000000000..73efe5a11
--- /dev/null
+++ b/docs/app/(home)/components/GradientDivider/GradientDivider.module.css
@@ -0,0 +1,24 @@
+.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.tsx b/docs/app/(home)/components/GradientDivider/GradientDivider.tsx
similarity index 75%
rename from docs/app/(home)/components/GradientDivider.tsx
rename to docs/app/(home)/components/GradientDivider/GradientDivider.tsx
index a1347817b..b61b4b41a 100644
--- a/docs/app/(home)/components/GradientDivider.tsx
+++ b/docs/app/(home)/components/GradientDivider/GradientDivider.tsx
@@ -1,4 +1,5 @@
 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,
@@ -8,11 +9,11 @@ export function GradientDivider({ direction = "down" }: { direction?: "down" | "
   const bars = direction === "up" ? [...BAR_HEIGHTS].reverse() : BAR_HEIGHTS;
 
   return (
-    <div className="w-full flex flex-col rotate-180 gap-[2px] lg:gap-[6px]">
+    <div className={styles.divider}>
       {bars.map((h) => (
         <div
           key={h}
-          className="bg-black/4 w-full shrink-0 h-[var(--bar-h-mobile)] lg:h-[var(--bar-h)]"
+          className={styles.bar}
           style={{ "--bar-h-mobile": `${h / 2}px`, "--bar-h": `${h}px` } as CSSProperties}
         />
       ))}
diff --git a/docs/app/(home)/components/HeroSection/HeroSection.module.css b/docs/app/(home)/components/HeroSection/HeroSection.module.css
new file mode 100644
index 000000000..346663af9
--- /dev/null
+++ b/docs/app/(home)/components/HeroSection/HeroSection.module.css
@@ -0,0 +1,432 @@
+.section {
+  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;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  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);
+  cursor: pointer;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.npmButton:hover {
+  transform: scale(0.99);
+  box-shadow: none;
+}
+
+.desktopPlaygroundButton:hover {
+  background: rgb(0 0 0 / 5%);
+}
+
+.npmDesktopLabel,
+.desktopPlaygroundButton,
+.npmTickerText,
+.mobilePlaygroundLabel {
+  font-family: "Inter Display", sans-serif;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.npmDesktopLabel {
+  display: none;
+  white-space: nowrap;
+  color: #000;
+}
+
+.npmMobileLabel {
+  position: relative;
+  display: block;
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+}
+
+.npmTicker {
+  display: flex;
+  width: max-content;
+  align-items: center;
+  animation: npmTickerScroll 10s linear infinite;
+}
+
+.npmTickerText {
+  white-space: nowrap;
+  padding-right: 2rem;
+  color: #000;
+}
+
+.npmIconBadge {
+  display: flex;
+  height: 2rem;
+  width: 2rem;
+  flex-shrink: 0;
+  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;
+}
+
+.desktopPlaygroundButton,
+.mobilePlaygroundButton {
+  display: flex;
+  height: 3rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 999px;
+  text-decoration: none;
+}
+
+.desktopPlaygroundButton {
+  padding-inline: 1.25rem;
+  color: #000;
+  transition: background-color 0.2s ease;
+}
+
+.mobilePlaygroundButton {
+  flex-shrink: 0;
+  padding-inline: 1.25rem;
+  border-radius: 100px;
+  background: #000;
+  transition: background-color 0.2s ease;
+}
+
+.mobilePlaygroundButton:hover {
+  background: rgb(0 0 0 / 85%);
+}
+
+.mobilePlaygroundLabel {
+  white-space: nowrap;
+  color: #fff;
+}
+
+.mobilePlaygroundArrow {
+  color: #fff;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.mobileMascotSvg {
+  position: absolute;
+  inset: 9.29% 0 10% 0;
+  display: block;
+  width: 100%;
+  height: 80.71%;
+}
+
+.desktopHero {
+  display: none;
+}
+
+.desktopHeroInner {
+  position: relative;
+  max-width: 75rem;
+  margin-inline: auto;
+}
+
+.desktopHeroSpacer {
+  display: block;
+  width: 100%;
+  height: auto;
+  visibility: hidden;
+}
+
+.heroLayerFade,
+.heroLayerMotion {
+  position: absolute;
+  inset: 0;
+}
+
+.heroLayerFade {
+  will-change: opacity;
+}
+
+.heroLayerMotion,
+.desktopCtaLayer {
+  will-change: transform, opacity;
+}
+
+.fillSvg {
+  width: 100%;
+  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;
+}
+
+.desktopCtaStack {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding-top: 3.5rem;
+  transform: translateX(-50%);
+}
+
+.mobileHero {
+  position: relative;
+  overflow: hidden;
+}
+
+.mobileHeroIntro {
+  position: relative;
+  padding: 60px 1.25rem 1.25rem;
+}
+
+.mobileHeroStack {
+  display: flex;
+  width: 100%;
+  max-width: 345px;
+  margin-inline: auto;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.25rem;
+  padding-block: 2.5rem;
+}
+
+.mobileGithubBanner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 2.5rem;
+  padding-inline: 1rem;
+  border-radius: 999px;
+  background: rgb(0 0 0 / 5%);
+  color: #000;
+  text-decoration: none;
+  font-family: "Inter Display", sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.5rem;
+  transition: background-color 0.2s ease;
+}
+
+.mobileGithubBanner:hover {
+  background: rgb(0 0 0 / 8%);
+}
+
+.mobileGithubBannerLead {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+}
+
+.mobileGithubBannerIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mobileGithubBannerArrow {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.mobileMascotWrap {
+  position: relative;
+  height: 140px;
+  width: 140px;
+  flex-shrink: 0;
+}
+
+.mobileTitle {
+  text-align: center;
+  font-family: "Inter Display", sans-serif;
+  font-size: 80px;
+  line-height: 1.25;
+  color: #000;
+}
+
+.mobileSubtitle {
+  text-align: center;
+  font-family: "Inter Display", sans-serif;
+  font-size: 22px;
+  line-height: 1.2;
+  color: rgb(0 0 0 / 40%);
+}
+
+.mobileCtaStack {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1.25rem 2.5rem 5rem;
+}
+
+.mobileCtaButtonWidth {
+  width: 320px;
+  max-width: 100%;
+}
+
+.mobileIllustrationViewport {
+  position: relative;
+  left: 50%;
+  width: 100vw;
+  transform: translateX(-50%);
+}
+
+.mobileIllustrationFallback {
+  aspect-ratio: 16 / 9;
+}
+
+.previewScaleContainer {
+  position: absolute;
+  inset: 0;
+}
+
+.previewScaleFrame {
+  position: absolute;
+  left: 50%;
+  transform-origin: top center;
+}
+
+.previewSection {
+  width: 100%;
+  overflow: hidden;
+  margin-top: 2rem;
+}
+
+.previewDesktopOnly {
+  display: none;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.previewFrame {
+  position: relative;
+  overflow: hidden;
+}
+
+.taglineSection {
+  margin-top: 1.25rem;
+  padding-inline: 1.25rem;
+}
+
+.taglineContainer {
+  max-width: 75rem;
+  margin-inline: auto;
+}
+
+.tagline {
+  text-align: center;
+  font-family: "Inter Display", sans-serif;
+  font-size: 22px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: rgb(0 0 0 / 40%);
+}
+
+.taglineBreak {
+  display: none;
+}
+
+@keyframes npmTickerScroll {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+@media (min-width: 1024px) {
+  .npmDesktopLabel {
+    display: inline;
+  }
+
+  .npmMobileLabel,
+  .mobileHero {
+    display: none;
+  }
+
+  .desktopHero {
+    display: block;
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    padding: 5.5rem 2rem 5.5rem;
+  }
+
+  .previewSection {
+    margin-top: 2.5rem;
+  }
+
+  .previewDesktopOnly {
+    display: flex;
+  }
+
+  .taglineSection {
+    margin-top: 2.5rem;
+    padding: 2.5rem 2rem 0;
+  }
+
+  .tagline {
+    font-size: 28px;
+  }
+
+  .taglineBreak {
+    display: inline;
+  }
+}
\ No newline at end of file
diff --git a/docs/app/(home)/components/HeroSection.tsx b/docs/app/(home)/components/HeroSection/HeroSection.tsx
similarity index 51%
rename from docs/app/(home)/components/HeroSection.tsx
rename to docs/app/(home)/components/HeroSection/HeroSection.tsx
index acd6106e4..8e4ee3bef 100644
--- a/docs/app/(home)/components/HeroSection.tsx
+++ b/docs/app/(home)/components/HeroSection/HeroSection.tsx
@@ -1,56 +1,19 @@
 "use client";
 
+import { GitHubIcon } from "@/components/brand-logo";
 import HeroPreviewFrame from "@/imports/Frame2147239423";
 import svgMascotPaths from "@/imports/svg-148i9mcxjn";
 import svgHeroPaths from "@/imports/svg-a5kdrdeeao";
-import { motion } from "motion/react";
-import { lazy, Suspense, useEffect, useRef, useState } from "react";
-import { CopyIcon } from "./shared";
+import { lazy, Suspense, useEffect, useRef, useState, type CSSProperties } from "react";
+import { CopyIcon } from "../shared/shared";
+import styles from "./HeroSection.module.css";
 
 const LazyMobileActionFigure = lazy(() => import("@/imports/MobileActionFigure"));
 
-// ---------------------------------------------------------------------------
-// Animation config
-// ---------------------------------------------------------------------------
-
-const EASE = [0.25, 0.1, 0.25, 1] as const;
-
-/** Desktop: slower, more dramatic stagger */
-const DESKTOP = {
-  duration: 0.7,
-  lines: 0,
-  title: 0.5,
-  subtitle: 1.0,
-  cta: 1.5,
-  image: 2.0,
-} as const;
-
-/** Mobile: snappier with tighter stagger */
-const MOBILE = { duration: 0.5, mascot: 0, title: 0.25, subtitle: 0.5, cta: 0.75 } as const;
-const HERO_BUTTON_SHADOW = "0 8px 16px -4px rgba(22, 34, 51, 0.08)";
-
-// ---------------------------------------------------------------------------
-// Animation helpers
-// ---------------------------------------------------------------------------
-
-const fadeUp = (delay: number) => ({
-  initial: { opacity: 0, y: 18 },
-  animate: { opacity: 1, y: 0 },
-  transition: { duration: DESKTOP.duration, delay, ease: EASE },
-});
-
-const fadeIn = (delay: number) => ({
-  initial: { opacity: 0 },
-  animate: { opacity: 1 },
-  transition: { duration: DESKTOP.duration, delay, ease: EASE },
-});
-
-const mobileFadeUp = (delay: number) => ({
-  initial: { opacity: 0, y: 18 },
-  animate: { opacity: 1, y: 0 },
-  transition: { duration: MOBILE.duration, delay, ease: EASE },
-  style: { willChange: "auto" } as const,
-});
+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 = "npm install @openuidev/lang-react @openuidev/react-ui";
@@ -90,35 +53,35 @@ function NpmButton({ className = "" }: { className?: string }) {
   return (
     <>
       <button
-        className={`flex h-12 items-center justify-center gap-2.5 pl-5 pr-2 shrink-0 cursor-pointer rounded-[999px] border-[1.25px] border-black/8 bg-white transition-all duration-200 hover:scale-105 ${className}`}
-        style={{ boxShadow: HERO_BUTTON_SHADOW }}
+        className={`${styles.npmButton} ${className}`.trim()}
+        style={HERO_BUTTON_STYLE}
         onClick={onCopy}
       >
-        <span className="hidden lg:inline font-['Inter_Display',sans-serif] font-medium text-[18px] leading-6 text-black whitespace-nowrap">
+        <span className={styles.npmDesktopLabel}>
           {primaryCTA}
         </span>
-        <span className="lg:hidden relative flex-1 min-w-0 overflow-hidden">
-          <span className="npmTicker flex w-max items-center">
-            <span className="font-['Inter_Display',sans-serif] font-medium text-[18px] leading-6 text-black whitespace-nowrap pr-8">
+        <span className={styles.npmMobileLabel}>
+          <span className={styles.npmTicker}>
+            <span className={styles.npmTickerText}>
               {primaryCTA}
             </span>
             <span
               aria-hidden="true"
-              className="font-['Inter_Display',sans-serif] font-medium text-[18px] leading-6 text-black whitespace-nowrap pr-8"
+              className={styles.npmTickerText}
             >
               {primaryCTA}
             </span>
           </span>
         </span>
-        <span className="size-8 rounded-full bg-black flex items-center justify-center shrink-0">
-          <span className="relative size-4 flex items-center justify-center">
+        <span className={styles.npmIconBadge}>
+          <span className={styles.npmIconFrame}>
             <span
-              className={`absolute transition-all duration-300 ${copied ? "opacity-0 scale-50" : "opacity-100 scale-100"}`}
+              className={`${styles.iconLayer} ${copied ? styles.iconHidden : styles.iconVisible}`}
             >
               <CopyIcon color="white" />
             </span>
             <svg
-              className={`size-4 absolute transition-all duration-300 ${copied ? "opacity-100 scale-100" : "opacity-0 scale-50"}`}
+              className={`${styles.iconLayer} ${copied ? styles.iconVisible : styles.iconHidden}`}
               fill="none"
               viewBox="0 0 14 14"
             >
@@ -133,19 +96,6 @@ function NpmButton({ className = "" }: { className?: string }) {
           </span>
         </span>
       </button>
-      <style jsx>{`
-        .npmTicker {
-          animation: npmTickerScroll 10s linear infinite;
-        }
-        @keyframes npmTickerScroll {
-          0% {
-            transform: translateX(0);
-          }
-          100% {
-            transform: translateX(-50%);
-          }
-        }
-      `}</style>
     </>
   );
 }
@@ -154,7 +104,7 @@ function DesktopPlaygroundButton({ className = "" }: { className?: string }) {
   return (
     <a
       href="/playground"
-      className={`flex h-12 items-center justify-center gap-2 rounded-[999px] px-5 font-['Inter_Display',sans-serif] font-medium text-[18px] leading-6 text-black cursor-pointer transition-all duration-200 hover:scale-105 ${className}`}
+      className={`${styles.desktopPlaygroundButton} ${className}`.trim()}
     >
       <span>{secondaryCTA}</span>
       <span aria-hidden="true">→</span>
@@ -164,17 +114,11 @@ function DesktopPlaygroundButton({ className = "" }: { className?: string }) {
 
 function MobilePlaygroundButton({ className = "" }: { className?: string }) {
   return (
-    <a href="/playground">
-      <button
-        className={`flex h-12 items-center justify-center gap-2 rounded-[100px] bg-black px-5 shrink-0 cursor-pointer transition-all duration-200 hover:bg-black/85 ${className}`}
-      >
-        <span className="font-['Inter_Display',sans-serif] font-medium text-[18px] leading-6 text-white whitespace-nowrap">
-          {secondaryCTA}
-        </span>
-        <span aria-hidden="true" className="text-white text-[20px] leading-none">
-          →
-        </span>
-      </button>
+    <a href="/playground" className={`${styles.mobilePlaygroundButton} ${className}`.trim()}>
+      <span className={styles.mobilePlaygroundLabel}>{secondaryCTA}</span>
+      <span aria-hidden="true" className={styles.mobilePlaygroundArrow}>
+        →
+      </span>
     </a>
   );
 }
@@ -200,10 +144,9 @@ const MASCOT_FILLED_PATHS = [
 function MascotSvg() {
   return (
     <svg
-      className="absolute block"
+      className={styles.mobileMascotSvg}
       fill="none"
       viewBox="0 0 107.917 87.2814"
-      style={{ inset: "9.29% 0 10% 0", width: "100%", height: "80.71%" }}
     >
       {MASCOT_STROKED_PATHS.map((d) => (
         <path key={d.slice(0, 20)} d={d} fill="black" stroke="black" strokeWidth="0.458571" />
@@ -221,11 +164,11 @@ function MascotSvg() {
 
 function DesktopHero() {
   return (
-    <div className="hidden lg:block relative w-full overflow-hidden pt-22 pb-17 px-8">
-      <div className="max-w-300 mx-auto relative">
+    <div className={styles.desktopHero}>
+      <div className={styles.desktopHeroInner}>
         {/* Invisible spacer for aspect ratio */}
         <svg
-          className="w-full h-auto block invisible"
+          className={styles.desktopHeroSpacer}
           fill="none"
           viewBox="0 0 1600 376"
           aria-hidden="true"
@@ -234,9 +177,9 @@ function DesktopHero() {
         </svg>
 
         {/* Grid lines */}
-        <motion.div className="absolute inset-0 will-change-[opacity]" {...fadeIn(DESKTOP.lines)}>
+        <div className={styles.heroLayerFade}>
           <svg
-            className="w-full h-full"
+            className={styles.fillSvg}
             fill="none"
             viewBox="0 0 1600 376"
             preserveAspectRatio="none"
@@ -264,47 +207,40 @@ function DesktopHero() {
             <path d="M189 0V376" stroke="url(#heroVFade189)" strokeOpacity="0.1" />
             <path d="M787 0V376" stroke="url(#heroVFade787)" strokeOpacity="0.1" />
           </svg>
-        </motion.div>
+        </div>
 
         {/* Title */}
-        <motion.div
-          className="absolute inset-0 will-change-[transform,opacity]"
-          {...fadeUp(DESKTOP.title)}
-        >
-          <svg className="w-full h-full" fill="none" viewBox="0 0 1600 376">
+        <div className={styles.heroLayerMotion}>
+          <svg className={styles.fillSvg} fill="none" viewBox="0 0 1600 376">
             <path d={svgHeroPaths.pb12f700} fill="black" />
           </svg>
-        </motion.div>
+        </div>
 
         {/* Subtitle */}
-        <motion.div
-          className="absolute inset-0 will-change-[transform,opacity]"
-          {...fadeUp(DESKTOP.subtitle)}
-        >
-          <svg className="w-full h-full" fill="none" viewBox="0 0 1600 376">
+        <div className={styles.heroLayerMotion}>
+          <svg className={styles.fillSvg} fill="none" viewBox="0 0 1600 376">
             <g transform="translate(180 0)">
               <g transform="translate(880 75) scale(1.5) translate(-980 -108)">
                 <path d={svgHeroPaths.p38a6ed80} fill="black" fillOpacity="0.4" />
               </g>
             </g>
           </svg>
-        </motion.div>
+        </div>
 
         {/* Edge fades */}
-        <div className="absolute inset-y-0 left-0 w-[40px] pointer-events-none bg-gradient-to-r from-white to-transparent" />
-        <div className="absolute inset-y-0 right-0 w-[40px] pointer-events-none bg-gradient-to-l from-white to-transparent" />
+        <div className={styles.leftFade} />
+        <div className={styles.rightFade} />
 
         {/* CTA buttons */}
-        <motion.div
-          className="absolute will-change-[transform,opacity]"
+        <div
+          className={styles.desktopCtaLayer}
           style={{ left: "50%", top: "71.19%" }}
-          {...fadeUp(DESKTOP.cta)}
         >
-          <div className="relative -translate-x-1/2 flex flex-col items-center gap-2 pt-14">
+          <div className={styles.desktopCtaStack}>
             <NpmButton />
             <DesktopPlaygroundButton />
           </div>
-        </motion.div>
+        </div>
       </div>
     </div>
   );
@@ -316,54 +252,52 @@ function DesktopHero() {
 
 function MobileHero() {
   return (
-    <div className="lg:hidden relative overflow-hidden">
-      <div className="relative px-5 pt-[60px] pb-5">
-        <div className="flex flex-col items-center gap-5 w-full max-w-[345px] mx-auto py-10">
-          {/* Mascot — fades in with a slight tilt */}
-          <motion.div
-            className="relative shrink-0 size-[140px]"
-            initial={{ opacity: 0, rotate: -12 }}
-            animate={{ opacity: 1, rotate: 0 }}
-            transition={{ duration: MOBILE.duration, delay: MOBILE.mascot, ease: EASE }}
-            style={{ willChange: "auto" }}
+    <div className={styles.mobileHero}>
+      <div className={styles.mobileHeroIntro}>
+        <div className={styles.mobileHeroStack}>
+          <a
+            href="https://github.com/thesysdev/openui"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.mobileGithubBanner}
           >
+            <span className={styles.mobileGithubBannerLead}>
+              <span aria-hidden="true" className={styles.mobileGithubBannerIcon}>
+                <GitHubIcon />
+              </span>
+              <span>Star us on Github</span>
+            </span>
+            <span aria-hidden="true" className={styles.mobileGithubBannerArrow}>
+              →
+            </span>
+          </a>
+          <div className={styles.mobileMascotWrap}>
             <MascotSvg />
-          </motion.div>
+          </div>
 
           {/* Title */}
-          <motion.p
-            className="font-['Inter_Display',sans-serif] text-[80px] leading-[1.25] text-black text-center"
-            {...mobileFadeUp(MOBILE.title)}
-            style={{ ...mobileFadeUp(MOBILE.title).style, fontWeight: 600 }}
-          >
+          <p className={styles.mobileTitle} style={{ fontWeight: 600 }}>
             OpenUI
-          </motion.p>
+          </p>
 
           {/* Subtitle */}
-          <motion.p
-            className="font-['Inter_Display',sans-serif] text-[22px] leading-[1.2] text-black/40 text-center"
-            {...mobileFadeUp(MOBILE.subtitle)}
-            style={{ ...mobileFadeUp(MOBILE.subtitle).style, fontWeight: 500 }}
-          >
+          <p className={styles.mobileSubtitle} style={{ fontWeight: 500 }}>
             The Open Standard
             <br />
             for Generative UI
-          </motion.p>
+          </p>
         </div>
       </div>
 
       {/* CTA buttons */}
-      <motion.div
-        className="relative flex flex-col items-center gap-3 px-10 pt-5 pb-20"
-        {...mobileFadeUp(MOBILE.cta)}
-      >
-        <MobilePlaygroundButton className="w-[320px] max-w-full" />
-        <NpmButton className="w-[320px] max-w-full" />
-      </motion.div>
+      <div className={styles.mobileCtaStack}>
+        <MobilePlaygroundButton className={styles.mobileCtaButtonWidth} />
+        <NpmButton className={styles.mobileCtaButtonWidth} />
+      </div>
 
       {/* Full-width hero illustration */}
-      <div className="w-screen relative left-1/2 -translate-x-1/2">
-        <Suspense fallback={<div className="aspect-video" />}>
+      <div className={styles.mobileIllustrationViewport}>
+        <Suspense fallback={<div className={styles.mobileIllustrationFallback} />}>
           <LazyMobileActionFigure />
         </Suspense>
       </div>
@@ -394,14 +328,12 @@ function ScaledPreview() {
   }, []);
 
   return (
-    <div ref={containerRef} className="absolute inset-0">
+    <div ref={containerRef} className={styles.previewScaleContainer}>
       <div
+        className={styles.previewScaleFrame}
         style={{
           width: PREVIEW_NATIVE_WIDTH,
           height: PREVIEW_NATIVE_HEIGHT,
-          transformOrigin: "top center",
-          position: "absolute",
-          left: "50%",
           transform: `translateX(-50%) scale(${scale * PREVIEW_SCALE_MULTIPLIER})`,
         }}
       >
@@ -413,10 +345,10 @@ function ScaledPreview() {
 
 function PreviewImage() {
   return (
-    <motion.div className="mt-8 lg:mt-10 w-full overflow-hidden" {...fadeIn(DESKTOP.image)}>
-      <div className="hidden lg:flex justify-center overflow-hidden">
+    <div className={styles.previewSection}>
+      <div className={styles.previewDesktopOnly}>
         <div
-          className="relative overflow-hidden"
+          className={styles.previewFrame}
           style={{
             width: "calc(100% + 240px)",
             maxWidth: "100vw",
@@ -427,7 +359,7 @@ function PreviewImage() {
           <ScaledPreview />
         </div>
       </div>
-    </motion.div>
+    </div>
   );
 }
 
@@ -437,10 +369,10 @@ function PreviewImage() {
 
 function Tagline() {
   return (
-    <div className="px-5 lg:px-8 mt-5 lg:mt-10 lg:py-10">
-      <div className="max-w-[1200px] mx-auto">
-        <p className="font-['Inter_Display',sans-serif] font-medium text-[22px] lg:text-[28px] text-black/40 leading-[1.4] text-center">
-          An open source toolkit to make your <br className="hidden lg:inline" />
+    <div className={styles.taglineSection}>
+      <div className={styles.taglineContainer}>
+        <p className={styles.tagline}>
+          An open source toolkit to make your <br className={styles.taglineBreak} />
           AI apps respond with your UI.
         </p>
       </div>
@@ -454,7 +386,7 @@ function Tagline() {
 
 export function HeroSection() {
   return (
-    <section className="w-full">
+    <section className={styles.section}>
       <DesktopHero />
       <MobileHero />
       <PreviewImage />
diff --git a/docs/app/(home)/components/Navbar/Navbar.module.css b/docs/app/(home)/components/Navbar/Navbar.module.css
new file mode 100644
index 000000000..a7504cbb5
--- /dev/null
+++ b/docs/app/(home)/components/Navbar/Navbar.module.css
@@ -0,0 +1,189 @@
+.nav {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  width: 100%;
+  padding: 0.75rem 2rem;
+  background: #fff;
+  transition: border-color 0.2s ease;
+}
+
+.navInner {
+  display: flex;
+  max-width: 75rem;
+  margin-inline: auto;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logoCluster {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.logoDivider {
+  height: 1rem;
+  width: 1px;
+  background: rgb(0 0 0 / 10%);
+}
+
+.desktopTabs,
+.desktopGithub {
+  display: none;
+}
+
+.desktopTabs {
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.desktopTabLink {
+  display: flex;
+  height: 2rem;
+  align-items: center;
+  padding-inline: 0.5rem;
+  border-radius: 0.375rem;
+  color: #000;
+  text-decoration: none;
+  transition: background-color 0.2s ease;
+  font-family: "Inter Display", sans-serif;
+  font-size: 15px;
+  line-height: 1.5rem;
+}
+
+.desktopTabLink:hover,
+.mobileTrayLink:hover,
+.mobileMenuButton:hover {
+  background: rgb(0 0 0 / 5%);
+}
+
+.chevronIcon,
+.hamburgerIcon {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+.mobileMenuButton {
+  display: flex;
+  height: 2.5rem;
+  width: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.mobileBackdrop {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 40;
+  height: 100vh;
+  cursor: pointer;
+  background: rgb(0 0 0 / 60%);
+  backdrop-filter: blur(12px);
+}
+
+.mobileTrayWrap {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 50;
+  pointer-events: none;
+}
+
+.mobileTray {
+  pointer-events: auto;
+  border-top: 1px solid rgb(0 0 0 / 5%);
+  border-bottom-left-radius: 18px;
+  border-bottom-right-radius: 18px;
+  background: #fff;
+  box-shadow: 0 10px 20px rgb(0 0 0 / 10%);
+}
+
+.mobileTrayInner {
+  display: flex;
+  max-width: 75rem;
+  margin-inline: auto;
+  flex-direction: column;
+  gap: 0;
+  padding: 0.75rem 1.75rem 1.25rem;
+}
+
+.mobileTrayDivider {
+  height: 1px;
+  margin-inline: 0.75rem;
+  background: rgb(0 0 0 / 5%);
+}
+
+.mobileTrayLink {
+  display: flex;
+  width: 100%;
+  height: 3.5rem;
+  align-items: center;
+  gap: 0.25rem;
+  padding-inline: 0.75rem;
+  border-radius: 0.375rem;
+  color: #000;
+  text-align: left;
+  text-decoration: none;
+  transition: background-color 0.2s ease;
+  font-family: "Inter", sans-serif;
+  font-size: 18px;
+  line-height: 1.5rem;
+}
+
+.mobileGithubButtonWrap {
+  display: flex;
+  justify-content: center;
+  padding-top: 80px;
+  pointer-events: auto;
+}
+
+.mobileGithubButton {
+  position: relative;
+  display: flex;
+  height: 38px;
+  align-items: center;
+  gap: 0.375rem;
+  padding-left: 0.75rem;
+  padding-right: 0.5rem;
+  border: 0;
+  border-radius: 999px;
+  background: #fff;
+  cursor: pointer;
+  transform: scale(1.17);
+}
+
+.mobileGithubButton:hover .mobileGithubButtonOverlay {
+  box-shadow: none;
+}
+
+.mobileGithubButtonOverlay {
+  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);
+  transition: box-shadow 0.2s ease;
+}
+
+@media (min-width: 1024px) {
+  .desktopTabs,
+  .desktopGithub {
+    display: flex;
+  }
+
+  .mobileMenuButton,
+  .mobileBackdrop,
+  .mobileTrayWrap {
+    display: none;
+  }
+}
diff --git a/docs/app/(home)/components/Navbar.tsx b/docs/app/(home)/components/Navbar/Navbar.tsx
similarity index 65%
rename from docs/app/(home)/components/Navbar.tsx
rename to docs/app/(home)/components/Navbar/Navbar.tsx
index 21db1bce8..f9c0b9aca 100644
--- a/docs/app/(home)/components/Navbar.tsx
+++ b/docs/app/(home)/components/Navbar/Navbar.tsx
@@ -9,9 +9,9 @@ import {
   useGitHubStarCount,
 } from "@/components/brand-logo";
 import svgPaths from "@/imports/svg-urruvoh2be";
-import { AnimatePresence, motion } from "motion/react";
-import { useCallback, useEffect, useState } from "react";
-import { BUTTON_SHADOW } from "./shared";
+import { useCallback, useEffect, useState, type CSSProperties } from "react";
+import { BUTTON_SHADOW } from "../shared/shared";
+import styles from "./Navbar.module.css";
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -24,8 +24,12 @@ const TAB_URLS: Record<string, string> = {
   Chat: "/docs/chat",
   Playground: "/playground",
   "API Reference": "/docs/api-reference",
+  Components: "/docs/components",
 };
 const NAVBAR_BORDER_COLOR = "rgba(0,0,0,0.1)";
+const MOBILE_GITHUB_BUTTON_STYLE = {
+  "--mobile-github-button-shadow": BUTTON_SHADOW,
+} as CSSProperties;
 
 // ---------------------------------------------------------------------------
 // Shared SVG icons
@@ -33,7 +37,7 @@ const NAVBAR_BORDER_COLOR = "rgba(0,0,0,0.1)";
 
 function ChevronDownIcon() {
   return (
-    <svg className="size-5" fill="none" viewBox="0 0 20 20">
+    <svg className={styles.chevronIcon} fill="none" viewBox="0 0 20 20">
       <path
         d={svgPaths.p2709b200}
         stroke="black"
@@ -51,12 +55,12 @@ function ChevronDownIcon() {
 
 function DesktopNavTabs() {
   return (
-    <div className="hidden lg:flex items-center gap-2">
+    <div className={styles.desktopTabs}>
       {NAV_TABS.map((tab) => (
         <a
           key={tab}
           href={TAB_URLS[tab]}
-          className="h-8 px-2 rounded-md font-['Inter_Display',sans-serif] text-[15px] text-black leading-6 hover:bg-black/5 transition-colors no-underline flex items-center"
+          className={styles.desktopTabLink}
         >
           {tab}
         </a>
@@ -68,7 +72,7 @@ function DesktopNavTabs() {
 function HamburgerIcon({ isOpen }: { isOpen: boolean }) {
   return (
     <svg
-      className="size-5"
+      className={styles.hamburgerIcon}
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
@@ -96,32 +100,22 @@ function MobileMenu({ starCount, onClose }: { starCount: number; onClose: () =>
   return (
     <>
       {/* Backdrop overlay — below navbar (absolute top-full), covers rest of viewport */}
-      <motion.div
-        className="lg:hidden absolute top-full left-0 right-0 h-screen bg-black/60 backdrop-blur-md z-40 cursor-pointer"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
-        transition={{ duration: 0.2 }}
+      <div
+        className={styles.mobileBackdrop}
         onClick={onClose}
       />
 
       {/* Tray + floating GitHub button */}
-      <motion.div
-        className="lg:hidden absolute left-0 right-0 top-full z-50 pointer-events-none"
-        initial={{ opacity: 0, y: -8 }}
-        animate={{ opacity: 1, y: 0 }}
-        exit={{ opacity: 0, y: -8 }}
-        transition={{ duration: 0.2 }}
-      >
+      <div className={styles.mobileTrayWrap}>
         {/* Tray */}
-        <div className="bg-white border-t border-black/5 rounded-b-[18px] shadow-lg pointer-events-auto">
-          <div className="flex flex-col px-7 pt-3 pb-5 gap-0 max-w-[1200px] mx-auto">
+        <div className={styles.mobileTray}>
+          <div className={styles.mobileTrayInner}>
             {[...NAV_TABS, "Components"].map((tab, index) => (
               <div key={tab}>
-                {index > 0 && <div className="h-px bg-black/5 mx-3" />}
+                {index > 0 && <div className={styles.mobileTrayDivider} />}
                 <a
                   href={TAB_URLS[tab]}
-                  className="h-14 px-3 rounded-md font-['Inter',sans-serif] text-black leading-6 hover:bg-black/5 transition-colors text-left w-full text-[18px] flex items-center gap-1 no-underline"
+                  className={styles.mobileTrayLink}
                 >
                   {tab}
                   {tab === "Components" && <ChevronDownIcon />}
@@ -132,18 +126,18 @@ function MobileMenu({ starCount, onClose }: { starCount: number; onClose: () =>
         </div>
 
         {/* GitHub button — centered, 80px below tray, scaled up 140% */}
-        <div className="flex justify-center pt-[80px] pointer-events-auto">
-          <button className="bg-white flex items-center gap-1.5 h-[38px] pl-3 pr-2 rounded-full relative cursor-pointer scale-[1.17]">
+        <div className={styles.mobileGithubButtonWrap}>
+          <button className={styles.mobileGithubButton}>
             <div
               aria-hidden="true"
-              className="absolute inset-0 pointer-events-none rounded-full border border-black/10"
-              style={{ boxShadow: BUTTON_SHADOW }}
+              className={styles.mobileGithubButtonOverlay}
+              style={MOBILE_GITHUB_BUTTON_STYLE}
             />
             <GitHubIcon />
             <StarCountBadge count={starCount} isHighlighted={false} />
           </button>
         </div>
-      </motion.div>
+      </div>
     </>
   );
 }
@@ -173,14 +167,14 @@ export function Navbar() {
 
   return (
     <nav
-      className="w-full sticky top-0 z-50 bg-white px-8 py-1 transition-[border-color] duration-200"
+      className={styles.nav}
       style={{ borderBottom: `1px solid ${isScrolled ? NAVBAR_BORDER_COLOR : "transparent"}` }}
     >
-      <div className="flex items-center justify-between max-w-300 mx-auto">
+      <div className={styles.navInner}>
         {/* Left: Logos */}
-        <div className="flex items-center gap-2">
+        <div className={styles.logoCluster}>
           <ThesysLogo isHovered={isLogoHovered} onHoverChange={setIsLogoHovered} />
-          <div className="h-4 w-px bg-black/10" />
+          <div className={styles.logoDivider} />
           <OpenUILogo />
         </div>
 
@@ -188,13 +182,13 @@ export function Navbar() {
         <DesktopNavTabs />
 
         {/* Right: GitHub button (desktop only) */}
-        <div className="hidden lg:flex">
+        <div className={styles.desktopGithub}>
           <GitHubStarButton repo="thesysdev/openui" isScrolled={isScrolled} />
         </div>
 
         {/* Right: Hamburger (mobile only) */}
         <button
-          className="lg:hidden flex items-center justify-center size-10 rounded-lg hover:bg-black/5 transition-colors cursor-pointer"
+          className={styles.mobileMenuButton}
           onClick={toggleMobileMenu}
           aria-label="Toggle menu"
         >
@@ -203,9 +197,7 @@ export function Navbar() {
       </div>
 
       {/* Mobile dropdown menu */}
-      <AnimatePresence>
-        {isMobileMenuOpen && <MobileMenu starCount={starCount} onClose={toggleMobileMenu} />}
-      </AnimatePresence>
+      {isMobileMenuOpen && <MobileMenu starCount={starCount} onClose={toggleMobileMenu} />}
     </nav>
   );
 }
diff --git a/docs/app/(home)/components/PossibilitiesSection/PossibilitiesSection.module.css b/docs/app/(home)/components/PossibilitiesSection/PossibilitiesSection.module.css
new file mode 100644
index 000000000..2ea12e2b6
--- /dev/null
+++ b/docs/app/(home)/components/PossibilitiesSection/PossibilitiesSection.module.css
@@ -0,0 +1,135 @@
+.section {
+  width: 100%;
+}
+
+.headerContainer {
+  max-width: 75rem;
+  margin-inline: auto;
+  padding-inline: 1.25rem;
+}
+
+.header {
+  margin-bottom: 2rem;
+}
+
+.title {
+  max-width: 673px;
+  font-family: "Inter", sans-serif;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1.25;
+  color: #000;
+}
+
+.trackViewport {
+  overflow: hidden;
+  margin-block: -2rem;
+  padding-block: 2rem;
+}
+
+.track {
+  display: flex;
+  width: max-content;
+  gap: 1rem;
+  padding-left: 1rem;
+  user-select: none;
+  will-change: transform;
+}
+
+.trackIdle {
+  cursor: grab;
+}
+
+.trackDragging {
+  cursor: grabbing;
+}
+
+.card {
+  position: relative;
+  width: 240px;
+  flex-shrink: 0;
+  border-radius: 14px;
+  background: #fff;
+}
+
+.cardInner {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.cardImage,
+.cardImagePlaceholder {
+  width: 100%;
+  aspect-ratio: 5 / 4;
+  border-top-left-radius: 14px;
+  border-top-right-radius: 14px;
+}
+
+.cardImage {
+  object-fit: cover;
+}
+
+.cardImagePlaceholder {
+  background: rgb(0 0 0 / 4%);
+}
+
+.cardBody {
+  width: 100%;
+  padding: 1rem;
+}
+
+.cardTitle {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: #000;
+}
+
+.cardOverlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border: 1px solid rgb(0 0 0 / 6%);
+  border-radius: 14px;
+  box-shadow:
+    0 1px 2px 0 rgb(22 34 51 / 4%),
+    0 8px 16px 0 rgb(22 34 51 / 4%);
+}
+
+@media (min-width: 1024px) {
+  .headerContainer {
+    padding-inline: 2rem;
+  }
+
+  .title {
+    font-size: 32px;
+  }
+
+  .card {
+    width: 300px;
+    border-radius: 18px;
+  }
+
+  .cardImage,
+  .cardImagePlaceholder {
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+  }
+
+  .cardBody {
+    padding: 1.5rem;
+  }
+
+  .cardTitle {
+    font-family: "Inter Display", sans-serif;
+    font-size: 22px;
+  }
+
+  .cardOverlay {
+    border-radius: 18px;
+  }
+}
diff --git a/docs/app/(home)/components/PossibilitiesSection.tsx b/docs/app/(home)/components/PossibilitiesSection/PossibilitiesSection.tsx
similarity index 75%
rename from docs/app/(home)/components/PossibilitiesSection.tsx
rename to docs/app/(home)/components/PossibilitiesSection/PossibilitiesSection.tsx
index 49ef5aaeb..9d3a1cffd 100644
--- a/docs/app/(home)/components/PossibilitiesSection.tsx
+++ b/docs/app/(home)/components/PossibilitiesSection/PossibilitiesSection.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
+import styles from "./PossibilitiesSection.module.css";
+
 const listCardImg = "/images/home/0ea99cfd72e99c55c9511d4e0c3fbb08d37fbafd.png";
 const chartsCardImg = "/images/home/9fbf5ad1316183d81279510b9fceb2bd1b538523.png";
 const formsCardImg = "/images/home/8ae798233176b4d64e44605bb283d7a9886fed7a.png";
@@ -30,25 +32,25 @@ const IMAGE_MAP: Record<string, string> = {
 function Card({ title }: { title: string }) {
   const img = IMAGE_MAP[title];
   return (
-    <div className="bg-white rounded-[14px] lg:rounded-[18px] shrink-0 w-[240px] lg:w-[300px] relative">
-      <div className="flex flex-col items-start overflow-hidden rounded-[inherit]">
+    <div className={styles.card}>
+      <div className={styles.cardInner}>
         {img ? (
           <img
             src={img}
             alt={`${title} illustration`}
-            className="w-full aspect-[5/4] rounded-t-[14px] lg:rounded-t-2xl object-cover"
+            className={styles.cardImage}
             draggable={false}
           />
         ) : (
-          <div className="bg-black/4 w-full aspect-[5/4] rounded-t-[14px] lg:rounded-t-2xl" />
+          <div className={styles.cardImagePlaceholder} />
         )}
-        <div className="p-4 lg:p-6 w-full">
-          <p className="font-['Inter',sans-serif] font-medium text-sm lg:font-['Inter_Display',sans-serif] lg:text-[22px] text-black leading-[1.4]">
+        <div className={styles.cardBody}>
+          <p className={styles.cardTitle}>
             {title}
           </p>
         </div>
       </div>
-      <div className="absolute inset-0 border border-black/8 rounded-[14px] lg:rounded-[18px] shadow-[0px_4px_8px_-4px_rgba(22,34,51,0.08),0px_16px_24px_0px_rgba(22,34,51,0.08)] pointer-events-none" />
+      <div className={styles.cardOverlay} />
     </div>
   );
 }
@@ -73,7 +75,7 @@ export function PossibilitiesSection() {
 
   const [isDragging, setIsDragging] = useState(false);
 
-  // ── Auto-scroll loop ──────────────────────────────────────────────────
+  // Auto-scroll loop
   useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -100,7 +102,7 @@ export function PossibilitiesSection() {
     return () => cancelAnimationFrame(rafRef.current);
   }, []);
 
-  // ── Drag handlers ─────────────────────────────────────────────────────
+  // Drag handlers
   const handlePointerDown = useCallback((e: React.PointerEvent) => {
     const el = scrollRef.current;
     if (!el) return;
@@ -141,22 +143,21 @@ export function PossibilitiesSection() {
   }, []);
 
   return (
-    <div className="w-full">
+    <div className={styles.section}>
       {/* Header */}
-      <div className="max-w-[1200px] mx-auto px-5 lg:px-8">
-        <div className="mb-8">
-          <h2 className="font-['Inter',sans-serif] font-semibold text-[22px] lg:text-[32px] text-black leading-[1.25] max-w-[673px]">
+      <div className={styles.headerContainer}>
+        <div className={styles.header}>
+          <h2 className={styles.title}>
             Endless possibilities. Built in realtime.
           </h2>
         </div>
       </div>
 
       {/* Marquee track */}
-      <div className="overflow-hidden py-8 -my-8">
+      <div className={styles.trackViewport}>
         <div
           ref={scrollRef}
-          className="flex gap-4 w-max pl-4 select-none"
-          style={{ cursor: isDragging ? "grabbing" : "grab", willChange: "transform" }}
+          className={`${styles.track} ${isDragging ? styles.trackDragging : styles.trackIdle}`}
           onMouseEnter={pauseScroll}
           onMouseLeave={resumeScroll}
           onPointerDown={handlePointerDown}
diff --git a/docs/app/(home)/components/ShiroMascot/ShiroMascot.module.css b/docs/app/(home)/components/ShiroMascot/ShiroMascot.module.css
new file mode 100644
index 000000000..646b96e15
--- /dev/null
+++ b/docs/app/(home)/components/ShiroMascot/ShiroMascot.module.css
@@ -0,0 +1,21 @@
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.figure {
+  position: relative;
+  height: 87px;
+  width: 133px;
+  overflow: hidden;
+}
+
+.svg {
+  position: absolute;
+  display: block;
+  top: 15.49%;
+  left: 8%;
+  width: 83.84%;
+  height: 115.47%;
+}
diff --git a/docs/app/(home)/components/ShiroMascot.tsx b/docs/app/(home)/components/ShiroMascot/ShiroMascot.tsx
similarity index 68%
rename from docs/app/(home)/components/ShiroMascot.tsx
rename to docs/app/(home)/components/ShiroMascot/ShiroMascot.tsx
index 537a6d818..9e44a08e4 100644
--- a/docs/app/(home)/components/ShiroMascot.tsx
+++ b/docs/app/(home)/components/ShiroMascot/ShiroMascot.tsx
@@ -1,19 +1,14 @@
 import svgPaths from "@/imports/svg-k4s4rxtkj0";
+import styles from "./ShiroMascot.module.css";
 
 export function ShiroMascot() {
   return (
-    <div className="flex items-center justify-center">
-      <div className="w-[133px] h-[87px] relative overflow-hidden">
+    <div className={styles.root}>
+      <div className={styles.figure}>
         <svg
-          className="absolute block"
+          className={styles.svg}
           fill="none"
           viewBox="0 0 111.502 100.458"
-          style={{
-            top: "15.49%",
-            left: "8%",
-            width: "83.84%",
-            height: "115.47%",
-          }}
         >
           <path d={svgPaths.p1ea82800} fill="black" />
           <path d={svgPaths.p372c6800} fill="black" />
diff --git a/docs/app/(home)/components/StepsSection/StepsSection.module.css b/docs/app/(home)/components/StepsSection/StepsSection.module.css
new file mode 100644
index 000000000..184c86861
--- /dev/null
+++ b/docs/app/(home)/components/StepsSection/StepsSection.module.css
@@ -0,0 +1,213 @@
+.section {
+  width: 100%;
+  padding-inline: 1.25rem;
+}
+
+.container {
+  max-width: 75rem;
+  margin-inline: auto;
+}
+
+.card {
+  border-radius: 18px;
+  background: #fff;
+}
+
+.desktopSteps {
+  display: none;
+  overflow: hidden;
+}
+
+.mobileSteps {
+  display: block;
+}
+
+.stepBadge {
+  display: flex;
+  height: 30px;
+  width: 30px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgb(0 0 0 / 10%);
+  border-radius: 999px;
+}
+
+.stepBadgeActive {
+  background: #000;
+  color: #fff;
+}
+
+.stepBadgeInactive {
+  background: #fff;
+  color: #000;
+}
+
+.stepBadgeLabel {
+  font-family: "Inter", sans-serif;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.25rem;
+}
+
+.divider {
+  height: 1px;
+  width: 100%;
+  background: rgb(0 0 0 / 8%);
+}
+
+.stepDetails {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.stepDescription {
+  font-family: "Inter Display", sans-serif;
+  font-size: 18px;
+  line-height: 1.2;
+  color: rgb(0 0 0 / 40%);
+}
+
+.stepDetailsTitle {
+  margin-bottom: 0.5rem;
+}
+
+.stepDetailsList {
+  padding-left: 1.5rem;
+}
+
+.illustrationFallback,
+.desktopIllustrationFrame,
+.mobileIllustrationFrame {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  border-radius: 16px;
+}
+
+.illustrationFallback {
+  height: 100%;
+  background: #f1f1f1;
+}
+
+.desktopIllustrationFrame {
+  height: 100%;
+}
+
+.mobileIllustrationFrame {
+  aspect-ratio: 610 / 432;
+}
+
+.mobileIllustrationScale {
+  position: absolute;
+  inset: 0;
+  transform-origin: top left;
+}
+
+.desktopStep {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  overflow: hidden;
+  padding: 1.5rem;
+  cursor: pointer;
+}
+
+.desktopStepLead {
+  display: flex;
+  width: 45%;
+  flex-shrink: 0;
+  gap: 0.75rem;
+}
+
+.desktopStepCopy {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding-right: 60px;
+}
+
+.desktopStepTitle {
+  padding-block: 0.25rem;
+  font-family: "Inter Display", sans-serif;
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 1.25;
+  color: #000;
+}
+
+.desktopStepPreview {
+  height: 100%;
+  flex: 1;
+  margin-left: 1.5rem;
+}
+
+.mobileStepButton {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.mobileStepTitle {
+  flex: 1;
+  text-align: left;
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.25;
+  color: #000;
+}
+
+.mobileStepPanel {
+  overflow: hidden;
+}
+
+.mobileStepContent {
+  padding: 0 0.75rem 0.75rem;
+}
+
+.mobileStepDetails {
+  display: flex;
+  margin-left: 42px;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.mobileStepIllustrationWrap {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  margin-top: 1.5rem;
+  border-radius: 16px;
+}
+
+@media (min-width: 1024px) {
+  .section {
+    padding-inline: 2rem;
+  }
+
+  .desktopSteps {
+    display: block;
+  }
+
+  .mobileSteps {
+    display: none;
+  }
+
+  .stepBadge {
+    height: 36px;
+    width: 36px;
+  }
+
+  .stepBadgeLabel {
+    font-size: 18px;
+    line-height: 1.5rem;
+  }
+}
diff --git a/docs/app/(home)/components/StepsSection.tsx b/docs/app/(home)/components/StepsSection/StepsSection.tsx
similarity index 77%
rename from docs/app/(home)/components/StepsSection.tsx
rename to docs/app/(home)/components/StepsSection/StepsSection.tsx
index 259ba6cac..e9b906eda 100644
--- a/docs/app/(home)/components/StepsSection.tsx
+++ b/docs/app/(home)/components/StepsSection/StepsSection.tsx
@@ -6,6 +6,7 @@ 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
@@ -64,7 +65,7 @@ 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 4px 8px 0px rgba(22,34,51,0.08), 0px 16px 24px 0px rgba(22,34,51,0.08)";
+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)";
 
 // ---------------------------------------------------------------------------
@@ -85,11 +86,9 @@ const TRANSITION = {
 function StepBadge({ num, isActive }: { num: number; isActive: boolean }) {
   return (
     <div
-      className={`shrink-0 rounded-full flex items-center justify-center size-[30px] lg:size-9 border border-black/10 ${
-        isActive ? "bg-black text-white" : "bg-white text-black"
-      }`}
+      className={`${styles.stepBadge} ${isActive ? styles.stepBadgeActive : styles.stepBadgeInactive}`}
     >
-      <span className="font-['Inter',sans-serif] font-medium text-[15px] lg:text-lg leading-5 lg:leading-6">
+      <span className={styles.stepBadgeLabel}>
         {num}
       </span>
     </div>
@@ -97,19 +96,19 @@ function StepBadge({ num, isActive }: { num: number; isActive: boolean }) {
 }
 
 function Divider() {
-  return <div className="w-full h-px bg-black/8" />;
+  return <div className={styles.divider} />;
 }
 
 function StepDetails({ step, hideDetails }: { step: Step; hideDetails?: boolean }) {
   return (
-    <div className="flex flex-col gap-6">
-      <p className="font-['Inter_Display',sans-serif] text-lg text-black/40 leading-[1.2]">
+    <div className={styles.stepDetails}>
+      <p className={styles.stepDescription}>
         {step.description}
       </p>
       {!hideDetails && step.details.length > 0 && (
-        <div className="font-['Inter_Display',sans-serif] text-lg text-black/40 leading-[1.2]">
-          {step.detailsTitle && <p className="mb-2">{step.detailsTitle}</p>}
-          <ul className="list-disc pl-6 space-y-1">
+        <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>
             ))}
@@ -138,16 +137,16 @@ function StepIllustration({ stepNumber, mobile }: { stepNumber: number; mobile?:
     return () => ro.disconnect();
   }, [mobile]);
 
-  if (!Illustration) return <div className="bg-[#f1f1f1] rounded-2xl w-full h-full" />;
+  if (!Illustration) return <div className={styles.illustrationFallback} />;
 
   if (mobile) {
     return (
       <div
         ref={containerRef}
-        className="w-full rounded-2xl overflow-hidden relative aspect-[610/432]"
+        className={styles.mobileIllustrationFrame}
       >
         <div
-          className="absolute inset-0 origin-top-left"
+          className={styles.mobileIllustrationScale}
           style={{ width: 610, height: 432, transform: `scale(${scale})` }}
         >
           <Illustration />
@@ -157,7 +156,7 @@ function StepIllustration({ stepNumber, mobile }: { stepNumber: number; mobile?:
   }
 
   return (
-    <div className="w-full h-full rounded-2xl overflow-hidden relative">
+    <div className={styles.desktopIllustrationFrame}>
       <Illustration />
     </div>
   );
@@ -178,10 +177,12 @@ function DesktopStep({
 }) {
   return (
     <motion.div
-      className="flex items-start p-6 overflow-hidden cursor-pointer relative"
+      className={styles.desktopStep}
       animate={{
         height: isActive ? EXPANDED_HEIGHT : COLLAPSED_HEIGHT,
-        boxShadow: isActive ? "0px 4px 12px rgba(0,0,0,0.06)" : "0px 0px 0px rgba(0,0,0,0)",
+        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}
@@ -189,11 +190,11 @@ function DesktopStep({
       onMouseEnter={onActivate}
     >
       {/* Left: number + text */}
-      <div className="flex gap-3 w-[45%] shrink-0">
+      <div className={styles.desktopStepLead}>
         <StepBadge num={step.number} isActive={isActive} />
 
-        <div className="flex flex-col gap-6 flex-1 pr-[60px]">
-          <h3 className="font-['Inter_Display',sans-serif] font-medium text-[24px] text-black leading-[1.25] py-1">
+        <div className={styles.desktopStepCopy}>
+          <h3 className={styles.desktopStepTitle}>
             {step.title}
           </h3>
 
@@ -216,7 +217,7 @@ function DesktopStep({
       <AnimatePresence>
         {isActive && (
           <motion.div
-            className="flex-1 h-full ml-6"
+            className={styles.desktopStepPreview}
             initial={{ opacity: 0, scale: 0.95 }}
             animate={{ opacity: 1, scale: 1 }}
             exit={{ opacity: 0, scale: 0.95 }}
@@ -245,9 +246,9 @@ function MobileStep({
 }) {
   return (
     <div>
-      <button className="w-full flex items-center gap-3 p-3 cursor-pointer" onClick={onToggle}>
+      <button className={styles.mobileStepButton} onClick={onToggle}>
         <StepBadge num={step.number} isActive={isActive} />
-        <span className="font-['Inter',sans-serif] font-medium text-base text-black leading-[1.25] text-left flex-1">
+        <span className={styles.mobileStepTitle}>
           {step.title}
         </span>
       </button>
@@ -255,17 +256,17 @@ function MobileStep({
       <AnimatePresence>
         {isActive && (
           <motion.div
-            className="overflow-hidden"
+            className={styles.mobileStepPanel}
             initial={{ height: 0, opacity: 0 }}
             animate={{ height: "auto", opacity: 1 }}
             exit={{ height: 0, opacity: 0 }}
             transition={TRANSITION.mobile}
           >
-            <div className="px-3 pb-3">
-              <div className="ml-[42px] flex flex-col gap-6">
+            <div className={styles.mobileStepContent}>
+              <div className={styles.mobileStepDetails}>
                 <StepDetails step={step} hideDetails />
               </div>
-              <div className="rounded-2xl w-full overflow-hidden relative mt-6">
+              <div className={styles.mobileStepIllustrationWrap}>
                 <StepIllustration stepNumber={step.number} mobile />
               </div>
             </div>
@@ -285,14 +286,14 @@ export function StepsSection() {
   const activate = useCallback((n: number) => setActiveStep(n), []);
 
   return (
-    <section className="w-full px-5 lg:px-8">
-      <div className="max-w-[1200px] mx-auto">
+    <section className={styles.section}>
+      <div className={styles.container}>
         <div
-          className="bg-white rounded-[18px]"
+          className={styles.card}
           style={{ border: CARD_BORDER, boxShadow: CARD_SHADOW }}
         >
           {/* Desktop */}
-          <div className="hidden lg:block overflow-hidden" style={{ height: TOTAL_DESKTOP_HEIGHT }}>
+          <div className={styles.desktopSteps} style={{ height: TOTAL_DESKTOP_HEIGHT }}>
             {STEPS.map((step, i) => (
               <div key={step.number}>
                 <DesktopStep
@@ -306,7 +307,7 @@ export function StepsSection() {
           </div>
 
           {/* Mobile */}
-          <div className="lg:hidden">
+          <div className={styles.mobileSteps}>
             {STEPS.map((step, i) => (
               <div key={step.number}>
                 <MobileStep
diff --git a/docs/app/(home)/components/UILibrariesSection/UILibrariesSection.module.css b/docs/app/(home)/components/UILibrariesSection/UILibrariesSection.module.css
new file mode 100644
index 000000000..77fc6c1c5
--- /dev/null
+++ b/docs/app/(home)/components/UILibrariesSection/UILibrariesSection.module.css
@@ -0,0 +1,169 @@
+.section {
+  width: 100%;
+  padding-inline: 1.25rem;
+}
+
+.container {
+  max-width: 75rem;
+  margin-inline: auto;
+}
+
+.header {
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-family: "Inter", sans-serif;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1.25;
+  color: #000;
+}
+
+.mobileOnly {
+  display: inline;
+}
+
+.desktopOnly {
+  display: none;
+}
+
+.cardGrid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.card {
+  position: relative;
+  display: flex;
+  flex: 1;
+  height: 3.5rem;
+  border: 1px solid rgb(0 0 0 / 10%);
+  border-radius: 14px;
+  background: #fff;
+  box-shadow: 0 4px 10px -4px rgb(22 34 51 / 5%);
+}
+
+.cardContent {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem;
+}
+
+.iconBadge {
+  position: relative;
+  display: flex;
+  height: 2rem;
+  width: 2rem;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 6.4px;
+}
+
+.mascotCenter {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mascotFrame {
+  position: relative;
+  height: 22px;
+  width: 22px;
+  transform: rotate(-16.49deg);
+}
+
+.mascotSvgWrap {
+  position: absolute;
+  inset: -1.16% -0.94%;
+}
+
+.mascotSvg,
+.iconSvg {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.iconSvg {
+  position: absolute;
+}
+
+.iconPlacement {
+  position: absolute;
+  left: var(--icon-mobile-left);
+  top: var(--icon-mobile-top);
+  height: var(--icon-mobile-size);
+  width: var(--icon-mobile-size);
+}
+
+.name {
+  font-family: "Inter Display", sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: #000;
+}
+
+@media (min-width: 1024px) {
+  .section {
+    padding-inline: 2rem;
+  }
+
+  .header {
+    margin-bottom: 2rem;
+  }
+
+  .title {
+    font-size: 32px;
+  }
+
+  .mobileOnly {
+    display: none;
+  }
+
+  .desktopOnly {
+    display: inline;
+  }
+
+  .cardGrid {
+    flex-direction: row;
+  }
+
+  .card {
+    height: 5rem;
+    border-radius: 16px;
+  }
+
+  .cardContent {
+    padding: 1rem;
+  }
+
+  .iconBadge {
+    height: 3rem;
+    width: 3rem;
+    border-radius: 9.6px;
+  }
+
+  .mascotFrame {
+    height: 37px;
+    width: 37px;
+  }
+
+  .iconPlacement {
+    left: var(--icon-desktop-left);
+    top: var(--icon-desktop-top);
+    height: var(--icon-desktop-size);
+    width: var(--icon-desktop-size);
+  }
+
+  .name {
+    font-size: 22px;
+  }
+}
diff --git a/docs/app/(home)/components/UILibrariesSection.tsx b/docs/app/(home)/components/UILibrariesSection/UILibrariesSection.tsx
similarity index 64%
rename from docs/app/(home)/components/UILibrariesSection.tsx
rename to docs/app/(home)/components/UILibrariesSection/UILibrariesSection.tsx
index 463404dd2..9cb5cdaee 100644
--- a/docs/app/(home)/components/UILibrariesSection.tsx
+++ b/docs/app/(home)/components/UILibrariesSection/UILibrariesSection.tsx
@@ -1,5 +1,7 @@
+import type { CSSProperties } from "react";
 import mascotSvgPaths from "@/imports/svg-10waxq0xyc";
 import svgPaths from "@/imports/svg-urruvoh2be";
+import styles from "./UILibrariesSection.module.css";
 
 // ---------------------------------------------------------------------------
 // Data
@@ -11,10 +13,9 @@ interface UILibrary {
   desktopName?: string;
   /** Mobile-only name override (optional) */
   mobileName?: string;
-  iconBg: string;
-  iconSize: string;
-  iconOffset: string;
-  iconDesktopOffset: string;
+  iconBackground: string;
+  iconSize?: { mobile: number; desktop: number };
+  iconPosition?: { mobile: { left: number; top: number }; desktop: { left: number; top: number } };
   iconViewBox: string;
   iconPath: string;
   iconFill: string;
@@ -26,10 +27,7 @@ interface UILibrary {
 const LIBRARIES: UILibrary[] = [
   {
     name: "OpenUI Design system",
-    iconBg: "bg-black/8",
-    iconSize: "",
-    iconOffset: "",
-    iconDesktopOffset: "",
+    iconBackground: "rgb(0 0 0 / 8%)",
     iconViewBox: "",
     iconPath: "",
     iconFill: "black",
@@ -37,10 +35,9 @@ const LIBRARIES: UILibrary[] = [
   },
   {
     name: "ShadCN",
-    iconBg: "bg-black",
-    iconSize: "size-4 lg:size-6",
-    iconOffset: "left-2 lg:left-3 top-2 lg:top-3",
-    iconDesktopOffset: "",
+    iconBackground: "#000000",
+    iconSize: { mobile: 16, desktop: 24 },
+    iconPosition: { mobile: { left: 8, top: 8 }, desktop: { left: 12, top: 12 } },
     iconViewBox: "0 0 24 24",
     iconPath: svgPaths.p46a4800,
     iconFill: "white",
@@ -50,10 +47,9 @@ const LIBRARIES: UILibrary[] = [
   {
     name: "Material Design system",
     mobileName: "Material Design system Guidelines",
-    iconBg: "bg-[#a485ff]",
-    iconSize: "size-5 lg:size-[30px]",
-    iconOffset: "left-1.5 lg:left-[9px] top-1.5 lg:top-[9px]",
-    iconDesktopOffset: "",
+    iconBackground: "#a485ff",
+    iconSize: { mobile: 20, desktop: 30 },
+    iconPosition: { mobile: { left: 6, top: 6 }, desktop: { left: 9, top: 9 } },
     iconViewBox: "0 0 30 30",
     iconPath: svgPaths.p3a7bdd80,
     iconFill: "white",
@@ -67,17 +63,29 @@ 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="lg:hidden">{lib.mobileName}</span>
-      <span className="hidden lg:inline">{lib.desktopName ?? lib.name}</span>
+      <span className={styles.mobileOnly}>{lib.mobileName}</span>
+      <span className={styles.desktopOnly}>{lib.desktopName ?? lib.name}</span>
     </>
   ) : (
     lib.name
   );
 
   const iconContent = lib.clipId ? (
-    <svg className="absolute block size-full" fill="none" viewBox={lib.iconViewBox}>
+    <svg className={styles.iconSvg} fill="none" viewBox={lib.iconViewBox}>
       <g clipPath={`url(#${lib.clipId})`}>
         <path d={lib.iconPath} fill={lib.iconFill} />
       </g>
@@ -88,24 +96,25 @@ function LibraryCard({ lib }: { lib: UILibrary }) {
       </defs>
     </svg>
   ) : (
-    <svg className="absolute block size-full" fill="none" viewBox={lib.iconViewBox}>
+    <svg className={styles.iconSvg} fill="none" viewBox={lib.iconViewBox}>
       <path d={lib.iconPath} fill={lib.iconFill} />
     </svg>
   );
 
   return (
-    <div className="bg-white h-14 lg:h-20 rounded-[14px] lg:rounded-2xl relative border border-black/10 shadow-[0px_8px_16px_-4px_rgba(22,34,51,0.08)] flex-1">
-      <div className="flex items-center gap-4 p-3 lg:p-4 h-full">
+    <div className={styles.card}>
+      <div className={styles.cardContent}>
         {/* Icon */}
         <div
-          className={`${lib.iconBg} rounded-[6.4px] lg:rounded-[9.6px] size-8 lg:size-12 shrink-0 relative overflow-hidden`}
+          className={styles.iconBadge}
+          style={{ backgroundColor: lib.iconBackground }}
         >
           {lib.isMascot ? (
-            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="rotate-[-16.49deg] size-[22px] lg:size-[37px] relative">
-                <div className="absolute inset-[-1.16%_-0.94%]">
+            <div className={styles.mascotCenter}>
+              <div className={styles.mascotFrame}>
+                <div className={styles.mascotSvgWrap}>
                   <svg
-                    className="block size-full"
+                    className={styles.mascotSvg}
                     fill="none"
                     preserveAspectRatio="xMidYMid meet"
                     viewBox="0 0 37.6937 30.558"
@@ -148,12 +157,14 @@ function LibraryCard({ lib }: { lib: UILibrary }) {
               </div>
             </div>
           ) : (
-            <div className={`absolute ${lib.iconOffset} ${lib.iconSize}`}>{iconContent}</div>
+            <div className={styles.iconPlacement} style={iconStyle}>
+              {iconContent}
+            </div>
           )}
         </div>
 
         {/* Name */}
-        <span className="font-['Inter_Display',sans-serif] font-medium text-base lg:text-[22px] text-black leading-[1.4]">
+        <span className={styles.name}>
           {displayName}
         </span>
       </div>
@@ -167,22 +178,22 @@ function LibraryCard({ lib }: { lib: UILibrary }) {
 
 export function UILibrariesSection() {
   return (
-    <div className="w-full px-5 lg:px-8">
-      <div className="max-w-[1200px] mx-auto">
+    <div className={styles.section}>
+      <div className={styles.container}>
         {/* Header */}
-        <div className="mb-6 lg:mb-8">
-          <h2 className="font-['Inter',sans-serif] font-semibold text-[22px] lg:text-[32px] text-black leading-[1.25]">
-            <span className="lg:hidden">
+        <div className={styles.header}>
+          <h2 className={styles.title}>
+            <span className={styles.mobileOnly}>
               Works with any UI library.
               <br />
               Including yours.
             </span>
-            <span className="hidden lg:inline">Works with any UI library. Including yours.</span>
+            <span className={styles.desktopOnly}>Works with any UI library. Including yours.</span>
           </h2>
         </div>
 
         {/* Library cards */}
-        <div className="flex flex-col lg:flex-row gap-3">
+        <div className={styles.cardGrid}>
           {LIBRARIES.map((lib) => (
             <LibraryCard key={lib.name} lib={lib} />
           ))}
diff --git a/docs/app/(home)/components/shared/shared.module.css b/docs/app/(home)/components/shared/shared.module.css
new file mode 100644
index 000000000..5a98b10b2
--- /dev/null
+++ b/docs/app/(home)/components/shared/shared.module.css
@@ -0,0 +1,5 @@
+.copyIcon {
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+}
diff --git a/docs/app/(home)/components/shared.tsx b/docs/app/(home)/components/shared/shared.tsx
similarity index 78%
rename from docs/app/(home)/components/shared.tsx
rename to docs/app/(home)/components/shared/shared.tsx
index 244129516..d7078a5db 100644
--- a/docs/app/(home)/components/shared.tsx
+++ b/docs/app/(home)/components/shared/shared.tsx
@@ -1,10 +1,11 @@
 import svgPaths from "@/imports/svg-urruvoh2be";
+import styles from "./shared.module.css";
 
 // ---------------------------------------------------------------------------
 // Design tokens shared across multiple sections
 // ---------------------------------------------------------------------------
 
-export const BUTTON_SHADOW = "0px 8px 16px 0px rgba(22,34,51,0.08)";
+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
@@ -13,7 +14,7 @@ export const BUTTON_SHADOW = "0px 8px 16px 0px rgba(22,34,51,0.08)";
 /** Clipboard/copy icon used in CTA buttons across Hero, BuildChat, etc. */
 export function CopyIcon({ color = "white" }: { color?: string }) {
   return (
-    <svg className="shrink-0 size-4" fill="none" viewBox="0 0 14.6667 14.6667">
+    <svg className={styles.copyIcon} fill="none" viewBox="0 0 14.6667 14.6667">
       <path
         d={svgPaths.p102ea840}
         stroke={color}
diff --git a/docs/app/(home)/layout.tsx b/docs/app/(home)/layout.tsx
index 631183c9b..ddf1f5288 100644
--- a/docs/app/(home)/layout.tsx
+++ b/docs/app/(home)/layout.tsx
@@ -1,4 +1,4 @@
-import { Navbar } from "./components/Navbar";
+import { Navbar } from "./components/Navbar/Navbar";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
diff --git a/docs/app/(home)/page.module.css b/docs/app/(home)/page.module.css
new file mode 100644
index 000000000..dfebcea5d
--- /dev/null
+++ b/docs/app/(home)/page.module.css
@@ -0,0 +1,47 @@
+.page {
+  position: relative;
+  min-height: 100vh;
+  width: 100%;
+  overflow-x: clip;
+  background: #fff;
+}
+
+.mascotSection {
+  margin-top: 4rem;
+}
+
+.contentSection {
+  position: relative;
+  margin-top: 4rem;
+}
+
+.contentShell {
+  display: flex;
+  flex-direction: column;
+  gap: 7.5rem;
+  padding-block: 5rem;
+  background: rgb(0 0 0 / 4%);
+}
+
+.compatibilityStack {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+@media (min-width: 768px) {
+  .contentShell {
+    gap: 15rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .mascotSection,
+  .contentSection {
+    margin-top: 6rem;
+  }
+
+  .compatibilityStack {
+    gap: 2.5rem;
+  }
+}
diff --git a/docs/app/(home)/page.tsx b/docs/app/(home)/page.tsx
index 8b39b9f1c..394a7f9ed 100644
--- a/docs/app/(home)/page.tsx
+++ b/docs/app/(home)/page.tsx
@@ -1,28 +1,29 @@
-import { BuildChatSection } from "./components/BuildChatSection";
-import { CompatibilitySection } from "./components/CompatibilitySection";
-import { FadeInSection } from "./components/FadeInSection";
-import { FeaturesSection } from "./components/FeaturesSection";
-import { Footer } from "./components/Footer";
-import { GradientDivider } from "./components/GradientDivider";
-import { HeroSection } from "./components/HeroSection";
-import { PossibilitiesSection } from "./components/PossibilitiesSection";
-import { ShiroMascot } from "./components/ShiroMascot";
-import { StepsSection } from "./components/StepsSection";
-import { UILibrariesSection } from "./components/UILibrariesSection";
+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 styles from "./page.module.css";
 
 export default function HomePage() {
   return (
-    <div className="bg-white min-h-screen w-full overflow-x-clip relative">
+    <div className={styles.page}>
       <HeroSection />
-      <div className="mt-16 lg:mt-24">
+      <div className={styles.mascotSection}>
         <ShiroMascot />
       </div>
       <StepsSection />
-      <div className="mt-16 lg:mt-24 relative">
+      <div className={styles.contentSection}>
         <GradientDivider direction="down" />
-        <div className="bg-black/4 py-20 flex flex-col gap-30 md:gap-60">
+        <div className={styles.contentShell}>
           <PossibilitiesSection />
-          <div className="flex flex-col gap-8 lg:gap-10">
+          <div className={styles.compatibilityStack}>
             <UILibrariesSection />
             <CompatibilitySection />
           </div>
diff --git a/docs/components/brand-logo.tsx b/docs/components/brand-logo.tsx
index d4bd75e1a..2dcd4bd55 100644
--- a/docs/components/brand-logo.tsx
+++ b/docs/components/brand-logo.tsx
@@ -6,7 +6,7 @@ import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useState } from "react";
 
 const COUNT_UP_DURATION = 3000;
-const BUTTON_SHADOW = "0px 8px 16px 0px rgba(22,34,51,0.08)";
+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;
 const LOGO_COLOR_TRANSITION = { duration: 0.25 } as const;
@@ -204,14 +204,14 @@ export function GitHubStarButton({
       href={`https://github.com/${repo}`}
       target="_blank"
       rel="noopener noreferrer"
-      className="bg-white flex items-center gap-1.5 h-10 pl-2.5 pr-1.5 rounded-full relative cursor-pointer transition-all duration-200 hover:scale-105 no-underline"
+      className="bg-white flex items-center gap-1.5 h-10 pl-2.5 pr-1.5 rounded-full relative cursor-pointer transition-all duration-200 hover:scale-[0.995] no-underline"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
       <div
         aria-hidden="true"
-        className="absolute inset-0 pointer-events-none rounded-full border border-black/10"
-        style={{ boxShadow: isScrolled ? "none" : BUTTON_SHADOW }}
+        className="absolute inset-0 pointer-events-none rounded-full border border-black/6"
+        style={{ boxShadow: isScrolled || isHovered ? "none" : BUTTON_SHADOW }}
       />
       <GitHubIcon />
       <StarCountBadge count={starCount} isHighlighted={isHovered} />

From be4581dd757ecb8c1b0658c34081e90273994783 Mon Sep 17 00:00:00 2001
From: pr3khar <prakhar19376@iiitd.ac.in>
Date: Wed, 11 Mar 2026 17:01:29 +0530
Subject: [PATCH 2/2] removed link to components from mobile nav

---
 docs/app/(home)/components/Navbar/Navbar.tsx | 21 +-------------------
 1 file changed, 1 insertion(+), 20 deletions(-)

diff --git a/docs/app/(home)/components/Navbar/Navbar.tsx b/docs/app/(home)/components/Navbar/Navbar.tsx
index a00d7c8e4..938b91f8c 100644
--- a/docs/app/(home)/components/Navbar/Navbar.tsx
+++ b/docs/app/(home)/components/Navbar/Navbar.tsx
@@ -8,7 +8,6 @@ import {
   ThesysLogo,
   useGitHubStarCount,
 } from "@/components/brand-logo";
-import svgPaths from "@/imports/svg-urruvoh2be";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useState, type CSSProperties } from "react";
 import { BUTTON_SHADOW } from "../shared/shared";
@@ -30,23 +29,6 @@ const MOBILE_GITHUB_BUTTON_STYLE = {
   "--mobile-github-button-shadow": BUTTON_SHADOW,
 } as CSSProperties;
 
-// Shared SVG icons
-// ---------------------------------------------------------------------------
-
-function ChevronDownIcon() {
-  return (
-    <svg className={styles.chevronIcon} fill="none" viewBox="0 0 20 20">
-      <path
-        d={svgPaths.p2709b200}
-        stroke="black"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.25"
-      />
-    </svg>
-  );
-}
-
 // Sub-components
 // ---------------------------------------------------------------------------
 
@@ -117,7 +99,7 @@ function MobileMenu({ starCount, onClose }: { starCount: number; onClose: () =>
         {/* Tray */}
         <div className={styles.mobileTray}>
           <div className={styles.mobileTrayInner}>
-            {[...NAV_TABS, "Components"].map((tab, index) => (
+            {NAV_TABS.map((tab, index) => (
               <div key={tab}>
                 {index > 0 && <div className={styles.mobileTrayDivider} />}
                 <a
@@ -125,7 +107,6 @@ function MobileMenu({ starCount, onClose }: { starCount: number; onClose: () =>
                   className={styles.mobileTrayLink}
                 >
                   {tab}
-                  {tab === "Components" && <ChevronDownIcon />}
                 </a>
               </div>
             ))}