# Testimonials

## Component #1

- Preview
- HTML

> " I'm absolutely floored by the level of care and attention to detail the team at Htmlstream have put into this theme and for one can guarantee that I will be a return customer. "

Lewis Senior Director of Operations at Mailchimp

                    <!-- Testimonials -->
                    <div class="container content-space-2 content-space-lg-3">
                      <div class="row align-items-md-center">
                        <div class="col-md-5 d-none d-md-block">
                          <img class="img-fluid rounded-2" src="../assets/img/400x500/img31.jpg" alt="Image Description">
                        </div>
                        <!-- End Col -->

                        <div class="col-md-7">
                          <!-- Blockquote -->
                          <figure class="pe-md-7">
                            <div class="mb-4">
                              <img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/mailchimp-primary.svg" alt="Image Description">
                            </div>

                            <blockquote class="blockquote blockquote-lg">" I'm absolutely floored by the level of care and attention to detail the team at Htmlstream have put into this theme and for one can guarantee that I will be a return customer. "</blockquote>

                            <figcaption class="blockquote-footer">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0 d-md-none">
                                  <img class="avatar avatar-circle" src="../assets/img/160x160/img4.jpg" alt="Image Description">
                                </div>
                                <div class="flex-grow-1 ms-3 ms-md-0">
                                  Lewis
                                  <span class="blockquote-footer-source">Senior Director of Operations at Mailchimp</span>
                                </div>
                              </div>
                            </figcaption>
                          </figure>
                          <!-- End Blockquote -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Testimonials -->

## Component #2

- Preview
- HTML

> With Front, we're able to easily track our performance in full detail. It's become an essential tool for us to grow and engage with our audience.

Christina Kray Social Media Executive, Mailchimp

                    <!-- Testimonials -->
                    <div class="overflow-hidden">
                      <div class="container content-space-b-2">
                        <div class="position-relative">
                          <div class="bg-light text-center rounded-2 p-4 p-md-7">
                            <img class="avatar avatar-lg avatar-4x3 mx-auto mb-4" src="../assets/svg/brands/amazon-primary.svg" alt="SVG Logo">

                            <!-- Blockquote -->
                            <figure class="w-md-80 w-lg-50 mx-md-auto">
                              <blockquote class="blockquote">With Front, we're able to easily track our performance in full detail. It's become an essential tool for us to grow and engage with our audience.</blockquote>

                              <figcaption class="blockquote-footer">
                                Christina Kray
                                <span class="blockquote-footer-source">Social Media Executive, Mailchimp</span>
                              </figcaption>
                            </figure>
                            <!-- End Blockquote -->
                          </div>

                          <!-- SVG Shape -->
                          <div class="position-absolute bottom-0 start-0 w-100" style="max-width: 7rem;">
                            <div class="mb-n7 ms-n7">
                              <img class="img-fluid" src="../assets/svg/components/dots.svg" alt="Image Description">
                            </div>
                          </div>
                          <!-- End SVG Shape -->
                        </div>
                      </div>
                    </div>
                    <!-- End Testimonials -->

## Component #3

- Preview
- HTML
- CSS
- JS

> “ It has many landing page variations to choose from, which one is always a big advantage. ”

Lida Reidy Project Manager

> “ I just wanted to say that I'm very happy with my purchase of Front so far. The documentation is outstanding - clear and detailed. ”

Philip Product Manager

> “ This is a beautiful template with exciting components and endless features. ”

