[docs] Add brand logos marquee to docs homepage + misc papercuts

apps/docs/app/(home)/components/agent-demo.tsx

@@ -92,16 +92,18 @@ const LogLine = ({
 };
 
 const Spinner = () => (
-  <span className="inline-flex items-center gap-1.5 text-xs text-gray-1000">
-    <svg
-      className="size-3 animate-spin"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={2}
-      viewBox="0 0 24 24"
-    >
-      <path d="M12 2v4m0 12v4m-7.07-3.93 2.83-2.83m8.48-8.48 2.83-2.83M2 12h4m12 0h4M4.93 4.93l2.83 2.83m8.48 8.48 2.83 2.83" />
-    </svg>
+  <span className="inline-flex items-center gap-2 text-xs text-gray-1000">
+    <span className="inline-flex size-3.5 shrink-0 items-center justify-center">
+      <svg
+        className="size-3 animate-spin"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        viewBox="0 0 24 24"
+      >
+        <path d="M12 2v4m0 12v4m-7.07-3.93 2.83-2.83m8.48-8.48 2.83-2.83M2 12h4m12 0h4M4.93 4.93l2.83 2.83m8.48 8.48 2.83 2.83" />
+      </svg>
+    </span>
     Running skill…
   </span>
 );
@@ -223,17 +225,22 @@ export const AgentDemo = () => {
         >
           {/* Command input */}
           {showCommand && (
-            <div className="flex items-center gap-2 animate-[fade-in_0.15s_ease]">
-              <span className="inline-flex size-3.5 shrink-0 items-center justify-center font-mono text-sm leading-none text-amber-800">
-                &gt;
+            <div className="flex h-5 items-center gap-2 animate-[fade-in_0.15s_ease]">
+              <span className="inline-flex size-3.5 shrink-0 items-center justify-center font-mono text-xs leading-none text-amber-800">
+                $
               </span>
-              <span className="font-mono text-xs text-black dark:text-white">
+              <span className="font-mono text-xs leading-5 text-black dark:text-white">
                 {phase === "typing-command"
                   ? skill.command.slice(0, charIndex)
                   : skill.command}
-                {phase === "typing-command" && (
-                  <span className="ml-0.5 inline-block h-3.5 w-[5px] animate-[pulse_0.6s_ease-in-out_infinite] bg-black/70 dark:bg-white/70" />
-                )}
+                <span
+                  aria-hidden
+                  className={`ml-0.5 inline-block h-3.5 w-[5px] align-middle bg-black/70 dark:bg-white/70 ${
+                    phase === "typing-command"
+                      ? "animate-[pulse_0.6s_ease-in-out_infinite]"
+                      : "invisible"
+                  }`}
+                />
               </span>
             </div>
           )}
@@ -246,7 +253,7 @@ export const AgentDemo = () => {
           )}
 
           {/* Log lines */}
-          <div className="flex flex-col gap-1.5">
+          <div className="flex flex-col gap-2.5">
             {skill.logs.map((log, i) => (
               <LogLine
                 key={log.text}

apps/docs/app/(home)/components/assistant-demo.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Image from "next/image";
+import { AvatarTommy } from "@/components/assets/avatars/avatar-tommy";
 
 interface Shoe {
   name: string;
@@ -45,15 +46,11 @@ export const AssistantDemo = () => (
           <span className="text-[13px] font-medium text-foreground">
             Tommy Triangle
           </span>
-          <span
-            aria-hidden
-            className="flex size-5 items-center justify-center rounded-full bg-gray-1000 text-[10px] text-background-100"
-          >
-            ▲
-          </span>
+          <AvatarTommy className="size-5 rounded-full" />
         </div>
         <div className="relative rounded-2xl bg-gray-100 px-4 py-2 text-sm text-foreground">
-          Find me a white sneaker under $120
+          Find me a <span className="dark:hidden">white</span>
+          <span className="hidden dark:inline">black</span> sneaker under $120
           <svg
             aria-hidden
             className="absolute -top-[7px] left-full -ml-3.5 text-gray-100"

apps/docs/app/(home)/components/cart-demo.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { IconCart } from "@/components/geistcn-fallbacks/geistcn-assets/icons/icon-cart";
+import { IconCart } from "@/components/assets/icons/icon-cart";
 
 type Phase =
   | "idle"

apps/docs/app/(home)/components/centered-section.tsx

@@ -14,7 +14,7 @@ export const CenteredSection = ({
   children,
 }: CenteredSectionProps) => (
   <div className="grid gap-12 py-8 sm:py-12">
-    <div className="grid gap-6 sm:grid-cols-2 sm:items-center sm:gap-10">
+    <div className="grid gap-6 md:grid-cols-2 sm:items-center sm:gap-10">
       <div className="grid gap-4">
         <h2 className="font-sans font-semibold text-3xl text-gray-1000 leading-10 tracking-[-0.04em]">
           {title}
@@ -25,7 +25,6 @@ export const CenteredSection = ({
       </div>
       {aside ? <div className="sm:justify-self-center">{aside}</div> : null}
     </div>
-
     {children}
   </div>
 );

apps/docs/app/(home)/components/content-negotiation-demo.tsx

@@ -92,14 +92,19 @@ export const ContentNegotiationDemo = () => {
       >
         {phase !== "idle" && (
           <div className="flex items-start gap-2 animate-[fade-in_0.15s_ease]">
-            <span className="font-mono text-xs text-gray-1000">$</span>
-            <span className="font-mono text-xs text-gray-1000 break-all">
+            <span className="font-mono text-xs leading-5 text-gray-1000">$</span>
+            <span className="font-mono text-xs leading-5 text-gray-1000 break-all">
               {phase === "typing"
                 ? CURL_COMMAND.slice(0, charIndex)
                 : CURL_COMMAND}
-              {phase === "typing" && (
-                <span className="ml-0.5 inline-block h-3.5 w-[5px] animate-[pulse_0.6s_ease-in-out_infinite] bg-black/70 dark:bg-white/70" />
-              )}
+              <span
+                aria-hidden
+                className={`ml-0.5 inline-block h-3.5 w-[5px] align-middle bg-black/70 dark:bg-white/70 ${
+                  phase === "typing"
+                    ? "animate-[pulse_0.6s_ease-in-out_infinite]"
+                    : "invisible"
+                }`}
+              />
             </span>
           </div>
         )}

apps/docs/app/(home)/components/cta.tsx

@@ -39,8 +39,8 @@ export const CTA = ({
       {secondary ? (
         <Button
           asChild
-          className="h-12 w-full sm:w-fit rounded-full border border-gray-alpha-400 bg-background-100 px-5 text-foreground shadow-none hover:bg-background-200"
-          variant="outline"
+          className="h-12 w-full sm:w-fit rounded-full px-5"
+          variant="secondary"
         >
           <Link href={secondary.href} target={secondary.target}>
             {secondary.label}

apps/docs/app/(home)/components/logos-marquee.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import { LogoAg1 } from "@/components/assets/logos/logo-ag1";
+import { LogoBombas } from "@/components/assets/logos/logo-bombas";
+import { LogoMadeIn } from "@/components/assets/logos/logo-made-in";
+import { LogoPaige } from "@/components/assets/logos/logo-paige";
+import { LogoRuggable } from "@/components/assets/logos/logo-ruggable";
+import { LogoSupreme } from "@/components/assets/logos/logo-supreme";
+
+interface LogoEntry {
+  key: string;
+  node: ReactNode;
+}
+
+const LOGOS: LogoEntry[] = [
+  { key: "ruggable", node: <LogoRuggable className="h-7 w-auto md:h-8" /> },
+  { key: "bombas", node: <LogoBombas className="h-4 w-auto md:h-5" /> },
+  { key: "paige", node: <LogoPaige className="h-7 w-auto md:h-8" /> },
+  { key: "ag1", node: <LogoAg1 className="h-7 w-auto md:h-8" /> },
+  { key: "supreme", node: <LogoSupreme className="h-8 w-auto md:h-10" /> },
+  { key: "made-in", node: <LogoMadeIn className="h-5 w-auto md:h-6" /> },
+];
+
+export const LogosMarquee = () => (
+  <section
+    aria-label="Featured brands"
+    className="relative w-full overflow-hidden py-10 [mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]"
+  >
+    <div className="flex w-max animate-marquee gap-16 pr-16 text-foreground md:gap-24 md:pr-24">
+      {[...LOGOS, ...LOGOS].map((logo, index) => (
+        <div
+          key={`${logo.key}-${index}`}
+          className="flex shrink-0 items-center"
+        >
+          {logo.node}
+        </div>
+      ))}
+    </div>
+  </section>
+);

apps/docs/app/(home)/components/one-two-section.tsx

@@ -13,7 +13,7 @@ export const OneTwoSection = ({
   leftClassName,
   children,
 }: OneTwoSectionProps) => (
-  <div className="grid gap-12 py-8 xl:grid-cols-[436px_572px] xl:gap-x-[72px] xl:gap-y-0 xl:p-0 xl:py-12">
+  <div className="grid gap-12 py-8 md:grid-cols-2 xl:gap-y-0 xl:p-0 xl:py-12">
     <div
       className={`flex flex-col gap-2 text-balance${leftClassName ? ` ${leftClassName}` : ""}`}
     >

apps/docs/app/(home)/components/shopify-commerce.tsx

@@ -40,8 +40,8 @@ export const ShopifyCommerce = () => (
       </div>
       <Button
         asChild
-        className="h-12 w-fit rounded-full border border-gray-alpha-400 bg-background-100 px-5 text-foreground shadow-none hover:bg-background-200"
-        variant="outline"
+        className="h-12 w-fit rounded-full px-5"
+        variant="secondary"
       >
         <Link href="https://vercel.com/contact/sales" target="_blank">
           Start Your Shop Today

apps/docs/app/(home)/page.tsx

@@ -21,6 +21,7 @@ import { CTA } from "./components/cta";
 import { StorefrontHero } from "@/components/storefront-hero";
 import { ContentNegotiationDemo } from "./components/content-negotiation-demo";
 import { Hero } from "./components/hero";
+import { LogosMarquee } from "./components/logos-marquee";
 import { OneTwoSection } from "./components/one-two-section";
 import { ShopifyCommerce } from "./components/shopify-commerce";
 
@@ -62,8 +63,8 @@ const HomePage = () => (
       <div className="flex flex-wrap items-center justify-center gap-3">
         <Button
           asChild
-          className="h-12 w-fit rounded-full px-5 border border-gray-alpha-400 bg-background-100 text-foreground shadow-none hover:bg-background-200 dark:border-gray-alpha-400 dark:bg-background-100 dark:hover:bg-background-200"
-          variant="outline"
+          className="h-12 w-fit rounded-full px-5"
+          variant="secondary"
         >
           <Link href="/docs">View Documentation</Link>
         </Button>
@@ -132,6 +133,7 @@ const HomePage = () => (
         <ContentNegotiationDemo />
       </OneTwoSection>
       <ShopifyCommerce />
+      <LogosMarquee />
       <CTA
         description="Fully customizable with AI agents. Built on Next.js."
         primary={{
@@ -141,7 +143,7 @@ const HomePage = () => (
         }}
         secondary={{ href: "/docs", label: "View Documentation" }}
         title="Start your shop today."
-        className="mt-12"
+        className="mt-12 sm:mt-32"
       />
     </div>
   </div>

apps/docs/app/global.css

@@ -818,11 +818,24 @@ figure[role="group"] button {
   }
 }
 
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
 @theme inline {
   --animate-collapsible-down: collapsible-down 200ms ease-out;
   --animate-collapsible-up: collapsible-up 200ms ease-out;
 }
 
+@utility animate-marquee {
+  animation: marquee var(--marquee-duration, 40s) linear infinite;
+}
+
 @utility text-heading-40 {
   @apply font-sans font-semibold text-[40px] leading-[48px] tracking-[-2.4px];
 }

apps/docs/components/ai-elements/conversation.tsx

@@ -50,7 +50,7 @@ export const ConversationEmptyState = ({
   <div
     className={cn(
       "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
-      className
+      className,
     )}
     {...props}
   >
@@ -85,12 +85,12 @@ export const ConversationScrollButton = ({
       <Button
         className={cn(
           "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-muted",
-          className
+          className,
         )}
         onClick={handleScrollToBottom}
         size="icon"
         type="button"
-        variant="outline"
+        variant="secondary"
         {...props}
       >
         <ArrowDownIcon className="size-4" />

apps/docs/components/ai-elements/open-in-chat.tsx

@@ -236,7 +236,7 @@ export type OpenInTriggerProps = ComponentProps<typeof DropdownMenuTrigger>;
 export const OpenInTrigger = ({ children, ...props }: OpenInTriggerProps) => (
   <DropdownMenuTrigger {...props} asChild>
     {children ?? (
-      <Button type="button" variant="outline">
+      <Button type="button" variant="secondary">
         Open in chat
         <ChevronDownIcon className="size-4" />
       </Button>
@@ -256,7 +256,9 @@ export const OpenInChatGPT = (props: OpenInChatGPTProps) => {
         rel="noopener"
         target="_blank"
       >
-        <span className="shrink-0 size-4 [&>svg]:size-4">{providers.chatgpt.icon}</span>
+        <span className="shrink-0 size-4 [&>svg]:size-4">
+          {providers.chatgpt.icon}
+        </span>
         <span className="flex-1">{providers.chatgpt.title}</span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
@@ -276,7 +278,9 @@ export const OpenInClaude = (props: OpenInClaudeProps) => {
         rel="noopener"
         target="_blank"
       >
-        <span className="shrink-0 size-4 [&>svg]:size-4">{providers.claude.icon}</span>
+        <span className="shrink-0 size-4 [&>svg]:size-4">
+          {providers.claude.icon}
+        </span>
         <span className="flex-1">{providers.claude.title}</span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
@@ -296,7 +300,9 @@ export const OpenInT3 = (props: OpenInT3Props) => {
         rel="noopener"
         target="_blank"
       >
-        <span className="shrink-0 size-4 [&>svg]:size-4">{providers.t3.icon}</span>
+        <span className="shrink-0 size-4 [&>svg]:size-4">
+          {providers.t3.icon}
+        </span>
         <span className="flex-1">{providers.t3.title}</span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
@@ -316,7 +322,9 @@ export const OpenInScira = (props: OpenInSciraProps) => {
         rel="noopener"
         target="_blank"
       >
-        <span className="shrink-0 size-4 [&>svg]:size-4">{providers.scira.icon}</span>
+        <span className="shrink-0 size-4 [&>svg]:size-4">
+          {providers.scira.icon}
+        </span>
         <span className="flex-1">{providers.scira.title}</span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
@@ -336,7 +344,9 @@ export const OpenInv0 = (props: OpenInv0Props) => {
         rel="noopener"
         target="_blank"
       >
-        <span className="shrink-0 size-4 [&>svg]:size-4">{providers.v0.icon}</span>
+        <span className="shrink-0 size-4 [&>svg]:size-4">
+          {providers.v0.icon}
+        </span>
         <span className="flex-1">{providers.v0.title}</span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>
@@ -356,7 +366,9 @@ export const OpenInCursor = (props: OpenInCursorProps) => {
         rel="noopener"
         target="_blank"
       >
-        <span className="shrink-0 size-4 [&>svg]:size-4">{providers.cursor.icon}</span>
+        <span className="shrink-0 size-4 [&>svg]:size-4">
+          {providers.cursor.icon}
+        </span>
         <span className="flex-1">{providers.cursor.title}</span>
         <ExternalLinkIcon className="size-4 shrink-0" />
       </a>