Add a videos page with links to llm-d videos shared on youtube. (#128)

* Add Videos page and update navigation

- Introduced a new Videos page featuring a collection of educational videos about llm-d, including titles and descriptions.
- Updated the navigation to include a link to the new Videos page for easier access.

Signed-off-by: Pete Cheslock <pete.cheslock@redhat.com>

* Refactor button group styles in custom.css

- Updated the .button-group class to center content, enable wrapping, and adjust margins for better responsiveness.
- Modified button styles to include a minimum width and improved padding, enhancing layout consistency across different screen sizes.
- Removed outdated media queries to streamline CSS and improve maintainability.

Signed-off-by: Pete Cheslock <pete.cheslock@redhat.com>

---------

Signed-off-by: Pete Cheslock <pete.cheslock@redhat.com>

Author: petecheslock

docusaurus.config.js

@@ -167,6 +167,7 @@ const config = {
             label: "Community",
           },
           { to: "/blog", label: "Blog", position: "left" },
+          { to: "/videos", label: "Videos", position: "left" },
           {
             type: 'html',
             position: 'right',

src/css/custom.css

@@ -258,12 +258,12 @@ img.llm-d-logo {
 
 .button-group {
   display: flex;
-  justify-content: space-between;
-  margin: 0 10%;
-  @media screen and (max-width: 1024px) {
-    flex-direction: column;
-    align-items: center;
-  }
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin: 0 auto;
+  max-width: 100%;
+  padding: 0 1rem;
 }
 
 .static-button,
@@ -273,23 +273,18 @@ img.llm-d-logo {
   justify-content: center;
   border-radius: 15px;
   border: 1px solid transparent;
-  margin: 12.5px 12.5px;
-  padding: 1rem;
+  padding: 1rem 1.5rem;
   font-size: 1rem;
   font-weight: 700;
   font-family: inherit;
   background-color: #7f317f;
   cursor: pointer;
-  transition: border-color 0.25s;
-  width: 100%;
+  transition: border-color 0.25s, background-color 0.25s;
   text-decoration: none;
   color: #fff;
-  @media screen and (max-width: 1024px) {
-    margin: 5% 0;
-    @media screen and (max-width: 768px) {
-      padding: 5%;
-    }
-  }
+  min-width: 160px;
+  white-space: nowrap;
+  flex: 0 1 auto;
 }
 
 .static-button:hover {
@@ -505,7 +500,8 @@ img.llm-d-logo {
 }
 
 .install-button {
-  width: 100%;
+  min-width: 160px;
+  max-width: 280px;
 }
 
 /* ul li {

src/pages/videos.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import VideoEmbed from '@site/src/components/VideoEmbed';
+import styles from './videos.module.css';
+
+const videos = [
+  {
+    id: 'lvzMLf6wXlY',
+    title: 'Kubernetes Native Distributed Inferencing',
+    description: 'Introduction to llm-d at DevConf.US 2025 — learn the fundamentals of distributed LLM inference on Kubernetes.',
+  },
+  {
+    id: 'mfXIe_S53vA',
+    title: 'Serving PyTorch LLMs at Scale',
+    description: 'Disaggregated inference with Kubernetes and llm-d — presented by M. Ayoub & C. Liu at PyTorch Conference.',
+  },
+  {
+    id: '_xAXb70d4-0',
+    title: 'Distributed Inference with Well-Lit Paths',
+    description: 'Explore llm-d\'s "well-lit paths" approach to simplified, production-ready distributed inference.',
+  },
+  {
+    id: 'g8_snJA_ESU',
+    title: 'Multi-Accelerator LLM Inference',
+    description: 'Deep dive into multi-accelerator LLM inference on Kubernetes — presented by Erwan Gallen at KubeCon.',
+  },
+];
+
+function VideoCard({ video }) {
+  return (
+    <div className={styles.videoCard}>
+      <div className={styles.videoWrapper}>
+        <VideoEmbed videoId={video.id} responsive={true} />
+      </div>
+      <div className={styles.videoInfo}>
+        <h3 className={styles.videoTitle}>{video.title}</h3>
+        <p className={styles.videoDescription}>{video.description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function Videos() {
+  return (
+    <Layout
+      title="Videos"
+      description="Watch videos about llm-d: a Kubernetes-native high-performance distributed LLM inference framework">
+      <main className={styles.videosPage}>
+        <div className={styles.heroSection}>
+          <div className={styles.heroContent}>
+            <h1 className={styles.heroTitle}>
+              <span className={styles.heroIcon}>▶</span>
+              Learn llm-d
+            </h1>
+            <p className={styles.heroSubtitle}>
+              Explore our video collection to learn about llm-d's capabilities, 
+              architecture, and best practices for deploying LLM inference at scale.
+            </p>
+          </div>
+        </div>
+
+        <div className={styles.container}>
+          <div className={styles.videoGrid}>
+            {videos.map((video) => (
+              <VideoCard key={video.id} video={video} />
+            ))}
+          </div>
+        </div>
+
+        <div className={styles.ctaSection}>
+          <h2 className={styles.ctaTitle}>Ready to get started?</h2>
+          <p className={styles.ctaText}>
+            Dive into our documentation or join our community to learn more.
+          </p>
+          <div className={styles.ctaButtons}>
+            <a href="/docs/guide" className={styles.ctaButtonPrimary}>
+              Read the Docs
+            </a>
+            <a href="/slack" className={styles.ctaButtonSecondary}>
+              Join Slack
+            </a>
+          </div>
+        </div>
+      </main>
+    </Layout>
+  );
+}
+