Some UI improvement in the home page (#1009)

* Some UI improvement in the home page Signed-off-by: Thomas Poignant <[email protected]> * Change order Signed-off-by: Thomas Poignant <[email protected]> --------- Signed-off-by: Thomas Poignant <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
thomaspoignant · Aug 14, 2023 · 0dcd65f · 0dcd65f
1 parent a754685
commit 0dcd65f
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 5 deletions.
diff --git a/website/src/components/home/features/index.js b/website/src/components/home/features/index.js
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import sqslogo from '@site/static/docs/collectors/sqs.png';
 import s3logo from '@site/static/docs/collectors/s3.png';
 import webhooklogo from '@site/static/docs/collectors/webhook.png';
+import { Headline } from "../headline";
 
 SocialIcon.propTypes = {
   colorClassName: PropTypes.string.isRequired,
@@ -29,7 +30,7 @@ function SocialIcon(props) {
 
 function Rollout() {
   return (
-    <div className="row">
+    <div className="grid grid-pad">
       <div className="col-1-2">
         <div className={clsx(styles.featureContent, 'mr-25')}>
           <h2>Advanced rollout capabilities</h2>
@@ -168,7 +169,7 @@ function Integration() {
                 <i className="fa-solid fa-circle-arrow-right"></i>
                 <p>
                   Retrieve your file from S3, Google Cloud, Github, Kubernetes,
-                  and more ...
+                  and more.
                 </p>
               </li>
               <li>
@@ -263,8 +264,9 @@ export function Features() {
   return (
     <section className={styles.feature}>
       <div className="container">
-        <Integration />
         <OpenFeature />
+        <Integration />
+        <Headline />
         <Rollout />
       </div>
     </section>

diff --git a/website/src/components/home/features/styles.module.css b/website/src/components/home/features/styles.module.css
@@ -134,7 +134,7 @@
 }
 
 .imgRollout {
-  margin: auto;
+  margin: 12rem 0 0 0;
   top: 0;
   left: 0;
   bottom: 0;

diff --git a/website/src/components/home/headline/bg.svg b/website/src/components/home/headline/bg.svg
diff --git a/website/src/components/home/headline/index.js b/website/src/components/home/headline/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './styles.module.css';
+
+export function Headline() {
+  return (
+    <div className={styles.headline}>
+      <div className={styles.title}>
+      <h1>Optimize Feature Launches with Smart Rollout Techniques.<br/>From <span className={styles.green}>Progressive Rollouts</span> to <span className={styles.purple}>Sequential Releases.</span></h1>
+      </div>
+    </div>
+  );
+}
diff --git a/website/src/components/home/headline/styles.module.css b/website/src/components/home/headline/styles.module.css
@@ -0,0 +1,29 @@
+.headline {
+    margin: 5rem 0;
+    padding: 7rem 0;
+    text-align: center;
+    font-style: italic;
+    background-image: url( './bg.svg');
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    color: var(--goff-headline-title);
+}
+
+.title h1{
+    opacity: 1;
+    font-size: 2.9rem;
+}
+
+
+.headline svg {
+    fill: var(--goff-headline-green);
+    position: absolute;
+}
+
+.green {
+    color: var(--goff-headline-green);
+}
+
+.purple {
+    color: var(--goff-headline-purple);
+}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -52,6 +52,10 @@
   --goff-card-txt-badge-info: var(--goff-sponsor-bg);
   --goff-card-bg-badge-info: var(--goff-card-round-color);
   --goff-card-bg-color: #F6F6F6;
+
+  --goff-headline-green: var(--goff-variation-plus-button-bg);
+  --goff-headline-purple: #6c46f2;
+
 }
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
@@ -78,7 +82,7 @@
   --goff-editor-input-text: #f1f1f1;
 
   --goff-card-bg-color: var(--goff-editor-form-field-bg);
-
+  --goff-headline-title: #A9A9A9;
 
 }
 

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
@@ -5,6 +5,7 @@ import {Whatis} from '../components/home/whatis';
 import {HomeHeader} from '../components/home/HomeHeader';
 import {Benefit} from '../components/home/benefit';
 import {Features} from '../components/home/features';
+import {Headline} from '../components/home/headline';
 
 export default function Home() {
   const {siteConfig} = useDocusaurusContext();