website: Revamp home page (#1003)

Signed-off-by: Thomas Poignant <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

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

@@ -131,13 +131,12 @@ function OpenFeature() {
       </div>
       <div className="col-1-2">
         <div className={clsx(styles.featureContent, 'mr-25')}>
-          <h2>Providers for Open Feature SDKs</h2>
+          <h2>Supports your favorite languages</h2>
           <p>
             GO Feature Flag believe in OpenSource and offer providers for the
-            new standard for feature flags{' '}
-            <Link href={'https://openfeature.dev'}>OpenFeature</Link>.
+            new standard for feature flags <Link href={'https://openfeature.dev'}>OpenFeature</Link>.
             <br />
-            In combination with the Open Feature SDK these <b>providers</b> will
+            In combination with the <b>Open Feature SDKs</b> these <b>providers</b> will
             allow you to use GO Feature Flag with all supported languages.
           </p>
           <p>

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

@@ -11,26 +11,23 @@ export function Whatis() {
       <div className="grid grid-pad">
         <div className={clsx('col-1-1')}>
           <span className="goffMainTitle">What is GO Feature Flag?</span>
-          <div className={styles.description}>
-            <p>
-              GO Feature Flag believes in simplicity and offers a simple and
-              lightweight solution to use feature flags. Our focus is to avoid
-              any complex infrastructure work to use GO Feature Flag.
-            </p>
-            <p>
-              This is a complete feature flagging solution with the possibility
-              to target only a group of users, use any types of flags, store
-              your configuration in various location and advanced rollout
-              functionality. You can also collect usage data of your flags and
-              be notified of configuration changes.
-            </p>
-            <p>
-              The solution can be used in 2 different ways, directly using the
-              GO module in your code (you will have no backend to install) or
-              via the{' '}
-              <Link to={siteConfig.customFields.openfeature}>OpenFeature</Link>{' '}
-              standard which allows to use vendor agnostic SDKs.
-            </p>
+          <div className={clsx(styles.description, "grid grid-pad")}>
+            <div className={"col-1-3 mobile-col-1-1"}>
+              <h2><i className="fa-solid fa-laptop-code"></i> Quick and Easy Setup</h2>
+              <p>GO Feature Flag believes in simplicity and offers a simple and lightweight solution to use feature flags.</p>
+              <p>Our focus is to avoid any complex infrastructure work to use the solution.</p>
+            </div>
+            <div className={"col-1-3  mobile-col-1-1"}>
+              <h2><i className="fa-solid fa-rectangle-list"></i> Complete Feature Flag Solution</h2>
+              <p>Target individual segments, users, and development environments, use advanced rollout
+              functionality.</p>
+              <p>You can also collect usage data of your flags and be notified of configuration changes.</p>
+            </div>
+            <div className={"col-1-3  mobile-col-1-1"}>
+              <h2><i className="fa-solid fa-terminal"></i> Developer Optimized</h2>
+              <p>100% Opensource, no vendor locking, supports all your favorite languages and is pushing for standardisation with the support of <Link to={siteConfig.customFields.openfeature}>OpenFeature</Link>.</p>
+              <p>File based configuration, integrated with the tools that you already use.</p>
+            </div>
           </div>
           <Link to="/docs/">
             <button className="pushy__btn pushy__btn--md pushy__btn--red">

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

@@ -6,9 +6,18 @@
 
 .description {
   margin: auto;
-  max-width: 60rem;
-  padding: 10px;
+  max-width: 90%;
+  padding: 2rem 0;
   font-family: poppins, sans-serif;
+  text-align: left;
+}
+
+.description p{
+  margin-bottom: 0.6rem;
+}
+
+.description i {
+  color: var(--goff-main-subtitle-color);
 }
 
 .button {