diff --git a/pairent_frontend_react/src/components/Questions/index.jsx b/pairent_frontend_react/src/components/Questions/index.jsx index 17a46a9..109ec0d 100644 --- a/pairent_frontend_react/src/components/Questions/index.jsx +++ b/pairent_frontend_react/src/components/Questions/index.jsx @@ -1,23 +1,70 @@ import React from 'react'; +import styled from 'styled-components'; import './styles/Questions.css'; +const MainSection = styled.section` + display: flex; + justify-content: space-between; + margin-top: 55px; +`; + +const Button = styled.button` + width: 323px; + height: fit-content; + padding: 2% 5% 2% 3%; + border-radius: 12px; + text-align: left; + + & h3 { + font-size: 18px; + color: #fff; + } + & p { + margin-top: 16px; + font-size: 16px; + line-height: 19px; + color: #fff; + } +`; + +const OrangeButton = styled(Button)` + background: linear-gradient(180deg, #F76D09 0%, #FFA800 100%); + &:active { + background: linear-gradient(180deg, #FFA800 0%, #F76D09 100%); + } +`; + +const GreenButton = styled(Button)` + background: linear-gradient(180deg, #107A34 0%, #51A633 100%); + &:active { + background: linear-gradient(180deg, #51A633 0%, #107A34 100%); + } +`; + +const BlueButton = styled(Button)` + background: linear-gradient(180deg, #2E50A7 0%, #0993F7 100%); + &:active { + background: linear-gradient(180deg, #0993F7 0%, #2E50A7 100%); + } +`; + const Questions = function () { return ( -
- - - -
+ + ); }