adaptive vers

src/components/BufferLandingPage.js

@@ -53,6 +53,46 @@
 // export default CustomLayout;
 
 
+// import React from 'react';
+// import { Layout } from 'antd';
+// import MainSection from './MainSection';
+// import FourstepSection from './FourSteps';
+// import MakeEasier from './MakeEasier';
+// import Questions from './Questions';
+// import WorkInTeam from './WorkInTeam';
+// import PriceList from './PriceList';
+// import Udobno from './Udobno';
+// import Header from './Header';
+// import ContactBlock from './ContactBlock';
+// import Footer from './Footer';
+
+// const { Content } = Layout;
+
+// const CustomLayout = () => (
+//   <Layout className="layout">
+//     <Header />
+//     <Content style={{ padding: '0 50px', background: '#ffffff' }}>
+//       <MainSection />
+     
+//       <div className="relative w-full"> {/* Убрали ограничение высоты */}    
+//         <div>
+//           <Udobno />
+//           <MakeEasier />
+//           <FourstepSection />
+//           <WorkInTeam />
+//           <PriceList />
+//           <Questions />
+//           <div className="w-full"><ContactBlock /></div> {/* Изменили mb-4 на w-full */}
+//         </div>
+//       </div>
+//     </Content>
+   
+//     <Footer />
+//   </Layout>
+// );
+
+// export default CustomLayout;
+
 import React from 'react';
 import { Layout } from 'antd';
 import MainSection from './MainSection';
