Files
fire-exam/src/views/home/ui/contacts/contacts.tsx
2025-06-06 13:00:19 +03:00

100 lines
3.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import s from './contacts.module.scss';
import { Button, Input, Mark } from '@shared/ui';
import Image from 'next/image';
import bogatyrLogo from '@public/images/logo-bogatyr.png';
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';
import email from '@public/svg/email.svg';
export default function Contacts() {
return (
<section className={s.Container}>
<div className={s.Contacts}>
<h2 className={s.Header}>
Клиенты, которые <Mark>нам доверяют</Mark>
</h2>
<div className={s.Clients}>
{clientsLogos.map(({ logo }, idx) => (
<div key={idx} className={s.Client}>
<Image src={logo} alt='' />
</div>
))}
</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>
<div className={s.Map}>
<iframe
src='https://yandex.ru/map-widget/v1/?um=constructor%3A7f1285c4f3e470bc9affa220323655ac72edd1be376c2579d421ca359ac46a7d&amp;source=constructor'
// width='100%'
// height='620'
frameBorder='0'
></iframe>
<div className={s.Contacts}>
<h3 className={s.Title}>
<Image className={s.LedOn} src={ledOn} alt={''} />
Мы <Mark>всегда</Mark> <br /> на связи
</h3>
<p className={s.Address}>
<Image className={s.Icon} src={map} alt='' />
Краснодарский край <br />
г.Сочи <br />
ТЦ «Атриум» <br />
ул. Навагинская д.9«Д» <br />
этаж 3, офис 35
</p>
<p className={s.Address}>
<Image className={s.Icon} src={phoneCall} alt='' />
+7 (988) 400 93 93
</p>
<p className={s.Address}>
<Image className={s.Icon} src={email} alt='' />
office@firecheck.ru
</p>
</div>
</div>
</div>
</section>
);
}
const clientsLogos = [
{ logo: bogatyrLogo },
{ logo: sochiparkLogo },
{ logo: chateauLogo },
{ logo: gazpromLogo },
{ logo: kraspolLogo },
];