Christina Kray HR Director

                    <!-- Testimonials -->
                    <div class="container content-space-1 content-space-md-3">
                      <!-- Swiper Slider -->
                      <div class="js-swiper-single-testimonials swiper">
                        <div class="swiper-wrapper">
                          <!-- Slide -->
                          <div class="swiper-slide">
                            <!-- Blockquote -->
                            <figure class="w-md-65 text-center mx-md-auto">
                              <div class="mb-3">
                                <img class="avatar avatar-xl avatar-circle" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                              </div>

                              <blockquote class="blockquote">“ It has many landing page variations to choose from, which one is always a big advantage. ”</blockquote>

                              <figcaption class="blockquote-footer mb-5">
                                Lida Reidy
                                <span class="blockquote-footer-source">Project Manager</span>
                              </figcaption>

                              <img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/mailchimp-primary.svg" alt="Logo">
                            </figure>
                            <!-- End Blockquote -->
                          </div>
                          <!-- End Slide -->

                          <!-- Slide -->
                          <div class="swiper-slide">
                            <!-- Blockquote -->
                            <figure class="w-md-65 text-center mx-md-auto">
                              <div class="mb-3">
                                <img class="avatar avatar-xl avatar-circle" src="../assets/img/160x160/img4.jpg" alt="Image Description">
                              </div>

                              <blockquote class="blockquote">“ I just wanted to say that I'm very happy with my purchase of Front so far. The documentation is outstanding - clear and detailed. ”</blockquote>

                              <figcaption class="blockquote-footer mb-5">
                                Philip
                                <span class="blockquote-footer-source">Product Manager</span>
                              </figcaption>

                              <img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/mailchimp-primary.svg" alt="Logo">
                            </figure>
                            <!-- End Blockquote -->
                          </div>
                          <!-- End Slide -->

                          <!-- Slide -->
                          <div class="swiper-slide">
                            <!-- Blockquote -->
                            <figure class="w-md-65 text-center mx-md-auto">
                              <div class="mb-3">
                                <img class="avatar avatar-xl avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                              </div>

                              <blockquote class="blockquote">“ This is a beautiful template with exciting components and endless features. ”</blockquote>

                              <figcaption class="blockquote-footer mb-5">
                                Christina Kray
                                <span class="blockquote-footer-source">HR Director</span>
                              </figcaption>

                              <img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/capsule-primary.svg" alt="Logo">
                            </figure>
                            <!-- End Blockquote -->
                          </div>
                          <!-- End Slide -->
                        </div>

                        <!-- Pagination -->
                        <div class="js-swiper-single-testimonials-pagination swiper-pagination"></div>
                      </div>
                      <!-- End Swiper Slider -->
                    </div>
                    <!-- End Testimonials -->

                    <link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.min.css">

                    <!-- JS Implementing Plugins -->
                    <script src="../node_modules/swiper/swiper-bundle.min.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      (function() {
                        // INITIALIZATION OF SWIPER
                        // =======================================================
                        var swiper = new Swiper('.js-swiper-single-testimonials', {
                          pagination: {
                            el: '.js-swiper-single-testimonials-pagination',
                            clickable: true,
                          },
                        });
                      })()
                    </script>

## Component #4

- Preview
- HTML

Case study

> "I am absolutely floored by the level of care and attention to detail the team at Htmlstream have put into this theme and for one can guarantee that I will be a return customer. I've had my eye on this for quite some time but I've only recently be able to get hands on, with it."

