chnages in frontent pages

components/reuseables/FunctionalAreas.js

@@ -76,11 +76,11 @@ const FunctionalAreas = ({functionarea}) => {
               expertise to deliver exceptional value.
             </p>
 
-          <div className="row align-items-center">
+          <div className="row row-gap-4  h-auto">
             {functionarea &&
               functionarea?.map((service) => (
                  <div className="col-lg-4 col-sm-6 col-md-6" key={service.id}>
-                  <div className="single-services-item fuctional-areas border align-items-left">
+                  <div className="single-services-item fuctional-areas border align-items-left h-100">
                     <Image
                       src={cleanImage(service?.Icon?.url)}
                       alt={service.serviceTitle}

components/reuseables/PageBanner.js

@@ -93,6 +93,7 @@ const PageBanner = ({ banners = [] }) => {
       className="page-banner-swiper"
     >
       {banners.map((banner, index) => (
+        
         <SwiperSlide key={index}>
           <div className="page-title-area">
             <div className="image-wrapper">
@@ -105,7 +106,7 @@ const PageBanner = ({ banners = [] }) => {
                 className="img-fluid postion-absolute"
               />
             </div>
-            <Container>
+            <Container fluid className="ps-5">
               <div className="page-title-content">
                 <h2>{banner.pageTitle}</h2>
                 <ul>
@@ -130,6 +131,7 @@ const PageBanner = ({ banners = [] }) => {
                     </>
                   )}
                 </ul>
+                <p className="pt-3 text-center">{banner.Description}</p>
               </div>
             </Container>
           </div>

components/reuseables/services/Card.js

@@ -3,13 +3,13 @@ import { Col, Container, Row } from "react-bootstrap";
 import Heading from "../Heading";
 
 const Card = ({ heading, data }) => {
+  console.log("heading",heading)
   return (
     <section className="ptb-50">
       <Container>
         <Row className="justify-content-center">
           <Col md={12}>
             <Heading el="h2" heading={heading?.Title} className="text-center" />
-            <p className="text-center mb-2">{heading?.Description}</p>
           </Col>
           {data.map((item, index) => (
             <Col

container/ClientServicing/CFO/HowWeDoIt.js

@@ -51,10 +51,10 @@ const HowWeDoIt = ({ data, heading }) => {
         <section className="HowWeDoIt-section ptb-100">
             <Container>
                 <div className="section-title">
-                    <span className="sub-title">{""}</span>
+                    <span className="sub-title">{heading?.Subtitle}</span>
                     <Heading el="h2" heading={heading?.Title} />
                 </div>
-                <p className=" text-center text-black mb-4 mb-lg-5">{heading?.Description}</p>
+                <p className=" text-center text-black mb-4 mb-lg-5" dangerouslySetInnerHTML={{ __html: heading?.Description }}></p>
                 <Row className='row-gap-4 h-auto justify-content-center'>
                     {
                         data?.carddetails && data?.carddetails.map((item, index) => (

pages/client-servicing/virtual-finance-office/book-closures-audit.js

@@ -10,10 +10,12 @@ import RightSideImage from "@/container/Corpedia/RightSideImage";
 import Seo from "@/components/reuseables/Seo/Seo";
 import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
 import CallBackRequest from "@/components/reuseables/CallBackRequest";
+import Card from "@/components/reuseables/services/Card";
+import HowWeDoIt from "@/container/ClientServicing/CFO/HowWeDoIt";
 
 // method one content
 const bookclosures = ({ bookclosurepage ,conversionData }) => {
-  // console.log(bookclosurepage ,"bookclosurepage")
+  console.log(bookclosurepage ,"bookclosurepage")
   const banners = [
     {
       imageSrc: cleanImage(bookclosurepage?.Banner?.Image?.url),
@@ -72,6 +74,14 @@ const bookclosures = ({ bookclosurepage ,conversionData }) => {
                       data={section?.ElementList}
                     />
                   );
+                    case "dynamic-zone.card":
+                  return (
+                    <>
+                      <HowWeDoIt heading={section?.Heading}
+                        data={section} />
+                    </>
+                  );
+                  
                 case "dynamic-zone.element-two":
                   return (
                     <MethodTwoSection
@@ -80,6 +90,8 @@ const bookclosures = ({ bookclosurepage ,conversionData }) => {
                     />
                   );
 
+                 
+                  
                 default:
                   return null;
               }

pages/client-servicing/virtual-finance-office/index.js

@@ -19,7 +19,7 @@ import HomeBlog from "@/container/Home/HomeBlog";
 import { fetchBlogList } from "@/redux/slices/bloglistslice";
 
 const VirtualFinanceOfficePage = ({ ClientPage, conversionData, title }) => {
-  // console.log(ClientPage, "data1");
+  console.log(ClientPage, "data1");
   const banners = [
     {
       imageSrc: cleanImage(ClientPage?.Banner?.Image?.url),
@@ -27,6 +27,7 @@ const VirtualFinanceOfficePage = ({ ClientPage, conversionData, title }) => {
       homePageUrl: "/",
       homePageText: "Home",
       activePageText: ClientPage?.Banner?.Heading,
+      Description:ClientPage?.Banner?.Description,
     },
   ];
 
@@ -59,7 +60,7 @@ const VirtualFinanceOfficePage = ({ ClientPage, conversionData, title }) => {
 
       <ConversionCode code={code} />
 
-      <Overview overview={overview} />
+      {/* <Overview overview={overview} /> */}
 
       <WhatWeDo service={serviceData} serviceheading={serviceHeading} />
       <Finance finance={PyramidofFinance} />

pages/client-servicing/virtual-finance-office/virtual-cfo.js

@@ -15,7 +15,7 @@ import HowWeDoIt from "@/container/ClientServicing/CFO/HowWeDoIt";
 // method one content
 
 const clientservicecfo = ({ cfopage, conversionData }) => {
-  // console.log(cfopage ,"cfopage")
+  console.log(cfopage ,"cfopage")
   const banners = [
     {
       imageSrc: cleanImage(cfopage?.Banner?.Image?.url),
@@ -23,6 +23,7 @@ const clientservicecfo = ({ cfopage, conversionData }) => {
       homePageUrl: "/",
       homePageText: "Home",
       activePageText: cfopage?.Banner?.Heading,
+
     },
   ];
 
@@ -83,22 +84,23 @@ const clientservicecfo = ({ cfopage, conversionData }) => {
                         data={section} />
                     </>
                   );
-                case "dynamic-zone.element-two":
+                case "dynamic-zone.variantcard":
                   return (
-                    <MethodTwoSection
+                    <Card
                       heading={section?.Heading}
-                      data={section?.ElementList}
+                      data={section?.carddetails}
+                      image={section?.Image}
                     />
                   );
                 
-                case "dynamic-zone.card":
+                case "dynamic-zone.element-two":
                   return (
-                    <Card
+                    <MethodTwoSection
                       heading={section?.Heading}
-                      data={section?.carddetails}
-                      image={section?.Image}
+                      data={section?.ElementList}
                     />
                   );
+
                 case "dynamic-zone.rules-application":
                   return (
                     <Rules

pages/client-servicing/virtual-finance-office/virtual-fc.js

@@ -11,6 +11,7 @@ import Seo from "@/components/reuseables/Seo/Seo";
 import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCode";
 import CallBackRequest from "@/components/reuseables/CallBackRequest";
 import Card from "@/components/reuseables/services/Card";
+import HowWeDoIt from "@/container/ClientServicing/CFO/HowWeDoIt";
 
 
 
@@ -87,9 +88,17 @@ const clientservicefc = ({ fcpage ,conversionData }) => {
 
                   case "dynamic-zone.card":
                   return (
+                    <>
+                      <HowWeDoIt heading={section?.Heading}
+                        data={section} />
+                    </>
+                  );
+                case "dynamic-zone.variantcard":
+                  return (
                     <Card
                       heading={section?.Heading}
                       data={section?.carddetails}
+                      image={section?.Image}
                     />
                   );
                 default:

styles/styles.css

@@ -8841,6 +8841,7 @@ ul.pagination.custom-pagination {
   color: var(--mainColor2)
 }
 
+
 .variant-box {
   border-bottom: 2px solid #f8971f;
   background-color: #feead2b8;
@@ -8936,6 +8937,65 @@ ul.pagination.custom-pagination {
 
 /*============ How to do it new section END ============ */
 
+
+
+/* -------------------Variant section----------------- */
+
+.variant_card {
+  position: relative;
+  /* width: 300px; */
+  border-radius: 10px;
+  overflow: hidden;
+ 
+  transition: box-shadow 0.3s ease;
+}
+
+.variant_card:hover h2 {
+  opacity: 0;
+  transform: scale(0.7);
+}
+
+.variant_card:hover .variant_card_content {
+  top: 0;
+  height: 100%;
+  background-color:#0000006e;
+}
+
+.variant_card h2 {
+    padding: 10px;
+    position: absolute;
+    width: auto;
+    top: 0px;
+    left: 0px;
+    font-size: 17px;
+    color: #fff;
+    z-index: 2;
+    font-weight: 300;
+    transition: transform 0.25s ease, opacity 0.25s ease;
+    margin: 10px;
+    background-color: var(--mainColor);
+}
+
+.variant_card_content {
+  position: absolute;
+  /* bottom: -120%; */
+  left: 0;
+  width: 100%;
+  padding: 30px;
+  color: #fff;
+  transition: bottom 0.3s ease;
+}
+
+.variant_card_content h4 {
+  color: #fff;
+
+}
+
+.variant_card_content p {
+  color: #fff;
+}
+/* --------------------variant end---------------- */
+
 @media (max-width: 1200px) {
   .client-servicing-grid {
     grid-template-columns: repeat(3, 1fr);
@@ -8996,6 +9056,14 @@ ul.pagination.custom-pagination {
   .service-header {
     margin-bottom: 0.5rem;
   }
+  .download-content h2 {
+  font-size: 2.1vh;
+  margin-bottom: 15px;
+  color: var(--mainColor2)
+}
+.ps-5 {
+    padding-left: 1rem!important;
+}
 }
 
 @media (max-width: 480px) {
@@ -9528,12 +9596,11 @@ ul.pagination.custom-pagination {
   text-align: center;
   color: #fff;
   opacity: 0;
-  /* 🙈 Hidden initially */
   transition: opacity 0.4s ease, transform 0.4s ease;
   padding: 0 15px;
 }
 
-/* 👀 Content visible on hover */
+
 .custom-card:hover .card-content {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1.05);
@@ -9560,8 +9627,6 @@ ul.pagination.custom-pagination {
   z-index: 3;
   transition: opacity 0.3s ease, transform 0.3s ease;
 }
-
-/* 🙈 Hide badge on hover */
 .custom-card:hover .card-badge {
   opacity: 0;
   transform: scale(0.9);