diff --git a/src/PozoApp/Components/Footer.jsx b/src/PozoApp/Components/Footer.jsx index 89d3e27..79ef874 100644 --- a/src/PozoApp/Components/Footer.jsx +++ b/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( - logoRef.current, - { opacity: 0, scale: 0.8, rotation: -10 }, - { - opacity: 1, - scale: 1, - rotation: 0, - duration: 1.2, - ease: "back.out(1.7)", - scrollTrigger: { - trigger: logoRef.current, - start: "top 85%", - toggleActions: "play none none reverse", + if (logoRef.current) { + gsap.fromTo( + logoRef.current, + { opacity: 0, scale: 0.8, rotation: -10 }, + { + opacity: 1, + scale: 1, + rotation: 0, + duration: 1.2, + ease: "back.out(1.7)", + scrollTrigger: { + trigger: logoRef.current, + start: "top 85%", + toggleActions: "play none none reverse", + }, }, - }, - ); + ); + } // Products section animation - gsap.fromTo( - productsRef.current, - { opacity: 0, y: 50 }, - { - opacity: 1, - y: 0, - duration: 1, - ease: "power2.out", - scrollTrigger: { - trigger: productsRef.current, - start: "top 85%", - toggleActions: "play none none reverse", + if (productsRef.current) { + gsap.fromTo( + productsRef.current, + { opacity: 0, y: 50 }, + { + opacity: 1, + y: 0, + duration: 1, + ease: "power2.out", + scrollTrigger: { + trigger: productsRef.current, + 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(); - console.log(res?.data?.data); + try { + 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 ( <> -
+
{/* */} @@ -151,25 +202,42 @@ const Footer = () => {
Products
-

Restaurant

-

Bakery

-

Dairy Delights

-

Electrical, Electronics and Computers

-

Mobile & Accessories

-

Groceries

-

Cement

-

Lifestyle and Fashion

-

Fashion Jewellery

-

Footwear

-

Salon, Spa and Beauty Parlour

-

Beauty and Cosmetics shop

-

Fitness

-

Departmental Stores

-

Wholesale

-

Manufacturer

-

Save Me

-

Smart Parking

-

Boating

+ {(() => { + console.log("🔍 Rendering Footer Products:"); + console.log(" - isFooterVisible:", isFooterVisible); + console.log(" - appList.length:", appList.length); + console.log(" - Showing:", isFooterVisible && appList.length > 0 ? "Dynamic" : "Static"); + return null; + })()} + {isFooterVisible && appList.length > 0 ? ( + appList.slice(0, 15).map((app) => ( +

redirectApp(app.AppName?.toLowerCase(), app.AppId)} + style={{ cursor: 'pointer' }} + > + {app.AppName} +

+ )) + ) : ( + <> +

Restaurant

+

Bakery

+

Dairy Delights

+

Electrical, Electronics and Computers

+

Mobile & Accessories

+

Groceries

+

Cement

+

Lifestyle and Fashion

+

Fashion Jewellery

+

Footwear

+

Salon, Spa and Beauty Parlour

+

Beauty and Cosmetics shop

+

Fitness

+

Departmental Stores

+

Wholesale

+ + )}
diff --git a/src/PozoApp/Components/IndustriesList.jsx b/src/PozoApp/Components/IndustriesList.jsx index b980ac7..da6d5c7 100644 --- a/src/PozoApp/Components/IndustriesList.jsx +++ b/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 (
/(Consumer)/i.test(app.CategoryName)) && ( <>
-
+ {/* Main heading - Don't touch */} +
Retail Universe: Grocery,
Wellness, Fashion & More
- {AppCategory?.filter((app) => - /(Consumer)/i.test(app.CategoryName), - ).map((app) => ( -

- redirectApp(app.AppName?.toLowerCase(), app.AppId) - } - > - {app.AppName} -

- //

- // redirectApp(app.AppName?.toLowerCase(), app.AppId) - // } - // > - // {app.AppName} - //

- ))} + + {/* Food & Beverages */} + {categorized.foodBeverages.length > 0 && ( + <> +
Food & Beverages
+ {categorized.foodBeverages.map((app) => ( +

redirectApp(app.AppName?.toLowerCase(), app.AppId)} + > + {app.AppName} +

+ ))} + + )} + + {/* Wellness */} + {categorized.wellness.length > 0 && ( + <> +
Wellness & Beauty
+ {categorized.wellness.map((app) => ( +

redirectApp(app.AppName?.toLowerCase(), app.AppId)} + > + {app.AppName} +

+ ))} + + )} + + {/* Fashion */} + {categorized.fashion.length > 0 && ( + <> +
Fashion & Lifestyle
+ {categorized.fashion.map((app) => ( +

redirectApp(app.AppName?.toLowerCase(), app.AppId)} + > + {app.AppName} +

+ ))} + + )} + + {/* Electronics */} + {categorized.electronics.length > 0 && ( + <> +
Electronics & Tech
+ {categorized.electronics.map((app) => ( +

redirectApp(app.AppName?.toLowerCase(), app.AppId)} + > + {app.AppName} +

+ ))} + + )} + + {/* Grocery */} + {categorized.grocery.length > 0 && ( + <> +
Grocery & Retail
+ {categorized.grocery.map((app) => ( +

redirectApp(app.AppName?.toLowerCase(), app.AppId)} + > + {app.AppName} +

+ ))} + + )} + + {/* Services */} + {categorized.services.length > 0 && ( + <> +
Professional Services
+ {categorized.services.map((app) => ( +

redirectApp(app.AppName?.toLowerCase(), app.AppId)} + > + {app.AppName} +

+ ))} + + )} + + {/* Others */} + {categorized.others.length > 0 && ( + <> +
More Industries
+ {categorized.others.map((app) => ( +

redirectApp(app.AppName?.toLowerCase(), app.AppId)} + > + {app.AppName} +

+ ))} + + )}
{AppCategory?.some((app) => /(manufacturing|healthcare|pharma)/i.test(app.CategoryName), @@ -59,21 +200,48 @@ const IndustriesList = ({ ) && ( <>
-
+ {/* Main heading - Don't touch */} +
Manufacturing, Healthcare &
Pharma
+ + {/* Healthcare */} {AppCategory?.filter((app) => - /(manufacturing|healthcare|pharma)/i.test(app.CategoryName), - ).map((app) => ( -

- redirectApp(app.AppName?.toLowerCase(), app.AppId) - } - > - {app.AppName} -

- ))} + (/(healthcare|pharma)/i.test(app.CategoryName) || /(health|optical)/i.test(app.AppName)) + ).length > 0 && ( + <> +
Healthcare & Pharma
+ {AppCategory?.filter((app) => + (/(healthcare|pharma)/i.test(app.CategoryName) || /(health|optical)/i.test(app.AppName)) + ).map((app) => ( +

redirectApp(app.AppName?.toLowerCase(), app.AppId)} + > + {app.AppName} +

+ ))} + + )} + + {/* Manufacturing */} + {AppCategory?.filter((app) => + (/(manufacturing)/i.test(app.CategoryName) || /(manufacturer)/i.test(app.AppName)) + ).length > 0 && ( + <> +
Manufacturing
+ {AppCategory?.filter((app) => + (/(manufacturing)/i.test(app.CategoryName) || /(manufacturer)/i.test(app.AppName)) + ).map((app) => ( +

redirectApp(app.AppName?.toLowerCase(), app.AppId)} + > + {app.AppName} +

+ ))} + + )}
{AppCategory?.some((app) => /(transportation|logistics|hospitality|entertainment)/i.test( @@ -89,23 +257,50 @@ const IndustriesList = ({ ), ) && (
-
+ {/* Main heading - Don't touch */} +
Transportation, Logistics
Hospitality and
Entertainment
+ + {/* Transportation */} {AppCategory?.filter((app) => - /(transportation|logistics|hospitality|entertainment)/i.test( - app.CategoryName, - ), - ).map((app) => ( -

redirectApp(app.AppName?.toLowerCase(), app.AppId)} - > - {app.AppName} -

- ))} + (/(transportation|logistics)/i.test(app.CategoryName) || /(parking|boating)/i.test(app.AppName)) + ).length > 0 && ( + <> +
Transportation & Logistics
+ {AppCategory?.filter((app) => + (/(transportation|logistics)/i.test(app.CategoryName) || /(parking|boating)/i.test(app.AppName)) + ).map((app) => ( +

redirectApp(app.AppName?.toLowerCase(), app.AppId)} + > + {app.AppName} +

+ ))} + + )} + + {/* Hospitality */} + {AppCategory?.filter((app) => + (/(hospitality|entertainment)/i.test(app.CategoryName) || /(hotel|resort)/i.test(app.AppName)) + ).length > 0 && ( + <> +
Hospitality & Entertainment
+ {AppCategory?.filter((app) => + (/(hospitality|entertainment)/i.test(app.CategoryName) || /(hotel|resort)/i.test(app.AppName)) + ).map((app) => ( +

redirectApp(app.AppName?.toLowerCase(), app.AppId)} + > + {app.AppName} +

+ ))} + + )}
)}
diff --git a/src/PozoApp/Components/Navbar.jsx b/src/PozoApp/Components/Navbar.jsx index 10fdbec..54dfd3c 100644 --- a/src/PozoApp/Components/Navbar.jsx +++ b/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, @@ -195,14 +195,14 @@ const Navbar = ({ if (industry || company) { // Save current scroll position const scrollY = window.scrollY; - + // Lock body scroll document.body.style.overflow = "hidden"; document.documentElement.style.overflow = "hidden"; document.body.style.position = "fixed"; document.body.style.top = `-${scrollY}px`; document.body.style.width = "100%"; - + // Return cleanup function return () => { // Restore scroll position @@ -274,8 +274,8 @@ const Navbar = ({ background: responsiveMenu ? "#000000ff" // when menu is open : isScrolled - ? "#ffffff" // when scrolled - : "transparent", + ? "#ffffff" // when scrolled + : "transparent", color: isScrolled ? "#000000ff" : "#ffffffff", padding: isScrolled ? "0.5rem 1.6rem" : "1rem 1.6rem", boxShadow: isScrolled @@ -284,16 +284,15 @@ const Navbar = ({ }} >
PozoApp @@ -421,44 +420,12 @@ const Navbar = ({ )} {industryRes && ( - //
- //
- //
Retail Universe: Grocery,
Wellness, Fashion & More
- //

Restaurant

- //

Bakery

- //

Dairy Delights

- //

Lifestyle and Fashion

- //

Fashion Jewellery

- //

Footwear

- //

Electrical, Electronics and Computers

- //

Mobile & Accessories

- //

Groceries

- //

Departmental Stores

- //

Salon, Spa and Beauty Parlour

- //

Beauty and Cosmetics shop

- //

Fitness

- //

Cement

- //

Wholesale NEW

- //
- //
- //
- //
Manufacturing, Healthcare &
Pharma
- //

Manufacturer

- //

Save Me BETA

- //
- //
- //
- //
Transportation, Logistics
- // Hospitality and
- // Entertainment - //
- //

Smart Parking

- //

Boating

- //
- //
- //
<> - + )} {/* diff --git a/src/PozoApp/Styles/Navbar.scss b/src/PozoApp/Styles/Navbar.scss index e371e17..ff45df2 100644 --- a/src/PozoApp/Styles/Navbar.scss +++ b/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 { @@ -177,21 +182,21 @@ padding-right: 1rem; overscroll-behavior: contain; touch-action: pan-y; - + // Custom scrollbar styling &::-webkit-scrollbar { width: 6px; } - + &::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } - + &::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; - + &:hover { background: #555; } @@ -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; } @@ -625,4 +739,4 @@ .IndustriesTypes { display: block; } -} +} \ No newline at end of file diff --git a/src/PozoApp/Styles/OverView.scss b/src/PozoApp/Styles/OverView.scss index b3332b7..eef03e2 100644 --- a/src/PozoApp/Styles/OverView.scss +++ b/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; - } - - @media (max-width: 400px) { - gap: 0.9rem; + padding:16px 0; } } @@ -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 {