Skip to content

sujata / advithconsulting.io-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 67e04c00 by gaurav
Options

chnages

1 parent 68c7c024
Inline Side-by-side
Showing 4 changed files with 127 additions and 14 deletions
components/reuseables/services/Card.js
...@@ -3,9 +3,9 @@ import { Col, Container, Row } from "react-bootstrap"; ...@@ -3,9 +3,9 @@ import { Col, Container, Row } from "react-bootstrap";
import Heading from "../Heading"; import Heading from "../Heading";
const Card = ({ heading, data }) => { const Card = ({ heading, data }) => {
console.log("heading",heading) console.log("heading", heading)
return ( return (
<section className="ptb-50"> <section className="ptb-50 variant_cfo_section">
<Container> <Container>
<Row className="justify-content-center"> <Row className="justify-content-center">
<Col md={12}> <Col md={12}>
...@@ -21,15 +21,12 @@ const Card = ({ heading, data }) => { ...@@ -21,15 +21,12 @@ const Card = ({ heading, data }) => {
{/* <h5 className="card-title">{item.Title}</h5> */} {/* <h5 className="card-title">{item.Title}</h5> */}
<div className="card-image"> <div className="card-image">
<div className="card-badge">{item.Title}</div>{" "} <div className="card-badge">{item.Title}</div>{" "}
<div
className="Description"
dangerouslySetInnerHTML={{ __html: item.Description }}
/>
{/* <-- Badge here */} {/* <-- Badge here */}
<img src="/images/GCC.png" alt={item.Title} />
<div className="overlay"></div> <div className="overlay"></div>
<div className="card-content">
<div
className="Description"
dangerouslySetInnerHTML={{ __html: item.Description }}
/>
</div>
</div> </div>
</div> </div>
</Col> </Col>
......
container/ClientServicing/CFO/VariantsCFO.js 0 → 100644
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 ...@@ -12,6 +12,7 @@ import ConversionCode from "@/components/reuseables/ConversionCode/ConversionCod
import Card from "@/components/reuseables/services/Card"; import Card from "@/components/reuseables/services/Card";
import HowWeDoIt from "@/container/ClientServicing/CFO/HowWeDoIt"; import HowWeDoIt from "@/container/ClientServicing/CFO/HowWeDoIt";
import DigitalHowWeDoIt from "@/container/ClientServicing/DigitalTransformation/DigitalHowWeDoIt"; import DigitalHowWeDoIt from "@/container/ClientServicing/DigitalTransformation/DigitalHowWeDoIt";
import VariantsCFO from "@/container/ClientServicing/CFO/VariantsCFO";
// method one content // method one content
...@@ -87,11 +88,13 @@ const clientservicecfo = ({ cfopage, conversionData }) => { ...@@ -87,11 +88,13 @@ const clientservicecfo = ({ cfopage, conversionData }) => {
); );
case "dynamic-zone.variantcard": case "dynamic-zone.variantcard":
return ( return (
<Card <>
heading={section?.Heading} <Card
data={section?.carddetails} heading={section?.Heading}
image={section?.Image} data={section?.carddetails}
/> image={section?.Image}
/>
</>
); );
case "dynamic-zone.element-two": case "dynamic-zone.element-two":
......
styles/styles.css
...@@ -9701,4 +9701,74 @@ ul.pagination.custom-pagination { ...@@ -9701,4 +9701,74 @@ ul.pagination.custom-pagination {
.office-heading { .office-heading {
color: #393641 !important; color: #393641 !important;
font-size: 20px !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 \ No newline at end of file
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!