Feature AI prompts in home Quick Start

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: justin808

prototypes/docusaurus/src/pages/index.module.css

@@ -108,6 +108,13 @@
   line-height: 1.16;
 }
 
+.quickStartNote {
+  max-width: 44rem;
+  margin: 0.6rem 0 0;
+  color: var(--ifm-color-content-secondary);
+  font-size: 0.95rem;
+}
+
 .quickStartGrid,
 .valueGrid,
 .migrationGrid,
@@ -141,7 +148,6 @@
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.quickStartCard,
 .valueCard,
 .migrationCard,
 .quoteCard {
@@ -153,34 +159,17 @@
   box-shadow: none;
 }
 
-.quickStartCard h3,
 .valueCard h3,
 .migrationCard h3 {
   margin-bottom: 0.55rem;
   line-height: 1.12;
 }
 
-.quickStartCard p,
 .valueCard p,
 .migrationCard p {
   color: var(--ifm-color-content-secondary);
 }
 
-.inlineCode {
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  margin: 0 0 0.8rem;
-  padding: 0.6rem 0.7rem;
-  border: 1px solid var(--site-border);
-  border-radius: 6px;
-  background: var(--site-inline-code-surface);
-  color: var(--ifm-color-content);
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
 .cardLink {
   display: inline-flex;
   align-items: center;

prototypes/docusaurus/src/pages/index.tsx

@@ -7,33 +7,11 @@ import ThemedImage from '@theme/ThemedImage';
 
 import {docsRoutes} from '../constants/docsRoutes';
 import {featuredDemos} from '../constants/demos';
+import {agentNote, homePrompts} from '../constants/prompts';
 import DemoCard from '../components/DemoCard';
+import PromptCard from '../components/PromptCard';
 import styles from './index.module.css';
 
-const quickStartCards = [
-  {
-    title: 'Create App',
-    command: 'npx create-react-on-rails-app@latest my-app',
-    description: 'Scaffold a working Rails + React app with TypeScript defaults.',
-    href: docsRoutes.createApp,
-    cta: 'Open guide',
-  },
-  {
-    title: 'Install Into Rails',
-    command: 'bundle exec rails generate react_on_rails:install --typescript',
-    description: 'Add React on Rails to an existing app while keeping Rails routes and conventions.',
-    href: docsRoutes.installExistingApp,
-    cta: 'Open guide',
-  },
-  {
-    title: 'Upgrade To Pro',
-    command: 'bundle add react_on_rails_pro',
-    description: 'Evaluate Pro SSR, streaming, and RSC paths before buying a production license.',
-    href: docsRoutes.proUpgrade,
-    cta: 'Open guide',
-  },
-];
-
 const valueCards = [
   {
     title: 'Rails-first React',
@@ -183,19 +161,18 @@ function QuickStartSection() {
   return (
     <section className={styles.section}>
       <div className="container">
-        <div className={styles.sectionHeader}>
-          <h2>Quick Start</h2>
+        <div className={styles.sectionHeaderRow}>
+          <div className={styles.sectionHeader}>
+            <h2>Quick Start</h2>
+            <p className={styles.quickStartNote}>{agentNote}</p>
+          </div>
+          <Link className={styles.browseAll} to="/prompts">
+            Browse all prompts →
+          </Link>
         </div>
         <div className={styles.quickStartGrid}>
-          {quickStartCards.map((card) => (
-            <article className={styles.quickStartCard} key={card.title}>
-              <h3>{card.title}</h3>
-              <code className={styles.inlineCode}>{card.command}</code>
-              <p>{card.description}</p>
-              <Link className={styles.cardLink} to={card.href}>
-                {card.cta}
-              </Link>
-            </article>
+          {homePrompts.map((prompt) => (
+            <PromptCard prompt={prompt} key={prompt.id} />
           ))}
         </div>
       </div>