Skip to content

Commit

Permalink
[#3929] Add Overview
Browse files Browse the repository at this point in the history
  • Loading branch information
@voromahery
voromahery committed Sep 26, 2022
1 parent acef984 commit 002f3a8
Show file tree
Hide file tree
Showing 2 changed files with 373 additions and 0 deletions.
100 changes: 100 additions & 0 deletions landing/src/components/overview/index.js
View file
Original file line number Diff line number Diff line change
@@ -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="/#" />
<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;
273 changes: 273 additions & 0 deletions landing/src/components/overview/index.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
}

0 comments on commit 002f3a8

Please # to comment.