779bcf5e0d
* 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>
119 lines
2.5 KiB
Vue
119 lines
2.5 KiB
Vue
<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>
|