-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
002f3a8
commit ab9ed04
Showing
2 changed files
with
233 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |