web refactor supported by

web/src/components/Support/index.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+import {Col, Divider, Row} from "antd";
+import Link from '@docusaurus/Link';
+import Title from "antd/es/typography/Title";
+
+import nuqleus from '/static/img/nuqleus_landscape.png';
+import frc from '/static/img/frc.png';
+import esif from '/static/img/esif.png';
+import zicer from '/static/img/zicer.png';
+
+function Feature({svg, title, description}) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className="text--center">
+          <img width={100} src={svg} />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function Support() {
+  return (
+        <div>
+            <Divider orientation={"center"}>
+                <Title level={3}>
+                    Supported by
+                </Title>
+            </Divider>
+            <div className={styles.container}>
+                <div className={styles.nuqleus}>
+                    <Link to="https://nuqleus.io/">
+                        <img src={nuqleus}/>
+                    </Link>
+                </div>
+                <div className={styles.support}>
+                    <Link to="https://www.zicer.hr/?lang=en">
+                        <img src={zicer}/>
+                    </Link>
+                </div>
+                <div className={styles.support}>
+                    <Link to="https://filrougecapital.com/">
+                        <img src={frc}/>
+                    </Link>
+                </div>
+                <div className={styles.esif}>
+                    <img src={esif}/>
+                </div>
+            </div>
+        </div>
+  );
+}

web/src/components/Support/styles.module.css

@@ -0,0 +1,55 @@
+.support {
+  display: flex;
+  margin: 3%;
+  float: left;
+  width: 11%;
+  transform: translateY(-50%);
+}
+
+.nuqleus {
+  display: flex;
+  margin: 3% 3% 3% 19%;
+  float: left;
+  width: 11%;
+  transform: translateY(-50%);
+}
+
+.esif {
+  display: flex;
+  float: left;
+  transform: translateY(-50%);
+  width: 20%;
+  margin: 3% 3% 3% 3%;
+}
+
+@media screen and (max-width: 950px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .support {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 10px;
+    transform: translateY(0%);
+  }
+
+  .nuqleus {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    margin: 0px 0px 10px 0px;
+    transform: translateY(0%);
+  }
+
+  .esif {
+    width: 90%;
+    /*margin: 2%;*/
+    display: flex;
+    justify-content: center;
+    transform: translateY(0%);
+  }
+}

web/src/pages/index.js

@@ -7,15 +7,18 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
 
 import helmsman from '/static/img/cyclops_helmsman.png';
 import nuqleus from '/static/img/nuqleus_landscape.png';
+import frc from '/static/img/frc.png';
+import esif from '/static/img/esif.png';
 import zicer from '/static/img/zicer.png';
 
 // import EITDigital from '/static/img/EIT_digital.png';
 // import EIT from '/static/img/EIT.png';
 
 import styles from './index.module.css';
 import Comparison from "../components/Comparison";
-import {Button} from "antd";
+import {Button, Row} from "antd";
 import {StarFilled} from "@ant-design/icons";
+import Support from "../components/Support";
 
 function HomepageHeader() {
     const {siteConfig} = useDocusaurusContext();
@@ -77,21 +80,6 @@ function HomepageHeader() {
                         Join the community
                     </Link>
                 </div>
-                <div className={styles.support}>
-                    <p style={{padding: 0, margin: 0, paddingBottom: '5px'}}>Supported by</p>
-                    <ul>
-                        <li>
-                            <Link to="https://nuqleus.io/">
-                                <img style={{heigh: 'auto', width: '50%', paddingBottom: '5px'}} src={nuqleus}/>
-                            </Link>
-                        </li>
-                        <li>
-                            <Link to="https://www.zicer.hr/?lang=en">
-                                <img style={{heigh: 'auto', width: '25%'}} src={zicer}/>
-                            </Link>
-                        </li>
-                    </ul>
-                </div>
             </div>
         </header>
     );
@@ -106,6 +94,7 @@ export default function Home() {
             <main>
                 <HomepageFeatures/>
                 <Comparison/>
+                <Support/>
             </main>
         </Layout>
     );