redrockjs/fire-exam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add toaster

Browse Source
This commit is contained in:
Valery Grunenko
2025-06-06 15:08:46 +03:00
parent dd452a950d
commit 9b6e163da5
35 changed files with 720 additions and 611 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/views/home/ui/contacts/contacts.module.scss
View File

@@ -96,127 +96,6 @@
}
}
.Form {
position: relative;
background: #292E3D;
display: flex;
flex-direction: column;
gap: rem(40px);
overflow: hidden;
padding: rem(60px) rem(50px);
border-radius: rem(28px);
margin-bottom: rem(80px);
@include iftablet {
flex-direction: row;
gap: unset;
padding: rem(60px) rem(50px);
border-radius: rem(28px);
margin-bottom: rem(120px);
}
@include iflaptop {
padding: rem(60px) rem(50px);
border-radius: rem(28px);
margin-bottom: rem(100px);
}
@include ifdesktop {
padding: rem(60px) rem(50px);
border-radius: rem(28px);
margin-bottom: rem(160px);
}
&:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
left: 0;
top: 0;
background-color: rgba(#163055, .6);
transition: 250ms background-color;
}
.Background {
position: absolute;
object-fit: cover;
z-index: 1;
}
.Offer {
flex: 2;
display: flex;
flex-direction: column;
.Title {
position: relative;
z-index: 2;
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: rem(26px);
line-height: 100%;
color: $color-white;
margin-bottom: rem(16px);
@include iftablet {
font-size: rem(28px);
margin-bottom: rem(60px);
}
@include iflaptop {
font-size: rem(36px);
margin-bottom: rem(80px);
}
@include ifdesktop {
font-size: rem(48px);
margin-bottom: rem(80px);
}
}
.SubTitle {
position: relative;
z-index: 2;
font-family: $font-open-sans;
font-weight: $font-light;
font-size: rem(16px);
line-height: 100%;
color: $color-white;
@include iftablet {
font-size: rem(18px);
}
@include iflaptop {
font-size: rem(20px);
}
@include ifdesktop {
font-size: rem(32px);
max-width: rem(720px);
}
}
}
.Inputs {
position: relative;
z-index: 2;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
gap: rem(20px);
@include iftablet {
align-self: unset;
}
}
}
.Map {
position: relative;

30
src/views/home/ui/contacts/contacts.tsx
View File

@@ -1,5 +1,6 @@
import s from './contacts.module.scss';
import { Button, Input, Mark } from '@shared/ui';
import { Mark } from '@shared/ui';
import { ContactsForm } from '@/widgets';
import Image from 'next/image';
import bogatyrLogo from '@public/images/logo-bogatyr.png';
@@ -7,7 +8,6 @@ import sochiparkLogo from '@public/images/logo-sochipark.png';
import chateauLogo from '@public/images/logo-chateau-de-talu.png';
import gazpromLogo from '@public/images/logo-gazprom.png';
import kraspolLogo from '@public/images/logo-kraspol.png';
import bgForm from '@public/images/bg-form.jpg';
import ledOn from '@public/svg/led-on.svg';
import phoneCall from '@public/svg/phone-call.svg';
import map from '@public/svg/map.svg';
@@ -28,31 +28,7 @@ export default function Contacts() {
))}
</div>
<div className={s.Form}>
<Image
className={s.Background}
src={bgForm}
placeholder='blur'
alt={''}
quality={75}
fill
priority
/>
<div className={s.Offer}>
<h3 className={s.Title}>Остались вопросы?</h3>
<p className={s.SubTitle}>
Наш эксперт свяжется с вами для уточнения подробностей и
определения точной стоимости работ
</p>
</div>
<div className={s.Inputs}>
<Input placeholder='Ваше имя' fullWidth />
<Input type='text' placeholder='+79991234567' fullWidth />
<Button variant='orange' fullWidth>
Получить консультацию
</Button>
</div>
</div>
<ContactsForm />
<div className={s.Map}>
<iframe

44
src/views/home/ui/footer/footer.module.scss
View File

