feat: add commercial support and training page (#694)

## This PR

- adds a support and training page.
    - light/dark mode support
    - mobile friendly
- consolidate card styles
- added commercial support requirements

### Related Issues

Fixes #390 

### Notes

Direct link to the preview:
https://deploy-preview-694--openfeature.netlify.app/support-training

This is a continuation of @thisisobate
[PR](#416). I
intended to push to that fork. Sorry, I didn't intend to hijack your PR.
If you'd prefer, I can close this, and we can keep working on the one
you started.

### Follow-up Tasks

Post in the OpenFeature Slack channel requesting vendors add themselves.

---------

Signed-off-by: thisisobate <[email protected]>
Signed-off-by: Michael Beemer <[email protected]>
Co-authored-by: thisisobate <[email protected]>

Author: beeme1mr

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,8 +1,6 @@
-import clsx from 'clsx';
 import React from 'react';
 import { FontAwesomeCardData, SvgCardData, SvgOrFonticon } from '../SvgOrFonticon';
 import { faCircleCheck, faSadCry } from '@fortawesome/free-regular-svg-icons';
-import styles from './styles.module.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Link from '@docusaurus/Link';
 
@@ -23,7 +21,6 @@ type CardData = {
 };
 
 export type OpenFeatureComponentCardData = CardData & (SvgCardData | FontAwesomeCardData);
-
 /**
  * A card to be used for linking (externally or internally) to specific technologies (SDKs, hooks, providers)
  */
@@ -32,13 +29,13 @@ export class OpenFeatureComponentCard extends React.Component<OpenFeatureCompone
     const props = this.props as CardData & Partial<SvgCardData & FontAwesomeCardData>;
     const external = props.href.startsWith('http');
     return (
-      <Link to={props.href} style={{ position: 'relative' }} className={clsx('card padding--lg', styles.cardContainer)}>
+      <Link to={props.href} style={{ position: 'relative' }} className={'card padding--lg card-container'}>
         <div style={{ height: 0, position: 'absolute', right: 20, top: 20 }}>{external ? '🔗' : ''}</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)}>
+        <h1 className={'text--truncate text-lg'}>{this.props.title}</h1>
+        <h2 className={'text-sm'}>{this.props.description}</h2>
+        <div className={'flex justify-end'}>
           {props.vendorOfficial ? (
             <FontAwesomeIcon icon={faCircleCheck} title="Official, vendor-supported provider" />
           ) : (

src/components/custom/OpenFeatureComponentCard/styles.module.css

@@ -50,6 +50,25 @@
   text-align: left;
 }
 
+.card-container {
+  --ifm-link-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
+  --ifm-link-hover-decoration: none;
+
+  box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  transition: all var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
+}
+
+.card-container:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
+}
+
+.card-container *:last-child {
+  margin-bottom: 0;
+}
 .code-block-diff-remove-line{
   background-color: #ff00001f;
   display: block;

src/css/custom.css

@@ -0,0 +1,44 @@
+import type { ComponentType, SVGProps } from 'react';
+
+import DevCycleSvg from '@site/static/img/vendors/devcycle.svg';
+import FliptSvg from '@site/static/img/vendors/flipt.svg';
+import FlagsmithSvg from '@site/static/img/vendors/flagsmith.svg';
+import LaunchDarklySvg from '@site/static/img/vendors/launchdarkly.svg';
+
+type CommercialSupportType = {
+  name: string;
+  href: string;
+  svg?: ComponentType<SVGProps<SVGSVGElement>>;
+};
+
+/**
+ * Companies that provide commercial support for OpenFeature should be
+ * added to this list alphabetically by company name. The extent of the
+ * support provided is the responsibility of each company to define.
+ *
+ * The minimum requirements for adding a company to this list are:
+ *  - At least one supported provider listed in the OpenFeature ecosystem
+ *  - Publicly available mention of OpenFeature support on the company's website or documentation
+ */
+export const CommercialSupportList: CommercialSupportType[] = [
+  {
+    name: 'DevCycle',
+    href: 'https://docs.devcycle.com/integrations/openfeature',
+    svg: DevCycleSvg,
+  },
+  {
+    name: 'Flagsmith',
+    href: 'https://www.flagsmith.com/openfeature',
+    svg: FlagsmithSvg,
+  },
+  {
+    name: 'Flipt',
+    href: 'https://docs.flipt.io/integration/openfeature',
+    svg: FliptSvg,
+  },
+  {
+    name: 'LaunchDarkly',
+    href: 'https://docs.launchdarkly.com/sdk/openfeature/',
+    svg: LaunchDarklySvg,
+  },
+].sort((a, b) => a.name.localeCompare(b.name));

src/datasets/support/commercial-support.ts

@@ -0,0 +1,19 @@
+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;
+  iconDefinition?: BrandsIconDefinition | FreeIconDefinition;
+};
+
+export const TrainingResources: ResourcesType[] = [
+  {
+    title: 'OpenFeature Fundamentals',
+    description: 'An introduction to the core concepts of OpenFeature',
+    href: 'https://www.youtube.com/watch?v=heQ83k15ZE4&list=PLiQt8D1ofl8zs2zoiMNI8WRdNQ8GUy84I',
+    iconDefinition: faYoutube,
+  },
+];

src/datasets/support/training.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import { OpenFeatureComponentCard } from '../components/custom/OpenFeatureComponentCard';
+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 {
+  return (
+    <Layout title="Support" description="Support and Training">
+      <section className="max-w-6xl mx-auto m-16 px-16 xl:px-0">
+        <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">
+            {TrainingResources.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">
+            {CommercialSupportList.map(({ href, name, svg: Svg }) => (
+              <Link
+                to={href}
+                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="flex justify-center items-center h-full">
+                  <Svg className="w-full h-full" />
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+        <div className="mb-16">
+          <h3>Add a resource</h3>
+          <p>
+            If you have developed an OpenFeature training program or offer related services, you can add yourself to
+            this page with a pull request.
+          </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>
+  );
+}
+