[#3304] Redesign Vuestic landing

packages/docs/assets/fonts.scss

@@ -2,33 +2,35 @@
 @mixin title-font() {
   font-weight: 900;
   font-size: 4.5rem;
+  line-height: 1;
 
-  @include lg(font-size, 4rem);
-  @include md(font-size, 3rem);
-  @include sm(font-size, 2.5rem);
+  @include lg(font-size, 4.5rem);
+  @include md(font-size, 4rem);
+  @include sm(font-size, 3.0rem);
   @include xs(font-size, 2rem);
 }
 
 // sub headers
 @mixin subtitle-font() {
-  font-weight: 700;
-  font-size: 1.4rem;
+  font-weight: 900;
+  font-size: 4rem;
+  line-height: 1;
 
-  @include lg(font-size, 1.4rem);
-  @include md(font-size, 1.3rem);
-  @include sm(font-size, 1.25rem);
-  @include xs(font-size, 1.2rem);
+  @include lg(font-size, 4rem);
+  @include md(font-size, 3.5rem);
+  @include sm(font-size, 2.5rem);
+  @include xs(font-size, 2.0rem);
 }
 
 // text
 @mixin text-font() {
   font-weight: normal;
   font-size: 1.2rem;
 
-  @include lg(font-size, 1rem);
-  @include md(font-size, 0.95rem);
-  @include sm(font-size, 0.925rem);
-  @include xs(font-size, 0.9rem);
+  @include lg(font-size, 1.2rem);
+  @include md(font-size, 1.2rem);
+  @include sm(font-size, 1.2rem);
+  @include xs(font-size, 1.2rem);
 }
 
 // link
@@ -45,12 +47,12 @@
 // button
 @mixin button-font() {
   font-weight: 600;
-  font-size: 1.1rem;
+  font-size: 1.2rem;
 
-  @include lg(font-size, 1rem);
-  @include md(font-size, 0.95rem);
-  @include sm(font-size, 0.925rem);
-  @include xs(font-size, 0.9rem);
+  @include lg(font-size, 1.2rem);
+  @include md(font-size, 1.2rem);
+  @include sm(font-size, 1.2rem);
+  @include xs(font-size, 1.2rem);
 }
 
 // code

packages/docs/assets/smart-grid.scss

@@ -2,12 +2,12 @@
 
 $columns: 12;
 
-$break_lg: 1100px;
-$break_md: 960px;
-$break_sm: 780px;
-$break_xs: 560px;
+$break_lg: 1920px;
+$break_md: 1440px;
+$break_sm: 1024px;
+$break_xs: 640px;
 
-$offset: 30px;
+$offset: 32px;
 $offset_lg: $offset;
 $offset_md: $offset;
 $offset_sm: $offset;
@@ -19,7 +19,7 @@ $offset_md_one_side: ($offset_md * 0.5);
 $offset_sm_one_side: ($offset_sm * 0.5);
 $offset_xs_one_side: ($offset_xs * 0.5);
 
-$fields: 15px;
+$fields: 1rem;
 
 @mixin wrapper-full() {
   padding-left: $fields;
@@ -36,8 +36,8 @@ $fields: 15px;
   #{$type}-right: $offset_one_side;
 }
 
-@mixin wrapper() {
-  max-width: 1280px;
+@mixin wrapper($width: 1440px) {
+  max-width: $width;
   margin: 0 auto;
 
   @include wrapper-full();
@@ -123,6 +123,12 @@ $fields: 15px;
   @include sm(margin-left, #{calc(#{$val} + #{$offset_sm_one_side})});
 }
 
+@mixin shift-sm-right($n) {
+  $val: math.div(100%, $columns) * $n;
+
+  @include md(margin-right, #{calc(#{$val} + #{$offset_sm_one_side})});
+}
+
 @mixin shift-xs-left($n) {
   $val: math.div(100%, $columns) * $n;
 

packages/docs/assets/variables.scss

@@ -0,0 +1,13 @@
+:root {
+  --bg-header: #2450BE;
+  --bg-preview-1: #2450BE;
+  --bg-preview-2: #557DE2;
+  --bg-partners: #335DC9;
+  --bg-customize-1: #4D2CC1;
+  --bg-customize-2: #847EE2;
+  --bg-seamless: #F4F9FC;
+  --bg-admin: #F4F9FC;
+
+  --header-height: 4rem;
+  --header-z-index: 2000;
+}

packages/docs/components/HeaderBanner.client.vue

@@ -10,98 +10,96 @@
       <div class="header__wrapper">
         <div class="header-banner__left">
           <strong>{{ $t("landing.header.banner.partner") }}</strong>
-          <a
-            href="https://vuejs.org/partners/epicmax.html"
-            title="Epicmax creates high performance Vue.js interfaces"
-            class="nuxt-link ml-7"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="35"
-              width="35"
-              viewBox="-39.26295 -56.672 340.2789 340.032"
-            ><path
-              fill="#41b883"
-              d="M161.101 0l-30.224 52.35L100.652 0H0l130.877 226.688L261.753 0z"
-            /><path
-              fill="#34495e"
-              d="M161.101 0l-30.224 52.35L100.652 0H52.351l78.526 136.01L209.403 0z"
-            /></svg>
-          </a>
-          <a
-            href="https://vuejs.org/partners/epicmax.html"
-            target="_blank"
-            class="link-4"
-          >
-            <strong class="bold-text-9"> Vue.js </strong>
-          </a>
-
-          <strong class="ml-7">{{ $t("landing.header.banner.and") }}</strong>
-
-          <a
-            href="https://nuxtjs.org/partners/epicmax"
-            title="Epicmax creates high performance Vue.js interfaces"
-            class="nuxt-link ml-7"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="30"
-              height="30"
-              viewBox="0 0 400 303"
-              version="1"
+          <div class="header-banner__left-links">
+            <a
+              href="https://vuejs.org/partners/epicmax.html"
+              title="Epicmax creates high performance Vue.js interfaces"
+              target="_blank"
+              class="header-banner__link"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="24"
+                width="24"
+                viewBox="-39.26295 -56.672 340.2789 340.032"
+                aria-hidden="true"
+              ><path
+                fill="#41b883"
+                d="M161.101 0l-30.224 52.35L100.652 0H0l130.877 226.688L261.753 0z"
+              /><path
+                fill="#34495e"
+                d="M161.101 0l-30.224 52.35L100.652 0H52.351l78.526 136.01L209.403 0z"
+              /></svg>
+              <strong>Vue.js</strong>
+            </a>
+
+            <strong>{{ $t("landing.header.banner.and") }}</strong>
+
+            <a
+              href="https://nuxtjs.org/partners/epicmax"
+              title="Epicmax creates high performance Vue.js interfaces"
+              target="_blank"
+              class="header-banner__link"
             >
-              <g
-                fill="none"
-                fill-rule="evenodd"
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 400 303"
+                aria-hidden="true"
               >
-                <path
-                  d="M123 292l-1-1c-2-4-2-8-2-12H25L167 27l59 107 19-14-59-107c-1-2-8-13-20-13-5 0-13 2-19 13L4 268c-1 2-7 14-1 24 2 5 8 10 21 10h120c-13 0-19-5-21-10z"
-                  fill="#00C58E"
-                />
-                <path
-                  d="M395 269L280 62c-2-2-8-13-20-13-5 0-12 2-19 13l-15 24v48l34-59 114 204h-43a20 20 0 0 1-2 12v1c-6 10-19 10-21 10h68c2 0 15 0 21-10 2-5 4-13-2-23z"
-                  fill="#108775"
-                />
-                <path
-                  d="M332 292v-1l1-2c1-3 2-7 1-10l-4-11-90-158-13-24h-1l-13 24-91 158-3 11a21 21 0 0 0 2 13c3 5 9 10 21 10h168c3 0 16 0 22-10zM226 134l83 145H144l82-145z"
-                  fill="#2F495E"
-                  fill-rule="nonzero"
-                />
-              </g>
-            </svg>
-          </a>
-          <a
-            href="https://nuxtjs.org/partners/epicmax"
-            target="_blank"
-            class="link-5"
-          ><strong class="bold-text-9">Nuxt</strong></a>
+                <g
+                  fill="none"
+                  fill-rule="evenodd"
+                >
+                  <path
+                    d="M123 292l-1-1c-2-4-2-8-2-12H25L167 27l59 107 19-14-59-107c-1-2-8-13-20-13-5 0-13 2-19 13L4 268c-1 2-7 14-1 24 2 5 8 10 21 10h120c-13 0-19-5-21-10z"
+                    fill="#00C58E"
+                  />
+                  <path
+                    d="M395 269L280 62c-2-2-8-13-20-13-5 0-12 2-19 13l-15 24v48l34-59 114 204h-43a20 20 0 0 1-2 12v1c-6 10-19 10-21 10h68c2 0 15 0 21-10 2-5 4-13-2-23z"
+                    fill="#108775"
+                  />
+                  <path
+                    d="M332 292v-1l1-2c1-3 2-7 1-10l-4-11-90-158-13-24h-1l-13 24-91 158-3 11a21 21 0 0 0 2 13c3 5 9 10 21 10h168c3 0 16 0 22-10zM226 134l83 145H144l82-145z"
+                    fill="#2F495E"
+                    fill-rule="nonzero"
+                  />
+                </g>
+              </svg>
+              <strong>Nuxt</strong>
+            </a>
+          </div>
         </div>
-        <div class="header-banner__button">
+
+        <div class="header-banner__buttons">
           <va-button
             href="https://epicmax.co/?ref=vuestic-header"
             target="blank"
           >
             {{ $t("landing.header.banner.hire") }}
           </va-button>
-          <div
+          <va-button
             v-if="closeable"
-            class="header-banner__button--close"
-          >
-            <va-icon
-              class="cursor-pointer"
-              size="small"
-              name="close"
-              @click="hide"
-            />
-          </div>
+            icon="close"
+            preset="secondary"
+            round
+            :text-color="textColor"
+            class="header-banner__buttons--close"
+            :aria-label="$t('landing.header.banner.close')"
+            @click="hide"
+          />
         </div>
       </div>
     </div>
   </transition>
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref } from 'vue'
+import { ref } from 'vue'
+
+import { useElementTextColor } from 'vuestic-ui'
+
 const props = defineProps({
   closeable: {
     type: Boolean,
@@ -113,6 +111,8 @@ const props = defineProps({
   },
 })
 
+const textColor = useElementTextColor('primary')
+
 const closeable = ref(props.closeable)
 const isHidden = ref(closeable.value && localStorage.getItem('banner') === 'official-partner')
 
@@ -139,28 +139,35 @@ const hide = () => {
 }
 
 .header-banner {
+  $text-color: white;
+
   min-height: 40px;
-  padding: 7px 1rem;
+  padding: 0.5rem 0;
   background-color: #012875;
   font-size: 0.9rem;
-  color: white;
+  color: $text-color;
+  flex-shrink: 0;
+
+  &:not(.header-banner--wrapped) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
 
-  &--wrapped {    
+  &--wrapped {
     .header__wrapper {
       @include wrapper();
     }
   }
 
-  &__button {
+  &__buttons {
     z-index: 10;
     display: flex;
     align-items: center;
 
+    @include xs(margin-top, 0.5rem);
+
     &--close {
       margin-left: 1rem;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
     }
   }
 
@@ -174,16 +181,29 @@ const hide = () => {
   }
 
   a {
-    color: white !important;
+    color: $text-color !important;
   }
 
   &__left {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
   }
 
-  .ml-7 {
-    margin-left: 7px;
+  &__left-links {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    & > * {
+      margin-left: 0.75rem;
+    }
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
   }
 }
 </style>