Enhanced UI: Dynamic navigation with icons, organized categories, responsive improvements, and lazy-loaded footer
This commit is contained in:
SridharRajamani
parent
4a1b4aeda6
commit
32cc257c87
|
|
@ -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 (
|
||||
<>
|
||||
<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>
|
||||
<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>
|
||||
<p>Manufacturer</p>
|
||||
<p>Save Me</p>
|
||||
<p>Smart Parking</p>
|
||||
<p>Boating</p>
|
||||
{(() => {
|
||||
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) => (
|
||||
<p
|
||||
key={app.AppId}
|
||||
onClick={() => redirectApp(app.AppName?.toLowerCase(), app.AppId)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
{app.AppName}
|
||||
</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">
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
).map((app) => (
|
||||
<p
|
||||
key={app.AppId}
|
||||
onClick={() =>
|
||||
redirectApp(app.AppName?.toLowerCase(), app.AppId)
|
||||
}
|
||||
>
|
||||
{app.AppName}
|
||||
</p>
|
||||
// <p
|
||||
// key={app.AppId}
|
||||
// onClick={() =>
|
||||
// redirectApp(app.AppName?.toLowerCase(), app.AppId)
|
||||
// }
|
||||
// >
|
||||
// {app.AppName}
|
||||
// </p>
|
||||
))}
|
||||
|
||||
{/* Food & Beverages */}
|
||||
{categorized.foodBeverages.length > 0 && (
|
||||
<>
|
||||
<div className="sub-category"><MdRestaurant /> Food & Beverages</div>
|
||||
{categorized.foodBeverages.map((app) => (
|
||||
<p
|
||||
key={app.AppId}
|
||||
onClick={() => redirectApp(app.AppName?.toLowerCase(), app.AppId)}
|
||||
>
|
||||
{app.AppName}
|
||||
</p>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Wellness */}
|
||||
{categorized.wellness.length > 0 && (
|
||||
<>
|
||||
<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),
|
||||
).map((app) => (
|
||||
<p
|
||||
key={app.AppId}
|
||||
onClick={() =>
|
||||
redirectApp(app.AppName?.toLowerCase(), app.AppId)
|
||||
}
|
||||
>
|
||||
{app.AppName}
|
||||
</p>
|
||||
))}
|
||||
(/(healthcare|pharma)/i.test(app.CategoryName) || /(health|optical)/i.test(app.AppName))
|
||||
).length > 0 && (
|
||||
<>
|
||||
<div className="sub-category"><MdLocalHospital /> Healthcare & Pharma</div>
|
||||
{AppCategory?.filter((app) =>
|
||||
(/(healthcare|pharma)/i.test(app.CategoryName) || /(health|optical)/i.test(app.AppName))
|
||||
).map((app) => (
|
||||
<p
|
||||
key={app.AppId}
|
||||
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(
|
||||
app.CategoryName,
|
||||
),
|
||||
).map((app) => (
|
||||
<p
|
||||
key={app.AppId}
|
||||
onClick={() => redirectApp(app.AppName?.toLowerCase(), app.AppId)}
|
||||
>
|
||||
{app.AppName}
|
||||
</p>
|
||||
))}
|
||||
(/(transportation|logistics)/i.test(app.CategoryName) || /(parking|boating)/i.test(app.AppName))
|
||||
).length > 0 && (
|
||||
<>
|
||||
<div className="sub-category"><MdLocalShipping /> Transportation & Logistics</div>
|
||||
{AppCategory?.filter((app) =>
|
||||
(/(transportation|logistics)/i.test(app.CategoryName) || /(parking|boating)/i.test(app.AppName))
|
||||
).map((app) => (
|
||||
<p
|
||||
key={app.AppId}
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
: "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 = ({
|
|||
}}
|
||||
>
|
||||
<div
|
||||
className={`appNameLeft ${
|
||||
responsiveMenu ? "responsiveMenuOpen" : ""
|
||||
}`}
|
||||
className={`appNameLeft ${responsiveMenu ? "responsiveMenuOpen" : ""
|
||||
}`}
|
||||
onClick={navigateAndScrollToTop}
|
||||
style={{
|
||||
color: responsiveMenu
|
||||
? "#ffffff" // when responsiveMenu is true
|
||||
: isScrolled
|
||||
? "#000" // when scrolled
|
||||
: "#fff", // default
|
||||
? "#000" // when scrolled
|
||||
: "#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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue