docs(home): Add a better using list bar

website/docs/sdk/server_providers/openfeature_javascript.mdx

@@ -41,7 +41,7 @@ This code block shows you how you can create a client that you can use in your a
   <TabItem value="javascript" label="JavaScript">
 
 ```javascript
-const {OpenFeature} = require("@openfeature/server-sdk");
+const {Sdk} = require("@openfeature/server-sdk");
 const {GoFeatureFlagProvider} = require("@openfeature/go-feature-flag-provider");
 
 

website/docusaurus.config.js

@@ -509,6 +509,9 @@ const config = {
           'ruby',
         ],
       },
+      colorMode: {
+        defaultMode: 'dark',
+      },
     }),
 };
 

website/src/components/home/benefit/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import styles from './styles.module.css';
-import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
 BenefitCard.propTypes = {
@@ -11,37 +10,25 @@ BenefitCard.propTypes = {
 
 function BenefitCard({img, title, description}) {
   return (
-    <div className="col-1-5 mobile-col-1-1">
-      <article className={styles.benefitsPostItem}>
-        <div className={styles.benefitsPostItemRow}>
-          <img src={img} alt="post-thumb" />
-        </div>
-        <div className={styles.benefitsPostItemRow}>
-          <h2>{title}</h2>
-          <p>{description}</p>
-        </div>
-      </article>
+    <div className="w-fit bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
+      <img className="rounded-t-lg p-3" src={img} alt={title} />
+      <div className="p-5">
+        <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          {title}
+        </h5>
+        <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">
+          {description}
+        </p>
+      </div>
     </div>
   );
 }
 
 export function Benefit() {
   return (
     <section className={styles.benefits}>
-      <div className="container">
-        <div className="row">
-          <div className={clsx('col-1-1', styles.title)}>
-            <div>
-              <span className="goffMainTitle">Why use feature flags?</span>
-              <br />
-              <p>
-                Feature flags is a modern software engineering technique that
-                configure select functionality during runtime, without deploying
-                new code.
-              </p>
-            </div>
-          </div>
-        </div>
+      <div className={'text-center mb-5'}>
+        <span className="goffMainTitle">The Benefits of Feature Flags</span>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-2 px-3">
         <BenefitCard

website/src/components/home/benefit/styles.module.css

@@ -1,47 +1,32 @@
 .benefits {
-  margin: 1rem 2.5rem 1rem 2.5rem;
-  background: var(--goff-benif-bg);
-  padding: 70px 0 120px;
-  border-radius: 1.5rem;
+    margin: 1rem 2.5rem 1rem 2.5rem;
+    background: var(--goff-benif-bg);
+    padding: 70px 0 120px;
+    border-radius: 1.5rem;
 }
 
 .benefitsPostItem {
-  background-color: var(--goff-benefits-postitem-bg);
-  box-shadow: 0 20px 25px rgba(67, 103, 90, 0.1);
-  border-radius: 10px;
-  margin-bottom: 50px;
-  padding: 15px 15px 20px;
-  transition: 0.3s ease;
-  min-height: 30rem;
+    background-color: var(--goff-benefits-postitem-bg);
+    box-shadow: 0 20px 25px rgba(67, 103, 90, 0.1);
+    border-radius: 10px;
+    margin-bottom: 50px;
+    padding: 15px 15px 20px;
+    transition: 0.3s ease;
+    min-height: 30rem;
 }
 
 .benefits h2 {
-  line-height: 2rem;
-  margin-bottom: 0.6rem;
-  font-size: 1.2rem;
-  display: block;
-  color: var(--goff-main-title-color);
-  text-decoration: none;
-  transition: 0.3s ease;
-  min-height: 2rem;
+    line-height: 2rem;
+    margin-bottom: 0.6rem;
+    font-size: 1.2rem;
+    display: block;
+    color: var(--goff-main-title-color);
+    text-decoration: none;
+    transition: 0.3s ease;
+    min-height: 2rem;
 }
 
 .benefitsPostItem p {
-  color: var(--goff-main-ff-description);
+    color: var(--goff-main-ff-description);
 }
 
-.benefitsPostItemRow {
-  margin: 0 0.1rem 0 0.1rem;
-}
-
-.benefitsPostItemRow img {
-  border-radius: 10px;
-}
-
-.title {
-  text-align: center;
-}
-
-.title p {
-  margin-top: 2rem;
-}

website/src/components/home/features/index.js

@@ -3,7 +3,6 @@ import styles from './styles.module.css';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import PropTypes from 'prop-types';
-import {Headline} from '../headline';
 import {integrations} from '@site/data/integrations';
 import {sdk} from '@site/data/sdk';
 
@@ -31,73 +30,82 @@ function SocialIcon(props) {
   );
 }
 
-function Rollout() {
+export function Rollout() {
   return (
-    <div className="grid xl:grid-cols-2">
-      <div className={clsx(styles.featureContent, 'mr-25')}>
-        <h2>Advanced rollout capabilities</h2>
-        <p>
-          Feature flags allows to unlink deploy and release, this means that you
-          can decide how to release a feature without thinking about
-          architecture and complex deployments.
-        </p>
-        <p>
-          These capabilities will give you more control on your rollout changes
-          and will ensure that everything happened as expected.
-        </p>
-        <div className={styles.featureContentList}>
-          <ul>
-            <li>
-              <i className="fa-solid fa-circle-arrow-right"></i>
-              <p>Rules: Impact only the users you want to target.</p>
-            </li>
-            <li>
-              <i className="fa-solid fa-circle-arrow-right"></i>
-              <p>
-                Canary release: Enable the feature only to a subset of your
-                users.
-              </p>
-            </li>
-            <li>
-              <i className="fa-solid fa-circle-arrow-right"></i>
-              <p>
-                Progressive rollout: Affect from 0% to 100% of users within a
-                time frame, you can monitor while releasing the change.
-              </p>
-            </li>
-            <li>
-              <i className="fa-solid fa-circle-arrow-right"></i>
-              <p>
-                Scheduled Workflows: Modify your flag at a specific time to
-                impact more/less users.
-              </p>
-            </li>
-            <li>
-              <i className="fa-solid fa-circle-arrow-right"></i>
-              <p>
-                A/B testing: Split your audience in multiple groups and track
-                their usage.
-              </p>
-            </li>
-          </ul>
+    <div className="container my-8">
+      <div className="row">
+        <div className={'col col--6'}>
+          <div className={clsx(styles.featureContent, 'mr-25')}>
+            <h2>Advanced rollout capabilities</h2>
+            <p>
+              Feature flags allows to unlink deploy and release, this means that
+              you can decide how to release a feature without thinking about
+              architecture and complex deployments.
+            </p>
+            <p>
+              These capabilities will give you more control on your rollout
+              changes and will ensure that everything happened as expected.
+            </p>
+            <div className={styles.featureContentList}>
+              <ul>
+                <li>
+                  <i className="fa-solid fa-circle-arrow-right"></i>
+                  <p>Rules: Impact only the users you want to target.</p>
+                </li>
+                <li>
+                  <i className="fa-solid fa-circle-arrow-right"></i>
+                  <p>
+                    Canary release: Enable the feature only to a subset of your
+                    users.
+                  </p>
+                </li>
+                <li>
+                  <i className="fa-solid fa-circle-arrow-right"></i>
+                  <p>
+                    Progressive rollout: Affect from 0% to 100% of users within
+                    a time frame, you can monitor while releasing the change.
+                  </p>
+                </li>
+                <li>
+                  <i className="fa-solid fa-circle-arrow-right"></i>
+                  <p>
+                    Scheduled Workflows: Modify your flag at a specific time to
+                    impact more/less users.
+                  </p>
+                </li>
+                <li>
+                  <i className="fa-solid fa-circle-arrow-right"></i>
+                  <p>
+                    A/B testing: Split your audience in multiple groups and
+                    track their usage.
+                  </p>
+                </li>
+              </ul>
+            </div>
+            <p className={'mt-3'}>
+              <Link to={'/docs/configure_flag/rollout-strategies'}>
+                {' '}
+                See our rollout capabilites{' '}
+                <i className="fa-solid fa-arrow-right"></i>
+              </Link>
+            </p>
+          </div>
         </div>
-      </div>
-      <div className={clsx(styles.imgRollout, 'max-md:hidden')}>
-        <div className={styles.featureImage}>
-          <img
-            src="img/features/rollout.png"
-            alt="feature-image"
-            id="shape-01"
-          />
+        <div className={'col col--6'}>
+          <div className={clsx(styles.imgRollout, 'max-md:hidden')}>
+            <div className={styles.featureImage}>
+              <img src="img/features/rollout.png" alt="feature-image" />
+            </div>
+          </div>
         </div>
       </div>
     </div>
   );
 }
 
-function OpenFeature() {
+export function Sdk() {
   return (
-    <div className="container">
+    <div className="container my-8">
       <div className="row">
         <div className={'col col--6'}>
           <div className={'grid grid-cols-4'}>
@@ -136,7 +144,7 @@ function OpenFeature() {
   );
 }
 
-function Integration() {
+export function Integration() {
   const allIntegrations = [
     ...integrations.retrievers,
     ...integrations.exporters,
@@ -158,7 +166,7 @@ function Integration() {
     );
 
   return (
-    <div className="container">
+    <div className="container my-8">
       <div className="row">
         <div className={'col col--6'}>
           <div className={clsx(styles.featureContent, 'mr-25')}>
@@ -230,15 +238,50 @@ function Integration() {
   );
 }
 
-export function Features() {
+export function OpenFeatureEcosystem() {
+  // how to know if we are in dark mode
   return (
-    <section className={styles.feature}>
-      <div className="container">
-        <OpenFeature />
-        <Integration />
-        <Headline />
-        <Rollout />
+    <div className="container my-8">
+      <div className="row">
+        <div className={'col col--6'}>
+          <div className={clsx(styles.openfeaturelogo, 'text-center xl:mt-16')}>
+            <img
+              src={'img/features/openfeature.svg'}
+              alt="openfeature-logo"
+              className={styles.openfeaturelogo}
+            />
+          </div>
+        </div>
+        <div className={'col col--6'}>
+          <div className={clsx(styles.featureContent, 'mr-25')}>
+            <h2>Part of the OpenFeature Ecosystem</h2>
+            <p>
+              At GO Feature Flag, we believe in the power of open standards and,
+              the importance of vendor neutrality. That's why we've chosen to
+              rely on Open Feature for our SDKs.
+              <br />
+              By adopting GO Feature Flag you embrace the OpenFeature standard
+              and you get all the benefits of the ecosystem.
+            </p>
+            <div className={styles.featureContentList}>
+              <ul>
+                <li>
+                  <i className="fa-solid fa-circle-arrow-right"></i>
+                  <p>Open-Source SDKs</p>
+                </li>
+                <li>
+                  <i className="fa-solid fa-circle-arrow-right"></i>
+                  <p>No Vendor Lock-In</p>
+                </li>
+                <li>
+                  <i className="fa-solid fa-circle-arrow-right"></i>
+                  <p>OpenFeature community based support for SDKs</p>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
       </div>
-    </section>
+    </div>
   );
 }

website/src/components/home/features/styles.module.css

@@ -141,7 +141,7 @@
     font-size: 1.05rem;
     line-height: 2rem;
     font-weight: 400;
-    margin-bottom: 3rem;
+    margin-bottom: 2rem;
     color: var(--goff-main-ff-description);
 }
 
@@ -160,3 +160,7 @@
     bottom: 0;
     right: 0;
 }
+
+.openfeaturelogo {
+    fill: var(--goff-main-title-color);
+}