Adding one more section to landing page

assets/globe.svg

@@ -0,0 +1,9 @@
+<svg width="1294" height="427" viewBox="0 0 1294 427" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.753784 421.073C5.98767 424.805 12.3931 427 19.311 427H1261.31C1278.98 427 1293.31 412.673 1293.31 395V1.08126C1271.3 0.362283 1249.19 0 1227 0C764.801 0 339.258 157.177 0.753784 421.073Z" fill="url(#paint0_linear_23_107)"/>
+<defs>
+<linearGradient id="paint0_linear_23_107" x1="473.311" y1="-29.4999" x2="1272.31" y2="427" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6AD2FF"/>
+<stop offset="1" stop-color="#055CDD"/>
+</linearGradient>
+</defs>
+</svg>

assets/paper-plane.svg

@@ -0,0 +1,7 @@
+<svg width="652" height="414" viewBox="0 0 652 414" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M615.521 135.395L424.344 298.928L337.205 230.146L615.521 135.395Z" fill="#ED7F66"/>
+<path d="M615.521 135.395L409.542 155.985L329.302 199.585L337.205 230.146L615.521 135.395Z" fill="#FFC092"/>
+<path d="M337.417 236.775L424.344 298.928L354.262 230.633L337.417 236.775Z" fill="#ED7F66"/>
+<path d="M615.521 135.395L337.417 236.775L303.707 306.234L397.298 305.296L615.521 135.395Z" fill="#FFC092"/>
+<path d="M297.878 270.385L75.4632 352.338M265.142 242.657L123 293.117M256.5 312.117L159.622 347.874M53 360.117L4 378.617" stroke="#D8D8D8" stroke-width="8" stroke-linecap="round"/>
+</svg>

css/main.css

@@ -787,7 +787,14 @@ ul {
   background-color: rgba(var(--foreground-color), 0.3);
 }
 
+#landing {
+  padding: 0 1rem;
+  overflow-y: auto;
+  padding-bottom: 3rem;
+}
+
 .landing__card {
+  position: relative;
   width: min(100%, 64rem);
   margin: 0 auto;
   align-self: flex-start;
@@ -808,6 +815,28 @@ ul {
 .landing__card:first-of-type h1 {
   mix-blend-mode: soft-light;
 }
+.landing__card:nth-of-type(2) {
+  background: url(../assets/globe.svg) no-repeat bottom right, rgba(var(--foreground-color), 1);
+  background-size: max(60vw, 90vh);
+  color: white;
+  min-height: 24rem;
+}
+.landing__card:nth-of-type(2) img {
+  align-self: flex-start;
+  width: 20vmax;
+}
+.landing__card:nth-of-type(2) .grid {
+  margin-top: auto;
+  margin-left: auto;
+}
+.landing__card:nth-of-type(2) h1 {
+  color: #262d4c;
+  mix-blend-mode: multiply;
+}
+.landing__card:nth-of-type(2) p {
+  margin-top: auto;
+  color: rgba(255, 255, 255, 0.9);
+}
 
 #sign_in,
 #sign_up {

css/main.scss

@@ -786,8 +786,12 @@ ul {
 }
 
 #landing {
+  padding: 0 1rem;
+  overflow-y: auto;
+  padding-bottom: 3rem;
 }
 .landing__card {
+  position: relative;
   width: min(100%, 64rem);
   margin: 0 auto;
   align-self: flex-start;
@@ -807,6 +811,29 @@ ul {
       mix-blend-mode: soft-light;
     }
   }
+  &:nth-of-type(2) {
+    background: url(../assets/globe.svg) no-repeat bottom right,
+      rgba(var(--foreground-color), 1);
+    background-size: max(60vw, 90vh);
+    color: white;
+    min-height: 24rem;
+    img {
+      align-self: flex-start;
+      width: 20vmax;
+    }
+    .grid {
+      margin-top: auto;
+      margin-left: auto;
+    }
+    h1 {
+      color: #262d4c;
+      mix-blend-mode: multiply;
+    }
+    p {
+      margin-top: auto;
+      color: rgba(255, 255, 255, 0.9);
+    }
+  }
 }
 #sign_in,
 #sign_up {

index.html

@@ -76,7 +76,7 @@
             <div class="flex flex-wrap space-between gap-1-5 landing__card">
                 <div class="grid gap-1-5">
                     <h1 class="calistoga" style="max-width: 26rem;">
-                        Blockchain based Internship Platform
+                        Blockchain based <br> Internship Platform
                     </h1>
                     <div class="flex gap-0-3">
                         <a href="#/sign_up" class="button" style="background-color: rgba( 0 0 0 / 0.3);">Get
@@ -86,6 +86,15 @@
                 </div>
                 <img src="assets/working-intern.svg" alt="">
             </div>
+            <div class="flex flex-wrap space-between gap-1-5 landing__card">
+                <img src="assets/paper-plane.svg" alt="">
+                <div class="grid gap-0-5 text-align-right">
+                    <p>Work from place and time that suits <b class="uppercase">you</b></p>
+                    <h1 class="calistoga" style="max-width: 26rem;">
+                        Flexible, <br> Remote Work
+                    </h1>
+                </div>
+            </div>
         </div>
         <article id="sign_in" class="inner-page hidden">
             <section>