Commit 953e7a1c by sujata

download section add

1 parent b023c0b6
This file is too large to display.
import Image from "next/image";
import Link from "next/link";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
const DownloadBtn = ({subtitle,title,description,cta}) => {
// console.log(cta,"details")
return (
<>
<div className="free-quote-area ptb-70">
<div className="free-quote-inner">
<section className="section-title-download d-flex">
<Container>
<Row>
<Col md={6}>
<div className="download-content">
<span className="sub-title">{subtitle}</span>
<h2>{title}</h2>
<p>
{description}
</p>
</div>
</Col>
<Col md={6} className="align-content-center text-center">
<div className="btn-1">
<Link href={cta.URL} className="default-btn-three">
{cta.text}
<i className="ri-arrow-right-line"></i>
</Link>
</div>
</Col>
</Row>
</Container>
</section>
<div className="shape6">
<Image
width={300}
height={300}
src="/images/shape/shape11.png"
className="shape11"
alt="image"
/>
</div>
</div>
</div>
</>
);
};
export default DownloadBtn;
...@@ -34,11 +34,10 @@ import { cleanImage } from "@/layout/imageHandling"; ...@@ -34,11 +34,10 @@ import { cleanImage } from "@/layout/imageHandling";
// }, // },
// ]; // ];
const Corpedia = ({Corpedia, corpedialist}) => { const Corpedia = ({ Corpedia, corpedialist }) => {
// console.log(corpedialist,"corpedialist") // console.log(corpedialist,"corpedialist")
const corpedialistlatest = corpedialist.slice(0, 3); const corpedialistlatest = corpedialist.slice(0, 3);
return ( return (
<> <>
<div className="corpedia-area pt-70 pb-100 bg-light"> <div className="corpedia-area pt-70 pb-100 bg-light">
...@@ -46,12 +45,9 @@ const Corpedia = ({Corpedia, corpedialist}) => { ...@@ -46,12 +45,9 @@ const Corpedia = ({Corpedia, corpedialist}) => {
<Row> <Row>
<Col lg={8} md={8} sm={12}> <Col lg={8} md={8} sm={12}>
<div className="text-align-left"> <div className="text-align-left">
<Heading heading={Corpedia?.Title} el="h2" /> <Heading heading={Corpedia?.Title} el="h2" />
<p className="mb-lg-5 mb-3"> <p className="mb-lg-5 mb-3">{Corpedia?.Description}</p>
{Corpedia?.Description}
</p>
</div> </div>
</Col> </Col>
<Col <Col
...@@ -80,13 +76,21 @@ const Corpedia = ({Corpedia, corpedialist}) => { ...@@ -80,13 +76,21 @@ const Corpedia = ({Corpedia, corpedialist}) => {
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<Image <Image
src={cleanImage(service?.Image?.url)} src={cleanImage(service?.Image?.url)}
alt={service?.alternativeText ? service?.alternativeText : "image"} alt={
service?.alternativeText
? service?.alternativeText
: "image"
}
width={40} width={40}
height={40} height={40}
className="img-fluid me-3" className="img-fluid me-3"
/> />
<h3> <h3>
<Link href={`/corpedia/${service?.slug ? service?.slug : "#"}`}> <Link
href={`/corpedia/${
service?.slug ? service?.slug : "#"
}`}
>
{service.Title} {service.Title}
</Link> </Link>
</h3> </h3>
...@@ -94,8 +98,12 @@ const Corpedia = ({Corpedia, corpedialist}) => { ...@@ -94,8 +98,12 @@ const Corpedia = ({Corpedia, corpedialist}) => {
<p>{service.Description}</p> <p>{service.Description}</p>
<Link href={`/corpedia/${service?.slug ? service?.slug : "#"}`} <Link
className="default-btn" target="_blank" href={`/corpedia/${
service?.slug ? service?.slug : "#"
}`}
className="default-btn"
target="_blank"
> >
Read More Read More
<i className="ri-arrow-right-line"></i> <i className="ri-arrow-right-line"></i>
......
...@@ -10,6 +10,7 @@ import LeftSideImage from "@/container/Corpedia/LeftSideImage"; ...@@ -10,6 +10,7 @@ import LeftSideImage from "@/container/Corpedia/LeftSideImage";
import RightSideImage from "@/container/Corpedia/RightSideImage"; import RightSideImage from "@/container/Corpedia/RightSideImage";
import TableData from "@/components/reuseables/services/TableData"; import TableData from "@/components/reuseables/services/TableData";
import Details from "@/components/reuseables/services/Details"; import Details from "@/components/reuseables/services/Details";
import DownloadBtn from "@/components/reuseables/DownloadBtn";
const details = ({ Corpedia }) => { const details = ({ Corpedia }) => {
const introDeatils = Corpedia; const introDeatils = Corpedia;
...@@ -86,6 +87,9 @@ const details = ({ Corpedia }) => { ...@@ -86,6 +87,9 @@ const details = ({ Corpedia }) => {
case "dynamic-zone.details": case "dynamic-zone.details":
return <Details details={section?.Details} />; return <Details details={section?.Details} />;
case "dynamic-zone.download-btn":
return <DownloadBtn subtitle={section?.Subtitle} title={section?.Title} description={section?.Description} cta={section.CTA}/>;
default: default:
return null; return null;
} }
...@@ -111,6 +115,8 @@ export async function getServerSideProps({ params }) { ...@@ -111,6 +115,8 @@ export async function getServerSideProps({ params }) {
"CorpediaDetails.FactList.Icon", "CorpediaDetails.FactList.Icon",
"CorpediaDetails.KeyFeatureList.Icon", "CorpediaDetails.KeyFeatureList.Icon",
"CorpediaDetails.Details", "CorpediaDetails.Details",
"CorpediaDetails.DownloadBtn",
"CorpediaDetails.CTA"
], ],
filters: { filters: {
slug: { slug: {
...@@ -124,7 +130,7 @@ export async function getServerSideProps({ params }) { ...@@ -124,7 +130,7 @@ export async function getServerSideProps({ params }) {
}); });
const endpoint1 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/corpedias?${query1String}`; const endpoint1 = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/corpedias?${query1String}`;
// console.log(`Final url: ${endpoint1}`); console.log(`Final url: ${endpoint1}`);
const response1 = await axios.get(endpoint1); const response1 = await axios.get(endpoint1);
const Corpedia = response1.data.data; const Corpedia = response1.data.data;
......
This file is too large to display.
...@@ -3350,8 +3350,8 @@ Free Quote Area CSS ...@@ -3350,8 +3350,8 @@ Free Quote Area CSS
.free-quote-inner { .free-quote-inner {
position: relative; position: relative;
z-index: 1; z-index: 1;
background-color: var(--blackColor); background-color:var(--blackColor);
border-radius: 20px; /* border-radius: 20px; */
padding-top: 100px; padding-top: 100px;
padding-left: 50px; padding-left: 50px;
padding-right: 50px; padding-right: 50px;
...@@ -8353,3 +8353,81 @@ ul.pagination.custom-pagination { ...@@ -8353,3 +8353,81 @@ ul.pagination.custom-pagination {
color: #fff; color: #fff;
background-color: var(--mainColor); background-color: var(--mainColor);
} }
/* download button */
.section-title-download {
position: relative;
padding-bottom: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
color: #fff;
}
.section-title-download .sub-title{
color: var(--mainColor);
}
.section-title-download h2 {
color: #fff;
}
.section-title-download p{
color: #fff;
}
/* button */
.default-btn-three {
display: inline-block;
border: none;
border-radius: 5px;
z-index: 1;
position: relative;
color: var(--whiteColor);
background-color: var(--mainColor);
transition: var(--transition);
text-align: center;
padding: 12px 65px 12px 30px;
font-size: var(--fontSize);
font-weight: 700;
}
.default-btn-three::before {
content: "";
position: absolute;
left: 0;
opacity: 0.4;
right: 0;
top: 0;
border-radius: 5px;
bottom: 0;
z-index: -1;
transition: var(--transition);
border: 1px solid var(--mainColor);
}
.default-btn-three i {
position: absolute;
right: 7px;
width: 35px;
color: var(--mainColor);
transition: var(--transition);
border-radius: 5px;
height: 35px;
font-size: 17px;
line-height: 35px;
background-color: var(--whiteColor);
top: 50%;
transform: translateY(-50%);
}
.default-btn-three:hover {
background-color: var(--blackColor);
color: var(--whiteColor);
border: 1px solid var(--mainColor);
}
.default-btn-three:hover::before {
border-color: var(--blackColor);
}
\ 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!