feat: ui components

src/views/home/ui/footer/footer.module.scss

@@ -7,6 +7,18 @@
   align-items: flex-start;
   gap: 20px;
 
+  .Block{
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    max-width: 40vw;
+  }
+
+  .SendBtn {
+    align-self: flex-end;
+    max-width: 33%;
+  }
+
   .Header {
     font-family: $font-open-sans;
     font-weight: $font-semi-bold;
@@ -23,6 +35,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    gap: 20px;
 
     .Policy {
       font-family: $font-open-sans;

src/views/home/ui/footer/footer.tsx

@@ -1,26 +1,35 @@
 import s from './footer.module.scss';
-import { Button, Mark } from '@shared/ui';
+import { Button, Input, Mark, TextArea } from '@shared/ui';
+import Link from 'next/link';
 
 export default function Footer() {
   return (
     <section className={s.Footer}>
-      <h2 className={s.Header}>
-        Давайте <Mark>обсудим</Mark> ваши задачи
-      </h2>
-
-      <input type='text' placeholder={'Ваше имя'} />
-      <input type='text' placeholder={'+7 999 1234567'} />
-      <textarea
-        name=''
-        id=''
-        placeholder={'Кратко опишите вашу задачу'}
-      ></textarea>
-      <Button variant={'orange'}>Отправить</Button>
+      <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>
       <div className={s.Bottom}>
-        <div>TG</div>
-        <div>WA</div>
-        <div>+7 999 1234567</div>
-        <p className={s.Policy}>Политика конфиденциальности</p>
+        <Button variant='ghost'>Telegram</Button>
+        <Button variant='ghost'>WhatsApp</Button>
+        <Button variant='ghost'>+7 (999) 123 45 67</Button>
+        <p className={s.Policy}>
+          <Link href='#'>Политика конфиденциальности</Link>
+        </p>
       </div>
     </section>
   );