upd

- Форма заявки
- Подключение к тг каналу для получения заявок
- Небольшие правки дизайна

package.json

@@ -12,6 +12,7 @@
     "export": "next export"
   },
   "dependencies": {
+    "axios": "^1.6.8",
     "classnames": "^2.5.1",
     "hamburger-react": "^2.5.0",
     "next": "14.1.0",

src/app/contacts/page.tsx

@@ -4,6 +4,7 @@ import { INFO } from "@/core/config/info.config";
 import { Metadata } from "next";
 import Image from 'next/image';
 import styles from './page.module.scss';
+import { Form } from "@/components/Form/Form";
 
 
 export const metadata: Metadata = {
@@ -45,6 +46,7 @@ export default async function Contacts() {
               <p><a href={`tel:${INFO.PHONE}`}>{INFO.PHONE}</a></p>
               <p>ИНН: 745108164223</p>
             </address>
+            <Form type="min"/>
           </div>
           <div className={styles.right}>
             <Image src={`/icon--black.svg`} alt={'Pixel Perfect'}
@@ -57,7 +59,7 @@ export default async function Contacts() {
           </div>
         </div>
       </div>
-      <Call padding='none' />
+      <Call padding='none' type="w/out-form"/>
     </div >
   );
 }

src/app/page.tsx

@@ -3,6 +3,7 @@ import { Banner } from "@/components/Banner/Banner";
 import { Call } from "@/components/Call/Call";
 import { Catalog } from "@/components/Catalog/Catalog";
 import { FAQ } from "@/components/FAQ/FAQ";
+import { ModalForm } from "@/components/ModalForm/ModalForm";
 import { Portfolio } from "@/components/Portfolio/Portfolio";
 import { Stages } from "@/components/Stages/Stages";
 import { baseFetch } from "@/core/api/baseFetch";
@@ -65,6 +66,7 @@ export default async function HomePage() {
       <hr className="hr" />
       {faqData && <FAQ header={'Частые вопросы'} data={faqData} />}
       <Call padding="none" />
+      <ModalForm/>
     </>
   );
 }

src/components/Banner/Banner.module.scss

@@ -62,9 +62,9 @@
   }
 
   p {
-    max-height: 130px;
-    height: 130px;
-    min-height: 130px;
+    max-height: 126px;
+    height: 126px;
+    min-height: 126px;
   }
 
   @media (min-width: 1024px) {
@@ -78,6 +78,7 @@
 
 
     p {
+
       font-size: 18px;
     }
   }
@@ -99,7 +100,11 @@
     h1,
     p {
       padding: 0 15px;
-
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;  
+  -webkit-line-clamp: 6;  
+  -webkit-box-orient: vertical;    
     }
 
     max-width: none !important;

src/components/Call/Call.tsx

@@ -1,15 +1,18 @@
 'use client'
 
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { YMClick } from '../YM/YMClick';
 import styles from './Call.module.scss';
 import { links } from './call.config';
+import { ModalForm } from '../ModalForm/ModalForm';
+import { Form } from '../Form/Form';
 
 export interface ICallProps {
   padding?: 'top' | 'bottom' | 'both' | 'none'
+  type?: 'default' | 'w/out-form'
 }
 
-export const Call: FC<ICallProps> = ({ padding = 'both' }) => {
+export const Call: FC<ICallProps> = ({ padding = 'both', type = 'default' }) => {
 
   const paddingProp = {
     paddingTop: padding === 'top' || padding === 'both' ? '60px' : '0px',
@@ -20,7 +23,19 @@ export const Call: FC<ICallProps> = ({ padding = 'both' }) => {
     <div className={styles.main} style={paddingProp}>
 
       <div className={styles.social}>
-        {links.map((link, index) => <YMClick key={index} className={styles.socialItem} {...{ ...link }} />)}
+        {
+          type === 'default' ?
+            <>
+              {links.slice(0, links.length - 1).map((link, index) => <YMClick key={index} className={styles.socialItem} {...{ ...link }} />)}
+              <div className={styles.socialItem} style={{ display: 'flex', justifyContent: 'center', height: 'auto' }}>
+                <Form />
+              </div>
+
+            </> :
+            links.map((link, index) => <YMClick key={index} className={styles.socialItem} {...{ ...link }} />)
+        }
+        { }
+
       </div>
     </div>
   );

src/components/Catalog/CatalogTab/CatalogTab.module.scss

@@ -1,4 +1,10 @@
 .main{
+  *{
+    box-sizing: content-box;
+
+  }
+  box-sizing: content-box;
+
   max-height: 340px;
   overflow-y: scroll;
   display: flex;

src/components/FAQ/FAQ.module.scss

@@ -9,7 +9,11 @@
 .wrapper {
   display: flex;
   justify-content: space-between;
+  *{
+    box-sizing: content-box;
 
+  }
+  box-sizing: content-box;
 
   @media (max-width: 1023px) {
     align-items: center;

src/components/Form/Form.module.scss

@@ -0,0 +1,29 @@
+.form{
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+
+
+    h2{
+        margin-bottom: 0;
+    }
+
+    p{
+        margin-bottom: 10px;
+        font-size: 12px;
+    }
+
+    input{
+        border: 2px solid black;
+        width: 300px;
+        padding: 10px;
+    }
+}
+
+.default{
+    align-items: center;
+    padding: 20px;
+    background-color: white;
+    width: 375px;
+}

src/components/Form/Form.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import styles from './Form.module.scss'
+import { sendTelegramMessage } from '@/core/api/sendtelegramMessage';
+import { Button } from '../UI/Button/Button';
+import { useState } from 'react';
+import { usePathname } from 'next/navigation';
+import cn from 'classnames';
+interface IFormProps {
+    type?: 'min' | 'default'
+}
+
+export const Form = ({ type = 'default' }) => {
+
+    const pathname = usePathname()
+
+
+    const [formData, setFormData] = useState({
+        name: '',
+        tel: '',
+    });
+
+    const handleChange = (e: any) => {
+        setFormData({ ...formData, [e.target.name]: e.target.value });
+    };
+
+    const handleSubmit = async (e: any) => {
+        e.preventDefault();
+
+        const isSended = await sendTelegramMessage(formData, pathname)
+        if (isSended) {
+            setFormData({
+                name: '',
+                tel: '',
+            })
+        }
+    };
+
+    return (
+        <form className={cn(styles.form, type === 'default' && styles.default)} onSubmit={handleSubmit}>
+            {type === 'default' &&
+                <>
+                    <h2 className='text-header'>Закажите звонок</h2>
+                    <p>..и свяжусь с Вами в ближайшее время</p>
+                </>}
+            <input
+                type="text"
+                name="name"
+                value={formData.name}
+                onChange={handleChange}
+                placeholder="Ваше имя"
+            />
+            <input
+                type="tel"
+                name="tel"
+                value={formData.tel}
+                onChange={handleChange}
+                placeholder="Ваш номер телефона"
+            />
+            <Button>
+                Отправить
+            </Button>
+        </form>
+    )
+}