fix bugs

src/Components/HOC/CartWithDrawer.tsx

@@ -64,7 +64,7 @@ const CartWithDrawer = () => {
         onClose={() => setOpen(false)}
         open={open}
         key={placement}
-        width={550}
+        width={450}
         style={{maxHeight:"60%", minHeight:"500px"}}
       >
         <div className="cart_first_section">

src/Components/HOC/ChangeMode.tsx

@@ -16,7 +16,7 @@ export const ChangeModeComp = ({onClickFunction, src, modeText,icon, isImage = t
     const ModeContainer = memo(() => (
         <div className="MenuChange" onClick={onClickFunction}>
             {isImage
-            ? <img alt='ModeImage' src={src} width={20} height={20} />
+            ? <img className="mode_image" alt='ModeImage' src={src} width={20} height={20} />
             : icon
             }
             {t(modeText)}

src/Components/HOC/SearchWithDrawer.tsx

@@ -1,31 +1,21 @@
-import React, { useState, ReactNode } from 'react';
+import { useState } from 'react';
 import type { DrawerProps } from 'antd';
-import {  Badge, Button, Drawer, Space } from 'antd';
+import { Drawer, Space } from 'antd';
-import CardItem from '../Cart/CardItem';
-import { BsArrowLeft, BsCart, BsSearch } from 'react-icons/bs';
-import { Link } from 'react-router-dom';
-import { ShoppingCartOutlined } from '@ant-design/icons';
-import { useCartData } from '../../Redux/DispatchData';
-import { useTranslation } from 'react-i18next';
 import { TiDeleteOutline } from "react-icons/ti";
 import SearchButton from '../Utils/Search/SearchButton';
-import { GoClock } from "react-icons/go";
+import { RiSearchLine } from "react-icons/ri";
-import { FiDelete } from "react-icons/fi";
+import Empty from '../Utils/Search/Empty';
-import { RiSearch2Line, RiSearchLine } from "react-icons/ri";
-
-
 
 const SearchWithDrawer = () => {
   const [open, setOpen] = useState(false);
   const [placement, setPlacement] = useState<DrawerProps['placement']>('right');
-  const { DataCart,count} = useCartData()
+  const [noDataFound, setNoDataFound] = useState(true);
-  const {t} = useTranslation();
+  console.log(noDataFound);
-
   
   return (
     <>
       <Space>
-          <div onClick={()=>setOpen(true)} className="icon_navbar">
+        <div onClick={() => setOpen(true)} className="icon_navbar">
           <RiSearchLine />
         </div>
       </Space>
@@ -37,20 +27,19 @@ const SearchWithDrawer = () => {
         onClose={() => setOpen(false)}
         open={open}
         key={placement}
-        width ={700}
+        width={720}
-        style={{maxHeight:"40%"}}
+        style={{ maxHeight: "40%" }}
       >
         <div className="search_first_section">
-          <SearchButton/>
+          <SearchButton setOpen={setOpen} setNoDataFound={setNoDataFound} />
-          <span className='delete_icon' onClick={()=>setOpen(false)}><TiDeleteOutline/></span>
+          <span className='delete_icon' onClick={() => setOpen(false)}><TiDeleteOutline /></span>
+        </div>
+        <div className='not_found_section'>
+          {noDataFound && <Empty />}
         </div>
-
-
-          
       </Drawer>
     </>
   );
 };
 
 export default SearchWithDrawer;
-

src/Components/Home/BoseHeadphones.tsx

@@ -1,6 +1,5 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
-import { GoArrowUpRight } from "react-icons/go";
+import { RiArrowRightUpFill } from "react-icons/ri";
 
 const BoseHeadphones = () => {
   const {t} = useTranslation();
@@ -12,7 +11,7 @@ const BoseHeadphones = () => {
         <h1>{t("Smarter than your average headphones")}</h1>
         <button className="button">
           {t("Shop now")}
-          <GoArrowUpRight />
+          <RiArrowRightUpFill />
         </button>
       </div>
     </div>

src/Components/Home/CategoriesSlider.tsx

@@ -1,5 +1,5 @@
 // import Swiper core and required modules
-import { Navigation, Pagination, Scrollbar, A11y } from "swiper/modules";
+import { Navigation, A11y } from "swiper/modules";
 
 import { Swiper, SwiperSlide } from "swiper/react";
 
@@ -31,7 +31,7 @@ const CategoriesSlider = () => {
         navigation
         breakpoints={{
           320: {
-            slidesPerView: 2,
+            slidesPerView: 1,
           },
           480: {
             slidesPerView: 2,
@@ -40,13 +40,12 @@ const CategoriesSlider = () => {
             slidesPerView: 3,
           },
           768: {
-            slidesPerView: 4,
+            slidesPerView: 3,
           },
           1024: {
-            slidesPerView: 5,
+            slidesPerView: 4,
           },
         }}
-
       >
         {categories?.map((item: Category, index: number) => {
           return (

src/Components/Home/HeroSection.tsx

@@ -1,8 +1,13 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { Link, useNavigate } from "react-router-dom";
 
 const HeroSection = () => {
   const [t] = useTranslation();
+  const Navigate = useNavigate();
+  const handleNavigate = () =>{
+    Navigate('/categories');
+  }
   return (
     <div className="HeroSection">
       <div>
@@ -10,7 +15,7 @@ const HeroSection = () => {
 
         <div>
           {/* <h3>  $229.50 </h3> */}
-          <button className="button">{t("Buy Now")}</button>
+          <button className="button" onClick={handleNavigate}>{t("Buy Now")}</button>
         </div>
       </div>
       <span>

src/Components/Home/ProductSwiper.tsx

@@ -1,11 +1,10 @@
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/free-mode';
 import 'swiper/css/pagination';
 import ProductCard from './ProductCard';
 import { Product } from '../../types/item';
-import { useGetBaseProduct } from '../../api/baseProduct';
 import { A11y, Autoplay, Navigation, Pagination, Scrollbar } from 'swiper/modules';
 import { Spin } from 'antd';
 
@@ -13,12 +12,10 @@ import { Spin } from 'antd';
 
 const ProductSwiper = ({data,isLoading}:any) => {
   const language = localStorage.getItem('language') ;
-  console.log(language);
   
   const [swiperDirection, setSwiperDirection] = useState(language === "ar" ? "rtl" : "ltr");
   const swiperRef = useRef<any>(null);
 
-
   const BaseProducts = (data?.products as Product[]) || ([] as []);
 
   return (
@@ -29,7 +26,7 @@ const ProductSwiper = ({data,isLoading}:any) => {
         spaceBetween={50}
         breakpoints={{
           0: { slidesPerView: 1 },
-          400: { slidesPerView: 2 },
+          400: { slidesPerView: 1 },
           600: { slidesPerView: 2 },
           900: { slidesPerView: 4 },
           1200: { slidesPerView: 4 },

src/Components/Ui/HeaderLink.tsx

@@ -9,12 +9,12 @@ const HeaderLink = ({text,isMulti,extraText,extraLink}:THeaderLink) => {
 
   return (
     <div className='header_link'>
-        <Link to={"/"}>{t("Home")}</Link>
+        <Link to={"/"} className='first_link'>{t("Home")}</Link>
         <FaChevronRight/>
         {
             isMulti ?
             <>
-                <Link to={`/${extraLink}`}>{ t(extraText || "")}</Link>
+                <Link to={`/${extraLink}`} className='first_link'>{ t(extraText || "")}</Link>
                 <FaChevronRight/>
             </>
             : ""

src/Components/Utils/Search/SearchButton.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Select, Spin } from 'antd';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -6,7 +6,12 @@ import { LuSearch } from 'react-icons/lu';
 import { useGetBaseProduct } from '../../../api/baseProduct';
 import { Product } from '../../../types/item';
 
-const SearchButton: React.FC = () => {
+interface SearchButtonProps {
+  setOpen: (open: boolean) => void;
+  setNoDataFound: (noData: boolean) => void;
+}
+
+const SearchButton: React.FC<SearchButtonProps> = ({ setOpen, setNoDataFound }) => {
   const navigate = useNavigate();
   const { t } = useTranslation();
   const [searchParams] = useSearchParams();
@@ -17,9 +22,13 @@ const SearchButton: React.FC = () => {
   });
   const BaseProducts = (data?.products as Product[]) || [];
 
+  useEffect(() => {
+    setNoDataFound(!isLoading && BaseProducts.length <= 0);
+  }, [isLoading, BaseProducts, setNoDataFound]);
+
   const options = BaseProducts.map((product: any) => ({
     value: product.base_product_id,
-    label: product?.name as string, // Ensuring the label is a string
+    label: product?.name as string,
   }));
 
   const handleSearchChange = (value: string) => {
@@ -32,22 +41,21 @@ const SearchButton: React.FC = () => {
   const handleSelectChange = (value: number) => {
     const selectedProduct = BaseProducts.find(product => product.base_product_id === value);
     if (selectedProduct) {
+      setOpen(false);
       navigate(`/product/${selectedProduct.base_product_id}`);
     }
   };
 
   const filterOption = (input: string, option?: { label: string }) => {
     if (!option) return false;
-    const filteredData = option?.label.toLowerCase().includes(input.toLowerCase());
+    return option?.label.toLowerCase().includes(input.toLowerCase());
-
-    return filteredData;
   };
 
   return (
     <Select
       className='InputAutoComplete'
       suffixIcon={<LuSearch />}
-      placeholder={t('Search Product Name') as string} // Ensuring the placeholder is a string
+      placeholder={t('Search Product Name') as string}
       allowClear
       showSearch
       loading={isLoading}
@@ -56,9 +64,7 @@ const SearchButton: React.FC = () => {
       options={options}
       optionFilterProp="label"
       filterOption={filterOption}
-      notFoundContent={
+      notFoundContent={isLoading ? <Spin /> : null}
-        isLoading ? <Spin/> : "not found data" 
-      }
     />
   );
 };

src/Components/Utils/SearchBar/SearchBar.scss

@@ -35,7 +35,7 @@
   .InputAutoComplete{
     width: 78%;
     height: 48px;
-    margin-top: 0px;margin-bottom: 38px;
+    margin-top: 12px;margin-bottom: 38px;
     .ant-select-arrow{
       font-size: 32px;
       color: var(--DarkGray) !important; 
@@ -95,8 +95,13 @@
           }
         }
       }
-          
+      .not_found_section{
-          .ViewSearch{
+        @include Flex;
+        .Empty{
+          @include Flex; flex-direction: column;
+        }
+      }
+.ViewSearch{
   .ant-drawer .ant-drawer-content {
       height: 50% !important ;width: 100% ;
       min-height: 50% !important;
@@ -104,9 +109,9 @@
       border-radius: 5px 0 0 5px; 
   }
   
-          }
+}
 
-          .search_comp{
+.search_comp{
   display: flex;
   flex-direction: column;
-          }
+}

src/Pages/Faqs/CollapseGroup.tsx

@@ -1,11 +1,20 @@
 import type { CollapseProps } from "antd";
 import { Collapse } from "antd";
-import React from 'react'
+import React, { useState } from 'react';
 import { useTranslation } from "react-i18next";
-
+import classNames from 'classnames';
 
 const CollapseGroup = () => {
-  const {t} = useTranslation();
+  const { t } = useTranslation();
+  const [activeKey, setActiveKey] = useState<string[]>(["1"]);
+
+  const onChange = (key: string | string[]) => {
+    if (typeof key === 'string') {
+      setActiveKey([key]);
+    } else {
+      setActiveKey(key);
+    }
+  };
 
   const items: CollapseProps["items"] = [
     {
@@ -22,7 +31,7 @@ const CollapseGroup = () => {
       label: t("How can I engage with the magazine content on DM?"),
       children: (
         <p>
-          {t("You can actively engage with the magazine content by leaving comments and participating in the question-and-answer section. Feel free to share your thoughts, ask questions, and interact with  enthusiastsin the community")}.
+          {t("You can actively engage with the magazine content by leaving comments and participating in the question-and-answer section. Feel free to share your thoughts, ask questions, and interact with enthusiasts in the community")}.
         </p>
       ),
     },
@@ -49,7 +58,7 @@ const CollapseGroup = () => {
       label: t("How can I get assistance with my purchase or any other inquiries?"),
       children: (
         <p>
-          {t("If you need assistance with your purchase or have any questions, our dicated customer  is here to help. You  out to us through the contact page on our website, and we'll be happy to assist you promptly")}.
+          {t("If you need assistance with your purchase or have any questions, our dedicated customer support is here to help. You can reach out to us through the contact page on our website, and we'll be happy to assist you promptly")}.
         </p>
       ),
     },
@@ -57,12 +66,26 @@ const CollapseGroup = () => {
 
   return (
     <Collapse
+    className="faqs_collaps"
       defaultActiveKey={["1"]}
       expandIconPosition="right"
       bordered={false}
-      items={items}
+      activeKey={activeKey}
-    />
+      onChange={onChange}
+      items={items.map(item => ({
+        ...item,
+        label: (
+          <span
+            className={classNames({
+              'label-active': activeKey.includes(item.key as string)
+            })}
+          >
+            {item.label}
+          </span>
         )
-}
+      }))}
+    />
+  );
+};
 
-export default CollapseGroup
+export default CollapseGroup;

src/Pages/Product/Page.tsx

@@ -72,24 +72,13 @@ const Page = () => {
             <div>
 
               <span>
-                <h6>category</h6> <h5>{languageObject(product?.category?.name)}</h5>
+                <h6>{t("Category")}</h6> <h5>{languageObject(product?.category?.name)}</h5>
               </span>
               <span>
-                <h6>price</h6> <h5>{product?.price}</h5>
+                <h6>{t("Price")}</h6> <h5>{product?.price}</h5>
               </span>
               <span>
-                <h6>brand</h6> <h5>SAMSUNG</h5>
+                <h6>{t("Description")}</h6> <h5>{languageObject(product?.description)}</h5>
-              </span>
-            
-                {info?.map((item:any)=>{
-                  return (
-                    <span>
-                    <h6>item</h6> <h5>SAMSUNG</h5>
-                  </span>
-                  )
-                })}
-                  <span>
-                <h6>description</h6> <h5>{languageObject(product?.description)}</h5>
               </span>
             </div>
           </div>

src/Pages/Product/Similar.tsx

@@ -1,15 +1,17 @@
+import { useTranslation } from "react-i18next";
 import { useGetBaseProduct } from "../../api/baseProduct";
 import ProductSwiper from "../../Components/Home/ProductSwiper";
 
 const Similar = ({category_id}:any) => {
   const { data,isLoading } = useGetBaseProduct({
-    category_id:category_id
+    category_id:[category_id]
   });
+  const {t} = useTranslation();
   
   return (
     <div className="Products">
       <header>
-        <h1>Similar Products</h1>
+        <h1>{t("Similar Products")}</h1>
       </header>
       <main className="ProductCards">
         <ProductSwiper data={data} isLoading={isLoading} />

src/Styles/App/Mixing.scss

@@ -112,16 +112,17 @@
   }
 }
 
-@mixin Scrollbar($color) {
+@mixin Scrollbar() {
   scroll-behavior: smooth;
   scroll-padding: 10rem;
   &::-webkit-scrollbar {
     width: 8px;
+    height: 5px;
   }
 
   /* Handle */
   &::-webkit-scrollbar-thumb {
-    background-color: $color;
+    background-color: var(--primary);
     border-radius: 3px; /* Adjust border-radius as needed */
   }
 

src/Styles/App/className.scss

@@ -29,8 +29,8 @@
   justify-content: center;
   gap: 15px;
   padding-inline: 2vw;
-  font-size: 1vw;
+  font-size: 1.2vw;
-  font-weight: bold;
+  font-weight: 500;
 }
 
 @media screen and (max-width: 1000px) {

src/Styles/Auth/Auth.scss

@@ -5,24 +5,23 @@
       border-radius: var(--border-radius);
       width: fit-content;
       white-space: nowrap;
-      background: var(--secondary);
+      background: var(--white);
-      color: var(--text);
+      color: var(--primary);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 15px;
-      padding-inline: 1vw;
+      padding-inline: 10px;
-      padding-block: 20px;
       font-size: 1vw;
       &:hover{
           background: var(--DarkPrimary) !important;
       } 
    }
 }
-  .ant-drawer .ant-drawer-content {
+.ant-drawer .ant-drawer-content {
     display: flex; flex-direction: column;
     border-radius: 5px 0 0 5px; 
-  }
+}
 .auth_first_section{
   width: 100%;
   display: flex;justify-content: end;align-items: end;

src/Styles/Layout/Layout.scss

@@ -21,6 +21,13 @@
   font-size: 20px;
   letter-spacing: .7px;
   cursor: pointer;
+  .first_link{
+    transition: ease-in-out .1s;
+    &:hover{
+      color: var(--primary);
+      border-bottom: 2px solid var(--primary);
+    }
+  }
   .page_title_link{
       color: var(--primary);
       border-bottom: 2px solid var(--primary);
@@ -42,15 +49,9 @@
   }
 }
 
-@media screen and (max-width:600px) {
+a:hover{
-    .header_link{
-        font-size: 12px;
-    }
-}
-
- a:hover{
   color: var(--primary);
-}
+  }
   
 .Translate{
   border-color: transparent;
@@ -67,3 +68,20 @@
 .pointer{
   cursor: pointer;
 }
+.mode_image{
+  margin-inline: 5px;
+}
+@media screen and (max-width:600px) {
+    .header_link{
+        font-size: 12px;
+    }
+}
+@media screen and (max-width:450px) {
+  .Translate{
+    font-size: 14px !important;
+    margin-bottom: -5px !important;
+  }
+  .MenuButton{
+    font-size: 10px !important;
+  }
+}

src/Styles/Layout/NavBar.scss

@@ -2,7 +2,6 @@
     .navbar{
         position: absolute;
         border: none;
-       
     }
 }
 
@@ -11,38 +10,28 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  color: var(--secondary);
+  color: var(--text);
   padding-inline: 5.5vw;
   height: var(--navbar-height);
   width: 100%;
   z-index: 999;
   border-bottom: .8px solid var(--primary);
-  
-
   >img{
     width: 4.7vw;  
   }
   .navbar_links{
       display: flex;
       gap: 3vw;
-      
       .navbar_link{
           color: var(--text);
-          opacity: .5;
+        //   opacity: .5;
-        //   font-weight: bold;
-          
           cursor: pointer;
           &:hover{
               opacity: 1;
-
           }
-
-          
       }
       .active{
-
           opacity: 1;
-          border-bottom: .1vw solid var(--primary);
           color: var(--primary);
       }
   }
@@ -61,7 +50,6 @@
       align-items: center;
       >.icon_navbar{
           padding: 10px;
-        //   background: var(--primary);
           @include Flex;
           border-radius: 50%;
           width: 30px;
@@ -80,18 +68,18 @@
 
 @media screen and (max-width: 1000px) {
   .navbar{
-     >img{
+     img{
         width: 50px;
      }
       .navbar_links{
           display: none;
       }
       article{
-        //   display: none;
         gap: 10px;
       }
      .menu{
       display: inline;
+      margin-inline: 10px;
       svg{
           color: var(--text);
       }
@@ -103,7 +91,6 @@
         display: flex;
         flex-direction: column;
         gap: 10px; 
-      
         .menu_navbar_link{
             cursor: pointer;
         }
@@ -115,10 +102,11 @@
         article{
             gap: 2px !important;
             svg{
-                font-size: 10px !important;
+                font-size: 16px !important;
             }
             .icon_navbar{
-                    font-size: 10px !important;
+                width: 6px;
+                font-size: 14px !important;
             }
         }
     }

src/Styles/Page/About.scss

@@ -68,6 +68,9 @@
         color: var(--primary);
         font-size: 4vw;
       }
+      h6{
+        font-weight: 400 !important;
+      }
       p {
         color: var(--secondary);
         font-size: 2vw;

src/Styles/Page/Cart.scss

@@ -10,8 +10,6 @@
 
   .ant-drawer-body{
       height: 100% !important;
-      >div{
-      }
   }
   
   .Cart_Icon{
@@ -19,16 +17,9 @@
       height: 50px;
       border-radius: 50%;
       @include Flex;
-      svg{
-      }
   }
   .Badge_Button{
       margin-inline: 10px;
-    //   svg{
-    //       height: 30px;
-    //       color: var(--white);
-    //       font-size: 20px !important;
-    //   }
   }
   
   }
@@ -56,7 +47,6 @@
 }
 .ViewCart_Button{
   width: 100%;
-  margin-top: 20px;
   display: flex;justify-content: space-between;
   p{
       text-align: center;
@@ -73,12 +63,15 @@
         font-weight: 500;
         text-transform:capitalize ;
         &:hover{
-            background: var(--DarkPrimary);
+            background: var(--DarkPrimary) !important;
         }
   }    
 }
 
-
+.Drawer_Body{
+    height: 70vh;
+    display: flex; flex-direction: column; justify-content: space-between;align-items: center;
+}
 .ar{
     .cart_first_section{
         display: flex;justify-content: space-between;
@@ -92,7 +85,6 @@
                 }
             }
         }
-        
     }
 }
 @media screen and (max-width:650px) {
@@ -100,19 +92,16 @@
       span{
           font-size: 13px;
       }
-      
   }
   .ViewCart_Button{
       p{
           font-size: 12px;
       }
-      .cart_checkout_button_container{
     .cart_checkout_button{
         font-size: 15px;
         padding: 20px 10px;
     }
   }
-  }
 }
 
 .EmptyCard{
@@ -128,4 +117,7 @@
     p{
         font-size: max(1.5vw,15px);
     }
-}
+          .cart_checkout_button{
+              font-size: 15px;
+          }
+  }

src/Styles/Page/Categories.scss

@@ -18,18 +18,15 @@
     display: flex;
     flex-direction: column;
     background: var(--bg);
-    // gap: 20px;
     padding: 10px;
     > header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      // height: 40px;
       padding-inline: 16px;
-      // margin-inline: auto;
       h4 {
         font-size: 1.4vw;
-        font-weight: bold;
+        font-weight: 500;
         color: var(--text);
       }
       h6 {
@@ -57,7 +54,7 @@
       }
 
       .ant-collapse-item{
-
+        font-weight: 500 !important;
       }
     }
   }
@@ -109,7 +106,6 @@
     }
     > main {
       display: flex;
-      // justify-content: center;
       flex-wrap: wrap;
       gap: 40px;
     }
@@ -129,7 +125,16 @@
 .show_on_responsive {
   display: none;
 }
+.ant-collapse-header-text{
+  font-weight: 500 !important;
+}
 
+.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector{
+  padding: 0px 28px ;
+}
+.ant-pagination .ant-pagination-item a{
+  color: var(--white);
+}
 @media screen and (max-width: 1000px) {
   .show_on_responsive {
     display: inline;
@@ -161,7 +166,7 @@
         height: 40px;
         h4 {
           font-size: 1.7vw;
-          font-weight: bold;
+          font-weight: 500;
           color: var(--text);
         }
         h6 {

src/Styles/Page/Faqs.scss

@@ -1,18 +1,21 @@
-.faqs_container{
+.faqs_container {
-  display: flex;flex-direction: column;
+  display: flex;
+  flex-direction: column;
   width: 90vw;
   margin-inline: auto;
 
-  .faqs_image_section{
+  .faqs_image_section {
     width: 100%;
     margin-top: 50px;
     position: relative;
     z-index: 0;
-      img{
+
+    img {
       width: 100%;
       border-radius: 10px;
     }
-          h6{
+
+    h6 {
       position: absolute;
       top: 43%;
       left: 50px;
@@ -21,102 +24,60 @@
     }
   }
 
-  .faqs_body{
+  .faqs_body {
     width: 100%;
-      display: flex;justify-content: space-between;
+    display: flex;
-      margin-block:40px;
+    justify-content: space-between;
-      .left{
+    margin-block: 40px;
+
+    .left {
       width: 20%;
-        h1{
+
-          font-size: 27px;
+      h1 {
-          color: #0C0C0C;
+        font-size: 18px;
+        color: #0c0c0c;
         margin-bottom: 20px;
       }
-        p{
+
-          color: #0C0C0C;
+      p {
-          font-size: 20px;
+        color: #0c0c0c;
+        font-size: 16px;
+
         &:nth-child(2) {
           color: var(--primary) !important;
         }
       }
     }
 
-      .right{
+    .right {
       width: 80%;
     }
-      
   }
 }
 
-
+.ant-collapse [class^="ant-collapse"],
-
+.ant-collapse [class*=" ant-collapse"] {
-.ant-collapse [class^="ant-collapse"], .ant-collapse [class*=" ant-collapse"]{
   background: #fff;
 }
 
-.ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-header-text{
+.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-header-text {
   font-size: 1.8vw;
   font-weight: 500;
 }
 
-.ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-arrow svg{
+.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow svg {
   font-size: 1.7vw;
 }
 
-.ant-collapse .ant-collapse-content{
+.ant-collapse .ant-collapse-content {
-  p{
+  p {
     font-size: 1.4vw;
-      color: var(--primary);
+    color: var(--text);
     margin-bottom: 0;
   }
 }
 
-@media screen and (max-width:800px) {
+.label-active {
-  .faqs_container{
+  color: var(--primary);
-      .faqs_image_section{
+  transition: ease-in-out .4s;
-          margin-top: 30px;
-              h6{
-                  width: 50%;
-                  left: 20px;
-                  font-size: 3.5vw;
-              }
-      }
-
-      .faqs_body{
-          @include Flex; flex-direction: column;
-          width: 100%;
-          .left{
-              text-align: center;
-              width: 90%;  
-            h1{
-              font-size: 22px;
-              margin-bottom: 12px;
-            }
-            p{
-              font-size: 18px;
-          }
-      }
-          .right{
-              width: 95%;
-          }
-          
-      }
-  }
-  
-
-
-  .ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-header-text{
-      font-size: 20px;
-  }
-
-  .ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-arrow svg{
-      font-size: 15px;
-  }
-
-  .ant-collapse .ant-collapse-content{
-      p{
-          font-size: 16px;
-      }
-  }
-
 }

src/Styles/Page/Home.scss

@@ -27,7 +27,7 @@
       gap: 20px;
 
       h1 {
-        font-size: 4vw;
+        font-size: 4.4vw;
         font-weight: bold;
       }
 
@@ -72,7 +72,8 @@
       align-items: center;
 
       img {
-        width: 150px;
+        min-width: 140px;
+        max-width: 140px;
         height: 150px;
       }
     }
@@ -255,26 +256,25 @@
 
   .BatteryLife,
   .PerfectSound {
+    width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    justify-content: center;
+    img{
-
+      width: 54%;
-    > div {
+    }
-      width: 40%;
+     div {
+      width: 46%;
 
       h1 {
         font-size: 5vw;
-        font-weight: bold;
+        font-weight: 500;
       }
 
       p {
-        font-size: 1vw;
+        font-size: 1.24vw;
       }
     }
-
-    > img {
-    }
   }
 
   .PerfectSound {
@@ -288,6 +288,13 @@
       }
     }
   }
+  .BatteryLife{
+    width: 84%;
+    margin-inline: auto;
+    p{
+      font-size: 1.38vw !important;
+    }
+  }
 }
 
 @media screen and (max-width: 1000px) {
@@ -334,15 +341,15 @@
         > div {
           display: flex;
           flex-direction: column;
-          gap: 30px;
+          gap: 10px;
-          display: none;
+          // display: none;
 
           h3 {
             font-weight: bold;
           }
 
           button {
-            font-size: 30px;
+            font-size: 20px;
             padding-inline: 10%;
             border-radius: 2vw;
           }
@@ -351,7 +358,7 @@
 
       > span {
         img {
-          width: 50vw;
+          width: 50VW;
         }
       }
     }
@@ -374,7 +381,8 @@
         align-items: center;
 
         img {
-          width: 100px;
+          min-width: 100px;
+          max-width: 100px;
           height: 100px;
 
         }
@@ -495,7 +503,9 @@
       max-width: 100vw;
       flex-wrap: wrap;
       text-align: center;
-
+      img{
+        width: 100%;
+      }
       > div {
         width: 80%;
 
@@ -535,59 +545,22 @@
 
   .home_page{
      .HeroSection {
-    display: flex;
-    padding: 10% 6%;
-    position: relative;
-    width: 100%;
-    z-index: 99;
-    min-height: 100vh;
-
-    &::after {
-      position: absolute;
-      content: "";
-      right: auto;
-      scale: -1;
-      left: 0;
-      top: 0;
-      background: url("../../../public/Home/HeroShape.svg");
-      background-size: cover;
-      background-repeat: no-repeat;
-      width: 40%;
-      height: 100%;
-      z-index: -1;
-    }
-
     > div {
       display: flex;
       flex-direction: column;
-      width: 45%;
+      width: 60%;
-      gap: 20px;
 
       h1 {
-        font-size: 4vw;
+        font-size: 6vw;
         font-weight: bold;
       }
 
       > div {
         display: flex;
-        gap: 30px;
+        gap: 30px
-
-        h3 {
-          font-weight: bold;
-        }
-
-        button {
-          padding-inline: 10%;
-          border-radius: 2vw;
-        }
       }
     }
 
-    > span {
-      img {
-        width: 25vw;
-      }
-    }
   }
   }
  

src/Styles/Page/setting.scss

@@ -26,7 +26,7 @@
           width: 100%;
           .ant-tabs .ant-tabs-tab{
               justify-content: start;align-items: start;
-              font-size: 24px;
+              font-size: 20px;
               width: 100% !important;
               color: #717171;
               
@@ -36,7 +36,7 @@
                   justify-content: space-around !important;
                   margin-bottom: 50px;
                   .left{
-                      width: 36%;height: 500px !important;
+                      width: 36%;height: 400px !important;
                       .social_info{
                           .Single_info{
                               span{
@@ -80,7 +80,7 @@
                   }
                   .personl_data_form_button{
                       width: 20% !important;
-                      padding: 12px 0 !important;
+                      padding: 10px 0 !important;
                       background: var(--primary);
                       color: var(--white);
                       font-size: 20px;
@@ -101,11 +101,11 @@
                   }
               }
               .personl_data_form_button{
-                  width: 20% !important;
+                  width: 16% !important;
-                  padding: 12px 0 !important;
+                  padding: 5px 0 !important;
                   background: var(--primary);
                   color: var(--white);
-                  font-size: 20px;
+                  font-size: 16px;
                   border: none;
                   &:hover{
                       background: var(--DarkPrimary);
@@ -241,12 +241,6 @@
             display: flex;flex-direction: row-reverse;align-items: center;
         }
     }
-    .personl_data_form{
-        span{
-            // display: flex;align-items: end;justify-content: end;
-            // text-align: end;
-        }
-    }
 }
 
 @media screen and (max-width:1100px) {

src/Styles/components/Card.scss

@@ -5,21 +5,20 @@
   align-items: center;
   border-radius: 7px;
   .ant-card-body {
-    @include Flex;
+    display: flex;justify-content: space-between;align-items: center;
     padding: 10px 5px;
     width: 100%;
     box-shadow: 10px 10px 20px 15px rgba(0, 0, 0, 0.1);
     border-radius: 7px;
   }
   .Card_Img {
-    width: 40%;
+    width: 20%;
     img {
-      transform: translateX(-6px);
+      width: 80%;
-      width: 40%;
     }
   }
   .Card_Info {
-    width: 50%;
+    width: 70%;
     h5 {
       font-size: 14px;
       text-wrap: nowrap;
@@ -73,17 +72,16 @@
 @media screen and (max-width: 650px) {
   .CardItem {
     .ant-card-body {
-      @include Flex;
+      // @include Flex;
       padding: 10px 0px;
       width: 100%;
       box-shadow: 10px 10px 20px 15px rgba(0, 0, 0, 0.1);
       border-radius: 7px;
     }
     .Card_Img {
-      width: 30%;
+      width: 20%;
       img {
-        width: 100%;
+        width: 80%;
-        // transform: translateX(-6px);
       }
     }
     .Card_Info {

src/Styles/components/ProductCard.scss

@@ -11,7 +11,7 @@
   position: relative;
   height: fit-content;
   @include Shadow;
-
+  margin-inline: auto;
   h4 {
     font-size: 16px;
     margin-bottom: 0px;

src/Styles/components/antd.scss

@@ -15,3 +15,14 @@
 }.ant-collapse>.ant-collapse-item:last-child,.ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header{
     border-radius: 0;
 }
+
+.setting_container .ant-tabs > .ant-tabs-nav .ant-tabs-nav-list, .setting_container .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-list{
+  overflow-x: auto  ;
+  @include Scrollbar;
+}
+
+
+.ant-tabs-tab.ant-tabs-tab-active.ant-tabs-tab-disabled{
+       
+
+}

src/translate/ar.json

@@ -386,7 +386,8 @@
 "verify code": "تحقق من الرمز",
 "verify": "تحقق",
 "sub_categories": "الفئات الفرعية",
-"Clear_All": "مسح الكل"
+"Clear_All": "مسح الكل",
-
+"Track, return or purchase items":"تتبع أو إرجاع أو شراء العناصر",
+"Order History":"تاريخ الطلب"
 
 }

src/translate/ch.json

@@ -372,5 +372,7 @@
     "verify code": "验证代码",
     "verify": "验证",
     "sub_categories": "子类别",
-    "Clear_All": "清除所有"
+    "Clear_All": "清除所有",
+    "Track, return or purchase items":"跟踪、退货或购买物品",
+    "Order History":"订单历史"
 }

src/translate/en.json

@@ -371,8 +371,7 @@
 "Security settings":"Security settings",
 "See your favorites list here":"See your favorites list here",
 "Change Password":"Change Password",
-"Quite Comfort 35 wireless headphones II":"Quite Comfort 35 wireless headphones II",
+"Quite Comfort 35 wireless headphones II":"QuiteComfort 35 wireless headphones II",
-
 
 "Verify":"Verify",
 "Create Your Account":"Create Your Account",
@@ -384,7 +383,9 @@
 "verify":"Verify",
 "Login / Sign Up":"Login / Sign Up",
   "sub_categories": "sub categories",
-  "Clear_All": "Clear All"
+  "Clear_All": "Clear All",
+  "Track, return or purchase items":"Track, return or purchase items",
+  "Order History":"Order History"
   
 
 }