feat: intro section

data-preservation-programs · Sep 5, 2023 · 5b289bc · 5b289bc
1 parent 1d313d6
commit 5b289bc
Show file tree

Hide file tree

Showing 8 changed files with 180 additions and 85 deletions.
diff --git a/assets/scss/theme/typography.scss b/assets/scss/theme/typography.scss
@@ -105,7 +105,7 @@ $fontAssetPath: 'assets/fonts';
   font-size: toRem(24);
   line-height: leading(30, 24);
   font-weight: 500;
-  letter-spacing: 0.3em;
+  letter-spacing: 0.03em;
   @include small {
     font-size: toRem(16);
     line-height: leading(27, 16);

diff --git a/components/card.vue b/components/card.vue
@@ -1,74 +1,110 @@
 <template>
-  <div :class="['card', `type__${type}`, `theme__${theme}`]">
+  <div
+    :class="['card', `type__${type}`, `theme__${theme}`]"
+    :style="cardStyles">
+    <div class="content">
 
-    <img :src="image" />
+      <img v-if="type !== 'vertical' && image" :src="image" class="image" />
 
+      <div v-if="type !== 'logo'" class="text">
+
+        <component
+          :is="iconComponent"
+          v-if="props.card.icon"
+          class="icon" />
+
+        <div v-if="title" class="title">
+          {{ title }}
+        </div>
+
+        <div v-if="description" class="description">
+          {{ description }}
+        </div>
+
+      </div>
+
+    </div>
   </div>
 </template>
 
-<script>
-// ====================================================================== Export
-export default {
-  name: 'Card',
-
-  props: {
-    card: {
-      type: Object,
-      required: true,
-      default: () => ({})
-    }
-  },
-
-  computed: {
-    type () {
-      return this.card.type
-    },
-    image () {
-      return this.card.img
-    },
-    title () {
-      return this.card.title
-    },
-    lazyLoad () {
-      return this.card.lazy_load || true
-    },
-    contentImage () {
-      let image
-      switch (this.type) {
-        case 'project':
-          image = this.card.logo
-          break
-        case 'person':
-        case 'slider':
-          image = this.card.img
-          break
-        default:
-          image = null
-      }
-      return image
-    },
-    logoTitle () {
-      return this.title.toLowerCase().replaceAll(' ', '-').replaceAll('.', '-')
-    },
-    description () {
-      return this.card.description
-    },
-    ctas () {
-      return this.card.ctas ? this.card.ctas : []
-    },
-    theme () {
-      return this.card.theme
-    }
+<script setup>
+// ===================================================================== Imports
+const PieChartIcon = resolveComponent('icon/pie-chart-icon')
+const NetworkIcon = resolveComponent('icon/network-icon')
+const GraphIcon = resolveComponent('icon/graph-icon')
+const InboxIcon = resolveComponent('icon/inbox-icon')
+
+// ======================================================================= Props
+const props = defineProps({
+  card: {
+    type: Object,
+    required: true,
+    default: () => ({})
   }
-}
+})
+
+// ==================================================================== Computed
+const type = computed(() => { return props.card.type })
+
+const image = computed(() => { return props.card.image })
+
+const title = computed(() => { return props.card.title })
+
+const description = computed(() => { return props.card.description })
+
+const theme = computed(() => { return props.card.theme })
+
+const cardStyles = computed(() => {
+  if (props.card.borderGradientAngle) {
+    return { '--border-gradient-angle': props.card.borderGradientAngle }
+  }
+  return null
+})
+
+const iconComponent = computed(() => {
+  switch (props.card.icon) {
+    case 'pie-chart' : return PieChartIcon;
+    case 'network' : return NetworkIcon;
+    case 'graph' : return GraphIcon;
+    case 'inbox' : return InboxIcon;
+    default : return 'span'
+  }
+})
+
 </script>
 
 <style lang="scss" scoped>
 // ///////////////////////////////////////////////////////////////////// General
+.card.type__vertical,
+.card.type__horizontal {
+  --border-gradient-angle: 0deg;
+  @include cardPanel(var(--border-gradient-angle));
+}
+
 .card.type__logo {
   width: fit-content;
   margin: auto;
   display: flex;
   align-items: center;
 }
+
+.card.type__vertical {
+  padding: toRem(30) toRem(24);
+  .content {
+    position: relative;
+    z-index: 2;
+  }
+  .icon {
+    margin-bottom: toRem(45);
+  }
+  .title {
+    @include h3;
+    color: $sageGreen;
+    margin-bottom: toRem(25);
+  }
+  .description {
+    @include p2;
+    margin-bottom: toRem(22);
+  }
+}
 </style>
diff --git a/components/icon/graph-icon.vue b/components/icon/graph-icon.vue
@@ -1,8 +1,13 @@
 <template>
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path opacity="0.3" d="M19.1635 3C20.5798 3 21.6628 3.96703 21.6628 5.2316V24.5721C21.6628 25.8367 20.5798 26.8037 19.1635 26.8037C17.7471 26.8037 16.6641 25.8367 16.6641 24.5721V5.2316C16.6641 3.96703 17.7471 3 19.1635 3Z" fill="#CBDDBB"/>
-<path d="M10.8353 10.4385C12.2516 10.4385 13.3347 11.4055 13.3347 12.6701V24.5719C13.3347 25.8365 12.2516 26.8035 10.8353 26.8035C9.41901 26.8035 8.33594 25.8365 8.33594 24.5719V12.6701C8.33594 11.4055 9.41901 10.4385 10.8353 10.4385Z" fill="#CBDDBB"/>
-<path d="M27.4994 13.4141C28.9157 13.4141 29.9988 14.3811 29.9988 15.6457V24.5721C29.9988 25.8366 28.9157 26.8037 27.4994 26.8037C26.0831 26.8037 25 25.8366 25 24.5721V15.6457C25 14.3811 26.0831 13.4141 27.4994 13.4141Z" fill="#CBDDBB"/>
-<path d="M2.49939 16.3896C3.91571 16.3896 4.99878 17.3567 4.99878 18.6212V24.5722C4.99878 25.8367 3.91571 26.8038 2.49939 26.8038C1.08307 26.8038 0 25.8367 0 24.5722V18.6212C0 17.3567 1.08307 16.3896 2.49939 16.3896Z" fill="#CBDDBB"/>
-</svg>
+  <svg
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path opacity="0.3" d="M19.1635 3C20.5798 3 21.6628 3.96703 21.6628 5.2316V24.5721C21.6628 25.8367 20.5798 26.8037 19.1635 26.8037C17.7471 26.8037 16.6641 25.8367 16.6641 24.5721V5.2316C16.6641 3.96703 17.7471 3 19.1635 3Z" fill="#CBDDBB" />
+    <path d="M10.8353 10.4385C12.2516 10.4385 13.3347 11.4055 13.3347 12.6701V24.5719C13.3347 25.8365 12.2516 26.8035 10.8353 26.8035C9.41901 26.8035 8.33594 25.8365 8.33594 24.5719V12.6701C8.33594 11.4055 9.41901 10.4385 10.8353 10.4385Z" fill="#CBDDBB" />
+    <path d="M27.4994 13.4141C28.9157 13.4141 29.9988 14.3811 29.9988 15.6457V24.5721C29.9988 25.8366 28.9157 26.8037 27.4994 26.8037C26.0831 26.8037 25 25.8366 25 24.5721V15.6457C25 14.3811 26.0831 13.4141 27.4994 13.4141Z" fill="#CBDDBB" />
+    <path d="M2.49939 16.3896C3.91571 16.3896 4.99878 17.3567 4.99878 18.6212V24.5722C4.99878 25.8367 3.91571 26.8038 2.49939 26.8038C1.08307 26.8038 0 25.8367 0 24.5722V18.6212C0 17.3567 1.08307 16.3896 2.49939 16.3896Z" fill="#CBDDBB" />
+  </svg>
 </template>
diff --git a/components/icon/inbox-icon.vue b/components/icon/inbox-icon.vue
@@ -1,8 +1,12 @@
 <template>
-  <svg width="33" height="30" viewBox="0 0 33 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path opacity="0.3" d="M4 2.5H29C30.7188 2.5 32.125 3.90625 32.125 5.625V24.375C32.125 26.0938 30.7188 27.5 29 27.5H4C2.28125 27.5 0.875 26.0938 0.875 24.375V5.625C0.875 3.90625 2.28125 2.5 4 2.5Z" fill="#CBDDBB"/>
-<path d="M26.6562 13.958H6.34375C5.01562 13.958 4 14.9736 4 16.3018V17.083H11.1875C11.5781 17.083 11.9687 17.2393 12.2812 17.5518L13.8437 19.1143C14.5469 19.8175 15.4844 20.208 16.5 20.208C17.5156 20.208 18.4531 19.8175 19.1563 19.1143L20.7188 17.5518C21.0313 17.2393 21.4219 17.083 21.8125 17.083H29V16.3018C29 14.9736 27.9844 13.958 26.6562 13.958Z" fill="#CBDDBB"/>
-<path d="M6.34375 5.625C5.01562 5.625 4 6.64062 4 7.96875V8.75H29V7.96875C29 6.64062 27.9844 5.625 26.6562 5.625H6.34375Z" fill="#CBDDBB"/>
-</svg>
-
+  <svg
+    width="33"
+    height="30"
+    viewBox="0 0 33 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path opacity="0.3" d="M4 2.5H29C30.7188 2.5 32.125 3.90625 32.125 5.625V24.375C32.125 26.0938 30.7188 27.5 29 27.5H4C2.28125 27.5 0.875 26.0938 0.875 24.375V5.625C0.875 3.90625 2.28125 2.5 4 2.5Z" fill="#CBDDBB" />
+    <path d="M26.6562 13.958H6.34375C5.01562 13.958 4 14.9736 4 16.3018V17.083H11.1875C11.5781 17.083 11.9687 17.2393 12.2812 17.5518L13.8437 19.1143C14.5469 19.8175 15.4844 20.208 16.5 20.208C17.5156 20.208 18.4531 19.8175 19.1563 19.1143L20.7188 17.5518C21.0313 17.2393 21.4219 17.083 21.8125 17.083H29V16.3018C29 14.9736 27.9844 13.958 26.6562 13.958Z" fill="#CBDDBB" />
+    <path d="M6.34375 5.625C5.01562 5.625 4 6.64062 4 7.96875V8.75H29V7.96875C29 6.64062 27.9844 5.625 26.6562 5.625H6.34375Z" fill="#CBDDBB" />
+  </svg>
 </template>
diff --git a/components/icon/network-icon.vue b/components/icon/network-icon.vue
@@ -1,8 +1,13 @@
 <template>
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 8.69643C8.375 8.69643 9.5 7.69196 9.5 6.46429C9.5 5.23661 8.375 4.23214 7 4.23214C5.625 4.23214 4.5 5.23661 4.5 6.46429C4.5 7.69196 5.625 8.69643 7 8.69643ZM7 10.9286C4.25 10.9286 2 8.91964 2 6.46429C2 4.00893 4.25 2 7 2C9.75 2 12 4.00893 12 6.46429C12 8.91964 9.75 10.9286 7 10.9286Z" fill="#CBDDBB"/>
-<path opacity="0.3" d="M8.6 14.2517V20.6227C8.6 21.8854 9.77 22.9186 11.2 22.9186H19V25.2145H11.2C8.34 25.2145 6 23.1482 6 20.6227V9.14307H8.6V10.291C8.6 11.5538 9.77 12.5869 11.2 12.5869H19V14.8829H11.2C10.225 14.8829 9.38 14.6535 8.6 14.2517Z" fill="#CBDDBB"/>
-<path d="M23 26.3304C24.375 26.3304 25.5 25.2255 25.5 23.8751C25.5 22.5246 24.375 21.4197 23 21.4197C21.625 21.4197 20.5 22.5246 20.5 23.8751C20.5 25.2255 21.625 26.3304 23 26.3304ZM23 28.7858C20.25 28.7858 18 26.576 18 23.8751C18 21.1742 20.25 18.9644 23 18.9644C25.75 18.9644 28 21.1742 28 23.8751C28 26.576 25.75 28.7858 23 28.7858Z" fill="#CBDDBB"/>
-<path d="M23 15.8395C24.375 15.8395 25.5 14.835 25.5 13.6074C25.5 12.3797 24.375 11.3752 23 11.3752C21.625 11.3752 20.5 12.3797 20.5 13.6074C20.5 14.835 21.625 15.8395 23 15.8395ZM23 18.0716C20.25 18.0716 18 16.0627 18 13.6074C18 11.152 20.25 9.14307 23 9.14307C25.75 9.14307 28 11.152 28 13.6074C28 16.0627 25.75 18.0716 23 18.0716Z" fill="#CBDDBB"/>
-</svg>
+  <svg
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 8.69643C8.375 8.69643 9.5 7.69196 9.5 6.46429C9.5 5.23661 8.375 4.23214 7 4.23214C5.625 4.23214 4.5 5.23661 4.5 6.46429C4.5 7.69196 5.625 8.69643 7 8.69643ZM7 10.9286C4.25 10.9286 2 8.91964 2 6.46429C2 4.00893 4.25 2 7 2C9.75 2 12 4.00893 12 6.46429C12 8.91964 9.75 10.9286 7 10.9286Z" fill="#CBDDBB" />
+    <path opacity="0.3" d="M8.6 14.2517V20.6227C8.6 21.8854 9.77 22.9186 11.2 22.9186H19V25.2145H11.2C8.34 25.2145 6 23.1482 6 20.6227V9.14307H8.6V10.291C8.6 11.5538 9.77 12.5869 11.2 12.5869H19V14.8829H11.2C10.225 14.8829 9.38 14.6535 8.6 14.2517Z" fill="#CBDDBB" />
+    <path d="M23 26.3304C24.375 26.3304 25.5 25.2255 25.5 23.8751C25.5 22.5246 24.375 21.4197 23 21.4197C21.625 21.4197 20.5 22.5246 20.5 23.8751C20.5 25.2255 21.625 26.3304 23 26.3304ZM23 28.7858C20.25 28.7858 18 26.576 18 23.8751C18 21.1742 20.25 18.9644 23 18.9644C25.75 18.9644 28 21.1742 28 23.8751C28 26.576 25.75 28.7858 23 28.7858Z" fill="#CBDDBB" />
+    <path d="M23 15.8395C24.375 15.8395 25.5 14.835 25.5 13.6074C25.5 12.3797 24.375 11.3752 23 11.3752C21.625 11.3752 20.5 12.3797 20.5 13.6074C20.5 14.835 21.625 15.8395 23 15.8395ZM23 18.0716C20.25 18.0716 18 16.0627 18 13.6074C18 11.152 20.25 9.14307 23 9.14307C25.75 9.14307 28 11.152 28 13.6074C28 16.0627 25.75 18.0716 23 18.0716Z" fill="#CBDDBB" />
+  </svg>
 </template>
diff --git a/components/icon/pie-chart-icon.vue b/components/icon/pie-chart-icon.vue
@@ -5,8 +5,13 @@
     viewBox="0 0 30 30"
     fill="none"
     xmlns="http://www.w3.org/2000/svg">
-    <path opacity="0.3" d="M1.5 16.063L17.5312 19.279V1.5C24.5672 2.39342 30 8.37924 30 15.7053C30 23.0313 23.5875 30 15.75 30C7.9125 30 1.67813 23.8358 1.5 16.063Z" fill="#CBDDBB" />
-    <path d="M0 12.2092C0.849055 5.31971 6.53775 0 13.5 0V15L0 12.2092Z" fill="#CBDDBB" />
+    <path
+      opacity="0.3"
+      d="M1.5 16.063L17.5312 19.279V1.5C24.5672 2.39342 30 8.37924 30 15.7053C30 23.0313 23.5875 30 15.75 30C7.9125 30 1.67813 23.8358 1.5 16.063Z"
+      fill="#CBDDBB" />
+    <path
+      d="M0 12.2092C0.849055 5.31971 6.53775 0 13.5 0V15L0 12.2092Z"
+      fill="#CBDDBB" />
   </svg>
 
 </template>
diff --git a/content/core/index.json b/content/core/index.json
@@ -211,6 +211,45 @@
             "caption": "PiB Data Stored"
           }
         ]
