added components

.components/about/index.css

@@ -0,0 +1,71 @@
+.con-content-block {
+  margin-top: 0;
+  padding: 0 2rem;
+  position: relative;
+  margin-bottom: 0;
+  overflow: hidden;
+  background-color: #fff;
+}
+.con-content-block .conBg {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+  position: relative;
+}
+.con-content-block .conBg::before {
+  content: "";
+  background: url("https://www.sharefable.com/bg-image/spiral-1.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+  position: absolute;
+  height: 100%;
+  width: 30%;
+  top: 0;
+  right: 0;
+  transform: scale(1.4) rotate(20deg);
+}
+.con-content-block .conWhy {
+  margin: 0 auto;
+  max-width: calc(1500px - 10rem);
+  padding: 0;
+  position: relative;
+}
+.con-content-block .conWhy .conText {
+  position: relative;
+  width: fit-content;
+}
+.con-content-block .conWhy .conText h1,
+.con-content-block .conWhy .conText h2 {
+  max-width: 680px;
+  font-size: 2.25rem;
+  font-weight: 500;
+  line-height: 1.2;
+  position: relative;
+}
+.con-content-block .conWhy .conText p {
+  font-size: 1rem;
+  max-width: 858px;
+  line-height: 1.3;
+  margin-top: 2rem;
+}
+@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;
+  }
+
+  .con-content-block .conWhy .conText .desc {
+    font-size: 1.25rem;
+  }
+}
+@media screen and (min-width: 992px) {
+}
+@media screen and (min-width: 1024px) {
+}
+@media screen and (min-width: 1200px) {
+}
+@media screen and (min-width: 1400px) {
+}