Luisa Head of IT department

                    <!-- Testimonials -->
                    <div class="overflow-hidden">
                      <div class="position-relative bg-dark rounded-2 mx-3 mx-md-10">
                        <div class="container content-space-1 content-space-md-2 content-space-lg-3 position-relative zi-2">
                          <!-- Blockquote -->
                          <figure class="w-md-75 text-center mx-md-auto">
                            <div class="mb-3">
                              <span class="text-cap text-white-70">Case study</span>
                              <img class="avatar avatar-xl avatar-4x3 mb-5" src="../assets/svg/brands/mailchimp-white.svg" alt="Logo">
                            </div>

                            <blockquote class="blockquote blockquote-light mb-5">"I am absolutely floored by the level of care and attention to detail the team at Htmlstream have put into this theme and for one can guarantee that I will be a return customer. I've had my eye on this for quite some time but I've only recently be able to get hands on, with it."</blockquote>

                            <img class="avatar avatar-circle" src="../assets/img/160x160/img10.jpg" alt="Image Description">

                            <figcaption class="blockquote-footer blockquote-light">
                              Luisa
                              <span class="blockquote-footer-source">Head of IT department</span>
                            </figcaption>
                          </figure>
                          <!-- End Blockquote -->

                          <!-- SVG Quote -->
                          <figure class="position-absolute top-50 start-50 translate-middle zi-n1 mb-10">
                            <svg width="400" height="400" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M13.5001 5.84998C9.0001 7.64998 5.4001 12.15 5.4001 16.2C5.4001 17.1 5.4001 18 5.8501 18.45C6.7501 17.55 8.1001 17.1 9.9001 17.1C13.5001 17.1 16.6501 19.8 16.6501 23.85C16.6501 27.9 13.5001 30.6 9.9001 30.6C6.3001 31.05 4.5001 29.7 3.1501 27.45C1.8001 25.2 1.3501 22.05 1.3501 20.25C1.3501 13.05 4.9501 7.19998 12.6001 3.59998L13.5001 5.84998ZM31.9501 5.84998C27.4501 7.64998 23.8501 12.15 23.8501 16.2C23.8501 17.1 23.8501 18 24.3001 18.45C25.2001 17.55 26.5501 17.1 28.3501 17.1C31.9501 17.1 35.1001 19.8 35.1001 23.85C35.1001 27.9 31.9501 30.6 28.3501 30.6C25.2001 30.6 23.4001 29.25 22.0501 27C19.8001 25.2 19.8001 22.05 19.8001 20.25C19.8001 13.05 23.4001 7.19998 31.0501 3.59998L31.9501 5.84998Z" fill="white" opacity=".025"/>
                            </svg>
                          </figure>
                          <!-- End SVG Quote -->

                          <!-- SVG Shape -->
                          <figure class="position-absolute top-0 start-0 mt-10 ms-10">
                            <svg width="70" height="70" opacity=".5" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M60.6655 74.9992C80.4557 74.9992 96.4988 58.9561 96.4988 39.1659C96.4988 19.3757 80.4557 3.33252 60.6655 3.33252C40.8753 3.33252 24.8322 19.3757 24.8322 39.1659C24.8322 58.9561 40.8753 74.9992 60.6655 74.9992Z" stroke="white" stroke-width="5" stroke-miterlimit="10"/>
                              <path d="M158.5 197.5C168.165 197.5 176 189.665 176 180C176 170.335 168.165 162.5 158.5 162.5C148.835 162.5 141 170.335 141 180C141 189.665 148.835 197.5 158.5 197.5Z" stroke="white" stroke-width="5" stroke-miterlimit="10"/>
                            </svg>
                          </figure>
                          <!-- End SVG Shape -->

                          <!-- SVG Shape -->
                          <figure class="position-absolute bottom-0 end-0 mb-n7 me-n7" style="width: 10rem;">
                            <img class="img-fluid" src="../assets/svg/components/dots.svg" alt="Image Description">
                          </figure>
                          <!-- End SVG Shape -->
                        </div>
                      </div>
                    </div>
                    <!-- End Testimonials -->

## Component #5

- Preview
- HTML

> " The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you! "

Tom Lowry CEO | Hubspot

                    <!-- Testimonials -->
                    <div class="overflow-hidden">
                      <div class="container content-space-2 content-space-lg-3">
                        <div class="row justify-content-lg-between align-items-md-center">
                          <div class="col-md-6 order-md-2 mb-10 mb-md-0">
                            <div class="position-relative">
                              <img class="img-fluid rounded-2" src="../assets/img/900x900/img5.jpg" alt="Image Description">

                              <!-- SVG Shape -->
                              <figure class="position-absolute top-0 start-0 zi-n1 mt-n7 ms-n7" style="width: 12rem;">
                                <img class="img-fluid" src="../assets/svg/components/dots-lg.svg" alt="SVG">
                              </figure>
                              <!-- End SVG Shape -->

                              <!-- SVG Shape -->
                              <figure class="position-absolute bottom-0 end-0 zi-n1 mb-n7 me-n7" style="width: 12rem;">
                                <img class="img-fluid" src="../assets/svg/components/dots-lg.svg" alt="SVG">
                              </figure>
                              <!-- End SVG Shape -->
                            </div>
                          </div>

                          <div class="col-md-6 col-lg-5 order-md-1">
                            <div class="mb-4">
                              <img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/hubspot-primary.svg" alt="Image Description">
                            </div>

                            <!-- Blockquote -->
                            <figure>
                              <blockquote class="blockquote blockquote-lg">" The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you! "</blockquote>

                              <figcaption class="blockquote-footer">
                                Tom Lowry
                                <span class="blockquote-footer-source">CEO | Hubspot</span>
                              </figcaption>
                            </figure>
                            <!-- End Blockquote -->
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End Testimonials -->

