Chatwoot/app/javascript/dashboard/routes/auth/components/Testimonials/Index.vue
Pranav Raj S 779bcf5e0d
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

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>