feat: intro section

Author: svvimming

components/blocks/text-block.vue

@@ -2,8 +2,7 @@
   <div
     :class="['block text-block', `align__${block.align ? block.align : 'left'}`]">
 
-    <h5 v-if="block.label" class="label">
-      <TriangleArrow v-if="block.showLabelIcon" class="icon" />
+    <h5 v-if="block.label" class="label h5">
       <span>{{ block.label }}</span>
     </h5>
 
@@ -25,16 +24,22 @@
     </div>
 
     <div v-if="block.ctas" class="button-row">
-      <div v-if="block.ctas && Array.isArray(block.ctas)">
+      <template v-if="block.ctas && Array.isArray(block.ctas)">
         <ButtonCta
           v-for="(cta, index) in ctaData"
           :key="index"
           :tag="cta.tag"
           :to="cta.to"
-          :theme="cta.theme">
+          :theme="cta.theme"
+          :disabled="cta.disabled">
           {{ cta.text }}
+          <span
+            v-if="cta.caption"
+            class="caption">
+            {{ cta.caption }}
+          </span>
         </ButtonCta>
-      </div>
+      </template>
     </div>
   </div>
 </template>
@@ -68,7 +73,7 @@ export default {
   computed: {
     ctaData () {
       return this.block.ctas.map((object) => {
-        return { ...object, disabled: object.url === undefined || object.url === '' }
+        return { ...object, disabled: object.to === undefined || object.to === '' }
       })
     }
   }

components/button/cta.vue

@@ -81,10 +81,10 @@ const props = defineProps({
 
 <style lang="scss" scoped>
 // ///////////////////////////////////////////////////////////////////// General
-.button {
+:deep(.button) {
   white-space: nowrap;
   cursor: pointer;
-  &:not([disabled="true"]) {
+  &:not(.disabled) {
     &:hover {
       .button-content {
         @include transitionDefault;
@@ -95,10 +95,10 @@ const props = defineProps({
       @include focusBoxShadow;
     }
   }
-  &[disabled="true"] {
+  .disabled {
     box-shadow: none;
-    opacity: 0.5;
-    cursor: no-drop;
+    // opacity: 0.5;
+    cursor: default;
   }
 }
 
@@ -144,6 +144,7 @@ const props = defineProps({
   width: fit-content;
   filter: drop-shadow(0px 2px 14px rgba(255, 197, 130, 0.32));
   padding-left: toRem(25);
+  cursor: pointer;
   &:before {
     content: '';
     position: absolute;
@@ -219,4 +220,20 @@ const props = defineProps({
     display: flex;
   }
 }
+
+.theme__big-number {
+  display: block;
+  width: fit-content;
+  :deep(.button-content) {
+    @include h1;
+    @include gradientText;
+    .caption {
+      display: block;
+      @include h4;
+      -webkit-text-fill-color: $alto;
+      -moz-text-fill-color: $alto;
+      text-fill-color: $alto;
+    }
+  }
+}
 </style>

components/data-programs-logo.vue

@@ -35,7 +35,8 @@
             :key="cta.component || cta.text"
             :tag="cta.tag"
             :target="cta.target"
-            :theme="cta.theme">
+            :theme="cta.theme"
+            :to="cta.to">
             <component
               :is="getCtaComponent(cta.icon)"
               v-if="cta.icon"

components/site-header.vue

@@ -27,6 +27,12 @@
             "to": "/signup",
             "tag": "nuxt-link",
             "theme": "primary"
+          },
+          {
+            "text": "Sign up now and be first in line when our demo goes live!",
+            "tag": "div",
+            "theme": "caption",
+            "disabled": true
           }
         ]
       },
@@ -178,7 +184,34 @@
       }
     },
     {
-      "id": "section-intro"
+      "id": "section-intro",
+      "grid": ["noGutter"],
+      "col_1": {
+        "type": "text_block",
+        "cols": {
+          "num": "col-5"
+        },
+        "h": 1,
+        "label": "WHY SINGULARITY?",
+        "heading": "Efficient, secure, and flexible data onboarding.",
+        "description": "Basic data management isn’t enough. With your needs in mind Singularity is committed to improving the experience of data on-boarding.",
+        "ctas": [
+          {
+            "theme": "big-number",
+            "tag": "div",
+            "disabled": true,
+            "text": "184+",
+            "caption": "Clients served"
+          },
+          {
+            "theme": "big-number",
+            "tag": "div",
+            "disabled": true,
+            "text": "278.7 PB",
+            "caption": "PiB Data Stored"
+          }
+        ]
+      }
     },
     {
       "id": "section-features"

content/core/index.json

@@ -5,7 +5,7 @@
     :href="tag === 'a' ? to : undefined"
     :disabled="disabled || loading"
     :target="target"
-    :class="['button', { selected }]"
+    :class="['button', { selected }, { disabled }]"
     @click="clickHandler($event)">
 
     <slot :loading="loading" />

modules/zero-components/button/components/button.vue

@@ -60,22 +60,32 @@ const sections = computed(() => {
 // //////////////////////////////////////////////////////////////////// Sections
 :deep(#hero-header) {
   position: relative;
+  padding-top: 4.0625rem;
   padding-bottom: toRem(100);
   &:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
-    height: calc(100% + toRem(840));
+    height: calc(100% + toRem(936));
     background-image: url('/images/ring-of-circular-cross-sections.png');
-    background-size: 2200px;
+    background-size: 2140px;
     background-position: center bottom;
     background-repeat: no-repeat;
   }
-  .text-block {
-    .description {
-      padding-right: toRem(50);
+  div[data-block-id="col_1"] {
+    .text-block {
+      .description {
+        padding-right: toRem(50);
+        margin-bottom: toRem(43);
+      }
+      .theme__caption {
+        margin-top: 1rem;
+        .button-content {
+          @include disclaimerText;
+        }
+      }
     }
   }
   .code-block,
@@ -110,5 +120,10 @@ const sections = computed(() => {
     background-position: center bottom;
     background-repeat: no-repeat;
   }
+  .text-block {
+    .button-row {
+      display: flex;
+    }
+  }
 }
 </style>