Leaders Section

src/components/new-landing-page/leaders.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-
+import PinkDot from './pink-dot'
 
 const Leaders = forwardRef(
   (_, ref): JSX.Element => {
@@ -8,6 +8,7 @@ const Leaders = forwardRef(
         <div className="leaders__wrapper">
           <h1 className="leaders__title">Our leaders join your cause directly, working alongside you to meet your online &amp; offline goals.</h1>
         </div>
+          <PinkDot />
       </section>
     )
   }

src/components/new-landing-page/pink-dot.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function PinkDot(): JSX.Element {
+    return(
+        <div className="pink_dot__wrapper">
+            <h3 className="pink_dot__text">More Human Internet partners with international causes to deepen their impact and outreach</h3>
+        </div>
+    )
+}

src/styles/pages/new-landing-page.scss

@@ -25,13 +25,15 @@
 
   .leaders {
     background-color: $human-blue;
+    position: relative;
     width: 100%;
     padding: 4rem 0;
-
+    margin-bottom: 37.5vh;
+
     display: grid;
     // grid-template-columns: minmax(25px, 1fr) 800px minmax(25px, 1fr);
     place-items: center;
-
+    
     > .leaders__wrapper {
       margin: 0 25px;
       min-width: 50%;
@@ -43,24 +45,28 @@
         text-align: center;
       }
 
-      // Making the iframe responsive
-      > .video {
-        position: relative;
-        overflow: hidden;
-        width: 100%;
-        padding-top: 56.25%; /* 16:9 Aspect Ratio */
-
-        > iframe {
-          margin: 0 auto;
-
-          position: absolute;
-          top: 0;
-          left: 0;
-          bottom: 0;
-          right: 0;
-          width: 100%;
-          height: 100%;
-        }
+    }
+    .pink_dot__wrapper {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      width: 50vh;
+      height: 50vh;
+      border-radius: 50%;
+      padding: 5vh;
+      right: 15vw;
+      background-color: $human-pink;
+      text-align: center;
+      top: 75%;
+
+      .pink_dot__text {
+        color: white; 
+      }
+    }
+    @media (max-width: 710px) {
+      .pink_dot__wrapper {
+        right: auto; 
+        left: auto;
       }
     }
   }