src/entities/connect/ui.tsx

@@ -4,29 +4,49 @@ import Image from 'next/image';
 import emailImg from '@public/images/em-rounded-logo.png';
 import tgImg from '@public/images/tg-rounded-logo.png';
 import waImg from '@public/images/wa-rounded-logo.png';
+import { CONTACTS } from '@shared/const/contacts';
 
 function Connect() {
+  const emailTo = `mailto:${CONTACTS.EMAIL}`;
+  const callTo = `tel:${CONTACTS.PHONE}`;
+  const telegramTo = CONTACTS.TELEGRAM;
+  const whatsappTo = CONTACTS.WHATSAPP;
+
   return (
     <div className={s.Container}>
       <div className={s.Icons}>
         <div className={s.Icon}>
-          <Image src={waImg} alt={''} className={s.Image} />
+          <a href={whatsappTo} target='_blank' rel='noopener noreferrer'>
-          <p className={s.Description}>WHATSAPP</p>
+            <Image src={waImg} alt={''} className={s.Image} />
+          </a>
+          <a href={whatsappTo} target='_blank' rel='noopener noreferrer'>
+            <p className={s.Description}>WHATSAPP</p>
+          </a>
         </div>
         <div className={s.Icon}>
-          <Image src={tgImg} alt={''} className={s.Image} />
+          <a href={telegramTo} target='_blank' rel='noopener noreferrer'>
-          <p className={s.Description}>TELEGRAM</p>
+            <Image src={tgImg} alt={''} className={s.Image} />
+          </a>
+          <a href={telegramTo} target='_blank' rel='noopener noreferrer'>
+            <p className={s.Description}>TELEGRAM</p>
+          </a>
         </div>
         <div className={s.Icon}>
-          <Image src={emailImg} alt={''} className={s.Image} />
+          <a href={emailTo}>
-          <p className={s.Description}>EMAIL</p>
+            <Image src={emailImg} alt={''} className={s.Image} />
+          </a>
+          <a href={emailTo}>
+            <p className={s.Description}>EMAIL</p>
+          </a>
         </div>
       </div>
       <div className={s.CallOrder}>
         <h4 className={s.Title}>Звоните по телефону</h4>
-        <Button variant={'white'} className={s.Btn}>
+        <a href={callTo}>
-          +7 (900) 241-34-34
+          <Button variant={'white'} className={s.Btn}>
-        </Button>
+            +7 (900) 241-34-34
+          </Button>
+        </a>
         <p className={s.Description}>мы работаем с 08:00 до 17:00</p>
       </div>
     </div>

src/shared/const/contacts.ts

@@ -0,0 +1,6 @@
+export const CONTACTS = {
+  EMAIL: 'spo-71@yandex.ru',
+  PHONE: '+79002413434',
+  TELEGRAM: 'https://telegram.me/ditraso',
+  WHATSAPP: 'https://api.whatsapp.com/send?phone=79002413434',
+} as const;

src/widgets/breadcrumbs/styles.module.scss

@@ -86,7 +86,7 @@
       }
 
       @include ifdesktop {
-        width: auto;
+        width: 400px;
       }
     }