Enhanced UI: Dynamic navigation with icons, organized categories, responsive improvements, and lazy-loaded footer

src/PozoApp/Components/Footer.jsx

@@ -10,6 +10,7 @@ import { useDispatch } from "react-redux";
 import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { useNavigate } from "react-router-dom";
+import { sessionStore } from "../../Services/others";
 
 gsap.registerPlugin(ScrollTrigger);
 const subDirectory = import.meta.env.ENV_BASE_URL
@@ -17,58 +18,108 @@ const Footer = () => {
   const navigate = useNavigate();
   const logoRef = useRef(null);
   const productsRef = useRef(null);
+  const footerRef = useRef(null);
   const dispatch = useDispatch();
   const [email, setEmail] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [message, setMessage] = useState("");
   const [messageType, setMessageType] = useState("");
+  const [appList, setAppList] = useState([]);
+  const [isFooterVisible, setIsFooterVisible] = useState(false);
 
   const scrollToTop = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
 
   useEffect(() => {
-    fetchApplicationData();
+    // Intersection Observer for lazy loading
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          console.log("👁️ Footer visibility:", entry.isIntersecting);
+          if (entry.isIntersecting && !isFooterVisible) {
+            console.log("🎯 Footer is visible! Loading apps...");
+            setIsFooterVisible(true);
+            fetchApplicationData();
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+
+    if (footerRef.current) {
+      console.log("✅ Observer attached to footer");
+      observer.observe(footerRef.current);
+    } else {
+      console.log("❌ footerRef is null");
+    }
 
     // Logo animation
-    gsap.fromTo(
+    if (logoRef.current) {
-      logoRef.current,
+      gsap.fromTo(
-      { opacity: 0, scale: 0.8, rotation: -10 },
+        logoRef.current,
-      {
+        { opacity: 0, scale: 0.8, rotation: -10 },
-        opacity: 1,
+        {
-        scale: 1,
+          opacity: 1,
-        rotation: 0,
+          scale: 1,
-        duration: 1.2,
+          rotation: 0,
-        ease: "back.out(1.7)",
+          duration: 1.2,
-        scrollTrigger: {
+          ease: "back.out(1.7)",
-          trigger: logoRef.current,
+          scrollTrigger: {
-          start: "top 85%",
+            trigger: logoRef.current,
-          toggleActions: "play none none reverse",
+            start: "top 85%",
+            toggleActions: "play none none reverse",
+          },
         },
-      },
+      );
-    );
+    }
 
     // Products section animation
-    gsap.fromTo(
+    if (productsRef.current) {
-      productsRef.current,
+      gsap.fromTo(
-      { opacity: 0, y: 50 },
+        productsRef.current,
-      {
+        { opacity: 0, y: 50 },
-        opacity: 1,
+        {
-        y: 0,
+          opacity: 1,
-        duration: 1,
+          y: 0,
-        ease: "power2.out",
+          duration: 1,
-        scrollTrigger: {
+          ease: "power2.out",
-          trigger: productsRef.current,
+          scrollTrigger: {
-          start: "top 85%",
+            trigger: productsRef.current,
-          toggleActions: "play none none reverse",
+            start: "top 85%",
+            toggleActions: "play none none reverse",
+          },
         },
-      },
+      );
-    );
+    }
+
+    return () => {
+      if (footerRef.current) {
+        observer.unobserve(footerRef.current);
+      }
+    };
   }, []);
 
   const fetchApplicationData = async () => {
-    const res = await dispatch(getApplicationData())?.unwrap();
+    try {
-    console.log(res?.data?.data);
+      console.log("🔥 Footer: Fetching apps data...");
+      const res = await dispatch(getApplicationData())?.unwrap();
+      console.log("📦 Footer API Response:", res?.data);
+      if (res?.data?.statusCode === 1) {
+        const activeApps = res?.data?.data?.filter(app => app.ActiveStatus === "A") || [];
+        console.log("✅ Footer Active Apps:", activeApps.length, activeApps);
+        setAppList(activeApps);
+      }
+    } catch (error) {
+      console.error("❌ Error fetching apps:", error);
+    }
+  };
+
+  const redirectApp = (appName, appId) => {
+    sessionStore("AppId", appId);
+    sessionStore("AppName", appName);
+    navigate(`${subDirectory}${appName}`);
+    window.scrollTo(0, 0);
   };
 
   const handleSubscribe = async () => {
@@ -115,7 +166,7 @@ const Footer = () => {
 
   return (
     <>
-      <div className="Footer-Master">
+      <div className="Footer-Master" ref={footerRef}>
         <div className="footerLeft">
           <div className="logoDesc">
             {/* <img src={pozominilogo} alt="" width={75} ref={logoRef} /> */}
@@ -151,25 +202,42 @@ const Footer = () => {
         <div className="footerRight">
           <div className="footerProducts" ref={productsRef}>
             <div>Products</div>
-            <p>Restaurant</p>
+            {(() => {
-            <p>Bakery</p>
+              console.log("🔍 Rendering Footer Products:");
-            <p>Dairy Delights</p>
+              console.log("  - isFooterVisible:", isFooterVisible);
-            <p>Electrical, Electronics and Computers</p>
+              console.log("  - appList.length:", appList.length);
-            <p>Mobile & Accessories</p>
+              console.log("  - Showing:", isFooterVisible && appList.length > 0 ? "Dynamic" : "Static");
-            <p>Groceries</p>
+              return null;
-            <p>Cement</p>
+            })()}
-            <p>Lifestyle and Fashion</p>
+            {isFooterVisible && appList.length > 0 ? (
-            <p>Fashion Jewellery</p>
+              appList.slice(0, 15).map((app) => (
-            <p>Footwear</p>
+                <p 
-            <p>Salon, Spa and Beauty Parlour</p>
+                  key={app.AppId}
-            <p>Beauty and Cosmetics shop</p>
+                  onClick={() => redirectApp(app.AppName?.toLowerCase(), app.AppId)}
-            <p>Fitness</p>
+                  style={{ cursor: 'pointer' }}
-            <p>Departmental Stores</p>
+                >
-            <p>Wholesale</p>
+                  {app.AppName}
-            <p>Manufacturer</p>
+                </p>
-            <p>Save Me</p>
+              ))
-            <p>Smart Parking</p>
+            ) : (
-            <p>Boating</p>
+              <>
+                <p>Restaurant</p>
+                <p>Bakery</p>
+                <p>Dairy Delights</p>
+                <p>Electrical, Electronics and Computers</p>
+                <p>Mobile & Accessories</p>
+                <p>Groceries</p>
+                <p>Cement</p>
+                <p>Lifestyle and Fashion</p>
+                <p>Fashion Jewellery</p>
+                <p>Footwear</p>
+                <p>Salon, Spa and Beauty Parlour</p>
+                <p>Beauty and Cosmetics shop</p>
+                <p>Fitness</p>
+                <p>Departmental Stores</p>
+                <p>Wholesale</p>
+              </>
+            )}
           </div>
 
           <div className="footerContact">

src/PozoApp/Components/IndustriesList.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import "../Styles/IndustriesList.scss";
+import { MdRestaurant, MdSpa, MdCheckroom, MdDevices, MdStorefront, MdBusiness, MdMoreHoriz, MdLocalHospital, MdFactory, MdLocalShipping, MdTheaters } from "react-icons/md";
 
 const IndustriesList = ({
   industryRef,
@@ -15,6 +16,60 @@ const IndustriesList = ({
     e.stopPropagation();
   };
 
+  // Categorize consumer apps into sub-groups
+  const categorizeConsumerApps = (apps) => {
+    const categories = {
+      foodBeverages: [],
+      wellness: [],
+      fashion: [],
+      electronics: [],
+      grocery: [],
+      services: [],
+      others: []
+    };
+
+    apps.forEach(app => {
+      const name = app.AppName?.toLowerCase() || "";
+      
+      // Food & Beverages - comprehensive matching
+      if (/(bakery|restaurant|dairy|food|cafe|coffee|ice|pickle|pozoresto|resto|resto|eatery|diner|bistro|pizz|burger|juice|sweet|snack)/i.test(name)) {
+        categories.foodBeverages.push(app);
+      } 
+      // Wellness & Beauty
+      else if (/(salon|spa|beauty|cosmetics|fitness|gym|yoga|wellness|massage|parlour|parlor)/i.test(name)) {
+        categories.wellness.push(app);
+      } 
+      // Fashion & Lifestyle
+      else if (/(fashion|jewellery|jewelry|footwear|lifestyle|apparel|textile|cloth|garment|shoe|sandal|accessory)/i.test(name)) {
+        categories.fashion.push(app);
+      } 
+      // Electronics & Tech
+      else if (/(electronic|mobile|computer|appliance|laptop|phone|device|gadget|tech)/i.test(name)) {
+        categories.electronics.push(app);
+      } 
+      // Grocery & Retail
+      else if (/(grocery|departmental|wholesale|supermarket|mart|retail|store)/i.test(name)) {
+        categories.grocery.push(app);
+      } 
+      // Professional Services
+      else if (/(stationery|xerox|print|coaching|cement|tuition|education|training|class)/i.test(name)) {
+        categories.services.push(app);
+      } 
+      // Others
+      else {
+        categories.others.push(app);
+      }
+    });
+
+    return categories;
+  };
+
+  const consumerApps = AppCategory?.filter((app) =>
+    /(Consumer)/i.test(app.CategoryName)
+  ) || [];
+
+  const categorized = categorizeConsumerApps(consumerApps);
+
   return (
     <div
       ref={industryRef}
@@ -24,29 +79,115 @@ const IndustriesList = ({
       {AppCategory?.some((app) => /(Consumer)/i.test(app.CategoryName)) && (
         <>
           <div className="IndustriesOne">
-            <div>
+            {/* Main heading - Don't touch */}
+            <div className="main-heading">
               Retail Universe: Grocery, <br /> Wellness, Fashion & More
             </div>
-            {AppCategory?.filter((app) =>
+
-              /(Consumer)/i.test(app.CategoryName),
+            {/* Food & Beverages */}
-            ).map((app) => (
+            {categorized.foodBeverages.length > 0 && (
-              <p
+              <>
-                key={app.AppId}
+                <div className="sub-category"><MdRestaurant /> Food & Beverages</div>
-                onClick={() =>
+                {categorized.foodBeverages.map((app) => (
-                  redirectApp(app.AppName?.toLowerCase(), app.AppId)
+                  <p
-                }
+                    key={app.AppId}
-              >
+                    onClick={() => redirectApp(app.AppName?.toLowerCase(), app.AppId)}
-                {app.AppName}
+                  >
-              </p>
+                    {app.AppName}
-              // <p
+                  </p>
-              //   key={app.AppId}
+                ))}
-              //   onClick={() =>
+              </>
-              //     redirectApp(app.AppName?.toLowerCase(), app.AppId)
+            )}
-              //   }
+
-              // >
+            {/* Wellness */}
-              //   {app.AppName}
+            {categorized.wellness.length > 0 && (
-              // </p>
+              <>
-            ))}
+                <div className="sub-category"><MdSpa /> Wellness & Beauty</div>
+                {categorized.wellness.map((app) => (
+                  <p
+                    key={app.AppId}
+                    onClick={() => redirectApp(app.AppName?.toLowerCase(), app.AppId)}
+                  >
+                    {app.AppName}
+                  </p>
+                ))}
+              </>
+            )}
+
+            {/* Fashion */}
+            {categorized.fashion.length > 0 && (
+              <>
+                <div className="sub-category"><MdCheckroom /> Fashion & Lifestyle</div>
+                {categorized.fashion.map((app) => (
+                  <p
+                    key={app.AppId}
+                    onClick={() => redirectApp(app.AppName?.toLowerCase(), app.AppId)}
+                  >
+                    {app.AppName}
+                  </p>
+                ))}
+              </>
+            )}
+
+            {/* Electronics */}
+            {categorized.electronics.length > 0 && (
+              <>
+                <div className="sub-category"><MdDevices /> Electronics & Tech</div>
+                {categorized.electronics.map((app) => (
+                  <p
+                    key={app.AppId}
+                    onClick={() => redirectApp(app.AppName?.toLowerCase(), app.AppId)}
+                  >
+                    {app.AppName}
+                  </p>
+                ))}
+              </>
+            )}
+
+            {/* Grocery */}
+            {categorized.grocery.length > 0 && (
+              <>
+                <div className="sub-category"><MdStorefront /> Grocery & Retail</div>
+                {categorized.grocery.map((app) => (
+                  <p
+                    key={app.AppId}
+                    onClick={() => redirectApp(app.AppName?.toLowerCase(), app.AppId)}
+                  >
+                    {app.AppName}
+                  </p>
+                ))}
+              </>
+            )}
+
+            {/* Services */}
+            {categorized.services.length > 0 && (
+              <>
+                <div className="sub-category"><MdBusiness /> Professional Services</div>
+                {categorized.services.map((app) => (
+                  <p
+                    key={app.AppId}
+                    onClick={() => redirectApp(app.AppName?.toLowerCase(), app.AppId)}
+                  >
+                    {app.AppName}
+                  </p>
+                ))}
+              </>
+            )}
+
+            {/* Others */}
+            {categorized.others.length > 0 && (
+              <>
+                <div className="sub-category"><MdMoreHoriz /> More Industries</div>
+                {categorized.others.map((app) => (
+                  <p
+                    key={app.AppId}
+                    onClick={() => redirectApp(app.AppName?.toLowerCase(), app.AppId)}
+                  >
+                    {app.AppName}
+                  </p>
+                ))}
+              </>
+            )}
           </div>
           {AppCategory?.some((app) =>
             /(manufacturing|healthcare|pharma)/i.test(app.CategoryName),
@@ -59,21 +200,48 @@ const IndustriesList = ({
       ) && (
           <>
             <div className="IndustriesTwo">
-              <div>
+              {/* Main heading - Don't touch */}
+              <div className="main-heading">
                 Manufacturing, Healthcare & <br /> Pharma
               </div>
+
+              {/* Healthcare */}
               {AppCategory?.filter((app) =>
-                /(manufacturing|healthcare|pharma)/i.test(app.CategoryName),
+                (/(healthcare|pharma)/i.test(app.CategoryName) || /(health|optical)/i.test(app.AppName))
-              ).map((app) => (
+              ).length > 0 && (
-                <p
+                <>
-                  key={app.AppId}
+                  <div className="sub-category"><MdLocalHospital /> Healthcare & Pharma</div>
-                  onClick={() =>
+                  {AppCategory?.filter((app) =>
-                    redirectApp(app.AppName?.toLowerCase(), app.AppId)
+                    (/(healthcare|pharma)/i.test(app.CategoryName) || /(health|optical)/i.test(app.AppName))
-                  }
+                  ).map((app) => (
-                >
+                    <p
-                  {app.AppName}
+                      key={app.AppId}
-                </p>
+                      onClick={() => redirectApp(app.AppName?.toLowerCase(), app.AppId)}
-              ))}
+                    >
+                      {app.AppName}
+                    </p>
+                  ))}
+                </>
+              )}
+
+              {/* Manufacturing */}
+              {AppCategory?.filter((app) =>
+                (/(manufacturing)/i.test(app.CategoryName) || /(manufacturer)/i.test(app.AppName))
+              ).length > 0 && (
+                <>
+                  <div className="sub-category"><MdFactory /> Manufacturing</div>
+                  {AppCategory?.filter((app) =>
+                    (/(manufacturing)/i.test(app.CategoryName) || /(manufacturer)/i.test(app.AppName))
+                  ).map((app) => (
+                    <p
+                      key={app.AppId}
+                      onClick={() => redirectApp(app.AppName?.toLowerCase(), app.AppId)}
+                    >
+                      {app.AppName}
+                    </p>
+                  ))}
+                </>
+              )}
             </div>
             {AppCategory?.some((app) =>
               /(transportation|logistics|hospitality|entertainment)/i.test(
@@ -89,23 +257,50 @@ const IndustriesList = ({
         ),
       ) && (
           <div className="IndustriesThree" style={{ borderRight: "unset" }}>
-            <div>
+            {/* Main heading - Don't touch */}
+            <div className="main-heading">
               Transportation, Logistics <br />
               Hospitality and <br />
               Entertainment
             </div>
+
+            {/* Transportation */}
             {AppCategory?.filter((app) =>
-              /(transportation|logistics|hospitality|entertainment)/i.test(
+              (/(transportation|logistics)/i.test(app.CategoryName) || /(parking|boating)/i.test(app.AppName))
-                app.CategoryName,
+            ).length > 0 && (
-              ),
+              <>
-            ).map((app) => (
+                <div className="sub-category"><MdLocalShipping /> Transportation & Logistics</div>
-              <p
+                {AppCategory?.filter((app) =>
-                key={app.AppId}
+                  (/(transportation|logistics)/i.test(app.CategoryName) || /(parking|boating)/i.test(app.AppName))
-                onClick={() => redirectApp(app.AppName?.toLowerCase(), app.AppId)}
+                ).map((app) => (
-              >
+                  <p
-                {app.AppName}
+                    key={app.AppId}
-              </p>
+                    onClick={() => redirectApp(app.AppName?.toLowerCase(), app.AppId)}
-            ))}
+                  >
+                    {app.AppName}
+                  </p>
+                ))}
+              </>
+            )}
+
+            {/* Hospitality */}
+            {AppCategory?.filter((app) =>
+              (/(hospitality|entertainment)/i.test(app.CategoryName) || /(hotel|resort)/i.test(app.AppName))
+            ).length > 0 && (
+              <>
+                <div className="sub-category"><MdTheaters /> Hospitality & Entertainment</div>
+                {AppCategory?.filter((app) =>
+                  (/(hospitality|entertainment)/i.test(app.CategoryName) || /(hotel|resort)/i.test(app.AppName))
+                ).map((app) => (
+                  <p
+                    key={app.AppId}
+                    onClick={() => redirectApp(app.AppName?.toLowerCase(), app.AppId)}
+                  >
+                    {app.AppName}
+                  </p>
+                ))}
+              </>
+            )}
           </div>
         )}
     </div>

src/PozoApp/Components/Navbar.jsx

@@ -21,14 +21,14 @@ const Navbar = ({
   AppCategory,
   industryRef,
   closingIndustry,
-  setClosingIndustry = () => {},
+  setClosingIndustry = () => { },
   industry,
-  setIndustry = () => {},
+  setIndustry = () => { },
   companyRef,
   closingCompany,
-  setClosingCompany = () => {},
+  setClosingCompany = () => { },
   company,
-  setCompany = () => {},
+  setCompany = () => { },
   demoModal,
   handleDemoModal,
   handleDemoModalClose,
@@ -274,8 +274,8 @@ const Navbar = ({
           background: responsiveMenu
             ? "#000000ff" // when menu is open
             : isScrolled
-            ? "#ffffff" // when scrolled
+              ? "#ffffff" // when scrolled
-            : "transparent",
+              : "transparent",
           color: isScrolled ? "#000000ff" : "#ffffffff",
           padding: isScrolled ? "0.5rem 1.6rem" : "1rem 1.6rem",
           boxShadow: isScrolled
@@ -284,16 +284,15 @@ const Navbar = ({
         }}
       >
         <div
-          className={`appNameLeft ${
+          className={`appNameLeft ${responsiveMenu ? "responsiveMenuOpen" : ""
-            responsiveMenu ? "responsiveMenuOpen" : ""
+            }`}
-          }`}
           onClick={navigateAndScrollToTop}
           style={{
             color: responsiveMenu
               ? "#ffffff" // when responsiveMenu is true
               : isScrolled
-              ? "#000" // when scrolled
+                ? "#000" // when scrolled
-              : "#fff", // default
+                : "#fff", // default
           }}
         >
           PozoApp
@@ -421,44 +420,12 @@ const Navbar = ({
                   )}
                 </span>
                 {industryRes && (
-                  // <div className='industryRes'>
-                  //     <div className="IndustriesOneRes">
-                  //         <div>Retail Universe: Grocery, <br />Wellness, Fashion & More</div>
-                  //         <p>Restaurant</p>
-                  //         <p>Bakery</p>
-                  //         <p>Dairy Delights</p>
-                  //         <p>Lifestyle and Fashion</p>
-                  //         <p>Fashion Jewellery</p>
-                  //         <p>Footwear</p>
-                  //         <p>Electrical, Electronics and Computers</p>
-                  //         <p>Mobile & Accessories</p>
-                  //         <p>Groceries</p>
-                  //         <p>Departmental Stores</p>
-                  //         <p>Salon, Spa and Beauty Parlour</p>
-                  //         <p>Beauty and Cosmetics shop</p>
-                  //         <p>Fitness</p>
-                  //         <p>Cement</p>
-                  //         <p>Wholesale <span>NEW</span></p>
-                  //     </div>
-                  //     <hr />
-                  //     <div className="IndustriesTwoRes" >
-                  //         <div>Manufacturing, Healthcare & <br /> Pharma</div>
-                  //         <p>Manufacturer</p>
-                  //         <p>Save Me <span>BETA</span></p>
-                  //     </div>
-                  //     <hr />
-                  //     <div className="IndustriesThreeRes" style={{ borderRight: "unset" }}>
-                  //         <div>Transportation, Logistics <br />
-                  //             Hospitality and <br />
-                  //             Entertainment
-                  //         </div>
-                  //         <p>Smart Parking</p>
-                  //         <p>Boating</p>
-                  //     </div>
-                  //     <hr />
-                  // </div>
                   <>
-                    <IndustriesList />
+                    <IndustriesList
+                      closingIndustry={closingIndustry}
+                      AppCategory={AppCategory}
+                      redirectApp={redirectApp}
+                    />
                   </>
                 )}
                 {/* <span onClick={scrollToSection} className="indusOpen">

src/PozoApp/Styles/Navbar.scss

@@ -15,6 +15,7 @@
         align-items: center;
         gap: 16px;
         position: relative;
+
         @media (max-width: 768px) {
             display: none;
         }
@@ -28,6 +29,7 @@
             gap: 3px;
             cursor: pointer;
         }
+
         svg {
             margin-top: 4px;
             display: flex;
@@ -108,6 +110,7 @@
                 transform: translate(0, 0);
             }
         }
+
         sup {
             font-size: 10px;
             background-color: #e68200;
@@ -124,6 +127,7 @@
         cursor: pointer;
         letter-spacing: 0.2px;
         -webkit-text-stroke: 0.2px;
+
         @media (max-width: 768px) {
             z-index: 50;
             position: relative;
@@ -162,6 +166,7 @@
         display: none;
     }
 }
+
 .IndustriesOne,
 .IndustriesTwo,
 .IndustriesThree {
@@ -205,7 +210,8 @@
         }
     }
 
-    div {
+    // Main heading - Original style (DON'T CHANGE)
+    .main-heading {
         font-size: 22px;
         color: #1f1f1f;
         font-family: "NeueMontreal";
@@ -218,6 +224,54 @@
         }
     }
 
+    // Sub-category titles - Simple & clean with icons
+    .sub-category {
+        font-size: 13px;
+        color: #555;
+        font-family: "NeueMontreal";
+        font-weight: 500;
+        margin-top: 1rem;
+        margin-bottom: 0.4rem;
+        padding: 0;
+        border: none;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        svg {
+            font-size: 16px;
+            color: #3588fd;
+            flex-shrink: 0;
+        }
+
+        &:first-of-type {
+            margin-top: 0;
+        }
+
+        @media (max-width: 768px) {
+            font-size: 12px;
+
+            svg {
+                font-size: 14px;
+            }
+        }
+    }
+
+    // Legacy div support (if no class specified)
+    div:not(.main-heading):not(.sub-category) {
+        font-size: 22px;
+        color: #1f1f1f;
+        font-family: "NeueMontreal";
+        font-weight: 500;
+        -webkit-text-stroke-width: 0.1px;
+        margin-bottom: 1rem;
+
+        @media (max-width: 768px) {
+            font-size: 16px;
+        }
+    }
+
+    // App list items - Original simple style with indent
     p {
         font-size: 14px;
         color: #1f1f1f;
@@ -226,10 +280,12 @@
         font-weight: 400;
         transition: all 0.3s ease;
         margin-bottom: 2px;
+        padding-left: 22px;
 
         &:hover {
             color: #3588fd;
         }
+
         span {
             color: #ffffff;
             background-color: rgba(255, 115, 0, 0.966);
@@ -250,6 +306,7 @@
     z-index: 100;
     position: relative;
     display: none;
+
     @media (max-width: 768px) {
         display: flex;
     }
@@ -274,10 +331,12 @@
         &.closing {
             animation: fadeOutMenu 0.4s ease;
         }
+
         @media (max-width: 1300px) {
             top: 8%;
         }
     }
+
     .ResNavHeader {
         width: 100%;
         display: flex;
@@ -285,12 +344,14 @@
         align-items: center;
         justify-content: space-between;
     }
+
     .ResNavHeaderClose {
         display: flex;
         align-items: center;
         font-family: "NeueMontreal";
         gap: 4px;
         cursor: pointer;
+
         div {
             display: flex;
             align-items: center;
@@ -298,6 +359,7 @@
             font-size: 14px;
         }
     }
+
     .ResnavbarOption {
         width: 100%;
         font-family: "NeueMontreal";
@@ -306,6 +368,7 @@
         display: flex;
         flex-direction: column;
         gap: 1rem;
+
         .indusOpen {
             font-size: 16px;
             display: flex;
@@ -316,7 +379,38 @@
             border-bottom: 2px dashed #868686;
             padding-bottom: 10px;
         }
+
+        @media (max-width: 768px) {
+            .IndustriesTypes {
+                position: relative;
+                top: unset;
+                left: unset;
+                width: 100%;
+                background-color: #383838;
+                color: #fff;
+                overflow: auto;
+                isolation: unset;
+                touch-action: unset;
+                height: 70vh;
+                box-shadow: unset !important;
+            }
+
+            .IndustriesOne,
+            .IndustriesTwo,
+            .IndustriesThree {
+                border-right: none;
+                height: max-content;
+                max-height: 40vh;
+                margin-bottom: 2rem;
+
+                >div,
+                >p {
+                    color: #fff;
+                }
+            }
+        }
     }
+
     .industryRes {
         background-color: #383838;
         color: #fff;
@@ -339,12 +433,14 @@
             font-size: 16px;
             margin: 10px 0;
         }
+
         p {
             font-family: "NeueMontreal";
             font-size: 14px;
             margin-bottom: 4px;
             color: #cecece;
             cursor: pointer;
+
             &:hover {
                 color: #3588fd;
             }
@@ -358,6 +454,7 @@
             margin-bottom: 4px;
             cursor: pointer;
             transition: all 0.2s;
+
             &:hover {
                 color: #3588fd;
             }
@@ -372,6 +469,7 @@
         font-family: "NeueMontreal";
         margin-top: 3rem;
         width: 100%;
+
         sup {
             font-size: 10px;
             background-color: #e68200;
@@ -448,12 +546,14 @@
         }
     }
 }
+
 @keyframes fadeInMenu {
     from {
         opacity: 0;
         // transform: translateY(-50px);
         height: 0vh;
     }
+
     to {
         opacity: 1;
         // transform: translateY(0);
@@ -467,18 +567,21 @@
         // transform: translateY(0);
         height: 100vh;
     }
+
     to {
         opacity: 0;
         // transform: translateY(-50px);
         height: 0vh;
     }
 }
+
 @keyframes fadeInIndustry {
     from {
         opacity: 0;
         transform: translateY(-10px);
         height: 0vh;
     }
+
     to {
         opacity: 1;
         transform: translateY(0);
@@ -492,18 +595,21 @@
         height: 80vh;
         transform: translateY(0);
     }
+
     to {
         opacity: 0;
         height: 0vh;
         transform: translateY(-10px);
     }
 }
+
 @keyframes fadeInCompany {
     from {
         opacity: 0;
         transform: translateY(-10px);
         height: 0px;
     }
+
     to {
         opacity: 1;
         transform: translateY(0);
@@ -517,6 +623,7 @@
         height: 250px;
         transform: translateY(0);
     }
+
     to {
         opacity: 0;
         height: 0px;
@@ -529,6 +636,7 @@
         opacity: 0;
         transform: translateY(-10px);
     }
+
     to {
         opacity: 1;
         transform: translateY(0);
@@ -540,6 +648,7 @@
         opacity: 1;
         transform: translateY(0);
     }
+
     to {
         opacity: 0;
         transform: translateY(-10px);
@@ -551,6 +660,7 @@
         opacity: 0;
         transform: translateY(-10px);
     }
+
     to {
         opacity: 1;
         transform: translateY(0);
@@ -562,6 +672,7 @@
         opacity: 1;
         transform: translateY(0);
     }
+
     to {
         opacity: 0;
         transform: translateY(-10px);
@@ -573,6 +684,7 @@
         opacity: 0;
         transform: translateX(100%);
     }
+
     to {
         opacity: 1;
         transform: translateX(0);
@@ -584,6 +696,7 @@
         opacity: 1;
         transform: translateX(0);
     }
+
     to {
         opacity: 0;
         transform: translateX(100%);
@@ -615,6 +728,7 @@
         cursor: pointer;
         letter-spacing: 0.2px;
         transition: all 0.3s ease;
+
         &:hover {
             color: #3588fd;
         }

src/PozoApp/Styles/OverView.scss

@@ -11,7 +11,7 @@
 
     @media (max-width: 500px) {
         height: max-content !important;
-        padding-bottom: 3rem;
+        padding-bottom: 5rem;
     }
 
     .bg-video {
@@ -127,21 +127,9 @@
         gap: 1.2rem;
         justify-content: flex-end;
         flex: 1;
-
-        @media (min-width: 1920px) {
-            gap: 1.5rem;
-        }
-
-        @media (max-width: 900px) {
-            gap: 1.3rem;
-        }
-
         @media (max-width: 600px) {
             gap: 1rem;
-        }
+             padding:16px 0;
-
-        @media (max-width: 400px) {
-            gap: 0.9rem;
         }
     }
 
@@ -568,15 +556,6 @@
     }
 }
 
-// Mobile (401px - 600px)
-@media (max-width: 600px) and (min-width: 401px) {
-    .OverView-Master {
-        height: auto !important;
-        min-height: 100vh;
-        padding-bottom: 2rem;
-    }
-}
-
 // Small Mobile (320px - 400px)
 @media (max-width: 400px) {
     .OverView-Master {