fixes

data.json

@@ -9,7 +9,7 @@
     },
     "Home":{
         "title":"احصل على تنزيل مجاني لتطبيق",
-        "ApplicationName":"Quiz",
+        "ApplicationName":"ذاكر",
         "description":"من الحقائق الثابتة منذ فترة طويلة أن القارئ سوف يصرف انتباهه عن المحتوى",
         "buttonLabel":"تحميل على المتجر",
         "button1":"جوجل بلاي",
@@ -17,29 +17,29 @@
         "mainImage":"/Home/Main.png"
     },
     "Features":{
-        "title":"ميزات غير محدودة",
+        "title":"ميزات التطبيق",
         "description":"تقديم قيمة احترافية بموضوعية مع جاهزية متنوعة للويب. نقل خدمة العملاء اللاسلكية بشكل تعاوني دون محفزات موجهة نحو الهدف للتغيير. التعاون.",
          "mainImage":"/Features/main.png",
          "Data":{
             "1":{
                 "img": "/Features/1.png",
-                "title": "دعم ودود عبر الإنترنت",
-                "description": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات"
-            },
-            "2":{
-                "img": "/Features/2.png",
                 "title": "ميزات غير محدودة",
                 "description": "استمتع بإمكانيات غير محدودة لتخصيص تجربتك"
             },
+            "2":{
+                "img": "/Features/2.png",
+                "title": "دعم ودود عبر الإنترنت",
+                "description": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات"
+            },
            "3": {
                 "img": "/Features/3.png",
-                "title": "مكون معياري وقابل للتبديل",
-                "description": "تبديل بين التخطيطات وحتى العروض التوضيحية بسهولة"
+                "title": "مشاركة اجتماعية",
+                "description": "مكون معياري وقابل للتبديل بين التخطيطات وحتى العروض التوضيحية."
             },
            "4": {
                 "img": "/Features/4.png",
                 "title": "دقة عالية",
-                "description": "احصل على جودة صور وفيديو عالية الدقة"
+                "description": "مكون معياري وقابل للتبديل بين التخطيطات وحتى العروض التوضيحية."
             },
            "5": {
                 "img": "/Features/5.png",
@@ -60,22 +60,22 @@
          "Data":{
             "1":{
                 "img": "/HowItWorks/1.png",
-                "title": "دعم ودود عبر الإنترنت",
-                "description": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات"
+                "title": "تسجيل الدخول ",
+                "description": "تسخير المنهجيات الموثوقة وخدمات الويب المتعامدة بشكل مقنع."
             },
            "2": {
                 "img": "/HowItWorks/2.png",
-                "title": "دعم ودود عبر الإنترنت",
+                "title": "اختيار مادة",
                 "description": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات"
             },
            "3": {
                 "img": "/HowItWorks/3.png",
-                "title": "دعم ودود عبر الإنترنت",
-                "description": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات"
+                "title": "إنشاء اختبار",
+                "description": "تسخير المنهجيات الموثوقة وخدمات الويب المتعامدة بشكل مقنع."
             },
           "4":  {
                 "img": "/HowItWorks/4.png",
-                "title": "دعم ودود عبر الإنترنت",
+                "title": "عرض النتيجة",
                 "description": "توفير دعم فني متاح على مدار الساعة لمساعدتك في أي استفسارات"
             }
          }
@@ -87,22 +87,22 @@
          "Data":{
             "1":{
                 "img": "1",
-                "title": "التصميم الإبداعي",
+                "title": "تنزيلات التطبيق",
                 "number": "1111"
             },
             "2":{
                 "img": "2",
-                "title": "التصميم الإبداعي",
+                "title": "عملاء سعداء",
                 "number": "2222"
             },
             "3":{
                 "img": "3",
-                "title": "التصميم الإبداعي",
+                "title": "الحسابات النشطة",
                 "number": "3333"
             },
             "4":{
                 "img": "4",
-                "title": "التصميم الإبداعي",
+                "title": "ملاحظات",
                 "number": "4444"
             }
          }
@@ -111,16 +111,15 @@
         "title":"لقطات شاشة التطبيق",
         "description":"استضافة احترافية بسعر مناسب. تلخيص الكفاءات الأساسية التي تركز على المبدأ بشكل مميز من خلال الكفاءات الأساسية التي تركز على العميل",
          "Data":[
+            "ScreenShoot/5.png",
+            "ScreenShoot/4.png",
+            "ScreenShoot/3.png",
+            "ScreenShoot/2.png",
             "ScreenShoot/1.png",
-            "ScreenShoot/1.png",
-            "ScreenShoot/1.png",
-            "ScreenShoot/1.png",
-            "ScreenShoot/1.png",
-            "ScreenShoot/1.png",
-            "ScreenShoot/1.png",
-            "ScreenShoot/1.png",
-            "ScreenShoot/1.png",
-            "ScreenShoot/1.png",
+            "ScreenShoot/5.png",
+            "ScreenShoot/4.png",
+            "ScreenShoot/3.png",
+            "ScreenShoot/2.png",
             "ScreenShoot/1.png"
          ]
     },
@@ -171,12 +170,12 @@
             "2":{
                 "title": "المكتب الرئيسي",
                 "image": "/contact/2.png",
-                "value": "121 King St , ملبورن VIC 3000, أستراليا"
+                "value": "+61 2 8376 6284"
             },
             "3":{
                 "title": "المكتب الرئيسي",
                 "image": "/contact/3.png",
-                "value": "121 King St , ملبورن VIC 3000, أستراليا"
+                "value": " hello@your domain.com"
             }
         }
     },