@@ -41,50 +41,6 @@
}
}
.Block {
display: flex;
flex-direction: column;
gap: rem(20px);
width: 100%;
@include iftablet {
width: unset;
max-width: 100%;
}
@include iflaptop {
max-width: 60%;
}
@include ifdesktop {
max-width: 60%;
}
}
.SendBtn {
align-self: flex-end;
max-width: 33%;
}
.Header {
font-family: $font-open-sans;
font-weight: $font-semi-bold;
font-size: rem(28px);
line-height: 100%;
color: $color-white;
margin-bottom: rem(30px);
@include iflaptop {
font-size: rem(42px);
margin-bottom: rem(30px);
}
@include ifdesktop {
font-size: rem(60px);
margin-bottom: rem(40px);
}
}
.Bottom {
width: 100%;
border-top: 1px solid $color-white;

23
src/views/home/ui/footer/footer.tsx
View File

@@ -1,29 +1,14 @@
import s from './footer.module.scss';
import { Button, Input, Mark, TextArea } from '@shared/ui';
import { Button } from '@shared/ui';
import { FooterForm } from '@/widgets';
import Link from 'next/link';
export default function Footer() {
return (
<section className={s.Container}>
<div className={s.Footer}>
<div className={s.Block}>
<h2 className={s.Header}>
Давайте <Mark>обсудим</Mark> ваши задачи
</h2>
<Input variant='ghost' placeholder={'Ваше имя'} fullWidth />
<Input variant='ghost' placeholder={'+7 999 1234567'} fullWidth />
<TextArea
variant='ghost'
placeholder={'Кратко опишите вашу задачу'}
fullWidth
id='story'
name='story'
rows={6}
/>
<Button className={s.SendBtn} variant={'orange'} fullWidth>
Отправить
</Button>
</div>
<FooterForm />
<div className={s.Bottom}>
<Button variant='ghost'>Telegram</Button>
<Button variant='ghost'>WhatsApp</Button>

126
src/views/home/ui/license/license.module.scss
View File

@@ -41,130 +41,4 @@
}
}
.Slider {
margin-bottom: rem(40px);
padding: 0 rem(20px) 0;
@include iftablet {
padding: unset;
}
@include ifdesktop {
margin-bottom: rem(80px);
}
}
.Form {
position: relative;
background: #292E3D;
padding: rem(20px) rem(20px);
border-radius: rem(28px);
overflow: hidden;
display: flex;
flex-direction: column;
gap: rem(40px);
@include iftablet {
flex-direction: row;
padding: rem(40px) rem(40px);
gap: rem(20px);
}
@include iflaptop {
padding: rem(40px) rem(60px);
gap: rem(40px);
}
@include ifdesktop {
}
&:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
left: 0;
top: 0;
background-color: rgba(#163055, .6);
transition: 250ms background-color;
}
.Background {
position: absolute;
object-fit: cover;
z-index: 1;
}
.Offer {
flex: 2;
.Title {
position: relative;
z-index: 2;
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: rem(26px);
line-height: 110%;
color: $color-white;
margin: 0 0 rem(20px);
@include iftablet {
font-size: rem(28px);
margin: 0 0 rem(36px);
}
@include iflaptop {
font-size: rem(32px);
margin: 0 0 rem(40px);
}
@include ifdesktop {
font-size: rem(48px);
margin: 0 0 rem(50px);
}
}
.SubTitle {
position: relative;
z-index: 2;
font-family: $font-open-sans;
font-weight: $font-light;
font-size: rem(16px);
line-height: 100%;
color: $color-white;
@include iftablet {
font-size: rem(20px);
}
@include ifdesktop {
font-size: rem(30px);
margin-bottom: rem(16px);
max-width: rem(820px);
}
}
}
.Inputs {
position: relative;
z-index: 2;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
gap: rem(16px);
@include iftablet {
}
@include ifdesktop {
gap: rem(20px);
}
}
}
}

42
src/views/home/ui/license/license.tsx
View File

@@ -1,10 +1,7 @@
import s from './license.module.scss';
import { Mark } from '@shared/ui';
import { LicenseForm, LicenseSlider } from '@/widgets';
import { Button, Input, Mark } from '@shared/ui';
import { LicenseSlider } from '@/widgets';
import Image from 'next/image';
import bgForm from '@public/images/bg-form.jpg';
import emptyPaper from '@public/svg/empty-paper.svg';
export default function License() {
@@ -13,39 +10,8 @@ export default function License() {
<h2 className={s.Header}>
Наши услуги <Mark>подтверждены лицензиями</Mark> и сертификатами
</h2>
<div className={s.Slider}>
<LicenseSlider images={slides} />
</div>
<div className={s.Form}>
<div className={s.Offer}>
<Image
className={s.Background}
src={bgForm}
placeholder='blur'
alt={''}
quality={75}
fill
priority
/>
<h3 className={s.Title}>
Заключите договор до 1 июля и получите скидку на проведение пожарной
экспертизы 15 %
</h3>
<p className={s.SubTitle}>
Оставьте свои контактные данные и мы закрепим скидку до 1 июля за
вами
</p>
</div>
<div className={s.Inputs}>
<Input placeholder={'Ваше имя'} fullWidth />
<Input placeholder={'+7 (999) 123 45 67'} fullWidth />
<Button variant='orange' fullWidth>
Получить консультацию
</Button>
</div>
</div>
<LicenseSlider images={slides} />
<LicenseForm />
</section>
);
}

3
src/views/home/ui/main/main.tsx
View File

