Fix landing page on 4k displays

web/src/pages/Home/components/Features/styles.sass

@@ -1,7 +1,7 @@
 @import "@/common/styles/colors"
 
 .feature-area
-  margin-top: 53rem
+  margin-top: 10vh
   padding-left: 5rem
   padding-right: 5rem
   display: flex
@@ -45,10 +45,6 @@
     max-width: 30rem
 
 @media screen and (max-width: 1000px)
-  .feature-area
-    margin-top: 40rem
-    margin-left: 2rem
-    margin-right: 2rem
   .feature-area .feature img
     width: 25rem
   .feature-area .feature h1
@@ -58,10 +54,6 @@
     max-width: 30rem
 
 @media screen and (max-width: 700px)
-  .feature-area
-    margin-top: 65vh
-    margin-left: 0.2rem
-    margin-right: 0.2rem
   .feature-area .feature
     width: 100%
   .feature-area .feature img

web/src/pages/Home/components/Footer/styles.sass

@@ -22,6 +22,6 @@
 
 @media screen and (max-width: 710px)
   .footer
-    margin: 0 2rem 0 2rem
+    margin: 0 0 0 1rem
     padding: 0 2rem
     flex-direction: column

web/src/pages/Home/components/GetStarted/styles.sass

@@ -29,7 +29,7 @@
 @media screen and (max-width: 710px)
   .get-started
     padding: 2rem 2rem 1rem 2rem
-    margin: 2rem 2rem 0 2rem
+    margin: 2rem 0 0 1rem
 
     h1
      font-size: 2rem

web/src/pages/Home/styles.sass

@@ -30,14 +30,13 @@
 
 
 .interface-image
-  position: absolute
-  bottom: -5rem
-  right: 5rem
+  margin-left: 30vw
+  margin-top: 16vh
   animation: fadeIn 1s ease-in-out
   z-index: 0
 
   img
-    width: 77rem
+    width: 61vw
     transform: rotate(12deg)
     pointer-events: none
     user-select: none
@@ -50,28 +49,28 @@
   animation: spawn 1s ease-in-out
 
   svg
-    font-size: 48pt
+    font-size: 4vh
     animation: flyAround 16s linear infinite
 
 .flying-icons:nth-child(2)
-  top: 50rem
-  left: 10rem
+  top: 70%
+  left: 10%
 
 .flying-icons:nth-child(3)
-  top: 20rem
-  right: 10rem
+  top: 30%
+  right: 10%
 
 .flying-icons:nth-child(4)
-  bottom: 30rem
-  left: 15rem
+  bottom: 50%
+  left: 12%
 
 .flying-icons:nth-child(5)
-  bottom: 40rem
-  right: 40rem
+  top: 25%
+  right: 25%
 
 .flying-icons:nth-child(6)
-  bottom: 18rem
-  left: 20rem
+  bottom: 30%
+  left: 20%
 
 
 @keyframes fadeIn
@@ -115,8 +114,9 @@
     display: none
 
 @media screen and (max-width: 1250px)
-  .interface-image img
-    width: 80vw
+  .interface-image
+    margin-left: 20vw
+    margin-top: 10vh
 
 @media screen and (max-width: 1000px)
   .flying-icons:nth-child(3)
@@ -124,15 +124,8 @@
   .flying-icons:nth-child(5)
     right: 10rem
     top: 20rem
-  .interface-image
-    right: 0
-    bottom: 10rem
-  .interface-image img
-    width: 90vw
 
 @media screen and (max-width: 500px)
   .flying-icons:nth-child(5)
     right: 5rem
-    top: 15rem
-  .interface-image
-    bottom: 20rem
+    top: 15rem