## Component #6

- Preview
- HTML

> “ I just wanted to say that I'm very happy with my purchase of Space so far. The documentation is outstanding - clear and detailed. ”

Philip Product Manager | Mailchimp

                    <!-- Testimonials -->
                    <div class="container content-space-2 content-space-lg-3">
                      <div class="text-center mb-5">
                        <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/illustrations/oc-person-3.svg" alt="Illustration">
                      </div>

                      <!-- Blockquote -->
                      <figure class="w-md-75 text-center mx-md-auto">
                        <blockquote class="blockquote">“ I just wanted to say that I'm very happy with my purchase of Space so far. The documentation is outstanding - clear and detailed. ”</blockquote>

                        <figcaption class="blockquote-footer text-center">
                          Philip
                          <span class="blockquote-footer-source">Product Manager | Mailchimp</span>
                        </figcaption>
                      </figure>
                      <!-- End Blockquote -->
                    </div>
                    <!-- End Testimonials -->

## Component #7

- Preview
- HTML

## Front worklfow is loved by users worldwide

With Front Pay, you can check out across the web and in apps without having to enter any payment information.

##### Christina Kray

Business Manager

From boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.

##### Andrea Gardy

CEO at Slack

I love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.

##### Philip Williams

Front Pay user

                    <!-- Testimonials -->
                    <div class="container content-space-2 content-space-lg-3">
                      <!-- Heading -->
                      <div class="w-lg-50 mb-5 mb-md-9">
                        <h2>Front worklfow is loved by users worldwide</h2>
                      </div>
                      <!-- End Heading -->

                      <div class="row">
                        <div class="col-sm-6 col-lg-4 mb-4 mb-lg-0">
                          <!-- Card -->
                          <div class="card h-100">
                            <div class="card-body">
                              <!-- Rating -->
                              <div class="d-flex gap-1 mb-2">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              </div>
                              <!-- End Rating -->

                              <div class="mb-auto">
                                <p class="card-text">With Front Pay, you can check out across the web and in apps without having to enter any payment information.</p>
                              </div>
                            </div>

                            <div class="card-footer pt-0">
                              <!-- Media -->
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <img class="avatar avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                  <h5 class="card-title mb-0">Christina Kray</h5>
                                  <p class="card-text small">Business Manager</p>
                                </div>
                              </div>
                              <!-- End Media -->
                            </div>
                          </div>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-6 col-lg-4 mb-4 mb-lg-0">
                          <!-- Card -->
                          <div class="card h-100">
                            <div class="card-body">
                              <!-- Rating -->
                              <div class="d-flex gap-1 mb-2">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="16">
                              </div>
                              <!-- End Rating -->

                              <div class="mb-auto">
                                <p class="card-text">From boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.</p>
                              </div>
                            </div>

                            <div class="card-footer pt-0">
                              <!-- Media -->
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <img class="avatar avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                  <h5 class="card-title mb-0">Andrea Gardy</h5>
                                  <p class="card-text small">CEO at Slack</p>
                                </div>
                              </div>
                              <!-- End Media -->
                            </div>
                          </div>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-6 col-lg-4">
                          <!-- Card -->
                          <div class="card h-100">
                            <div class="card-body">
                              <!-- Rating -->
                              <div class="d-flex gap-1 mb-2">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              </div>
                              <!-- End Rating -->

                              <div class="mb-auto">
                                <p class="card-text">I love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.</p>
                              </div>
                            </div>

                            <div class="card-footer pt-0">
                              <!-- Media -->
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <img class="avatar avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                  <h5 class="card-title mb-0">Philip Williams</h5>
                                  <p class="card-text small">Front Pay user</p>
                                </div>
                              </div>
                              <!-- End Media -->
                            </div>
                          </div>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Testimonials -->

