add compoent in dynamic zone

container/ClientServicing/EmpoweringFinanceConsultants/WeOffer.js

@@ -22,7 +22,7 @@ const WeOffer = (data) => {
                             whileInView={"show"}
                             viewport={{ once: false, amount: 0.4 }}
                         >
-                            <div className="services-box-budget">
+                            <div className="weoffer-box-budget">
                                 <div className="d-flex align-items-center">
                                     <h3>
                                         {item?.Title}

container/ClientServicing/EmpoweringFinanceConsultants/WhatWeDoWhatDontDo.js

 import { cleanImage } from '@/layout/imageHandling'
-import Image from 'next/image'
 import React from 'react'
 import { Col, Container, Row } from 'react-bootstrap'
 
-const WhatWeDoWhatDontDo = () => {
-
-    const backgroundImageUrl = cleanImage(data?.Image?.url);
+const WhatWeDoWhatDontDo = (heading,data,image) => {
+    console.log(image,"WhatWeDoWhatDontDo")
 
+    const backgroundImageUrl = cleanImage(image?.url);
+    console.log(backgroundImageUrl,"backgroundImageUrl")
     return (
         <div className='' style={{
             backgroundImage: `url(${backgroundImageUrl})`,
@@ -17,15 +17,18 @@ const WhatWeDoWhatDontDo = () => {
         }}>
             <Container>
                 <Row className="align-items-center">
+                    <Col lg={12}>
+                        <h2>{data?.Title}</h2>
+                    </Col>
                     {/* <Col lg={6} md={12}> */}
                     <div className="call-back-request-text">
-                        <span className="sub-title">{subtitle}</span>
+                        <span className="sub-title">{data?.subtitle}</span>
                         {/* <Heading el="h2" heading={title} className="h2" /> */}
-                        <h2>{title}</h2>
+                        <h2>{data?.title}</h2>
                         {/* <p>{description}</p> */}
                         <div
                             className="content"
-                            dangerouslySetInnerHTML={{ __html: content }}
+                            dangerouslySetInnerHTML={{ __html:data?.content }}
                         />
                     </div>
                     {/* </Col> */}

pages/client-servicing/empowering-finance-consultants.js

@@ -59,7 +59,7 @@ const EmpoweringFinanceConsultants = ({ Empoweringpage, conversionData }) => {
         <section className="cfo-page">
           {dynamicdata &&
             dynamicdata?.map((section, index) => {
-              // console.log("sectionemp", section);
+              console.log("sectionemp", section);
               switch (section.__component) {
                 case "dynamic-zone.about":
                   return (
@@ -96,11 +96,12 @@ const EmpoweringFinanceConsultants = ({ Empoweringpage, conversionData }) => {
                   />
                     </>
                   );
-                case "dynamic-zone.background":
+                case "dynamic-zone.what-wedo-banner":
                   return (
                     <WhatWeDoWhatDontDo
-                      heading={section?.Title}
-                      data={section?.Content}
+                      heading={section?.Heading}
+                      data={section?.list}
+                      image={section?.BackgroundBanner}
                     />
                   );
                 case "dynamic-zone.element-one":
@@ -160,6 +161,8 @@ export async function getServerSideProps() {
         "EmpoweringFinanceDetails.carddetails",
         "EmpoweringFinanceDetails.DesktopImg",
         "EmpoweringFinanceDetails.MobileImg",
+        "EmpoweringFinanceDetails.list",
+        "EmpoweringFinanceDetails.BackgroundBanner",
         "Clientel.logos",
         // "FAQ.FAQList",
         "seo",

styles/styles.css

@@ -9575,10 +9575,8 @@ ul.pagination.custom-pagination {
   object-fit: cover;
   transition: opacity 0.4s ease, transform 0.4s ease;
   opacity: 1;
-  /* ✅ Fully visible by default */
-}
  
-/* 🔦 Image dims only on hover */
+}
 .custom-card:hover .card-image img {
   opacity: 0.4;
   transform: scale(1.05);
@@ -9659,7 +9657,8 @@ ul.pagination.custom-pagination {
 .weoffer-box-budget h3 {
   margin-bottom: 0;
   font-size: 20px;
-  line-height: 28px
+  line-height: 28px;
+  color: #000;
 }
 
 .weoffer-box-budget p {
@@ -9672,5 +9671,12 @@ ul.pagination.custom-pagination {
 
 .weoffer-box-budget:hover {
   box-shadow: 0 7px 30px -10px rgba(133, 153, 162, 0.3);
-  background-color: var(--whiteColor);
+  background-color: var(--mainColor2);
+}
+
+.weoffer-box-budget:hover p  {
+  color: white;
+}
+.weoffer-box-budget:hover h3 {
+  color: white;
 }