feat: signup card correct image + title styling

Author: tikagan

components/signup-card.vue

@@ -5,12 +5,11 @@
     <div class="content">
 
       <div class="title-wrapper">
+        <img class="title-img" :src="img" />
 
-        <IconPieChartIcon />
-
-        <div v-if="title" class="title">
+        <h1 v-if="title" class="title">
           {{ title }}
-        </div>
+        </h1>
 
 
       </div>
@@ -133,6 +132,8 @@ const country = ref(false)
 // ==================================================================== Computed
 const title = computed(() => { return props.signupCard.title })
 
+const img = computed(() => { return props.signupCard.img })
+
 const description = computed(() => { return props.signupCard.description })
 
 const cardStyles = computed(() => {
@@ -231,19 +232,21 @@ const submitForm = async () => {
 .signup-card {
   --border-gradient-angle: 0deg;
   @include cardPanel(var(--border-gradient-angle));
-}
-
-.signup-card {
-  padding: toRem(30) toRem(24);
+  padding: toRem(58) toRem(103) toRem(93);
   .content {
     position: relative;
     z-index: 2;
   }
-  .icon {
-    margin-bottom: toRem(45);
+  .title-img {
+    width: toRem(60);
+    height: toRem(60);
+    margin-bottom: toRem(12);
   }
   .title {
-    @include h3;
+    font-size: toRem(36);
+    line-height: leading(48, 36);
+    font-weight: 500;
+    letter-spacing: 0.03em;
     color: $sageGreen;
     margin-bottom: toRem(25);
   }
@@ -253,11 +256,7 @@ const submitForm = async () => {
   }
 }
 
-// ///////////////////////////////////////////////////////////////// Signup Card
-.title-wrapper {
-  display: flex;
-  flex-flow: row no-wrap;
-}
+
 // //////////////////////////////////////////////////////////////////////// Form
 //---------------------------------------------------------------------- General
 .signup-form {

content/core/signup.json

@@ -13,8 +13,9 @@
     {
       "signup_card": {
         "title": "Register for Singularity app preview",
+        "img": "/images/increase-graphic.svg",
         "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",
+        "borderGradientAngle": "30deg",
         "signup_form": {
           "first_name": {
             "placeholder": "First name"

pages/signup.vue

@@ -1,6 +1,6 @@
 <template>
   <main :class="[`page page-${tag}`]">
-    <div class="grid-center">
+    <div class="grid-center-noGutter">
       <div class="col-8">
 
         <SignupCard :signup-card="content.signup_card" />