## Component #8

- Preview
- HTML

## Loved by business and individuals across the globe.

With Front Pay, you can check out across the web and in apps without having to enter any payment information.

##### Christina Kray

Business Manager

From boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.

##### Andrea Gardy

CEO at Slack

I love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.

##### Philip Williams

Front Pay user

                    <!-- Testimonials -->
                    <div class="border-top">
                      <div class="container content-space-2 content-space-lg-3">
                        <!-- Heading -->
                        <div class="w-lg-50 mb-5 mb-md-9">
                          <h2>Loved by business and individuals across the globe.</h2>
                        </div>
                        <!-- End Heading -->

                        <div class="row">
                          <div class="col-sm-6 col-lg-4">
                            <!-- Card -->
                            <div class="card shadow-none">
                              <div class="card-body">
                                <!-- Rating -->
                                <div class="d-flex gap-1 mb-2">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                </div>
                                <!-- End Rating -->

                                <div class="mb-auto">
                                  <p class="card-text">With Front Pay, you can check out across the web and in apps without having to enter any payment information.</p>
                                </div>
                              </div>

                              <div class="card-footer pt-0">
                                <!-- Media -->
                                <div class="d-flex align-items-center">
                                  <div class="flex-shrink-0">
                                    <img class="avatar avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
                                  </div>
                                  <div class="flex-grow-1 ms-3">
                                    <h5 class="card-title mb-0">Christina Kray</h5>
                                    <p class="card-text small">Business Manager</p>
                                  </div>
                                </div>
                                <!-- End Media -->
                              </div>
                            </div>
                            <!-- End Card -->
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-6 col-lg-4">
                            <!-- Card -->
                            <div class="card bg-primary">
                              <div class="card-body">
                                <!-- Rating -->
                                <div class="d-flex gap-1 mb-2">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="16">
                                </div>
                                <!-- End Rating -->

                                <div class="mb-auto">
                                  <p class="card-text text-white">From boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.</p>
                                </div>
                              </div>

                              <div class="card-footer pt-0">
                                <!-- Media -->
                                <div class="d-flex align-items-center">
                                  <div class="flex-shrink-0">
                                    <img class="avatar avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                                  </div>
                                  <div class="flex-grow-1 ms-3">
                                    <h5 class="card-title text-white mb-0">Andrea Gardy</h5>
                                    <p class="card-text small text-white-70">CEO at Slack</p>
                                  </div>
                                </div>
                                <!-- End Media -->
                              </div>
                            </div>
                            <!-- End Card -->
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-6 col-lg-4">
                            <!-- Card -->
                            <div class="card shadow-none">
                              <div class="card-body">
                                <!-- Rating -->
                                <div class="d-flex gap-1 mb-2">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                </div>
                                <!-- End Rating -->

                                <div class="mb-auto">
                                  <p class="card-text">I love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.</p>
                                </div>
                              </div>

                              <div class="card-footer pt-0">
                                <!-- Media -->
                                <div class="d-flex align-items-center">
                                  <div class="flex-shrink-0">
                                    <img class="avatar avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                                  </div>
                                  <div class="flex-grow-1 ms-3">
                                    <h5 class="card-title mb-0">Philip Williams</h5>
                                    <p class="card-text small">Front Pay user</p>
                                  </div>
                                </div>
                                <!-- End Media -->
                              </div>
                            </div>
                            <!-- End Card -->
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                    </div>
                    <!-- End Testimonials -->

