download section add

components/reuseables/DownloadBtn.js

+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;

container/Knowledge/Corpedia.js

@@ -34,11 +34,10 @@ import { cleanImage } from "@/layout/imageHandling";
 //   },
 // ];
 
-const Corpedia = ({Corpedia, corpedialist}) => {
+const Corpedia = ({ Corpedia, corpedialist }) => {
   // console.log(corpedialist,"corpedialist")
   const corpedialistlatest = corpedialist.slice(0, 3);
 
-  
   return (
     <>
       <div className="corpedia-area pt-70 pb-100 bg-light">
@@ -46,12 +45,9 @@ const Corpedia = ({Corpedia, corpedialist}) => {
           <Row>
             <Col lg={8} md={8} sm={12}>
               <div className="text-align-left">
-                
                 <Heading heading={Corpedia?.Title} el="h2" />
 
-                <p className="mb-lg-5 mb-3">
-                {Corpedia?.Description}
-                </p>
+                <p className="mb-lg-5 mb-3">{Corpedia?.Description}</p>
               </div>
             </Col>
             <Col
@@ -80,13 +76,21 @@ const Corpedia = ({Corpedia, corpedialist}) => {
                       <div className="d-flex align-items-center">
                         <Image
                           src={cleanImage(service?.Image?.url)}
-                          alt={service?.alternativeText ? service?.alternativeText : "image"}
+                          alt={
+                            service?.alternativeText
+                              ? service?.alternativeText
+                              : "image"
+                          }
                           width={40}
                           height={40}
                           className="img-fluid me-3"
                         />
                         <h3>
-                          <Link href={`/corpedia/${service?.slug ? service?.slug : "#"}`}>
+                          <Link
+                            href={`/corpedia/${
+                              service?.slug ? service?.slug : "#"
+                            }`}
+                          >
                             {service.Title}
                           </Link>
                         </h3>
@@ -94,8 +98,12 @@ const Corpedia = ({Corpedia, corpedialist}) => {
 
                       <p>{service.Description}</p>
 
-                      <Link href={`/corpedia/${service?.slug ? service?.slug : "#"}`}
-                        className="default-btn" target="_blank"
+                      <Link
+                        href={`/corpedia/${
+                          service?.slug ? service?.slug : "#"
+                        }`}
+                        className="default-btn"
+                        target="_blank"
                       >
                         Read More
                         <i className="ri-arrow-right-line"></i>

pages/corpedia/[corpediaslug].js

@@ -10,6 +10,7 @@ import LeftSideImage from "@/container/Corpedia/LeftSideImage";
 import RightSideImage from "@/container/Corpedia/RightSideImage";
 import TableData from "@/components/reuseables/services/TableData";
 import Details from "@/components/reuseables/services/Details";
+import DownloadBtn from "@/components/reuseables/DownloadBtn";
 
 const details = ({ Corpedia }) => {
   const introDeatils = Corpedia;
@@ -86,6 +87,9 @@ const details = ({ Corpedia }) => {
               case "dynamic-zone.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:
                 return null;
             }
@@ -111,6 +115,8 @@ export async function getServerSideProps({ params }) {
         "CorpediaDetails.FactList.Icon",
         "CorpediaDetails.KeyFeatureList.Icon",
         "CorpediaDetails.Details",
+        "CorpediaDetails.DownloadBtn",
+        "CorpediaDetails.CTA"
       ],
       filters: {
         slug: {
@@ -124,7 +130,7 @@ export async function getServerSideProps({ params }) {
     });
 
     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 Corpedia = response1.data.data;

styles/styles.css

@@ -3350,8 +3350,8 @@ Free Quote Area CSS
 .free-quote-inner {
   position: relative;
   z-index: 1;
-  background-color: var(--blackColor);
-  border-radius: 20px;
+  background-color:var(--blackColor);
+  /* border-radius: 20px; */
   padding-top: 100px;
   padding-left: 50px;
   padding-right: 50px;
@@ -8352,4 +8352,82 @@ ul.pagination.custom-pagination {
 .custom-pagination li a:hover{
   color: #fff;
   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