Update and rename index.mdx to zapier.mdx

.components/about/index.css

@@ -41,24 +41,34 @@
   line-height: 1.2;
   position: relative;
 }
-.con-content-block .conWhy .conText p {
+.con-content-block .conWhy .conText ul {
+  margin: 0;
+}
+.con-content-block .conWhy .conText ul li {
+  margin: 0;
+  font-size: inherit;
+}
+
+.con-content-block .conWhy .conText * {
   font-size: 1rem;
   max-width: 858px;
-  line-height: 1.3;
-  margin-top: 2rem;
+  line-height: 1.6;
+  margin-top: 1rem;
 }
+
 @media screen and (min-width: 480px) {
 }
 @media screen and (min-width: 576px) {
 }
 @media screen and (min-width: 768px) {
   .con-content-block .conWhy .conText h1,
   .con-content-block .conWhy .conText h2 {
-    font-size: 3.5rem;
+    font-size: 3.25rem;
   }
 
-  .con-content-block .conWhy .conText .desc {
+  .con-content-block .conWhy .conText * {
     font-size: 1.25rem;
+    margin-top: 2rem;
   }
 }
 @media screen and (min-width: 992px) {

.components/cta-section/index.css

@@ -24,6 +24,7 @@
   border: 6px solid #1500e0;
   border-radius: 3rem;
   display: flex;
+  flex-direction: column;
   background-color: #fbf6ff;
 
   .conLeft {
@@ -32,22 +33,22 @@
     border-radius: 3rem;
     height: 100%;
     margin: -6px;
-    padding: 4rem 4rem;
+    padding: 2rem;
     background-color: white;
 
     .conText {
       .title {
-        font-size: 3.5rem;
-        color: #16023e;
+        font-size: 2.25rem;
+        color: #1e293b;
         font-weight: 500;
         line-height: 1.2;
       }
 
       .desc {
-        font-size: 1.25rem;
+        font-size: 1rem;
         margin-top: 2rem;
         line-height: 1.4;
-        color: #16023e;
+        color: #1e293b;
       }
     }
   }
@@ -121,3 +122,32 @@
 .form-input input:focus + label {
   color: blue;
 }
+
+@media screen and (min-width: 768px) {
+  .cta-section .conCTA {
+    flex-direction: row;
+
+    .conLeft {
+      height: 100%;
+      padding: 4rem;
+
+      .conText {
+        .title {
+          font-size: 3.5rem;
+        }
+
+        .desc {
+          font-size: 1.25rem;
+        }
+      }
+    }
+  }
+
+  .cta-section .conCTA .conLeft {
+    padding: 4rem 2rem;
+  }
+
+  .cta-section .conCTA .conRight {
+    padding: 4rem 2rem;
+  }
+}

.components/feature-list/components/card/index.css

@@ -47,7 +47,6 @@
   margin-top: 0rem;
 }
 .con-card-carousel__card-text-para {
-  color: black;
   font-size: 0.875rem;
   line-height: 1.3;
 }
@@ -57,15 +56,19 @@
   margin-top: 1.5rem;
   padding: 0.8rem 2.6rem;
   text-decoration: none;
-  background-color: #7567ff;
+  color: #7567ff;
   border-radius: 2.6rem;
   font-weight: 500;
   cursor: pointer;
-  color: white;
+  border: 2px solid #7567ff;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
 }
 
 .con-card-carousel__card-text-link:hover {
   background-color: #7567ff;
+  color: white;
 }
 @media screen and (min-width: 480px) {
   .con-card-carousel__card-img {

.components/feature-list/components/card/index.jsx

@@ -16,7 +16,7 @@ const Card = ({ title, desc, url, buttonText, imgUrl, ...rest }) => {
         <div className="con-card-carousel__card-text">
           <h3 className="con-card-carousel__card-text-title">{title}</h3>
           <p className="con-card-carousel__card-text-para">{desc}</p>
-          {url && (
+          {buttonText && (
             <a href={url} className="con-card-carousel__card-text-link">
               {buttonText}
             </a>

.components/feature-list/index.css

@@ -1,6 +1,6 @@
 .con-carousel {
   background-color: #fff;
-  padding: 2rem 1rem;
+  padding: 4rem 1rem;
 }
 .con-carousel .conCards {
   max-width: calc(1500px - 10rem);

.components/feature-list/index.jsx

@@ -32,12 +32,14 @@ const Carousel = (props) => {
       </div>
       <div className="conCards">
         <div className="cards">
-          <button onClick={prev} className="navigate-btn left">
-            <img
-              src="https://www.iconpacks.net/icons/2/free-arrow-left-icon-3099-thumb.png"
-              alt="left"
-            />
-          </button>
+          {props.features.length > 1 && (
+            <button onClick={prev} className="navigate-btn left">
+              <img
+                src="https://www.iconpacks.net/icons/2/free-arrow-left-icon-3099-thumb.png"
+                alt="left"
+              />
+            </button>
+          )}
           {props.features.map(
             ({ title, imgUrl, desc, url, buttonText }, idx) => (
               <Card
@@ -50,25 +52,28 @@ const Carousel = (props) => {
                 imgUrl={imgUrl}
                 desc={desc}
                 url={url}
-                buttonText={buttonText || "Learn more"}
+                buttonText={buttonText}
               />
             ),
           )}
           <div className="navigate-con">
-            {props.features.map((_, index) => (
-              <button
-                key={index}
-                onClick={() => setCurrentCard(index)}
-                className={`navigate-circles ${currentCard === index ? "active" : ""}`}
-              ></button>
-            ))}
+            {props.features.length > 1 &&
+              props.features.map((_, index) => (
+                <button
+                  key={index}
+                  onClick={() => setCurrentCard(index)}
+                  className={`navigate-circles ${currentCard === index ? "active" : ""}`}
+                ></button>
+              ))}
           </div>
-          <button onClick={next} className="navigate-btn right">
-            <img
-              src="https://www.iconpacks.net/icons/2/free-arrow-left-icon-3099-thumb.png"
-              alt="right"
-            />
-          </button>
+          {props.features.length > 1 && (
+            <button onClick={next} className="navigate-btn right">
+              <img
+                src="https://www.iconpacks.net/icons/2/free-arrow-left-icon-3099-thumb.png"
+                alt="right"
+              />
+            </button>
+          )}
         </div>
       </div>
     </div>

.components/header/index.css

@@ -12,7 +12,7 @@ body.no-scroll {
   font-size: 1rem;
   padding: 1rem 0.5rem;
   position: relative;
-  color: #000;
+  color: #1e293b;
   background-color: transparent;
 }
 

.components/hero/index.css

@@ -1,6 +1,9 @@
 .container .conHero {
   padding: 9rem 0 4rem 0;
   background: #fff;
+  overflow: hidden;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
 .container .conHero .heading-con {
@@ -101,12 +104,12 @@
   position: relative;
 }
 .container__hero > *:not(:last-child) {
-  margin-bottom: 2rem;
+  margin-bottom: 0rem;
 }
 .container__hero-desc {
   padding: 0 0.4rem;
   line-height: 1.6rem;
-  font-size: 1;
+  font-size: 1rem;
   letter-spacing: 0.6px;
   text-align: center;
   max-width: none;
@@ -134,13 +137,20 @@
 }
 
 @media screen and (min-width: 480px) {
-  .container .conHero .heading {
-    font-size: 3.125rem;
-  }
 }
 @media screen and (min-width: 576px) {
 }
 @media screen and (min-width: 768px) {
+  .container__hero > *:not(:last-child) {
+    margin-bottom: 2rem;
+  }
+  .container .conHero .heading {
+    font-size: 3.25rem;
+  }
+  .container .conHero {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
 }
 @media screen and (min-width: 992px) {
   .container .conHero .heading {

.components/integration-doc/index.css

@@ -29,13 +29,13 @@
   padding: 0;
   position: relative;
   display: flex;
+  flex-direction: column;
   align-items: center;
 }
 .con-integration-doc .conWhy .con-img {
   position: relative;
   width: 100%;
   max-width: 400px;
-  margin-right: 2rem;
 }
 
 .con-integration-doc .conWhy .con-img img {
@@ -44,7 +44,6 @@
 }
 .con-integration-doc .conWhy .conText {
   position: relative;
-  width: fit-content;
 }
 .con-integration-doc .conWhy .conText .conTitle {
   position: relative;
@@ -58,11 +57,16 @@
   position: relative;
 }
 
-.con-integration-doc .conWhy .conText .conBtn {
+.con-integration-doc .conWhy .conBtn {
   display: flex;
   justify-content: center;
 }
-.con-integration-doc .conWhy .conText .btn {
+
+.con-integration-doc .conWhy .conBtn.desktop {
+  display: none;
+}
+
+.con-integration-doc .conWhy .btn {
   background-color: #7567ff;
   color: white;
   padding: 1.2rem 3.2rem;
@@ -74,7 +78,7 @@
 }
 .con-integration-doc .conWhy .conText .desc {
   font-size: 1rem;
-  max-width: 858px;
+  max-width: 658px;
   line-height: 1.3;
   margin-top: 1rem;
 }
@@ -83,13 +87,34 @@
 @media screen and (min-width: 576px) {
 }
 @media screen and (min-width: 768px) {
+  .con-integration-doc .conWhy {
+    flex-direction: row;
+  }
   .con-integration-doc .conWhy .conText .conTitle .title {
     font-size: 3.5rem;
   }
 
   .con-integration-doc .conWhy .conText .desc {
     font-size: 1.25rem;
   }
+
+  .con-integration-doc .conWhy .conBtn.mobile {
+    display: none;
+  }
+  .con-integration-doc .conWhy .con-img {
+    position: relative;
+    width: 100%;
+    max-width: 400px;
+    margin-right: 2rem;
+  }
+
+  .con-integration-doc .conWhy .conBtn.desktop {
+    display: flex;
+  }
+
+  .con-integration-doc .conWhy .conText {
+    flex: 1;
+  }
 }
 @media screen and (min-width: 992px) {
 }

.components/integration-doc/index.jsx

@@ -11,14 +11,23 @@ const IntegrationDoc = (props) => {
               <h2 className="title">{props.heading}</h2>
             </div>
             <p className="desc">{props.desc}</p>
-            <div className="conBtn">
-              <a className="btn" href="#">
-                See documentation
-              </a>
-            </div>
+            {props?.btnText && (
+              <div className="conBtn desktop">
+                <a className="btn" href={props.url}>
+                  {props.btnText}
+                </a>
+              </div>
+            )}
           </div>
           <div className="con-img">
             <img src={props.img} alt="integration-doc" />
+            {props?.btnText && (
+              <div className="conBtn mobile">
+                <a className="btn" href={props.url}>
+                  {props.btnText}
+                </a>
+              </div>
+            )}
           </div>
         </div>
       </div>