diff --git a/src/components/process/process-styles.js b/src/components/process/process-styles.js index 50dad12..ec67cba 100644 --- a/src/components/process/process-styles.js +++ b/src/components/process/process-styles.js @@ -43,6 +43,7 @@ export const HowCarousel = styled.div` export const HowText = styled.div` width: 100%; + position: relative; @media (min-width: ${dimensions.maxwidthTablet}px) { height: 581px; @@ -51,6 +52,23 @@ export const HowText = styled.div` } ` +export const Indicators = styled.div` + display: flex; + justify-content: center; + + position: absolute; + width: 100%; + bottom: 52px; + + svg { + margin-right: 14px; + } + + @media (max-width: ${dimensions.maxwidthTablet}px) { + display: none; + } +` + export const HowParagraph = styled.div` padding-top: 24px; @@ -64,12 +82,15 @@ export const HowParagraph = styled.div` export const BlueBackground = styled.div` position: absolute; width: 188px; - left: 0; min-height: calc(100vh + 242px); background-color: ${colors.softblue900}; top: 127px; z-index: 0; + @media (max-width: ${dimensions.maxwidthTablet}px) { + left: 0; + } + @media (min-width: ${dimensions.maxwidthTablet}px) { right: 0; width: 63vw; diff --git a/src/components/process/process.js b/src/components/process/process.js index b6af500..7194552 100644 --- a/src/components/process/process.js +++ b/src/components/process/process.js @@ -1,4 +1,4 @@ -import React from "react" +import React, { useState } from "react" import { ProcessContainer, HowItWorks, @@ -16,10 +16,15 @@ import { Step, StepImage, StepText, + Indicators, } from "./process-styles" +import Circle from "../../vectors/circle.svg" +import SolidCircle from "../../vectors/solidcircle.svg" import { H1, P, H2, H3, Body } from "../../style/type-styles" export default function Process({ data }) { + const [howNumber, setHowNumber] = useState(0) + return ( @@ -32,18 +37,24 @@ export default function Process({ data }) { { - data.prismicProcessPage.data.how_images[0].how_paragraph[0] + data.prismicProcessPage.data.how_images[howNumber].how_paragraph[0] .text } + + + {data.prismicProcessPage.data.how_images.map((how_button, id) => { + return howNumber === id ? setHowNumber(id)} /> : setHowNumber(id)} /> + })} + diff --git a/src/vectors/solidcircle.svg b/src/vectors/solidcircle.svg new file mode 100644 index 0000000..96609e0 --- /dev/null +++ b/src/vectors/solidcircle.svg @@ -0,0 +1,3 @@ + + +