@@ -1,6 +1,7 @@
import s from './main.module.scss';
import { Button } from '@shared/ui';
import { ConsultationOrder } from '@/entities/home/ConsultationOrder';
import Image from 'next/image';
import bgStart from '@public/images/bg-start-desktop.jpg';
@@ -51,7 +52,7 @@ export default function Main() {
</div>
<div className={s.Phone}>
<p className={s.Title}>+7 988 400 93 93</p>
<Button variant='orange'>Получить консультацию</Button>
<ConsultationOrder />
</div>
</div>
</section>

159
src/views/home/ui/offer/offer.module.scss
View File

@@ -113,38 +113,6 @@
}
}
.RowForm {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
gap: rem(10px);
margin-bottom: rem(80px);
@include iftablet {
flex-direction: row;
justify-content: center;
gap: rem(10px);
}
@include iflaptop {
justify-content: center;
gap: rem(20px);
}
@include ifdesktop {
justify-content: center;
gap: rem(40px);
}
.Unit {
width: 300px;
@include iftablet {
width: unset;
}
}
}
.Inner {
display: flex;
flex-direction: column;
@@ -343,131 +311,4 @@
}
}
.Form {
position: relative;
background: #292E3D;
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr;
gap: rem(20px);
padding: rem(25px) rem(20px);
border-radius: rem(28px);
@include iftablet {
padding: rem(30px);
}
@include iflaptop {
grid-template-rows: 1fr;
grid-template-columns: auto rem(400px);
padding: rem(40px);
}
@include ifdesktop {
grid-template-columns: auto rem(550px);
padding: rem(40px) rem(60px);
}
&:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
left: 0;
top: 0;
background-color: rgba(#163055, .6);
transition: 250ms background-color;
}
.Background {
position: absolute;
object-fit: cover;
z-index: 1;
}
.PanelLeft {
display: flex;
flex-direction: column;
}
.PanelRight {
place-self: center center;
@include iftablet{
width: rem(400px);
place-self: end end;
}
@include iflaptop{
width: 100%;
}
.AdvPhoneInput{
display: none;
@include iftablet{
display: block;
}
}
.MobileBtns {
position: relative;
display: flex;
flex-direction: column;
gap: rem(12px);
z-index: 2;
max-width: rem(400px);
@include iftablet{
display: none;
}
}
}
.SubTitle {
position: relative;
z-index: 2;
font-family: $font-open-sans;
font-weight: $font-light;
font-size: rem(22px);
line-height: 100%;
color: $color-white;
margin-bottom: rem(16px);
@include iftablet {
margin-bottom: rem(20px);
}
@include iflaptop {
font-size: rem(24px);
}
@include ifdesktop {
font-size: rem(30px);
margin-bottom: rem(16px);
}
}
.Title {
position: relative;
z-index: 2;
font-family: $font-open-sans;
font-weight: $font-regular;
font-size: rem(26px);
line-height: 130%;
color: $color-white;
max-width: rem(660px);
margin: 0;
@include iftablet {
font-size: rem(28px);
}
@include iflaptop {
font-size: rem(32px);
}
@include ifdesktop {
font-size: rem(48px);
}
}
}

60
src/views/home/ui/offer/offer.tsx
View File

@@ -1,7 +1,6 @@
'use client';
import s from './offer.module.scss';
import { Button, Mark, Input, AdvancedPhoneInput } from '@shared/ui';
import { Mark } from '@shared/ui';
import { OfferForm, OfferRequestForm } from '@/widgets';
import Image from 'next/image';
import arrow from '@public/svg/arrow-tile.svg';
@@ -11,12 +10,8 @@ import gridThree from '@public/images/grid-3.png';
import gridFour from '@public/images/grid-4.png';
import gridFive from '@public/images/grid-5.png';
import gridSix from '@public/images/grid-6.png';
import bgForm from '@public/images/bg-form.jpg';
import { useState } from 'react';
export default function Offer() {
const [name, setName] = useState('');
return (
<section className={s.Container}>
<div className={s.Offer}>
@@ -45,23 +40,7 @@ export default function Offer() {
</ul>
</div>
<form className={s.RowForm}>
<Input
className={s.Unit}
type='text'
placeholder='+7 (999) 123 45 67'
/>
<Input
className={s.Unit}
type='text'
placeholder='Ваше имя'
value={name}
onChange={(e) => setName(e.target.value)}
/>
<Button className={s.Unit} variant='orange'>
Получить консультацию
</Button>
</form>
<OfferForm />
<div className={s.Inner}>
<h2 className={s.Title}>
@@ -87,38 +66,7 @@ export default function Offer() {
</div>
</div>
<div className={s.Form}>
<Image
className={s.Background}
src={bgForm}
placeholder='blur'
alt={''}
quality={75}
fill
priority
/>
<div className={s.PanelLeft}>
<p className={s.SubTitle}>Нужна помощь?</p>
<h3 className={s.Title}>
Оставьте заявку на бесплатную консультацию
</h3>
</div>
<div className={s.PanelRight}>
<AdvancedPhoneInput
containerClassName={s.AdvPhoneInput}
text='Отправить заявку'
placeholder={'+7 (999) 123 45 67'}
/>
<div className={s.MobileBtns}>
<Input placeholder='Ваше имя' fullWidth />
<Input placeholder='+7 999 123 45 67' fullWidth />
<Button variant='orange' fullWidth>
Отправить заявку
</Button>
</div>
</div>
</div>
<OfferRequestForm />
</div>
</section>
);

1
src/views/home/ui/result/result.tsx
View File

@@ -1,6 +1,5 @@
import s from './result.module.scss';
import { Mark } from '@shared/ui';
import Image from 'next/image';
import bogatyrImg from '@public/images/bogatyr.png';