From 0d5be7fe565137f16d4e6005baedee6d35eb684d Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Thu, 6 Jun 2024 13:47:57 +0530
Subject: [PATCH] fix for blog and banner pages

---
 src/components/BlogPost/BlogPost.jsx         |  4 ++--
 src/components/BuildPage/BuildBanner.jsx     | 24 ++++++++++---------
 src/components/Community/CommunityBanner.jsx | 25 +++++++++++---------
 src/components/EcoPage/EcoBanner.jsx         | 20 ++++++++++++----
 src/components/Footer/Footer.jsx             |  4 +++-
 src/components/Footer/MobileFooter.jsx       |  4 ++--
 src/components/HomePage/HomeBanner.jsx       | 14 +++++++++--
 src/components/LearnPage/LearnBanner.jsx     | 17 +++++++++----
 src/components/MobileMenu/MobileMenu.jsx     |  4 ++--
 9 files changed, 76 insertions(+), 40 deletions(-)

diff --git a/src/components/BlogPost/BlogPost.jsx b/src/components/BlogPost/BlogPost.jsx
index 0d14055..381b987 100644
--- a/src/components/BlogPost/BlogPost.jsx
+++ b/src/components/BlogPost/BlogPost.jsx
@@ -71,11 +71,11 @@ const BlogPost = () => {
         >
           <Box
             bg="#000000"
-            minHeight={"60vh"}
+            // minHeight={"60vh"}
             width={"70vw"}
             display={"flex"}
             gap={5}
-            marginTop={10}
+            marginTop={"12rem"}
             justifyContent={"end"}
             alignItems={"center"}
             flexDirection={"column"}
diff --git a/src/components/BuildPage/BuildBanner.jsx b/src/components/BuildPage/BuildBanner.jsx
index c2747dc..7ad59d3 100644
--- a/src/components/BuildPage/BuildBanner.jsx
+++ b/src/components/BuildPage/BuildBanner.jsx
@@ -20,6 +20,13 @@ const BannerContent = [
 ];
 
 const BuildBanner = ({ data, isLoading }) => {
+  const highlightFirstPart = (heading) => {
+    const words = heading.split(" ");
+    const firstThreeWords = words.slice(0, 3).join(" ");
+    const rest = words.slice(3).join(" ");
+    return `<span style="color: rgb(222, 133, 142);">${firstThreeWords}</span> ${rest}`;
+  };
+
   if (isLoading) {
     return (
       <div>
@@ -82,7 +89,8 @@ const BuildBanner = ({ data, isLoading }) => {
                 fontWeight={700}
                 fontSize={"52px"}
                 textTransform={"capitalize"}
-                color={"#DE858E"}
+                // color={"#DE858E"}
+                color={"#fff"}
                 lineHeight={"62px"}
                 letterSpacing={"1px"}
                 sx={{
@@ -95,16 +103,10 @@ const BuildBanner = ({ data, isLoading }) => {
                     lineHeight: "54px",
                   },
                 }}
-              >
-                {item.Heading} <br />
-                {/* <span
-                  style={{
-                    color: "#fff",
-                  }}
-                >
-                  {BannerContent[0].heading2}
-                </span> */}
-              </Text>
+                dangerouslySetInnerHTML={{
+                  __html: highlightFirstPart(item.Heading),
+                }}
+              />
               <Box
                 marginTop={"1.5rem"}
                 width={"80%"}
diff --git a/src/components/Community/CommunityBanner.jsx b/src/components/Community/CommunityBanner.jsx
index a5e235e..0871378 100644
--- a/src/components/Community/CommunityBanner.jsx
+++ b/src/components/Community/CommunityBanner.jsx
@@ -24,7 +24,14 @@ const CommunityBanner = ({ onClick }) => {
   const { data } = useGetCommunitiesBannerQuery();
   const content = data?.data.rows;
   const filteredContent = content?.filter((item) => item.status === true);
-  console.log(filteredContent);
+  // console.log(filteredContent);
+
+  const highlightFirstPart = (heading) => {
+    const words = heading.split(" ");
+    const firstThreeWords = words.slice(0, 3).join(" ");
+    const rest = words.slice(3).join(" ");
+    return `<span style="color: rgb(222, 133, 142);">${firstThreeWords}</span> ${rest}`;
+  };
 
   return (
     <>
@@ -79,7 +86,8 @@ const CommunityBanner = ({ onClick }) => {
                 fontWeight={700}
                 fontSize={"52px"}
                 // textTransform={"upperCase"}
-                color={"#DE858E"}
+                // color={"#DE858E"}
+                color={"#fff"}
                 lineHeight={"62px"}
                 letterSpacing={"1px"}
                 width={"65%"}
@@ -94,15 +102,10 @@ const CommunityBanner = ({ onClick }) => {
                     width: "100%",
                   },
                 }}
-              >
-                <span
-                  style={{
-                    color: "rgb(222, 133, 142)",
-                  }}
-                >
-                  {item.Heading}
-                </span>
-              </Text>
+                dangerouslySetInnerHTML={{
+                  __html: highlightFirstPart(item.Heading),
+                }}
+              />
               <Box
                 marginTop={"1.5rem"}
                 width={"65%"}
diff --git a/src/components/EcoPage/EcoBanner.jsx b/src/components/EcoPage/EcoBanner.jsx
index 3af4430..6f89756 100644
--- a/src/components/EcoPage/EcoBanner.jsx
+++ b/src/components/EcoPage/EcoBanner.jsx
@@ -22,7 +22,15 @@ const BannerContent = [
 const EcoBanner = () => {
   const { data, isLoading, error } = useGetEcoSystemQuery();
   const dataHeader = data?.data?.data;
-  console.log(dataHeader);
+  // console.log(dataHeader);
+
+  const highlightFirstPart = (heading) => {
+    const words = heading.split(" ");
+    const firstThreeWords = words.slice(0, 3).join(" ");
+    const rest = words.slice(3).join(" ");
+    return `<span style="color: rgb(222, 133, 142);">${firstThreeWords}</span> ${rest}`;
+  };
+
   if (isLoading) {
     return (
       <div>
@@ -79,7 +87,8 @@ const EcoBanner = () => {
                 fontWeight={700}
                 fontSize={"52px"}
                 textTransform={"Capitalize"}
-                color={"#DE858E"}
+                // color={"#DE858E"}
+                color={"#fff"}
                 lineHeight={"62px"}
                 letterSpacing={"1px"}
                 sx={{
@@ -92,9 +101,10 @@ const EcoBanner = () => {
                     lineHeight: "54px",
                   },
                 }}
-              >
-                {item.Heading}
-              </Text>
+                dangerouslySetInnerHTML={{
+                  __html: highlightFirstPart(item.Heading),
+                }}
+              />
               <Box marginTop={"10px"} width={"80%"}>
                 <Text
                   color={"#fff"}
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 344b49b..53254f2 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -220,7 +220,9 @@ const Footer = () => {
                       >
                         <ListItem marginBottom={"1rem"}>Wallet</ListItem>
                       </Link>
-                      <ListItem marginBottom={"1rem"}>Careers</ListItem>
+                      <Link to="/Contact">
+                        <ListItem marginBottom={"1rem"}>Careers</ListItem>
+                      </Link>
                     </UnorderedList>
                   </Box>
                   <Box>
diff --git a/src/components/Footer/MobileFooter.jsx b/src/components/Footer/MobileFooter.jsx
index 3be37fa..6c5fa1d 100644
--- a/src/components/Footer/MobileFooter.jsx
+++ b/src/components/Footer/MobileFooter.jsx
@@ -48,7 +48,7 @@ const MobileFooter = () => {
                   <Box as="span" flex="1" textAlign="left">
                     <Text
                       color={"#B0B0B0"}
-                      fontFamily={"Mona Sans"}
+                      // fontFamily={"Mona Sans"}
                       fontWeight={"500"}
                       fontSize={"16px"}
                     >
@@ -99,7 +99,7 @@ const MobileFooter = () => {
                   <Box as="span" flex="1" textAlign="left">
                     <Text
                       color={"#B0B0B0"}
-                      fontFamily={"Mona Sans"}
+                      // fontFamily={"Mona Sans"}
                       fontWeight={"500"}
                       fontSize={"16px"}
                     >
diff --git a/src/components/HomePage/HomeBanner.jsx b/src/components/HomePage/HomeBanner.jsx
index 9c8c08a..97da448 100644
--- a/src/components/HomePage/HomeBanner.jsx
+++ b/src/components/HomePage/HomeBanner.jsx
@@ -26,6 +26,13 @@ const HomeBanner = () => {
   console.log(data);
   const HomeBanner = data?.data?.data;
 
+  const highlightFirstPart = (heading) => {
+    const words = heading.split(" ");
+    const firstThreeWords = words.slice(0, 3).join(" ");
+    const rest = words.slice(3).join(" ");
+    return `<span style="color: rgb(222, 133, 142);">${firstThreeWords}</span> ${rest}`;
+  };
+
   if (isLoading) {
     return (
       <div>
@@ -87,7 +94,8 @@ const HomeBanner = () => {
                 fontWeight={700}
                 fontSize={"52px"}
                 textTransform={"upperCase"}
-                color={"#DE858E"}
+                // color={"#DE858E"}
+                color={"#fff"}
                 lineHeight={"62px"}
                 // letterSpacing={"1px"}
                 sx={{
@@ -103,7 +111,9 @@ const HomeBanner = () => {
                     marginTop: "1rem",
                   },
                 }}
-                dangerouslySetInnerHTML={{ __html: item.Heading }}
+                dangerouslySetInnerHTML={{
+                  __html: highlightFirstPart(item.Heading),
+                }}
               />
               <Text
                 color={"#fff"}
diff --git a/src/components/LearnPage/LearnBanner.jsx b/src/components/LearnPage/LearnBanner.jsx
index b30b3b3..7adddf1 100644
--- a/src/components/LearnPage/LearnBanner.jsx
+++ b/src/components/LearnPage/LearnBanner.jsx
@@ -26,6 +26,13 @@ const LearnBanner = () => {
   const { data, isLoading, error } = useGetLearnPageQuery();
   const learnData = data?.data?.data;
 
+  const highlightFirstPart = (heading) => {
+    const words = heading.split(" ");
+    const firstThreeWords = words.slice(0, 3).join(" ");
+    const rest = words.slice(3).join(" ");
+    return `<span style="color: rgb(222, 133, 142);">${firstThreeWords}</span> ${rest}`;
+  };
+
   if (isLoading) {
     return (
       <div>
@@ -91,7 +98,8 @@ const LearnBanner = () => {
                 fontWeight={700}
                 fontSize={"52px"}
                 textTransform={"Capitalize"}
-                color={"#DE858E"}
+                // color={"#DE858E"}
+                color={"#fff"}
                 lineHeight={"62px"}
                 letterSpacing={"1px"}
                 sx={{
@@ -104,9 +112,10 @@ const LearnBanner = () => {
                     lineHeight: "54px",
                   },
                 }}
-              >
-                {item.Heading}
-              </Text>
+                dangerouslySetInnerHTML={{
+                  __html: highlightFirstPart(item.Heading),
+                }}
+              />
               <Box marginTop={"10px"} width={"80%"}>
                 <Text
                   color={"#fff"}
diff --git a/src/components/MobileMenu/MobileMenu.jsx b/src/components/MobileMenu/MobileMenu.jsx
index 65d5630..7ecea31 100644
--- a/src/components/MobileMenu/MobileMenu.jsx
+++ b/src/components/MobileMenu/MobileMenu.jsx
@@ -263,10 +263,10 @@ export const MobileMenu = () => {
               {useCase?.map((slug) => (
                 <Box key={slug.id} style={{ flexBasis: "calc(50% - 1rem)" }}>
                   <Link
-                    to={`/${slug.title_slug}`}
+                    to={`/usecases/${slug.title_slug}`}
                     className="link"
                     style={
-                      location.pathname === `/${slug.title_slug}`
+                      location.pathname === `/usecases/${slug.title_slug}`
                         ? highlight
                         : normal
                     }