.components/about/index.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import "./index.css";
+
+const About = (props) => {
+  return (
+    <section className="con-content-block">
+      <div className="conBg">
+        <div className="conWhy">
+          <div className="conText">{props.children}</div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default About;

.components/cta-section/index.css

@@ -0,0 +1,123 @@
+.cta-section {
+  border-bottom-left-radius: 3rem;
+  border-bottom-right-radius: 3rem;
+  margin-top: 3rem;
+}
+
+.cta-section .con-cta {
+  margin-top: 0;
+  padding: 8rem 2rem;
+  position: relative;
+  margin-bottom: 0;
+  overflow: hidden;
+  background-color: white;
+  border-radius: 3rem;
+  z-index: 2;
+}
+
+.cta-section .conCTA {
+  margin: 0 auto;
+  max-width: calc(1500px - 10rem);
+  padding: 0;
+  position: relative;
+  display: flex;
+  border: 6px solid #1500e0;
+  border-radius: 3rem;
+  display: flex;
+  background-color: #fbf6ff;
+
+  .conLeft {
+    flex: 0.6;
+    border: 6px solid #fedf64;
+    border-radius: 3rem;
+    height: 100%;
+    margin: -6px;
+    padding: 4rem 4rem;
+    background-color: white;
+
+    .conText {
+      .title {
+        font-size: 3.5rem;
+        color: #16023e;
+        font-weight: 500;
+        line-height: 1.2;
+      }
+
+      .desc {
+        font-size: 1.25rem;
+        margin-top: 2rem;
+        line-height: 1.4;
+        color: #16023e;
+      }
+    }
+  }
+
+  .conRight {
+    padding: 4rem 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: url("https://www.sharefable.com/bg-image/bg-spiral-cta.svg");
+    background-repeat: no-repeat;
+    background-position-y: -2rem;
+    background-position-x: -4rem;
+    background-size: cover;
+    flex: 0.4;
+
+    .btn {
+      background-color: #7567ff;
+      color: white;
+      padding: 1.2rem 3.2rem;
+      border: none;
+      font-weight: 700;
+      font-size: 1rem;
+      border-radius: 4rem;
+    }
+  }
+}
+
+.conRight .form {
+  width: 300px;
+  margin: 0 auto;
+}
+
+.conRight .form-input {
+  position: relative;
+  margin-bottom: 15px;
+}
+.conRight .form-input input {
+  display: block;
+  width: 100%;
+  background: transparent;
+  border: solid 1px #16023e;
+  transition: all 0.3s ease;
+  padding: 14px 15px;
+  border-radius: 4px;
+}
+.conRight .form-input input:focus {
+  border-color: blue;
+}
+.conRight .form-input label {
+  position: absolute;
+  cursor: text;
+  z-index: 2;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 10px;
+  font-size: 12px;
+  font-weight: 500;
+  background: transparent;
+  padding: 2px 8px;
+  color: #999;
+  background-color: #fbf6ff;
+  transition: all 0.3s ease;
+  pointer-events: none;
+}
+.form-input input:focus + label,
+.form-input input:not(:placeholder-shown) + label {
+  font-size: 11px;
+  top: -4px;
+}
+.form-input input:focus + label {
+  color: blue;
+}

.components/cta-section/index.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import "./index.css";
+
+const CTASection = (props) => {
+  return (
+    <div
+      style={{
+        ...props.style,
+      }}
+      className="cta-section"
+    >
+      <div className="con-cta">
+        <div className="conCTA">
+          <div className="conLeft">
+            <div className="conText">
+              <h2 className="title">{props.heading}</h2>
+              <p className="desc">{props.desc}</p>
+            </div>
+          </div>
+          <div className="conRight">
+            <a href={props.url} style={{ cursor: "pointer" }} className="btn">
+              {props.buttonText}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CTASection;

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

@@ -0,0 +1,110 @@
+.con-card-carousel {
+  position: relative;
+  padding: 0rem 1rem;
+  position: relative;
+  margin: 0 auto;
+  flex: 1;
+  min-width: 100%;
+  box-sizing: border-box;
+}
+.con-card-carousel__card {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto;
+  gap: 2rem;
+  position: relative;
+  padding: 2.4rem 1.8rem;
+  align-items: center;
+}
+.con-card-carousel__card-img {
+  position: relative;
+  width: 17rem;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.con-card-carousel__card-img img {
+  object-fit: contain;
+  width: 100%;
+  max-width: 32rem;
+}
+
+.con-card-carousel__card-text {
+  user-select: none;
+  margin-top: 0.5rem;
+  max-width: 32rem;
+  place-self: center;
+}
+.con-card-carousel__card-text > *:not(:last-child) {
+  margin-bottom: 1rem;
+}
+.con-card-carousel__card-text-title {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.2;
+  margin-top: 0rem;
+}
+.con-card-carousel__card-text-para {
+  color: black;
+  font-size: 0.875rem;
+  line-height: 1.3;
+}
+.con-card-carousel__card-text-link {
+  display: inline-block;
+  margin: 0 auto;
+  margin-top: 1.5rem;
+  padding: 0.8rem 2.6rem;
+  text-decoration: none;
+  background-color: #7567ff;
+  border-radius: 2.6rem;
+  font-weight: 500;
+  cursor: pointer;
+  color: white;
+}
+
+.con-card-carousel__card-text-link:hover {
+  background-color: #7567ff;
+}
+@media screen and (min-width: 480px) {
+  .con-card-carousel__card-img {
+    width: 20rem;
+  }
+}
+@media screen and (min-width: 576px) {
+  .con-card-carousel__card-img {
+    width: 20rem;
+  }
+}
+@media screen and (min-width: 768px) {
+  .con-card-carousel__card-text {
+    margin-top: 1.5rem;
+  }
+  .con-card-carousel__card {
+    grid-template-columns: 1fr 1fr;
+  }
+  .con-card-carousel__card-img {
+    width: 100%;
+  }
+  .con-card-carousel__card-text-title {
+    font-size: 2rem;
+  }
+  .con-card-carousel__card-text-para {
+    font-size: 1.25rem;
+  }
+  .con-card-carousel__card-text > *:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+  .con-card-carousel {
+    padding: 2.4rem 1.8rem;
+  }
+}
+@media screen and (min-width: 992px) {
+}
+@media screen and (min-width: 1024px) {
+}
+@media screen and (min-width: 1200px) {
+}
+@media screen and (min-width: 1400px) {
+}

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

@@ -0,0 +1,30 @@
+import React from "react";
+import "./index.css";
+
+const Card = ({ title, desc, url, buttonText, imgUrl, ...rest }) => {
+  return (
+    <div className={`con-card-carousel`} {...rest}>
+      <div className="con-card-carousel__card">
+        <div className="con-card-carousel__card-img">
+          <img
+            src={imgUrl}
+            style={{ objectFit: "contain" }}
+            layout="fill"
+            alt="Card image"
+          />
+        </div>
+        <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 && (
+            <a href={url} className="con-card-carousel__card-text-link">
+              {buttonText}
+            </a>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Card;