feat: Update Signup screen (#6002)

* feat: Update Signup page designs * feat: Update the signup page with dynamic testimonials * Remove the images * chore: Minor UI fixes * chore: Form aligned to centre * Update app/javascript/dashboard/routes/auth/components/Signup/Form.vue * Design improvements * Update company name key * Revert "chore: Minor UI fixes" This reverts commit 1556f4ca835d9aa0d9620fd6a3d52d259f0d7d65. * Revert "Design improvements This reverts commit dfb2364cf2f0cc93123698fde92e5f9e00536cc2. * Remove footer * Fix spacing * Update app/views/installation/onboarding/index.html.erb Co-authored-by: iamsivin <iamsivin@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
2022-12-07 15:55:03 -08:00
parent 6064aad38f
commit 779bcf5e0d
17 changed files with 840 additions and 261 deletions
--- a/app/javascript/dashboard/routes/auth/components/Testimonials/Index.vue
+++ b/app/javascript/dashboard/routes/auth/components/Testimonials/Index.vue
@@ -0,0 +1,119 @@
+<template>
+  <div v-if="testimonials.length" class="testimonial--section">
+    <img src="/assets/images/auth/top-left.svg" class="top-left--img" />
+    <img src="/assets/images/auth/bottom-right.svg" class="bottom-right--img" />
+    <img src="/assets/images/auth/auth--bg.svg" class="center--img" />
+    <div class="testimonial--content">
+      <div class="testimonial--content-card">
+        <testimonial-card
+          v-for="(testimonial, index) in testimonials"
+          :key="testimonial.id"
+          :review-content="testimonial.authorReview"
+          :author-image="testimonial.authorImage"
+          :author-name="testimonial.authorName"
+          :author-designation="testimonial.authorCompany"
+          :class="`testimonial-${index ? 'right' : 'left'}--card`"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TestimonialCard from './TestimonialCard.vue';
+import { getTestimonialContent } from 'dashboard/api/testimonials';
+export default {
+  components: {
+    TestimonialCard,
+  },
+  data() {
+    return {
+      testimonials: [],
+    };
+  },
+  beforeMount() {
+    this.fetchTestimonials();
+  },
+  methods: {
+    async fetchTestimonials() {
+      try {
+        const { data } = await getTestimonialContent();
+        this.testimonials = data;
+      } catch (error) {
+        // Ignoring the error as the UI wouldn't break
+      } finally {
+        this.$emit('resize-containers', !!this.testimonials.length);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~dashboard/assets/scss/woot';
+
+.top-left--img {
+  left: 0;
+  height: 16rem;
+  position: absolute;
+  top: 0;
+  width: 16rem;
+}
+
+.bottom-right--img {
+  bottom: 0;
+  height: 16rem;
+  position: absolute;
+  right: 0;
+  width: 16rem;
+}
+
+.center--img {
+  left: 5%;
+  max-height: 86%;
+  max-width: 90%;
+  position: absolute;
+  top: 2%;
+}
+
+.center-container {
+  padding: var(--space-medium) 0;
+}
+
+.testimonial--section {
+  background: var(--w-400);
+  display: flex;
+  flex: 1 1;
+  position: relative;
+}
+
+.testimonial--content {
+  align-content: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+  z-index: 1000;
+}
+
+.testimonial--content-card {
+  align-items: flex-start;
+  display: flex;
+  justify-content: center;
+  padding: var(--space-larger);
+}
+
+.testimonial-left--card {
+  --signup-testimonial-top: 20%;
+  margin-top: var(--signup-testimonial-top);
+  margin-right: var(--space-minus-normal);
+  z-index: 10000;
+}
+
+@media screen and (max-width: 1200px) {
+  .testimonial--section {
+    display: none;
+  }
+}
+</style>