Simplify landing hero and clarify sandbox guidance in agent docs

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

AGENTS.md

@@ -1,9 +1,12 @@
-You are a software developer building a web application using Next.js, Tailwind CSS, and Shadcn. The preview website is operating in a browser-based sandboxed environment, so some features may not always be available.
+You are a software developer building a web application using Next.js, Tailwind CSS, and Shadcn.
 
+# SANDBOX ENVIRONMENT
+The preview website is operating in a browser-based sandboxed environment, so some features may not always be available.
 - To install packages modify the package.json file directly and dependencies will be installed
 - Use lucide icons or @reactremix/icon for icons
 - In the sandbox environment packages will resolve using esm.sh
-- In the sandbox environment Tailwind is loaded via the CDN, so some Tailwind features may not be available — avoid exotic Tailwind classes to be safe
+- In the sandbox environment Tailwind is installed automatically via the Tailwind CDN, so some Tailwind features may not be available — avoid exotic Tailwind classes to be safe
+- The browser sandbox environment does support API routes, server components, and streaming (such as with the Vercel AI SDK)
 
 # STYLE GUIDE
 - Always use Tailwind CSS for styling via a globals.css file

CLAUDE.md

@@ -1,9 +1,12 @@
-You are a software developer building a web application using Next.js, Tailwind CSS, and Shadcn. The preview website is operating in a browser-based sandboxed environment, so some features may not always be available.
+You are a software developer building a web application using Next.js, Tailwind CSS, and Shadcn.
 
+# SANDBOX ENVIRONMENT
+The preview website is operating in a browser-based sandboxed environment, so some features may not always be available.
 - To install packages modify the package.json file directly and dependencies will be installed
 - Use lucide icons or @reactremix/icon for icons
 - In the sandbox environment packages will resolve using esm.sh
-- In the sandbox environment Tailwind is loaded via the CDN, so some Tailwind features may not be available — avoid exotic Tailwind classes to be safe
+- In the sandbox environment Tailwind is installed automatically via the Tailwind CDN, so some Tailwind features may not be available — avoid exotic Tailwind classes to be safe
+- The browser sandbox environment does support API routes, server components, and streaming (such as with the Vercel AI SDK)
 
 # STYLE GUIDE
 - Always use Tailwind CSS for styling via a globals.css file

app/page.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 export default function Home() {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between gap-20 py-32 px-16 bg-white dark:bg-black sm:items-start">
+      <main className="flex flex-1 w-full max-w-3xl flex-col items-center py-16 px-16 bg-white dark:bg-black sm:items-start">
         <Image
           className="dark:invert"
           src="/next.svg"
@@ -12,29 +12,15 @@ export default function Home() {
           height={20}
           priority
         />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+        <div className="flex flex-1 flex-col items-center justify-center gap-6 text-center sm:items-start sm:text-left">
           <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, use the chat panel to make edits.
+            Build with AI. Ship instantly.
           </h1>
           <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Describe what you want to build and watch it come to life. Just
+            Describe your idea and watch it come to life — just start typing in
-            start typing in the chat to shape your app, one idea at a time.
+            the chat.
           </p>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <button
-            type="button"
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-          >
-            Primary Button
-          </button>
-          <button
-            type="button"
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-          >
-            Secondary Button
-          </button>
-        </div>
       </main>
     </div>
   );