From 002f3a89ded6a73cc9b9ee7c6a6cf6f139f97e49 Mon Sep 17 00:00:00 2001
From: Developer <daniel.her@onja.org>
Date: Mon, 26 Sep 2022 16:35:33 +0300
Subject: [PATCH] [#3929] Add Overview

---
 landing/src/components/overview/index.js   | 100 ++++++++
 landing/src/components/overview/index.scss | 273 +++++++++++++++++++++
 2 files changed, 373 insertions(+)
 create mode 100644 landing/src/components/overview/index.js
 create mode 100644 landing/src/components/overview/index.scss

diff --git a/landing/src/components/overview/index.js b/landing/src/components/overview/index.js
new file mode 100644
index 0000000000..922fc562c9
--- /dev/null
+++ b/landing/src/components/overview/index.js
@@ -0,0 +1,100 @@
+import React from "react";
+import "./index.scss";
+import Button from "../reusable/button/index";
+
+import planetInfographic from "../../images/key-features/planet-infographic.png";
+import gSierraLeonne from "../../images/organisations/g-sierra-leonne-logo.png";
+import simavi from "../../images/organisations/simavi-logo.png";
+import fairTrade from "../../images/organisations/fairtrade-logo.png";
+import snv from "../../images/organisations/snv-logo.png";
+import lifewater from "../../images/organisations/lifewater-logo.png";
+import unicef from "../../images/organisations/unicef-logo.png";
+import oneDrop from "../../images/organisations/one-drop-logo.png";
+import idh from "../../images/organisations/idh-logo.png";
+import nuffic from "../../images/organisations/nuffic-logo.png";
+import map from "../../images/map.svg";
+
+const Overview = () => {
+  const organisationLogos = [
+    { name: "Government of Sierra Leonne", logo: gSierraLeonne },
+    { name: "Simavi", logo: simavi },
+    { name: "Fairtrade", logo: fairTrade },
+    { name: "snv", logo: snv },
+    { name: "Lifewater", logo: lifewater },
+    { name: "Unicef", logo: unicef },
+    { name: "One Drop", logo: oneDrop },
+    { name: "idh", logo: idh },
+    { name: "Nuffic", logo: nuffic },
+  ];
+
+  const statistics = [
+    { name: "Data points", count: "1.5M" },
+    { name: "Organisations", count: "200+" },
+    { name: "Countries ", count: "70+" },
+  ];
+  return (
+    <div className="overview">
+      <section className="introduction">
+        <div className="wrapper">
+          <h2 className="heading">
+            Design your survey and <span>start collecting data</span> today.
+          </h2>
+          <p className="paragraph">
+            Akvo Flow can easily adapt to your data needs. Our partners collect
+            and use data to drive change all over the world.
+          </p>
+          <Button type="filled" text="Start for free now" />
+          <img src={planetInfographic} alt="3d model planet infographic" />
+        </div>
+      </section>
+
+      <section className="partners">
+        <h3 className="heading">
+          Trusted by hundreds of businesses, NGOs & governments
+        </h3>
+        <div>
+          {organisationLogos?.map((organisation, index) => (
+            <img
+              key={index}
+              src={organisation?.logo}
+              alt={organisation?.name}
+              className="logo"
+            />
+          ))}
+        </div>
+      </section>
+      <section className="impact">
+        <h3 className="heading">
+          Development organisations <span>all over the world</span> use Akvo
+          Flow to drive impact
+        </h3>
+        <p className="paragraph">
+          The development sector has been progressively moving towards
+          data-driven decision making and impact. With Akvo Flow, NGOs,
+          governments, knowledge institutions and the private sector support
+          millions of beneficiaries all over the world.{" "}
+        </p>
+        <Button type="outlined" text="Get started" linkTo="/signup" />
+        <div>
+          <img src={map} alt="map" />
+        </div>
+        <div className="statistic">
+          {statistics.map((stat, index) => (
+            <div key={index}>
+              <b>{stat.count}</b>
+              <span>{stat.name}</span>
+            </div>
+          ))}
+        </div>
+        <div className="banner">
+          <h3 className="heading">
+            Take your development programme to the next level{" "}
+          </h3>
+          <div className="paragraph">Capture reliable and timely data</div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Overview;
diff --git a/landing/src/components/overview/index.scss b/landing/src/components/overview/index.scss
new file mode 100644
index 0000000000..720227392b
--- /dev/null
+++ b/landing/src/components/overview/index.scss
@@ -0,0 +1,273 @@
+@import "../../variables.scss";
+
+.overview {
+  text-align: center;
+  section {
+    max-width: 1440px;
+    padding-left: 20px;
+    padding-right: 20px;
+    .heading {
+      font-size: 20px;
+      line-height: 24px;
+      .span {
+        color: $orange;
+      }
+    }
+    .paragraph {
+      font-size: 14px;
+      line-height: 20px;
+    }
+    @media (min-width: 601px) {
+      padding-left: 40px;
+      padding-right: 40px;
+      .heading {
+        font-size: 24px;
+        line-height: 28px;
+      }
+    }
+    @media (min-width: 1024px) {
+      padding-left: 156px;
+      padding-right: 156px;
+      .heading {
+        font-size: 32px;
+        line-height: 36px;
+        text-align: center;
+      }
+    }
+  }
+  button {
+    max-width: max-content;
+    margin: 0 auto 50px auto;
+  }
+  .introduction {
+    background-image: url("../../images/circle.svg");
+    background-position-y: calc(100% - 38px);
+    background-position-x: center;
+    background-size: cover;
+    padding-top: calc(30px - 7px);
+    margin: auto;
+    .wrapper {
+      max-width: 914px;
+      margin: auto;
+      img {
+        width: 100%;
+        max-width: 593px;
+      }
+      .heading {
+        font-weight: 700;
+        font-size: 32px;
+        line-height: 36px;
+        margin: 0 0 20px 0;
+        span {
+          color: $orange;
+        }
+      }
+      .paragraph {
+        font-size: 16px;
+        line-height: 22px;
+        text-align: center;
+        max-width: 744px;
+        margin: 0 auto 25px auto;
+      }
+    }
+
+    @media (min-width: 601px) {
+      padding-top: calc(50px - 7px);
+      .wrapper {
+        .heading {
+          font-size: 48px;
+          line-height: 52px;
+        }
+        .paragraph {
+          font-size: 16px;
+          line-height: 24px;
+        }
+      }
+    }
+    @media (min-width: 1024px) {
+      padding-top: calc(70px - 7px);
+      .wrapper {
+        .heading {
+          font-size: 56px;
+          line-height: 64px;
+          margin: 0 0 30px 0;
+        }
+        .paragraph {
+          font-size: 18px;
+          line-height: 28px;
+          text-align: center;
+          max-width: 744px;
+          margin: 0 auto 30px auto;
+        }
+      }
+    }
+  }
+  .partners {
+    margin-top: 30px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 35px;
+    padding-right: 35px;
+
+    .heading {
+      margin-bottom: 20px;
+      margin-left: auto;
+      margin-right: auto;
+      max-width: 600px;
+    }
+    img {
+      width: 80px;
+      height: 44.88px;
+      &:not(:last-of-type) {
+        margin-right: 15px;
+      }
+    }
+    @media (min-width: 601px) {
+      padding-left: 46px;
+      padding-right: 46px;
+      margin-top: 60px;
+      .heading {
+        margin-bottom: 50px;
+      }
+      img {
+        width: 123px;
+        height: 69px;
+      }
+    }
+    @media (min-width: 1024px) {
+      padding-left: 106px;
+      padding-right: 106px;
+      margin-top: 90px;
+    }
+  }
+
+  .impact {
+    margin-top: 30px;
+    margin-left: auto;
+    margin-right: auto;
+
+    .heading,
+    .paragraph {
+      margin: auto;
+    }
+    .heading {
+      max-width: 480px;
+      margin-bottom: 20px;
+      span {
+        color: $orange;
+      }
+    }
+    .paragraph {
+      text-align: center;
+      max-width: 552px;
+    }
+    button {
+      margin-top: 30px;
+      margin-bottom: 30px;
+    }
+    img {
+      width: 100%;
+      max-width: 984px;
+    }
+    .statistic {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      max-width: 984px;
+      margin: auto;
+
+      div {
+        max-width: 241px;
+        margin: 0 auto;
+        &:not(:last-of-type) {
+          margin-bottom: 20px;
+        }
+        b {
+          font-size: 24px;
+          line-height: 28px;
+          color: $orange;
+        }
+        span {
+          display: block;
+          font-weight: 700;
+          font-size: 14px;
+          line-height: 18px;
+        }
+      }
+    }
+
+    .banner {
+      padding: 30px;
+      margin: 50px auto 0 auto;
+      max-width: 936px;
+      background: #fefaf0;
+      border-radius: 10px;
+
+      .heading {
+        color: $orange;
+        margin-bottom: 20px;
+        margin-top: 0;
+      }
+      .paragraph {
+        font-size: 14px;
+        line-height: 20px;
+        text-align: center;
+        color: $black;
+      }
+    }
+
+    @media (min-width: 601px) {
+      margin-top: 60px;
+      .statistic {
+        flex-direction: row;
+        div {
+          margin-bottom: 0;
+
+          b {
+            font-size: 32px;
+            line-height: 36px;
+          }
+          span {
+            font-size: 16px;
+            line-height: 20px;
+          }
+        }
+      }
+      .banner {
+        margin: 50px auto 0 auto;
+
+        .paragraph {
+          font-size: 16px;
+          line-height: 24px;
+        }
+      }
+    }
+
+    @media (min-width: 1024px) {
+      margin-top: 90px;
+      .statistic {
+        div {
+          b {
+            font-size: 48px;
+            line-height: 52px;
+          }
+          span {
+            font-size: 20px;
+            line-height: 24px;
+          }
+        }
+      }
+      .banner {
+        padding: 50px;
+        margin: 90px auto 0 auto;
+
+        .paragraph {
+          font-weight: 700;
+          font-size: 24px;
+          line-height: 28px;
+        }
+      }
+    }
+  }
+}