## Component #9

- Preview
- HTML

> " The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you! "

Christina Kray CEO | Hubspot

                    <!-- Testimonials -->
                    <div class="overflow-hidden">
                      <div class="container content-space-2 content-space-lg-3">
                        <div class="row justify-content-lg-center align-items-md-center">
                          <div class="col-md-5 mb-10 mb-md-0">
                            <div class="position-relative">
                              <img class="img-fluid rounded-2" src="../assets/img/800x900/img1.jpg" alt="Image Description">

                              <!-- SVG Shape -->
                              <div class="position-absolute bottom-0 start-0 zi-n1 mb-n7 ms-n7" style="width: 12rem;">
                                <img class="img-fluid" src="../assets/svg/components/dots-lg.svg" alt="Image Description">
                              </div>
                              <!-- End SVG Shape -->
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-md-6 col-lg-5">
                            <div class="ps-md-6">
                              <div class="mb-4">
                                <img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/hubspot-dark.svg" alt="Image Description">
                              </div>

                              <!-- Blockquote -->
                              <figure>
                                <blockquote class="blockquote blockquote-lg">" The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you! "</blockquote>

                                <figcaption class="blockquote-footer">
                                  Christina Kray
                                  <span class="blockquote-footer-source">CEO | Hubspot</span>
                                </figcaption>
                              </figure>
                              <!-- End Blockquote -->
                            </div>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                    </div>
                    <!-- End Testimonials -->

## Component #10

- Preview
- HTML

## Reviews

Over 40,000 happy customers. Be the next one.

> " With Front Real Estate we can be self-reliant, like cooking for ourselves rather than eating out every night. You feel like part of the community rather than a visitor. "

Christina Kray Happy customer

### See what other people are saying

#### 4.85 / 5.0 (2,594)

Read more reviews

                    <!-- Testimonials -->
                    <div class="overflow-hidden content-space-2 content-space-lg-3">
                      <!-- Heading -->
                      <div class="w-md-75 w-lg-50 text-center mx-md-auto mb-7">
                        <h2>Reviews</h2>
                        <p>Over 40,000 happy customers. Be the next one.</p>
                      </div>
                      <!-- End Heading -->

                      <div class="container">
                        <div class="row justify-content-center align-items-md-center mb-7">
                          <div class="col-11 col-md-6 col-lg-4 mb-5 mb-md-0 me-md-n9">
                            <!-- Card -->
                            <div class="card">
                              <div class="card-body">
                                <span class="svg-icon text-primary mb-3">

                                </span>

                                <!-- Blockquote -->
                                <figure>
                                  <blockquote class="blockquote blockquote-sm blockquote-left-border">" With Front Real Estate we can be self-reliant, like cooking for ourselves rather than eating out every night. You feel like part of the community rather than a visitor. "</blockquote>

                                  <figcaption class="blockquote-footer">
                                    <div class="d-flex align-items-center">
                                      <div class="flex-shrink-0">
                                        <img class="avatar avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                                      </div>
                                      <div class="flex-grow-1 ms-3">
                                        Christina Kray
                                        <span class="blockquote-footer-source">Happy customer</span>
                                      </div>
                                    </div>
                                  </figcaption>
                                </figure>
                                <!-- End Blockquote -->
                              </div>
                            </div>
                            <!-- End Card -->
                          </div>

                          <div class="col-md-6 mt-n9 mt-md-0">
                            <img class="img-fluid" src="../assets/img/900x900/img21.jpg" alt="Image Description">
                          </div>
                        </div>

                        <div class="text-center">
                          <h3>See what other people are saying</h3>

                          <!-- Rating -->
                          <div class="d-flex justify-content-center align-items-center gap-1 mb-4">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <h4 class="ms-2 mb-0">4.85 / 5.0 <span class="text-body small">(2,594)</span></h4>
                          </div>
                          <!-- End Rating -->

                          <a class="btn btn-primary px-5" href="#">Read more reviews <i class="bi-chevron-right small ms-1"></i></a>
                        </div>
                      </div>
                    </div>
                    <!-- End Testimonials -->

