header fixed

src/assets/scss/main.scss

@@ -139,6 +139,7 @@ button:focus {
 .text-8xl {
     font-size: 5rem;
     line-height: 1;
+    font-family: 'Lato', sans-serif !important;
 }
 @media (min-width: 375px) {
     .text-3xl {

src/components/marketing/sections/cta-sections/Header.vue

@@ -1,8 +1,8 @@
 <template>
-  <section class="py-12 px-4">
-    <div class="flex flex-wrap items-center text-center lg:text-left -mx-2">
-      <div class="lg:w-1/2 px-2 lg:pr-10 mt-10 lg:mt-0 order-1 lg:order-none">
-        <h2 class="text-6xl mb-6 leading-none font-extrabold font-heading">
+  <section class="py-20 mb-10 px-4 lg:mx-40">
+    <div class="flex flex-wrap text-center lg:text-left -mx-2">
+      <div class="lg:w-1/2 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none">
+        <h2 class="text-8xl mb-6 mt-20 leading-none font-extrabold font-heading">
           <span class="text-blue-600">{{ slogan }}</span
           > {{ title }}
         </h2>
@@ -17,7 +17,7 @@
           >
           <a
             v-else
-            class="nline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+            class="nline-block bg-blue-900 text-md learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
             :href="link"
             >{{ button }}</a
           >

src/index.html

@@ -5,6 +5,9 @@
     ${head}
     <link rel="preconnect" href="https://fonts.gstatic.com" />
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" />
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Lato&family=Nunito:wght@700&display=swap" rel="stylesheet">
+
     <script type="text/javascript">
         window.$crisp = [];
         window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";

src/pages/Index.vue

@@ -1,27 +1,31 @@
 <template>
   <Layout :hideHeader="true" :disableScroll="true">
+     <div class="container-fluid mx-20 sm:pxi-0 overflow-x-hidden">
+        <Header
+          :title="$page.markdownPage.header_title"
+          :slogan="$page.markdownPage.header_slogan"
+          :image="$page.markdownPage.header_image"
+          :altImg="$page.markdownPage.header_altImg"
+          :excerpt="$page.markdownPage.header_excerpt"
+          :button="$page.markdownPage.button"
+          :link="$page.markdownPage.link"
+        />
+      </div>
     <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
       <!-- <SolutionsHeader
         v-if="$page.markdownPage.header"
         :header="$page.markdownPage.header"
       /> -->
 
-      <Header
-        :title="$page.markdownPage.header_title"
-        :slogan="$page.markdownPage.header_slogan"
-        :image="$page.markdownPage.header_image"
-        :altImg="$page.markdownPage.header_altImg"
-        :excerpt="$page.markdownPage.header_excerpt"
-        :button="$page.markdownPage.button"
-        :link="$page.markdownPage.link"
-      />
      
-      <g-image class="m-auto w-2/4"
+
+      <g-image
+        class="m-auto w-2/4"
         v-if="$page.markdownPage.solution_image2"
         :src="$page.markdownPage.solution_image2.src"
       />
 
-       <CallToAction
+      <CallToAction
         v-if="$page.markdownPage.cta2"
         :cta="$page.markdownPage.cta2"
       />
@@ -100,7 +104,8 @@
       :signup="$page.markdownPage.signup"
       /> -->
 
-      <g-image class="m-auto w-3/4"
+      <g-image
+        class="m-auto w-3/4"
         v-if="$page.markdownPage.solution_image"
         :src="$page.markdownPage.solution_image.src"
       />
@@ -324,7 +329,11 @@ export default {
 </script>
 <style scoped>
 .container-fluid {
-  max-width: 100% !important;
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
 }
 </style>