cleanup: some more css and html tags

src/App.css

@@ -1,6 +1,10 @@
 #root {
   width: 100%;
 }
+.nimbus-logomark{
+  width: auto;
+  height: 30%;
+}
 ul{
   list-style-type: none;
   padding: 0;

src/components/PageWrappers/layout.css

@@ -33,84 +33,42 @@
     display: flex;
     flex-direction: column; 
 }
-header {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    padding: 1.5rem 0;
-}
-.logo-title {
-    font-size: 27px;
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-
-}
-.logo-title .beta{
-    color: #FFF;
-    font-size: 10px;
-    font-weight: 600;
-    border-radius: 66.667px;
-    background-color: #2A4AF5;
-    padding: 4px 6px;
-    margin-left: 10px;
-}
 .content {
     flex-grow: 1;
 }
-.content .title {
+
-    font-size: 27px;
+/* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */
-    font-weight: 600;
+.layout-right {
-    margin-bottom: 0.25em;
+    flex: 0 0 45%;
-}
+    max-width: 45%;
-.content .subtitle {
+    z-index: 0;
-    font-size: 15px;
-    margin: 0.1em;
-}
-.content .subtitle span{
-    font-weight: 700;
-}
-.content button {
-    display: flex;
-    align-items: center;
-}
-.content button span {
-    padding-right: 10px;
 }
 
-
+.image-container {
-    /* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */
+    height: 100%;
-    .layout-right {
+    position: relative;
-        flex: 0 0 45%;
+    overflow: hidden;
-        max-width: 45%;
+}
-        z-index: 0;
+.image-container::before {
-    }
+    display: block;
-    
+    content: "";
-    .image-container {
+    padding-bottom: 100%;
-        height: 100%;
+}
-        position: relative;
+.image-container::after {
-        overflow: hidden;
+    display: block;
-    }
+    content: "";
-    .image-container::before {
+    position: absolute;
-        display: block;
+    top: 0;
-        content: "";
+    left: -1%;
-        padding-bottom: 100%;
+    width: 50%;
-    }
+    height: 100%;
-    .image-container::after {
+    background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.0));
-        display: block;
+}
-        content: "";
+.image-container img {
-        position: absolute;
+    position: absolute;
-        top: 0;
+    top: 50%;
-        left: -1%;
+    left: 50%;
-        width: 50%;
+    transform: translate(-50%, -50%);
-        height: 100%;
+    height: 140%;
-        background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.0));
+    width: auto;
-    }
+}
-    .image-container img {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        height: 140%;
-        width: auto;
-    }

src/index.css

@@ -46,10 +46,6 @@ button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
-.nimbus-logomark{
-  width: auto;
-  height: 30%;
-}
 @media (prefers-color-scheme: light) {
   :root {
     color: #09101C;

src/pages/LandingPage/LandingPage.tsx

@@ -12,9 +12,9 @@ function LandingPage() {
     <>
       <PageWrapperShadow rightImageSrc="/background-images/landing-page-bg.png">
         <div className="landing-page">
-          <header>
+          <XStack>
             <NimbusLogo />
-          </header>
+          </XStack>
           <YStack>
             <Titles
               title="Light and performant clients, for all Ethereum validators."