From 0486795ae8e6d4afc537d2052beb8a253ada1779 Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 17:59:15 -0600
Subject: [PATCH 01/19] :construction: add initial component files

---
 components/Footer.jsx                  | 0
 components/Sections/Considerations.jsx | 0
 components/Sections/FAQ.jsx            | 0
 components/Sections/FactCards.jsx      | 0
 components/Sections/FactSnippets.jsx   | 0
 components/Sections/InfoCarousel.jsx   | 0
 components/Sections/NavigationHero.jsx | 0
 components/Sections/Stats1.jsx         | 0
 components/Sections/Stats2.jsx         | 0
 components/Sections/Team.jsx           | 0
 components/Sections/WhyInvest1.jsx     | 0
 components/Sections/WhyInvest2.jsx     | 0
 12 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 components/Footer.jsx
 create mode 100644 components/Sections/Considerations.jsx
 create mode 100644 components/Sections/FAQ.jsx
 create mode 100644 components/Sections/FactCards.jsx
 create mode 100644 components/Sections/FactSnippets.jsx
 create mode 100644 components/Sections/InfoCarousel.jsx
 create mode 100644 components/Sections/NavigationHero.jsx
 create mode 100644 components/Sections/Stats1.jsx
 create mode 100644 components/Sections/Stats2.jsx
 create mode 100644 components/Sections/Team.jsx
 create mode 100644 components/Sections/WhyInvest1.jsx
 create mode 100644 components/Sections/WhyInvest2.jsx

diff --git a/components/Footer.jsx b/components/Footer.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/Sections/Considerations.jsx b/components/Sections/Considerations.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/Sections/FAQ.jsx b/components/Sections/FAQ.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/Sections/FactCards.jsx b/components/Sections/FactCards.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/Sections/FactSnippets.jsx b/components/Sections/FactSnippets.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/Sections/InfoCarousel.jsx b/components/Sections/InfoCarousel.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/Sections/NavigationHero.jsx b/components/Sections/NavigationHero.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/Sections/Stats1.jsx b/components/Sections/Stats1.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/Sections/Stats2.jsx b/components/Sections/Stats2.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/Sections/Team.jsx b/components/Sections/Team.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/Sections/WhyInvest1.jsx b/components/Sections/WhyInvest1.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/Sections/WhyInvest2.jsx b/components/Sections/WhyInvest2.jsx
new file mode 100644
index 0000000..e69de29

From 9e24c36280eadad2ecca05694760755ce2ac85f4 Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 18:00:57 -0600
Subject: [PATCH 02/19] ../

---
 components/Footer.jsx | 173 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 173 insertions(+)

