Feat: Create support page

docusaurus.config.ts

@@ -73,6 +73,10 @@ const themeConfig: ThemeCommonConfig & AlgoliaThemeConfig = {
         docsPluginId: 'community',
         label: 'Community',
       },
+      {
+        to: '/support-training',
+        label: 'Support & Training',
+      },
       {
         type: 'doc',
         docId: 'tutorials/five-minutes-to-feature-flags',

src/components/custom/OpenFeatureComponentCard/index.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { ComponentType, SVGProps } from 'react';
 import { FontAwesomeCardData, SvgCardData, SvgOrFonticon } from '../SvgOrFonticon';
 import { faCircleCheck, faSadCry } from '@fortawesome/free-regular-svg-icons';
 import styles from './styles.module.css';
@@ -9,7 +9,7 @@ import Link from '@docusaurus/Link';
 type CardData = {
   href: string;
   title: string;
-  description: string;
+  description?: string;
   /**
    * Cards with "vendorOfficial:true" will have a badge indicating they are vendor maintained and supported.
    * This should only be used for providers/hooks released and maintained by vendors, not in OpenFeature contrib repositories.
@@ -20,6 +20,8 @@ type CardData = {
    * Defaults to false.
    */
   showLast?: boolean;
+  image?: string;
+  svgImage?: ComponentType<SVGProps<SVGSVGElement>>;
 };
 
 export type OpenFeatureComponentCardData = CardData & (SvgCardData | FontAwesomeCardData);
@@ -31,21 +33,44 @@ export class OpenFeatureComponentCard extends React.Component<OpenFeatureCompone
   override render() {
     const props = this.props as CardData & Partial<SvgCardData & FontAwesomeCardData>;
     const external = props.href.startsWith('http');
+    let SvgComponent: ComponentType<SVGProps<SVGSVGElement>>;
+
+    if (props.svgImage) {
+      SvgComponent = props.svgImage;
+    }
+
     return (
       <Link to={props.href} style={{ position: 'relative' }} className={clsx('card padding--lg', styles.cardContainer)}>
-        <div style={{ height: 0, position: 'absolute', right: 20, top: 20 }}>{external ? '🔗' : ''}</div>
+        <div style={{ height: 0, position: 'absolute', right: 20, top: 20 }}>{external && !props.image && !props.svgImage ? '🔗' : ''}</div>
+        {props.image && (
+          <div className='min-h-24 flex content-center items-center'>
+            <img src={props.image} alt={`${props.title} logo`} className='w-11/12 ml-auto mr-auto block align-middle' />
+          </div>
+        )}
+        {props.svgImage && (
+          <div className='h-28 w-80'>
+            <SvgComponent className='w-full h-full object-contain object-center' />
+          </div>
+        )}
 
-        <SvgOrFonticon svg={props.svg} iconDefinition={props.iconDefinition} />
-        <h1 className={clsx('text--truncate', styles.cardTitle)}>{this.props.title}</h1>
-        <h2 className={clsx(styles.cardDescription)}>{this.props.description}</h2>
-        <div className={clsx(styles.vendorOfficialContainer)}>
-          {props.vendorOfficial ? (
-            <FontAwesomeIcon icon={faCircleCheck} title="Official, vendor-supported provider" />
-          ) : (
-            // visibility: 'hidden'  is important here. This icon is only here for consistent sizing.
-            <FontAwesomeIcon style={{ visibility: 'hidden' }} icon={faSadCry} />
-          )}
-        </div>
+        {!props.image && !props.svgImage && (
+            <SvgOrFonticon svg={props.svg} iconDefinition={props.iconDefinition} />
+        )}
+
+        {!props.image && !props.svgImage && (
+          <>
+          <h1 className={clsx('text--truncate', styles.cardTitle)}>{this.props.title && !props.image && !props.svgImage ? this.props.title : ''}</h1>
+          <h2 className={clsx(styles.cardDescription)}>{this.props.description}</h2>
+          <div className={clsx(styles.vendorOfficialContainer)}>
+            {props.vendorOfficial ? (
+              <FontAwesomeIcon icon={faCircleCheck} title="Official, vendor-supported provider" />
+            ) : (
+              // visibility: 'hidden'  is important here. This icon is only here for consistent sizing.
+              <FontAwesomeIcon style={{ visibility: 'hidden' }} icon={faSadCry} />
+            )}
+          </div>
+        </>
+        )}
       </Link>
     );
   }

src/datasets/adopters.ts

@@ -0,0 +1,23 @@
+import EbaySvg from '@site/static/img/adopters/EBay_logo.svg';
+import DynatraceSvg from '@site/static/img/adopters/Dynatrace_Logo_color_positive_horizontal.svg';
+import { ComponentType, SVGProps } from 'react';
+
+type AdoptersType = {
+    name: string;
+    href: string;
+    svg?: ComponentType<SVGProps<SVGSVGElement>>;
+    image?: string;
+};
+
+export const Adopters: AdoptersType[]  = [
+    {
+    name: 'ebay',
+    href: 'http://ebay.com/',
+    svg: EbaySvg,
+    },
+    {
+        name: 'Dynatrace',
+        href: 'http://dynatrace.com/',
+        svg: DynatraceSvg,
+    },
+];

src/datasets/learning-resources.ts

@@ -0,0 +1,21 @@
+import { ComponentType, SVGProps } from 'react';
+import { IconDefinition as BrandsIconDefinition } from '@fortawesome/free-brands-svg-icons';
+import { IconDefinition as FreeIconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { faYoutube } from '@fortawesome/free-brands-svg-icons';
+
+type ResourcesType = {
+    title: string;
+    description?: string;
+    href: string;
+    svg?: ComponentType<SVGProps<SVGSVGElement>>;
+    iconDefinition?: BrandsIconDefinition | FreeIconDefinition;
+};
+
+export const LearningResources: ResourcesType[]  = [
+    {
+    title: 'OpenFeature Basics and Core concepts',
+    description: 'This youtube playlist covers the fundamental of openFeature',
+    href: 'https://www.youtube.com/watch?v=heQ83k15ZE4&list=PLiQt8D1ofl8zs2zoiMNI8WRdNQ8GUy84I',
+    iconDefinition: faYoutube,
+    }
+];

src/pages/support-training.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { OpenFeatureComponentCard } from '../components/custom/OpenFeatureComponentCard';
+import Layout from '@theme/Layout';
+import { Adopters } from '../datasets/adopters';
+import { LearningResources } from '../datasets/learning-resources';
+import Link from '@docusaurus/Link';
+
+export default function Support(): JSX.Element {
+    return (
+        <Layout title="Support" description="Support & Training">
+        <section className='m-16'>
+            <div className='text-center'>
+                <h1>Support & Training</h1>
+            </div>
+            <div className='mb-16'>
+                <h3>Courses</h3>
+                <div className="flex flex-wrap gap-8 justify-center md:justify-start">
+                {LearningResources.map(resource => (
+                        <OpenFeatureComponentCard title={resource.title} href={resource.href} description={resource.description} iconDefinition={resource.iconDefinition} />
+                    ))}
+                </div>
+            </div>
+            <div className='mb-16'>
+                <h3>Commercial Support</h3>
+                <div className="flex flex-wrap gap-8 justify-center md:justify-start">
+                    {Adopters.map(adopter => (
+                        <OpenFeatureComponentCard title={adopter.name} href={adopter.href} svgImage={adopter.svg} />
+                    ))}
+
+                </div>
+            </div>
+            <div className='mb-16'>
+                <h3>Add a resource</h3>
+                <p>Anyone who has developed an OpenFeature training program or offers related services can add themselves to this page by opening a pull request against it.</p>
+                <div className="flex justify-center mt-16">
+                <Link
+                  className="btn text-white hover:text-white bg-purple-600 hover:bg-purple-700 w-full mb-4 sm:w-auto sm:mb-0"
+                  to="https://github.com/open-feature/openfeature.dev"
+                >
+                  ADD YOUR COMPANY
+                </Link>
+                </div>
+            </div>
+        </section>
+        </Layout>
+    );
+  }
+