Blocks - Testimonials
Copy any custom block snippet below and paste it on your page to build your website easily.
“Cum sociis natoque penatibus et magnis dis parturient montes.”
Coriss Ambady
Financial Analyst
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.”
Cory Zamora
Marketing Specialist
“Donec id elit non porta gravida at eget metus. Duis mollis est commodo luctus, nisi erat porttitor.”
Barclay Widerski
Sales Specialist
“Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo pellentesque ornare.”
Jackie Sanders
Investment Planner
Our Community
Customer satisfaction is our major goal. See what our customers are saying about us.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper.
All Testimonials<template>
<section id="snippet-1" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
<div class="col-lg-7">
<div class="row gx-md-5 gy-5">
<div
v-for="(card, index) in testimonials"
:key="index"
:class="['col-md-6', card.class]"
>
<div :class="['card', card.bgClass]" :id="`card-${card.id}`">
<div class="card-body">
<blockquote class="icon mb-0">
<p>{{ card.quote }}</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-1">{{ card.name }}</h5>
<p class="mb-0">{{ card.role }}</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-5">
<h2 class="display-4 mb-3">Our Community</h2>
<p class="lead fs-lg">
Customer satisfaction is our major goal. See what our customers are
saying about us.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit
libero, a pharetra augue. Maecenas faucibus mollis interdum.
Vestibulum id ligula porta felis euismod semper.
</p>
<a href="#" class="btn btn-navy rounded-pill mt-3"
>All Testimonials</a
>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { testimonials } from "~/data/testimonials";
</script>
<style lang="scss" scoped></style>
“Donec id elit non mi porta gravida at eget metus. Vivamus mollis est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis porta est non commodo luctus.”
Coriss Ambady
Financial Analyst
<template>
<section id="snippet-2" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row position-relative">
<figure
class="rounded position-absolute d-none d-lg-block"
style="
top: 50%;
right: 0;
width: 45%;
height: auto;
transform: translateY(-50%);
z-index: 2;
"
>
<nuxt-img
src="/assets/img/photos/tei1.jpg"
srcset="/assets/img/photos/tei1@2x.jpg 2x"
alt=""
/>
</figure>
<div class="col-lg-9 text-center">
<div class="card bg-gray">
<div class="card-body p-md-10 py-xxl-16">
<div class="row gx-0">
<div class="col-lg-8 ps-xl-10">
<span class="ratings five fs-20 mb-3"></span>
<blockquote class="border-0 fs-lg mb-0">
<p>
“Donec id elit non mi porta gravida at eget metus. Vivamus
mollis est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit. Duis mollis porta est non
commodo luctus.”
</p>
<div
class="blockquote-details justify-content-center text-center"
>
<div class="info p-0">
<h4 class="mb-1">Coriss Ambady</h4>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup></script>
<style lang="scss" scoped></style>Our Community
Customer satisfaction is our major goal. See what our clients are saying about our services.
All Testimonials“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis sed posuere.”
Coriss Ambady
Financial Analyst
“Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus.”
Cory Zamora
Marketing Specialist
“Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida.”
Nikolas Brooten
Sales Manager
“Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus posuere consectetur.”
Coriss Ambady
Financial Analyst
“Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque.”
Jackie Sanders
Investment Planner
“Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna.”
Laura Widerski
Sales Specialist
<template>
<section id="snippet-3" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row gx-xl-12 gy-10">
<div class="col-xl-4">
<h2 class="display-4 mt-10 mb-3">Our Community</h2>
<p class="lead fs-lg mb-6">
Customer satisfaction is our major goal. See what our clients are
saying about our services.
</p>
<a href="#" class="btn btn-primary rounded-pill">All Testimonials</a>
</div>
<!-- /column -->
<div class="col-xl-8">
<div class="position-relative">
<div
class="shape rounded-circle bg-soft-yellow rellax w-16 h-16"
data-rellax-speed="1"
style="top: -0.7rem; right: -1.7rem"
></div>
<div
class="shape rounded-circle bg-line red rellax w-16 h-16"
data-rellax-speed="1"
style="bottom: -0.5rem; left: -1.4rem"
></div>
<div class="swiper-container dots-closer mb-6">
<Swiper
:space-between="1"
:pagination="{ el: '.spb2', clickable: true }"
:modules="[Pagination]"
:grab-cursor="true"
:breakpoints="{
500: { slidesPerView: 1 },
768: { slidesPerView: 2 },
1024: { slidesPerView: 2 },
1200: { slidesPerView: 2 },
}"
>
<SwiperSlide v-for="(elm, i) in testimonials2" :key="i">
<div class="item-inner">
<div class="card">
<div class="card-body">
<blockquote class="icon mb-0">
<p>
{{ elm.quote }}
</p>
<div class="blockquote-details">
<nuxt-img
class="rounded-circle w-12"
:src="elm.avatarSrc"
alt=""
/>
<div class="info">
<h5 class="mb-1">{{ elm.name }}</h5>
<p class="mb-0">{{ elm.role }}</p>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
</SwiperSlide>
</Swiper>
<div class="swiper-controls">
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal spb2"
></div>
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.position-relative -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
import { testimonials2 } from "~/data/testimonials";
</script>
<style lang="scss" scoped></style>
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Coriss Ambady
Financial Analyst
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Cory Zamora
Marketing Specialist
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Nikolas Brooten
Sales Manager
<template>
<section id="snippet-4" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row gx-lg-8 gx-xl-12 gy-6 align-items-center">
<div class="col-lg-7 order-lg-2">
<figure>
<nuxt-img
class="w-auto"
src="/assets/img/illustrations/i4.png"
srcset="/assets/img/illustrations/i4@2x.png 2x"
alt=""
/>
</figure>
</div>
<!--/column -->
<div class="col-lg-5 mt-12">
<div class="swiper-container dots-closer mb-6">
<Swiper
:pagination="{ el: '.spb6', clickable: true }"
:modules="[Pagination]"
:grab-cursor="true"
:breakpoints="{
500: { slidesPerView: 1 },
768: { slidesPerView: 1 },
1024: { slidesPerView: 1 },
1200: { slidesPerView: 1 },
}"
>
<SwiperSlide v-for="(elm, i) in testimonials3" :key="i">
<blockquote class="icon icon-top fs-lg text-center">
<p>
{{ elm.quote }}
</p>
<div
class="blockquote-details justify-content-center text-center"
>
<div class="info ps-0">
<h5 class="mb-1">{{ elm.name }}</h5>
<p class="mb-0">{{ elm.role }}</p>
</div>
</div>
</blockquote></SwiperSlide
>
</Swiper>
<div class="swiper-controls">
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal spb6"
></div>
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
import { testimonials3 } from "~/data/testimonials";
</script>
<style lang="scss" scoped></style>Happy Customers
Customer satisfaction is our major goal. See what our customers are saying about us.
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis sed posuere.”
Coriss Ambady
Financial Analyst
“Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus.”
Cory Zamora
Marketing Specialist
“Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida.”
Nikolas Brooten
Sales Manager
“Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus posuere consectetur.”
Coriss Ambady
Financial Analyst
“Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque.”
Jackie Sanders
Investment Planner
“Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna.”
Laura Widerski
Sales Specialist
<template>
<section id="snippet-5" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<h2 class="display-4 mb-3 text-center">Happy Customers</h2>
<p class="lead text-center mb-6 px-md-16 px-lg-0">
Customer satisfaction is our major goal. See what our customers are
saying about us.
</p>
<div class="position-relative">
<div
class="shape rounded-circle bg-soft-yellow rellax w-16 h-16"
data-rellax-speed="1"
style="bottom: 0.5rem; right: -1.7rem"
></div>
<div
class="shape bg-dot primary rellax w-16 h-16"
data-rellax-speed="1"
style="top: -1rem; left: -1.7rem"
></div>
<div class="swiper-container dots-closer mb-6">
<Swiper
:pagination="{ el: '.spb7', clickable: true }"
:modules="[Pagination]"
:grab-cursor="true"
:breakpoints="{
500: { slidesPerView: 1 },
768: { slidesPerView: 2 },
1024: { slidesPerView: 3 },
1200: { slidesPerView: 3 },
}"
>
<SwiperSlide v-for="(elm, i) in testimonials2" :key="i">
<div class="item-inner">
<div class="card">
<div class="card-body">
<blockquote class="icon mb-0">
<p>
{{ elm.quote }}
</p>
<div class="blockquote-details">
<nuxt-img
class="rounded-circle w-12"
:src="elm.avatarSrc"
alt=""
/>
<div class="info">
<h5 class="mb-1">{{ elm.name }}</h5>
<p class="mb-0">{{ elm.role }}</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div></SwiperSlide
>
</Swiper>
<div class="swiper-controls">
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal spb7"
></div>
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.position-relative -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { testimonials2 } from "~/data/testimonials";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
</script>
<style lang="scss" scoped></style>
20 +
Satisfied Customers
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Coriss Ambady
Financial Analyst
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Cory Zamora
Marketing Specialist
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Nikolas Brooten
Sales Manager
<template>
<section id="snippet-6" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row gx-lg-8 gx-xl-12 gy-6 align-items-center">
<div class="col-lg-7 position-relative">
<div
class="shape bg-dot primary rellax w-18 h-18"
data-rellax-speed="1"
style="top: 0; left: -1.4rem; z-index: 0"
></div>
<div class="row gx-md-5 gy-5">
<div class="col-md-6">
<figure class="rounded mt-md-10 position-relative">
<nuxt-img
src="/assets/img/photos/g5.jpg"
srcset="/assets/img/photos/g5@2x.jpg 2x"
alt=""
/>
</figure>
</div>
<!--/column -->
<div class="col-md-6">
<div class="row gx-md-5 gy-5">
<div class="col-md-12 order-md-2">
<figure class="rounded">
<nuxt-img
src="/assets/img/photos/g6.jpg"
srcset="/assets/img/photos/g6@2x.jpg 2x"
alt=""
/>
</figure>
</div>
<!--/column -->
<div class="col-md-10">
<div class="card bg-pale-primary text-center">
<div class="card-body py-11 counter-wrapper">
<h3 class="counter text-nowrap">
<CommonCounter
parentClass=""
:min="20"
:max="5000"
:time="1500"
/>
<!-- Component for counting number with intersetion observer from omponents>common>counter -->
+
</h3>
<p class="mb-0">Satisfied Customers</p>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-5 mt-5">
<div
class="swiper-container dots-closer mb-6"
data-margin="30"
data-dots="true"
>
<Swiper
:space-between="30"
:pagination="{ el: '.spb8', clickable: true }"
:modules="[Pagination]"
:grab-cursor="true"
:breakpoints="{
500: { slidesPerView: 1 },
768: { slidesPerView: 1 },
1024: { slidesPerView: 1 },
1200: { slidesPerView: 1 },
}"
>
<SwiperSlide v-for="(elm, i) in testimonials3" :key="i">
<blockquote class="icon icon-top fs-lg text-center">
<p>
{{ elm.quote }}
</p>
<div
class="blockquote-details justify-content-center text-center"
>
<div class="info ps-0">
<h5 class="mb-1">{{ elm.name }}</h5>
<p class="mb-0">{{ elm.role }}</p>
</div>
</div>
</blockquote></SwiperSlide
>
</Swiper>
<div class="swiper-controls">
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal spb8"
></div>
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
import { testimonials3 } from "~/data/testimonials";
</script>
<style lang="scss" scoped></style>Happy Customers
Don't take our word for it. See what customers are saying about us.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.
Coriss Ambady
Financial Analyst
Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
Cory Zamora
Marketing Specialist
Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui consectetur adipiscing elit.
Nikolas Brooten
Sales Manager
Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero condimentum ac laoreet vitae.
Coriss Ambady
Financial Analyst
Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio dui. Nulla vitae elit libero a pharetra.
Jackie Sanders
Investment Planner
Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Laura Widerski
Sales Specialist
<template>
<section id="snippet-7" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row">
<div
class="col-md-10 offset-md-1 col-lg-8 offset-lg-2 mx-auto text-center"
>
<h2 class="fs-15 text-uppercase text-muted mb-3">Happy Customers</h2>
<h3 class="display-4 mb-10 px-xl-10 px-xxl-15">
Don't take our word for it. See what customers are saying about us.
</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="grid">
<div class="row isotope gy-6" ref="isotopeContainer">
<div v-for="(elm, i) in testimonials4" :key="i" class="item col-md-6 col-xl-4">
<div class="card">
<div class="card-body">
<span class="ratings five mb-3"></span>
<blockquote class="icon mb-0">
<p>
{{ elm.quote }}
</p>
<div class="blockquote-details">
<nuxt-img
class="rounded-circle w-12"
:src="elm.avatarSrc"
alt=""
/>
<div class="info">
<h5 class="mb-1">{{ elm.name }}</h5>
<p class="mb-0">{{ elm.role }}</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
</div>
<!-- /.row -->
</div>
<!-- /.grid-view -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import imagesLoaded from 'imagesloaded';
import { testimonials4 } from "~/data/testimonials";
const isotopeContainer = ref();
const isotope = ref();
const initIsotop = async () => {
const Isotope = (await import("isotope-layout")).default;
// Initialize Isotope in the mounted hook
isotope.value = new Isotope(isotopeContainer.value, {
itemSelector: ".item",
layoutMode: "masonry", // or 'fitRows', depending on your layout needs
});
imagesLoaded(isotopeContainer.value).on(
"progress",
function (instance, image) {
// Trigger Isotope layout
isotope.value.layout();
}
);
};
onMounted(() => {
initIsotop();
});
</script>
<style lang="scss" scoped></style>
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Coriss Ambady
Financial Analyst
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Cory Zamora
Marketing Specialist
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Nikolas Brooten
Sales Manager
<template>
<section id="snippet-8" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15 pb-lg-0">
<div class="row gx-lg-8 gx-xl-0 align-items-center">
<div
class="col-lg-5 col-xl-4 offset-xl-1 d-none d-lg-flex position-relative"
>
<div
class="shape rounded-circle bg-soft-primary rellax w-21 h-21"
data-rellax-speed="1"
style="top: 7rem; left: 1rem"
></div>
<figure>
<nuxt-img
src="/assets/img/photos/co1.png"
srcset="/assets/img/photos/co1@2x.png 2x"
alt=""
/>
</figure>
</div>
<!--/column -->
<div class="col-lg-6 col-xl-6 col-xxl-5 offset-xl-1">
<div class="swiper-container dots-start dots-closer mt-6 mb-6">
<Swiper
:space-between="30"
:pagination="{ el: '.spb9', clickable: true }"
:modules="[Pagination]"
:grab-cursor="true"
:breakpoints="{
500: { slidesPerView: 1 },
768: { slidesPerView: 1 },
1024: { slidesPerView: 1 },
1200: { slidesPerView: 1 },
}"
>
<SwiperSlide v-for="(elm, i) in testimonials3" :key="i">
<blockquote class="icon fs-lg">
<p>
{{ elm.quote }}
</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">{{ elm.name }}</h5>
<p class="mb-0">{{ elm.role }}</p>
</div>
</div>
</blockquote>
</SwiperSlide>
</Swiper>
<div class="swiper-controls">
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal spb9"
></div>
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { testimonials3 } from "~/data/testimonials";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
</script>
<style lang="scss" scoped></style>
“Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh ut fermentum massa, justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed”
Coriss Ambady
Financial Analyst
<template>
<section id="snippet-9" class="wrapper bg-light wrapper-border">
<div class="container py-14 py-md-16 pt-md-20">
<div class="card bg-soft-primary">
<div class="card-body p-md-10 py-xxl-16 position-relative">
<div
class="position-absolute d-none d-lg-block"
style="bottom: 0; left: 10%; width: 28%; z-index: 2"
>
<figure>
<nuxt-img
src="/assets/img/photos/co2.png"
srcset="/assets/img/photos/co2@2x.png 2x"
alt=""
/>
</figure>
</div>
<div class="row gx-md-0 gx-xl-12 text-center">
<div class="col-lg-7 offset-lg-5 col-xl-6">
<span class="ratings five mb-3"></span>
<blockquote class="border-0 fs-lg mb-0">
<p>
“Fusce dapibus tellus ac cursus commodo, tortor mauris
condimentum nibh ut fermentum massa, justo sit amet vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Cras mattis consectetur purus sit amet fermentum. Aenean
lacinia bibendum nulla sed”
</p>
<div
class="blockquote-details justify-content-center text-center"
>
<div class="info p-0">
<h5 class="mb-1">Coriss Ambady</h5>
<div class="meta mb-0">Financial Analyst</div>
</div>
</div>
</blockquote>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup></script>
<style lang="scss" scoped></style>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Coriss Ambady
Financial Analyst
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Cory Zamora
Marketing Specialist
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Nikolas Brooten
Sales Manager
<template>
<section id="snippet-10" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="position-relative">
<div
class="shape rounded-circle bg-line primary rellax w-18 h-18"
data-rellax-speed="1"
style="top: -2rem; right: -2.7rem; z-index: 0"
></div>
<div
class="shape rounded-circle bg-soft-primary rellax w-18 h-18"
data-rellax-speed="1"
style="bottom: -1rem; left: -3rem; z-index: 0"
></div>
<div class="card shadow-lg">
<div class="row gx-0">
<div
class="col-lg-6 image-wrapper bg-image bg-cover rounded-top rounded-lg-start"
style="
background-image: url("/assets/img/photos/tm1.jpg");
"
></div>
<!--/column -->
<div class="col-lg-6">
<div class="p-10 p-md-11 p-lg-13">
<div class="swiper-container dots-closer mb-6">
<Swiper
:space-between="30"
:pagination="{ el: '.spb10', clickable: true }"
:modules="[Pagination]"
:grab-cursor="true"
:breakpoints="{
500: { slidesPerView: 1 },
768: { slidesPerView: 1 },
1024: { slidesPerView: 1 },
1200: { slidesPerView: 1 },
}"
>
<SwiperSlide v-for="(elm, i) in testimonials3" :key="i">
<blockquote class="icon icon-top fs-lg text-center">
<p>
{{ elm.quote }}
</p>
<div
class="blockquote-details justify-content-center text-center"
>
<div class="info ps-0">
<h5 class="mb-1">{{ elm.name }}</h5>
<p class="mb-0">{{ elm.role }}</p>
</div>
</div>
</blockquote>
</SwiperSlide>
</Swiper>
<div class="swiper-controls">
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal spb10"
></div>
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!--/div -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.card -->
</div>
<!-- /div -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
import { testimonials3 } from "~/data/testimonials";
</script>
<style lang="scss" scoped></style>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Coriss Ambady
Financial Analyst
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Cory Zamora
Marketing Specialist
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Nikolas Brooten
Sales Manager
<template>
<section id="snippet-11" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row text-white text-center">
<div class="col-xl-10 mx-auto mb-14 mb-lg-n6">
<div
class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400"
style="
background-image: url("/assets/img/photos/bg2.jpg");
"
>
<div class="card-body p-9 p-xl-12">
<div class="row gx-0">
<div class="col-xxl-9 mx-auto">
<div class="swiper-container dots-light dots-closer mb-6">
<Swiper
:space-between="30"
:pagination="{ el: '.spb11', clickable: true }"
:modules="[Pagination]"
:grab-cursor="true"
:breakpoints="{
500: { slidesPerView: 1 },
768: { slidesPerView: 1 },
1024: { slidesPerView: 1 },
1200: { slidesPerView: 1 },
}"
>
<SwiperSlide v-for="(elm, i) in testimonials3" :key="i">
<span class="ratings five mb-3"></span>
<blockquote class="border-0 fs-lg mb-2">
<p>
{{ elm.quote }}
</p>
<div
class="blockquote-details justify-content-center text-center"
>
<div class="info ps-0">
<h5 class="mb-1 text-white">{{ elm.name }}</h5>
<p class="mb-0">{{ elm.role }}</p>
</div>
</div>
</blockquote></SwiperSlide
>
</Swiper>
<div class="swiper-controls">
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal spb11"
></div>
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
import { testimonials3 } from "~/data/testimonials";
</script>
<style lang="scss" scoped></style>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.
Coriss Ambady
Financial Analyst
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.
Cory Zamora
Marketing Specialist
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.
Nikolas Brooten
Sales Manager
<template>
<section id="snippet-12" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto">
<div class="swiper-container dots-closer text-center mb-6">
<Swiper
:space-between="30"
:pagination="{ el: '.spb12', clickable: true }"
:modules="[Pagination]"
:grab-cursor="true"
:breakpoints="{
500: { slidesPerView: 1 },
768: { slidesPerView: 1 },
1024: { slidesPerView: 1 },
1200: { slidesPerView: 1 },
}"
>
<SwiperSlide v-for="(elm, i) in testimonials5" :key="i">
<blockquote class="border-0 fs-lg">
<p>
{{ elm.quote }}
</p>
<div class="blockquote-details justify-content-center">
<nuxt-img
class="rounded-circle w-12"
:src="elm.avatarSrc"
alt=""
/>
<div class="info">
<h5 class="mb-1">{{ elm.name }}</h5>
<p class="mb-0">{{ elm.role }}</p>
</div>
</div>
</blockquote>
</SwiperSlide>
</Swiper>
<div class="swiper-controls">
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal spb12"
></div>
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
import { testimonials5 } from "~/data/testimonials";
</script>
<style lang="scss" scoped></style>We are proud of our works
We bring solutions to make life easier for our customers.
0 +
Completed Projects
0 x
Revenue Growth
0 %
Customer Satisfaction
“Cum sociis natoque penatibus et magnis dis parturient montes.”
Coriss Ambady
Financial Analyst
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.”
Cory Zamora
Marketing Specialist
“Donec id elit non porta gravida at eget metus. Duis mollis est commodo luctus, nisi erat porttitor.”
Barclay Widerski
Sales Specialist
“Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo pellentesque ornare.”
Jackie Sanders
Investment Planner
<template>
<section id="snippet-13" class="wrapper bg-light wrapper-border">
<div class="container-card pt-14 pt-md-16">
<div
class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 pb-15"
style="background-image: url("/assets/img/photos/bg22.png")"
>
<div class="card-body py-14 px-0">
<div class="container">
<div class="row gx-lg-8 gx-xl-12 gy-10 gy-lg-0">
<div class="col-lg-4 text-center text-lg-start">
<h3 class="display-4 mb-3 pe-xxl-15">
We are proud of our works
</h3>
<p class="lead fs-lg mb-0 pe-xxl-10">
We bring solutions to make life easier for our customers.
</p>
</div>
<!-- /column -->
<div class="col-lg-8 mt-lg-2">
<div
class="row align-items-center counter-wrapper gy-6 text-center"
>
<div v-for="(elm, i) in features" :key="i" class="col-md-4">
<nuxt-img
:src="elm.iconSrc"
class="icon-svg icon-svg-sm solid-duo text-grape-fuchsia mb-3"
alt=""
/>
<h3 class="counter">
<CommonCounter
parentClass=""
:min="0"
:max="elm.value"
:time="1500"
/>
<!-- Component for counting number with intersetion observer from omponents>common>counter -->
{{ elm.adjective }}
</h3>
<p class="mb-0">{{ elm.description }}</p>
</div>
<!--/column -->
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.container-card -->
<div class="container">
<div class="grid mb-15">
<div class="row isotope gy-6 mt-n18">
<div
v-for="(elm, i) in testimonials"
:key="i"
class="item col-md-6 col-xl-3"
>
<div class="card shadow-lg card-border-bottom border-soft-primary">
<div class="card-body">
<blockquote class="icon mb-0">
<p>
{{ elm.quote }}
</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">{{ elm.name }}</h5>
<p class="mb-0">{{ elm.role }}</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<!--/column -->
</div>
<!-- /.row -->
</div>
<!-- /.grid-view -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { features, testimonials } from "~/data/testimonials";
</script>
<style lang="scss" scoped></style>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Coriss Ambady
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Cory Zamora
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Nikolas Brooten
<template>
<section id="snippet-14" class="wrapper bg-light">
<div
class="wrapper image-wrapper bg-image bg-overlay text-white mb-12 mb-md-14"
style="background-image: url("/assets/img/photos/bg32.jpg")"
>
<div class="container py-14 py-md-16 text-center">
<i class="icn-flower text-white fs-30 opacity-50"></i>
<div class="row mt-3">
<div class="col-xl-9 col-xxl-8 mx-auto">
<div
class="swiper-container dots-light dots-closer mb-6"
data-margin="30"
data-dots="true"
>
<Swiper
:space-between="30"
:pagination="{ el: '.spb14', clickable: true }"
:modules="[Pagination]"
:grab-cursor="true"
:breakpoints="{
500: { slidesPerView: 1 },
768: { slidesPerView: 1 },
1024: { slidesPerView: 1 },
1200: { slidesPerView: 1 },
}"
>
<SwiperSlide v-for="(elm, i) in testimonials3" :key="i">
<blockquote class="border-0 fs-24 mb-0">
<p>
{{ elm.quote }}
</p>
<div class="blockquote-details justify-content-center">
<div class="info p-0">
<h6 class="mb-0 text-white">{{ elm.name }}</h6>
</div>
</div>
</blockquote>
</SwiperSlide>
</Swiper>
<div class="swiper-controls">
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal spb14"
></div>
</div>
<!--/.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /section -->
<!-- /.container -->
</section>
</template>
<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
import { testimonials3 } from "~/data/testimonials";
</script>
<style lang="scss" scoped></style>Happy Customers
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis sed posuere.”
Coriss Ambady
Financial Analyst
“Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus.”
Cory Zamora
Marketing Specialist
“Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida.”
Nikolas Brooten
Sales Manager
“Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus posuere consectetur.”
Coriss Ambady
Financial Analyst
“Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque.”
Jackie Sanders
Investment Planner
“Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna.”
Laura Widerski
Sales Specialist
<template>
<section id="snippet-15" class="wrapper bg-light wrapper-border">
<div
class="wrapper image-wrapper bg-image bg-overlay mb-12 mb-md-14"
style="background-image: url("/assets/img/photos/bg35.jpg")"
>
<div class="container py-15 py-md-17">
<h2 class="display-5 mb-4 text-center text-white">Happy Customers</h2>
<div class="swiper-container dots-closer dots-light dots-light-75">
<Swiper
:pagination="{ el: '.spb16', clickable: true }"
:modules="[Pagination]"
:grab-cursor="true"
:breakpoints="{
500: { slidesPerView: 1 },
768: { slidesPerView: 2 },
1024: { slidesPerView: 3 },
1200: { slidesPerView: 3 },
}"
>
<SwiperSlide v-for="(elm, i) in testimonials2" :key="i">
<div class="item-inner">
<div class="card border-0 bg-white-900">
<div class="card-body">
<span class="ratings five mb-3"></span>
<blockquote class="border-0 mb-0">
<p>{{ elm.quote }}</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-0">{{ elm.name }}</h5>
<p class="mb-0">{{ elm.role }}</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</SwiperSlide>
</Swiper>
<div class="swiper-controls">
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal spb16"
></div>
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.container -->
</div>
<!-- /.wrapper -->
<!-- /.container -->
</section>
</template>
<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
import { testimonials2 } from "~/data/testimonials";
</script>
<style lang="scss" scoped></style>Happy Customers
Don't take our word for it. See what customers are saying about us.
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Coriss Ambady
Financial Analyst
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Cory Zamora
Marketing Specialist
“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”
Nikolas Brooten
Sales Manager
<template>
<section id="snippet-16" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="card bg-soft-primary rounded-4">
<div class="card-body py-14 px-lg-0">
<div class="row text-center">
<div class="col-lg-8 offset-lg-2">
<h2 class="fs-16 text-uppercase text-primary mb-3">
Happy Customers
</h2>
<h3 class="display-4 mb-10 px-xxl-10">
Don't take our word for it. See what customers are saying about
us.
</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row gx-lg-8 gx-xl-12 align-items-center">
<div class="col-lg-5 ms-auto col-xl-4 d-none d-lg-flex">
<div class="img-mask mask-3">
<nuxt-img
src="/assets/img/photos/about28.jpg"
srcset="/assets/img/photos/about28@2x.jpg 2x"
alt=""
/>
</div>
</div>
<!--/column -->
<div class="col-lg-6 col-xl-6 col-xxl-5 me-auto">
<div class="swiper-container dots-start dots-closer mb-6">
<Swiper
:space-between="30"
:pagination="{ el: '.spb17', clickable: true }"
:modules="[Pagination]"
:grab-cursor="true"
:breakpoints="{
500: { slidesPerView: 1 },
768: { slidesPerView: 1 },
1024: { slidesPerView: 1 },
1200: { slidesPerView: 1 },
}"
>
<SwiperSlide v-for="(elm, i) in testimonials3" :key="i">
<span class="ratings five mb-3"></span>
<blockquote class="border-0 fs-lg mb-0">
<p>
{{ elm.quote }}
</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">{{ elm.name }}</h5>
<p class="mb-0">{{ elm.role }}</p>
</div>
</div>
</blockquote>
</SwiperSlide>
</Swiper>
<div class="swiper-controls">
<div
class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal spb17"
></div>
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
import { testimonials3 } from "~/data/testimonials";
</script>
<style lang="scss" scoped></style>
Happy Customers
Don't take our word for it. See what customers are saying about us.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.
Coriss Ambady
Financial Analyst
Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
Cory Zamora
Marketing Specialist
Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui consectetur adipiscing elit.
Nikolas Brooten
Sales Manager
Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero condimentum ac laoreet vitae.
Coriss Ambady
Financial Analyst
Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio dui. Nulla vitae elit libero a pharetra.
Jackie Sanders
Investment Planner
Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Laura Widerski
Sales Specialist
<template>
<section id="snippet-17" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row">
<div
class="col-md-11 col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center position-relative"
>
<nuxt-img
src="/assets/img/svg/doodle1.svg"
class="h-9 position-absolute d-none d-lg-block"
style="top: 2%; left: 9%"
alt=""
/>
<nuxt-img
src="/assets/img/svg/doodle10.svg"
class="h-7 position-absolute d-none d-lg-block"
style="top: -45%; left: -17%"
alt=""
/>
<nuxt-img
src="/assets/img/svg/doodle11.svg"
class="h-13 position-absolute d-none d-lg-block"
style="top: -40%; right: -15%"
alt=""
/>
<h2 class="fs-16 text-uppercase text-muted mb-3">Happy Customers</h2>
<h3 class="display-3 mb-11 px-xl-10 px-xxl-13">
Don't take our word for it. See what
<span class="text-gradient gradient-7">customers</span> are saying
about us.
</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="grid">
<div ref="isotopeContainer" class="row isotope gy-6">
<div
v-for="(elm, i) in testimonials4"
:key="i"
class="item col-md-6 col-xl-4"
>
<div :class="`card shadow-none rounded-xl ${elm.bg}`">
<div class="card-body">
<blockquote class="icon mb-0">
<p>
{{ elm.quote }}
</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">{{ elm.name }}</h5>
<p class="mb-0">{{ elm.role }}</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<!--/column -->
</div>
<!-- /.row -->
</div>
<!-- /.grid-view -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import imagesLoaded from 'imagesloaded';
import { testimonials4 } from "~/data/testimonials";
const isotopeContainer = ref();
const isotope = ref();
const initIsotop = async () => {
const Isotope = (await import("isotope-layout")).default;
// Initialize Isotope in the mounted hook
isotope.value = new Isotope(isotopeContainer.value, {
itemSelector: ".item",
layoutMode: "masonry", // or 'fitRows', depending on your layout needs
});
imagesLoaded(isotopeContainer.value).on(
"progress",
function (instance, image) {
// Trigger Isotope layout
isotope.value.layout();
}
);
};
onMounted(() => {
initIsotop();
});
</script>
<style lang="scss" scoped></style>Don't take our word for it. See what customers are saying about us.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.
Coriss Ambady
Financial Analyst
Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
Cory Zamora
Marketing Specialist
Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui consectetur adipiscing elit.
Nikolas Brooten
Sales Manager
Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien. Aenean tortor libero condimentum ac laoreet vitae.
Coriss Ambady
Financial Analyst
Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio dui. Nulla vitae elit libero a pharetra.
Jackie Sanders
Investment Planner
Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Laura Widerski
Sales Specialist
<template>
<section id="snippet-18" class="wrapper bg-light wrapper-border">
<div class="pt-15 pt-md-17 pb-21 pb-md-23">
<section class="section-frame mx-xxl-11">
<div
class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500 section-frame-wrapper"
style="background-image: url("/assets/img/photos/bg23.png")"
>
<div class="container py-16 py-md-18">
<div class="row">
<div class="col-md-11 col-lg-10 col-xl-9 mx-auto text-center">
<h3 class="display-2 mb-10 px-xxl-10">
Don't take our word for it. See what customers are saying
about us.
</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row">
<div class="grid col-md-11 mx-auto mb-lg-n23">
<div class="row isotope gy-6" ref="isotopeContainer">
<div
v-for="(elm, i) in testimonials4"
:key="i"
class="item col-md-6 col-xl-4"
>
<div class="card shadow-lg">
<div class="card-body">
<span class="ratings five mb-3"></span>
<blockquote class="icon mb-0">
<p>
{{ elm.quote }}
</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">{{ elm.name }}</h5>
<p class="mb-0">{{ elm.role }}</p>
</div>
</div>
</blockquote>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
</div>
<!-- /.row -->
</div>
<!-- /.grid-view -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.wrapper -->
</section>
<!-- /section -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup>
import imagesLoaded from 'imagesloaded';
import { testimonials4 } from "~/data/testimonials";
const isotopeContainer = ref();
const isotope = ref();
const initIsotop = async () => {
const Isotope = (await import("isotope-layout")).default;
// Initialize Isotope in the mounted hook
isotope.value = new Isotope(isotopeContainer.value, {
itemSelector: ".item",
layoutMode: "masonry", // or 'fitRows', depending on your layout needs
});
imagesLoaded(isotopeContainer.value).on(
"progress",
function (instance, image) {
// Trigger Isotope layout
isotope.value.layout();
}
);
};
onMounted(() => {
initIsotop();
});
</script>
<style lang="scss" scoped></style>Think unique and be creative. Make a difference with Sandbox.
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox Nuxtjs