@@ -69,12 +109,12 @@ import Footer from './Footer';
 const { Content } = Layout;
 
 const CustomLayout = () => (
-  <Layout className="layout">
+  <Layout className="layout" style={{ overflow: 'hidden' }}>
     <Header />
-    <Content style={{ padding: '0 50px', background: '#ffffff' }}>
+    <Content style={{ background: '#ffffff', position: 'relative' }}>
       <MainSection />
      
-      <div className="relative w-full"> {/* Убрали ограничение высоты */}    
+      <div className="relative w-full px-4 md:px-12 lg:px-50">
         <div>
           <Udobno />
           <MakeEasier />
@@ -82,7 +122,9 @@ const CustomLayout = () => (
           <WorkInTeam />
           <PriceList />
           <Questions />
-          <div className="w-full"><ContactBlock /></div> {/* Изменили mb-4 на w-full */}
+          <div className="w-full">
+            <ContactBlock />
+          </div>
         </div>
       </div>
     </Content>

src/components/ContactBlock.js

@@ -125,6 +125,180 @@
 // }
 
 
+// import { useState } from "react";
+// import videoback from '../vids/backvideo2.webm';
+// import translations from '../translations.json';
+// import { useLanguage } from '../contexts/LanguageContext';
+
+// export default function ContactBlock() {
+//   const { language } = useLanguage();
+//   const t = translations.contacts[language];
+
+//   function sendMessage(text)
+//   {
+//     const botToken = process.env.REACT_APP_TELEGRAM_BOT_TOKEN;
+//     const chatId = process.env.REACT_APP_TELEGRAM_CHAT_ID;
+
+//     const url = `https://api.telegram.org/bot${botToken}/sendMessage`;
+    
+//     const obj = {
+//         chat_id: chatId, // Telegram chat id
+//         text: text // The text to send
+//     };
+
+//     const xht = new XMLHttpRequest();
+//     xht.open("POST", url, true);
+//     xht.setRequestHeader("Content-type", "application/json; charset=UTF-8");
+//     xht.send(JSON.stringify(obj));
+//   }
+
+//   const [formData, setFormData] = useState({
+//     name: '',
+//     email: '',
+//     message: ''
+//   });
+
+//   // const handleSubmit = (e) => {
+//   //   e.preventDefault();
+//   //   console.log('Form submitted:', formData);
+//   // };
+
+//   const handleSubmit = (e) => {
+//     e.preventDefault();
+    
+//     // Формируем текст сообщения для Telegram
+//     const messageText = `
+//       Новое сообщение с сайта:
+//       👤 Имя: ${formData.name}
+//       📧 Email: ${formData.email}
+//       💬 Сообщение: ${formData.message}
+//           `.trim();
+
+//     // Отправляем сообщение в Telegram
+//     sendMessage(messageText);
+    
+//     // Очищаем форму после отправки
+//     setFormData({
+//       name: '',
+//       email: '',
+//       message: ''
+//     });
+
+//     // Показываем уведомление об успешной отправке
+//     // alert(language === 'ru' ? 'Сообщение успешно отправлено!' : 'Message sent successfully!');
+//   };
+
+//   const handleChange = (e) => {
+//     setFormData({
+//       ...formData,
+//       [e.target.name]: e.target.value
+//     });
+//   };
+
+//   return (
+//     <div id="contacts-section" className="relative w-full min-h-[700px] bg-white">
+//       <div className="relative flex justify-center items-center max-w-6xl mx-auto p-8 h-full">
+//         {/* Main container with video background */}
+//         <div className="w-full relative p-12 rounded-3xl overflow-hidden">
+//           {/* Video background */}
+//           <div className="absolute inset-0 z-0">
+//             <video 
+//               autoPlay 
+//               loop 
+//               muted 
+//               playsInline
+//               className="w-full h-full object-cover rounded-3xl"
+//             >
+//               <source src={videoback} type="video/webm" />
+//               Your browser does not support the video tag.
+//             </video>
+//             {/* Optional overlay for better text visibility */}
+//             <div 
+//               className="absolute inset-0 rounded-3xl"
+//               style={{
+//                 background: 'linear-gradient(135deg, rgba(118, 184, 42, 0.3), rgba(144, 201, 92, 0.3))',
+//                 backdropFilter: 'blur(5px)',
+//               }}
+//             />
+//           </div>
+          
+//           {/* Content */}
+//           <div className="relative z-10 flex justify-between items-center gap-12">
+//             {/* Text content */}
+//             <div className="w-1/2">
+//               <h2 className="text-4xl font-extrabold mb-4 text-white drop-shadow-sm">
+//                 {t.title}
+//               </h2>
+//               <p className="text-2xl font-bold text-white">
+//                 {t.subtitle}
+//               </p>
+//             </div>
+
+//             {/* Form */}
+//             <div className="w-[500px] bg-white/95 backdrop-blur-sm p-8 rounded-xl shadow-lg">
+//               <h3 className="text-2xl font-bold text-center mb-6">{t.formTitle}</h3>
+              
+//               <form onSubmit={handleSubmit} className="space-y-6">
+//                 <div>
+//                   <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+//                     {t.form.name.label}
+//                   </label>
+//                   <input
+//                     type="text"
+//                     id="name"
+//                     name="name"
+//                     value={formData.name}
+//                     onChange={handleChange}
+//                     placeholder={t.form.name.placeholder}
+//                     className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
+//                     required
+//                   />
+//                 </div>
+//                 <div>
+//                   <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+//                     {t.form.email.label}
+//                   </label>
+//                   <input
+//                     type="email"
+//                     id="email"
+//                     name="email"
+//                     value={formData.email}
+//                     onChange={handleChange}
+//                     placeholder={t.form.email.placeholder}
+//                     className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
+//                     required
+//                   />
+//                 </div>
+//                 <div>
+//                   <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">
+//                     {t.form.message.label}
+//                   </label>
+//                   <textarea
+//                     id="message"
+//                     name="message"
+//                     value={formData.message}
+//                     onChange={handleChange}
+//                     placeholder={t.form.message.placeholder}
+//                     rows={4}
+//                     className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
+//                     required
+//                   />
+//                 </div>
+//                 <button                  
+//                   type="submit"
+//                   className="w-full bg-[#000000] text-white font-medium py-2 px-4 rounded-md hover:bg-[#90c95c] transition-colors duration-200"
+//                 >
+//                   {t.form.submitButton}
+//                 </button>
+//               </form>
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// }
+
 import { useState } from "react";
 import videoback from '../vids/backvideo2.webm';
 import translations from '../translations.json';
@@ -134,16 +308,14 @@ export default function ContactBlock() {
   const { language } = useLanguage();
   const t = translations.contacts[language];
 
-  function sendMessage(text)
+  function sendMessage(text) {
-  {
     const botToken = process.env.REACT_APP_TELEGRAM_BOT_TOKEN;
     const chatId = process.env.REACT_APP_TELEGRAM_CHAT_ID;
-
     const url = `https://api.telegram.org/bot${botToken}/sendMessage`;
     
     const obj = {
-        chat_id: chatId, // Telegram chat id
+      chat_id: chatId,
-        text: text // The text to send
+      text: text
     };
 
     const xht = new XMLHttpRequest();
@@ -158,15 +330,8 @@ export default function ContactBlock() {
     message: ''
   });
 
-  // const handleSubmit = (e) => {
-  //   e.preventDefault();
-  //   console.log('Form submitted:', formData);
-  // };
-
   const handleSubmit = (e) => {
     e.preventDefault();
-    
-    // Формируем текст сообщения для Telegram
     const messageText = `
       Новое сообщение с сайта:
       👤 Имя: ${formData.name}
@@ -174,18 +339,12 @@ export default function ContactBlock() {
       💬 Сообщение: ${formData.message}
     `.trim();
 
-    // Отправляем сообщение в Telegram
     sendMessage(messageText);
-    
-    // Очищаем форму после отправки
     setFormData({
       name: '',
       email: '',
       message: ''
     });
-
-    // Показываем уведомление об успешной отправке
-    // alert(language === 'ru' ? 'Сообщение успешно отправлено!' : 'Message sent successfully!');
   };
 
   const handleChange = (e) => {
@@ -196,10 +355,10 @@ export default function ContactBlock() {
   };
 
   return (
-    <div id="contacts-section" className="relative w-full min-h-[700px] bg-white">
+    <div id="contacts-section" className="relative w-full min-h-[600px] md:min-h-[700px] bg-white">
-      <div className="relative flex justify-center items-center max-w-6xl mx-auto p-8 h-full">
+      <div className="relative flex justify-center items-center max-w-6xl mx-auto p-4 md:p-8 h-full">
-        {/* Main container with video background */}
+        {/* Main container */}
-        <div className="w-full relative p-12 rounded-3xl overflow-hidden">
+        <div className="w-full relative p-4 md:p-12 rounded-3xl overflow-hidden">
           {/* Video background */}
           <div className="absolute inset-0 z-0">
             <video 
@@ -212,7 +371,7 @@ export default function ContactBlock() {
               <source src={videoback} type="video/webm" />
               Your browser does not support the video tag.
             </video>
-            {/* Optional overlay for better text visibility */}
+            {/* Overlay */}
             <div 
               className="absolute inset-0 rounded-3xl"
               style={{
@@ -223,22 +382,24 @@ export default function ContactBlock() {
           </div>
           
           {/* Content */}
-          <div className="relative z-10 flex justify-between items-center gap-12">
+          <div className="relative z-10 flex flex-col md:flex-row justify-between items-center gap-6 md:gap-12">
             {/* Text content */}
-            <div className="w-1/2">
+            <div className="w-full md:w-1/2 text-center md:text-left mb-6 md:mb-0">
-              <h2 className="text-4xl font-extrabold mb-4 text-white drop-shadow-sm">
+              <h2 className="text-3xl md:text-4xl font-extrabold mb-4 text-white drop-shadow-sm">
                 {t.title}
               </h2>
-              <p className="text-2xl font-bold text-white">
+              <p className="text-xl md:text-2xl font-bold text-white">
                 {t.subtitle}
               </p>
             </div>
 
             {/* Form */}
-            <div className="w-[500px] bg-white/95 backdrop-blur-sm p-8 rounded-xl shadow-lg">
+            <div className="w-full md:w-[500px] bg-white/95 backdrop-blur-sm p-6 md:p-8 rounded-xl shadow-lg">
-              <h3 className="text-2xl font-bold text-center mb-6">{t.formTitle}</h3>
+              <h3 className="text-xl md:text-2xl font-bold text-center mb-6">
+                {t.formTitle}
+              </h3>
               
-              <form onSubmit={handleSubmit} className="space-y-6">
+              <form onSubmit={handleSubmit} className="space-y-4 md:space-y-6">
                 <div>
                   <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
                     {t.form.name.label}

src/components/Header.js

@@ -143,7 +143,81 @@
 // }
 
 
+// import { useState, useEffect } from 'react';
+// import logo from '../assets/images/logo200x50.png';
+// import translations from '../translations.json';
+// import { useLanguage } from '../contexts/LanguageContext';
+// import { CustomLink } from './CustomLink';
+// import LanguageSwitcher from './LanguageSwitcher';
+// import { ScrollLink } from './ScrollLink';
+
+// export default function Header() {
+//   const [isScrolled, setIsScrolled] = useState(false);
+//   const { language } = useLanguage();
+//   const t = translations.header[language];
+
+//   useEffect(() => {
+//     const handleScroll = () => {
+//       const isFullScreenPassed = window.scrollY > window.innerHeight;
+//       setIsScrolled(isFullScreenPassed);
+//     };
+
+//     window.addEventListener('scroll', handleScroll);
+//     return () => window.removeEventListener('scroll', handleScroll);
+//   }, []);
+
+//   return (
+//     <header
+//       className={`
+//         fixed top-0 left-0 w-full z-50
+//         transition-all duration-300
+//         ${isScrolled 
+//           ? 'bg-white bg-opacity-90 backdrop-blur-md' 
+//           : 'bg-transparent backdrop-blur-md bg-opacity-30'
+//         }
+//       `}
+//     >
+//       <div className="container mx-auto px-4">
+//         <div className="flex items-center justify-between h-16">
+//           <div className="flex items-center">
+//             <CustomLink to="/">
+//               <img
+//                 src={logo}
+//                 alt="Logo"
+//                 className="h-12 w-auto"
+//               />
+//             </CustomLink>
+//           </div>
+          
+//           <nav className="hidden md:flex items-center space-x-8">
+//             <CustomLink
+//               to="/pricing"
+//               className={`text-lg font-light transition-colors duration-200 ${
+//                 isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
+//               }`}
+//             >
+//               {t.pricing}
+//             </CustomLink>
+//             <ScrollLink 
+//               to="#contacts-section" 
+//               className={`text-lg font-light transition-colors duration-200 ${
+//                 isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
+//               }`}
+//             >
+//               {t.feedback}
+//             </ScrollLink>
+//             <LanguageSwitcher isScrolled={isScrolled} />
+//           </nav>
+//         </div>
+//       </div>
+//     </header>
+//   );
+// }
+
+
 import { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Menu, X } from 'lucide-react';
 import logo from '../assets/images/logo200x50.png';
 import translations from '../translations.json';
 import { useLanguage } from '../contexts/LanguageContext';
@@ -153,62 +227,96 @@ import { ScrollLink } from './ScrollLink';
 
 export default function Header() {
   const [isScrolled, setIsScrolled] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const { language } = useLanguage();
   const t = translations.header[language];
+  const location = useLocation();
 
   useEffect(() => {
     const handleScroll = () => {
       const isFullScreenPassed = window.scrollY > window.innerHeight;
       setIsScrolled(isFullScreenPassed);
     };
-
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
-  return (
+  // Закрываем мобильное меню при смене маршрута
-    <header
+  useEffect(() => {
-      className={`
+    setIsMobileMenuOpen(false);
-        fixed top-0 left-0 w-full z-50
+  }, [location]);
-        transition-all duration-300
+
-        ${isScrolled 
+  const headerBg = isScrolled 
     ? 'bg-white bg-opacity-90 backdrop-blur-md'
-          : 'bg-transparent backdrop-blur-md bg-opacity-30'
+    : 'bg-transparent backdrop-blur-md bg-opacity-30';
-        }
+
-      `}
+  const textColor = isScrolled 
-    >
+    ? 'text-gray-800 hover:text-gray-600' 
+    : 'text-white hover:text-gray-200';
+
+  return (
+    <header className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${headerBg}`}>
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-16">
+          {/* Логотип */}
           <div className="flex items-center">
             <CustomLink to="/">
-              <img
+              <img src={logo} alt="Logo" className="h-12 w-auto" />
-                src={logo}
-                alt="Logo"
-                className="h-12 w-auto"
-              />
             </CustomLink>
           </div>
 
+          {/* Десктопная навигация */}
           <nav className="hidden md:flex items-center space-x-8">
             <CustomLink
               to="/pricing"
-              className={`text-lg font-light transition-colors duration-200 ${
+              className={`text-lg font-light transition-colors duration-200 ${textColor}`}
-                isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
-              }`}
             >
               {t.pricing}
             </CustomLink>
             <ScrollLink
               to="#contacts-section"
-              className={`text-lg font-light transition-colors duration-200 ${
+              className={`text-lg font-light transition-colors duration-200 ${textColor}`}
-                isScrolled ? 'text-gray-800 hover:text-gray-600' : 'text-white hover:text-gray-200'
-              }`}
             >
               {t.feedback}
             </ScrollLink>
             <LanguageSwitcher isScrolled={isScrolled} />
           </nav>
+
+          {/* Кнопка мобильного меню */}
+          <button
+            className="md:hidden p-2 rounded-lg focus:outline-none"
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+          >
+            {isMobileMenuOpen ? (
+              <X className={textColor} size={24} />
+            ) : (
+              <Menu className={textColor} size={24} />
+            )}
+          </button>
         </div>
+
+        {/* Мобильное меню */}
+        {isMobileMenuOpen && (
+          <div className={`md:hidden ${headerBg} px-4 py-2`}>
+            <div className="flex flex-col space-y-4 pb-4">
+              <CustomLink
+                to="/pricing"
+                className={`text-lg font-light transition-colors duration-200 ${textColor}`}
+              >
+                {t.pricing}
+              </CustomLink>
+              <ScrollLink
+                to="#contacts-section"
+                className={`text-lg font-light transition-colors duration-200 ${textColor}`}
+              >
+                {t.feedback}
+              </ScrollLink>
+              <div className="pt-2">
+                <LanguageSwitcher isScrolled={isScrolled} />
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </header>
   );

src/components/MainSection.js

@@ -74,6 +74,99 @@
 // export default MainSection;
 
 
+// import React from 'react';
+// import { Typography, Button } from 'antd';
+// import { ArrowRightOutlined } from '@ant-design/icons';
+// import VideoBackground from './VideoBackground';
+// import styled from 'styled-components';
+// import translations from '../translations.json';
+// import { useLanguage } from '../contexts/LanguageContext';
+
+// const { Title, Paragraph } = Typography;
+
+
+// const CustomFont = styled.div`
+//   @font-face {
+//     font-family: 'CustomFont';
+//     src: url('../assets/fonts/ProtestStrike-Regular.ttf') format('truetype');
+//   }
+//   font-family: 'CustomFont', sans-serif;
+// `;
+
+// const MainSection = () => {
+//   const { language } = useLanguage();
+//   const t = translations.mainSection[language];
+
+//   return (
+//     <div style={{
+//       width: '100%',
+//       height: '100vh',
+//       overflow: 'hidden'
+//     }}>
+//       <div style={{
+//         position: 'absolute',
+//         top: 0,
+//         left: 0,
+//         width: '100%',
+//         height: '100%',
+//         zIndex: 1
+//       }}>
+//         <VideoBackground />
+//       </div>
+     
+//       <div style={{
+//           position: 'relative',
+//           zIndex: 2,
+//           display: 'flex',
+//           flexDirection: 'column',
+//           justifyContent: 'center',
+//           alignItems: 'center',
+//           textAlign: 'center',
+//           height: '100%',
+//           padding: '20px',
+//           backgroundColor: 'rgba(255, 255, 255, 0)'
+//       }}>
+        
+//         <CustomFont>
+//           <Title style={{ color: '#ffffff', fontSize: '84px', marginBottom: '5px' }}>
+//             <span style={{ fontWeight: '900' }}>
+//               <p style={{marginBottom: '0px'}}>{t.title}</p>
+//             </span>
+//           </Title>
+//         </CustomFont>
+        
+//         <Title level={2} style={{ color: '#ffffff', fontSize:'30px', marginBottom:'-5px' }}>
+//           <span style={{ fontWeight: 'bold' }}>{t.subtitle}</span>
+//         </Title>
+//         <Title level={3} style={{ color: '#ffffff', fontSize:'45px', marginBottom:'0px' }}>
+//           <span style={{ fontWeight: 'bold' }}>{t.description}</span>
+//         </Title>
+//         <Paragraph style={{ fontSize: 20, color: '#ffffff', maxWidth: '800px', margin: '20px auto' }}>
+//           {t.descriptionn}
+//         </Paragraph>
+//         <Button 
+//           href="http://app.qwickpost.com/"
+//           type="primary" 
+//           size="large" 
+//           style={{ 
+//             background: 'rgba(255, 255, 255, 0)', 
+//             borderWidth: 3, 
+//             borderColor: '#ffffff', 
+//             fontSize:'18px', 
+//             fontWeight: 900,  
+//             marginTop: '20px' 
+//           }}
+//         >
+//           <p>{t.tryButton}</p>
+//           <ArrowRightOutlined />
+//         </Button>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default MainSection;
+
 import React from 'react';
 import { Typography, Button } from 'antd';
 import { ArrowRightOutlined } from '@ant-design/icons';
@@ -84,7 +177,6 @@ import { useLanguage } from '../contexts/LanguageContext';
 
 const { Title, Paragraph } = Typography;
 
-
 const CustomFont = styled.div`
   @font-face {
     font-family: 'CustomFont';
@@ -99,10 +191,14 @@ const MainSection = () => {
 
   return (
     <div style={{
-      width: '100%',
+      width: '100vw',
       height: '100vh',
-      overflow: 'hidden'
+      overflow: 'hidden',
+      marginLeft: 'calc(-50vw + 50%)',
+      marginRight: 'calc(-50vw + 50%)',
+      position: 'relative'
     }}>
+      {/* Фон с видео */}
       <div style={{
         position: 'absolute',
         top: 0,
@@ -114,6 +210,7 @@ const MainSection = () => {
         <VideoBackground />
       </div>
      
+      {/* Контент */}
       <div style={{
         position: 'relative',
         zIndex: 2,
@@ -126,24 +223,45 @@ const MainSection = () => {
         padding: '20px',
         backgroundColor: 'rgba(255, 255, 255, 0)'
       }}>
-        
         <CustomFont>
-          <Title style={{ color: '#ffffff', fontSize: '84px', marginBottom: '5px' }}>
+          <Title style={{ 
+            color: '#ffffff', 
+            fontSize: 'clamp(40px, 8vw, 84px)',
+            marginBottom: '5px',
+            wordBreak: 'break-word'
+          }}>
             <span style={{ fontWeight: '900' }}>
               <p style={{marginBottom: '0px'}}>{t.title}</p>
             </span>
           </Title>
         </CustomFont>
         
-        <Title level={2} style={{ color: '#ffffff', fontSize:'30px', marginBottom:'-5px' }}>
+        <Title level={2} style={{ 
+          color: '#ffffff', 
+          fontSize: 'clamp(20px, 4vw, 30px)',
+          marginBottom: '-5px'
+        }}>
           <span style={{ fontWeight: 'bold' }}>{t.subtitle}</span>
         </Title>
-        <Title level={3} style={{ color: '#ffffff', fontSize:'45px', marginBottom:'0px' }}>
+
+        <Title level={3} style={{ 
+          color: '#ffffff', 
+          fontSize: 'clamp(24px, 5vw, 45px)',
+          marginBottom: '0px'
+        }}>
           <span style={{ fontWeight: 'bold' }}>{t.description}</span>
         </Title>
-        <Paragraph style={{ fontSize: 20, color: '#ffffff', maxWidth: '800px', margin: '20px auto' }}>
+
+        <Paragraph style={{ 
+          fontSize: 'clamp(16px, 2.5vw, 20px)', 
+          color: '#ffffff', 
+          maxWidth: '800px', 
+          margin: '20px auto',
+          padding: '0 15px'
+        }}>
           {t.descriptionn}
         </Paragraph>
+
         <Button
           href="http://app.qwickpost.com/"
           type="primary"
@@ -152,12 +270,14 @@ const MainSection = () => {
             background: 'rgba(255, 255, 255, 0)',
             borderWidth: 3,
             borderColor: '#ffffff',
-            fontSize:'18px', 
+            fontSize: 'clamp(14px, 2vw, 18px)',
             fontWeight: 900,
-            marginTop: '20px' 
+            marginTop: '20px',
+            height: 'auto',
+            padding: '10px 20px'
           }}
         >
-          <p>{t.tryButton}</p>
+          <p style={{ margin: 0 }}>{t.tryButton}</p>
           <ArrowRightOutlined />
         </Button>
       </div>