Merge pull request #28 from quickfix-j/copilot/add-logos-to-navbar-and-hero

Place hero logo to the right of the title

Author: chrjohn

src/css/custom.css

@@ -202,6 +202,8 @@ h1, h2, h3, h4, h5, h6 {
 
 .navbar__logo img {
   border-radius: 6px;
+  height: 32px;
+  width: auto;
 }
 
 /* ===================================================================

src/pages/index.module.css

@@ -79,12 +79,25 @@
   margin-bottom: 1.5rem;
 }
 
+.heroLogo {
+  height: 80px;
+  width: auto;
+  flex-shrink: 0;
+}
+
+.heroTitleRow {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+}
+
 .heroTitle {
   font-size: 4rem;
   font-weight: 900;
   letter-spacing: -0.04em;
   line-height: 1.05;
-  margin-bottom: 0.75rem;
+  margin: 0;
   color: #18181b;
 }
 

src/pages/index.tsx

@@ -2,6 +2,8 @@ import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './index.module.css';
 
 function HeroBanner() {
@@ -11,7 +13,17 @@ function HeroBanner() {
       <div className="container">
         <div className={styles.heroContent}>
           <div className={styles.heroBadge}>Enterprise FIX Engine</div>
-          <h1 className={styles.heroTitle}>{siteConfig.title}</h1>
+          <div className={styles.heroTitleRow}>
+            <h1 className={styles.heroTitle}>{siteConfig.title}</h1>
+            <ThemedImage
+              className={styles.heroLogo}
+              alt="QuickFIX/J Logo"
+              sources={{
+                light: useBaseUrl('/img/logo.png'),
+                dark: useBaseUrl('/img/logo-dark.png'),
+              }}
+            />
+          </div>
           <p className={styles.heroSubtitle}>  
             {siteConfig.tagline}
           </p>