index.vue

layouts/default.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="layout">
     <header class="header">
-      Header
+      <div class="header__container">
+        <h1 class="header__headline">
+          PAXTON
+        </h1>
+      </div>
     </header>
 
     <main class="main">
-      <div class="container">
+      <UContainer class="container">
         <slot />
-      </div>
+      </UContainer>
     </main>
 
     <footer class="footer">
@@ -26,12 +30,9 @@
 .container {
   --ui-container: 100%;
   max-width: 100%;
-  margin: 48px auto 100px;
 
-  @media (max-width: 1280px) {
-    margin: 24px auto 52px;
-    padding: 0 24px;
-  }
+  margin: 0;
+  padding: 0;
 }
 
 .header {
@@ -41,11 +42,27 @@
   right: 0;
   z-index: 100;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  height: 54px;
+  background: white;
+
+  &__container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  &__headline {
+    height: 100%;
+    font-size: 32px;
+    color: black;
+  }
 }
 
 .main {
   flex: 1;
-  margin-top: 64px;
+  margin-top: 54px;
 }
 
 .footer {

pages/index.vue

@@ -75,18 +75,18 @@ watch(() => defaultVariant.value, newValue => currentVariantId.value = newValue?
 
 <style lang="scss">
 .card {
+  width: 100%;
   display: flex;
   flex-direction: row;
 
   &__images {
-    margin-left: 10%;
-    margin-right: 10%;
-    width: 40%;
+    width: 100%;
     display: flex;
     flex-direction: column;
   }
 
   &__description {
+    padding-inline: 30px;
     width: 40%;
   }