feat: add Linux Foundation training course to support page

- Add LFS140 course with custom CourseCard component
- Create reusable CourseCard component with responsive design
- Remove unused training.ts dataset file
- Update OpenFeature Fundamentals to use CourseCard
- Implement mobile-responsive layout with proper image scaling
- Support multiple paragraphs in course descriptions

The CourseCard component features:
- Horizontal layout on desktop (image left, content right)
- Vertical stacking on mobile (image above content)
- Full-width image scaling on mobile devices
- Support for both single strings and arrays of paragraphs
- Pure Tailwind CSS styling (no inline styles)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
Signed-off-by: Pete Hodgson <[email protected]>

Author: moredip

src/components/custom/CourseCard/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+
+type CourseCardProps = {
+  href: string;
+  imageUrl: string;
+  imageAlt: string;
+  title: string;
+  subtitle: string;
+  description: string | string[];
+};
+
+export const CourseCard: React.FC<CourseCardProps> = ({ href, imageUrl, imageAlt, title, subtitle, description }) => {
+  const paragraphs = Array.isArray(description) ? description : [description];
+
+  return (
+    <Link to={href} className="card padding--lg card-container relative">
+      <div className="flex flex-col sm:flex-row sm:items-center gap-6">
+        <img
+          src={imageUrl}
+          alt={imageAlt}
+          className="w-full max-w-xs sm:w-32 h-48 sm:h-32 object-contain flex-shrink-0 self-center sm:self-auto"
+        />
+        <div className="flex flex-col">
+          <h1 className="text-xl font-bold mb-1">{title}</h1>
+          <h2 className="text-base font-medium mb-2 text-gray-600 dark:text-gray-400">{subtitle}</h2>
+          <div className="flex flex-col gap-2">
+            {paragraphs.map((paragraph, index) => (
+              <p key={index} className="text-sm text-gray-700 dark:text-gray-300">
+                {paragraph}
+              </p>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};

src/components/custom/index.ts

@@ -1,4 +1,5 @@
 export * from './OpenFeatureComponentCard';
 export * from './OpenFeatureComponentTable';
 export * from './OpenFeatureTechnologiesPage';
-export * from './CopyChecklist';
+export * from './CopyChecklist';
+export * from './CourseCard';

src/datasets/support/training.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { OpenFeatureComponentCard } from '../components/custom/OpenFeatureComponentCard';
+import { CourseCard } from '../components/custom/CourseCard';
 import Layout from '@theme/Layout';
 import { CommercialSupportList } from '../datasets/support/commercial-support';
-import { TrainingResources } from '../datasets/support/training';
 import Link from '@docusaurus/Link';
 
 export default function Support(): JSX.Element {
@@ -14,15 +13,31 @@ export default function Support(): JSX.Element {
         </div>
         <div className="mb-16">
           <h3>Courses</h3>
-          <div className="flex flex-wrap gap-8 justify-center md:justify-start">
-            {TrainingResources.map((resource) => (
-              <OpenFeatureComponentCard
-                title={resource.title}
-                href={resource.href}
-                description={resource.description}
-                iconDefinition={resource.iconDefinition}
-              />
-            ))}
+          <div className="flex flex-col gap-8">
+            <CourseCard
+              href="https://training.linuxfoundation.org/training/feature-flagging-with-openfeature-lfs140/"
+              imageUrl={
+                require('@site/static/img/blog/2025-11-18-kubecon-na-recap-and-new-cncf-training/lfs140.png').default
+              }
+              imageAlt="LFS140 Course"
+              title="Feature Flagging with OpenFeature (LFS140)"
+              subtitle="Linux Foundation Training Course"
+              description={[
+                "10 hours of self-paced content, including hands-on labs.",
+                "Learn how to apply feature flagging in real-world projects using OpenFeature. Integrate with any flag management system, support canary and dark launches, run experiments, instrument flags with observability, and maintain clean, testable code."
+              ]}
+            />
+            <CourseCard
+              href="https://www.youtube.com/watch?v=heQ83k15ZE4&list=PLiQt8D1ofl8zs2zoiMNI8WRdNQ8GUy84I"
+              imageUrl="https://i.ytimg.com/vi/heQ83k15ZE4/maxresdefault.jpg"
+              imageAlt="OpenFeature Fundamentals"
+              title="OpenFeature Fundamentals"
+              subtitle="YouTube Video Series"
+              description={[
+                "A series of short videos introducing the core concepts of OpenFeature.",
+                "Learn about the evaluation API, providers, context, hooks, and how to integrate OpenFeature into your code."
+              ]}
+            />
           </div>
         </div>
         <div className="mb-16">
@@ -34,7 +49,7 @@ export default function Support(): JSX.Element {
                 title={name}
                 className="card card-container padding--lg dark:bg-white w-[362px] h-44 relative"
               >
-                <div style={{ height: 0, position: 'absolute', right: 10, top: 10 }}>{'🔗'}</div>
+                <div className="h-0 absolute right-2.5 top-2.5">{'🔗'}</div>
                 <div className="flex justify-center items-center h-full">
                   <Svg className="w-full h-full" />
                 </div>
@@ -61,4 +76,3 @@ export default function Support(): JSX.Element {
     </Layout>
   );
 }
-