Merge branch 'feature/EdwardNew/home-page-animation-v3' into develop

src/app/Home.scss

@@ -5,8 +5,6 @@
 //not sure if this is bad practice
 body {
   cursor: url('../../public/images/cursors/Cursor.svg'), auto;
-  padding: 50px;
-  border: 1px solid #ccc;
 }
 
 a,
@@ -29,6 +27,18 @@ summary {
   --folder-height: 50vh;
 }
 
+#page-container {
+  background-color: black;
+  //   display: grid;
+  justify-content: center;
+  justify-items: center;
+  align-content: center;
+  gap: 3rem;
+  height: 100%;
+  overflow-x: hidden;
+  position: relative;
+}
+
 #folder {
   position: relative;
   width: calc(var(--folder-height) * 1.411);
@@ -90,7 +100,6 @@ summary {
   position: absolute;
   display: none;
   width: auto;
-  //   outline: 2px solid red;
   z-index: 1;
 }
 
@@ -106,73 +115,33 @@ summary {
 }
 #feather,
 #folder-feather {
-  height: calc(var(--folder-height) * 0.424);
+  height: calc(var(--folder-height) * 0.43);
 }
 #main-content,
 #folder-main-content {
-  height: calc(var(--folder-height) * 0.373);
+  height: calc(var(--folder-height) * 0.43);
 }
 #polaroid,
 #folder-polaroid {
-  height: calc(var(--folder-height) * 0.349);
+  height: calc(var(--folder-height) * 0.351);
 }
 #orgs,
 #folder-orgs {
-  height: calc(var(--folder-height) * 0.565);
+  height: calc(var(--folder-height) * 0.45);
 }
 #companies,
 #folder-companies {
-  height: calc(var(--folder-height) * 0.402);
+  height: calc(var(--folder-height) * 0.48);
 }
 #magnifying-glass,
 #folder-magnifying-glass {
   height: calc(var(--folder-height) * 0.884);
 }
 #cards,
 #folder-cards {
-  height: calc(var(--folder-height) * 0.353);
+  height: calc(var(--folder-height) * 0.36);
 }
 
-// TODO: DELETE LATER
-// #badge {
-//   bottom: 15%;
-//   right: -3%;
-//   transform: rotate(-11deg);
-// }
-// #feather {
-//   top: 0;
-//   right: 40%;
-//   transform: rotate(10deg);
-// }
-// #main-content {
-//   bottom: 30%;
-//   right: 50%;
-//   transform: translateX(50%);
-// }
-// #polaroid {
-//   top: 0;
-//   right: 55%;
-// }
-// #orgs {
-//   bottom: 5%;
-//   left: 1%;
-//   transform: rotate(42deg);
-// }
-// #companies {
-//   top: 28%;
-//   right: 3%;
-//   transform: rotate(-30deg);
-// }
-// #magnifying-glass {
-//   left: 0%;
-//   bottom: 25%;
-//   transform: rotate(54deg);
-// }
-// #cards {
-//   top: 32%;
-//   left: 8%;
-// }
-
 /* folder asset positions */
 #folder-badge {
   top: 15%;
@@ -243,7 +212,7 @@ summary {
   left: 30%;
 }
 
-/* Styles for landscape screens (aspect ratio greater than 1) */
+/* Styles for vertical screens (aspect ratio less than 1) */
 @media (max-aspect-ratio: 1/1) {
   #folder {
     height: calc(var(--folder-width) * 0.708);
@@ -260,6 +229,7 @@ summary {
   #folder,
   #folder-back,
   #folder-bottom,
+  #page-folder-bottom,
   #folder-flap {
     width: var(--folder-width);
   }
@@ -268,48 +238,53 @@ summary {
     height: calc(var(--folder-width) * 0.24);
   }
 
+  #folder > .folder-asset {
+    height: auto;
+  }
+
   #badge,
   #feather,
   #main-content,
   #polaroid,
   #orgs,
   #companies,
   #magnifying-glass,
-  #cards {
+  #cards,
+  #page-folder-bottom {
     height: auto;
   }
 
-  #badge {
-    width: calc(var(--folder-width) * 0.258);
-    transform: translate(65%, -125%) rotate(12deg);
+  #badge,
+  #folder-badge {
+    width: calc(var(--folder-width) * 0.311);
   }
-  #feather {
-    width: calc(var(--folder-width) * 0.354);
-    transform: translate(-40%, -200%) rotate(-22.5deg);
+  #feather,
+  #folder-feather {
+    width: calc(var(--folder-width) * 0.269);
   }
-  #main-content {
-    width: calc(var(--folder-width) * 0.54);
-    transform: translate(-58%, -60%) rotate(-5deg);
+  #main-content,
+  #folder-main-content {
+    width: calc(var(--folder-width) * 0.572);
   }
-  #polaroid {
-    width: calc(var(--folder-width) * 0.176);
-    transform: translate(-90%, -200%) rotate(-21deg);
+  #polaroid,
+  #folder-polaroid {
+    width: calc(var(--folder-width) * 0.234);
   }
-  #orgs {
-    width: calc(var(--folder-width) * 0.344);
-    transform: translate(20%, -140%) rotate(-46deg);
+  #orgs,
+  #folder-orgs {
+    width: calc(var(--folder-width) * 0.326);
   }
-  #companies {
-    width: calc(var(--folder-width) * 0.351);
-    transform: translate(35%, -70%) rotate(29deg);
+  #companies,
+  #folder-companies {
+    width: calc(var(--folder-width) * 0.352);
   }
-  #magnifying-glass {
-    width: calc(var(--folder-width) * 0.408);
-    transform: translate(-130%, -75%);
+  #magnifying-glass,
+  #folder-magnifying-glass {
+    width: calc(var(--folder-width) * 0.297);
   }
-  #cards {
-    width: calc(var(--folder-width) * 0.35);
-    transform: translate(-110%, -140%) rotate(8deg);
+  #cards,
+  #folder-cards {
+    width: calc(var(--folder-width) * 0.36);
   }
 
   #paper-border-top-left {