features

Author: petar-cvit

src/components/HomepageFeatures/index.js

@@ -5,6 +5,7 @@ import styles from './styles.module.css';
 import configurable from '/static/img/configuration.png';
 import unify from '/static/img/unification.png';
 import simple from '/static/img/simple.png';
+import config from "@generated/docusaurus.config";
 
 const FeatureList = [
   {
@@ -52,7 +53,7 @@ function Feature({svg, title, description}) {
 
 export default function HomepageFeatures() {
   return (
-    <section className={styles.features}>
+    <section className={styles.features} style={{ backgroundColor: '#fe8801'}}>
       <div className="container">
         <div className="row">
           {FeatureList.map((props, idx) => (

src/pages/index.js

@@ -5,13 +5,34 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 
+import helmsman from '/static/img/cyclops_helmsman.png';
+
 import styles from './index.module.css';
 
 function HomepageHeader() {
     const {siteConfig} = useDocusaurusContext();
+    const all = {
+        background: "white",
+    };
+
+    const letters = {
+        "text-align": "left",
+        position: "relative",
+        overflow: "hidden",
+        background: "white",
+        color: "#00152A",
+        float: "right",
+        width: "40%",
+        margin: "0",
+    };
+    const image = {
+        float: "right",
+        width: "30%",
+    };
     return (
         <header className={clsx('hero hero--primary', styles.heroBanner)}>
-            <div className="container">
+            <img src={helmsman} style={image}/>
+            <div className="container" style={letters}>
                 <h1 className="hero__title">{siteConfig.title}</h1>
                 <p className="hero__subtitle">{siteConfig.tagline}</p>
                 <div className={styles.buttons}>

src/pages/index.module.css

@@ -4,10 +4,11 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
+  left: 50%;
+  align-content: center;
+  align-items: center;
+  alignment: center;
+  background: white;
 }
 
 @media screen and (max-width: 996px) {
@@ -19,5 +20,10 @@
 .buttons {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: left;
+}
+
+.right {
+  float: right;
+  width: 60%;
 }