diff --git a/components/Footer.jsx b/components/Footer.jsx
index e69de29..06cd350 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -0,0 +1,173 @@
+export default function Footer({ entityTitle }) {
+  return (
+    <section id="footer" className="py-20">
+      <div className="container px-4 mx-auto">
+        <div className="flex flex-wrap">
+          <div className="w-full lg:w-3/5 flex flex-wrap">
+            <div className="w-1/2 lg:w-1/4 mb-8">
+              <h3 className="mb-4 text-lg font-bold font-heading">Company</h3>
+              <ul className="text-sm">
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    About Us
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Careers
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Press
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Blog
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div className="w-1/2 lg:w-1/4 mb-8">
+              <h3 className="mb-4 text-lg font-bold font-heading">Pages</h3>
+              <ul className="text-sm">
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Login
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Register
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Add list
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Contact
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div className="w-1/2 lg:w-1/4 mb-8">
+              <h3 className="mb-4 text-lg font-bold font-heading">Legal</h3>
+              <ul className="text-sm">
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Terms
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    About Us
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Team
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Privacy
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div className="w-1/2 lg:w-1/4 mb-8">
+              <h3 className="mb-4 text-lg font-bold font-heading">Resources</h3>
+              <ul className="text-sm">
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Blog
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Service
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Product
+                  </a>
+                </li>
+                <li className="mb-2">
+                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
+                    Pricing
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className="order-first lg:order-last mb-10 lg:mb-0 w-full lg:w-2/5">
+            <h3 className="mb-4 text-lg font-bold font-heading">Subscribe</h3>
+            <p className="mb-5 text-gray-500">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </p>
+            <input
+              className="w-full lg:w-2/3 mb-4 pl-4 py-3 mr-4 border rounded"
+              type="email"
+              placeholder="Type your e-mail"
+            />
+            <button className="inline-block px-5 py-3 text-sm bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200">
+              Action
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="mt-4 lg:mt-16 mb-8 border-b border-indigo-50" />
+      <div className="container px-4 mx-auto">
+        <div className="flex flex-wrap items-center">
+          <div className="w-full lg:w-1/2 mb-6 lg:mb-0">
+            <a className="text-gray-600 text-2xl leading-none" href="#">
+              <img
+                className="h-8"
+                src="/logos/plain-indigo.svg"
+                alt={`${entityTitle} logo`}
+                width="auto"
+                height="2rem"
+              />
+            </a>
+            <p className="hidden lg:block mt-3 text-sm text-gray-500">
+              All rights reserved. © Plain Inc. 2022
+            </p>
+          </div>
+          <div className="w-full lg:w-1/2 mb-4 lg:mb-0">
+            <div className="mb-4 flex lg:justify-end">
+              <a className="inline-block mr-8" href="#">
+                <img
+                  alt="Facebook (Meta) social link icon"
+                  src="/socials/facebook.svg"
+                />
+              </a>
+              <a className="inline-block mr-8" href="#">
+                <img
+                  src="/socials/twitter.svg"
+                  alt="Twitter social link icon"
+                />
+              </a>
+              <a className="inline-block mr-8" href="#">
+                <img src="/socials/github.svg" alt="Github link icon" />
+              </a>
+              <a className="inline-block mr-8" href="#">
+                <img src="/socials/instagram.svg" alt="Instagram link icon" />
+              </a>
+              <a className="inline-block" href="#">
+                <img src="/socials/linkedin.svg" alt="LinkedIn link icon" />
+              </a>
+            </div>
+          </div>
+          <p className="lg:hidden text-sm text-gray-500">
+            All rights reserved. © Plain Inc. 2022
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

From 38aaeb1eeb0608a342d2a5f8194c3fb90812a77f Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 18:01:17 -0600
Subject: [PATCH 03/19] :recycle: add Footer import [sc-561]

---
 pages/index.jsx | 176 +-----------------------------------------------
 1 file changed, 2 insertions(+), 174 deletions(-)

diff --git a/pages/index.jsx b/pages/index.jsx
index ff8a570..952ce07 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -1,3 +1,5 @@
+import Footer from "../components/Footer";
+
 function NavigationHero({ entityTitle }) {
   return (
     <section id="navigation-hero">
@@ -1403,180 +1405,6 @@ function FAQ({}) {
     </section>
   );
 }
-function Footer({ entityTitle }) {
-  return (
-    <section id="footer" className="py-20">
-      <div className="container px-4 mx-auto">
-        <div className="flex flex-wrap">
-          <div className="w-full lg:w-3/5 flex flex-wrap">
-            <div className="w-1/2 lg:w-1/4 mb-8">
-              <h3 className="mb-4 text-lg font-bold font-heading">Company</h3>
-              <ul className="text-sm">
-                <li className="mb-2">
-                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
-                    About Us
-                  </a>
-                </li>
-                <li className="mb-2">
-                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
-                    Careers
-                  </a>
-                </li>
-                <li className="mb-2">
-                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
-                    Press
-                  </a>
-                </li>
-                <li className="mb-2">
-                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
-                    Blog
-                  </a>
-                </li>
-              </ul>
-            </div>
-            <div className="w-1/2 lg:w-1/4 mb-8">
-              <h3 className="mb-4 text-lg font-bold font-heading">Pages</h3>
-              <ul className="text-sm">
-                <li className="mb-2">
-                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
-                    Login
-                  </a>
-                </li>
-                <li className="mb-2">
-                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
-                    Register
-                  </a>
-                </li>
-                <li className="mb-2">
-                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
-                    Add list
-                  </a>
-                </li>
-                <li className="mb-2">
-                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
-                    Contact
-                  </a>
-                </li>
-              </ul>
-            </div>
-            <div className="w-1/2 lg:w-1/4 mb-8">
-              <h3 className="mb-4 text-lg font-bold font-heading">Legal</h3>
-              <ul className="text-sm">
-                <li className="mb-2">
-                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
-                    Terms
-                  </a>
-                </li>
-                <li className="mb-2">
-                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
-                    About Us
-                  </a>
-                </li>
-                <li className="mb-2">
-                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
-                    Team
-                  </a>
-                </li>
-                <li className="mb-2">
-                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
-                    Privacy
-                  </a>
-                </li>
-              </ul>
-            </div>
-            <div className="w-1/2 lg:w-1/4 mb-8">
-              <h3 className="mb-4 text-lg font-bold font-heading">Resources</h3>
-              <ul className="text-sm">
-                <li className="mb-2">
-                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
-                    Blog
-                  </a>
-                </li>
-                <li className="mb-2">
-                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
-                    Service
-                  </a>
-                </li>
-                <li className="mb-2">
-                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
-                    Product
-                  </a>
-                </li>
-                <li className="mb-2">
-                  <a className="text-indigo-500 hover:text-indigo-700" href="#">
-                    Pricing
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className="order-first lg:order-last mb-10 lg:mb-0 w-full lg:w-2/5">
-            <h3 className="mb-4 text-lg font-bold font-heading">Subscribe</h3>
-            <p className="mb-5 text-gray-500">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            </p>
-            <input
-              className="w-full lg:w-2/3 mb-4 pl-4 py-3 mr-4 border rounded"
-              type="email"
-              placeholder="Type your e-mail"
-            />
-            <button className="inline-block px-5 py-3 text-sm bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200">
-              Action
-            </button>
-          </div>
-        </div>
-      </div>
-      <div className="mt-4 lg:mt-16 mb-8 border-b border-indigo-50" />
-      <div className="container px-4 mx-auto">
-        <div className="flex flex-wrap items-center">
-          <div className="w-full lg:w-1/2 mb-6 lg:mb-0">
-            <a className="text-gray-600 text-2xl leading-none" href="#">
-              <img
-                className="h-8"
-                src="/logos/plain-indigo.svg"
-                alt={`${entityTitle} logo`}
-                width="auto"
-                height="2rem"
-              />
-            </a>
-            <p className="hidden lg:block mt-3 text-sm text-gray-500">
-              All rights reserved. © Plain Inc. 2022
-            </p>
-          </div>
-          <div className="w-full lg:w-1/2 mb-4 lg:mb-0">
-            <div className="mb-4 flex lg:justify-end">
-              <a className="inline-block mr-8" href="#">
-                <img
-                  alt="Facebook (Meta) social link icon"
-                  src="/socials/facebook.svg"
-                />
-              </a>
-              <a className="inline-block mr-8" href="#">
-                <img
-                  src="/socials/twitter.svg"
-                  alt="Twitter social link icon"
-                />
-              </a>
-              <a className="inline-block mr-8" href="#">
-                <img src="/socials/github.svg" alt="Github link icon" />
-              </a>
-              <a className="inline-block mr-8" href="#">
-                <img src="/socials/instagram.svg" alt="Instagram link icon" />
-              </a>
-              <a className="inline-block" href="#">
-                <img src="/socials/linkedin.svg" alt="LinkedIn link icon" />
-              </a>
-            </div>
-          </div>
-          <p className="lg:hidden text-sm text-gray-500">
-            All rights reserved. © Plain Inc. 2022
-          </p>
-        </div>
-      </div>
-    </section>
-  );
-}
-
 export default function Funded() {
   const entityTitle = "Tincre";
   const title = `Funded, by ${entityTitle}`;

From 7910dc660b21ece90a14394816fb8b71210641ca Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 18:16:49 -0600
Subject: [PATCH 04/19] :sparkles: add initial section components [sc-561]

---
 components/Sections/Considerations.jsx | 163 ++++++++++++++
 components/Sections/FAQ.jsx            | 282 +++++++++++++++++++++++++
 components/Sections/FactCards.jsx      |  94 +++++++++
 components/Sections/FactSnippets.jsx   | 125 +++++++++++
 components/Sections/InfoCarousel.jsx   |  64 ++++++
 components/Sections/NavigationHero.jsx | 189 +++++++++++++++++
 components/Sections/Stats1.jsx         |  90 ++++++++
 components/Sections/Stats2.jsx         | 170 +++++++++++++++
 components/Sections/Team.jsx           | 123 +++++++++++
 components/Sections/WhyInvest1.jsx     |  68 ++++++
 components/Sections/WhyInvest2.jsx     |  35 +++
 11 files changed, 1403 insertions(+)

diff --git a/components/Sections/Considerations.jsx b/components/Sections/Considerations.jsx
index e69de29..c0a4ca4 100644
--- a/components/Sections/Considerations.jsx
+++ b/components/Sections/Considerations.jsx
@@ -0,0 +1,163 @@
+export default function Considerations({}) {
+  return (
+    <section id="considerations" className="py-20">
+      <div className="container px-4 mx-auto">
+        <div className="max-w-2xl mx-auto">
+          <h2 className="mb-12 text-3xl font-bold font-heading">
+            Decisions To Consider Before Wireframing
+          </h2>
+          <ul>
+            <li className="mb-8">
+              <button className="group w-full flex justify-between items-center text-left font-bold font-heading">
+                <span className="hover:text-indigo-500 text-lg font-bold font-heading">
+                  Donec sed leo sit amet ante ornare laoreet in quis est?
+                </span>
+                <svg
+                  className="flex-shrink-0 w-4 h-4 ml-2 text-indigo-500"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </button>
+              <p className="hidden mt-2 text-lg text-gray-500 leading-loose">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
+                quis ultricies est. Duis nec hendrerit magna. Ut vel orci
+                gravida, hendrerit enim non, gravida turpis. Praesent non lectus
+                porttitor, scelerisque nulla nec, ornare neque. Integer massa
+                libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et
+                massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla,
+                quis varius risus. Suspendisse ultrices ut lectus non laoreet.
+                Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus
+                erat non dui volutpat eleifend.
+              </p>
+            </li>
+            <li className="mb-8">
+              <button className="group w-full flex justify-between items-center text-left font-bold font-heading">
+                <span className="hover:text-indigo-500 text-lg font-bold font-heading">
+                  Fusce eget nunc et libero accumsan rutrum quis nec lectus?
+                </span>
+                <svg
+                  className="flex-shrink-0 w-4 h-4 ml-2 text-indigo-500"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M5 15l7-7 7 7"
+                  />
+                </svg>
+              </button>
+              <p className="mt-2 text-lg text-gray-500 leading-loose">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
+                euismod orci sed tristique placerat. Fusce in ligula urna. Fusce
+                eget nunc et libero accumsan rutrum quis nec lectus. Quisque
+                luctus sem nibh, quis ornare neque consectetur varius. Maecenas
+                rhoncus consectetur rutrum.
+              </p>
+            </li>
+            <li className="mb-8">
+              <button className="group w-full flex justify-between items-center text-left font-bold font-heading">
+                <span className="hover:text-indigo-500 text-lg font-bold font-heading">
+                  Mauris vitae ex ut lectus cursus ornare?
+                </span>
+                <svg
+                  className="flex-shrink-0 w-4 h-4 ml-2 text-indigo-500"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </button>
+              <p className="hidden mt-2 text-lg text-gray-500 leading-loose">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
+                quis ultricies est. Duis nec hendrerit magna. Ut vel orci
+                gravida, hendrerit enim non, gravida turpis. Praesent non lectus
+                porttitor, scelerisque nulla nec, ornare neque. Integer massa
+                libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et
+                massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla,
+                quis varius risus. Suspendisse ultrices ut lectus non laoreet.
+                Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus
+                erat non dui volutpat eleifend.
+              </p>
+            </li>
+            <li className="mb-8">
+              <button className="group w-full flex justify-between items-center text-left">
+                <span className="hover:text-indigo-500 text-lg font-bold font-heading">
+                  Nam consequat, augue sed rutrum faucibus?
+                </span>
+                <svg
+                  className="flex-shrink-0 w-4 h-4 ml-2 text-indigo-500"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </button>
+              <p className="hidden mt-2 text-lg text-gray-500 leading-loose">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
+                euismod orci sed tristique placerat. Fusce in ligula urna. Fusce
+                eget nunc et libero accumsan rutrum quis nec lectus. Quisque
+                luctus sem nibh, quis ornare neque consectetur varius. Maecenas
+                rhoncus consectetur rutrum.
+              </p>
+            </li>
+            <li className="mb-8">
+              <button className="group w-full flex justify-between items-center text-left">
+                <span className="hover:text-indigo-500 text-lg font-bold font-heading">
+                  Cras at ante non ligula pharetra elementum?
+                </span>
+                <svg
+                  className="flex-shrink-0 w-4 h-4 ml-2 text-indigo-500"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </button>
+              <p className="hidden mt-2 text-lg text-gray-500 leading-loose">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
+                euismod orci sed tristique placerat. Fusce in ligula urna. Fusce
+                eget nunc et libero accumsan rutrum quis nec lectus. Quisque
+                luctus sem nibh, quis ornare neque consectetur varius. Maecenas
+                rhoncus consectetur rutrum.
+              </p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/Sections/FAQ.jsx b/components/Sections/FAQ.jsx
index e69de29..a3a3330 100644
--- a/components/Sections/FAQ.jsx
+++ b/components/Sections/FAQ.jsx
@@ -0,0 +1,282 @@
+export default function FAQ({}) {
+  return (
+    <section id="faq" className="py-20">
+      <div className="container px-4 mx-auto">
+        <div className="mb-16 text-center">
+          <span className="text-xs font-semibold text-indigo-500 uppercase">
+            Lorem ipsum
+          </span>
+          <h2 className="mt-2 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+            Frequently Asked Questions
+          </h2>
+        </div>
+        <div className="flex flex-wrap -mx-4 -mb-8">
+          <div className="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
+            <div>
+              <span className="mr-6 mb-6 flex items-center justify-center w-16 h-16 p-3 bg-indigo-500 rounded-full">
+                <svg
+                  className="text-gray-50"
+                  width={32}
+                  height={32}
+                  viewBox="0 0 32 32"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <h3 className="mb-2 text-lg lg:text-2xl font-bold font-heading">
+                Neque porro quisquam est
+              </h3>
+              <ul className="list-inside list-disc leading-loose text-gray-500">
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Etiam pellentesque non nibh
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Mauris posuere
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Tellus sit amet tempus vestibulum
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Erat augue imperdiet neque
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
+            <div>
+              <span className="mr-6 mb-6 flex items-center justify-center w-16 h-16 p-3 bg-indigo-500 rounded-full">
+                <svg
+                  className="text-gray-50"
+                  width={32}
+                  height={32}
+                  viewBox="0 0 32 32"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <h3 className="mb-2 text-lg lg:text-2xl font-bold font-heading">
+                Neque porro quisquam est
+              </h3>
+              <ul className="list-inside list-disc leading-loose text-gray-500">
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Etiam pellentesque non nibh
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Mauris posuere
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Tellus sit amet tempus vestibulum
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Erat augue imperdiet neque
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
+            <div>
+              <span className="mr-6 mb-6 flex items-center justify-center w-16 h-16 p-3 bg-indigo-500 rounded-full">
+                <svg
+                  className="text-gray-50"
+                  width={32}
+                  height={32}
+                  viewBox="0 0 32 32"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <h3 className="mb-2 text-lg lg:text-2xl font-bold font-heading">
+                Neque porro quisquam est
+              </h3>
+              <ul className="list-inside list-disc leading-loose text-gray-500">
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Etiam pellentesque non nibh
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Mauris posuere
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Tellus sit amet tempus vestibulum
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Erat augue imperdiet neque
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
+            <div>
+              <span className="mr-6 mb-6 flex items-center justify-center w-16 h-16 p-3 bg-indigo-500 rounded-full">
+                <svg
+                  className="text-gray-50"
+                  width={32}
+                  height={32}
+                  viewBox="0 0 32 32"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <h3 className="mb-2 text-lg lg:text-2xl font-bold font-heading">
+                Neque porro quisquam est
+              </h3>
+              <ul className="list-inside list-disc leading-loose text-gray-500">
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Etiam pellentesque non nibh
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Mauris posuere
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Tellus sit amet tempus vestibulum
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Erat augue imperdiet neque
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
+            <div>
+              <span className="mr-6 mb-6 flex items-center justify-center w-16 h-16 p-3 bg-indigo-500 rounded-full">
+                <svg
+                  className="text-gray-50"
+                  width={32}
+                  height={32}
+                  viewBox="0 0 32 32"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <h3 className="mb-2 text-lg lg:text-2xl font-bold font-heading">
+                Neque porro quisquam est
+              </h3>
+              <ul className="list-inside list-disc leading-loose text-gray-500">
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Etiam pellentesque non nibh
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Mauris posuere
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Tellus sit amet tempus vestibulum
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Erat augue imperdiet neque
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div className="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
+            <div>
+              <span className="mr-6 mb-6 flex items-center justify-center w-16 h-16 p-3 bg-indigo-500 rounded-full">
+                <svg
+                  className="text-gray-50"
+                  width={32}
+                  height={32}
+                  viewBox="0 0 32 32"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <h3 className="mb-2 text-lg lg:text-2xl font-bold font-heading">
+                Neque porro quisquam est
+              </h3>
+              <ul className="list-inside list-disc leading-loose text-gray-500">
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Etiam pellentesque non nibh
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Mauris posuere
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Tellus sit amet tempus vestibulum
+                  </a>
+                </li>
+                <li className="text-indigo-500">
+                  <a className="text-gray-500 hover:underline" href="#">
+                    Erat augue imperdiet neque
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/Sections/FactCards.jsx b/components/Sections/FactCards.jsx
index e69de29..0d4d8a1 100644
--- a/components/Sections/FactCards.jsx
+++ b/components/Sections/FactCards.jsx
@@ -0,0 +1,94 @@
+export default function FactCards({}) {
+  return (
+    <section id="fact-cards" className="bg-indigo-500 py-20">
+      <div className="container px-4 mx-auto">
+        <div className="flex flex-wrap -m-4">
+          <div className="w-full lg:w-1/2 p-4">
+            <div className="py-12 px-10 rounded-lg bg-white">
+              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
+                1
+              </span>
+              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+                Suspendisse interdum ullamcorper elit, at consequat libero.
+              </h3>
+              <p className="text-lg text-gray-500 leading-loose">
+                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
+                sit amet tempus vestibulum, erat augue imperdiet.
+              </p>
+            </div>
+          </div>
+          <div className="w-full lg:w-1/2 p-4">
+            <div className="py-12 px-10 rounded-lg bg-white">
+              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
+                2
+              </span>
+              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+                Suspendisse interdum ullamcorper elit, at consequat libero.
+              </h3>
+              <p className="text-lg text-gray-500 leading-loose">
+                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
+                sit amet tempus vestibulum, erat augue imperdiet.
+              </p>
+            </div>
+          </div>
+          <div className="w-full lg:w-1/2 p-4">
+            <div className="py-12 px-10 rounded-lg bg-white">
+              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
+                3
+              </span>
+              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+                Suspendisse interdum ullamcorper elit, at consequat libero.
+              </h3>
+              <p className="text-lg text-gray-500 leading-loose">
+                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
+                sit amet tempus vestibulum, erat augue imperdiet.
+              </p>
+            </div>
+          </div>
+          <div className="w-full lg:w-1/2 p-4">
+            <div className="py-12 px-10 rounded-lg bg-white">
+              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
+                4
+              </span>
+              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+                Suspendisse interdum ullamcorper elit, at consequat libero.
+              </h3>
+              <p className="text-lg text-gray-500 leading-loose">
+                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
+                sit amet tempus vestibulum, erat augue imperdiet.
+              </p>
+            </div>
+          </div>
+          <div className="w-full lg:w-1/2 p-4">
+            <div className="py-12 px-10 rounded-lg bg-white">
+              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
+                5
+              </span>
+              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+                Suspendisse interdum ullamcorper elit, at consequat libero.
+              </h3>
+              <p className="text-lg text-gray-500 leading-loose">
+                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
+                sit amet tempus vestibulum, erat augue imperdiet.
+              </p>
+            </div>
+          </div>
+          <div className="w-full lg:w-1/2 p-4">
+            <div className="py-12 px-10 rounded-lg bg-white">
+              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
+                6
+              </span>
+              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+                Suspendisse interdum ullamcorper elit, at consequat libero.
+              </h3>
+              <p className="text-lg text-gray-500 leading-loose">
+                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
+                sit amet tempus vestibulum, erat augue imperdiet.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/Sections/FactSnippets.jsx b/components/Sections/FactSnippets.jsx
index e69de29..a49f2d5 100644
--- a/components/Sections/FactSnippets.jsx
+++ b/components/Sections/FactSnippets.jsx
@@ -0,0 +1,125 @@
+export default function FactSnippets({}) {
+  return (
+    <section id="fact-snippets" className="py-20">
+      <div className="container px-4 mx-auto">
+        <div className="max-w-3xl mx-auto mb-12 lg:mb-16 text-center">
+          <span className="text-sm text-indigo-500 font-bold uppercase">
+            Lorem ipsum
+          </span>
+          <h2 className="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+            Lorem ipsum dolor sit amet consectutar domor at elis
+          </h2>
+          <p className="text-lg text-gray-500 leading-loose">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan
+            aliquet orci.
+          </p>
+        </div>
+        <div className="flex flex-wrap items-center justify-around -m-4">
+          <div className="w-full md:w-1/2 lg:w-1/3 p-4">
+            <div className="bg-gray-50 p-6 rounded-lg">
+              <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                dignissim quam ultricies, placerat tellus sed, laoreet orci.
+                Duis luctus quam ac metus gravida sodales. Sed a ex accumsan,
+                pellentesque sem eget, scelerisque dolor.
+              </p>
+              <img
+                className="mb-2 h-12 w-12 object-cover rounded-full"
+                src="/images/indigo-500-avatar.png"
+                alt="Avatar image"
+              />
+              <p className="text-2xl font-bold font-heading">Danny Bailey</p>
+              <p className="text-lg text-gray-400">CEO &amp; Founder</p>
+            </div>
+          </div>
+          <div className="w-full md:w-1/2 lg:w-1/3 p-4">
+            <div className="bg-gray-50 p-6 rounded-lg">
+              <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                dignissim quam ultricies, placerat tellus sed, laoreet orci.
+                Duis luctus quam ac metus gravida sodales. Sed a ex accumsan,
+                pellentesque sem eget, scelerisque dolor.
+              </p>
+              <img
+                className="mb-2 h-12 w-12 object-cover rounded-full"
+                src="/images/indigo-500-avatar.png"
+                alt="Avatar image"
+              />
+              <p className="text-2xl font-bold font-heading">Danny Bailey</p>
+              <p className="text-lg text-gray-400">CEO &amp; Founder</p>
+            </div>
+          </div>
+          <div className="w-full md:w-1/2 lg:w-1/3 p-4">
+            <div className="bg-gray-50 p-6 rounded-lg">
+              <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                dignissim quam ultricies, placerat tellus sed, laoreet orci.
+                Duis luctus quam ac metus gravida sodales. Sed a ex accumsan,
+                pellentesque sem eget, scelerisque dolor.
+              </p>
+              <img
+                className="mb-2 h-12 w-12 object-cover rounded-full"
+                src="/images/indigo-500-avatar.png"
+                alt="Avatar image"
+              />
+              <p className="text-2xl font-bold font-heading">Danny Bailey</p>
+              <p className="text-lg text-gray-400">CEO &amp; Founder</p>
+            </div>
+          </div>
+          <div className="w-full md:w-1/2 lg:w-1/3 p-4">
+            <div className="bg-gray-50 p-6 rounded-lg">
+              <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                dignissim quam ultricies, placerat tellus sed, laoreet orci.
+                Duis luctus quam ac metus gravida sodales. Sed a ex accumsan,
+                pellentesque sem eget, scelerisque dolor.
+              </p>
+              <img
+                className="mb-2 h-12 w-12 object-cover rounded-full"
+                src="/images/indigo-500-avatar.png"
+                alt=""
+              />
+              <p className="text-2xl font-bold font-heading">Danny Bailey</p>
+              <p className="text-lg text-gray-400">CEO &amp; Founder</p>
+            </div>
+          </div>
+          <div className="w-full md:w-1/2 lg:w-1/3 p-4">
+            <div className="bg-gray-50 p-6 rounded-lg">
+              <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                dignissim quam ultricies, placerat tellus sed, laoreet orci.
+                Duis luctus quam ac metus gravida sodales. Sed a ex accumsan,
+                pellentesque sem eget, scelerisque dolor.
+              </p>
+              <img
+                className="mb-2 h-12 w-12 object-cover rounded-full"
+                src="/images/indigo-500-avatar.png"
+                alt="Avatar image"
+              />
+              <p className="text-2xl font-bold font-heading">Danny Bailey</p>
+              <p className="text-lg text-gray-400">CEO &amp; Founder</p>
+            </div>
+          </div>
+          <div className="w-full md:w-1/2 lg:w-1/3 p-4">
+            <div className="bg-gray-50 p-6 rounded-lg">
+              <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                dignissim quam ultricies, placerat tellus sed, laoreet orci.
+                Duis luctus quam ac metus gravida sodales. Sed a ex accumsan,
+                pellentesque sem eget, scelerisque dolor.
+              </p>
+              <img
+                className="mb-2 h-12 w-12 object-cover rounded-full"
+                src="/images/indigo-500-avatar.png"
+                alt="Avatar image"
+              />
+              <p className="text-2xl font-bold font-heading">Danny Bailey</p>
+              <p className="text-lg text-gray-400">CEO &amp; Founder</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/Sections/InfoCarousel.jsx b/components/Sections/InfoCarousel.jsx
index e69de29..3d28758 100644
--- a/components/Sections/InfoCarousel.jsx
+++ b/components/Sections/InfoCarousel.jsx
@@ -0,0 +1,64 @@
+export default function InfoCarousel({}) {
+  return (
+    <section id="info-carousel" className="py-20 bg-indigo-500">
+      <div className="container px-4 mx-auto">
+        <div className="flex flex-wrap items-center">
+          <button className="hidden lg:block w-16 h-16 p-5 rounded-full bg-indigo-50 hover:bg-white transition duration-200">
+            <svg
+              className="text-indigo-500 hover:text-indigo-500"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 19l-7-7 7-7"
+              />
+            </svg>
+          </button>
+          <div className="max-w-2xl mb-14 mx-auto text-center">
+            <h2 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading text-white">
+              Expand your brand with this excellent extension tool.
+            </h2>
+            <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-indigo-50">
+              A short message that will bring your customers into the world of
+              your imagination. And will allow them to become more familiar with
+              your brand.
+            </p>
+            <a
+              className="inline-block px-5 py-3 text-sm bg-white hover:bg-indigo-50 text-indigo-500 font-semibold border border-white rounded transition duration-200"
+              href="#"
+            >
+              Try Demo
+            </a>
+          </div>
+          <button className="hidden lg:block w-16 h-16 p-5 rounded-full bg-indigo-50 hover:bg-white transition duration-200">
+            <svg
+              className="text-indigo-500 hover:text-indigo-500"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </button>
+          <div className="w-full text-center">
+            <button className="w-3 h-3 mr-2 rounded-full border border-indigo-50 bg-indigo-50" />
+            <button className="w-3 h-3 mr-2 rounded-full border border-indigo-50" />
+            <button className="w-3 h-3 mr-2 rounded-full border border-indigo-50" />
+            <button className="w-3 h-3 rounded-full border border-indigo-50" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/Sections/NavigationHero.jsx b/components/Sections/NavigationHero.jsx
index e69de29..f520988 100644
--- a/components/Sections/NavigationHero.jsx
+++ b/components/Sections/NavigationHero.jsx
@@ -0,0 +1,189 @@
+export default function NavigationHero({ entityTitle }) {
+  return (
+    <section id="navigation-hero">
+      <div className="container px-4 mx-auto">
+        <nav className="flex justify-between items-center py-8">
+          <a className="text-gray-700 text-2xl leading-none" href="#">
+            <img
+              className="h-8"
+              src="/logos/plain-indigo.svg"
+              alt={`The ${entityTitle} logo`}
+              width="auto"
+              height="2rem"
+            />
+          </a>
+          <div className="lg:hidden">
+            <button className="block navbar-burger text-indigo-500 hover:text-indigo-500 focus:outline-none">
+              <svg
+                className="h-4 w-4"
+                fill="currentColor "
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>Mobile menu</title>
+                <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+              </svg>
+            </button>
+          </div>
+          <ul className="hidden lg:flex ml-auto mr-10 items-center w-auto space-x-12">
+            <li>
+              <a className="text-sm hover:text-indigo-700 font-medium" href="#">
+                About
+              </a>
+            </li>
+            <li>
+              <a className="text-sm hover:text-indigo-700 font-medium" href="#">
+                Company
+              </a>
+            </li>
+            <li>
+              <a className="text-sm hover:text-indigo-700 font-medium" href="#">
+                Services
+              </a>
+            </li>
+            <li>
+              <a className="text-sm hover:text-indigo-700 font-medium" href="#">
+                Testimonials
+              </a>
+            </li>
+          </ul>
+          <a
+            className="hidden lg:block px-5 py-3 text-sm font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+            href="#"
+          >
+            Contact Us
+          </a>
+        </nav>
+        <div className="flex flex-wrap items-center -mx-4 mt-10 lg:my-10 pb-10 lg:pb-16">
+          <div className="w-full md:w-1/2 px-4 mb-12 md:mb-0">
+            <h2 className="max-w-sm mb-8 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+              Take care of your performance every day.
+            </h2>
+            <p className="max-w-lg mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
+              Build a well-presented brand that everyone will love. Take care to
+              develop resources continually and integrity them with previous
+              projects.
+            </p>
+            <div>
+              <a
+                className="block lg:inline-block px-5 py-3 lg:mr-3 mb-3 lg:mb-0 text-sm text-center bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+                href="#"
+              >
+                Track your performance
+              </a>
+              <a
+                className="block lg:inline-block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+                href="#"
+              >
+                Learn more
+              </a>
+            </div>
+          </div>
+          <div className="w-full md:w-1/2 px-4">
+            <img
+              className="object-cover w-full rounded-xl"
+              src="/images/indigo-600-square.png"
+              alt="Hero image"
+            />
+          </div>
+          <button className="block mt-10 lg:mt-20 mx-auto w-16 h-16 p-5 rounded-full bg-indigo-50 hover:bg-indigo-100">
+            <svg
+              className="mx-auto text-indigo-500"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 9l-7 7-7-7"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div className="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
+        <div className="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25" />
+        <nav className="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
+          <div className="flex items-center mb-12">
+            <a className="mr-auto text-2xl font-semibold leading-none" href="#">
+              <img
+                className="h-8"
+                src="/logos/plain-indigo.svg"
+                alt={`${entityTitle} logo`}
+                width="auto"
+              />
+            </a>
+            <button className="navbar-close">
+              <svg
+                className="h-6 w-6 cursor-pointer hover:text-indigo-500"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          </div>
+          <div>
+            <ul>
+              <li className="mb-1">
+                <a
+                  className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
+                  href="#"
+                >
+                  About
+                </a>
+              </li>
+              <li className="mb-1">
+                <a
+                  className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
+                  href="#"
+                >
+                  Company
+                </a>
+              </li>
+              <li className="mb-1">
+                <a
+                  className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
+                  href="#"
+                >
+                  Services
+                </a>
+              </li>
+              <li className="mb-1">
+                <a
+                  className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
+                  href="#"
+                >
+                  Testimonials
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div className="mt-auto">
+            <div className="pt-6">
+              <a
+                className="block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+                href="#"
+              >
+                Contact Us
+              </a>
+            </div>
+            <p className="mt-6 mb-4 text-sm text-center text-gray-500">
+              <span>© 2022 All rights reserved.</span>
+            </p>
+          </div>
+        </nav>
+      </div>
+    </section>
+  );
+}
diff --git a/components/Sections/Stats1.jsx b/components/Sections/Stats1.jsx
index e69de29..ed0029e 100644
--- a/components/Sections/Stats1.jsx
+++ b/components/Sections/Stats1.jsx
@@ -0,0 +1,90 @@
+export default function Stats1({}) {
+  return (
+    <section id="stats-1" className="py-20">
+      <div className="container px-4 mx-auto">
+        <div className="flex flex-wrap items-center -mx-4 -mb-8">
+          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
+            <svg
+              className="mx-auto mb-4 text-indigo-500"
+              width={48}
+              height={48}
+              viewBox="0 0 48 48"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z"
+                fill="currentColor"
+              />
+              <circle cx={24} cy={24} r="23.5" stroke="currentColor" />
+            </svg>
+            <h3 className="mb-2 text-2xl font-bold font-heading">
+              600 000 000
+            </h3>
+            <p className="text-lg text-gray-500">Dolor sit amet consectutar</p>
+          </div>
+          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
+            <svg
+              className="mx-auto mb-4 text-indigo-500"
+              width={48}
+              height={48}
+              viewBox="0 0 48 48"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z"
+                fill="currentColor"
+              />
+              <circle cx={24} cy={24} r="23.5" stroke="currentColor" />
+            </svg>
+            <h3 className="mb-2 text-2xl font-bold font-heading">
+              600 000 000
+            </h3>
+            <p className="text-lg text-gray-500">Dolor sit amet consectutar</p>
+          </div>
+          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
+            <svg
+              className="mx-auto mb-4 text-indigo-500"
+              width={48}
+              height={48}
+              viewBox="0 0 48 48"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z"
+                fill="currentColor"
+              />
+              <circle cx={24} cy={24} r="23.5" stroke="currentColor" />
+            </svg>
+            <h3 className="mb-2 text-2xl font-bold font-heading">
+              600 000 000
+            </h3>
+            <p className="text-lg text-gray-500">Dolor sit amet consectutar</p>
+          </div>
+          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
+            <svg
+              className="mx-auto mb-4 text-indigo-500"
+              width={48}
+              height={48}
+              viewBox="0 0 48 48"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z"
+                fill="currentColor"
+              />
+              <circle cx={24} cy={24} r="23.5" stroke="currentColor" />
+            </svg>
+            <h3 className="mb-2 text-2xl font-bold font-heading">
+              600 000 000
+            </h3>
+            <p className="text-lg text-gray-500">Dolor sit amet consectutar</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/Sections/Stats2.jsx b/components/Sections/Stats2.jsx
index e69de29..3304c42 100644
--- a/components/Sections/Stats2.jsx
+++ b/components/Sections/Stats2.jsx
@@ -0,0 +1,170 @@
+export default function Stats2({}) {
+  return (
+    <section id="stats-2" className="py-20">
+      <div className="container px-4 mx-auto">
+        <div className="flex flex-wrap items-center -mx-4 -mb-8">
+          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
+            <div className="relative w-20 mx-auto mb-4">
+              <div className="absolute inset-0 ml-2 flex items-center justify-center">
+                <p className="text-lg font-bold text-gray-500">65 %</p>
+              </div>
+              <span className="relative block">
+                <svg
+                  width={69}
+                  height={91}
+                  viewBox="0 0 69 91"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M67.9865 79.0753C69.3577 81.148 68.7977 83.9622 66.5984 85.1196C61.1443 87.99 55.1436 89.717 48.9653 90.1747C41.2869 90.7435 33.5909 89.3326 26.6136 86.077C19.6362 82.8215 13.6109 77.8301 9.11396 71.5803C4.61701 65.3306 1.79884 58.0315 0.92903 50.3813C0.0592193 42.7311 1.16686 34.9857 4.146 27.8859C7.12514 20.7861 11.8761 14.5695 17.9445 9.83067C24.0129 5.09182 31.1957 1.98927 38.8058 0.819781C44.9292 -0.12122 51.1644 0.214628 57.1237 1.78733C59.5267 2.42151 60.7042 5.03807 59.8333 7.36576C58.9623 9.69345 56.3723 10.8445 53.9542 10.2706C49.4528 9.20231 44.7734 9.00838 40.1729 9.71535C34.0848 10.6509 28.3385 13.133 23.4838 16.9241C18.6291 20.7151 14.8283 25.6884 12.445 31.3683C10.0617 37.0481 9.17557 43.2444 9.87142 49.3646C10.5673 55.4847 12.8218 61.324 16.4194 66.3238C20.0169 71.3236 24.8372 75.3167 30.419 77.9212C36.0009 80.5256 42.1577 81.6543 48.3004 81.1993C52.9422 80.8554 57.4587 79.616 61.6053 77.5644C63.8329 76.4623 66.6152 77.0025 67.9865 79.0753Z"
+                    fill="#F1F5FB"
+                  />
+                </svg>
+              </span>
+              <span className="absolute inset-0 ml-3 block mx-auto">
+                <svg
+                  className="text-indigo-500"
+                  width={80}
+                  height={90}
+                  viewBox="0 0 80 90"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M35 4.5C35 2.01472 37.0197 -0.02331 39.4926 0.224807C45.6251 0.840118 51.5826 2.71056 56.988 5.73768C63.7057 9.49981 69.3458 14.9227 73.3688 21.4876C77.3918 28.0525 79.663 35.5398 79.9653 43.2333C80.2676 50.9268 78.5908 58.5693 75.0953 65.4296C71.5998 72.2899 66.4025 78.1385 60.0007 82.4161C53.5988 86.6937 46.2064 89.2572 38.5307 89.8613C30.8549 90.4654 23.1526 89.0899 16.1603 85.8664C10.5342 83.2728 5.51919 79.5524 1.4168 74.9528C-0.23745 73.098 0.224183 70.2661 2.23482 68.8053C4.24545 67.3445 7.04073 67.8135 8.74082 69.6263C11.9056 73.0009 15.7013 75.7445 19.9283 77.6932C25.522 80.2719 31.6839 81.3723 37.8245 80.889C43.9651 80.4057 49.879 78.355 55.0005 74.9329C60.122 71.5108 64.2798 66.8319 67.0762 61.3437C69.8726 55.8554 71.2141 49.7415 70.9722 43.5866C70.7304 37.4318 68.9134 31.442 65.695 26.1901C62.4767 20.9381 57.9646 16.5998 52.5904 13.5901C48.5293 11.3159 44.0787 9.85769 39.4884 9.28088C37.0225 8.97102 35 6.98528 35 4.5Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </div>
+            <h3 className="mb-2 text-2xl font-bold font-heading">
+              Market Size
+            </h3>
+            <p className="text-gray-500 text-lg">Dolor sit amet consectutar</p>
+          </div>
+          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
+            <div className="relative w-20 mx-auto mb-4">
+              <div className="absolute inset-0 ml-2 flex items-center justify-center">
+                <p className="text-lg font-bold text-gray-500">65 %</p>
+              </div>
+              <span className="relative block">
+                <svg
+                  width={69}
+                  height={91}
+                  viewBox="0 0 69 91"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M67.9865 79.0753C69.3577 81.148 68.7977 83.9622 66.5984 85.1196C61.1443 87.99 55.1436 89.717 48.9653 90.1747C41.2869 90.7435 33.5909 89.3326 26.6136 86.077C19.6362 82.8215 13.6109 77.8301 9.11396 71.5803C4.61701 65.3306 1.79884 58.0315 0.92903 50.3813C0.0592193 42.7311 1.16686 34.9857 4.146 27.8859C7.12514 20.7861 11.8761 14.5695 17.9445 9.83067C24.0129 5.09182 31.1957 1.98927 38.8058 0.819781C44.9292 -0.12122 51.1644 0.214628 57.1237 1.78733C59.5267 2.42151 60.7042 5.03807 59.8333 7.36576C58.9623 9.69345 56.3723 10.8445 53.9542 10.2706C49.4528 9.20231 44.7734 9.00838 40.1729 9.71535C34.0848 10.6509 28.3385 13.133 23.4838 16.9241C18.6291 20.7151 14.8283 25.6884 12.445 31.3683C10.0617 37.0481 9.17557 43.2444 9.87142 49.3646C10.5673 55.4847 12.8218 61.324 16.4194 66.3238C20.0169 71.3236 24.8372 75.3167 30.419 77.9212C36.0009 80.5256 42.1577 81.6543 48.3004 81.1993C52.9422 80.8554 57.4587 79.616 61.6053 77.5644C63.8329 76.4623 66.6152 77.0025 67.9865 79.0753Z"
+                    fill="#F1F5FB"
+                  />
+                </svg>
+              </span>
+              <span className="absolute inset-0 ml-3 block mx-auto">
+                <svg
+                  className="text-indigo-500"
+                  width={80}
+                  height={90}
+                  viewBox="0 0 80 90"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M35 4.5C35 2.01472 37.0197 -0.02331 39.4926 0.224807C45.6251 0.840118 51.5826 2.71056 56.988 5.73768C63.7057 9.49981 69.3458 14.9227 73.3688 21.4876C77.3918 28.0525 79.663 35.5398 79.9653 43.2333C80.2676 50.9268 78.5908 58.5693 75.0953 65.4296C71.5998 72.2899 66.4025 78.1385 60.0007 82.4161C53.5988 86.6937 46.2064 89.2572 38.5307 89.8613C30.8549 90.4654 23.1526 89.0899 16.1603 85.8664C10.5342 83.2728 5.51919 79.5524 1.4168 74.9528C-0.23745 73.098 0.224183 70.2661 2.23482 68.8053C4.24545 67.3445 7.04073 67.8135 8.74082 69.6263C11.9056 73.0009 15.7013 75.7445 19.9283 77.6932C25.522 80.2719 31.6839 81.3723 37.8245 80.889C43.9651 80.4057 49.879 78.355 55.0005 74.9329C60.122 71.5108 64.2798 66.8319 67.0762 61.3437C69.8726 55.8554 71.2141 49.7415 70.9722 43.5866C70.7304 37.4318 68.9134 31.442 65.695 26.1901C62.4767 20.9381 57.9646 16.5998 52.5904 13.5901C48.5293 11.3159 44.0787 9.85769 39.4884 9.28088C37.0225 8.97102 35 6.98528 35 4.5Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </div>
+            <h3 className="mb-2 text-2xl font-bold font-heading">
+              Market Size
+            </h3>
+            <p className="text-gray-500 text-lg">Dolor sit amet consectutar</p>
+          </div>
+          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
+            <div className="relative w-20 mx-auto mb-4">
+              <div className="absolute inset-0 ml-2 flex items-center justify-center">
+                <p className="text-lg font-bold text-gray-500">65 %</p>
+              </div>
+              <span className="relative block">
+                <svg
+                  width={69}
+                  height={91}
+                  viewBox="0 0 69 91"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M67.9865 79.0753C69.3577 81.148 68.7977 83.9622 66.5984 85.1196C61.1443 87.99 55.1436 89.717 48.9653 90.1747C41.2869 90.7435 33.5909 89.3326 26.6136 86.077C19.6362 82.8215 13.6109 77.8301 9.11396 71.5803C4.61701 65.3306 1.79884 58.0315 0.92903 50.3813C0.0592193 42.7311 1.16686 34.9857 4.146 27.8859C7.12514 20.7861 11.8761 14.5695 17.9445 9.83067C24.0129 5.09182 31.1957 1.98927 38.8058 0.819781C44.9292 -0.12122 51.1644 0.214628 57.1237 1.78733C59.5267 2.42151 60.7042 5.03807 59.8333 7.36576C58.9623 9.69345 56.3723 10.8445 53.9542 10.2706C49.4528 9.20231 44.7734 9.00838 40.1729 9.71535C34.0848 10.6509 28.3385 13.133 23.4838 16.9241C18.6291 20.7151 14.8283 25.6884 12.445 31.3683C10.0617 37.0481 9.17557 43.2444 9.87142 49.3646C10.5673 55.4847 12.8218 61.324 16.4194 66.3238C20.0169 71.3236 24.8372 75.3167 30.419 77.9212C36.0009 80.5256 42.1577 81.6543 48.3004 81.1993C52.9422 80.8554 57.4587 79.616 61.6053 77.5644C63.8329 76.4623 66.6152 77.0025 67.9865 79.0753Z"
+                    fill="#F1F5FB"
+                  />
+                </svg>
+              </span>
+              <span className="absolute inset-0 ml-3 block mx-auto">
+                <svg
+                  className="text-indigo-500"
+                  width={80}
+                  height={90}
+                  viewBox="0 0 80 90"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M35 4.5C35 2.01472 37.0197 -0.02331 39.4926 0.224807C45.6251 0.840118 51.5826 2.71056 56.988 5.73768C63.7057 9.49981 69.3458 14.9227 73.3688 21.4876C77.3918 28.0525 79.663 35.5398 79.9653 43.2333C80.2676 50.9268 78.5908 58.5693 75.0953 65.4296C71.5998 72.2899 66.4025 78.1385 60.0007 82.4161C53.5988 86.6937 46.2064 89.2572 38.5307 89.8613C30.8549 90.4654 23.1526 89.0899 16.1603 85.8664C10.5342 83.2728 5.51919 79.5524 1.4168 74.9528C-0.23745 73.098 0.224183 70.2661 2.23482 68.8053C4.24545 67.3445 7.04073 67.8135 8.74082 69.6263C11.9056 73.0009 15.7013 75.7445 19.9283 77.6932C25.522 80.2719 31.6839 81.3723 37.8245 80.889C43.9651 80.4057 49.879 78.355 55.0005 74.9329C60.122 71.5108 64.2798 66.8319 67.0762 61.3437C69.8726 55.8554 71.2141 49.7415 70.9722 43.5866C70.7304 37.4318 68.9134 31.442 65.695 26.1901C62.4767 20.9381 57.9646 16.5998 52.5904 13.5901C48.5293 11.3159 44.0787 9.85769 39.4884 9.28088C37.0225 8.97102 35 6.98528 35 4.5Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </div>
+            <h3 className="mb-2 text-2xl font-bold font-heading">
+              Market Size
+            </h3>
+            <p className="text-gray-500 text-lg">Dolor sit amet consectutar</p>
+          </div>
+          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
+            <div className="relative w-20 mx-auto mb-4">
+              <div className="absolute inset-0 ml-2 flex items-center justify-center">
+                <p className="text-lg font-bold text-gray-500">65 %</p>
+              </div>
+              <span className="relative block">
+                <svg
+                  width={69}
+                  height={91}
+                  viewBox="0 0 69 91"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M67.9865 79.0753C69.3577 81.148 68.7977 83.9622 66.5984 85.1196C61.1443 87.99 55.1436 89.717 48.9653 90.1747C41.2869 90.7435 33.5909 89.3326 26.6136 86.077C19.6362 82.8215 13.6109 77.8301 9.11396 71.5803C4.61701 65.3306 1.79884 58.0315 0.92903 50.3813C0.0592193 42.7311 1.16686 34.9857 4.146 27.8859C7.12514 20.7861 11.8761 14.5695 17.9445 9.83067C24.0129 5.09182 31.1957 1.98927 38.8058 0.819781C44.9292 -0.12122 51.1644 0.214628 57.1237 1.78733C59.5267 2.42151 60.7042 5.03807 59.8333 7.36576C58.9623 9.69345 56.3723 10.8445 53.9542 10.2706C49.4528 9.20231 44.7734 9.00838 40.1729 9.71535C34.0848 10.6509 28.3385 13.133 23.4838 16.9241C18.6291 20.7151 14.8283 25.6884 12.445 31.3683C10.0617 37.0481 9.17557 43.2444 9.87142 49.3646C10.5673 55.4847 12.8218 61.324 16.4194 66.3238C20.0169 71.3236 24.8372 75.3167 30.419 77.9212C36.0009 80.5256 42.1577 81.6543 48.3004 81.1993C52.9422 80.8554 57.4587 79.616 61.6053 77.5644C63.8329 76.4623 66.6152 77.0025 67.9865 79.0753Z"
+                    fill="#F1F5FB"
+                  />
+                </svg>
+              </span>
+              <span className="absolute inset-0 ml-3 block mx-auto">
+                <svg
+                  className="text-indigo-500"
+                  width={80}
+                  height={90}
+                  viewBox="0 0 80 90"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M35 4.5C35 2.01472 37.0197 -0.02331 39.4926 0.224807C45.6251 0.840118 51.5826 2.71056 56.988 5.73768C63.7057 9.49981 69.3458 14.9227 73.3688 21.4876C77.3918 28.0525 79.663 35.5398 79.9653 43.2333C80.2676 50.9268 78.5908 58.5693 75.0953 65.4296C71.5998 72.2899 66.4025 78.1385 60.0007 82.4161C53.5988 86.6937 46.2064 89.2572 38.5307 89.8613C30.8549 90.4654 23.1526 89.0899 16.1603 85.8664C10.5342 83.2728 5.51919 79.5524 1.4168 74.9528C-0.23745 73.098 0.224183 70.2661 2.23482 68.8053C4.24545 67.3445 7.04073 67.8135 8.74082 69.6263C11.9056 73.0009 15.7013 75.7445 19.9283 77.6932C25.522 80.2719 31.6839 81.3723 37.8245 80.889C43.9651 80.4057 49.879 78.355 55.0005 74.9329C60.122 71.5108 64.2798 66.8319 67.0762 61.3437C69.8726 55.8554 71.2141 49.7415 70.9722 43.5866C70.7304 37.4318 68.9134 31.442 65.695 26.1901C62.4767 20.9381 57.9646 16.5998 52.5904 13.5901C48.5293 11.3159 44.0787 9.85769 39.4884 9.28088C37.0225 8.97102 35 6.98528 35 4.5Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </div>
+            <h3 className="mb-2 text-2xl font-bold font-heading">
+              Market Size
+            </h3>
+            <p className="text-gray-500 text-lg">Dolor sit amet consectutar</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/Sections/Team.jsx b/components/Sections/Team.jsx
index e69de29..8a40fa1 100644
--- a/components/Sections/Team.jsx
+++ b/components/Sections/Team.jsx
@@ -0,0 +1,123 @@
+export default function Team({}) {
+  return (
+    <section id="team" className="py-20">
+      <div className="container px-4 mx-auto">
+        <div className="max-w-lg lg:max-w-2xl mx-auto text-center mb-12 lg:mb-16">
+          <span className="text-xs font-semibold text-indigo-500 uppercase">
+            Lorem ipsum
+          </span>
+          <h2 className="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+            Lorem ipsum dolor sit amet consectutar domor at elis
+          </h2>
+          <p className="text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan
+            aliquet orci.
+          </p>
+        </div>
+        <div className="flex flex-wrap -m-4">
+          <div className="w-full lg:w-1/2 p-4">
+            <div className="bg-gray-50 p-6 rounded">
+              <div className="flex flex-wrap items-center -mx-4">
+                <div className="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
+                  <img
+                    className="md:w-full h-52 object-cover rounded-lg"
+                    src="/images/indigo-600-square.png"
+                    alt="Avatar image"
+                  />
+                </div>
+                <div className="w-full md:w-3/5 px-4">
+                  <h3 className="text-2xl font-bold font-heading mb-1">
+                    Danny Bailey
+                  </h3>
+                  <p className="mb-2 text-lg text-gray-400">
+                    CEO &amp; Founder
+                  </p>
+                  <p className="text-lg text-gray-500 leading-loose">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Pellentesque massa nibh.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="w-full lg:w-1/2 p-4">
+            <div className="bg-gray-50 p-6 rounded">
+              <div className="flex flex-wrap items-center -mx-4">
+                <div className="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
+                  <img
+                    className="md:w-full h-52 object-cover rounded-lg"
+                    src="/images/indigo-600-square.png"
+                    alt="Avatar image"
+                  />
+                </div>
+                <div className="w-full md:w-3/5 px-4">
+                  <h3 className="text-2xl font-bold font-heading mb-1">
+                    Danny Bailey
+                  </h3>
+                  <p className="mb-2 text-lg text-gray-400">
+                    CEO &amp; Founder
+                  </p>
+                  <p className="text-lg text-gray-500 leading-loose">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Pellentesque massa nibh.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="w-full lg:w-1/2 p-4">
+            <div className="bg-gray-50 p-6 rounded">
+              <div className="flex flex-wrap items-center -mx-4">
+                <div className="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
+                  <img
+                    className="md:w-full h-52 object-cover rounded-lg"
+                    src="/images/indigo-600-square.png"
+                    alt="Avatar image"
+                  />
+                </div>
+                <div className="w-full md:w-3/5 px-4">
+                  <h3 className="text-2xl font-bold font-heading mb-1">
+                    Danny Bailey
+                  </h3>
+                  <p className="mb-2 text-lg text-gray-400">
+                    CEO &amp; Founder
+                  </p>
+                  <p className="text-lg text-gray-500 leading-loose">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Pellentesque massa nibh.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="w-full lg:w-1/2 p-4">
+            <div className="bg-gray-50 p-6 rounded">
+              <div className="flex flex-wrap items-center -mx-4">
+                <div className="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
+                  <img
+                    className="md:w-full h-52 object-cover rounded-lg"
+                    src="/images/indigo-600-square.png"
+                    alt="Avatar image"
+                  />
+                </div>
+                <div className="w-full md:w-3/5 px-4">
+                  <h3 className="text-2xl font-bold font-heading mb-1">
+                    Danny Bailey
+                  </h3>
+                  <p className="mb-2 text-lg text-gray-400">
+                    CEO &amp; Founder
+                  </p>
+                  <p className="text-lg text-gray-500 leading-loose">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Pellentesque massa nibh.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/Sections/WhyInvest1.jsx b/components/Sections/WhyInvest1.jsx
index e69de29..35c2b7b 100644
--- a/components/Sections/WhyInvest1.jsx
+++ b/components/Sections/WhyInvest1.jsx
@@ -0,0 +1,68 @@
+export default function WhyInvest1({}) {
+  return (
+    <section id="why-invest-part-1" className="py-20">
+      <div className="container px-4 mx-auto">
+        <div className="flex flex-wrap -mx-4">
+          <div className="w-full lg:w-1/2 px-4">
+            <div className="max-w-lg lg:mx-auto mb-10 lg:mb-0">
+              <span className="text-xs font-semibold text-indigo-500 uppercase">
+                Lorem ipsum
+              </span>
+              <h2 className="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+                Lorem ipsum dolor sit amet consectutar domor at elis
+              </h2>
+              <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan
+                aliquet orci.
+              </p>
+              <a
+                className="inline-block px-5 py-3 md:mr-3 mb-3 md:mb-0 text-sm bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+                href="#"
+              >
+                Action
+              </a>
+            </div>
+          </div>
+          <div className="w-full lg:w-1/2 px-4">
+            <div className="flex flex-wrap px-2 py-6 md:px-8 md:py-12 bg-gray-50 rounded-lg">
+              <div className="w-full md:w-1/2 lg:w-full flex items-start flex-col lg:flex-row px-4 mb-8 lg:mb-6">
+                <span className="mr-10 mb-4 lg:mb-0 flex-shrink-0 flex justify-center items-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
+                  1
+                </span>
+                <div className="max-w-xs">
+                  <p className="text-lg text-gray-500 leading-loose">
+                    Etiam pellentesque non nibh non pulvinar. Mauris posuere,
+                    tellus sit amet tempus vestibulum.
+                  </p>
+                </div>
+              </div>
+              <div className="w-full md:w-1/2 lg:w-full flex items-start flex-col lg:flex-row px-4 mb-8 lg:mb-6">
+                <span className="mr-10 mb-4 lg:mb-0 flex-shrink-0 flex justify-center items-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
+                  2
+                </span>
+                <div className="max-w-xs">
+                  <p className="text-lg text-gray-500 leading-loose">
+                    Etiam pellentesque non nibh non pulvinar. Mauris posuere,
+                    tellus sit amet tempus vestibulum.
+                  </p>
+                </div>
+              </div>
+              <div className="w-full md:w-1/2 lg:w-full flex items-start flex-col lg:flex-row px-4">
+                <span className="mr-10 mb-4 lg:mb-0 flex-shrink-0 flex justify-center items-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
+                  3
+                </span>
+                <div className="max-w-xs">
+                  <p className="text-lg text-gray-500 leading-loose">
+                    Etiam pellentesque non nibh non pulvinar. Mauris posuere,
+                    tellus sit amet tempus vestibulum.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/Sections/WhyInvest2.jsx b/components/Sections/WhyInvest2.jsx
index e69de29..f13bb91 100644
--- a/components/Sections/WhyInvest2.jsx
+++ b/components/Sections/WhyInvest2.jsx
@@ -0,0 +1,35 @@
+export default function WhyInvest2({}) {
+  return (
+    <section id="why-invest-part-2" className="py-20">
+      <div className="container px-4 mx-auto">
+        <div className="max-w-xl lg:max-w-3xl mx-auto text-center">
+          <span className="text-xs font-semibold text-indigo-500 uppercase">
+            New Feature
+          </span>
+          <h2 className="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+            Take quick action that increases your brand's regular profit.
+          </h2>
+          <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
+            If you have ever wondeindigo how to develop your brand, this is the
+            place for you. Take a&nbsp;big step forward in growing your business
+            with this great tool.
+          </p>
+          <div>
+            <a
+              className="block md:inline-block px-5 py-3 md:mr-3 mb-3 md:mb-0 text-sm bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+              href="#"
+            >
+              Try Demo
+            </a>
+            <a
+              className="block md:inline-block px-5 py-3 text-sm font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+              href="#"
+            >
+              Share with your friends
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

From 8a1a942dcd852197d8af21a1212d7b306d6cac9f Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 18:16:52 -0600
Subject: [PATCH 05/19] :recycle: add imported section components [sc-561]

---
 pages/index.jsx | 1416 +----------------------------------------------
 1 file changed, 11 insertions(+), 1405 deletions(-)

diff --git a/pages/index.jsx b/pages/index.jsx
index 952ce07..173bda3 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -1,1410 +1,16 @@
 import Footer from "../components/Footer";
+import NavigationHero from "../components/Sections/NavigationHero";
+import WhyInvest1 from "../components/Sections/WhyInvest1";
+import FactCards from "../components/Sections/FactCards";
+import Stats1 from "../components/Sections/Stats1";
+import Stats2 from "../components/Sections/Stats2";
+import WhyInvest2 from "../components/Sections/WhyInvest2";
+import FactSnippets from "../components/Sections/FactSnippets";
+import InfoCarousel from "../components/Sections/InfoCarousel";
+import Considerations from "../components/Sections/Considerations";
+import Team from "../components/Sections/Team";
+import FAQ from "../components/Sections/FAQ";
 
-function NavigationHero({ entityTitle }) {
-  return (
-    <section id="navigation-hero">
-      <div className="container px-4 mx-auto">
-        <nav className="flex justify-between items-center py-8">
-          <a className="text-gray-700 text-2xl leading-none" href="#">
-            <img
-              className="h-8"
-              src="/logos/plain-indigo.svg"
-              alt={`The ${entityTitle} logo`}
-              width="auto"
-              height="2rem"
-            />
-          </a>
-          <div className="lg:hidden">
-            <button className="block navbar-burger text-indigo-500 hover:text-indigo-500 focus:outline-none">
-              <svg
-                className="h-4 w-4"
-                fill="currentColor "
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>Mobile menu</title>
-                <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
-              </svg>
-            </button>
-          </div>
-          <ul className="hidden lg:flex ml-auto mr-10 items-center w-auto space-x-12">
-            <li>
-              <a className="text-sm hover:text-indigo-700 font-medium" href="#">
-                About
-              </a>
-            </li>
-            <li>
-              <a className="text-sm hover:text-indigo-700 font-medium" href="#">
-                Company
-              </a>
-            </li>
-            <li>
-              <a className="text-sm hover:text-indigo-700 font-medium" href="#">
-                Services
-              </a>
-            </li>
-            <li>
-              <a className="text-sm hover:text-indigo-700 font-medium" href="#">
-                Testimonials
-              </a>
-            </li>
-          </ul>
-          <a
-            className="hidden lg:block px-5 py-3 text-sm font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-            href="#"
-          >
-            Contact Us
-          </a>
-        </nav>
-        <div className="flex flex-wrap items-center -mx-4 mt-10 lg:my-10 pb-10 lg:pb-16">
-          <div className="w-full md:w-1/2 px-4 mb-12 md:mb-0">
-            <h2 className="max-w-sm mb-8 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-              Take care of your performance every day.
-            </h2>
-            <p className="max-w-lg mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
-              Build a well-presented brand that everyone will love. Take care to
-              develop resources continually and integrity them with previous
-              projects.
-            </p>
-            <div>
-              <a
-                className="block lg:inline-block px-5 py-3 lg:mr-3 mb-3 lg:mb-0 text-sm text-center bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-                href="#"
-              >
-                Track your performance
-              </a>
-              <a
-                className="block lg:inline-block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-                href="#"
-              >
-                Learn more
-              </a>
-            </div>
-          </div>
-          <div className="w-full md:w-1/2 px-4">
-            <img
-              className="object-cover w-full rounded-xl"
-              src="/images/indigo-600-square.png"
-              alt="Hero image"
-            />
-          </div>
-          <button className="block mt-10 lg:mt-20 mx-auto w-16 h-16 p-5 rounded-full bg-indigo-50 hover:bg-indigo-100">
-            <svg
-              className="mx-auto text-indigo-500"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M19 9l-7 7-7-7"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div className="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
-        <div className="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25" />
-        <nav className="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
-          <div className="flex items-center mb-12">
-            <a className="mr-auto text-2xl font-semibold leading-none" href="#">
-              <img
-                className="h-8"
-                src="/logos/plain-indigo.svg"
-                alt={`${entityTitle} logo`}
-                width="auto"
-              />
-            </a>
-            <button className="navbar-close">
-              <svg
-                className="h-6 w-6 cursor-pointer hover:text-indigo-500"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-          </div>
-          <div>
-            <ul>
-              <li className="mb-1">
-                <a
-                  className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
-                  href="#"
-                >
-                  About
-                </a>
-              </li>
-              <li className="mb-1">
-                <a
-                  className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
-                  href="#"
-                >
-                  Company
-                </a>
-              </li>
-              <li className="mb-1">
-                <a
-                  className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
-                  href="#"
-                >
-                  Services
-                </a>
-              </li>
-              <li className="mb-1">
-                <a
-                  className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
-                  href="#"
-                >
-                  Testimonials
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div className="mt-auto">
-            <div className="pt-6">
-              <a
-                className="block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-                href="#"
-              >
-                Contact Us
-              </a>
-            </div>
-            <p className="mt-6 mb-4 text-sm text-center text-gray-500">
-              <span>© 2022 All rights reserved.</span>
-            </p>
-          </div>
-        </nav>
-      </div>
-    </section>
-  );
-}
-function WhyInvest1({}) {
-  return (
-    <section id="why-invest-part-1" className="py-20">
-      <div className="container px-4 mx-auto">
-        <div className="flex flex-wrap -mx-4">
-          <div className="w-full lg:w-1/2 px-4">
-            <div className="max-w-lg lg:mx-auto mb-10 lg:mb-0">
-              <span className="text-xs font-semibold text-indigo-500 uppercase">
-                Lorem ipsum
-              </span>
-              <h2 className="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-                Lorem ipsum dolor sit amet consectutar domor at elis
-              </h2>
-              <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan
-                aliquet orci.
-              </p>
-              <a
-                className="inline-block px-5 py-3 md:mr-3 mb-3 md:mb-0 text-sm bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-                href="#"
-              >
-                Action
-              </a>
-            </div>
-          </div>
-          <div className="w-full lg:w-1/2 px-4">
-            <div className="flex flex-wrap px-2 py-6 md:px-8 md:py-12 bg-gray-50 rounded-lg">
-              <div className="w-full md:w-1/2 lg:w-full flex items-start flex-col lg:flex-row px-4 mb-8 lg:mb-6">
-                <span className="mr-10 mb-4 lg:mb-0 flex-shrink-0 flex justify-center items-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                  1
-                </span>
-                <div className="max-w-xs">
-                  <p className="text-lg text-gray-500 leading-loose">
-                    Etiam pellentesque non nibh non pulvinar. Mauris posuere,
-                    tellus sit amet tempus vestibulum.
-                  </p>
-                </div>
-              </div>
-              <div className="w-full md:w-1/2 lg:w-full flex items-start flex-col lg:flex-row px-4 mb-8 lg:mb-6">
-                <span className="mr-10 mb-4 lg:mb-0 flex-shrink-0 flex justify-center items-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                  2
-                </span>
-                <div className="max-w-xs">
-                  <p className="text-lg text-gray-500 leading-loose">
-                    Etiam pellentesque non nibh non pulvinar. Mauris posuere,
-                    tellus sit amet tempus vestibulum.
-                  </p>
-                </div>
-              </div>
-              <div className="w-full md:w-1/2 lg:w-full flex items-start flex-col lg:flex-row px-4">
-                <span className="mr-10 mb-4 lg:mb-0 flex-shrink-0 flex justify-center items-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                  3
-                </span>
-                <div className="max-w-xs">
-                  <p className="text-lg text-gray-500 leading-loose">
-                    Etiam pellentesque non nibh non pulvinar. Mauris posuere,
-                    tellus sit amet tempus vestibulum.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-function FactCards({}) {
-  return (
-    <section id="fact-cards" className="bg-indigo-500 py-20">
-      <div className="container px-4 mx-auto">
-        <div className="flex flex-wrap -m-4">
-          <div className="w-full lg:w-1/2 p-4">
-            <div className="py-12 px-10 rounded-lg bg-white">
-              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                1
-              </span>
-              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-                Suspendisse interdum ullamcorper elit, at consequat libero.
-              </h3>
-              <p className="text-lg text-gray-500 leading-loose">
-                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
-                sit amet tempus vestibulum, erat augue imperdiet.
-              </p>
-            </div>
-          </div>
-          <div className="w-full lg:w-1/2 p-4">
-            <div className="py-12 px-10 rounded-lg bg-white">
-              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                2
-              </span>
-              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-                Suspendisse interdum ullamcorper elit, at consequat libero.
-              </h3>
-              <p className="text-lg text-gray-500 leading-loose">
-                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
-                sit amet tempus vestibulum, erat augue imperdiet.
-              </p>
-            </div>
-          </div>
-          <div className="w-full lg:w-1/2 p-4">
-            <div className="py-12 px-10 rounded-lg bg-white">
-              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                3
-              </span>
-              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-                Suspendisse interdum ullamcorper elit, at consequat libero.
-              </h3>
-              <p className="text-lg text-gray-500 leading-loose">
-                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
-                sit amet tempus vestibulum, erat augue imperdiet.
-              </p>
-            </div>
-          </div>
-          <div className="w-full lg:w-1/2 p-4">
-            <div className="py-12 px-10 rounded-lg bg-white">
-              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                4
-              </span>
-              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-                Suspendisse interdum ullamcorper elit, at consequat libero.
-              </h3>
-              <p className="text-lg text-gray-500 leading-loose">
-                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
-                sit amet tempus vestibulum, erat augue imperdiet.
-              </p>
-            </div>
-          </div>
-          <div className="w-full lg:w-1/2 p-4">
-            <div className="py-12 px-10 rounded-lg bg-white">
-              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                5
-              </span>
-              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-                Suspendisse interdum ullamcorper elit, at consequat libero.
-              </h3>
-              <p className="text-lg text-gray-500 leading-loose">
-                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
-                sit amet tempus vestibulum, erat augue imperdiet.
-              </p>
-            </div>
-          </div>
-          <div className="w-full lg:w-1/2 p-4">
-            <div className="py-12 px-10 rounded-lg bg-white">
-              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                6
-              </span>
-              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-                Suspendisse interdum ullamcorper elit, at consequat libero.
-              </h3>
-              <p className="text-lg text-gray-500 leading-loose">
-                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
-                sit amet tempus vestibulum, erat augue imperdiet.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-function Stats1({}) {
-  return (
-    <section id="stats-1" className="py-20">
-      <div className="container px-4 mx-auto">
-        <div className="flex flex-wrap items-center -mx-4 -mb-8">
-          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
-            <svg
-              className="mx-auto mb-4 text-indigo-500"
-              width={48}
-              height={48}
-              viewBox="0 0 48 48"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z"
-                fill="currentColor"
-              />
-              <circle cx={24} cy={24} r="23.5" stroke="currentColor" />
-            </svg>
-            <h3 className="mb-2 text-2xl font-bold font-heading">
-              600 000 000
-            </h3>
-            <p className="text-lg text-gray-500">Dolor sit amet consectutar</p>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
-            <svg
-              className="mx-auto mb-4 text-indigo-500"
-              width={48}
-              height={48}
-              viewBox="0 0 48 48"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z"
-                fill="currentColor"
-              />
-              <circle cx={24} cy={24} r="23.5" stroke="currentColor" />
-            </svg>
-            <h3 className="mb-2 text-2xl font-bold font-heading">
-              600 000 000
-            </h3>
-            <p className="text-lg text-gray-500">Dolor sit amet consectutar</p>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
-            <svg
-              className="mx-auto mb-4 text-indigo-500"
-              width={48}
-              height={48}
-              viewBox="0 0 48 48"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z"
-                fill="currentColor"
-              />
-              <circle cx={24} cy={24} r="23.5" stroke="currentColor" />
-            </svg>
-            <h3 className="mb-2 text-2xl font-bold font-heading">
-              600 000 000
-            </h3>
-            <p className="text-lg text-gray-500">Dolor sit amet consectutar</p>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
-            <svg
-              className="mx-auto mb-4 text-indigo-500"
-              width={48}
-              height={48}
-              viewBox="0 0 48 48"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z"
-                fill="currentColor"
-              />
-              <circle cx={24} cy={24} r="23.5" stroke="currentColor" />
-            </svg>
-            <h3 className="mb-2 text-2xl font-bold font-heading">
-              600 000 000
-            </h3>
-            <p className="text-lg text-gray-500">Dolor sit amet consectutar</p>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-function Stats2({}) {
-  return (
-    <section id="stats-2" className="py-20">
-      <div className="container px-4 mx-auto">
-        <div className="flex flex-wrap items-center -mx-4 -mb-8">
-          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
-            <div className="relative w-20 mx-auto mb-4">
-              <div className="absolute inset-0 ml-2 flex items-center justify-center">
-                <p className="text-lg font-bold text-gray-500">65 %</p>
-              </div>
-              <span className="relative block">
-                <svg
-                  width={69}
-                  height={91}
-                  viewBox="0 0 69 91"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M67.9865 79.0753C69.3577 81.148 68.7977 83.9622 66.5984 85.1196C61.1443 87.99 55.1436 89.717 48.9653 90.1747C41.2869 90.7435 33.5909 89.3326 26.6136 86.077C19.6362 82.8215 13.6109 77.8301 9.11396 71.5803C4.61701 65.3306 1.79884 58.0315 0.92903 50.3813C0.0592193 42.7311 1.16686 34.9857 4.146 27.8859C7.12514 20.7861 11.8761 14.5695 17.9445 9.83067C24.0129 5.09182 31.1957 1.98927 38.8058 0.819781C44.9292 -0.12122 51.1644 0.214628 57.1237 1.78733C59.5267 2.42151 60.7042 5.03807 59.8333 7.36576C58.9623 9.69345 56.3723 10.8445 53.9542 10.2706C49.4528 9.20231 44.7734 9.00838 40.1729 9.71535C34.0848 10.6509 28.3385 13.133 23.4838 16.9241C18.6291 20.7151 14.8283 25.6884 12.445 31.3683C10.0617 37.0481 9.17557 43.2444 9.87142 49.3646C10.5673 55.4847 12.8218 61.324 16.4194 66.3238C20.0169 71.3236 24.8372 75.3167 30.419 77.9212C36.0009 80.5256 42.1577 81.6543 48.3004 81.1993C52.9422 80.8554 57.4587 79.616 61.6053 77.5644C63.8329 76.4623 66.6152 77.0025 67.9865 79.0753Z"
-                    fill="#F1F5FB"
-                  />
-                </svg>
-              </span>
-              <span className="absolute inset-0 ml-3 block mx-auto">
-                <svg
-                  className="text-indigo-500"
-                  width={80}
-                  height={90}
-                  viewBox="0 0 80 90"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M35 4.5C35 2.01472 37.0197 -0.02331 39.4926 0.224807C45.6251 0.840118 51.5826 2.71056 56.988 5.73768C63.7057 9.49981 69.3458 14.9227 73.3688 21.4876C77.3918 28.0525 79.663 35.5398 79.9653 43.2333C80.2676 50.9268 78.5908 58.5693 75.0953 65.4296C71.5998 72.2899 66.4025 78.1385 60.0007 82.4161C53.5988 86.6937 46.2064 89.2572 38.5307 89.8613C30.8549 90.4654 23.1526 89.0899 16.1603 85.8664C10.5342 83.2728 5.51919 79.5524 1.4168 74.9528C-0.23745 73.098 0.224183 70.2661 2.23482 68.8053C4.24545 67.3445 7.04073 67.8135 8.74082 69.6263C11.9056 73.0009 15.7013 75.7445 19.9283 77.6932C25.522 80.2719 31.6839 81.3723 37.8245 80.889C43.9651 80.4057 49.879 78.355 55.0005 74.9329C60.122 71.5108 64.2798 66.8319 67.0762 61.3437C69.8726 55.8554 71.2141 49.7415 70.9722 43.5866C70.7304 37.4318 68.9134 31.442 65.695 26.1901C62.4767 20.9381 57.9646 16.5998 52.5904 13.5901C48.5293 11.3159 44.0787 9.85769 39.4884 9.28088C37.0225 8.97102 35 6.98528 35 4.5Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </div>
-            <h3 className="mb-2 text-2xl font-bold font-heading">
-              Market Size
-            </h3>
-            <p className="text-gray-500 text-lg">Dolor sit amet consectutar</p>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
-            <div className="relative w-20 mx-auto mb-4">
-              <div className="absolute inset-0 ml-2 flex items-center justify-center">
-                <p className="text-lg font-bold text-gray-500">65 %</p>
-              </div>
-              <span className="relative block">
-                <svg
-                  width={69}
-                  height={91}
-                  viewBox="0 0 69 91"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M67.9865 79.0753C69.3577 81.148 68.7977 83.9622 66.5984 85.1196C61.1443 87.99 55.1436 89.717 48.9653 90.1747C41.2869 90.7435 33.5909 89.3326 26.6136 86.077C19.6362 82.8215 13.6109 77.8301 9.11396 71.5803C4.61701 65.3306 1.79884 58.0315 0.92903 50.3813C0.0592193 42.7311 1.16686 34.9857 4.146 27.8859C7.12514 20.7861 11.8761 14.5695 17.9445 9.83067C24.0129 5.09182 31.1957 1.98927 38.8058 0.819781C44.9292 -0.12122 51.1644 0.214628 57.1237 1.78733C59.5267 2.42151 60.7042 5.03807 59.8333 7.36576C58.9623 9.69345 56.3723 10.8445 53.9542 10.2706C49.4528 9.20231 44.7734 9.00838 40.1729 9.71535C34.0848 10.6509 28.3385 13.133 23.4838 16.9241C18.6291 20.7151 14.8283 25.6884 12.445 31.3683C10.0617 37.0481 9.17557 43.2444 9.87142 49.3646C10.5673 55.4847 12.8218 61.324 16.4194 66.3238C20.0169 71.3236 24.8372 75.3167 30.419 77.9212C36.0009 80.5256 42.1577 81.6543 48.3004 81.1993C52.9422 80.8554 57.4587 79.616 61.6053 77.5644C63.8329 76.4623 66.6152 77.0025 67.9865 79.0753Z"
-                    fill="#F1F5FB"
-                  />
-                </svg>
-              </span>
-              <span className="absolute inset-0 ml-3 block mx-auto">
-                <svg
-                  className="text-indigo-500"
-                  width={80}
-                  height={90}
-                  viewBox="0 0 80 90"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M35 4.5C35 2.01472 37.0197 -0.02331 39.4926 0.224807C45.6251 0.840118 51.5826 2.71056 56.988 5.73768C63.7057 9.49981 69.3458 14.9227 73.3688 21.4876C77.3918 28.0525 79.663 35.5398 79.9653 43.2333C80.2676 50.9268 78.5908 58.5693 75.0953 65.4296C71.5998 72.2899 66.4025 78.1385 60.0007 82.4161C53.5988 86.6937 46.2064 89.2572 38.5307 89.8613C30.8549 90.4654 23.1526 89.0899 16.1603 85.8664C10.5342 83.2728 5.51919 79.5524 1.4168 74.9528C-0.23745 73.098 0.224183 70.2661 2.23482 68.8053C4.24545 67.3445 7.04073 67.8135 8.74082 69.6263C11.9056 73.0009 15.7013 75.7445 19.9283 77.6932C25.522 80.2719 31.6839 81.3723 37.8245 80.889C43.9651 80.4057 49.879 78.355 55.0005 74.9329C60.122 71.5108 64.2798 66.8319 67.0762 61.3437C69.8726 55.8554 71.2141 49.7415 70.9722 43.5866C70.7304 37.4318 68.9134 31.442 65.695 26.1901C62.4767 20.9381 57.9646 16.5998 52.5904 13.5901C48.5293 11.3159 44.0787 9.85769 39.4884 9.28088C37.0225 8.97102 35 6.98528 35 4.5Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </div>
-            <h3 className="mb-2 text-2xl font-bold font-heading">
-              Market Size
-            </h3>
-            <p className="text-gray-500 text-lg">Dolor sit amet consectutar</p>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
-            <div className="relative w-20 mx-auto mb-4">
-              <div className="absolute inset-0 ml-2 flex items-center justify-center">
-                <p className="text-lg font-bold text-gray-500">65 %</p>
-              </div>
-              <span className="relative block">
-                <svg
-                  width={69}
-                  height={91}
-                  viewBox="0 0 69 91"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M67.9865 79.0753C69.3577 81.148 68.7977 83.9622 66.5984 85.1196C61.1443 87.99 55.1436 89.717 48.9653 90.1747C41.2869 90.7435 33.5909 89.3326 26.6136 86.077C19.6362 82.8215 13.6109 77.8301 9.11396 71.5803C4.61701 65.3306 1.79884 58.0315 0.92903 50.3813C0.0592193 42.7311 1.16686 34.9857 4.146 27.8859C7.12514 20.7861 11.8761 14.5695 17.9445 9.83067C24.0129 5.09182 31.1957 1.98927 38.8058 0.819781C44.9292 -0.12122 51.1644 0.214628 57.1237 1.78733C59.5267 2.42151 60.7042 5.03807 59.8333 7.36576C58.9623 9.69345 56.3723 10.8445 53.9542 10.2706C49.4528 9.20231 44.7734 9.00838 40.1729 9.71535C34.0848 10.6509 28.3385 13.133 23.4838 16.9241C18.6291 20.7151 14.8283 25.6884 12.445 31.3683C10.0617 37.0481 9.17557 43.2444 9.87142 49.3646C10.5673 55.4847 12.8218 61.324 16.4194 66.3238C20.0169 71.3236 24.8372 75.3167 30.419 77.9212C36.0009 80.5256 42.1577 81.6543 48.3004 81.1993C52.9422 80.8554 57.4587 79.616 61.6053 77.5644C63.8329 76.4623 66.6152 77.0025 67.9865 79.0753Z"
-                    fill="#F1F5FB"
-                  />
-                </svg>
-              </span>
-              <span className="absolute inset-0 ml-3 block mx-auto">
-                <svg
-                  className="text-indigo-500"
-                  width={80}
-                  height={90}
-                  viewBox="0 0 80 90"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M35 4.5C35 2.01472 37.0197 -0.02331 39.4926 0.224807C45.6251 0.840118 51.5826 2.71056 56.988 5.73768C63.7057 9.49981 69.3458 14.9227 73.3688 21.4876C77.3918 28.0525 79.663 35.5398 79.9653 43.2333C80.2676 50.9268 78.5908 58.5693 75.0953 65.4296C71.5998 72.2899 66.4025 78.1385 60.0007 82.4161C53.5988 86.6937 46.2064 89.2572 38.5307 89.8613C30.8549 90.4654 23.1526 89.0899 16.1603 85.8664C10.5342 83.2728 5.51919 79.5524 1.4168 74.9528C-0.23745 73.098 0.224183 70.2661 2.23482 68.8053C4.24545 67.3445 7.04073 67.8135 8.74082 69.6263C11.9056 73.0009 15.7013 75.7445 19.9283 77.6932C25.522 80.2719 31.6839 81.3723 37.8245 80.889C43.9651 80.4057 49.879 78.355 55.0005 74.9329C60.122 71.5108 64.2798 66.8319 67.0762 61.3437C69.8726 55.8554 71.2141 49.7415 70.9722 43.5866C70.7304 37.4318 68.9134 31.442 65.695 26.1901C62.4767 20.9381 57.9646 16.5998 52.5904 13.5901C48.5293 11.3159 44.0787 9.85769 39.4884 9.28088C37.0225 8.97102 35 6.98528 35 4.5Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </div>
-            <h3 className="mb-2 text-2xl font-bold font-heading">
-              Market Size
-            </h3>
-            <p className="text-gray-500 text-lg">Dolor sit amet consectutar</p>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
-            <div className="relative w-20 mx-auto mb-4">
-              <div className="absolute inset-0 ml-2 flex items-center justify-center">
-                <p className="text-lg font-bold text-gray-500">65 %</p>
-              </div>
-              <span className="relative block">
-                <svg
-                  width={69}
-                  height={91}
-                  viewBox="0 0 69 91"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M67.9865 79.0753C69.3577 81.148 68.7977 83.9622 66.5984 85.1196C61.1443 87.99 55.1436 89.717 48.9653 90.1747C41.2869 90.7435 33.5909 89.3326 26.6136 86.077C19.6362 82.8215 13.6109 77.8301 9.11396 71.5803C4.61701 65.3306 1.79884 58.0315 0.92903 50.3813C0.0592193 42.7311 1.16686 34.9857 4.146 27.8859C7.12514 20.7861 11.8761 14.5695 17.9445 9.83067C24.0129 5.09182 31.1957 1.98927 38.8058 0.819781C44.9292 -0.12122 51.1644 0.214628 57.1237 1.78733C59.5267 2.42151 60.7042 5.03807 59.8333 7.36576C58.9623 9.69345 56.3723 10.8445 53.9542 10.2706C49.4528 9.20231 44.7734 9.00838 40.1729 9.71535C34.0848 10.6509 28.3385 13.133 23.4838 16.9241C18.6291 20.7151 14.8283 25.6884 12.445 31.3683C10.0617 37.0481 9.17557 43.2444 9.87142 49.3646C10.5673 55.4847 12.8218 61.324 16.4194 66.3238C20.0169 71.3236 24.8372 75.3167 30.419 77.9212C36.0009 80.5256 42.1577 81.6543 48.3004 81.1993C52.9422 80.8554 57.4587 79.616 61.6053 77.5644C63.8329 76.4623 66.6152 77.0025 67.9865 79.0753Z"
-                    fill="#F1F5FB"
-                  />
-                </svg>
-              </span>
-              <span className="absolute inset-0 ml-3 block mx-auto">
-                <svg
-                  className="text-indigo-500"
-                  width={80}
-                  height={90}
-                  viewBox="0 0 80 90"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M35 4.5C35 2.01472 37.0197 -0.02331 39.4926 0.224807C45.6251 0.840118 51.5826 2.71056 56.988 5.73768C63.7057 9.49981 69.3458 14.9227 73.3688 21.4876C77.3918 28.0525 79.663 35.5398 79.9653 43.2333C80.2676 50.9268 78.5908 58.5693 75.0953 65.4296C71.5998 72.2899 66.4025 78.1385 60.0007 82.4161C53.5988 86.6937 46.2064 89.2572 38.5307 89.8613C30.8549 90.4654 23.1526 89.0899 16.1603 85.8664C10.5342 83.2728 5.51919 79.5524 1.4168 74.9528C-0.23745 73.098 0.224183 70.2661 2.23482 68.8053C4.24545 67.3445 7.04073 67.8135 8.74082 69.6263C11.9056 73.0009 15.7013 75.7445 19.9283 77.6932C25.522 80.2719 31.6839 81.3723 37.8245 80.889C43.9651 80.4057 49.879 78.355 55.0005 74.9329C60.122 71.5108 64.2798 66.8319 67.0762 61.3437C69.8726 55.8554 71.2141 49.7415 70.9722 43.5866C70.7304 37.4318 68.9134 31.442 65.695 26.1901C62.4767 20.9381 57.9646 16.5998 52.5904 13.5901C48.5293 11.3159 44.0787 9.85769 39.4884 9.28088C37.0225 8.97102 35 6.98528 35 4.5Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-            </div>
-            <h3 className="mb-2 text-2xl font-bold font-heading">
-              Market Size
-            </h3>
-            <p className="text-gray-500 text-lg">Dolor sit amet consectutar</p>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-function WhyInvest2({}) {
-  return (
-    <section id="why-invest-part-2" className="py-20">
-      <div className="container px-4 mx-auto">
-        <div className="max-w-xl lg:max-w-3xl mx-auto text-center">
-          <span className="text-xs font-semibold text-indigo-500 uppercase">
-            New Feature
-          </span>
-          <h2 className="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-            Take quick action that increases your brand's regular profit.
-          </h2>
-          <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
-            If you have ever wondeindigo how to develop your brand, this is the
-            place for you. Take a&nbsp;big step forward in growing your business
-            with this great tool.
-          </p>
-          <div>
-            <a
-              className="block md:inline-block px-5 py-3 md:mr-3 mb-3 md:mb-0 text-sm bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-              href="#"
-            >
-              Try Demo
-            </a>
-            <a
-              className="block md:inline-block px-5 py-3 text-sm font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-              href="#"
-            >
-              Share with your friends
-            </a>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-function FactSnippets({}) {
-  return (
-    <section id="fact-snippets" className="py-20">
-      <div className="container px-4 mx-auto">
-        <div className="max-w-3xl mx-auto mb-12 lg:mb-16 text-center">
-          <span className="text-sm text-indigo-500 font-bold uppercase">
-            Lorem ipsum
-          </span>
-          <h2 className="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-            Lorem ipsum dolor sit amet consectutar domor at elis
-          </h2>
-          <p className="text-lg text-gray-500 leading-loose">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan
-            aliquet orci.
-          </p>
-        </div>
-        <div className="flex flex-wrap items-center justify-around -m-4">
-          <div className="w-full md:w-1/2 lg:w-1/3 p-4">
-            <div className="bg-gray-50 p-6 rounded-lg">
-              <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
-                dignissim quam ultricies, placerat tellus sed, laoreet orci.
-                Duis luctus quam ac metus gravida sodales. Sed a ex accumsan,
-                pellentesque sem eget, scelerisque dolor.
-              </p>
-              <img
-                className="mb-2 h-12 w-12 object-cover rounded-full"
-                src="/images/indigo-500-avatar.png"
-                alt="Avatar image"
-              />
-              <p className="text-2xl font-bold font-heading">Danny Bailey</p>
-              <p className="text-lg text-gray-400">CEO &amp; Founder</p>
-            </div>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/3 p-4">
-            <div className="bg-gray-50 p-6 rounded-lg">
-              <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
-                dignissim quam ultricies, placerat tellus sed, laoreet orci.
-                Duis luctus quam ac metus gravida sodales. Sed a ex accumsan,
-                pellentesque sem eget, scelerisque dolor.
-              </p>
-              <img
-                className="mb-2 h-12 w-12 object-cover rounded-full"
-                src="/images/indigo-500-avatar.png"
-                alt="Avatar image"
-              />
-              <p className="text-2xl font-bold font-heading">Danny Bailey</p>
-              <p className="text-lg text-gray-400">CEO &amp; Founder</p>
-            </div>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/3 p-4">
-            <div className="bg-gray-50 p-6 rounded-lg">
-              <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
-                dignissim quam ultricies, placerat tellus sed, laoreet orci.
-                Duis luctus quam ac metus gravida sodales. Sed a ex accumsan,
-                pellentesque sem eget, scelerisque dolor.
-              </p>
-              <img
-                className="mb-2 h-12 w-12 object-cover rounded-full"
-                src="/images/indigo-500-avatar.png"
-                alt="Avatar image"
-              />
-              <p className="text-2xl font-bold font-heading">Danny Bailey</p>
-              <p className="text-lg text-gray-400">CEO &amp; Founder</p>
-            </div>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/3 p-4">
-            <div className="bg-gray-50 p-6 rounded-lg">
-              <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
-                dignissim quam ultricies, placerat tellus sed, laoreet orci.
-                Duis luctus quam ac metus gravida sodales. Sed a ex accumsan,
-                pellentesque sem eget, scelerisque dolor.
-              </p>
-              <img
-                className="mb-2 h-12 w-12 object-cover rounded-full"
-                src="/images/indigo-500-avatar.png"
-                alt=""
-              />
-              <p className="text-2xl font-bold font-heading">Danny Bailey</p>
-              <p className="text-lg text-gray-400">CEO &amp; Founder</p>
-            </div>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/3 p-4">
-            <div className="bg-gray-50 p-6 rounded-lg">
-              <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
-                dignissim quam ultricies, placerat tellus sed, laoreet orci.
-                Duis luctus quam ac metus gravida sodales. Sed a ex accumsan,
-                pellentesque sem eget, scelerisque dolor.
-              </p>
-              <img
-                className="mb-2 h-12 w-12 object-cover rounded-full"
-                src="/images/indigo-500-avatar.png"
-                alt="Avatar image"
-              />
-              <p className="text-2xl font-bold font-heading">Danny Bailey</p>
-              <p className="text-lg text-gray-400">CEO &amp; Founder</p>
-            </div>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/3 p-4">
-            <div className="bg-gray-50 p-6 rounded-lg">
-              <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
-                dignissim quam ultricies, placerat tellus sed, laoreet orci.
-                Duis luctus quam ac metus gravida sodales. Sed a ex accumsan,
-                pellentesque sem eget, scelerisque dolor.
-              </p>
-              <img
-                className="mb-2 h-12 w-12 object-cover rounded-full"
-                src="/images/indigo-500-avatar.png"
-                alt="Avatar image"
-              />
-              <p className="text-2xl font-bold font-heading">Danny Bailey</p>
-              <p className="text-lg text-gray-400">CEO &amp; Founder</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-function InfoCarousel({}) {
-  return (
-    <section id="info-carousel" className="py-20 bg-indigo-500">
-      <div className="container px-4 mx-auto">
-        <div className="flex flex-wrap items-center">
-          <button className="hidden lg:block w-16 h-16 p-5 rounded-full bg-indigo-50 hover:bg-white transition duration-200">
-            <svg
-              className="text-indigo-500 hover:text-indigo-500"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M15 19l-7-7 7-7"
-              />
-            </svg>
-          </button>
-          <div className="max-w-2xl mb-14 mx-auto text-center">
-            <h2 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading text-white">
-              Expand your brand with this excellent extension tool.
-            </h2>
-            <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-indigo-50">
-              A short message that will bring your customers into the world of
-              your imagination. And will allow them to become more familiar with
-              your brand.
-            </p>
-            <a
-              className="inline-block px-5 py-3 text-sm bg-white hover:bg-indigo-50 text-indigo-500 font-semibold border border-white rounded transition duration-200"
-              href="#"
-            >
-              Try Demo
-            </a>
-          </div>
-          <button className="hidden lg:block w-16 h-16 p-5 rounded-full bg-indigo-50 hover:bg-white transition duration-200">
-            <svg
-              className="text-indigo-500 hover:text-indigo-500"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M9 5l7 7-7 7"
-              />
-            </svg>
-          </button>
-          <div className="w-full text-center">
-            <button className="w-3 h-3 mr-2 rounded-full border border-indigo-50 bg-indigo-50" />
-            <button className="w-3 h-3 mr-2 rounded-full border border-indigo-50" />
-            <button className="w-3 h-3 mr-2 rounded-full border border-indigo-50" />
-            <button className="w-3 h-3 rounded-full border border-indigo-50" />
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function Considerations({}) {
-  return (
-    <section id="considerations" className="py-20">
-      <div className="container px-4 mx-auto">
-        <div className="max-w-2xl mx-auto">
-          <h2 className="mb-12 text-3xl font-bold font-heading">
-            Decisions To Consider Before Wireframing
-          </h2>
-          <ul>
-            <li className="mb-8">
-              <button className="group w-full flex justify-between items-center text-left font-bold font-heading">
-                <span className="hover:text-indigo-500 text-lg font-bold font-heading">
-                  Donec sed leo sit amet ante ornare laoreet in quis est?
-                </span>
-                <svg
-                  className="flex-shrink-0 w-4 h-4 ml-2 text-indigo-500"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 9l-7 7-7-7"
-                  />
-                </svg>
-              </button>
-              <p className="hidden mt-2 text-lg text-gray-500 leading-loose">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
-                quis ultricies est. Duis nec hendrerit magna. Ut vel orci
-                gravida, hendrerit enim non, gravida turpis. Praesent non lectus
-                porttitor, scelerisque nulla nec, ornare neque. Integer massa
-                libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et
-                massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla,
-                quis varius risus. Suspendisse ultrices ut lectus non laoreet.
-                Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus
-                erat non dui volutpat eleifend.
-              </p>
-            </li>
-            <li className="mb-8">
-              <button className="group w-full flex justify-between items-center text-left font-bold font-heading">
-                <span className="hover:text-indigo-500 text-lg font-bold font-heading">
-                  Fusce eget nunc et libero accumsan rutrum quis nec lectus?
-                </span>
-                <svg
-                  className="flex-shrink-0 w-4 h-4 ml-2 text-indigo-500"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M5 15l7-7 7 7"
-                  />
-                </svg>
-              </button>
-              <p className="mt-2 text-lg text-gray-500 leading-loose">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
-                euismod orci sed tristique placerat. Fusce in ligula urna. Fusce
-                eget nunc et libero accumsan rutrum quis nec lectus. Quisque
-                luctus sem nibh, quis ornare neque consectetur varius. Maecenas
-                rhoncus consectetur rutrum.
-              </p>
-            </li>
-            <li className="mb-8">
-              <button className="group w-full flex justify-between items-center text-left font-bold font-heading">
-                <span className="hover:text-indigo-500 text-lg font-bold font-heading">
-                  Mauris vitae ex ut lectus cursus ornare?
-                </span>
-                <svg
-                  className="flex-shrink-0 w-4 h-4 ml-2 text-indigo-500"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 9l-7 7-7-7"
-                  />
-                </svg>
-              </button>
-              <p className="hidden mt-2 text-lg text-gray-500 leading-loose">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
-                quis ultricies est. Duis nec hendrerit magna. Ut vel orci
-                gravida, hendrerit enim non, gravida turpis. Praesent non lectus
-                porttitor, scelerisque nulla nec, ornare neque. Integer massa
-                libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et
-                massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla,
-                quis varius risus. Suspendisse ultrices ut lectus non laoreet.
-                Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus
-                erat non dui volutpat eleifend.
-              </p>
-            </li>
-            <li className="mb-8">
-              <button className="group w-full flex justify-between items-center text-left">
-                <span className="hover:text-indigo-500 text-lg font-bold font-heading">
-                  Nam consequat, augue sed rutrum faucibus?
-                </span>
-                <svg
-                  className="flex-shrink-0 w-4 h-4 ml-2 text-indigo-500"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 9l-7 7-7-7"
-                  />
-                </svg>
-              </button>
-              <p className="hidden mt-2 text-lg text-gray-500 leading-loose">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
-                euismod orci sed tristique placerat. Fusce in ligula urna. Fusce
-                eget nunc et libero accumsan rutrum quis nec lectus. Quisque
-                luctus sem nibh, quis ornare neque consectetur varius. Maecenas
-                rhoncus consectetur rutrum.
-              </p>
-            </li>
-            <li className="mb-8">
-              <button className="group w-full flex justify-between items-center text-left">
-                <span className="hover:text-indigo-500 text-lg font-bold font-heading">
-                  Cras at ante non ligula pharetra elementum?
-                </span>
-                <svg
-                  className="flex-shrink-0 w-4 h-4 ml-2 text-indigo-500"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 9l-7 7-7-7"
-                  />
-                </svg>
-              </button>
-              <p className="hidden mt-2 text-lg text-gray-500 leading-loose">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
-                euismod orci sed tristique placerat. Fusce in ligula urna. Fusce
-                eget nunc et libero accumsan rutrum quis nec lectus. Quisque
-                luctus sem nibh, quis ornare neque consectetur varius. Maecenas
-                rhoncus consectetur rutrum.
-              </p>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function Team({}) {
-  return (
-    <section id="team" className="py-20">
-      <div className="container px-4 mx-auto">
-        <div className="max-w-lg lg:max-w-2xl mx-auto text-center mb-12 lg:mb-16">
-          <span className="text-xs font-semibold text-indigo-500 uppercase">
-            Lorem ipsum
-          </span>
-          <h2 className="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-            Lorem ipsum dolor sit amet consectutar domor at elis
-          </h2>
-          <p className="text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan
-            aliquet orci.
-          </p>
-        </div>
-        <div className="flex flex-wrap -m-4">
-          <div className="w-full lg:w-1/2 p-4">
-            <div className="bg-gray-50 p-6 rounded">
-              <div className="flex flex-wrap items-center -mx-4">
-                <div className="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
-                  <img
-                    className="md:w-full h-52 object-cover rounded-lg"
-                    src="/images/indigo-600-square.png"
-                    alt="Avatar image"
-                  />
-                </div>
-                <div className="w-full md:w-3/5 px-4">
-                  <h3 className="text-2xl font-bold font-heading mb-1">
-                    Danny Bailey
-                  </h3>
-                  <p className="mb-2 text-lg text-gray-400">
-                    CEO &amp; Founder
-                  </p>
-                  <p className="text-lg text-gray-500 leading-loose">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    Pellentesque massa nibh.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="w-full lg:w-1/2 p-4">
-            <div className="bg-gray-50 p-6 rounded">
-              <div className="flex flex-wrap items-center -mx-4">
-                <div className="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
-                  <img
-                    className="md:w-full h-52 object-cover rounded-lg"
-                    src="/images/indigo-600-square.png"
-                    alt="Avatar image"
-                  />
-                </div>
-                <div className="w-full md:w-3/5 px-4">
-                  <h3 className="text-2xl font-bold font-heading mb-1">
-                    Danny Bailey
-                  </h3>
-                  <p className="mb-2 text-lg text-gray-400">
-                    CEO &amp; Founder
-                  </p>
-                  <p className="text-lg text-gray-500 leading-loose">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    Pellentesque massa nibh.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="w-full lg:w-1/2 p-4">
-            <div className="bg-gray-50 p-6 rounded">
-              <div className="flex flex-wrap items-center -mx-4">
-                <div className="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
-                  <img
-                    className="md:w-full h-52 object-cover rounded-lg"
-                    src="/images/indigo-600-square.png"
-                    alt="Avatar image"
-                  />
-                </div>
-                <div className="w-full md:w-3/5 px-4">
-                  <h3 className="text-2xl font-bold font-heading mb-1">
-                    Danny Bailey
-                  </h3>
-                  <p className="mb-2 text-lg text-gray-400">
-                    CEO &amp; Founder
-                  </p>
-                  <p className="text-lg text-gray-500 leading-loose">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    Pellentesque massa nibh.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="w-full lg:w-1/2 p-4">
-            <div className="bg-gray-50 p-6 rounded">
-              <div className="flex flex-wrap items-center -mx-4">
-                <div className="w-full md:w-2/5 px-4 mb-4 lg:mb-0">
-                  <img
-                    className="md:w-full h-52 object-cover rounded-lg"
-                    src="/images/indigo-600-square.png"
-                    alt="Avatar image"
-                  />
-                </div>
-                <div className="w-full md:w-3/5 px-4">
-                  <h3 className="text-2xl font-bold font-heading mb-1">
-                    Danny Bailey
-                  </h3>
-                  <p className="mb-2 text-lg text-gray-400">
-                    CEO &amp; Founder
-                  </p>
-                  <p className="text-lg text-gray-500 leading-loose">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    Pellentesque massa nibh.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-function FAQ({}) {
-  return (
-    <section id="faq" className="py-20">
-      <div className="container px-4 mx-auto">
-        <div className="mb-16 text-center">
-          <span className="text-xs font-semibold text-indigo-500 uppercase">
-            Lorem ipsum
-          </span>
-          <h2 className="mt-2 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-            Frequently Asked Questions
-          </h2>
-        </div>
-        <div className="flex flex-wrap -mx-4 -mb-8">
-          <div className="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
-            <div>
-              <span className="mr-6 mb-6 flex items-center justify-center w-16 h-16 p-3 bg-indigo-500 rounded-full">
-                <svg
-                  className="text-gray-50"
-                  width={32}
-                  height={32}
-                  viewBox="0 0 32 32"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <h3 className="mb-2 text-lg lg:text-2xl font-bold font-heading">
-                Neque porro quisquam est
-              </h3>
-              <ul className="list-inside list-disc leading-loose text-gray-500">
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Etiam pellentesque non nibh
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Mauris posuere
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Tellus sit amet tempus vestibulum
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Erat augue imperdiet neque
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
-            <div>
-              <span className="mr-6 mb-6 flex items-center justify-center w-16 h-16 p-3 bg-indigo-500 rounded-full">
-                <svg
-                  className="text-gray-50"
-                  width={32}
-                  height={32}
-                  viewBox="0 0 32 32"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <h3 className="mb-2 text-lg lg:text-2xl font-bold font-heading">
-                Neque porro quisquam est
-              </h3>
-              <ul className="list-inside list-disc leading-loose text-gray-500">
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Etiam pellentesque non nibh
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Mauris posuere
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Tellus sit amet tempus vestibulum
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Erat augue imperdiet neque
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
-            <div>
-              <span className="mr-6 mb-6 flex items-center justify-center w-16 h-16 p-3 bg-indigo-500 rounded-full">
-                <svg
-                  className="text-gray-50"
-                  width={32}
-                  height={32}
-                  viewBox="0 0 32 32"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <h3 className="mb-2 text-lg lg:text-2xl font-bold font-heading">
-                Neque porro quisquam est
-              </h3>
-              <ul className="list-inside list-disc leading-loose text-gray-500">
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Etiam pellentesque non nibh
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Mauris posuere
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Tellus sit amet tempus vestibulum
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Erat augue imperdiet neque
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
-            <div>
-              <span className="mr-6 mb-6 flex items-center justify-center w-16 h-16 p-3 bg-indigo-500 rounded-full">
-                <svg
-                  className="text-gray-50"
-                  width={32}
-                  height={32}
-                  viewBox="0 0 32 32"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <h3 className="mb-2 text-lg lg:text-2xl font-bold font-heading">
-                Neque porro quisquam est
-              </h3>
-              <ul className="list-inside list-disc leading-loose text-gray-500">
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Etiam pellentesque non nibh
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Mauris posuere
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Tellus sit amet tempus vestibulum
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Erat augue imperdiet neque
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
-            <div>
-              <span className="mr-6 mb-6 flex items-center justify-center w-16 h-16 p-3 bg-indigo-500 rounded-full">
-                <svg
-                  className="text-gray-50"
-                  width={32}
-                  height={32}
-                  viewBox="0 0 32 32"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <h3 className="mb-2 text-lg lg:text-2xl font-bold font-heading">
-                Neque porro quisquam est
-              </h3>
-              <ul className="list-inside list-disc leading-loose text-gray-500">
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Etiam pellentesque non nibh
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Mauris posuere
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Tellus sit amet tempus vestibulum
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Erat augue imperdiet neque
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
-            <div>
-              <span className="mr-6 mb-6 flex items-center justify-center w-16 h-16 p-3 bg-indigo-500 rounded-full">
-                <svg
-                  className="text-gray-50"
-                  width={32}
-                  height={32}
-                  viewBox="0 0 32 32"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <h3 className="mb-2 text-lg lg:text-2xl font-bold font-heading">
-                Neque porro quisquam est
-              </h3>
-              <ul className="list-inside list-disc leading-loose text-gray-500">
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Etiam pellentesque non nibh
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Mauris posuere
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Tellus sit amet tempus vestibulum
-                  </a>
-                </li>
-                <li className="text-indigo-500">
-                  <a className="text-gray-500 hover:underline" href="#">
-                    Erat augue imperdiet neque
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
 export default function Funded() {
   const entityTitle = "Tincre";
   const title = `Funded, by ${entityTitle}`;

From 194f07b38296be7103681ef626223bf198970f8d Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 18:33:54 -0600
Subject: [PATCH 06/19] :white_check_mark: :sparkles: add basic component tests
 [sc-561]

---
 __tests__/components/Footer.test.jsx                  | 8 ++++++++
 __tests__/components/Sections/Considerations.test.jsx | 8 ++++++++
 __tests__/components/Sections/FAQ.test.jsx            | 8 ++++++++
 __tests__/components/Sections/FactCards.test.jsx      | 8 ++++++++
 __tests__/components/Sections/FactSnippets.test.jsx   | 8 ++++++++
 __tests__/components/Sections/InfoCarousel.test.jsx   | 8 ++++++++
 __tests__/components/Sections/NavigationHero.test.jsx | 8 ++++++++
 __tests__/components/Sections/Stats1.test.jsx         | 8 ++++++++
 __tests__/components/Sections/Stats2.test.jsx         | 8 ++++++++
 __tests__/components/Sections/Team.test.jsx           | 8 ++++++++
 __tests__/components/Sections/WhyInvest1.test.jsx     | 8 ++++++++
 __tests__/components/Sections/WhyInvest2.test.jsx     | 8 ++++++++
 12 files changed, 96 insertions(+)
 create mode 100644 __tests__/components/Footer.test.jsx
 create mode 100644 __tests__/components/Sections/Considerations.test.jsx
 create mode 100644 __tests__/components/Sections/FAQ.test.jsx
 create mode 100644 __tests__/components/Sections/FactCards.test.jsx
 create mode 100644 __tests__/components/Sections/FactSnippets.test.jsx
 create mode 100644 __tests__/components/Sections/InfoCarousel.test.jsx
 create mode 100644 __tests__/components/Sections/NavigationHero.test.jsx
 create mode 100644 __tests__/components/Sections/Stats1.test.jsx
 create mode 100644 __tests__/components/Sections/Stats2.test.jsx
 create mode 100644 __tests__/components/Sections/Team.test.jsx
 create mode 100644 __tests__/components/Sections/WhyInvest1.test.jsx
 create mode 100644 __tests__/components/Sections/WhyInvest2.test.jsx

diff --git a/__tests__/components/Footer.test.jsx b/__tests__/components/Footer.test.jsx
new file mode 100644
index 0000000..620bb76
--- /dev/null
+++ b/__tests__/components/Footer.test.jsx
@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import Footer from "../../components/Footer";
+
+describe("Footer", () => {
+  it("should render the component", () => {
+    render(<Footer />);
+  });
+});
diff --git a/__tests__/components/Sections/Considerations.test.jsx b/__tests__/components/Sections/Considerations.test.jsx
new file mode 100644
index 0000000..c3a484c
--- /dev/null
+++ b/__tests__/components/Sections/Considerations.test.jsx
@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import Considerations from "../../../components/Footer";
+
+describe("Considerations", () => {
+  it("should render the component", () => {
+    render(<Considerations />);
+  });
+});
diff --git a/__tests__/components/Sections/FAQ.test.jsx b/__tests__/components/Sections/FAQ.test.jsx
new file mode 100644
index 0000000..976848e
--- /dev/null
+++ b/__tests__/components/Sections/FAQ.test.jsx
@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import FAQ from "../../../components/Sections/FAQ";
+
+describe("FAQ", () => {
+  it("should render the component", () => {
+    render(<FAQ />);
+  });
+});
diff --git a/__tests__/components/Sections/FactCards.test.jsx b/__tests__/components/Sections/FactCards.test.jsx
new file mode 100644
index 0000000..36f623e
--- /dev/null
+++ b/__tests__/components/Sections/FactCards.test.jsx
@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import FactCards from "../../../components/Sections/FactCards";
+
+describe("FactCards", () => {
+  it("should render the component", () => {
+    render(<FactCards />);
+  });
+});
diff --git a/__tests__/components/Sections/FactSnippets.test.jsx b/__tests__/components/Sections/FactSnippets.test.jsx
new file mode 100644
index 0000000..2b5ba3b
--- /dev/null
+++ b/__tests__/components/Sections/FactSnippets.test.jsx
@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import FactSnippets from "../../../components/Sections/FactSnippets";
+
+describe("FactSnippets", () => {
+  it("should render the component", () => {
+    render(<FactSnippets />);
+  });
+});
diff --git a/__tests__/components/Sections/InfoCarousel.test.jsx b/__tests__/components/Sections/InfoCarousel.test.jsx
new file mode 100644
index 0000000..1ea4f05
--- /dev/null
+++ b/__tests__/components/Sections/InfoCarousel.test.jsx
@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import InfoCarousel from "../../../components/Sections/InfoCarousel";
+
+describe("InfoCarousel", () => {
+  it("should render the component", () => {
+    render(<InfoCarousel />);
+  });
+});
diff --git a/__tests__/components/Sections/NavigationHero.test.jsx b/__tests__/components/Sections/NavigationHero.test.jsx
new file mode 100644
index 0000000..774a6c7
--- /dev/null
+++ b/__tests__/components/Sections/NavigationHero.test.jsx
@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import NavigationHero from "../../../components/Sections/NavigationHero";
+
+describe("NavigationHero", () => {
+  it("should render the component", () => {
+    render(<NavigationHero />);
+  });
+});
diff --git a/__tests__/components/Sections/Stats1.test.jsx b/__tests__/components/Sections/Stats1.test.jsx
new file mode 100644
index 0000000..b8ed9c9
--- /dev/null
+++ b/__tests__/components/Sections/Stats1.test.jsx
@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import Stats1 from "../../../components/Sections/Stats1";
+
+describe("Stats1", () => {
+  it("should render the component", () => {
+    render(<Stats1 />);
+  });
+});
diff --git a/__tests__/components/Sections/Stats2.test.jsx b/__tests__/components/Sections/Stats2.test.jsx
new file mode 100644
index 0000000..fbd07f1
--- /dev/null
+++ b/__tests__/components/Sections/Stats2.test.jsx
@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import Stats2 from "../../../components/Sections/Stats2";
+
+describe("Stats2", () => {
+  it("should render the component", () => {
+    render(<Stats2 />);
+  });
+});
diff --git a/__tests__/components/Sections/Team.test.jsx b/__tests__/components/Sections/Team.test.jsx
new file mode 100644
index 0000000..3d8d54f
--- /dev/null
+++ b/__tests__/components/Sections/Team.test.jsx
@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import Team from "../../../components/Sections/Team";
+
+describe("Team", () => {
+  it("should render the component", () => {
+    render(<Team />);
+  });
+});
diff --git a/__tests__/components/Sections/WhyInvest1.test.jsx b/__tests__/components/Sections/WhyInvest1.test.jsx
new file mode 100644
index 0000000..7732e33
--- /dev/null
+++ b/__tests__/components/Sections/WhyInvest1.test.jsx
@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import WhyInvest1 from "../../../components/Sections/WhyInvest1";
+
+describe("WhyInvest1", () => {
+  it("should render the component", () => {
+    render(<WhyInvest1 />);
+  });
+});
diff --git a/__tests__/components/Sections/WhyInvest2.test.jsx b/__tests__/components/Sections/WhyInvest2.test.jsx
new file mode 100644
index 0000000..ef68f0d
--- /dev/null
+++ b/__tests__/components/Sections/WhyInvest2.test.jsx
@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import WhyInvest2 from "../../../components/Sections/WhyInvest2";
+
+describe("WhyInvest2", () => {
+  it("should render the component", () => {
+    render(<WhyInvest2 />);
+  });
+});

From 007d3a623da9d578e2a9604b81fa2c3e9e101be3 Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 18:36:24 -0600
Subject: [PATCH 07/19] :recycle: add coverage to jest call

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bb4c12a..d20c99b 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "jest"
+    "test": "jest --coverage"
   },
   "dependencies": {
     "next": "^12.0.9",

From 8fe77b7c6416eee4a4a1bce904a1d69ca49773ff Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 19:49:54 -0600
Subject: [PATCH 08/19] :recycle: extract logoSrc

---
 components/Footer.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/Footer.jsx b/components/Footer.jsx
index 06cd350..d1cae6f 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -1,4 +1,4 @@
-export default function Footer({ entityTitle }) {
+export default function Footer({ entityTitle, logoSrc }) {
   return (
     <section id="footer" className="py-20">
       <div className="container px-4 mx-auto">
@@ -111,7 +111,7 @@ export default function Footer({ entityTitle }) {
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             </p>
             <input
-              className="w-full lg:w-2/3 mb-4 pl-4 py-3 mr-4 border rounded"
+              className="w-full lg:w-2/3 mb-4 pl-4 py-3 mr-4 border border-2 rounded"
               type="email"
               placeholder="Type your e-mail"
             />
@@ -127,15 +127,15 @@ export default function Footer({ entityTitle }) {
           <div className="w-full lg:w-1/2 mb-6 lg:mb-0">
             <a className="text-gray-600 text-2xl leading-none" href="#">
               <img
-                className="h-8"
-                src="/logos/plain-indigo.svg"
+                className="h-16"
+                src={logoSrc}
                 alt={`${entityTitle} logo`}
                 width="auto"
-                height="2rem"
+                height="4rem"
               />
             </a>
             <p className="hidden lg:block mt-3 text-sm text-gray-500">
-              All rights reserved. © Plain Inc. 2022
+              {`All rights reserved. © ${entityTitle} 2022`}
             </p>
           </div>
           <div className="w-full lg:w-1/2 mb-4 lg:mb-0">
@@ -164,7 +164,7 @@ export default function Footer({ entityTitle }) {
             </div>
           </div>
           <p className="lg:hidden text-sm text-gray-500">
-            All rights reserved. © Plain Inc. 2022
+            {`All rights reserved. © ${entityTitle} 2022`}
           </p>
         </div>
       </div>

From 308639270cd2c07ba5140cc0d35fea952337d6bd Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 19:50:29 -0600
Subject: [PATCH 09/19] :recycle: refactor Mobile and other nav

---
 components/Sections/NavigationHero.jsx | 359 ++++++++++++++-----------
 1 file changed, 198 insertions(+), 161 deletions(-)

diff --git a/components/Sections/NavigationHero.jsx b/components/Sections/NavigationHero.jsx
index f520988..b71d9da 100644
--- a/components/Sections/NavigationHero.jsx
+++ b/components/Sections/NavigationHero.jsx
@@ -1,94 +1,43 @@
-export default function NavigationHero({ entityTitle }) {
+import Link from "next/link";
+
+function MobileNavigationItem({ href, children }) {
   return (
-    <section id="navigation-hero">
-      <div className="container px-4 mx-auto">
-        <nav className="flex justify-between items-center py-8">
-          <a className="text-gray-700 text-2xl leading-none" href="#">
+    <Link href={href}>
+      <a
+        className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
+        href={href}
+      >
+        {children}
+      </a>
+    </Link>
+  );
+}
+function NavigationItem({ href, children }) {
+  return (
+    <Link href={href}>
+      <a className="text-sm hover:text-indigo-700 font-medium" href={href}>
+        {children}
+      </a>
+    </Link>
+  );
+}
+function MobileNavbar({ entityTitle, navigationLinks, navigationHrefs, cta }) {
+  return (
+    <div className="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
+      <div className="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25" />
+      <nav className="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
+        <div className="flex items-center mb-12">
+          <a className="mr-auto text-2xl font-semibold leading-none" href="#">
             <img
               className="h-8"
               src="/logos/plain-indigo.svg"
-              alt={`The ${entityTitle} logo`}
+              alt={`${entityTitle} logo`}
               width="auto"
-              height="2rem"
             />
           </a>
-          <div className="lg:hidden">
-            <button className="block navbar-burger text-indigo-500 hover:text-indigo-500 focus:outline-none">
-              <svg
-                className="h-4 w-4"
-                fill="currentColor "
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>Mobile menu</title>
-                <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
-              </svg>
-            </button>
-          </div>
-          <ul className="hidden lg:flex ml-auto mr-10 items-center w-auto space-x-12">
-            <li>
-              <a className="text-sm hover:text-indigo-700 font-medium" href="#">
-                About
-              </a>
-            </li>
-            <li>
-              <a className="text-sm hover:text-indigo-700 font-medium" href="#">
-                Company
-              </a>
-            </li>
-            <li>
-              <a className="text-sm hover:text-indigo-700 font-medium" href="#">
-                Services
-              </a>
-            </li>
-            <li>
-              <a className="text-sm hover:text-indigo-700 font-medium" href="#">
-                Testimonials
-              </a>
-            </li>
-          </ul>
-          <a
-            className="hidden lg:block px-5 py-3 text-sm font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-            href="#"
-          >
-            Contact Us
-          </a>
-        </nav>
-        <div className="flex flex-wrap items-center -mx-4 mt-10 lg:my-10 pb-10 lg:pb-16">
-          <div className="w-full md:w-1/2 px-4 mb-12 md:mb-0">
-            <h2 className="max-w-sm mb-8 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-              Take care of your performance every day.
-            </h2>
-            <p className="max-w-lg mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
-              Build a well-presented brand that everyone will love. Take care to
-              develop resources continually and integrity them with previous
-              projects.
-            </p>
-            <div>
-              <a
-                className="block lg:inline-block px-5 py-3 lg:mr-3 mb-3 lg:mb-0 text-sm text-center bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-                href="#"
-              >
-                Track your performance
-              </a>
-              <a
-                className="block lg:inline-block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-                href="#"
-              >
-                Learn more
-              </a>
-            </div>
-          </div>
-          <div className="w-full md:w-1/2 px-4">
-            <img
-              className="object-cover w-full rounded-xl"
-              src="/images/indigo-600-square.png"
-              alt="Hero image"
-            />
-          </div>
-          <button className="block mt-10 lg:mt-20 mx-auto w-16 h-16 p-5 rounded-full bg-indigo-50 hover:bg-indigo-100">
+          <button className="navbar-close">
             <svg
-              className="mx-auto text-indigo-500"
+              className="h-6 w-6 cursor-pointer hover:text-indigo-500"
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
               viewBox="0 0 24 24"
@@ -98,92 +47,180 @@ export default function NavigationHero({ entityTitle }) {
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth={2}
-                d="M19 9l-7 7-7-7"
+                d="M6 18L18 6M6 6l12 12"
               />
             </svg>
           </button>
         </div>
-      </div>
-      <div className="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
-        <div className="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25" />
-        <nav className="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
-          <div className="flex items-center mb-12">
-            <a className="mr-auto text-2xl font-semibold leading-none" href="#">
-              <img
-                className="h-8"
-                src="/logos/plain-indigo.svg"
-                alt={`${entityTitle} logo`}
-                width="auto"
-              />
+        <div>
+          <ul>
+            {navigationLinks?.map((navName, index) => {
+              try {
+                const href = navigationHrefs[index];
+                return (
+                  <li className="mb-1">
+                    <MobileNavigationItem href={href}>
+                      {navName}
+                    </MobileNavigationItem>
+                  </li>
+                );
+              } catch {
+                console.error(
+                  `An error occured while loading the mobile navigation component. Please file a bug, thanks!`
+                );
+                return null;
+              }
+            })}
+          </ul>
+        </div>
+        <div className="mt-auto">
+          <div className="pt-6">
+            <a
+              className="block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+              href="#"
+            >
+              {cta}
             </a>
-            <button className="navbar-close">
-              <svg
-                className="h-6 w-6 cursor-pointer hover:text-indigo-500"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
           </div>
-          <div>
-            <ul>
-              <li className="mb-1">
-                <a
-                  className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
-                  href="#"
-                >
-                  About
-                </a>
-              </li>
-              <li className="mb-1">
-                <a
-                  className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
-                  href="#"
-                >
-                  Company
-                </a>
-              </li>
-              <li className="mb-1">
-                <a
-                  className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
-                  href="#"
-                >
-                  Services
-                </a>
-              </li>
-              <li className="mb-1">
-                <a
-                  className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
-                  href="#"
-                >
-                  Testimonials
-                </a>
+          <p className="mt-6 mb-4 text-sm text-center text-gray-500">
+            <span>{`© ${entityTitle} 2022 All rights reserved.`}</span>
+          </p>
+        </div>
+      </nav>
+    </div>
+  );
+}
+function Navbar({ entityTitle, navigationLinks, navigationHrefs, cta }) {
+  return (
+    <nav className="flex justify-between items-center py-8">
+      <a className="text-gray-700 text-2xl leading-none" href="#">
+        <img
+          className="h-16"
+          src="https://res.cloudinary.com/tincre/image/upload/v1638892843/tincre.com/tincre-brand-indigo-800_uatfej.svg"
+          alt={`The ${entityTitle} logo`}
+          width="auto"
+          height="4rem"
+        />
+      </a>
+      <div className="lg:hidden">
+        <button className="block navbar-burger text-indigo-500 hover:text-indigo-500 focus:outline-none">
+          <svg
+            className="h-4 w-4"
+            fill="currentColor "
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>Mobile menu</title>
+            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+          </svg>
+        </button>
+      </div>
+      <ul className="hidden lg:flex ml-auto mr-10 items-center w-auto space-x-12">
+        {navigationLinks.map((navName, index) => {
+          try {
+            const href = navigationHrefs[index];
+            return (
+              <li>
+                <NavigationItem href={href}>{navName}</NavigationItem>
               </li>
-            </ul>
-          </div>
-          <div className="mt-auto">
-            <div className="pt-6">
-              <a
-                className="block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-                href="#"
-              >
-                Contact Us
-              </a>
-            </div>
-            <p className="mt-6 mb-4 text-sm text-center text-gray-500">
-              <span>© 2022 All rights reserved.</span>
-            </p>
-          </div>
-        </nav>
+            );
+          } catch {
+            console.error(
+              `An error occured while loading the navigation component. Please file a bug, thanks!`
+            );
+            return null;
+          }
+        })}
+      </ul>
+      <a
+        className="hidden lg:block px-5 py-3 text-sm font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+        href="#"
+      >
+        {cta}
+      </a>
+    </nav>
+  );
+}
+function Hero({ heading, subHeading, cta1, cta2, imageSrc }) {
+  return (
+    <div className="flex flex-wrap items-center -mx-4 mt-10 lg:my-10 pb-10 lg:pb-16">
+      <div className="w-full md:w-1/2 px-4 mb-12 md:mb-0">
+        <h2 className="max-w-sm mb-8 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+          {heading}
+        </h2>
+        <p className="max-w-lg mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
+          {subHeading}
+        </p>
+        <div>
+          <a
+            className="block lg:inline-block px-5 py-3 lg:mr-3 mb-3 lg:mb-0 text-sm text-center bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+            href="#"
+          >
+            {cta1}
+          </a>
+          <a
+            className="block lg:inline-block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+            href="#"
+          >
+            {cta2}
+          </a>
+        </div>
+      </div>
+      <div className="w-full md:w-1/2 px-4">
+        <img
+          className="object-cover w-full rounded-xl"
+          src={imageSrc || "/images/indigo-600-square.png"}
+          alt="Hero image"
+        />
+      </div>
+      <button className="block mt-10 lg:mt-20 mx-auto w-16 h-16 p-5 rounded-full bg-indigo-50 hover:bg-indigo-100">
+        <svg
+          className="mx-auto text-indigo-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}
+export default function NavigationHero({
+  entityTitle,
+  navigationLinks,
+  navigationHrefs,
+  cta,
+}) {
+  return (
+    <section id="navigation-hero">
+      <div className="container px-4 mx-auto">
+        <Navbar
+          entityTitle={entityTitle}
+          navigationLinks={navigationLinks}
+          navigationHrefs={navigationHrefs}
+          cta={cta}
+        />
+        <Hero
+          heading="We're a different kind of online business."
+          subHeading="We create value across the web via financially performant semi-autonomous brands centered around core technology."
+          cta1="Learn about our raise"
+          cta2="Sign in or up"
+          imageSrc="https://res.cloudinary.com/tincre/image/upload/v1638892843/tincre.com/tincre-brand-indigo-800_uatfej.svg"
+        />
       </div>
+      <MobileNavbar
+        entityTitle={entityTitle}
+        navigationLinks={navigationLinks}
+        navigationHrefs={navigationHrefs}
+        cta={cta}
+      />
     </section>
   );
 }

From e3b7102489c79ffe0dfffd63b4b6b1559627b079 Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 19:50:50 -0600
Subject: [PATCH 10/19] :recycle: add props to NavigationHero and Footer

---
 pages/index.jsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/pages/index.jsx b/pages/index.jsx
index 173bda3..b56baf5 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -17,6 +17,11 @@ export default function Funded() {
   const description =
     "A Single Page Application for getting funded, built on Next.js and Tailwindcss, by Tincre.";
   const author = "Tincre Engineering, https://tincre.com";
+  const navigationLinks = [`Investing in ${entityTitle}`, "About", "The Team"];
+  const navigationHrefs = ["#why-invest-part-1", "#fact-snippets", "#team"];
+  const cta = "Invest";
+  const logoSrc =
+    "https://res.cloudinary.com/tincre/image/upload/v1638892843/tincre.com/tincre-brand-indigo-800_uatfej.svg";
   return (
     <div>
       <title>{title}</title>
@@ -30,7 +35,12 @@ export default function Funded() {
       <meta name="author" content={author} />
 
       <div>
-        <NavigationHero entityTitle={entityTitle} />
+        <NavigationHero
+          entityTitle={entityTitle}
+          navigationLinks={navigationLinks}
+          navigationHrefs={navigationHrefs}
+          cta={cta}
+        />
         <Stats1 />
         <WhyInvest1 />
         <FactCards />
@@ -41,7 +51,7 @@ export default function Funded() {
         <Considerations />
         <Team />
         <FAQ />
-        <Footer entityTitle={entityTitle} />
+        <Footer entityTitle={entityTitle} logoSrc={logoSrc} />
       </div>
     </div>
   );

From dd9d6324b1e9c0ca461aba1af8b37e34e6112c4e Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 20:17:12 -0600
Subject: [PATCH 11/19] :bug: fix undefined nav items and add keys

---
 components/Sections/NavigationHero.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/Sections/NavigationHero.jsx b/components/Sections/NavigationHero.jsx
index b71d9da..479c6ee 100644
--- a/components/Sections/NavigationHero.jsx
+++ b/components/Sections/NavigationHero.jsx
@@ -58,7 +58,7 @@ function MobileNavbar({ entityTitle, navigationLinks, navigationHrefs, cta }) {
               try {
                 const href = navigationHrefs[index];
                 return (
-                  <li className="mb-1">
+                  <li className="mb-1" key={navName + `${index}`}>
                     <MobileNavigationItem href={href}>
                       {navName}
                     </MobileNavigationItem>
@@ -116,11 +116,11 @@ function Navbar({ entityTitle, navigationLinks, navigationHrefs, cta }) {
         </button>
       </div>
       <ul className="hidden lg:flex ml-auto mr-10 items-center w-auto space-x-12">
-        {navigationLinks.map((navName, index) => {
+        {navigationLinks?.map((navName, index) => {
           try {
             const href = navigationHrefs[index];
             return (
-              <li>
+              <li key={navName + `${index}`}>
                 <NavigationItem href={href}>{navName}</NavigationItem>
               </li>
             );

From 6b443d8111da5c913ee2f4f6940f9ac2bdf3a575 Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 20:24:05 -0600
Subject: [PATCH 12/19] :recycle: extract individual components from
 NavigationHero [sc-561]

---
 components/Hero.jsx                 | 51 ++++++++++++++++++++
 components/MobileNavbar.jsx         | 75 +++++++++++++++++++++++++++++
 components/MobileNavigationItem.jsx | 13 +++++
 components/Navbar.jsx               | 58 ++++++++++++++++++++++
 components/NavigationItem.jsx       | 10 ++++
 5 files changed, 207 insertions(+)
 create mode 100644 components/Hero.jsx
 create mode 100644 components/MobileNavbar.jsx
 create mode 100644 components/MobileNavigationItem.jsx
 create mode 100644 components/Navbar.jsx
 create mode 100644 components/NavigationItem.jsx

diff --git a/components/Hero.jsx b/components/Hero.jsx
new file mode 100644
index 0000000..89b539c
--- /dev/null
+++ b/components/Hero.jsx
@@ -0,0 +1,51 @@
+export default function Hero({ heading, subHeading, cta1, cta2, imageSrc }) {
+  return (
+    <div className="flex flex-wrap items-center -mx-4 mt-10 lg:my-10 pb-10 lg:pb-16">
+      <div className="w-full md:w-1/2 px-4 mb-12 md:mb-0">
+        <h2 className="max-w-sm mb-8 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+          {heading}
+        </h2>
+        <p className="max-w-lg mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
+          {subHeading}
+        </p>
+        <div>
+          <a
+            className="block lg:inline-block px-5 py-3 lg:mr-3 mb-3 lg:mb-0 text-sm text-center bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+            href="#"
+          >
+            {cta1}
+          </a>
+          <a
+            className="block lg:inline-block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+            href="#"
+          >
+            {cta2}
+          </a>
+        </div>
+      </div>
+      <div className="w-full md:w-1/2 px-4">
+        <img
+          className="object-cover w-full rounded-xl"
+          src={imageSrc || "/images/indigo-600-square.png"}
+          alt="Hero image"
+        />
+      </div>
+      <button className="block mt-10 lg:mt-20 mx-auto w-16 h-16 p-5 rounded-full bg-indigo-50 hover:bg-indigo-100">
+        <svg
+          className="mx-auto text-indigo-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}
diff --git a/components/MobileNavbar.jsx b/components/MobileNavbar.jsx
new file mode 100644
index 0000000..5bc7bae
--- /dev/null
+++ b/components/MobileNavbar.jsx
@@ -0,0 +1,75 @@
+import MobileNavigationItem from "./MobileNavigationItem";
+export default function MobileNavbar({
+  entityTitle,
+  navigationLinks,
+  navigationHrefs,
+  cta,
+}) {
+  return (
+    <div className="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
+      <div className="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25" />
+      <nav className="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
+        <div className="flex items-center mb-12">
+          <a className="mr-auto text-2xl font-semibold leading-none" href="#">
+            <img
+              className="h-8"
+              src="/logos/plain-indigo.svg"
+              alt={`${entityTitle} logo`}
+              width="auto"
+            />
+          </a>
+          <button className="navbar-close">
+            <svg
+              className="h-6 w-6 cursor-pointer hover:text-indigo-500"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+        <div>
+          <ul>
+            {navigationLinks?.map((navName, index) => {
+              try {
+                const href = navigationHrefs[index];
+                return (
+                  <li className="mb-1" key={navName + `${index}`}>
+                    <MobileNavigationItem href={href}>
+                      {navName}
+                    </MobileNavigationItem>
+                  </li>
+                );
+              } catch {
+                console.error(
+                  `An error occured while loading the mobile navigation component. Please file a bug, thanks!`
+                );
+                return null;
+              }
+            })}
+          </ul>
+        </div>
+        <div className="mt-auto">
+          <div className="pt-6">
+            <a
+              className="block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+              href="#"
+            >
+              {cta}
+            </a>
+          </div>
+          <p className="mt-6 mb-4 text-sm text-center text-gray-500">
+            <span>{`© ${entityTitle} 2022 All rights reserved.`}</span>
+          </p>
+        </div>
+      </nav>
+    </div>
+  );
+}
diff --git a/components/MobileNavigationItem.jsx b/components/MobileNavigationItem.jsx
new file mode 100644
index 0000000..16f14f3
--- /dev/null
+++ b/components/MobileNavigationItem.jsx
@@ -0,0 +1,13 @@
+import Link from "next/link";
+export default function MobileNavigationItem({ href, children }) {
+  return (
+    <Link href={href}>
+      <a
+        className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
+        href={href}
+      >
+        {children}
+      </a>
+    </Link>
+  );
+}
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
new file mode 100644
index 0000000..57d4ccb
--- /dev/null
+++ b/components/Navbar.jsx
@@ -0,0 +1,58 @@
+import NavigationItem from "../NavigationItem";
+
+export default function Navbar({
+  entityTitle,
+  navigationLinks,
+  navigationHrefs,
+  cta,
+}) {
+  return (
+    <nav className="flex justify-between items-center py-8">
+      <a className="text-gray-700 text-2xl leading-none" href="#">
+        <img
+          className="h-16"
+          src="https://res.cloudinary.com/tincre/image/upload/v1638892843/tincre.com/tincre-brand-indigo-800_uatfej.svg"
+          alt={`The ${entityTitle} logo`}
+          width="auto"
+          height="4rem"
+        />
+      </a>
+      <div className="lg:hidden">
+        <button className="block navbar-burger text-indigo-500 hover:text-indigo-500 focus:outline-none">
+          <svg
+            className="h-4 w-4"
+            fill="currentColor "
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>Mobile menu</title>
+            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+          </svg>
+        </button>
+      </div>
+      <ul className="hidden lg:flex ml-auto mr-10 items-center w-auto space-x-12">
+        {navigationLinks?.map((navName, index) => {
+          try {
+            const href = navigationHrefs[index];
+            return (
+              <li key={navName + `${index}`}>
+                <NavigationItem href={href}>{navName}</NavigationItem>
+              </li>
+            );
+          } catch {
+            console.error(
+              `An error occured while loading the navigation component. Please file a bug, thanks!`
+            );
+            return null;
+          }
+        })}
+      </ul>
+      <a
+        className="hidden lg:block px-5 py-3 text-sm font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+        href="#"
+      >
+        {cta}
+      </a>
+    </nav>
+  );
+}
diff --git a/components/NavigationItem.jsx b/components/NavigationItem.jsx
new file mode 100644
index 0000000..f6b8d5b
--- /dev/null
+++ b/components/NavigationItem.jsx
@@ -0,0 +1,10 @@
+import Link from "next/link";
+export default function NavigationItem({ href, children }) {
+  return (
+    <Link href={href}>
+      <a className="text-sm hover:text-indigo-700 font-medium" href={href}>
+        {children}
+      </a>
+    </Link>
+  );
+}

From d894b069b56c40113b0d71e1219c32ad4878cbad Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 20:24:05 -0600
Subject: [PATCH 13/19] :recycle: refactor out components [sc-561]

---
 components/Sections/NavigationHero.jsx | 196 +------------------------
 1 file changed, 3 insertions(+), 193 deletions(-)

diff --git a/components/Sections/NavigationHero.jsx b/components/Sections/NavigationHero.jsx
index 479c6ee..eabfef7 100644
--- a/components/Sections/NavigationHero.jsx
+++ b/components/Sections/NavigationHero.jsx
@@ -1,197 +1,7 @@
-import Link from "next/link";
+import MobileNavbar from "../MobileNavbar";
+import Navbar from "../Navbar";
+import Hero from "../Hero";
 
-function MobileNavigationItem({ href, children }) {
-  return (
-    <Link href={href}>
-      <a
-        className="block p-4 text-sm font-semibold hover:bg-indigo-50 hover:text-indigo-500 rounded"
-        href={href}
-      >
-        {children}
-      </a>
-    </Link>
-  );
-}
-function NavigationItem({ href, children }) {
-  return (
-    <Link href={href}>
-      <a className="text-sm hover:text-indigo-700 font-medium" href={href}>
-        {children}
-      </a>
-    </Link>
-  );
-}
-function MobileNavbar({ entityTitle, navigationLinks, navigationHrefs, cta }) {
-  return (
-    <div className="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
-      <div className="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25" />
-      <nav className="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
-        <div className="flex items-center mb-12">
-          <a className="mr-auto text-2xl font-semibold leading-none" href="#">
-            <img
-              className="h-8"
-              src="/logos/plain-indigo.svg"
-              alt={`${entityTitle} logo`}
-              width="auto"
-            />
-          </a>
-          <button className="navbar-close">
-            <svg
-              className="h-6 w-6 cursor-pointer hover:text-indigo-500"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </div>
-        <div>
-          <ul>
-            {navigationLinks?.map((navName, index) => {
-              try {
-                const href = navigationHrefs[index];
-                return (
-                  <li className="mb-1" key={navName + `${index}`}>
-                    <MobileNavigationItem href={href}>
-                      {navName}
-                    </MobileNavigationItem>
-                  </li>
-                );
-              } catch {
-                console.error(
-                  `An error occured while loading the mobile navigation component. Please file a bug, thanks!`
-                );
-                return null;
-              }
-            })}
-          </ul>
-        </div>
-        <div className="mt-auto">
-          <div className="pt-6">
-            <a
-              className="block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-              href="#"
-            >
-              {cta}
-            </a>
-          </div>
-          <p className="mt-6 mb-4 text-sm text-center text-gray-500">
-            <span>{`© ${entityTitle} 2022 All rights reserved.`}</span>
-          </p>
-        </div>
-      </nav>
-    </div>
-  );
-}
-function Navbar({ entityTitle, navigationLinks, navigationHrefs, cta }) {
-  return (
-    <nav className="flex justify-between items-center py-8">
-      <a className="text-gray-700 text-2xl leading-none" href="#">
-        <img
-          className="h-16"
-          src="https://res.cloudinary.com/tincre/image/upload/v1638892843/tincre.com/tincre-brand-indigo-800_uatfej.svg"
-          alt={`The ${entityTitle} logo`}
-          width="auto"
-          height="4rem"
-        />
-      </a>
-      <div className="lg:hidden">
-        <button className="block navbar-burger text-indigo-500 hover:text-indigo-500 focus:outline-none">
-          <svg
-            className="h-4 w-4"
-            fill="currentColor "
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>Mobile menu</title>
-            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
-          </svg>
-        </button>
-      </div>
-      <ul className="hidden lg:flex ml-auto mr-10 items-center w-auto space-x-12">
-        {navigationLinks?.map((navName, index) => {
-          try {
-            const href = navigationHrefs[index];
-            return (
-              <li key={navName + `${index}`}>
-                <NavigationItem href={href}>{navName}</NavigationItem>
-              </li>
-            );
-          } catch {
-            console.error(
-              `An error occured while loading the navigation component. Please file a bug, thanks!`
-            );
-            return null;
-          }
-        })}
-      </ul>
-      <a
-        className="hidden lg:block px-5 py-3 text-sm font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-        href="#"
-      >
-        {cta}
-      </a>
-    </nav>
-  );
-}
-function Hero({ heading, subHeading, cta1, cta2, imageSrc }) {
-  return (
-    <div className="flex flex-wrap items-center -mx-4 mt-10 lg:my-10 pb-10 lg:pb-16">
-      <div className="w-full md:w-1/2 px-4 mb-12 md:mb-0">
-        <h2 className="max-w-sm mb-8 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-          {heading}
-        </h2>
-        <p className="max-w-lg mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
-          {subHeading}
-        </p>
-        <div>
-          <a
-            className="block lg:inline-block px-5 py-3 lg:mr-3 mb-3 lg:mb-0 text-sm text-center bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-            href="#"
-          >
-            {cta1}
-          </a>
-          <a
-            className="block lg:inline-block px-5 py-3 text-sm text-center font-semibold text-indigo-500 hover:text-white hover:bg-indigo-500 border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-            href="#"
-          >
-            {cta2}
-          </a>
-        </div>
-      </div>
-      <div className="w-full md:w-1/2 px-4">
-        <img
-          className="object-cover w-full rounded-xl"
-          src={imageSrc || "/images/indigo-600-square.png"}
-          alt="Hero image"
-        />
-      </div>
-      <button className="block mt-10 lg:mt-20 mx-auto w-16 h-16 p-5 rounded-full bg-indigo-50 hover:bg-indigo-100">
-        <svg
-          className="mx-auto text-indigo-500"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
-      </button>
-    </div>
-  );
-}
 export default function NavigationHero({
   entityTitle,
   navigationLinks,

From b765c8609be9f335356a8eeca4610fb9f435e646 Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 20:25:27 -0600
Subject: [PATCH 14/19] :bug: fix import path error

---
 components/Navbar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Navbar.jsx b/components/Navbar.jsx
index 57d4ccb..c690deb 100644
--- a/components/Navbar.jsx
+++ b/components/Navbar.jsx
@@ -1,4 +1,4 @@
-import NavigationItem from "../NavigationItem";
+import NavigationItem from "./NavigationItem";
 
 export default function Navbar({
   entityTitle,

From 1eebec6bd62ea8420ed6c0a1cb4ed7b556dfbf4e Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 20:44:18 -0600
Subject: [PATCH 15/19] :sparkles: add component for Stats1 card [sc-561]

---
 components/StatNumberCard.jsx | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 components/StatNumberCard.jsx

diff --git a/components/StatNumberCard.jsx b/components/StatNumberCard.jsx
new file mode 100644
index 0000000..bb1762b
--- /dev/null
+++ b/components/StatNumberCard.jsx
@@ -0,0 +1,28 @@
+export default function StatNumberCard({ icon, numberStat, text }) {
+  return (
+    <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
+      {!icon ? <DefaultStats1Icon /> : icon}
+      <h3 className="mb-2 text-2xl font-bold font-heading">{numberStat}</h3>
+      <p className="text-lg text-gray-500">{text}</p>
+    </div>
+  );
+}
+
+function DefaultStats1Icon() {
+  return (
+    <svg
+      className="mx-auto mb-4 text-indigo-500"
+      width={48}
+      height={48}
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z"
+        fill="currentColor"
+      />
+      <circle cx={24} cy={24} r="23.5" stroke="currentColor" />
+    </svg>
+  );
+}

From 787e176487127b97a3aace2960b779f94e72f87a Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 20:44:21 -0600
Subject: [PATCH 16/19] :recycle: extract components and data from Stats1
 [sc-561]

---
 components/Sections/Stats1.jsx | 87 +++-------------------------------
 pages/index.jsx                | 25 +++++++++-
 2 files changed, 30 insertions(+), 82 deletions(-)

diff --git a/components/Sections/Stats1.jsx b/components/Sections/Stats1.jsx
index ed0029e..4c265b5 100644
--- a/components/Sections/Stats1.jsx
+++ b/components/Sections/Stats1.jsx
@@ -1,88 +1,13 @@
-export default function Stats1({}) {
+import StatNumberCard from "../StatNumberCard";
+
+export default function Stats1({ data }) {
   return (
     <section id="stats-1" className="py-20">
       <div className="container px-4 mx-auto">
         <div className="flex flex-wrap items-center -mx-4 -mb-8">
-          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
-            <svg
-              className="mx-auto mb-4 text-indigo-500"
-              width={48}
-              height={48}
-              viewBox="0 0 48 48"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z"
-                fill="currentColor"
-              />
-              <circle cx={24} cy={24} r="23.5" stroke="currentColor" />
-            </svg>
-            <h3 className="mb-2 text-2xl font-bold font-heading">
-              600 000 000
-            </h3>
-            <p className="text-lg text-gray-500">Dolor sit amet consectutar</p>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
-            <svg
-              className="mx-auto mb-4 text-indigo-500"
-              width={48}
-              height={48}
-              viewBox="0 0 48 48"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z"
-                fill="currentColor"
-              />
-              <circle cx={24} cy={24} r="23.5" stroke="currentColor" />
-            </svg>
-            <h3 className="mb-2 text-2xl font-bold font-heading">
-              600 000 000
-            </h3>
-            <p className="text-lg text-gray-500">Dolor sit amet consectutar</p>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
-            <svg
-              className="mx-auto mb-4 text-indigo-500"
-              width={48}
-              height={48}
-              viewBox="0 0 48 48"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z"
-                fill="currentColor"
-              />
-              <circle cx={24} cy={24} r="23.5" stroke="currentColor" />
-            </svg>
-            <h3 className="mb-2 text-2xl font-bold font-heading">
-              600 000 000
-            </h3>
-            <p className="text-lg text-gray-500">Dolor sit amet consectutar</p>
-          </div>
-          <div className="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center">
-            <svg
-              className="mx-auto mb-4 text-indigo-500"
-              width={48}
-              height={48}
-              viewBox="0 0 48 48"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z"
-                fill="currentColor"
-              />
-              <circle cx={24} cy={24} r="23.5" stroke="currentColor" />
-            </svg>
-            <h3 className="mb-2 text-2xl font-bold font-heading">
-              600 000 000
-            </h3>
-            <p className="text-lg text-gray-500">Dolor sit amet consectutar</p>
-          </div>
+          {data?.map((props, index) => {
+            return <StatNumberCard {...props} key={`${index}` + "stats1"} />;
+          })}
         </div>
       </div>
     </section>
diff --git a/pages/index.jsx b/pages/index.jsx
index b56baf5..521e7a6 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -22,6 +22,29 @@ export default function Funded() {
   const cta = "Invest";
   const logoSrc =
     "https://res.cloudinary.com/tincre/image/upload/v1638892843/tincre.com/tincre-brand-indigo-800_uatfej.svg";
+  const stats1Data = [
+    {
+      icon: "",
+      numberStat: "30,000,000",
+      text: "A giant achievement",
+    },
+    {
+      icon: "",
+      numberStat: "30,000,000",
+      text: "A giant achievement",
+    },
+    {
+      icon: "",
+      numberStat: "30,000,000",
+      text: "A giant achievement",
+    },
+    {
+      icon: "",
+      numberStat: "30,000,000",
+      text: "A giant achievement",
+    },
+  ];
+
   return (
     <div>
       <title>{title}</title>
@@ -41,7 +64,7 @@ export default function Funded() {
           navigationHrefs={navigationHrefs}
           cta={cta}
         />
-        <Stats1 />
+        <Stats1 data={stats1Data} />
         <WhyInvest1 />
         <FactCards />
         <Stats2 />

From e4c1a085a99b2dbdda5d3e449e220fb257863262 Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 21:06:07 -0600
Subject: [PATCH 17/19] :sparkles: extract WhyInvest1 components [sc-561]

---
 components/WhyInvest1Card.jsx | 12 ++++++++++++
 components/WhyInvest1Hero.jsx | 23 +++++++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 components/WhyInvest1Card.jsx
 create mode 100644 components/WhyInvest1Hero.jsx

diff --git a/components/WhyInvest1Card.jsx b/components/WhyInvest1Card.jsx
new file mode 100644
index 0000000..2408ea1
--- /dev/null
+++ b/components/WhyInvest1Card.jsx
@@ -0,0 +1,12 @@
+export default function WhyInvest1Card({ label, description }) {
+  return (
+    <div className="w-full md:w-1/2 lg:w-full flex items-start flex-col lg:flex-row px-4 mb-8 lg:mb-6">
+      <span className="mr-10 mb-4 lg:mb-0 flex-shrink-0 flex justify-center items-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
+        {label}
+      </span>
+      <div className="max-w-xs">
+        <p className="text-lg text-gray-500 leading-loose">{description}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/components/WhyInvest1Hero.jsx b/components/WhyInvest1Hero.jsx
new file mode 100644
index 0000000..e583a31
--- /dev/null
+++ b/components/WhyInvest1Hero.jsx
@@ -0,0 +1,23 @@
+export default function WhyInvest1Hero({ subTitle, title, description, cta }) {
+  return (
+    <div className="w-full lg:w-1/2 px-4">
+      <div className="max-w-lg lg:mx-auto mb-10 lg:mb-0">
+        <span className="text-xs font-semibold text-indigo-500 uppercase">
+          {subTitle}
+        </span>
+        <h2 className="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+          {title}
+        </h2>
+        <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
+          {description}
+        </p>
+        <a
+          className="inline-block px-5 py-3 md:mr-3 mb-3 md:mb-0 text-sm bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
+          href="#"
+        >
+          {cta}
+        </a>
+      </div>
+    </div>
+  );
+}

From 6c79bc7ba71acfbb346f449bf6fe450591561acd Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 21:06:10 -0600
Subject: [PATCH 18/19] :recycle: refactor imports for extracted WhyInvest1
 components + data [sc-561]

---
 components/Sections/WhyInvest1.jsx | 80 ++++++++++--------------------
 pages/index.jsx                    | 14 +++++-
 2 files changed, 38 insertions(+), 56 deletions(-)

diff --git a/components/Sections/WhyInvest1.jsx b/components/Sections/WhyInvest1.jsx
index 35c2b7b..b2854f9 100644
--- a/components/Sections/WhyInvest1.jsx
+++ b/components/Sections/WhyInvest1.jsx
@@ -1,64 +1,34 @@
-export default function WhyInvest1({}) {
+import WhyInvest1Hero from "../WhyInvest1Hero";
+import WhyInvest1Card from "../WhyInvest1Card";
+
+export default function WhyInvest1({
+  title,
+  subTitle,
+  description,
+  cta,
+  whyInvest1CardData,
+}) {
   return (
     <section id="why-invest-part-1" className="py-20">
       <div className="container px-4 mx-auto">
         <div className="flex flex-wrap -mx-4">
-          <div className="w-full lg:w-1/2 px-4">
-            <div className="max-w-lg lg:mx-auto mb-10 lg:mb-0">
-              <span className="text-xs font-semibold text-indigo-500 uppercase">
-                Lorem ipsum
-              </span>
-              <h2 className="mt-2 mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-                Lorem ipsum dolor sit amet consectutar domor at elis
-              </h2>
-              <p className="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-500">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan
-                aliquet orci.
-              </p>
-              <a
-                className="inline-block px-5 py-3 md:mr-3 mb-3 md:mb-0 text-sm bg-indigo-500 hover:bg-indigo-600 text-white font-semibold border border-indigo-500 hover:border-indigo-600 rounded transition duration-200"
-                href="#"
-              >
-                Action
-              </a>
-            </div>
-          </div>
+          <WhyInvest1Hero
+            subTitle={subTitle}
+            title={title}
+            description={description}
+            cta={cta}
+          />
           <div className="w-full lg:w-1/2 px-4">
             <div className="flex flex-wrap px-2 py-6 md:px-8 md:py-12 bg-gray-50 rounded-lg">
-              <div className="w-full md:w-1/2 lg:w-full flex items-start flex-col lg:flex-row px-4 mb-8 lg:mb-6">
-                <span className="mr-10 mb-4 lg:mb-0 flex-shrink-0 flex justify-center items-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                  1
-                </span>
-                <div className="max-w-xs">
-                  <p className="text-lg text-gray-500 leading-loose">
-                    Etiam pellentesque non nibh non pulvinar. Mauris posuere,
-                    tellus sit amet tempus vestibulum.
-                  </p>
-                </div>
-              </div>
-              <div className="w-full md:w-1/2 lg:w-full flex items-start flex-col lg:flex-row px-4 mb-8 lg:mb-6">
-                <span className="mr-10 mb-4 lg:mb-0 flex-shrink-0 flex justify-center items-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                  2
-                </span>
-                <div className="max-w-xs">
-                  <p className="text-lg text-gray-500 leading-loose">
-                    Etiam pellentesque non nibh non pulvinar. Mauris posuere,
-                    tellus sit amet tempus vestibulum.
-                  </p>
-                </div>
-              </div>
-              <div className="w-full md:w-1/2 lg:w-full flex items-start flex-col lg:flex-row px-4">
-                <span className="mr-10 mb-4 lg:mb-0 flex-shrink-0 flex justify-center items-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                  3
-                </span>
-                <div className="max-w-xs">
-                  <p className="text-lg text-gray-500 leading-loose">
-                    Etiam pellentesque non nibh non pulvinar. Mauris posuere,
-                    tellus sit amet tempus vestibulum.
-                  </p>
-                </div>
-              </div>
+              {whyInvest1CardData?.map((description, index) => {
+                return (
+                  <WhyInvest1Card
+                    label={index + 1}
+                    description={description}
+                    key={`${index + 1}-part-1`}
+                  />
+                );
+              })}
             </div>
           </div>
         </div>
diff --git a/pages/index.jsx b/pages/index.jsx
index 521e7a6..c2e0ebf 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -44,6 +44,18 @@ export default function Funded() {
       text: "A giant achievement",
     },
   ];
+  const whyInvest1Content = {
+    subTitle: "Scaling our formula",
+    title: "We're seeking investment to release more kick ass brands",
+    description:
+      "Our formula for success works and we are scaling it by releasing brands in financial services, non-profit fundraising, and fashion.",
+    cta: "Learn about our SAFE note",
+    whyInvest1CardData: [
+      "The most epic management team in the business of the web.",
+      "Can't stop won't stop.",
+      "Hyper-efficient semi-autonomous subsidiaries crafted for corporate accretive acquisitions.",
+    ],
+  };
 
   return (
     <div>
@@ -65,7 +77,7 @@ export default function Funded() {
           cta={cta}
         />
         <Stats1 data={stats1Data} />
-        <WhyInvest1 />
+        <WhyInvest1 {...whyInvest1Content} />
         <FactCards />
         <Stats2 />
         <WhyInvest2 />

From 9ffb6b1aaa305a6cd4d01fc9f692f311d06c1ab9 Mon Sep 17 00:00:00 2001
From: "Jason R. Stevens, CFA" <jason@thinkjrs.dev>
Date: Sat, 29 Jan 2022 21:43:19 -0600
Subject: [PATCH 19/19] :recycle: refactor fact cards component data + content
 [sc-561]

---
 components/Sections/FactCards.jsx | 103 ++++++------------------------
 pages/index.jsx                   |  35 +++++++++-
 2 files changed, 51 insertions(+), 87 deletions(-)

diff --git a/components/Sections/FactCards.jsx b/components/Sections/FactCards.jsx
index 0d4d8a1..875b453 100644
--- a/components/Sections/FactCards.jsx
+++ b/components/Sections/FactCards.jsx
@@ -1,92 +1,25 @@
-export default function FactCards({}) {
+export default function FactCards({ factCardsContent }) {
   return (
     <section id="fact-cards" className="bg-indigo-500 py-20">
       <div className="container px-4 mx-auto">
         <div className="flex flex-wrap -m-4">
-          <div className="w-full lg:w-1/2 p-4">
-            <div className="py-12 px-10 rounded-lg bg-white">
-              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                1
-              </span>
-              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-                Suspendisse interdum ullamcorper elit, at consequat libero.
-              </h3>
-              <p className="text-lg text-gray-500 leading-loose">
-                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
-                sit amet tempus vestibulum, erat augue imperdiet.
-              </p>
-            </div>
-          </div>
-          <div className="w-full lg:w-1/2 p-4">
-            <div className="py-12 px-10 rounded-lg bg-white">
-              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                2
-              </span>
-              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-                Suspendisse interdum ullamcorper elit, at consequat libero.
-              </h3>
-              <p className="text-lg text-gray-500 leading-loose">
-                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
-                sit amet tempus vestibulum, erat augue imperdiet.
-              </p>
-            </div>
-          </div>
-          <div className="w-full lg:w-1/2 p-4">
-            <div className="py-12 px-10 rounded-lg bg-white">
-              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                3
-              </span>
-              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-                Suspendisse interdum ullamcorper elit, at consequat libero.
-              </h3>
-              <p className="text-lg text-gray-500 leading-loose">
-                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
-                sit amet tempus vestibulum, erat augue imperdiet.
-              </p>
-            </div>
-          </div>
-          <div className="w-full lg:w-1/2 p-4">
-            <div className="py-12 px-10 rounded-lg bg-white">
-              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                4
-              </span>
-              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-                Suspendisse interdum ullamcorper elit, at consequat libero.
-              </h3>
-              <p className="text-lg text-gray-500 leading-loose">
-                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
-                sit amet tempus vestibulum, erat augue imperdiet.
-              </p>
-            </div>
-          </div>
-          <div className="w-full lg:w-1/2 p-4">
-            <div className="py-12 px-10 rounded-lg bg-white">
-              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                5
-              </span>
-              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-                Suspendisse interdum ullamcorper elit, at consequat libero.
-              </h3>
-              <p className="text-lg text-gray-500 leading-loose">
-                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
-                sit amet tempus vestibulum, erat augue imperdiet.
-              </p>
-            </div>
-          </div>
-          <div className="w-full lg:w-1/2 p-4">
-            <div className="py-12 px-10 rounded-lg bg-white">
-              <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
-                6
-              </span>
-              <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
-                Suspendisse interdum ullamcorper elit, at consequat libero.
-              </h3>
-              <p className="text-lg text-gray-500 leading-loose">
-                Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus
-                sit amet tempus vestibulum, erat augue imperdiet.
-              </p>
-            </div>
-          </div>
+          {factCardsContent?.map(({ title, description }, index) => {
+            return (
+              <div key={`${index}-fact-card`} className="w-full lg:w-1/2 p-4">
+                <div className="py-12 px-10 rounded-lg bg-white">
+                  <span className="mb-6 flex items-center justify-center w-12 h-12 rounded-full bg-indigo-500 text-indigo-50 font-bold font-heading">
+                    {index + 1}
+                  </span>
+                  <h3 className="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading">
+                    {title}
+                  </h3>
+                  <p className="text-lg text-gray-500 leading-loose">
+                    {description}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
         </div>
       </div>
     </section>
diff --git a/pages/index.jsx b/pages/index.jsx
index c2e0ebf..c08910f 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -56,7 +56,38 @@ export default function Funded() {
       "Hyper-efficient semi-autonomous subsidiaries crafted for corporate accretive acquisitions.",
     ],
   };
-
+  const factCardsContent = [
+    {
+      title: "This is a bold, awesome fact",
+      description:
+        "It's like the world is stuck in a car wash and Tincre is the car. Life is now complete.",
+    },
+    {
+      title: "This is a bold, awesome fact",
+      description:
+        "It's like the world is stuck in a car wash and Tincre is the car. Life is now complete.",
+    },
+    {
+      title: "This is a bold, awesome fact",
+      description:
+        "It's like the world is stuck in a car wash and Tincre is the car. Life is now complete.",
+    },
+    {
+      title: "This is a bold, awesome fact",
+      description:
+        "It's like the world is stuck in a car wash and Tincre is the car. Life is now complete.",
+    },
+    {
+      title: "This is a bold, awesome fact",
+      description:
+        "It's like the world is stuck in a car wash and Tincre is the car. Life is now complete.",
+    },
+    {
+      title: "This is a bold, awesome fact",
+      description:
+        "It's like the world is stuck in a car wash and Tincre is the car. Life is now complete.",
+    },
+  ];
   return (
     <div>
       <title>{title}</title>
@@ -78,7 +109,7 @@ export default function Funded() {
         />
         <Stats1 data={stats1Data} />
         <WhyInvest1 {...whyInvest1Content} />
-        <FactCards />
+        <FactCards factCardsContent={factCardsContent} />
         <Stats2 />
         <WhyInvest2 />
         <FactSnippets />