## Component #11

- Preview
- HTML

> " Save time and effort in your hiring journey. Front's simple and powerful tools let you source, screen, and hire faster. "

Anna Lowry HR Director | Capsule

## 59%

in budget saved on unconverting ads

## 27%

in time saved on campaign management

## 2.1x

more split tests and experiments

                    <!-- Testimonials -->
                    <div class="overflow-hidden gradient-x-three-sm-primary rounded-2 mx-md-10">
                      <div class="container content-space-2 content-space-lg-3">
                        <div class="row justify-content-center align-items-lg-center">
                          <div class="col-10 col-sm-8 col-lg-5 mb-10 mb-lg-0">
                            <div class="position-relative">
                              <img class="img-fluid rounded-2" src="../assets/img/900x900/img24.jpg" alt="Image Description">

                              <!-- SVG Shape -->
                              <div class="position-absolute top-0 start-0 zi-n1 mt-n6 ms-n7" style="width: 10rem;">
                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2" width="100" height="100">
                                  <circle fill="#FFC107" opacity=".7" cx="167.6" cy="167.6" r="130.1"/>
                                </svg>
                              </div>
                              <!-- End SVG Shape -->

                              <!-- SVG Shape -->
                              <div class="position-absolute bottom-0 end-0 zi-n1 mb-n6 me-n10" style="width: 10rem;">
                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2" width="120" height="120">
                                  <circle fill="none" stroke="#377dff" stroke-width="75" cx="167.6" cy="167.6" r="130.1"/>
                                </svg>
                              </div>
                              <!-- End SVG Shape -->
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-lg-7">
                            <div class="ps-lg-6">
                              <div class="mb-3">
                                <img class="avatar" src="../assets/svg/brands/capsule-icon.svg" alt="Image Description">
                              </div>

                              <!-- Blockquote -->
                              <figure class="mb-5">
                                <blockquote class="blockquote blockquote-lg">" Save time and effort in your hiring journey. Front's simple and powerful tools let you source, screen, and hire faster. "</blockquote>

                                <figcaption class="blockquote-footer">
                                  Anna Lowry
                                  <span class="blockquote-footer-source">HR Director | Capsule</span>
                                </figcaption>
                              </figure>
                              <!-- End Blockquote -->

                              <div class="row">
                                <div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
                                  <h2 class="text-primary mb-1">59%</h2>
                                  <p class="small mb-0">in budget saved on unconverting ads</p>
                                </div>
                                <!-- End Col -->

                                <div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
                                  <h2 class="text-primary mb-1">27%</h2>
                                  <p class="small mb-0">in time saved on campaign management</p>
                                </div>
                                <!-- End Col -->

                                <div class="col-sm-6 col-md-4">
                                  <h2 class="text-primary mb-1">2.1x</h2>
                                  <p class="small mb-0">more split tests and experiments</p>
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->
                            </div>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                    </div>
                    <!-- End Testimonials -->

## Component #12

- Preview
- HTML

#### What candidates say about the interview process at Capsule

> " My personal details, like, full name, location, and phone numbers. "

Shared on September 9, 2020 Christina Kray

> " What my skills are and what I can offer to them. "

Shared on March 24, 2020 Brian McManus

> " If I know how to do certain job functions. "

