chore: turn laptop into a phone at the landing page

Author: yaroslav8765

adminforth/documentation/src/css/custom.css

@@ -370,10 +370,81 @@ html[data-theme="dark"] .fakeScreen {
     margin-bottom: 20px;
   }
 
+  .laptop_container {
+    margin-bottom: 3rem;
+  }
+
   .laptop {
     width: 80vw;
   }
 
+  .laptop::before,
+  .laptop::after {
+    position: absolute;
+    z-index: 2;
+    border-radius: 999px;
+    background: linear-gradient(to bottom, #2b313b, #16191f);
+    content: "";
+  }
+
+  .laptop::before {
+    top: 20%;
+    right: -0.28rem;
+    width: 0.22rem;
+    height: 4rem;
+  }
+
+  .laptop::after {
+    top: 28%;
+    left: -0.28rem;
+    width: 0.22rem;
+    height: 2.2rem;
+    box-shadow: 0 2.8rem 0 0 #16191f;
+  }
+
+  .laptop .laptop__screen {
+    padding: 11% 1.5% 6%;
+    border-radius: 2rem;
+    border: 0.5rem solid #16191f;
+    background: linear-gradient(to bottom, #232932, #08090b);
+    box-shadow:
+      0 1.25rem 2.5rem rgba(15, 23, 42, 0.18),
+      inset 0 0.08rem 0 rgba(255, 255, 255, 0.08);
+  }
+
+  .laptop .laptop__screen::before {
+    position: absolute;
+    top: 0.95rem;
+    left: 50%;
+    z-index: 2;
+    width: 30%;
+    height: 0.38rem;
+    transform: translateX(-50%);
+    border-radius: 999px;
+    background: rgba(6, 8, 11, 0.92);
+    box-shadow: inset 0 0.05rem 0 rgba(255, 255, 255, 0.08);
+    content: "";
+  }
+
+  .laptop .laptop__screen iframe {
+    aspect-ratio: 9 / 19.5;
+    border-radius: 1rem;
+  }
+
+  .laptop .laptop__bottom,
+  .laptop .laptop__under {
+    display: none;
+  }
+
+  .laptop .laptop__shadow {
+    right: 12%;
+    bottom: -1.25rem;
+    left: 12%;
+    height: 1.5rem;
+    background: radial-gradient(ellipse closest-side, rgba(15, 23, 42, 0.4), transparent 80%);
+    opacity: 1;
+  }
+
   .theme_switcher {
     display: none !important;
   }