add questions component

This commit is contained in:
Александр Манаенков 2023-05-08 14:14:44 +10:00
parent 5b3250a2bb
commit b910716d7d
4 changed files with 83 additions and 15 deletions

View File

@ -0,0 +1,24 @@
import React from 'react';
import './styles/Questions.css';
const Questions = function () {
return (
<section className="questionBtnSection">
<button className="questionBtn orangeBtn">
<h3>Рестик или кафешка?</h3>
<p>Какой общепит предпочтительнее для вас возле жилища?</p>
</button>
<button className="questionBtn greenBtn">
<h3>Двушка или однушка?</h3>
<p>Как выбрать квартиру под себя, чтобы не переплачивать?</p>
</button>
<button className="questionBtn blueBtn">
<h3>Совмещенный или отдельно?</h3>
<p>Какой санузел будет для вас лучшим вариантом?</p>
</button>
</section>
);
}
export default Questions;

View File

@ -0,0 +1,50 @@
/*Кнопки с вопросами*/
.questionBtnSection{
display: flex;
justify-content: space-between;
margin-top: 55px;
}
.questionBtn{
width: 323px;
height: 128px;
padding: 2% 5% 2% 3%;
border-radius: 12px;
text-align: left;
}
.questionBtn h3{
font-size: 18px;
color: #fff;
}
.questionBtn p{
margin-top: 16px;
font-size: 16px;
line-height: 19px;
color: #fff;
}
.orangeBtn{
background: linear-gradient(180deg, #F76D09 0%, #FFA800 100%);
}
.orangeBtn:active{
background: linear-gradient(180deg, #FFA800 0%, #F76D09 100%);
}
.greenBtn{
background: linear-gradient(180deg, #107A34 0%, #51A633 100%);
}
.greenBtn:active{
background: linear-gradient(180deg, #51A633 0%, #107A34 100%);
}
.blueBtn{
background: linear-gradient(180deg, #2E50A7 0%, #0993F7 100%);
}
.blueBtn:active{
background: linear-gradient(180deg, #0993F7 0%, #2E50A7 100%);
}

View File

@ -1,9 +1,15 @@
import React from 'react'; import React from 'react';
import Questions from '../../components/Questions';
import LastView from '../../components/LastView';
const Comparisons = function () { const Comparisons = function () {
return( return(
<h2>Сравнения</h2> <>
<h2>Сравнения</h2>
<Questions/>
<LastView/>
</>
); );
} }

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import FavoritesApartamentsList from '../../components/FavoritesApartamentsList'; import FavoritesApartamentsList from '../../components/FavoritesApartamentsList';
import Questions from '../../components/Questions';
import LastView from '../../components/LastView'; import LastView from '../../components/LastView';
import './styles/Favorites.css'; import './styles/Favorites.css';
@ -11,20 +12,7 @@ const Favorites = function () {
<> <>
<h2>Избранное</h2> <h2>Избранное</h2>
<FavoritesApartamentsList/> <FavoritesApartamentsList/>
<section className="questionBtnSection"> <Questions/>
<button className="questionBtn orangeBtn">
<h3>Рестик или кафешка?</h3>
<p>Какой общепит предпочтительнее для вас возле жилища?</p>
</button>
<button className="questionBtn greenBtn">
<h3>Двушка или однушка?</h3>
<p>Как выбрать квартиру под себя, чтобы не переплачивать?</p>
</button>
<button className="questionBtn blueBtn">
<h3>Совмещенный или отдельно?</h3>
<p>Какой санузел будет для вас лучшим вариантом?</p>
</button>
</section>
<LastView/> <LastView/>
</> </>
); );