index.html

@@ -7,7 +7,7 @@
     <link
       rel="icon"
       type="image/webp"
-      href="/src/assets/core/Logo-192x192.webp"
+      href="/ Setting/LOGO.png"
     />
     <meta name="description" content=" description of your web app" />
     <title>Website</title>

src/components/Contact/Left.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {ContactPage as ContactPageData} from '../../../data.json'
 
 const Left = () => {
@@ -7,7 +6,7 @@ const Left = () => {
         <div className='Left'>
             <h1> {ContactPageData.title} </h1>
             <p>
-            {ContactPageData.description}
+                {ContactPageData.description}
             </p>
             <div>
                 {Object.entries(ContactPageData.Data)?.map((item, index) => {

src/components/SwiperScreenShoot.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 // Import Swiper React components
 import { Pagination, A11y ,Autoplay} from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -9,34 +8,17 @@ import 'swiper/css/scrollbar';
 import {ScreenShoot as ScreenShootData} from '../../data.json'
 
 const SwipeScreenShoot = () => {
-    const SwipeScreenShoot = [
-        { image: "/SwipeScreenShoot/1.png" },
-        { image: "/SwipeScreenShoot/2.png" },
-        { image: "/SwipeScreenShoot/3.png" },
-        { image: "/SwipeScreenShoot/4.png" },
-        { image: "/SwipeScreenShoot/1.png" },
-        { image: "/SwipeScreenShoot/2.png" },
-        { image: "/SwipeScreenShoot/3.png" },
-        { image: "/SwipeScreenShoot/1.png" },
-        { image: "/SwipeScreenShoot/2.png" },
-        { image: "/SwipeScreenShoot/3.png" },
-        { image: "/SwipeScreenShoot/4.png" },
-        { image: "/SwipeScreenShoot/1.png" },
-        { image: "/SwipeScreenShoot/2.png" },
-        { image: "/SwipeScreenShoot/3.png" },
-
-    ];
 
     return (
         <div className='SwipeScreenShoot'>
             <Swiper
                  modules={[Pagination, A11y, Autoplay]}
-                 spaceBetween={10}
+                 spaceBetween={20}
                  autoplay={{ delay: 3000 }} // Configure autoplay options
                 
                 pagination={{ clickable: true }}
-                onSwiper={(swiper) => console.log(swiper)}
-                onSlideChange={() => console.log('slide change')}
+                // onSwiper={(swiper) => console.log(swiper)}
+                // onSlideChange={() => console.log('slide change')}
                 breakpoints={{
                     400: {
                         slidesPerView: 1,

src/components/layout/BackToTop.tsx

@@ -0,0 +1,25 @@
+import { Button } from 'antd';
+import { FaHandPointUp } from "react-icons/fa";
+import useScroll from '../../hooks/useScroll';
+
+const BackToTopButton = () => {
+  const showButton = useScroll(100);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <Button
+      className={`back_to_top ${showButton ? 'show' : 'hide'}`}
+      onClick={scrollToTop}
+    >
+      <FaHandPointUp />
+    </Button>
+  );
+};
+
+export default BackToTopButton;

src/components/layout/Layout.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import NavBar from './NavBar';
 import Footer from './Footer';
+import BackToTopButton from './BackToTop';
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
@@ -8,6 +9,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
       <NavBar />
       {children}
       <Footer />
+      <BackToTopButton/>
     </div>
   );
 };

src/components/layout/NavBar.tsx

@@ -48,7 +48,6 @@ const NavBarContent = (
 
 
   const [Active, setActive] = useState(location.hash)
-  console.log(Active);
   
   return (
     <nav className='NavBar'>
@@ -73,8 +72,8 @@ const NavBarContent = (
      <MdLanguage />
       <article>
       <Popover open={Open}  content={NavBarContent} >
-      <FaEllipsis onClick={handleToggle} />
-  </Popover>
+        <FaEllipsis onClick={handleToggle} />
+      </Popover>
       </article>
     
      </div>

src/hooks/useScroll.tsx

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+
+function useScroll(threshold = 100): boolean {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsVisible(window.scrollY > threshold);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [threshold]);
+
+  return isVisible;
+}
+
+export default useScroll;

src/pages/HowItWork.tsx

@@ -13,20 +13,20 @@ const HowItWork = () => {
         <div>
             <span>
             {Object.entries(HowItWorkData.Data).slice(0,2).map((item, index) => {
-                        return (
-                            <article key={index}>
-                                <img loading="lazy" className='scale' src={item[1].img} alt={`${index}`} />
-                                <div>
-                                    <h4>
-                                    {item[1].title}
-                                    </h4>
-                                    <p>
-                                    {item[1].description}
-                                    </p>
-                                </div>
-                            </article>
-                        )
-                    })}
+                return (
+                    <article key={index}>
+                        <img loading="lazy" className='scale' src={item[1].img} alt={`${index}`} />
+                        <div>
+                            <h4>
+                            {item[1].title}
+                            </h4>
+                            <p>
+                            {item[1].description}
+                            </p>
+                        </div>
+                    </article>
+                )
+            })}
                 </span>
                 <img loading="lazy" className='scale' src="/HowItWorks/main.png" alt="" />
                 <span>

src/pages/NotePage.tsx

@@ -14,6 +14,7 @@ const NotePage = () => {
                 return (
             <article key={index}>
                 <div>
+                    <img className='message_form' src="/Note/message.png" alt="" width={20}/>
                     <p>
                     {item[1].description} 
                     </p>

src/styles/App/Variables.scss

@@ -1,8 +1,10 @@
 :root {
   --primary: #222838;
-  --secondary: #55B9E3;
+  --secondary: #fdba2d;
+  --thirdly:#0093d4;
   --white:white;
-  --text: #4C5462;
+  --text: #000;
+  --black:#000;
   --placeholder: rgb(0, 0, 0, 0.3);
   --bg: rgb(245 247 251);
   --bg2: white; 

src/styles/App/classNames.scss

@@ -16,4 +16,4 @@
 }
 .spinner{
   
-}
+}

src/styles/components/BackToTop.scss

@@ -0,0 +1,36 @@
+.back_to_top {
+  width: 50px;
+  height: 50px;
+  // border-radius: 50%;
+  position: fixed;
+  background-color: var(--thirdly) !important;
+  color: var(--white);
+  bottom: 30px;
+  right: 20px;
+  padding: 10px;
+  opacity: 0;
+  transition:
+    opacity 0.5s,
+    transform;
+  transform: translateY(100%);
+  transition: all 0.3s ease-in-out;
+  border: none;
+  z-index: 9999 !important;
+  svg {
+    font-size: 26px;
+    color: var(--white);
+  }
+  &:hover {
+    scale: 1.05;
+  }
+}
+
+.back_to_top.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.back_to_top.hide {
+  opacity: 0;
+  transform: translateY(100%);
+}

src/styles/components/Footer.scss

@@ -1,6 +1,6 @@
 .Footer{
  background: var(--primary);   
- height: 300px;
+ height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
@@ -18,7 +18,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 20px;
+    gap: 10px;
     svg{
         font-size: 20px;
         color: var(--white);
@@ -29,14 +29,15 @@
     
  }
  p{
-    font-size: 14px;
+    font-size: 16px;
+    color: var(--white);
  }
 }
 
 .FooterHeader{
     position: absolute;
-    top: -40%;
-    background-image: var(--gradient);
+    top: -25%;
+    background: var(--thirdly);
     width: 70%;
     height: 150px;
     display: flex;
@@ -45,6 +46,7 @@
 
     padding-inline: 5%;
     color: var(--white);
+    border-radius: 6px;
     >span{
         display: flex;
         flex-direction: column;
@@ -71,13 +73,17 @@
             }
         }
         div{
-            background-image: var(--gradient);
+            background: var(--thirdly);
             width: 50px;
             display: flex;
             justify-content: center;
             align-items: center;
             border-radius: 5px;
             cursor: pointer;
+            svg{
+                font-size: 30px;
+                width: 30px;
+            }
         }
     }
 
@@ -89,17 +95,17 @@
 
     .Footer{
         background: var(--primary);   
-        height: 400px;
+        height: 330px;
         display: flex;
         flex-direction: column;
-        justify-content: center;
+        justify-content: end;
         align-items: center;
         gap: 30px;
         margin-top: 250px;
         width: 100%;
         z-index: 999;
         position: relative;
-        
+        padding-bottom: 30px;
         img{
            width: 100px;
        
@@ -126,7 +132,7 @@
        .FooterHeader{
            position: absolute;
            top: -40%;
-           background-image: var(--gradient);
+           background: var(--thirdly);
            width: 60%;
            height: fit-content;
            padding-block: 20px;
@@ -168,7 +174,7 @@
                    }
                }
                div{
-                   background-image: var(--gradient);
+                    background: var(--thirdly);
                    width: 50px;
                    display: flex;
                    justify-content: center;

src/styles/components/NavBar.scss

@@ -34,6 +34,8 @@
             color: var(--white) !important;
             opacity: .6;
             transition: .5s ease-in-out;
+            font-weight: normal;
+            font-size: 18px;
             &:hover{
                 color: var(--secondary) !important;
                 scale: 1.1;
@@ -43,7 +45,7 @@
         }
         .activeLink{
             a{
-                color: var(--secondary) !important;
+                color: var(--thirdly) !important;
                 opacity: 1;
             }
         }
@@ -81,7 +83,7 @@
 .NavBarContent{
     position: relative;
     z-index: 9999999999;
-    background-image: var(--gradient);
+    background: var(--thirdly);
     width: 150px;
     min-height: 200px;
     padding-top: 20px;

src/styles/components/index.scss

@@ -2,4 +2,5 @@
 @import './Layout.scss';
 @import "./PageTransition.scss";
 @import './NavBar.scss';
-@import './Footer.scss';
+@import './Footer.scss';
+@import './BackToTop.scss';

src/styles/pages/ContactPage.scss

@@ -39,7 +39,8 @@
             color: var(--white);
             border: 1px solid var(--white);
             border-radius: 7px;
-            background-image: linear-gradient(45deg, #55B9E3, #5262E3);
+            // background-image: linear-gradient(45deg, #55B9E3, #5262E3);
+            background: var(--thirdly);
             cursor: pointer;
             transition: .5s ease-in-out;
             &:hover{
@@ -62,21 +63,21 @@
             >span{
                 display: flex;
                 flex-direction: column;
-                gap: 10px;
+                gap: 2px;
                 >div{
                     display: flex;
                     align-items: center;
                     gap: 10px;
                     h6{
-                        font-size: 18px;
+                        font-size: 20px;
                     }
                     img{
-                        width: 15px;
+                        width: 18px;
                     }
                   
                 }
                 p{
-                    font-size: 14px;
+                    font-size: 16px;
                     font-weight: normal;
                 }
             }
@@ -91,15 +92,14 @@
         display: flex;
         flex-direction: column;
         padding-inline: 5%;
-        gap: 30px;
-        width: 80%;
-        margin-block: 100px;
+        width: 90%;
+        margin-block: 0 100px;
         margin-inline: auto;
-        gap: 30px;
+        gap: 10px;
         .Right{
             display: flex;
             flex-direction: column;
-            gap: 40px;
+            gap: 20px;
             .Forms{
                 display: flex;
                 flex-wrap: wrap;
@@ -127,7 +127,8 @@
                 color: var(--white);
                 border: 1px solid var(--white);
                 border-radius: 7px;
-                background-image: linear-gradient(45deg, #55B9E3, #5262E3);
+                background: var(--thirdly);
+                // background-image: linear-gradient(45deg, #55B9E3, #5262E3);
             }
         }
         .Left{
@@ -140,11 +141,11 @@
             >div{
                 display: flex;
                 flex-direction: column;
-                gap: 20px;
+                gap: 10px;
                 >span{
                     display: flex;
                     flex-direction: column;
-                    gap: 10px;
+                    gap: 0px;
                     >div{
                         display: flex;
                         align-items: center;

src/styles/pages/DownloadPage.scss

@@ -46,7 +46,7 @@
                 transition: .5s ease-in-out;
                 padding-block: 10px;
                 &:hover{
-                    background: var(--gradient);
+                    background: var(--thirdly);
                     scale: 1.1;
                 }
                 h6{
@@ -102,9 +102,9 @@
     .DownloadPage{
         background: var(--bg);
         display: flex;
-        gap: 50px;
+        gap: 40px;
         width: 100%;
-        padding-block: 100px;
+        padding-block: 50px;
         position: relative;
         flex-direction: column;
     
@@ -114,22 +114,22 @@
                 display: flex;
                 flex-direction: column;
                 align-items: center;
-                gap: max(2vh,25px);
+                gap: max(2vh,15px);
                 text-align: center;
                 z-index: 99;
-                padding-top: 0px   ;
+                padding-top: 50px   ;
                 >h1{
                     display: flex;
                     align-items: center;
-                    gap: 20px;
+                    gap: 10px;
                     color: var(--white);
-                    font-size: max(4vw,50px);
+                    font-size: 6vw;
     
                 }
                 p{
                     color: var(--white);
-                    font-size: max(1.3vw,15px);
-                    width: 50%;
+                    font-size: 4vw;
+                    width: 80%;
                 }
                 >div{
                     display: flex;
@@ -164,7 +164,7 @@
             z-index: 1;
             top: 0;
             width: 100%;
-            height: 700px;
+            height: 630px;
             background: var(--primary);
             overflow: hidden;
             .circle{
@@ -173,14 +173,14 @@
                 top: 0%;
                 left: 50%;
                 transform: translate(-50%,0%);
-                    z-index: 9999;  
+                    z-index: 1;  
             
             }
     
         }
         .main{
             position: relative;
-            z-index: 99999;
+            z-index: 3;
             // margin-top: 300px;
             width: 100%;
             object-fit: contain;

src/styles/pages/FeaturesPage.scss

@@ -4,18 +4,18 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 30px;
+    gap: 20px;
     width: 100%;
     margin-bottom: 100px;
     >h1{
-        font-size: 4vw;
-        color: var(--text);
+        font-size: 3vw;
+        color: #000;
     }
     >p{
         font-weight: 500;
-        font-size: 1.5vw;
+        font-size: 1.2vw;
         text-wrap: pretty;
-        width: 60%;
+        width: 52%;
         text-align: center;
         color: var(--text);
     }
@@ -31,7 +31,7 @@
         >span{
             display: flex;
             flex-wrap: wrap;
-               max-width: 45%;
+            max-width: 45%;
             gap: 50px;
             article{
                 display: flex;
@@ -39,16 +39,18 @@
                 gap: 20px;
                 max-width: 40%;
                 img{
-                    width: 50px;
+                    width: 55px;
                     object-fit: contain;
                 }
                 div{
                         h4{ 
                             font-size: max(1.2vw,16px);
+                            color: var(--black);
                         }
                         p{
                             font-weight: normal;
-                            font-size: max(1vw,14px);
+                            font-size: max(.8vw,16px);
+                            line-height:30px;
                             
                         }
                 }
@@ -91,9 +93,10 @@
                 width: 300px;
             }
             >span{
-                display: flex;
+                display: flex;align-items: center;justify-content: center;
                 flex-wrap: wrap;
-                  width: 250px;
+                  width: 100% !important;
+                max-width: 90%;
                    
                 gap: 50px;
                 article{
@@ -102,7 +105,7 @@
                     flex-direction: column;
                     justify-content: center;
                     gap: 20px;
-                    max-width: 80%;
+                    max-width: 90% !important;
                     img{
                         width: 50px;
                         object-fit: contain;

src/styles/pages/HomePage.scss

@@ -47,7 +47,7 @@
                 transition: .5s ease-in-out;
                 padding-block: 10px;
                 &:hover{
-                    background: var(--gradient);
+                    background: var(--thirdly);
                     scale: 1.1;
                 }
                 h6{
@@ -111,7 +111,8 @@
         padding-bottom: 120px;
         >main{
             position: relative;
-                width: 100%;
+                width: 90%;
+                margin-inline: auto;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
@@ -125,18 +126,18 @@
                     flex-wrap: wrap;
                     align-items: center;
                     justify-content: center;
-                    gap: 20px;
+                    gap: 0px;
                     color: var(--white);
                     font-size: max(4vw,20px);
                     h2{
                         color: var(--secondary);
-                        font-size: max(4vw,20px);
+                        font-size: max(4vw,22px);
                     }
                 }
                 p{
                     color: var(--white);
-                    font-size: max(3vw,15px);
-                    width: 70%;
+                    font-size: max(3vw,14px);
+                    width: 94%;
                     text-align: center;
                 }
                 >div{
@@ -144,7 +145,7 @@
                     gap: max(1vw,10px);
                     button{
                     all: unset;
-                    padding: max(.5vw,8px) max(1.5vw,30px);
+                    padding: max(.5vw,8px) max(1.5vw,20px);
                     display: flex;
                     align-items: center;
                     gap: max(1vw,10px);
@@ -154,8 +155,9 @@
                     cursor: pointer;
                     transition: .5s ease-in-out;
                     padding-block: 8px;
+                    // width: 90% !important;
                     &:hover{
-                        background: var(--gradient);
+                        background: var(--thirdly);
                         scale: 1.1;
                     }
                     h6{
@@ -195,7 +197,7 @@
             }
             .slider{
                 position: absolute;
-                width: 800px;
+                width: 600px;
                 top: 600px;
                 
             }

src/styles/pages/HowItWork.scss

@@ -4,19 +4,19 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 30px;
+    gap: 20px;
     width: 100%;
     margin-bottom: 100px;
 
     >h1{
-        font-size: 4vw;
-        color: var(--text);
+        font-size: 3vw;
+        color: #000;
     }
     >p{
         font-weight: 500;
-        font-size: 1.5vw;
+        font-size: 1.2vw;
         text-wrap: pretty;
-        width: 60%;
+        width: 52%;
         text-align: center;
         color: var(--text);
     }
@@ -48,6 +48,7 @@
                     object-fit: contain;
                 }
                 div{
+                    width: 100% !important;
                         h4{ 
                             font-size: max(1.2vw,16px);
                         }
@@ -55,7 +56,6 @@
                             font-weight: normal;
                             font-size: max(1vw,14px);
                             width: 100%; 
-                            
                         }
                 }
             }
@@ -119,7 +119,7 @@
                     gap: 20px;
                     max-width: 100%;
                     background: var(--bg2);
-                    padding:30px;
+                    padding:20px;
                     img{
                         width: 50px;
                         object-fit: contain;

src/styles/pages/NotePage.scss

@@ -4,18 +4,18 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 50px;
+    gap: 20px;
     width: 100%;
     padding-block: 100px;
     >h1{
-        font-size: 4vw;
-        color: var(--text);
+        font-size: 3vw;
+        color: #000;
     }
     >p{
         font-weight: 500;
-        font-size: 1.5vw;
+        font-size: 1.2vw;
         text-wrap: pretty;
-        width: 60%;
+        width: 52%;
         text-align: center;
         color: var(--text);
     }
@@ -28,8 +28,8 @@
     gap: 40px;
     padding-block: 30px;
     article{
-        width: 20vw;
-        max-width: 300px;
+        width: 40vw;
+        max-width: 450px;
         display: flex;
         flex-direction: column;
         gap: 30px;
@@ -39,6 +39,11 @@
             flex-direction: column;
             padding: 30px 10px;
             background: var(--bg);
+            position: relative;
+            .message_form{
+                position: absolute;
+                bottom: -10% ;
+            }
         }
         >span{
             display: flex;
@@ -60,18 +65,18 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        gap: 20px;
+        gap: 0px;
         width: 100%;
         padding-block: 50px;
         >h1{
-            font-size: 6vw;
+            font-size: 5vw;
             color: var(--text);
         }
         >p{
             font-weight: 500;
             font-size: 3vw;
             text-wrap: pretty;
-            width: 60%;
+            width: 80%;
             text-align: center;
             color: var(--text);
         }
@@ -81,8 +86,7 @@
         justify-content: center;
         align-items: center;
         flex-direction: column;
-        width: 100%;
-      
+        width: 90%;
         gap: 40px;
         padding-block: 30px;
         article{
@@ -96,6 +100,11 @@
                 flex-direction: column;
                 padding: 30px 10px;
                 background: var(--bg);
+                position: relative;
+                .message_form{
+                    position: absolute;
+                    bottom: -8% ;
+                }
             }
             >span{
                 display: flex;

src/styles/pages/ScreenShoot.scss

@@ -4,30 +4,30 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 30px;
+    gap: 20px;
     width: 100%;
     margin-bottom: 100px;
     position: relative;
     
     >h1{
-        font-size: 4vw;
-        color: var(--text);
-    }
-    >p{
-        font-weight: 500;
-        font-size: 1.5vw;
-        text-wrap: pretty;
-        width: 60%;
-        text-align: center;
-        color: var(--text);
-    }
+      font-size: 3vw;
+      color: #000;
+  }
+  >p{
+      font-weight: 500;
+      font-size: 1.2vw;
+      text-wrap: pretty;
+      width: 52%;
+      text-align: center;
+      color: var(--text);
+  }
   .SwipeScreenShoot{
     color: white;
-    width: 80%;
+    width: 88%;
 
     margin-inline: auto;
     img{
-        width: 200px;
+        width: 250px;
         margin-inline: auto;
     }
 
@@ -52,22 +52,23 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 30px;
+    gap: 0px;
     width: 100%;
     margin-block: 50px;
     position: relative;
     
     >h1{
-        font-size: 8vw;
+        font-size: 6vw;
         color: var(--text);
     }
     >p{
         font-weight: 500;
-        font-size: 3vw;
+        font-size: 12px;
         text-wrap: pretty;
-        width: 60%;
+        width: 80%;
         text-align: center;
         color: var(--text);
+        margin-bottom: 20px;
     }
   .SwipeScreenShoot{
     color: white;
@@ -75,7 +76,7 @@
 
     margin-inline: auto;
     img{
-        width: 200px;
+        width: 280px;
         margin-inline: auto;
     }
 

src/styles/pages/VideoPage.scss

@@ -6,13 +6,12 @@
     justify-content: center;
     gap: 30px;
     width: 100%;
-    margin-bottom: 100px;
+    margin-bottom: 130px;
     position: relative;
 
         >img{
 
-            width: 80%;
-            height: 500px;
+            width: 100%;
             object-fit: cover;
            
         }
@@ -28,11 +27,12 @@
             flex-direction: column;
             align-items: center;
             text-align: center;
-            gap: 20px;
+            // gap: 10px ;
             h1{
                 font-size: 3vw;
             }
             p{
+                margin-bottom: 30px;
                 font-weight: normal;
             }
             img{
@@ -43,15 +43,15 @@
     }
     >span{
         position: absolute;
-        bottom: -10%;
+        bottom: -13%;
         display: flex;
         justify-content: space-around;
         align-items: center;
         background:var(--white);
         border-radius: 10px;
-        width: 70%;
+        width: 80%;
         z-index: 99;
-        min-height: 200px;
+        min-height: 230px;
         article{
             display: flex;
             flex-direction: column;
@@ -71,15 +71,15 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        gap: 30px;
+        gap: 20px;
         width: 100%;
         margin-bottom: 100px;
         position: relative;
     
             >img{
     
-                width: 80%;
-                height: 700px;
+                width: 100%;
+                height: 600px;
                 object-fit: cover;
                
             }
@@ -95,13 +95,14 @@
                 flex-direction: column;
                 align-items: center;
                 text-align: center;
-                gap: 20px;
+                gap: 0px;
+                width: 80%;
                 h1{
                     font-size: 5vw;
                 }
                 p{
                     font-weight: normal;
-                    line-height: 20px;
+                    line-height: 30px;
                     font-size: 3vw;
                 }
                 img{
@@ -123,7 +124,7 @@
             z-index: 99;
             min-height: 200px;
             padding: 40px 20px;
-            gap: 0px;
+            gap: 20px;
             article{
                 display: flex;
                 flex-direction: column;