+      },
+      "col_2": {
+        "type": "card_list_block",
+        "cols": {
+          "num": "col-6",
+          "push_left": "off-1"
+        },
+        "card_grid": ["equalHeight"],
+        "card_columns": "col-6",
+        "cards": [
+          {
+            "type": "vertical",
+            "icon": "pie-chart",
+            "title": "Flexible Deal Making",
+            "description": "Deal with your preferred storage providers with a schedule that works for you.",
+            "borderGradientAngle": "315deg"
+          },
+          {
+            "type": "vertical",
+            "icon": "network",
+            "title": "Simple Data Processing",
+            "description": "Singularity seamlessly processes data from your local sources or public S3 buckets and automates data preparation",
+            "borderGradientAngle": "45deg"
+          },
+          {
+            "type": "vertical",
+            "icon": "graph",
+            "title": "Data Integrity",
+            "description": "Singularity fosters decentralization by allowing users minimal reliance on storage providers, facilitated by easy verification and support from Filecoin protocol",
+            "borderGradientAngle": "225deg"
+          },
+          {
+            "type": "vertical",
+            "icon": "inbox",
+            "title": "Robust File Management",
+            "description": "Supports file versioning, deletion, and dataset folder structure exploration",
+            "borderGradientAngle": "135deg"
+          }
+        ]
       }
     },
     {

diff --git a/pages/index.vue b/pages/index.vue
@@ -68,9 +68,9 @@ const sections = computed(() => {
     top: 0;
     left: 0;
     width: 100%;
-    height: calc(100% + toRem(936));
+    height: calc(100% + toRem(880));
     background-image: url('/images/ring-of-circular-cross-sections.png');
-    background-size: 2140px;
+    background-size: 2040px;
     background-position: center bottom;
     background-repeat: no-repeat;
   }
@@ -107,17 +107,18 @@ const sections = computed(() => {
 
 :deep(#section-intro) {
   position: relative;
-  padding-bottom: toRem(100);
+  padding-bottom: 0;
   &:before {
     content: '';
     position: absolute;
-    top: 0;
+    top: calc(100% - 370px);
     left: 0;
-    width: 100%;
-    height: calc(100% + toRem(3000));
+    width: calc(100% + 270px);
+    height: 130rem;
+    transform: translateX(-270px);
     background-image: url('/images/warped-torus-made-of-segments.png');
-    background-size: 2200px;
-    background-position: center bottom;
+    background-size: 2000px;
+    background-position: center top;
     background-repeat: no-repeat;
   }
   .text-block {