chore: Improve signup flow, reduce the number of inputs (#13350)

- Improved design for the Chatwoot sign up page

app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue

@@ -1,66 +1,48 @@
-<script>
+<script setup>
+import { ref, onBeforeMount } from 'vue';
 import TestimonialCard from './TestimonialCard.vue';
 import { getTestimonialContent } from '../../../../../api/testimonials';
-export default {
-  components: { TestimonialCard },
-  emits: ['resizeContainers'],
-  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('resizeContainers', !!this.testimonials.length);
-      }
-    },
-  },
+
+const emit = defineEmits(['resizeContainers']);
+
+const testimonial = ref(null);
+
+const fetchTestimonials = async () => {
+  try {
+    const { data } = await getTestimonialContent();
+    if (data.length) {
+      testimonial.value = data[Math.floor(Math.random() * data.length)];
+    }
+  } catch {
+    // Ignoring the error as the UI wouldn't break
+  } finally {
+    emit('resizeContainers', !!testimonial.value);
+  }
 };
+
+onBeforeMount(() => {
+  fetchTestimonials();
+});
 </script>
 
 <template>
   <div
-    v-show="testimonials.length"
-    class="relative flex-1 min-h-screen hidden overflow-hidden bg-n-blue-8 dark:bg-n-blue-5 xl:flex"
+    class="relative flex-1 flex flex-col items-start justify-center bg-n-alpha-black2 dark:bg-n-solid-3 px-12 py-14 rounded-e-lg"
   >
-    <img
-      src="assets/images/auth/top-left.svg"
-      class="absolute top-0 left-0 w-40 h-40"
+    <TestimonialCard
+      v-if="testimonial"
+      :review-content="testimonial.authorReview"
+      :author-image="testimonial.authorImage"
+      :author-name="testimonial.authorName"
+      :author-designation="testimonial.authorCompany"
     />
-    <img
-      src="assets/images/auth/bottom-right.svg"
-      class="absolute bottom-0 right-0 w-40 h-40"
-    />
-    <img
-      src="assets/images/auth/auth--bg.svg"
-      class="h-[96%] left-[6%] top-[8%] w-[96%] absolute"
-    />
-    <div
-      class="z-50 flex flex-col items-center justify-center w-full h-full min-h-screen"
-    >
-      <div class="flex items-start justify-center p-6">
-        <TestimonialCard
-          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="!index ? 'mt-[20%] -mr-4 z-50' : ''"
-        />
-      </div>
+    <div class="absolute bottom-8 right-8 grid grid-cols-3 gap-1.5">
+      <span class="w-2 h-2 rounded-full bg-n-gray-5" />
+      <span class="w-2 h-2 rounded-full bg-n-gray-5" />
+      <span class="w-2 h-2 rounded-full bg-n-gray-5" />
+      <span class="w-2 h-2 rounded-full bg-n-gray-5" />
+      <span class="w-2 h-2 rounded-full bg-n-gray-5" />
+      <span class="w-2 h-2 rounded-full bg-n-gray-5" />
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.center--img {
-}
-</style>

app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue

@@ -1,40 +1,39 @@
-<script>
-export default {
-  props: {
-    reviewContent: {
-      type: String,
-      default: '',
-    },
-    authorImage: {
-      type: String,
-      default: '',
-    },
-    authorName: {
-      type: String,
-      default: '',
-    },
-    authorDesignation: {
-      type: String,
-      default: '',
-    },
-  },
-};
+<script setup>
+defineProps({
+  reviewContent: { type: String, default: '' },
+  authorImage: { type: String, default: '' },
+  authorName: { type: String, default: '' },
+  authorDesignation: { type: String, default: '' },
+});
 </script>
 
 <template>
-  <div
-    class="flex flex-col items-start justify-center p-6 w-80 bg-n-background rounded-lg drop-shadow-md"
-  >
-    <p class="text-sm text-n-slate-12 tracking-normal">
+  <div class="flex flex-col items-start">
+    <svg
+      class="w-10 h-10 text-n-slate-7 mb-6"
+      viewBox="0 0 40 40"
+      fill="currentColor"
+    >
+      <path
+        d="M10.7 28.3c-1.4-1.2-2.1-3-2.1-5.4 0-2.3.8-4.6 2.4-6.8 1.6-2.2 3.8-3.9 6.6-5.1l1.2 2.1c-2.2 1.2-3.7 2.4-4.6 3.6-.9 1.2-1.3 2.5-1.2 3.8.3-.1.7-.2 1.2-.2 1.3 0 2.4.4 3.3 1.3.9.9 1.3 2 1.3 3.3 0 1.4-.5 2.5-1.4 3.4-.9.9-2.1 1.4-3.5 1.4-1.5 0-2.7-.5-3.2-1.4zm15 0c-1.4-1.2-2.1-3-2.1-5.4 0-2.3.8-4.6 2.4-6.8 1.6-2.2 3.8-3.9 6.6-5.1l1.2 2.1c-2.2 1.2-3.7 2.4-4.6 3.6-.9 1.2-1.3 2.5-1.2 3.8.3-.1.7-.2 1.2-.2 1.3 0 2.4.4 3.3 1.3.9.9 1.3 2 1.3 3.3 0 1.4-.5 2.5-1.4 3.4-.9.9-2.1 1.4-3.5 1.4-1.5 0-2.7-.5-3.2-1.4z"
+      />
+    </svg>
+    <p
+      class="text-lg text-n-slate-12 leading-relaxed whitespace-pre-line tracking-tight"
+    >
       {{ reviewContent }}
     </p>
-    <div class="flex items-center mt-4 text-n-slate-12">
-      <div class="bg-white rounded-full p-1">
-        <img :src="authorImage" class="h-8 w-8 rounded-full" />
-      </div>
-      <div class="ml-2">
-        <div class="text-sm font-medium">{{ authorName }}</div>
-        <div class="text-xs">{{ authorDesignation }}</div>
+    <div class="flex items-center mt-8">
+      <img
+        :src="authorImage"
+        :alt="authorName"
+        class="w-11 h-11 rounded-full object-cover"
+      />
+      <div class="ml-3">
+        <div class="text-base font-medium text-n-slate-12">
+          {{ authorName }}
+        </div>
+        <div class="text-sm text-n-slate-10">{{ authorDesignation }}</div>
       </div>
     </div>
   </div>