Increase navbar logo size and brand presence

prototypes/docusaurus/docusaurus.config.ts

@@ -6,7 +6,7 @@ import {GlobExcludeDefault} from '@docusaurus/utils';
 const config: Config = {
   title: 'React on Rails',
   tagline: 'Integrate React with Rails, including SSR, RSC, and production-grade docs.',
-  favicon: 'img/favicon.ico',
+  favicon: 'img/logo-mark.png',
 
   future: {
     v4: true,
@@ -66,7 +66,9 @@ const config: Config = {
       title: 'React on Rails',
       logo: {
         alt: 'React on Rails Logo',
-        src: 'img/logo.png',
+        src: 'img/logo-mark.png',
+        width: 40,
+        height: 40,
       },
       items: [
         {

prototypes/docusaurus/src/css/custom.css

@@ -30,6 +30,8 @@
   --site-soft-surface: #f6f8fa;
   --site-inline-code-surface: #f6f8fa;
   --site-inline-code-text: #24292f;
+  --site-panel-surface: #ffffff;
+  --site-panel-shadow: rgba(31, 35, 40, 0.08);
 }
 
 [data-theme='dark'] {
@@ -55,6 +57,8 @@
   --site-soft-surface: #0d1117;
   --site-inline-code-surface: #161b22;
   --site-inline-code-text: #c9d1d9;
+  --site-panel-surface: #161b22;
+  --site-panel-shadow: rgba(1, 4, 9, 0.28);
 }
 
 html,
@@ -68,6 +72,23 @@ body {
   box-shadow: none;
 }
 
+.navbar__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.48rem;
+}
+
+.navbar__logo {
+  width: 2.35rem;
+  height: 2.35rem;
+}
+
+.navbar__logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 .navbar__title {
   font-weight: 600;
   letter-spacing: 0;
@@ -106,7 +127,7 @@ body {
 .markdown code {
   background: var(--site-inline-code-surface);
   border: 1px solid var(--site-border);
-  border-radius: 6px;
+  border-radius: 8px;
   font-family: var(--ifm-font-family-monospace);
   color: var(--site-inline-code-text);
 }
@@ -143,3 +164,57 @@ body {
   background: var(--site-soft-surface);
   color: var(--ifm-color-content);
 }
+
+[data-theme='dark'] .button--secondary {
+  background: var(--site-surface);
+  border-color: var(--site-border);
+  color: var(--ifm-color-content);
+}
+
+[data-theme='dark'] .button--secondary:hover {
+  background: #21262d;
+}
+
+@media (max-width: 996px) {
+  .navbar__brand {
+    min-width: 0;
+    max-width: calc(100vw - 5rem);
+    gap: 0.34rem;
+  }
+
+  .navbar__logo {
+    width: 2.1rem;
+    height: 2.1rem;
+  }
+
+  .navbar__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .menu {
+    padding: 0.6rem;
+  }
+
+  .pagination-nav__link {
+    border-radius: 9px;
+  }
+}
+
+@media (max-width: 640px) {
+  :root {
+    --ifm-font-size-base: 15.5px;
+  }
+
+  .button--lg {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .theme-doc-toc-mobile {
+    border-top: 1px solid var(--site-border);
+    border-bottom: 1px solid var(--site-border);
+    background: var(--site-surface);
+  }
+}

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

@@ -50,6 +50,13 @@
   gap: 1rem;
 }
 
+.decisionGrid {
+  margin-bottom: 3rem;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
 .card {
   border: 1px solid var(--site-border);
   border-radius: 10px;
@@ -75,6 +82,7 @@
     padding: 2.4rem 0 2rem;
   }
 
+  .decisionGrid,
   .grid {
     grid-template-columns: 1fr;
   }

prototypes/docusaurus/src/pages/examples.tsx

@@ -64,7 +64,7 @@ export default function ExamplesPage(): ReactNode {
             <p className={styles.sectionEyebrow}>Start with a decision path</p>
             <h2>Choose the guide that matches your migration or evaluation goal.</h2>
           </div>
-          <div className={styles.grid}>
+          <div className={styles.decisionGrid}>
             {evaluationPaths.map((path) => (
               <article className={styles.card} key={path.title}>
                 <p className={styles.cardEyebrow}>{path.eyebrow}</p>

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

@@ -15,6 +15,47 @@
   max-width: 44rem;
 }
 
+.heroIdentity {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.4rem;
+}
+
+.heroLogoFrame {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 5.6rem;
+  height: 5.6rem;
+  border: 1px solid var(--site-border);
+  border-radius: 28px;
+  background: var(--site-panel-surface);
+  box-shadow: 0 22px 46px var(--site-panel-shadow);
+}
+
+.heroLogo {
+  width: 4.4rem;
+  height: 4.4rem;
+  object-fit: contain;
+}
+
+.heroIdentityText {
+  min-width: 0;
+}
+
+.heroName {
+  display: block;
+  margin-bottom: 0.4rem;
+  font-family: var(--ifm-heading-font-family);
+  font-size: clamp(1.6rem, 2vw, 1.95rem);
+  line-height: 0.95;
+}
+
+.heroKicker {
+  margin-bottom: 0;
+}
+
 .heroPanel {
   border: 1px solid var(--site-border);
   border-radius: 10px;
@@ -33,6 +74,11 @@
   font-weight: 700;
 }
 
+.cardEyebrow {
+  font-family: var(--ifm-font-family-base);
+  line-height: 1.3;
+}
+
 .kicker,
 .sectionEyebrow {
   color: var(--ifm-color-primary-dark);
@@ -125,8 +171,11 @@
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.flowGrid,
 .migrationGrid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.flowGrid {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
@@ -153,6 +202,10 @@
   color: var(--ifm-color-content-secondary);
 }
 
+.flowCard .cardEyebrow {
+  margin-bottom: 0.7rem;
+}
+
 .inlineCode {
   display: block;
   margin: 0 0 1rem;
@@ -201,6 +254,22 @@
     padding: 2.6rem 0 2.2rem;
   }
 
+  .heroIdentity {
+    align-items: flex-start;
+    gap: 0.85rem;
+  }
+
+  .heroLogoFrame {
+    width: 4.8rem;
+    height: 4.8rem;
+    border-radius: 22px;
+  }
+
+  .heroLogo {
+    width: 3.7rem;
+    height: 3.7rem;
+  }
+
   .heroLayout,
   .personaGrid,
   .flowGrid,

prototypes/docusaurus/src/pages/index.tsx

@@ -1,6 +1,7 @@
 import type {ReactNode} from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import Layout from '@theme/Layout';
 
 import styles from './index.module.css';
@@ -89,11 +90,29 @@ const testimonials = [
 ];
 
 function HeroSection() {
+  const heroLogoSrc = useBaseUrl('/img/logo-mark.png');
+
   return (
     <header className={clsx(styles.heroBanner)}>
       <div className={clsx('container', styles.heroLayout)}>
         <div className={styles.heroContent}>
-          <p className={styles.kicker}>Official documentation for one product with two tiers</p>
+          <div className={styles.heroIdentity}>
+            <div className={styles.heroLogoFrame}>
+              <img
+                className={styles.heroLogo}
+                src={heroLogoSrc}
+                alt="React on Rails logo"
+                width="88"
+                height="88"
+              />
+            </div>
+            <div className={styles.heroIdentityText}>
+              <span className={styles.heroName}>React on Rails</span>
+              <p className={clsx(styles.kicker, styles.heroKicker)}>
+                Official documentation for one product with two tiers
+              </p>
+            </div>
+          </div>
           <h1 className={styles.title}>React on Rails keeps Rails conventions and adds modern React.</h1>
           <p className={styles.subtitle}>
             Start with one recommended path, then branch into SSR, streaming, RSC, migration, or
@@ -170,7 +189,7 @@ function FlowSection() {
         <div className={styles.flowGrid}>
           {recommendedFlows.map((flow) => (
             <article className={styles.flowCard} key={flow.title}>
-              <p className={styles.cardEyebrow}>{flow.title}</p>
+              <h3 className={styles.cardEyebrow}>{flow.title}</h3>
               <p className={styles.flowSummary}>{flow.summary}</p>
               <code className={styles.inlineCode}>{flow.command}</code>
               <Link className={styles.cardLink} to={flow.href}>
@@ -234,9 +253,7 @@ function TestimonialsSection() {
 
 export default function Home(): ReactNode {
   return (
-    <Layout
-      title="React on Rails"
-      description="Official React on Rails documentation, examples, and React on Rails Pro details.">
+    <Layout description="Official React on Rails documentation, examples, and React on Rails Pro details.">
       <HeroSection />
       <main>
         <PersonaSection />