feat: signup page and card setup

Author: tikagan

components/signup-card.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    class="signup-card"
+    :style="cardStyles">
+    <div class="content">
+
+      <img v-if="type !== 'vertical' && image" :src="image" class="image" />
+
+      <div v-if="type !== 'logo'" class="text">
+
+        <PieChartIcon />
+
+        <div v-if="title" class="title">
+          {{ title }}
+        </div>
+
+        <div v-if="description" class="description">
+          {{ description }}
+        </div>
+
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+// ===================================================================== Imports
+const PieChartIcon = resolveComponent('icon/pie-chart-icon')
+
+// ======================================================================= Props
+const props = defineProps({
+  signupCard: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+})
+
+// ==================================================================== Computed
+const title = computed(() => { return props.signupCard.title })
+
+const description = computed(() => { return props.signupCard.description })
+
+const cardStyles = computed(() => {
+  if (props.signupCard.borderGradientAngle) {
+    return { '--border-gradient-angle': props.signupCard.borderGradientAngle }
+  }
+  return null
+})
+
+
+</script>
+
+<style lang="scss" scoped>
+// ///////////////////////////////////////////////////////////////////// General
+.signup-card {
+  --border-gradient-angle: 0deg;
+  @include cardPanel(var(--border-gradient-angle));
+}
+
+.signup-card {
+  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>

content/core/signup.json

@@ -0,0 +1,21 @@
+{
+  "seo": {
+    "title": "Singularity",
+    "description": ""
+  },
+  "og": {
+    "site_name": "Singularity",
+    "url": "",
+    "type": "website",
+    "image": "/images/open-graph.png"
+  },
+  "page_content": [
+    {
+      "signup_card": {
+        "title": "Register for Singularity app preview",
+        "description": "With Singularity, we aim to revolutionize your data management experience with our comprehensive tool, adept at handling PiB scale data effortlessly. We're crafting an intuitive drag-and-drop interface. Stay updated and be among the first to know when the Singularity app launches in the upcoming months. Meanwhile, explore more on our website.",
+        "borderGradientAngle": "315deg"
+      }
+    }
+  ]
+}

pages/signup.vue

@@ -0,0 +1,54 @@
+<template>
+  <main :class="[`page page-${tag}`]">
+    <div class="grid-center">
+      <div class="col-8">
+
+        <SignupCard :signup-card="content.signup_card" />
+
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+import SignupCard from '@/components/signup-card'
+
+// ======================================================================== Data
+const tag = 'signup'
+const { data } = await useAsyncData( async () => {
+  return queryContent('core').find()
+})
+
+// ==================================================================== Computed
+const content = computed(() => {
+  const signup = data._rawValue.find((item) => item._file === 'core/signup.json')
+  return signup.page_content[0]
+})
+
+// eslint-disable-next-line no-console
+console.log('content ', content)
+
+</script>
+
+<style lang="scss" scoped>
+// ///////////////////////////////////////////////////////////////////// General
+.page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.top {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.logo {
+  width: 3rem;
+  margin-right: 1rem;
+}
+</style>