Arrange demonstration complete

Author: Imtious-coder

src/App.scss

@@ -41,6 +41,9 @@ body {
 .secondary-gradient-background {
   background-image: linear-gradient(90deg, #0000ff, #5757ff);
 }
+.secondary-gradient-background2 {
+  background-image: linear-gradient(90deg, #2a2aff, #5757ff);
+}
 .primary-background {
   background-color: #041d34;
 }
@@ -75,3 +78,17 @@ body {
     line-height: 24px;
   }
 }
+
+// BUTTONS
+
+.button {
+  border: none;
+  outline: none;
+  border-radius: 5px;
+  font-size: 22px !important;
+  background-color: #001222;
+
+  &:hover {
+    background-color: #002444d2;
+  }
+}

src/Pages/Home/index.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import ArrangeDemonstration from "../../components/ArrangeDemonstration/ArrangeDemonstration";
 import Aspiring from "../../components/Aspiring/Aspiring";
 import Hero from "../../components/Hero/Hero";
 import Services from "../../components/Services/Services";
@@ -9,6 +10,9 @@ const index = () => {
       <Hero />
       <Services />
       <Aspiring />
+
+      {/*  */}
+      <ArrangeDemonstration />
     </>
   );
 };

src/components/ArrangeDemonstration/ArrangeDemonstration.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "./ArrangeDemonstration.scss";
+
+const ArrangeDemonstration = () => {
+  return (
+    <>
+      <section className="arrange-demonstration py-5 secondary-gradient-background2">
+        <div className="py-sm-3">
+          <h2 className="heading white fw-bold mb-4">
+            Arrange a demonstration
+          </h2>
+          <h3 className="sub-heading white pt-3 pb-4">
+            Are you interested to know how our awesome technologies work?
+          </h3>
+          <Link to="/coming-soon">
+            <button className="button white px-5 py-3 d-block mx-auto">
+              Let's Talk
+            </button>
+          </Link>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default ArrangeDemonstration;

src/components/ArrangeDemonstration/ArrangeDemonstration.scss

@@ -18,7 +18,7 @@ const Services = () => {
             </div>
             {serviceData?.map(({ title, description, icon }, index) => {
               return (
-                <div className="col-12 col-md-6 mt-5">
+                <div key={index} className="col-12 col-md-6 mt-5">
                   <div className="cards background-white position-relative p-3 p-sm-5">
                     <div className="position-absolute card-icon secondary-gradient-background white">
                       {icon}