Shared on June 2, 2020 Max Walters

                    <!-- Card Grid -->
                    <div id="interview-section" class="container">
                      <div class="mb-4">
                        <h4>What candidates say about the interview process at Capsule</h4>
                      </div>

                      <div class="row">
                        <div class="col-md-6 col-lg-4 mb-5">
                          <!-- Blockquote -->
                          <div class="d-flex">
                            <div class="flex-shrink-0">
                              <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                            </div>
                            <div class="flex-grow-1 ms-3">
                              <blockquote class="blockquote-left-border blockquote-sm">" My personal details, like, full name, location, and phone numbers. "</blockquote>
                              <div class="blockquote-footer blockquote-sm">
                                <span class="blockquote-footer-source">Shared on September 9, 2020</span>
                                Christina Kray
                              </div>
                            </div>
                          </div>
                          <!-- End Blockquote -->
                        </div>
                        <!-- End Col -->

                        <div class="col-md-6 col-lg-4 mb-5">
                          <!-- Blockquote -->
                          <div class="d-flex">
                            <div class="flex-shrink-0">
                              <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                            </div>
                            <div class="flex-grow-1 ms-3">
                              <blockquote class="blockquote-left-border blockquote-sm">" What my skills are and what I can offer to them. "</blockquote>
                              <div class="blockquote-footer blockquote-sm">
                                <span class="blockquote-footer-source">Shared on March 24, 2020</span>
                                Brian McManus
                              </div>
                            </div>
                          </div>
                          <!-- End Blockquote -->
                        </div>
                        <!-- End Col -->

                        <div class="col-md-6 col-lg-4 mb-5">
                          <!-- Blockquote -->
                          <div class="d-flex">
                            <div class="flex-shrink-0">
                              <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                            </div>
                            <div class="flex-grow-1 ms-3">
                              <blockquote class="blockquote-left-border blockquote-sm">" If I know how to do certain job functions. "</blockquote>
                              <div class="blockquote-footer blockquote-sm">
                                <span class="blockquote-footer-source">Shared on June 2, 2020</span>
                                Max Walters
                              </div>
                            </div>
                          </div>
                          <!-- End Blockquote -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- Card Grid -->

## Component #13

- Preview
- HTML

> “ The best part about Front Course is the selection. You can find a course for anything you want to learn! Thank you Front Course! You've renewed my passion for learning and my dream of becoming a web developer. ”

Martin Happy customer

                    <!-- Testimonials -->
                    <div class="overflow-hidden content-space-2">
                      <div class="position-relative bg-light text-center rounded-2 zi-2 mx-3 mx-md-10">
                        <div class="container content-space-2">
                          <div class="text-center mb-5">
                            <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/illustrations/oc-person-2.svg" alt="Illustration">
                          </div>

                          <!-- Blockquote -->
                          <figure class="w-md-75 text-center mx-md-auto">
                            <blockquote class="blockquote mb-7">“ The best part about Front Course is the selection. You can find a course for anything you want to learn! Thank you Front Course! You've renewed my passion for learning and my dream of becoming a web developer. ”</blockquote>

                            <figcaption class="blockquote-footer mt-2">
                              Martin
                              <span class="blockquote-footer-source">Happy customer</span>
                            </figcaption>
                          </figure>
                          <!-- End Blockquote -->
                        </div>

                        <!-- SVG Shape -->
                        <figure class="position-absolute top-0 start-0 mt-10 ms-10">
                          <svg width="70" height="70" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M60.6655 74.9992C80.4557 74.9992 96.4988 58.9561 96.4988 39.1659C96.4988 19.3757 80.4557 3.33252 60.6655 3.33252C40.8753 3.33252 24.8322 19.3757 24.8322 39.1659C24.8322 58.9561 40.8753 74.9992 60.6655 74.9992Z" stroke="#97a4af" stroke-width="5" stroke-miterlimit="10"/>
                            <path d="M158.5 197.5C168.165 197.5 176 189.665 176 180C176 170.335 168.165 162.5 158.5 162.5C148.835 162.5 141 170.335 141 180C141 189.665 148.835 197.5 158.5 197.5Z" stroke="#97a4af" stroke-width="5" stroke-miterlimit="10"/>
                          </svg>
                        </figure>
                        <!-- End SVG Shape -->

                        <!-- SVG Shape -->
                        <figure class="position-absolute bottom-0 end-0 mb-n7 me-n7" style="width: 10rem;">
                          <img class="img-fluid" src="../assets/svg/components/dots.svg" alt="Image Description">
                        </figure>
                        <!-- End SVG Shape -->
                      </div>
                    </div>
                    <!-- End Testimonials -->