From ab9ed04d3b67efb1ac04e6fba34c1a6a7906bf99 Mon Sep 17 00:00:00 2001
From: Developer <daniel.her@onja.org>
Date: Mon, 26 Sep 2022 16:36:33 +0300
Subject: [PATCH] [#3929] Add Key Features Accordion

---
 landing/src/components/key-features/index.js  |  81 ++++++++++
 .../src/components/key-features/index.scss    | 152 ++++++++++++++++++
 2 files changed, 233 insertions(+)
 create mode 100644 landing/src/components/key-features/index.js
 create mode 100644 landing/src/components/key-features/index.scss

diff --git a/landing/src/components/key-features/index.js b/landing/src/components/key-features/index.js
new file mode 100644
index 0000000000..80beb11672
--- /dev/null
+++ b/landing/src/components/key-features/index.js
@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import "./index.scss";
+
+import surveys from "../../images/survey-editor.png";
+import monitoringForm from "../../images/monitoring-forms.png";
+import assignments from "../../images/assignments.png";
+import dataExport from "../../images/data-exports-image.png";
+import dataPointSubmission from "../../images/data-point-submissions.png";
+
+const KeyFeatures = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const featuresData = [
+    {
+      id: 1,
+      title: "Survey editor",
+      description:
+        "Create, edit, copy, and store one or multiple surveys within your own personal online space.",
+      image: surveys,
+    },
+    {
+      id: 2,
+      title: "Monitoring forms",
+      description:
+        "Does your organisation carry out baseline to endline surveys? Use this feature to track change over time for specific data points.",
+      image: monitoringForm,
+    },
+    {
+      id: 3,
+      title: "Assignments",
+      description:
+        "Connect your enumerators’ devices within your online workspace and create groups and assignments for specific surveys and within a specific timeframe.",
+      image: assignments,
+    },
+    {
+      id: 4,
+      title: "Data exports",
+      description:
+        "Export your data in various formats to conduct data cleaning, data analysis, geoshape, survey viewing, and more.",
+      image: dataExport,
+    },
+    {
+      id: 5,
+      title: "Data point submissions",
+      description:
+        "Once you have created and assigned your surveys, get enumerators out in the field to collect data and submit the data points. Data points will be stored in your instance and can be accessed, edited, and exported directly from your instance.",
+      image: dataPointSubmission,
+    },
+  ];
+
+  return (
+    <div className="key-features">
+      <div className="wrapper">
+        <h3 className="heading">Akvo Flow’s key features</h3>
+        <div className="accordion">
+          {featuresData.map((data, index) => {
+            const isActive = index === activeIndex;
+            return (
+              <div
+                id={data.id}
+                className={`container ${isActive ? "active" : ""}`}
+                key={data.id}
+                onClick={() => setActiveIndex(index)}
+              >
+                <h4 className="title">{data.title}</h4>
+                <div className="paragraph-wrapper">
+                  <p className="paragraph">{data.description}</p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <img
+        src={featuresData[activeIndex].image}
+        alt={featuresData[activeIndex].title}
+        className="key-feature-image"
+      />
+    </div>
+  );
+};
+export default KeyFeatures;
diff --git a/landing/src/components/key-features/index.scss b/landing/src/components/key-features/index.scss
new file mode 100644
index 0000000000..d5fd0ee690
--- /dev/null
+++ b/landing/src/components/key-features/index.scss
@@ -0,0 +1,152 @@
+@import "../../variables.scss";
+
+.key-features {
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: center;
+  margin-top: 30px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1440px;
+  padding-left: 20px;
+  padding-right: 20px;
+  .key-feature-image {
+    width: 100%;
+    max-width: 665px;
+    height: max-content;
+  }
+  .wrapper {
+    flex-basis: 100%;
+    .heading {
+      font-size: 20px;
+      line-height: 24px;
+      margin-bottom: 15px;
+    }
+
+    .accordion {
+      .container {
+        transition: all ease-out 0.5s;
+        .title {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          line-height: 18px;
+          color: $grey;
+          margin-top: 0;
+          margin-bottom: 10px;
+          cursor: pointer;
+          &:hover {
+            color: $black;
+          }
+          &::before {
+            content: " ";
+            width: 15px;
+            height: 15px;
+            border-radius: 50%;
+            margin-right: 10px;
+            background-color: $grey;
+            transition: all ease-out 0.5s;
+          }
+        }
+        .paragraph-wrapper {
+          max-height: 0;
+          overflow: hidden;
+          padding: 0 0 0 18px;
+          border-left: 1px solid $grey;
+          .paragraph {
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 20px;
+            margin-bottom: 0;
+            margin-top: 0;
+            opacity: 0;
+            transition: all ease-out 0.3s;
+          }
+        }
+
+        &.active {
+          .title {
+            cursor: pointer;
+            color: $black;
+            &::before {
+              background-color: $orange;
+              transition: all ease-out 0.5s;
+            }
+          }
+          .paragraph-wrapper {
+            overflow: visible;
+            max-height: 200px;
+            margin-top: 10px;
+            margin-bottom: 10px;
+            margin-left: 6px;
+            margin-right: 0;
+            padding: 3.5px 0 3.5px 18px;
+            transition: overflow ease-out 0.5s, max-height ease-out 0.5s;
+            .paragraph {
+              opacity: 1;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @media (min-width: 601px) {
+    padding-left: 40px;
+    padding-right: 40px;
+    margin-top: 60px;
+
+    .wrapper {
+      flex-basis: 100%;
+      .heading {
+        font-size: 24px;
+        line-height: 28px;
+        margin-bottom: 30px;
+      }
+
+      .accordion {
+        .container {
+          .title {
+            font-size: 16px;
+            line-height: 20px;
+            margin-bottom: 20px;
+          }
+
+          &.active {
+            .paragraph-wrapper {
+              margin-top: 20px;
+              margin-bottom: 20px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @media (min-width: 1024px) {
+    padding-left: 156px;
+    padding-right: 156px;
+    margin-top: 90px;
+    flex-direction: row;
+    .key-feature-image {
+      width: 80%;
+    }
+    .wrapper {
+      flex-basis: 50%;
+
+      .heading {
+        font-size: 32px;
+        line-height: 36px;
+      }
+
+      .accordion {
+        .container {
+          .title {
+            font-size: 20px;
+            line-height: 24px;
+          }
+        }
+      }
+    }
+  }
+}