Merge pull request #119 from shakacode/jg-codex/docs-add-hichee-example

Add HiChee.com to examples

Author: justin808

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

@@ -41,6 +41,34 @@
   gap: 0.9rem;
 }
 
+.siteGrid {
+  max-width: 42rem;
+  margin-bottom: 3rem;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.9rem;
+}
+
+.siteCard {
+  border: 1px solid var(--site-border);
+  border-radius: 8px;
+  background: var(--site-surface);
+  padding: 0.95rem;
+  box-shadow: none;
+}
+
+.siteCard h3 {
+  margin-bottom: 0.45rem;
+  line-height: 1.12;
+}
+
+.siteLink {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 0;
+  font-weight: 700;
+}
+
 @media (max-width: 996px) {
   .hero {
     padding: 2.1rem 0 1.7rem;

prototypes/docusaurus/src/pages/examples.tsx

@@ -1,4 +1,5 @@
 import type {ReactNode} from 'react';
+import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
 
 import {demos, type DemoCategory} from '../constants/demos';
@@ -29,21 +30,50 @@ const demoGroups: DemoGroup[] = [
   },
 ];
 
+const productionSites = [
+  {
+    title: 'HiChee.com',
+    description:
+      'Production vacation-rental comparison site using React on Rails to help travelers compare Airbnb, Booking.com, Vrbo, and direct-booking prices.',
+    href: 'https://hichee.com/',
+  },
+];
+
 export default function ExamplesPage(): ReactNode {
   return (
     <Layout title="Examples" description="React on Rails demo and starter applications">
       <main className={styles.main}>
         <section className={styles.hero}>
           <div className="container">
-            <p className={styles.kicker}>Demos and starters</p>
-            <h1>See React on Rails running, then read the source.</h1>
+            <p className={styles.kicker}>Demos, starters, and production sites</p>
+            <h1>
+              See React on Rails running in demos and real products.
+            </h1>
             <p className={styles.lead}>
-              Every demo links to a live deployment and its source code. Use them to evaluate
+              Use live deployments, source-backed demos, and production references to evaluate
               React on Rails, compare OSS and Pro, or start a new app.
             </p>
           </div>
         </section>
 
+        <section className="container">
+          <div className={styles.sectionHeader}>
+            <p className={styles.sectionEyebrow}>Production sites</p>
+            <h2>Live products built with React on Rails.</h2>
+          </div>
+          <div className={styles.siteGrid}>
+            {productionSites.map((site) => (
+              <article className={styles.siteCard} key={site.title}>
+                <h3>{site.title}</h3>
+                <p>{site.description}</p>
+                <Link className={styles.siteLink} href={site.href}>
+                  Visit site
+                </Link>
+              </article>
+            ))}
+          </div>
+        </section>
+
         {demoGroups.map((group) => {
           const groupDemos = demos.filter((demo) => demo.category === group.category);
           if (groupDemos.length === 0) {