chnages

components/reuseables/services/Card.js

@@ -3,9 +3,9 @@ import { Col, Container, Row } from "react-bootstrap";
 import Heading from "../Heading";
 
 const Card = ({ heading, data }) => {
-  console.log("heading",heading)
+  console.log("heading", heading)
   return (
-    <section className="ptb-50">
+    <section className="ptb-50 variant_cfo_section">
       <Container>
         <Row className="justify-content-center">
           <Col md={12}>
@@ -21,15 +21,12 @@ const Card = ({ heading, data }) => {
                 {/* <h5 className="card-title">{item.Title}</h5> */}
                 <div className="card-image">
                   <div className="card-badge">{item.Title}</div>{" "}
-                  {/* <-- Badge here */}
-                  <img src="/images/GCC.png" alt={item.Title} />
-                  <div className="overlay"></div>
-                  <div className="card-content">
                   <div
                     className="Description"
                     dangerouslySetInnerHTML={{ __html: item.Description }}
                   />
-                  </div>
+                  {/* <-- Badge here */}
+                  <div className="overlay"></div>
                 </div>
               </div>
             </Col>

container/ClientServicing/CFO/VariantsCFO.js

+import Heading from "@/components/reuseables/Heading";
+import React from "react";
+import { Col, Container, Row } from "react-bootstrap";
+
+const VariantsCFO = ({ 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" />
+                    </Col>
+                    {data.map((item, index) => (
+                        <Col
+                            key={index}
+                            md={4}
+                            className="d-flex justify-content-center mb-4 mt-3"
+                        >
+                            <div className={`custom-card ${item.CardClass}`}>
+                                {/* <h5 className="card-title">{item.Title}</h5> */}
+                                <div className="card-image">
+                                    <div className="card-badge">{item.Title}</div>{" "}
+                                    {/* <-- Badge here */}
+                                    <img src="/images/GCC.png" alt={item.Title} />
+                                    <div className="overlay"></div>
+                                    <div className="card-content">
+                                        <div
+                                            className="Description"
+                                            dangerouslySetInnerHTML={{ __html: item.Description }}
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </Col>
+                    ))}
+                </Row>
+            </Container>
+        </section>
+    );
+};
+
+export default VariantsCFO;

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

@@ -12,6 +12,7 @@ import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCod
 import Card from "@/components/reuseables/services/Card";
 import HowWeDoIt from "@/container/ClientServicing/CFO/HowWeDoIt";
 import DigitalHowWeDoIt from "@/container/ClientServicing/DigitalTransformation/DigitalHowWeDoIt";
+import VariantsCFO from "@/container/ClientServicing/CFO/VariantsCFO";
 
 // method one content
 
@@ -87,11 +88,13 @@ const clientservicecfo = ({ cfopage, conversionData }) => {
                   );
                 case "dynamic-zone.variantcard":
                   return (
+                    <>
                       <Card
                         heading={section?.Heading}
                         data={section?.carddetails}
                         image={section?.Image}
                       />
+                    </>
                   );
 
                 case "dynamic-zone.element-two":

styles/styles.css

@@ -9702,3 +9702,73 @@ ul.pagination.custom-pagination {
   color: #393641 !important;
   font-size: 20px !important;
 }
+
+
+/* =========  Variant cfo ========== */
+.variant_cfo_section .card-badge {
+  position: relative;
+  width: max-content;
+  top: unset;
+  left: unset;
+  background: transparent;
+  color: #000;
+  padding: 0;
+  border-radius: unset;
+  font-size: 1rem;
+}
+
+.variant_cfo_section .custom-card {
+  padding: 2rem 2rem 0;
+}
+
+.variant_cfo_section .custom-card:hover {
+  transform: unset;
+  color: #000;
+}
+
+.variant_cfo_section .custom-card:hover .card-badge {
+  opacity: 1;
+  transform: unset;
+  color: #fff;
+}
+
+.variant_cfo_section .custom-card {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  transition: color 0.3s ease;
+  z-index: 1;
+}
+
+.variant_cfo_section .custom-card::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: gray;
+  transform: translateY(100%);
+  transition: transform 0.6s ease-in-out;
+  z-index: -1;
+}
+
+.variant_cfo_section .card-image {
+  height: 100%;
+}
+
+.variant_cfo_section .custom-card:hover::before {
+  transform: translateY(0);
+}
+
+.variant_cfo_section .custom-card:hover {
+  color: #fff;
+  /* Text color change when hovered */
+}
+
+.variant_cfo_section .custom-card:hover .Description p {
+  color: #fff !important;
+}
\ No newline at end of file