feat: ui components

src/views/home/ui/contacts/contacts.tsx

@@ -1,6 +1,5 @@
 import s from './contacts.module.scss';
-import { Button, Mark } from '@shared/ui';
-
+import { Button, Input, Mark } from '@shared/ui';
 import Image from 'next/image';
 
 import bogatyrLogo from '@public/images/logo-bogatyr.png';
@@ -8,6 +7,11 @@ 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 (
@@ -24,6 +28,15 @@ 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}>
@@ -32,9 +45,11 @@ export default function Contacts() {
           </p>
         </div>
         <div className={s.Inputs}>
-          <input type='text' placeholder='Ваше имя' />
-          <input type='text' placeholder='+79991234567' />
-          <Button variant='orange'>Получить консультацию</Button>
+          <Input placeholder='Ваше имя' fullWidth />
+          <Input type='text' placeholder='+79991234567' fullWidth />
+          <Button variant='orange' fullWidth>
+            Получить консультацию
+          </Button>
         </div>
       </div>
 
@@ -48,17 +63,25 @@ export default function Contacts() {
 
         <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}>+7 (988) 400 93 93</p>
-          <p className={s.Address}>office@firecheck.ru</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>
     </section>