From 4201e18ae99042d3c6d1dce9a3a091b86a0e13e9 Mon Sep 17 00:00:00 2001
From: elstua <thestua@gmail.com>
Date: Wed, 4 Mar 2026 18:54:00 +0000
Subject: [PATCH 1/2] add sidebar navigation and update layout

Replace header with a persistent sidebar component, restructure the main layout to use sidebar + content in a centered container, and update mobile drawer positioning.

Made-with: Cursor
---
 apps/web/src/components/sidebar.tsx | 215 ++++++++++++++++++++++++++++
 apps/web/src/routes/_view/index.tsx |   2 +-
 apps/web/src/routes/_view/route.tsx |  26 ++--
 3 files changed, 233 insertions(+), 10 deletions(-)
 create mode 100644 apps/web/src/components/sidebar.tsx

diff --git a/apps/web/src/components/sidebar.tsx b/apps/web/src/components/sidebar.tsx
new file mode 100644
index 0000000000..ef62c88477
--- /dev/null
+++ b/apps/web/src/components/sidebar.tsx
@@ -0,0 +1,215 @@
+import { Link, useRouterState } from "@tanstack/react-router";
+import { Menu, X } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { cn } from "@hypr/utils";
+
+import { SearchTrigger } from "@/components/search";
+import { getPlatformCTA, usePlatform } from "@/hooks/use-platform";
+
+function CharLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      width="103"
+      height="30"
+      viewBox="0 0 103 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M7.871 4.147C7.871 5.658 7.082 7.039 6.099 8.214C4.65 9.946 3.77 12.161 3.77 14.575C3.77 16.99 4.65 19.205 6.099 20.937C7.082 22.112 7.871 23.493 7.871 25.004V29.151H2.965V24.319C2.965 22.735 2.165 21.249 0.822 20.34L0 19.783V9.235L0.822 8.678C2.165 7.769 2.965 6.284 2.965 4.699V0L7.871 0V4.147Z"
+        fill="currentColor"
+      />
+      <path
+        d="M94.746 4.147C94.746 5.658 95.535 7.039 96.519 8.214C97.967 9.946 98.847 12.161 98.847 14.575C98.847 16.99 97.967 19.205 96.519 20.937C95.535 22.112 94.746 23.493 94.746 25.004V29.151H99.653V24.319C99.653 22.735 100.452 21.249 101.795 20.34L102.617 19.783V9.235L101.795 8.678C100.452 7.769 99.653 6.284 99.653 4.699V0L94.746 0V4.147Z"
+        fill="currentColor"
+      />
+      <path
+        d="M90.369 4.536H86.669C84.596 4.536 82.721 5.667 81.73 7.429V4.536H73.026V8.029H78.244V20.821H73.026V24.313H90.311V20.821H82.425V12.447C82.425 10.262 84.191 8.494 86.365 8.494H90.369V4.536Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M60.901 4.071C63.781 4.071 66.142 5.182 67.798 6.995V4.536H71.284V24.313H67.798V21.805C66.128 23.645 63.753 24.778 60.901 24.778C55.064 24.778 51.331 20.074 51.331 14.425C51.331 11.606 52.225 9.021 53.882 7.131C55.546 5.235 57.954 4.071 60.901 4.071ZM61.365 7.912C59.5 7.912 58.023 8.638 57.005 9.793C55.981 10.956 55.396 12.586 55.396 14.425C55.396 18.088 57.776 20.937 61.365 20.937C64.954 20.937 67.334 18.088 67.334 14.425C67.334 12.586 66.749 10.956 65.725 9.793C64.708 8.638 63.231 7.912 61.365 7.912Z"
+        fill="currentColor"
+      />
+      <path
+        d="M49.589 12.098C49.589 7.924 46.214 4.536 42.048 4.536H41.195C39.142 4.536 36.977 5.657 35.905 7.463V0H32.188V24.313H36.369V12.447C36.369 11.405 36.912 10.422 37.78 9.684C38.648 8.944 39.793 8.494 40.891 8.494H41.06C43.345 8.494 45.407 10.359 45.407 12.564V24.313H49.589V12.098Z"
+        fill="currentColor"
+      />
+      <path
+        d="M26.243 17.328C25.77 19.561 23.754 21.053 20.995 21.053C17.296 21.053 14.852 18.146 14.852 14.425C14.852 12.556 15.453 10.897 16.506 9.713C17.552 8.536 19.074 7.796 20.995 7.796C23.793 7.796 25.772 9.443 26.26 11.533L26.365 11.983H30.559L30.436 11.297C29.689 7.153 26.043 4.071 20.995 4.071C17.864 4.071 15.3 5.224 13.522 7.117C11.749 9.005 10.787 11.595 10.787 14.425C10.787 20.113 14.807 24.778 20.995 24.778C25.907 24.778 29.753 22.074 30.427 17.535L30.527 16.866H26.341L26.243 17.328Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+const navLinks = [
+  { to: "/why-char/", label: "Why Char" },
+  { to: "/product/ai-notetaking", label: "Product" },
+  { to: "/docs/", label: "Resources" },
+  { to: "/pricing/", label: "Pricing" },
+];
+
+export function Sidebar() {
+  const [isMobileOpen, setIsMobileOpen] = useState(false);
+  const router = useRouterState();
+  const platform = usePlatform();
+  const platformCTA = getPlatformCTA(platform);
+  const pathname = router.location.pathname;
+
+  useEffect(() => {
+    setIsMobileOpen(false);
+  }, [pathname]);
+
+  useEffect(() => {
+    if (isMobileOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isMobileOpen]);
+
+  return (
+    <>
+      <MobileTopBar
+        isMobileOpen={isMobileOpen}
+        setIsMobileOpen={setIsMobileOpen}
+      />
+
+      {isMobileOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/60 md:hidden"
+          onClick={() => setIsMobileOpen(false)}
+        />
+      )}
+
+      <aside
+        className={cn(
+          ["hidden w-[200px] shrink-0 md:block"],
+          ["sticky top-0 h-dvh self-start"],
+        )}
+      >
+        <div className="flex h-full flex-col overflow-y-auto bg-neutral-950">
+          <div className="px-12 pt-16 pb-10">
+            <Link to="/">
+              <CharLogo className="h-7 w-auto text-neutral-500 transition-colors hover:text-neutral-300" />
+            </Link>
+          </div>
+
+          <nav className="flex flex-1 flex-col gap-1 px-12">
+            {navLinks.map((link) => (
+              <Link
+                key={link.to}
+                to={link.to}
+                className={cn(
+                  ["py-2.5 text-base transition-colors"],
+                  [
+                    pathname.startsWith(link.to.replace(/\/$/, ""))
+                      ? "text-neutral-200"
+                      : "text-neutral-500 hover:text-neutral-300",
+                  ],
+                )}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+
+          <div className="shrink-0 px-12 pb-8">
+            <div className="flex flex-col gap-3">
+              <SearchTrigger variant="header" />
+              <SidebarCTA platformCTA={platformCTA} />
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      {/* Mobile slide-out sidebar */}
+      <aside
+        className={cn(
+          [
+            "fixed top-14 left-0 z-50 flex h-[calc(100dvh-56px)] w-[200px] flex-col bg-neutral-950 md:hidden",
+            "border-r border-neutral-800 transition-transform duration-300",
+          ],
+          [isMobileOpen ? "translate-x-0" : "-translate-x-full"],
+        )}
+      >
+        <nav className="flex flex-1 flex-col gap-1 px-8 pt-6">
+          {navLinks.map((link) => (
+            <Link
+              key={link.to}
+              to={link.to}
+              className={cn(
+                ["py-2.5 text-base transition-colors"],
+                [
+                  pathname.startsWith(link.to.replace(/\/$/, ""))
+                    ? "text-neutral-200"
+                    : "text-neutral-500 hover:text-neutral-300",
+                ],
+              )}
+            >
+              {link.label}
+            </Link>
+          ))}
+        </nav>
+
+        <div className="flex flex-col gap-3 px-8 pb-8">
+          <SidebarCTA platformCTA={platformCTA} />
+        </div>
+      </aside>
+    </>
+  );
+}
+
+function MobileTopBar({
+  isMobileOpen,
+  setIsMobileOpen,
+}: {
+  isMobileOpen: boolean;
+  setIsMobileOpen: (open: boolean) => void;
+}) {
+  return (
+    <div className="fixed top-0 right-0 left-0 z-50 flex h-14 items-center justify-between border-b border-neutral-800 bg-neutral-950 px-4 md:hidden">
+      <Link to="/">
+        <CharLogo className="h-5 w-auto text-neutral-500" />
+      </Link>
+      <button
+        onClick={() => setIsMobileOpen(!isMobileOpen)}
+        className="flex size-9 cursor-pointer items-center justify-center rounded-lg text-neutral-400 transition-colors hover:text-neutral-200"
+        aria-label={isMobileOpen ? "Close menu" : "Open menu"}
+      >
+        {isMobileOpen ? <X size={20} /> : <Menu size={20} />}
+      </button>
+    </div>
+  );
+}
+
+function SidebarCTA({
+  platformCTA,
+}: {
+  platformCTA: ReturnType<typeof getPlatformCTA>;
+}) {
+  const baseClass =
+    "flex h-9 items-center justify-center rounded-lg bg-neutral-800 text-sm text-neutral-300 transition-colors hover:bg-neutral-700 hover:text-neutral-100";
+
+  if (platformCTA.action === "download") {
+    return (
+      <a href="/download/apple-silicon" download className={baseClass}>
+        {platformCTA.label}
+      </a>
+    );
+  }
+
+  return (
+    <Link to="/" className={baseClass}>
+      {platformCTA.label}
+    </Link>
+  );
+}
diff --git a/apps/web/src/routes/_view/index.tsx b/apps/web/src/routes/_view/index.tsx
index 28e825d3c0..60d71fab08 100644
--- a/apps/web/src/routes/_view/index.tsx
+++ b/apps/web/src/routes/_view/index.tsx
@@ -116,7 +116,7 @@ function Component() {
   return (
     <main
       className="min-h-screen flex-1 overflow-x-hidden bg-linear-to-b from-white via-stone-50/20 to-white"
-      style={{ backgroundImage: "url(/patterns/dots.svg)" }}
+      // style={{ backgroundImage: "url(/patterns/dots.svg)" }}
     >
       <div className="mx-auto max-w-6xl border-x border-neutral-100 bg-white">
         <AnnouncementBanner />
diff --git a/apps/web/src/routes/_view/route.tsx b/apps/web/src/routes/_view/route.tsx
index 549a6ae1be..7bd00f72d1 100644
--- a/apps/web/src/routes/_view/route.tsx
+++ b/apps/web/src/routes/_view/route.tsx
@@ -8,9 +8,9 @@ import { allHandbooks } from "content-collections";
 import { useCallback, useMemo, useRef, useState } from "react";
 
 import { Footer } from "@/components/footer";
-import { Header } from "@/components/header";
 import { NotFoundContent } from "@/components/not-found";
 import { SearchPaletteProvider } from "@/components/search";
+import { Sidebar } from "@/components/sidebar";
 import { SidebarNavigation } from "@/components/sidebar-navigation";
 import { BlogTocContext } from "@/hooks/use-blog-toc";
 import { DocsDrawerContext } from "@/hooks/use-docs-drawer";
@@ -76,11 +76,19 @@ function Component() {
               }}
             >
               <div className="flex min-h-screen flex-col">
-                {!isChoosePage && <Header />}
-                <main className="flex-1">
-                  <Outlet />
-                </main>
+                {/* Mobile top bar spacer */}
+                <div className="h-14 md:hidden" />
+
+                {/* Sidebar + content in a centered container */}
+                <div className="mx-auto flex w-full max-w-[1280px] flex-1">
+                  {!isChoosePage && <Sidebar />}
+                  <main className="min-w-0 flex-1">
+                    <Outlet />
+                  </main>
+                </div>
+
                 {!isChoosePage && <Footer />}
+
                 {isDocsPage && (
                   <MobileDocsDrawer
                     isOpen={isDocsDrawerOpen}
@@ -123,12 +131,12 @@ function MobileDocsDrawer({
     <>
       {isOpen && (
         <div
-          className="fixed inset-0 top-17.25 z-40 md:hidden"
+          className="fixed inset-0 top-14 z-40 md:hidden"
           onClick={onClose}
         />
       )}
       <div
-        className={`fixed top-17.25 left-0 z-50 h-[calc(100vh-69px)] w-72 border-r border-neutral-100 bg-white/80 shadow-2xl shadow-neutral-900/20 backdrop-blur-xs transition-transform duration-300 ease-in-out md:hidden ${
+        className={`fixed top-14 left-0 z-50 h-[calc(100dvh-56px)] w-72 border-r border-neutral-100 bg-white/80 shadow-2xl shadow-neutral-900/20 backdrop-blur-xs transition-transform duration-300 ease-in-out md:hidden ${
           isOpen ? "translate-x-0" : "-translate-x-full"
         }`}
         style={{
@@ -209,12 +217,12 @@ function MobileHandbookDrawer({
     <>
       {isOpen && (
         <div
-          className="fixed inset-0 top-17.25 z-40 md:hidden"
+          className="fixed inset-0 top-14 z-40 md:hidden"
           onClick={onClose}
         />
       )}
       <div
-        className={`fixed top-17.25 left-0 z-50 h-[calc(100vh-69px)] w-72 border-r border-neutral-100 bg-white/80 shadow-2xl shadow-neutral-900/20 backdrop-blur-xs transition-transform duration-300 ease-in-out md:hidden ${
+        className={`fixed top-14 left-0 z-50 h-[calc(100dvh-56px)] w-72 border-r border-neutral-100 bg-white/80 shadow-2xl shadow-neutral-900/20 backdrop-blur-xs transition-transform duration-300 ease-in-out md:hidden ${
           isOpen ? "translate-x-0" : "-translate-x-full"
         }`}
         style={{

From 2bf827e4ad9ff9f47686dbb50cd3a4dee5db5e52 Mon Sep 17 00:00:00 2001
From: elstua <thestua@gmail.com>
Date: Thu, 5 Mar 2026 11:13:16 +0000
Subject: [PATCH 2/2] update sidebar and landing page styles

Made-with: Cursor
---
 apps/web/src/components/sidebar.tsx | 397 ++++++++++++++++++++++++----
 apps/web/src/routes/_view/index.tsx |  19 +-
 apps/web/src/routes/_view/route.tsx |   2 +-
 apps/web/src/styles.css             |  47 ++--
 4 files changed, 392 insertions(+), 73 deletions(-)

diff --git a/apps/web/src/components/sidebar.tsx b/apps/web/src/components/sidebar.tsx
index ef62c88477..50cc98224e 100644
--- a/apps/web/src/components/sidebar.tsx
+++ b/apps/web/src/components/sidebar.tsx
@@ -1,12 +1,65 @@
 import { Link, useRouterState } from "@tanstack/react-router";
-import { Menu, X } from "lucide-react";
-import { useEffect, useState } from "react";
+import {
+  BookOpen,
+  Building2,
+  ChevronRight,
+  FileText,
+  History,
+  LayoutTemplate,
+  Map,
+  Menu,
+  MessageCircle,
+  Newspaper,
+  X,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 
 import { cn } from "@hypr/utils";
 
 import { SearchTrigger } from "@/components/search";
 import { getPlatformCTA, usePlatform } from "@/hooks/use-platform";
 
+const featuresList = [
+  { to: "/product/ai-notetaking", label: "AI Notetaking" },
+  { to: "/product/search", label: "Searchable Notes" },
+  { to: "/gallery?type=template", label: "Custom Templates" },
+  { to: "/product/markdown", label: "Markdown Files" },
+  { to: "/product/flexible-ai", label: "Flexible AI" },
+  { to: "/opensource", label: "Open Source" },
+];
+
+const solutionsList = [
+  { to: "/solution/knowledge-workers", label: "For Knowledge Workers" },
+  { to: "/enterprise", label: "For Enterprises" },
+  { to: "/product/api", label: "For Developers" },
+];
+
+const resourcesList: {
+  to: string;
+  label: string;
+  icon: LucideIcon;
+  external?: boolean;
+}[] = [
+  { to: "/blog/", label: "Blog", icon: FileText },
+  { to: "/docs/", label: "Documentation", icon: BookOpen },
+  {
+    to: "/gallery?type=template",
+    label: "Meeting Templates",
+    icon: LayoutTemplate,
+  },
+  { to: "/updates/", label: "Updates", icon: Newspaper },
+  { to: "/changelog/", label: "Changelog", icon: History },
+  { to: "/roadmap/", label: "Roadmap", icon: Map },
+  { to: "/company-handbook/", label: "Company Handbook", icon: Building2 },
+  {
+    to: "https://discord.gg/hyprnote",
+    label: "Community",
+    icon: MessageCircle,
+    external: true,
+  },
+];
+
 function CharLogo({ className }: { className?: string }) {
   return (
     <svg
@@ -49,10 +102,10 @@ function CharLogo({ className }: { className?: string }) {
 
 const navLinks = [
   { to: "/why-char/", label: "Why Char" },
-  { to: "/product/ai-notetaking", label: "Product" },
-  { to: "/docs/", label: "Resources" },
+  { to: "/product/ai-notetaking/", label: "Product", hasSubmenu: true },
+  { to: "/docs/", label: "Resources", hasSubmenu: true },
   { to: "/pricing/", label: "Pricing" },
-];
+] as const;
 
 export function Sidebar() {
   const [isMobileOpen, setIsMobileOpen] = useState(false);
@@ -90,36 +143,40 @@ export function Sidebar() {
         />
       )}
 
-      <aside
-        className={cn(
-          ["hidden w-[200px] shrink-0 md:block"],
-          ["sticky top-0 h-dvh self-start"],
-        )}
-      >
-        <div className="flex h-full flex-col overflow-y-auto bg-neutral-950">
+      <aside className="hidden w-[200px] shrink-0 self-stretch md:block">
+        <div className="sticky top-0 flex h-screen flex-col">
           <div className="px-12 pt-16 pb-10">
             <Link to="/">
-              <CharLogo className="h-7 w-auto text-neutral-500 transition-colors hover:text-neutral-300" />
+              <CharLogo className="h-8 w-auto text-stone-950 transition-colors hover:scale-105" />
             </Link>
           </div>
 
           <nav className="flex flex-1 flex-col gap-1 px-12">
-            {navLinks.map((link) => (
-              <Link
-                key={link.to}
-                to={link.to}
-                className={cn(
-                  ["py-2.5 text-base transition-colors"],
-                  [
-                    pathname.startsWith(link.to.replace(/\/$/, ""))
-                      ? "text-neutral-200"
-                      : "text-neutral-500 hover:text-neutral-300",
-                  ],
-                )}
-              >
-                {link.label}
-              </Link>
-            ))}
+            {navLinks.map((link) =>
+              "hasSubmenu" in link && link.hasSubmenu ? (
+                <SidebarFlyout
+                  key={link.to}
+                  label={link.label}
+                  to={link.to}
+                  isActive={pathname.startsWith(link.to.replace(/\/$/, ""))}
+                />
+              ) : (
+                <Link
+                  key={link.to}
+                  to={link.to}
+                  className={cn(
+                    ["py-2.5 text-base transition-colors"],
+                    [
+                      pathname.startsWith(link.to.replace(/\/$/, ""))
+                        ? "text-stone-200"
+                        : "text-stone-950 hover:underline",
+                    ],
+                  )}
+                >
+                  {link.label}
+                </Link>
+              ),
+            )}
           </nav>
 
           <div className="shrink-0 px-12 pb-8">
@@ -141,23 +198,32 @@ export function Sidebar() {
           [isMobileOpen ? "translate-x-0" : "-translate-x-full"],
         )}
       >
-        <nav className="flex flex-1 flex-col gap-1 px-8 pt-6">
-          {navLinks.map((link) => (
-            <Link
-              key={link.to}
-              to={link.to}
-              className={cn(
-                ["py-2.5 text-base transition-colors"],
-                [
-                  pathname.startsWith(link.to.replace(/\/$/, ""))
-                    ? "text-neutral-200"
-                    : "text-neutral-500 hover:text-neutral-300",
-                ],
-              )}
-            >
-              {link.label}
-            </Link>
-          ))}
+        <nav className="flex flex-1 flex-col gap-1 overflow-y-auto px-8 pt-6">
+          {navLinks.map((link) =>
+            "hasSubmenu" in link && link.hasSubmenu ? (
+              <MobileSubmenu
+                key={link.to}
+                label={link.label}
+                to={link.to}
+                isActive={pathname.startsWith(link.to.replace(/\/$/, ""))}
+              />
+            ) : (
+              <Link
+                key={link.to}
+                to={link.to}
+                className={cn(
+                  ["py-2.5 text-base transition-colors"],
+                  [
+                    pathname.startsWith(link.to.replace(/\/$/, ""))
+                      ? "text-neutral-200"
+                      : "text-neutral-500 hover:text-neutral-300",
+                  ],
+                )}
+              >
+                {link.label}
+              </Link>
+            ),
+          )}
         </nav>
 
         <div className="flex flex-col gap-3 px-8 pb-8">
@@ -191,6 +257,245 @@ function MobileTopBar({
   );
 }
 
+function SidebarFlyout({
+  label,
+  to,
+  isActive,
+}: {
+  label: string;
+  to: string;
+  isActive: boolean;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const open = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setIsOpen(true);
+  };
+
+  const close = () => {
+    timeoutRef.current = setTimeout(() => setIsOpen(false), 150);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  return (
+    <div className="relative" onMouseEnter={open} onMouseLeave={close}>
+      <Link
+        to={to}
+        className={cn(
+          [
+            "flex items-center justify-between py-2.5 text-base transition-colors",
+          ],
+          [isActive ? "text-stone-200" : "text-stone-950 hover:underline"],
+        )}
+      >
+        {label}
+        <ChevronRight
+          size={14}
+          className={cn([
+            "transition-opacity",
+            isOpen ? "opacity-100" : "opacity-0",
+          ])}
+        />
+      </Link>
+
+      {isOpen && (
+        <div
+          className="absolute top-0 left-full z-[9999] pl-2"
+          onMouseEnter={open}
+          onMouseLeave={close}
+        >
+          <div className="w-56 rounded-lg border border-stone-200 bg-white py-2 shadow-lg">
+            {label === "Product" && <ProductFlyoutContent />}
+            {label === "Resources" && <ResourcesFlyoutContent />}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ProductFlyoutContent() {
+  return (
+    <div className="flex flex-col">
+      <div className="px-3 pb-1">
+        <span className="text-xs font-medium tracking-wide text-stone-400 uppercase">
+          Features
+        </span>
+      </div>
+      {featuresList.map((item) => (
+        <Link
+          key={item.to}
+          to={item.to}
+          className="px-3 py-1.5 text-sm text-stone-700 transition-colors hover:bg-stone-50 hover:text-stone-950"
+        >
+          {item.label}
+        </Link>
+      ))}
+      <div className="my-1.5 border-t border-stone-100" />
+      <div className="px-3 pb-1">
+        <span className="text-xs font-medium tracking-wide text-stone-400 uppercase">
+          Solutions
+        </span>
+      </div>
+      {solutionsList.map((item) => (
+        <Link
+          key={item.to}
+          to={item.to}
+          className="px-3 py-1.5 text-sm text-stone-700 transition-colors hover:bg-stone-50 hover:text-stone-950"
+        >
+          {item.label}
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+function ResourcesFlyoutContent() {
+  return (
+    <div className="flex flex-col">
+      {resourcesList.map((item) => {
+        const Icon = item.icon;
+        if (item.external) {
+          return (
+            <a
+              key={item.to}
+              href={item.to}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2.5 px-3 py-1.5 text-sm text-stone-700 transition-colors hover:bg-stone-50 hover:text-stone-950"
+            >
+              <Icon size={15} className="shrink-0 text-stone-400" />
+              {item.label}
+            </a>
+          );
+        }
+        return (
+          <Link
+            key={item.to}
+            to={item.to}
+            className="flex items-center gap-2.5 px-3 py-1.5 text-sm text-stone-700 transition-colors hover:bg-stone-50 hover:text-stone-950"
+          >
+            <Icon size={15} className="shrink-0 text-stone-400" />
+            {item.label}
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
+
+function MobileSubmenu({
+  label,
+  isActive,
+}: {
+  label: string;
+  to: string;
+  isActive: boolean;
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div>
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className={cn(
+          [
+            "flex w-full cursor-pointer items-center justify-between py-2.5 text-left text-base transition-colors",
+          ],
+          [
+            isActive
+              ? "text-neutral-200"
+              : "text-neutral-500 hover:text-neutral-300",
+          ],
+        )}
+      >
+        {label}
+        <ChevronRight
+          size={14}
+          className={cn([
+            "transition-transform duration-200",
+            isExpanded && "rotate-90",
+          ])}
+        />
+      </button>
+
+      {isExpanded && (
+        <div className="flex flex-col pb-2 pl-3">
+          {label === "Product" && (
+            <>
+              <span className="py-1 text-xs font-medium tracking-wide text-neutral-600 uppercase">
+                Features
+              </span>
+              {featuresList.map((item) => (
+                <Link
+                  key={item.to}
+                  to={item.to}
+                  className="py-1.5 text-sm text-neutral-400 transition-colors hover:text-neutral-200"
+                >
+                  {item.label}
+                </Link>
+              ))}
+              <span className="mt-2 py-1 text-xs font-medium tracking-wide text-neutral-600 uppercase">
+                Solutions
+              </span>
+              {solutionsList.map((item) => (
+                <Link
+                  key={item.to}
+                  to={item.to}
+                  className="py-1.5 text-sm text-neutral-400 transition-colors hover:text-neutral-200"
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </>
+          )}
+          {label === "Resources" && (
+            <>
+              {resourcesList.map((item) => {
+                const IconComp = item.icon;
+                if (item.external) {
+                  return (
+                    <a
+                      key={item.to}
+                      href={item.to}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-2 py-1.5 text-sm text-neutral-400 transition-colors hover:text-neutral-200"
+                    >
+                      <IconComp
+                        size={14}
+                        className="shrink-0 text-neutral-600"
+                      />
+                      {item.label}
+                    </a>
+                  );
+                }
+                return (
+                  <Link
+                    key={item.to}
+                    to={item.to}
+                    className="flex items-center gap-2 py-1.5 text-sm text-neutral-400 transition-colors hover:text-neutral-200"
+                  >
+                    <IconComp size={14} className="shrink-0 text-neutral-600" />
+                    {item.label}
+                  </Link>
+                );
+              })}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 function SidebarCTA({
   platformCTA,
 }: {
diff --git a/apps/web/src/routes/_view/index.tsx b/apps/web/src/routes/_view/index.tsx
index 60d71fab08..e1f2ed81f9 100644
--- a/apps/web/src/routes/_view/index.tsx
+++ b/apps/web/src/routes/_view/index.tsx
@@ -114,10 +114,7 @@ function Component() {
   };
 
   return (
-    <main
-      className="min-h-screen flex-1 overflow-x-hidden bg-linear-to-b from-white via-stone-50/20 to-white"
-      // style={{ backgroundImage: "url(/patterns/dots.svg)" }}
-    >
+    <main className="min-h-screen flex-1 overflow-x-hidden bg-linear-to-b from-white via-stone-50/20 to-white">
       <div className="mx-auto max-w-6xl border-x border-neutral-100 bg-white">
         <AnnouncementBanner />
         <HeroSection
@@ -254,13 +251,13 @@ function HeroSection({
 
   return (
     <div className="bg-linear-to-b from-stone-50/30 to-stone-100/30">
-      <div className="flex w-full min-w-0 flex-col items-center text-center">
+      <div className="items-left flex w-full min-w-0 flex-col text-left">
         <section
           id="hero"
-          className="laptop:px-0 flex w-full min-w-0 flex-col items-center gap-12 px-4 py-24 text-center"
+          className="laptop:px-4 items-left flex w-full min-w-0 flex-col gap-12 px-8 pt-16 pb-24 text-left"
         >
-          <div className="flex w-full max-w-full min-w-0 flex-col gap-6">
-            <h1 className="min-w-0 font-serif text-2xl tracking-tight break-words text-stone-700 sm:text-5xl">
+          <div className="flex w-2/3 max-w-2/3 min-w-0 flex-col gap-6">
+            <h1 className="min-w-0 font-mono text-2xl font-medium tracking-normal break-words text-stone-700 sm:text-5xl">
               {heroContent.title}
             </h1>
             <p className="min-w-0 text-base break-words text-neutral-600 sm:text-xl">
@@ -274,7 +271,7 @@ function HeroSection({
                 e.preventDefault();
                 form.handleSubmit();
               }}
-              className="w-full max-w-md"
+              className="w-full max-w-md text-left"
             >
               <form.Field
                 name="email"
@@ -294,7 +291,7 @@ function HeroSection({
                   <>
                     <div
                       className={cn([
-                        "relative flex items-center overflow-hidden rounded-full border-2 transition-all duration-200",
+                        "items-left relative flex overflow-hidden rounded-full border-2 transition-all duration-200",
                         shake && "animate-shake border-stone-600",
                         !shake && mutation.isError && "border-red-500",
                         !shake && mutation.isSuccess && "border-green-500",
@@ -359,7 +356,7 @@ function HeroSection({
               </form.Field>
             </form>
           ) : (
-            <div className="flex flex-col items-center gap-4">
+            <div className="items-left justify-left flex max-w-sm flex-col gap-4">
               <DownloadButton />
               {heroCTA.subtextLink ? (
                 <Link
diff --git a/apps/web/src/routes/_view/route.tsx b/apps/web/src/routes/_view/route.tsx
index 7bd00f72d1..7bea467540 100644
--- a/apps/web/src/routes/_view/route.tsx
+++ b/apps/web/src/routes/_view/route.tsx
@@ -80,7 +80,7 @@ function Component() {
                 <div className="h-14 md:hidden" />
 
                 {/* Sidebar + content in a centered container */}
-                <div className="mx-auto flex w-full max-w-[1280px] flex-1">
+                <div className="mx-auto flex w-full max-w-[1280px]">
                   {!isChoosePage && <Sidebar />}
                   <main className="min-w-0 flex-1">
                     <Outlet />
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 8c0691d940..946ec5bc92 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -1,5 +1,5 @@
-@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap&family=Instrument+Serif:ital@1&display=swap");
-
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&family=Lora:wght@400;500;600;700&family=Instrument+Serif:ital@1&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap");
 @font-face {
   font-family: "Redaction";
   src: url("/fonts/Redaction-Regular.otf") format("opentype");
@@ -56,8 +56,9 @@
 @source "../../../packages/transcript/src";
 
 @theme {
-  --font-sans: "SF Pro", system-ui, -apple-system, sans-serif;
-  --font-serif: "Lora", Georgia, serif;
+  --font-sans: "Geist", system-ui, -apple-system, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, monospace;
+  --font-serif: "Fraunces", Georgia, serif;
   --font-serif2: "Instrument Serif", serif;
   --breakpoint-laptop: 72rem;
   --animate-ios-opacity-spin: ios-opacity-spin 1s linear infinite;
@@ -119,8 +120,34 @@
 @layer base {
   html,
   body {
-    overflow-x: hidden;
+    overflow-x: clip;
     max-width: 100vw;
+    font-family: var(--font-sans);
+  }
+
+  h1,
+  h2 {
+    font-family: var(--font-mono);
+  }
+
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  small,
+  span,
+  li {
+    font-family: var(--font-sans);
+  }
+
+  button,
+  [role="button"],
+  [type="button"],
+  [type="submit"],
+  [type="reset"] {
+    font-family: var(--font-mono);
+    cursor: pointer;
   }
 
   [id] {
@@ -272,13 +299,3 @@
     *))::after {
   content: none;
 }
-
-@layer base {
-  button,
-  [role="button"],
-  [type="button"],
-  [type="submit"],
-  [type="reset"] {
-    cursor: pointer;
-  }
-}