Mirrors/tailShape
1
0
Fork 0
mirror of https://github.com/istiyakaminsanto/tailShape.git synced 2025-12-17 15:17:02 +00:00
Code Issues Projects Releases Wiki Activity
Files
b02f32073abb529046974e127d413b51733c4299
tailShape/public/componets/testimonial/testimonial.html

1986 lines
117 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../../dist/tailshape.css">
<title>Testimonial </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- testimonial 1 start -->
<section class="section_divider">
<div>Testimonial 1</div>
</section>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<h1 class="text-3xl font-medium title-font text-gray-900 mb-12 text-center">Testimonials</h1>
<div class="flex flex-wrap -m-4">
<div class="p-4 md:w-1/2 w-full">
<div class="h-full bg-gray-100 p-8 rounded">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="block w-5 h-5 text-gray-400 mb-4" viewBox="0 0 975.036 975.036">
<path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"></path>
</svg>
<p class="leading-relaxed mb-6">Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90's microdosing. Tacos pinterest fanny pack venmo, post-ironic heirloom try-hard pabst authentic iceland.</p>
<a class="inline-flex items-center">
<img alt="testimonial" src="https://dummyimage.com/106x106" class="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center">
<span class="flex-grow flex flex-col pl-4">
<span class="title-font font-medium text-gray-900">Holden Caulfield</span>
<span class="text-gray-500 text-sm">UI DEVELOPER</span>
</span>
</a>
</div>
</div>
<div class="p-4 md:w-1/2 w-full">
<div class="h-full bg-gray-100 p-8 rounded">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="block w-5 h-5 text-gray-400 mb-4" viewBox="0 0 975.036 975.036">
<path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"></path>
</svg>
<p class="leading-relaxed mb-6">Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90's microdosing. Tacos pinterest fanny pack venmo, post-ironic heirloom try-hard pabst authentic iceland.</p>
<a class="inline-flex items-center">
<img alt="testimonial" src="https://dummyimage.com/107x107" class="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center">
<span class="flex-grow flex flex-col pl-4">
<span class="title-font font-medium text-gray-900">Alper Kamu</span>
<span class="text-gray-500 text-sm">DESIGNER</span>
</span>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- testimonial 1 end -->
<!-- testimonial 2 start -->
<section class="section_divider">
<div>Testimonial 2</div>
</section>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="xl:w-1/2 lg:w-3/4 w-full mx-auto text-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="inline-block w-8 h-8 text-gray-400 mb-8" viewBox="0 0 975.036 975.036">
<path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"></path>
</svg>
<p class="leading-relaxed text-lg">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware. Man bun next level coloring book skateboard four loko knausgaard. Kitsch keffiyeh master cleanse direct trade indigo juice before they sold out gentrify plaid gastropub normcore XOXO 90's pickled cindigo jean shorts. Slow-carb next level shoindigoitch ethical authentic, yr scenester sriracha forage franzen organic drinking vinegar.</p>
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-8 mb-6"></span>
<h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
<p class="text-gray-500">Senior Product Designer</p>
</div>
</div>
</section>
<!-- testimonial 2 end -->
<!-- testimonial 3 start -->
<section class="section_divider">
<div>Testimonial 3</div>
</section>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
<div class="h-full text-center">
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100" src="https://dummyimage.com/302x302">
<p class="leading-relaxed">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
<h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
<p class="text-gray-500">Senior Product Designer</p>
</div>
</div>
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
<div class="h-full text-center">
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100" src="https://dummyimage.com/300x300">
<p class="leading-relaxed">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
<h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">ALPER KAMU</h2>
<p class="text-gray-500">UI Develeoper</p>
</div>
</div>
<div class="lg:w-1/3 lg:mb-0 p-4">
<div class="h-full text-center">
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100" src="https://dummyimage.com/305x305">
<p class="leading-relaxed">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
<h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">HENRY LETHAM</h2>
<p class="text-gray-500">CTO</p>
</div>
</div>
</div>
</div>
</section>
<!-- testimonial 3 end -->
<!-- testimonial 4 start -->
<section class="section_divider">
<div>Testimonial 4</div>
</section>
<section class="flex items-center justify-center py-20 bg-white min-w-screen">
<div class="px-16 bg-white">
<div class="container flex flex-col items-start mx-auto lg:items-center">
<p class="relative flex items-start justify-start w-full text-lg font-bold tracking-wider text-purple-500 uppercase lg:justify-center lg:items-center">Don't just take our word for it</p>
<h2 class="relative flex items-start justify-start w-full max-w-3xl text-5xl font-bold lg:justify-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="absolute right-0 hidden w-12 h-12 -mt-2 -mr-16 text-gray-200 lg:inline-block" viewBox="0 0 975.036 975.036">
<path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"></path>
</svg>
See what others are saying
</h2>
<div class="block w-full h-0.5 max-w-lg mt-6 bg-purple-100 rounded-full"></div>
<div class="items-center justify-center w-full mt-12 mb-4 lg:flex">
<div class="flex flex-col items-start justify-start w-full h-auto mb-12 lg:w-1/3 lg:mb-0">
<div class="flex items-center justify-center">
<div class="w-16 h-16 mr-4 overflow-hidden bg-gray-200 rounded-full">
<img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1700&amp;q=80" class="object-cover w-full h-full">
</div>
<div class="flex flex-col items-start justify-center">
<h4 class="font-bold text-gray-800">John Doe</h4>
<p class="text-gray-600">CEO of Something</p>
</div>
</div>
<blockquote class="mt-8 text-lg text-gray-500">
"This is a no-brainer if you want to take your business to the next level. If you are looking for the ultimate toolset, this is it!"
</blockquote>
</div>
<div class="flex flex-col items-start justify-start w-full h-auto px-0 mx-0 mb-12 border-l border-r border-transparent lg:w-1/3 lg:mb-0 lg:px-8 lg:mx-8 lg:border-gray-200">
<div class="flex items-center justify-center">
<div class="w-16 h-16 mr-4 overflow-hidden bg-gray-200 rounded-full">
<img src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2547&amp;q=80" class="object-cover w-full h-full">
</div>
<div class="flex flex-col items-start justify-center">
<h4 class="font-bold text-gray-800">Jane Doe</h4>
<p class="text-gray-600">CTO of Business</p>
</div>
</div>
<blockquote class="mt-8 text-lg text-gray-500">"Thanks for creating this service. My life is so much easier. Thanks for making such a great product."</blockquote>
</div>
<div class="flex flex-col items-start justify-start w-full h-auto lg:w-1/3">
<div class="flex items-center justify-center">
<div class="w-16 h-16 mr-4 overflow-hidden bg-gray-200 rounded-full">
<img src="https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1256&amp;q=80" class="object-cover w-full h-full">
</div>
<div class="flex flex-col items-start justify-center">
<h4 class="font-bold text-gray-800">John Smith</h4>
<p class="text-gray-600">Creator of Stuff</p>
</div>
</div>
<blockquote class="mt-8 text-lg text-gray-500">"Packed with awesome content and exactly what I was looking for. I would highly recommend this to anyone."</blockquote>
</div>
</div>
</div>
</div>
</section>
<!-- testimonial 4 end -->
<!-- testimonial 5 start -->
<section class="section_divider">
<dvi>Testimonial 5</dvi>
</section>
<section class="flex items-center justify-center py-16 bg-gray-100 min-w-screen">
<div class="max-w-6xl px-12 mx-auto bg-gray-100 md:px-16 xl:px-10">
<div class="flex flex-col items-center lg:flex-row">
<div class="flex flex-col items-start justify-center w-full h-full pr-8 mb-10 lg:mb-0 lg:w-1/2">
<p class="mb-2 text-base font-medium tracking-tight text-indigo-500 uppercase">Our customers love our product</p>
<h2 class="text-4xl font-extrabold leading-10 tracking-tight text-gray-900 sm:text-5xl sm:leading-none md:text-6xl lg:text-5xl xl:text-6xl">Testimonials</h2>
<p class="my-6 text-lg text-gray-600">Don't just take our word for it, read from our extensive list of case studies and customer testimonials.</p>
<a href="#_" class="flex items-center justify-center px-8 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md shadow hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo md:py-4 md:text-lg md:px-10">View Case Studies</a>
</div>
<div class="w-full lg:w-1/2">
<blockquote class="flex items-center justify-between w-full col-span-1 p-6 bg-white rounded-lg shadow">
<div class="flex flex-col pr-8">
<div class="relative pl-12">
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
<path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z"></path>
</svg>
<p class="mt-2 text-sm text-gray-600 sm:text-base lg:text-sm xl:text-base">Awesome product! And the customer service is exceptionally well.</p>
</div>
<h3 class="pl-12 mt-3 text-sm font-medium leading-5 text-gray-800 truncate sm:text-base lg:text-sm lg:text-base">
Jane Cooper
<span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
</h3>
</div>
<img class="flex-shrink-0 w-20 h-20 bg-gray-300 rounded-full xl:w-24 xl:h-24" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60" alt="">
</blockquote>
<blockquote class="flex items-center justify-between w-full col-span-1 p-6 mt-4 bg-white rounded-lg shadow">
<div class="flex flex-col pr-10">
<div class="relative pl-12">
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
<path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z"></path>
</svg>
<p class="mt-2 text-sm text-gray-600 sm:text-base lg:text-sm xl:text-base">I can't express enough, how amazing this service has been for my company.</p>
</div>
<h3 class="pl-12 mt-3 text-sm font-medium leading-5 text-gray-800 truncate sm:text-base lg:text-sm lg:text-base">
John Doe
<span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
</h3>
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
</div>
<img class="flex-shrink-0 w-24 h-24 bg-gray-300 rounded-full" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;aauto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60" alt="">
</blockquote>
<blockquote class="flex items-center justify-between w-full col-span-1 p-6 mt-4 bg-white rounded-lg shadow">
<div class="flex flex-col pr-10">
<div class="relative pl-12">
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
<path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z"></path>
</svg>
<p class="mt-2 text-sm text-gray-600 sm:text-base lg:text-sm xl:text-base">I can't express enough, how amazing this service has been for my company.</p>
</div>
<h3 class="pl-12 mt-3 text-sm font-medium leading-5 text-gray-800 truncate sm:text-base lg:text-sm lg:text-base">
John Smith
<span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
</h3>
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
</div>
<img class="flex-shrink-0 w-24 h-24 bg-gray-300 rounded-full" src="https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rrb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;aauto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60" alt="">
</blockquote>
</div>
</div>
</div>
</section>
<!-- testimonial 5 end -->
<!-- testimonial 6 start -->
<section class="section_divider">
<div>Testimonial 6</div>
</section>
<section class="py-20 xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg')">
<div class="container px-4 mx-auto">
<div class="max-w-lg mx-auto mb-12 text-center">
<img class="mx-auto" src="metis-assets/icons/quote.svg" alt="">
<h2 class="my-2 text-3xl md:text-4xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor</h2>
<p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
</div>
<div class="flex flex-wrap max-w-5xl mx-auto mb-6">
<div class="w-full md:w-1/2 px-3 mb-6">
<div class="p-8 bg-white shadow rounded">
<div class="flex items-center mb-4">
<img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
<div class="pl-4">
<p class="text-xl">John Bailey</p>
<p class="text-blue-600">CEO</p>
</div>
</div>
<p class="leading-loose text-blueGray-400">
Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
</p>
</div>
</div>
<div class="w-full md:w-1/2 px-3 mb-6">
<div class="p-8 bg-white shadow rounded">
<div class="flex items-center mb-4">
<img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
<div class="pl-4">
<p class="text-xl">Julie Bailey</p>
<p class="text-blue-600">Head of Development</p>
</div>
</div>
<p class="leading-loose text-blueGray-400">
Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
</p>
</div>
</div>
<div class="w-full md:w-1/2 px-3 mb-6">
<div class="p-8 bg-white shadow rounded">
<div class="flex items-center mb-4">
<img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
<div class="pl-4">
<p class="text-xl">Julie Bailey</p>
<p class="text-blue-600">Head of Operations</p>
</div>
</div>
<p class="leading-loose text-blueGray-400">
Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
</p>
</div>
</div>
<div class="w-full md:w-1/2 px-3 mb-6">
<div class="p-8 bg-white shadow rounded">
<div class="flex items-center mb-4">
<img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
<div class="pl-4">
<p class="text-xl">Tom Brown</p>
<p class="text-blue-600">Head of Development</p>
</div>
</div>
<p class="leading-loose text-blueGray-400">
Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
</p>
</div>
</div>
<div class="w-full md:w-1/2 px-3 mb-6">
<div class="p-8 bg-white shadow rounded">
<div class="flex items-center mb-4">
<img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
<div class="pl-4">
<p class="text-xl">Tom Brown</p>
<p class="text-blue-600">Head of Development</p>
</div>
</div>
<p class="leading-loose text-blueGray-400">
Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
</p>
</div>
</div>
<div class="w-full md:w-1/2 px-3 mb-6">
<div class="p-8 bg-white shadow rounded">
<div class="flex items-center mb-4">
<img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
<div class="pl-4">
<p class="text-xl">Julie Bailey</p>
<p class="text-blue-600">Head of Development</p>
</div>
</div>
<p class="leading-loose text-blueGray-400">
Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
</p>
</div>
</div>
<div class="w-full md:w-1/2 px-3 mb-6">
<div class="p-8 bg-white shadow rounded">
<div class="flex items-center mb-4">
<img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
<div class="pl-4">
<p class="text-xl">Tom Brown</p>
<p class="text-blue-600">Head of Development</p>
</div>
</div>
<p class="leading-loose text-blueGray-400">
Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
</p>
</div>
</div>
<div class="w-full md:w-1/2 px-3 mb-6">
<div class="p-8 bg-white shadow rounded">
<div class="flex items-center mb-4">
<img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
<div class="pl-4">
<p class="text-xl">Julie Bailey</p>
<p class="text-blue-600">Head of Operations</p>
</div>
</div>
<p class="leading-loose text-blueGray-400">
Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
</p>
</div>
</div>
</div>
<div class="text-center"><a class="inline-block py-4 px-8 text-xs text-white font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Show more Testimonials</a></div>
</div>
</section>
<!-- testimonial 6 end -->
<!-- testimonial 7 start -->
<section class="section_divider">
<div>Testimonial 7</div>
</section>
<div class="flex items-center justify-center min-h-screen bg-white min-w-screen">
<div class="px-10 bg-white">
<div class="container flex flex-col items-center justify-center py-12 mx-auto">
<p class="text-lg font-medium tracking-wider text-teal-500 uppercase">Testimonials</p>
<h2 class="max-w-3xl pr-12 text-5xl font-bold text-center">People Like Us 🥰</h2>
<div class="items-center justify-center w-full mt-16 mb-4 lg:flex">
<div class="flex flex-col items-start justify-start w-full h-auto mb-12 lg:w-1/3 lg:mb-0">
<div class="flex items-center justify-center">
<div class="w-16 h-16 mr-4 overflow-hidden bg-gray-200 rounded-full">
<img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1700&q=80"
class="object-cover w-full h-full">
</div>
<div class="flex flex-col items-start justify-center">
<h4 class="font-bold text-gray-800">John Doe</h4>
<p class="text-gray-600">CEO of Something</p>
</div>
</div>
<blockquote class="mt-8 text-lg text-gray-500">"This is some rad shit! Pop lockin, Boom shockin
radical. I
immediately wet my pants after trying this service."</blockquote>
</div>
<div
class="flex flex-col items-start justify-start w-full h-auto px-0 mx-0 mb-12 border-l border-r border-transparent lg:w-1/3 lg:mb-0 lg:px-8 lg:mx-8 lg:border-gray-200">
<div class="flex items-center justify-center">
<div class="w-16 h-16 mr-4 overflow-hidden bg-gray-200 rounded-full">
<img src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2547&q=80"
class="object-cover w-full h-full">
</div>
<div class="flex flex-col items-start justify-center">
<h4 class="font-bold text-gray-800">Jane Doe</h4>
<p class="text-gray-600">CTO of Business</p>
</div>
</div>
<blockquote class="mt-8 text-lg text-gray-500">"Thanks for creating this service. My life is so much
easier.
Thanks for making such a great product."</blockquote>
</div>
<div class="flex flex-col items-start justify-start w-full h-auto lg:w-1/3">
<div class="flex items-center justify-center">
<div class="w-16 h-16 mr-4 overflow-hidden bg-gray-200 rounded-full">
<img src="https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1256&q=80"
class="object-cover w-full h-full">
</div>
<div class="flex flex-col items-start justify-center">
<h4 class="font-bold text-gray-800">John Smith</h4>
<p class="text-gray-600">Creator of Stuff</p>
</div>
</div>
<blockquote class="mt-8 text-lg text-gray-500">"Packed with awesome content and exactly what I was
looking
for. I would highly recommend this to anyone."</blockquote>
</div>
</div>
</div>
</div>
</div>
<!-- testimonial 7 end -->
<!-- testimonial 8 start -->
<section class="section_divider">
<div>Testimonial 8</div>
</section>
<div class="bg-gray-100">
<div class="max-w-6xl px-6 py-8 mx-auto md:px-12">
<div class="items-center -mx-6 md:flex md:-mx-12">
<div class="w-full px-10 mt-16 md:w-1/2 md:mt-0">
<div class="overflow-hidden bg-white rounded-lg shadow-xl">
<img class="w-full" loading="lazy"
src="https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80"
alt="Portrait of Irene Sims, VP of Sales">
<div class="p-12">
<blockquote class="text-lg italic text-gray-800">
<div class="absolute -mt-2 -ml-2 pin-t pin-l">
<svg class="w-8 h-8" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.264 19.552C15.264 23.2 17.664 25.12 20.352 25.12C23.328 25.12 26.112 22.624 26.112 19.456C26.112 16.864 24.288 15.136 22.08 15.136C21.888 15.136 21.408 15.136 21.312 15.136C22.368 12.064 25.824 8.8 29.376 7.072L26.4 4C20.448 6.976 15.264 13.504 15.264 19.552ZM0 19.552C0 23.2 2.304 25.12 5.088 25.12C8.064 25.12 10.848 22.624 10.848 19.456C10.848 16.864 8.928 15.136 6.72 15.136C6.528 15.136 6.048 15.136 5.952 15.136C7.008 12.064 10.56 8.8 14.016 7.072L11.136 4C5.184 6.976 0 13.504 0 19.552Z"
class="text-gray-300 fill-current"></path>
</svg>
</div>
<div class="relative">
<p>
This service rocks on a whole new level. You've got to try it out for yourself.
</p>
</div>
</blockquote>
<div class="mt-10">
<div>
<div class="font-semibold tracking-wider text-gray-900 uppercase">
Irene Sims
</div>
<div class="text-gray-700">VP of Sales, SomeCompany</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full px-6 md:w-1/2 md:px-12">
<h2 class="text-2xl font-bold text-gray-900">Crafted with Awesomeness</h2>
<div class="flex mt-10">
<div>
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z">
</path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"></path>
</svg>
</div>
<div class="mt-2 ml-4">
<div class="text-lg font-semibold">Radical Feature Set</div>
<p class="mt-2 text-gray-700">
Filled to the rim with radical features and rock'n sock'n tools. You'll be glad you signed
up.
</p>
</div>
</div>
<div class="flex mt-10">
<div>
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z">
</path>
</svg>
</div>
<div class="mt-2 ml-4">
<div class="text-lg font-semibold">Lightning Fast Speed</div>
<p class="mt-2 text-gray-700">
Built and crafted with speed to take your game back to the next-level. 1.21 GigaWatts!
</p>
</div>
</div>
<div class="flex mt-10">
<div>
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z">
</path>
</svg>
</div>
<div class="mt-2 ml-4">
<div class="text-lg font-semibold">Fully Customizable</div>
<p class="mt-2 text-gray-700">
Every element and component is customizable to fit the needs of your application.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- testimonial 8 end -->
<!-- testimonial 9 start -->
<section class="section_divider">
<div>Testimonial 9</div>
</section>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<style>
.swiper-container {
overflow: hidden;
}
</style>
<section class="bg-gray-100">
<div class="px-4 py-16 mx-auto sm:px-6 lg:pl-8 lg:pr-0 lg:mr-0 sm:py-24 max-w-[1340px]">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-x-16 gap-y-8">
<div class="max-w-xl space-y-8">
<h2 class="text-4xl font-bold tracking-tight sm:text-5xl">Read trusted reviews from our customers</h2>
<p class="max-w-lg text-lg text-gray-500">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas veritatis illo placeat harum porro optio
fugit a culpa sunt id!
</p>
<div class="hidden lg:flex">
<button
class="p-3 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
aria-label="Previous slide"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 transform -rotate-180"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
<button
class="p-3 ml-3 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
aria-label="Next slide"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
<div class="-mx-6 lg:col-span-2 lg:mx-0">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="flex flex-col justify-between h-full p-12 bg-white">
<div>
<div class="flex space-x-0.5 text-green-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
</div>
<div class="mt-4">
<p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
<p class="mt-4 text-lg text-gray-600">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam cumque recusandae dolorum porro,
quasi sunt necessitatibus dolorem ab laudantium vel.
</p>
</div>
</div>
<footer class="mt-8 text-gray-500">Eddie Murphy</footer>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="flex flex-col justify-between h-full p-12 bg-white">
<div>
<div class="flex space-x-0.5 text-green-500">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
</div>
<div class="mt-4">
<p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
<p class="mt-4 text-lg text-gray-600">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam cumque recusandae dolorum porro,
quasi sunt necessitatibus dolorem ab laudantium vel.
</p>
</div>
</div>
<footer class="mt-8 text-gray-500">Eddie Murphy</footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-center mt-8 lg:hidden">
<button
class="p-4 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
aria-label="Previous slide"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 transform -rotate-180"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
<button
class="p-4 ml-4 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
aria-label="next-slide"
>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</section>
<script>
const swiper = new Swiper('.swiper-container', {
loop: true,
slidesPerView: 1,
spaceBetween: 32,
autoplay: {
delay: 8000,
},
navigation: {
nextEl: '.next-button',
prevEl: '.prev-button',
},
breakpoints: {
640: {
slidesPerView: 1.5,
centeredSlides: true,
},
1024: {
centeredSlides: false,
slidesPerView: 1.5,
},
},
})
</script>
<!-- testimonial 9 end -->
<!-- testimonial 10 start -->
<section class="section_divider">
<div>Testimonial 10</div>
</section>
<section class="bg-white">
<div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8 sm:py-24">
<div class="max-w-xl mx-auto text-center">
<h2 class="text-4xl font-bold tracking-tight sm:text-5xl">
Read trusted reviews from our customers
</h2>
<p class="max-w-lg mx-auto mt-4 text-gring-offset-warm-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
praesentium natus sapiente commodi. Aliquid sunt tempore iste
repellendus explicabo dignissimos placeat, autem harum dolore
reprehenderit quis! Quo totam dignissimos earum.
</p>
</div>
<div
class="grid grid-cols-1 gap-8 pt-16 mt-16 border-t border-gray-100 sm:grid-cols-2 lg:grid-cols-3 sm:gap-16"
>
<blockquote
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
>
<h5 class="text-xl font-medium text-gray-700">
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
</h5>
<footer class="flex items-center mt-6 text-gray-500">
<img
src="https://www.hyperui.dev/photos/man-5.jpeg"
alt=""
class="object-cover w-12 h-12 rounded-full"
/>
<div class="ml-3 text-left">
<p class="text-sm font-medium text-gray-700">Barry Scott</p>
<p class="mt-1 text-xs text-gray-500">
Digital Marketing at Studio
</p>
</div>
</footer>
</blockquote>
<blockquote
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
>
<h5 class="text-xl font-medium text-gray-700">
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
</h5>
<footer class="flex items-center mt-8 text-gray-500">
<img
src="https://www.hyperui.dev/photos/man-5.jpeg"
alt=""
class="object-cover w-12 h-12 rounded-full"
/>
<div class="ml-3 text-left">
<p class="text-sm font-medium text-gray-700">Barry Scott</p>
<p class="mt-1 text-xs text-gray-500">
Digital Marketing at Studio
</p>
</div>
</footer>
</blockquote>
<blockquote
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
>
<h5 class="text-xl font-medium text-gray-700">
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
</h5>
<footer class="flex items-center mt-8 text-gray-500">
<img
src="https://www.hyperui.dev/photos/man-5.jpeg"
alt=""
class="object-cover w-12 h-12 rounded-full"
/>
<div class="ml-3 text-left">
<p class="text-sm font-medium text-gray-700">Barry Scott</p>
<p class="mt-1 text-xs text-gray-500">
Digital Marketing at Studio
</p>
</div>
</footer>
</blockquote>
<blockquote
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
>
<h5 class="text-xl font-medium text-gray-700">
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
</h5>
<footer class="flex items-center mt-8 text-gray-500">
<img
src="https://www.hyperui.dev/photos/man-5.jpeg"
alt=""
class="object-cover w-12 h-12 rounded-full"
/>
<div class="ml-3 text-left">
<p class="text-sm font-medium text-gray-700">Barry Scott</p>
<p class="mt-1 text-xs text-gray-500">
Digital Marketing at Studio
</p>
</div>
</footer>
</blockquote>
<blockquote
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
>
<h5 class="text-xl font-medium text-gray-700">
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
</h5>
<footer class="flex items-center mt-8 text-gray-500">
<img
src="https://www.hyperui.dev/photos/man-5.jpeg"
alt=""
class="object-cover w-12 h-12 rounded-full"
/>
<div class="ml-3 text-left">
<p class="text-sm font-medium text-gray-700">Barry Scott</p>
<p class="mt-1 text-xs text-gray-500">
Digital Marketing at Studio
</p>
</div>
</footer>
</blockquote>
<blockquote
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
>
<h5 class="text-xl font-medium text-gray-700">
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
</h5>
<footer class="flex items-center mt-8 text-gray-500">
<img
src="https://www.hyperui.dev/photos/man-5.jpeg"
alt=""
class="object-cover w-12 h-12 rounded-full"
/>
<div class="ml-3 text-left">
<p class="text-sm font-medium text-gray-700">Barry Scott</p>
<p class="mt-1 text-xs text-gray-500">
Digital Marketing at Studio
</p>
</div>
</footer>
</blockquote>
</div>
</div>
</section>
<!-- testimonial 10 end -->
<!-- testimonial 11 start -->
<section class="section_divider">
<div>Testimonail 11</div>
</section>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<section class="bg-white dark:bg-gray-800">
<div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8 sm:py-24">
<h2 class="text-4xl font-bold tracking-tight text-center sm:text-5xl">
Read trusted reviews from our customers
</h2>
<div class="mt-12 swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="p-8 bg-gray-100 rounded-lg">
<div class="flex items-center">
<img
src="https://www.hyperui.dev/photos/man-4.jpeg"
alt=""
class="object-cover w-16 h-16 rounded-full"
/>
<div class="ml-4">
<div class="flex space-x-0.5 justify-center text-green-500">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
</div>
<p class="mt-1 text-lg font-medium text-gray-700">Katie</p>
</div>
</div>
<p class="mt-4 text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
voluptatem alias ut provident sapiente repellendus.
</p>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="p-8 bg-gray-100 rounded-lg">
<div class="flex items-center">
<img
src="https://www.hyperui.dev/photos/man-4.jpeg"
alt=""
class="object-cover w-16 h-16 rounded-full"
/>
<div class="ml-4">
<div class="flex space-x-0.5 justify-center text-green-500">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
</div>
<p class="mt-1 text-lg font-medium text-gray-700">Katie</p>
</div>
</div>
<p class="mt-4 text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
voluptatem alias ut provident sapiente repellendus.
</p>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="p-8 bg-gray-100 rounded-lg">
<div class="flex items-center">
<img
src="https://www.hyperui.dev/photos/man-4.jpeg"
alt=""
class="object-cover w-16 h-16 rounded-full"
/>
<div class="ml-4">
<div class="flex space-x-0.5 justify-center text-green-500">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
</div>
<p class="mt-1 text-lg font-medium text-gray-700">Katie</p>
</div>
</div>
<p class="mt-4 text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
voluptatem alias ut provident sapiente repellendus.
</p>
</blockquote>
</div>
</div>
</div>
</div>
</section>
<script>
const swiper = new Swiper('.swiper-container', {
loop: true,
slidesPerView: 1,
spaceBetween: 32,
centeredSlides: true,
autoplay: {
delay: 8000,
},
breakpoints: {
640: {
slidesPerView: 1.5,
},
1024: {
slidesPerView: 3,
},
},
})
</script>
<!-- testimonial 11 end -->
<!-- testimonial 12 start -->
<section class="section_divider">
<div> Testimonail 12</div>
</section>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<style>
.swiper-pagination {
bottom: 0;
position: relative;
}
.swiper-container {
overflow: hidden;
}
</style>
<section class="bg-white dark:bg-gray-800">
<div class="max-w-screen-xl py-16 ml-auto sm:pl-6 lg:pl-0 mx-auto">
<div class="mt-12 swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="p-8 bg-gray-100">
<div class="flex items-center">
<img
src="https://www.hyperui.dev/photos/man-4.jpeg"
alt=""
class="object-cover w-16 h-16 rounded-full"
/>
<div class="ml-4 text-sm">
<p class="font-medium">Jeff Wezos</p>
<p class="mt-1">CEO of Shipping Company</p>
</div>
</div>
<p class="relative mt-4 text-gray-500">
<span class="text-xl">&ldquo;</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
assumenda officiis sit amet itaque eveniet accusantium corporis
tempora, soluta perspiciatis rerum, ratione animi nemo inventore
repellat, commodi in esse quisquam.
<span class="text-xl">&rdquo;</span>
</p>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="p-8 bg-gray-100">
<div class="flex items-center">
<img
src="https://www.hyperui.dev/photos/man-4.jpeg"
alt=""
class="object-cover w-16 h-16 rounded-full"
/>
<div class="ml-4 text-sm">
<p class="font-medium">Jeff Wezos</p>
<p class="mt-1">CEO of Shipping Company</p>
</div>
</div>
<p class="relative mt-4 text-gray-500">
<span class="text-xl">&ldquo;</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
assumenda officiis sit amet itaque eveniet accusantium corporis
tempora, soluta perspiciatis rerum, ratione animi nemo inventore
repellat, commodi in esse quisquam.
<span class="text-xl">&rdquo;</span>
</p>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="p-8 bg-gray-100">
<div class="flex items-center">
<img
src="https://www.hyperui.dev/photos/man-4.jpeg"
alt=""
class="object-cover w-16 h-16 rounded-full"
/>
<div class="ml-4 text-sm">
<p class="font-medium">Jeff Wezos</p>
<p class="mt-1">CEO of Shipping Company</p>
</div>
</div>
<p class="relative mt-4 text-gray-500">
<span class="text-xl">&ldquo;</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
assumenda officiis sit amet itaque eveniet accusantium corporis
tempora, soluta perspiciatis rerum, ratione animi nemo inventore
repellat, commodi in esse quisquam.
<span class="text-xl">&rdquo;</span>
</p>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="p-8 bg-gray-100">
<div class="flex items-center">
<img
src="https://www.hyperui.dev/photos/man-4.jpeg"
alt=""
class="object-cover w-16 h-16 rounded-full"
/>
<div class="ml-4 text-sm">
<p class="font-medium">Jeff Wezos</p>
<p class="mt-1">CEO of Shipping Company</p>
</div>
</div>
<p class="relative mt-4 text-gray-500">
<span class="text-xl">&ldquo;</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
assumenda officiis sit amet itaque eveniet accusantium corporis
tempora, soluta perspiciatis rerum, ratione animi nemo inventore
repellat, commodi in esse quisquam.
<span class="text-xl">&rdquo;</span>
</p>
</blockquote>
</div>
</div>
<div class="mt-12 swiper-pagination"></div>
</div>
</div>
</section>
<script>
new Swiper('.swiper-container', {
loop: true,
slidesPerView: 1,
spaceBetween: 8,
autoplay: {
delay: 8000,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
640: {
slidesPerView: 1.5,
},
1024: {
slidesPerView: 3,
},
},
})
</script>
<!-- testimonial 12 end -->
<!-- testimonial 13 start -->
<section class="section_divider">
<div>Testimonial 13</div>
</section>
<section class="bg-gray-900">
<div class="w-full px-4 py-20 mx-auto text-center max-w-7xl md:w-4/5 lg:w-4/6">
<h1 class="mt-3 mb-10 text-xl font-extrabold text-white md:leading-snug md:text-3xl">
“Implementation is a breeze, particularly because the team at Hellonext is
<span class="text-white bg-transparent bg-clip-border xl:bg-clip-text xl:text-transparent xl:bg-gradient-to-r from-green-400 to-purple-500"> very fast to respond and help </span>
where needed, even if it means rolling out new features on their platform.  We're super happy and are loving how Hellonext brings us closer to the members of our community“
</h1>
<div class="mx-auto mb-3 shadow-lg avatar w-1/5">
<img src="https://www.hyperui.dev/photos/man-4.jpeg" alt="man standing up a mounten" class=" object-cover rounded-full h-20 w-20 mx-auto " />
</div>
<p class="text-base font-medium text-gray-200">example example</p>
<p class="text-xs font-medium text-gray-400">CEO, example</p>
</div>
</section>
<!-- testimonial 13 end -->
<!-- testimonial 14 start -->
<section class="section_divider">
<div>Testimonial 14</div>
</section>
<section class="dark:bg-coolGray-800 dark:text-coolGray-100">
<div class="container px-6 py-12 mx-auto">
<div class="grid items-center gap-4 xl:grid-cols-5">
<div class="max-w-2xl mx-auto my-8 space-y-4 text-center xl:col-span-2 xl:text-left">
<h2 class="text-4xl font-bold">Duo assum utroque appetere an</h2>
<p class="dark:text-coolGray-400">Pri ex magna scaevola moderatius. Nullam accommodare no vix, est ei diceret alienum, et sit cetero malorum. Et sea iudico consequat, est sanctus adipisci ex.</p>
</div>
<div class="p-6 xl:col-span-3">
<div class="grid gap-4 md:grid-cols-2">
<div class="grid content-center gap-4">
<div class="p-6 rounded shadow-md dark:bg-coolGray-900">
<p>An audire commodo habemus cum. Ne sed corrumpit repudiandae. Tota aliquip democritum pro in, nec democritum intellegam ne. Propriae volutpat dissentiet ea sit, nec at lorem inani tritani, an ius populo perfecto vituperatoribus. Eu cum case modus salutandi, ut eum vocent sensibus reprehendunt.</p>
<div class="flex items-center mt-4 space-x-4">
<img src="https://source.unsplash.com/50x50/?portrait?1" alt="" class="w-12 h-12 bg-center bg-cover rounded-full dark:bg-coolGray-500">
<div>
<p class="text-lg font-semibold">Leroy Jenkins</p>
<p class="text-sm dark:text-coolGray-400">CTO of Company Co.</p>
</div>
</div>
</div>
<div class="p-6 rounded shadow-md dark:bg-coolGray-900">
<p>Sit wisi sapientem ut, pri civibus temporibus voluptatibus et, ius cu hinc fabulas. Nam meliore minimum et, regione convenire cum id. Ex pro eros mucius consectetuer, pro magna nulla nonumy ne, eam putent iudicabit consulatu cu.</p>
<div class="flex items-center mt-4 space-x-4">
<img src="https://source.unsplash.com/50x50/?portrait?2" alt="" class="w-12 h-12 bg-center bg-cover rounded-full dark:bg-coolGray-500">
<div>
<p class="text-lg font-semibold">Leroy Jenkins</p>
<p class="text-sm dark:text-coolGray-400">CTO of Company Co.</p>
</div>
</div>
</div>
</div>
<div class="grid content-center gap-4">
<div class="p-6 rounded shadow-md dark:bg-coolGray-900">
<p>Putant omnium elaboraret per ut. Id dicta tritani nominavi quo, mea id justo errem elaboraret. Agam mollis scripserit ea his, ut nec postea verear persecuti. Ea noster senserit eam, ferri omittantur ei nec. Id mel solet libris efficiantur, commune explicari et eos. Case movet ad est, sed tota vocent appetere ea.</p>
<div class="flex items-center mt-4 space-x-4">
<img src="https://source.unsplash.com/50x50/?portrait?3" alt="" class="w-12 h-12 bg-center bg-cover rounded-full dark:bg-coolGray-500">
<div>
<p class="text-lg font-semibold">Leroy Jenkins</p>
<p class="text-sm dark:text-coolGray-400">CTO of Company Co.</p>
</div>
</div>
</div>
<div class="p-6 rounded shadow-md dark:bg-coolGray-900">
<p>Te omnes virtute volutpat sed. Ei esse eros interesset vel, ei populo denique ocurreret vix, eu cum pertinax mandamus vituperatoribus. Solum nihil luptatum per ex, ei amet viderer eos. Ea illum labitur mnesarchum pro. Eius meis salutandi ei nam, alterum expetenda et nec. Expetenda intellegat at eum, per mazim sanctus honestatis ad. Ei noluisse invenire vix. Te ancillae patrioque qui, probo bonorum vivendum ex vim.</p>
<div class="flex items-center mt-4 space-x-4">
<img src="https://source.unsplash.com/50x50/?portrait?4" alt="" class="w-12 h-12 bg-center bg-cover rounded-full dark:bg-coolGray-500">
<div>
<p class="text-lg font-semibold">Leroy Jenkins</p>
<p class="text-sm dark:text-coolGray-400">CTO of Company Co.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- testimonial 14 end -->
<!-- testimonail 15 start -->
<section class="section_divider">
<div>Testimonail 15</div>
</section>
<section class="my-8 dark:bg-coolGray-800 dark:text-coolGray-100">
<div class="container flex flex-col items-center mx-auto mb-12 md:p-10 md:px-12">
<h1 class="p-4 text-4xl font-semibold leading-none text-center">What our customers are saying about us</h1>
</div>
<div class="container flex flex-col items-center justify-center mx-auto lg:flex-row lg:flex-wrap lg:justify-evenly lg:px-10">
<div class="flex flex-col max-w-sm mx-4 my-6 shadow-lg">
<div class="px-4 py-12 rounded-t-lg sm:px-8 md:px-12 dark:bg-coolGray-900">
<p class="relative px-6 py-1 text-lg italic text-center dark:text-coolGray-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-8 h-8 dark:text-indigo-400">
<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z"></path>
<path d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"></path>
</svg>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus quibusdam, eligendi exercitationem molestias possimus facere.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="absolute right-0 w-8 h-8 dark:text-indigo-400">
<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z"></path>
<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z"></path>
</svg>
</p>
</div>
<div class="flex flex-col items-center justify-center p-8 rounded-b-lg dark:bg-indigo-400 dark:text-coolGray-900">
<img src="https://source.unsplash.com/50x50/?portrait?1" alt="" class="w-16 h-16 mb-2 -mt-16 bg-center bg-cover rounded-full dark:bg-coolGray-500 dark:bg-coolGray-700">
<p class="text-xl font-semibold leading-tight">Distinctio Animi</p>
<p class="text-sm uppercase">Aliquam illum</p>
</div>
</div>
<div class="flex flex-col max-w-sm mx-4 my-6 shadow-lg">
<div class="px-4 py-12 rounded-t-lg sm:px-8 md:px-12 dark:bg-coolGray-900">
<p class="relative px-6 py-1 text-lg italic text-center dark:text-coolGray-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-8 h-8 dark:text-indigo-400">
<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z"></path>
<path d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"></path>
</svg>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus quibusdam, eligendi exercitationem molestias possimus facere.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="absolute right-0 w-8 h-8 dark:text-indigo-400">
<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z"></path>
<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z"></path>
</svg>
</p>
</div>
<div class="flex flex-col items-center justify-center p-8 rounded-b-lg dark:bg-indigo-400 dark:text-coolGray-900">
<img src="https://source.unsplash.com/50x50/?portrait?2" alt="" class="w-16 h-16 mb-2 -mt-16 bg-center bg-cover rounded-full dark:bg-coolGray-500 dark:bg-coolGray-700">
<p class="text-xl font-semibold leading-tight">Distinctio Animi</p>
<p class="text-sm uppercase">Aliquam illum</p>
</div>
</div>
<div class="flex flex-col max-w-sm mx-4 my-6 shadow-lg">
<div class="px-4 py-12 rounded-t-lg sm:px-8 md:px-12 dark:bg-coolGray-900">
<p class="relative px-6 py-1 text-lg italic text-center dark:text-coolGray-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-8 h-8 dark:text-indigo-400">
<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z"></path>
<path d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"></path>
</svg>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus quibusdam, eligendi exercitationem molestias possimus facere.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="absolute right-0 w-8 h-8 dark:text-indigo-400">
<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z"></path>
<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z"></path>
</svg>
</p>
</div>
<div class="flex flex-col items-center justify-center p-8 rounded-b-lg dark:bg-indigo-400 dark:text-coolGray-900">
<img src="https://source.unsplash.com/50x50/?portrait?3" alt="" class="w-16 h-16 mb-2 -mt-16 bg-center bg-cover rounded-full dark:bg-coolGray-500 dark:bg-coolGray-700">
<p class="text-xl font-semibold leading-tight">Distinctio Animi</p>
<p class="text-sm uppercase">Aliquam illum</p>
</div>
</div>
<div class="flex flex-col max-w-sm mx-4 my-6 shadow-lg">
<div class="px-4 py-12 rounded-t-lg sm:px-8 md:px-12 dark:bg-coolGray-900">
<p class="relative px-6 py-1 text-lg italic text-center dark:text-coolGray-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-8 h-8 dark:text-indigo-400">
<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z"></path>
<path d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"></path>
</svg>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus quibusdam, eligendi exercitationem molestias possimus facere.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="absolute right-0 w-8 h-8 dark:text-indigo-400">
<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z"></path>
<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z"></path>
</svg>
</p>
</div>
<div class="flex flex-col items-center justify-center p-8 rounded-b-lg dark:bg-indigo-400 dark:text-coolGray-900">
<img src="https://source.unsplash.com/50x50/?portrait?4" alt="" class="w-16 h-16 mb-2 -mt-16 bg-center bg-cover rounded-full dark:bg-coolGray-500 dark:bg-coolGray-700">
<p class="text-xl font-semibold leading-tight">Distinctio Animi</p>
<p class="text-sm uppercase">Aliquam illum</p>
</div>
</div>
</div>
</section>
<!-- testimonail 15 end -->
<!-- testimonail 16 start -->
<section class="section_divider">
<div>Testimonail 16</div>
</section>
<section class="p-6">
<div class="container max-w-xl mx-auto">
<div class="flex flex-col items-center w-full p-6 space-y-8 rounded-md lg:h-full lg:p-8 dark:bg-coolGray-900 dark:text-coolGray-100">
<img src="https://source.unsplash.com/random/100x100?4" alt="" class="w-20 h-20 rounded-full dark:bg-coolGray-500">
<blockquote class="max-w-lg text-lg italic font-medium text-center">"Et, dignissimos obcaecati. Recusandae praesentium doloribus vitae? Rem unde atque mollitia!"</blockquote>
<div class="text-center dark:text-coolGray-400">
<p>Leroy Jenkins</p>
<p>CEO of Company Co.</p>
</div>
<div class="flex space-x-2">
<button type="button" aria-label="Page 1" class="w-2 h-2 rounded-full dark:bg-coolGray-50"></button>
<button type="button" aria-label="Page 2" class="w-2 h-2 rounded-full dark:bg-coolGray-600"></button>
<button type="button" aria-label="Page 3" class="w-2 h-2 rounded-full dark:bg-coolGray-600"></button>
<button type="button" aria-label="Page 4" class="w-2 h-2 rounded-full dark:bg-coolGray-600"></button>
</div>
</div>
</div>
</section>
<!-- testimonail 16 end -->
<!-- testimonail 17 start -->
<section class="section_divider">
<div>Testimonial 17</div>
</section>
<section class="bg-indigo-100 dark:bg-gray-800 w-full h-screen p-4">
<div class="">
<div class="flex flex-col lg:grid lg:gap-4 2xl:gap-6 lg:grid-cols-4 2xl:row-span-2 2xl:pb-8 ml-2 pt-4 px-6">
<!-- Beginning of the component about Daniel Clifford -->
<div class="bg-indigo-600 lg:order-1 lg:row-span-1 2xl:row-span-1 lg:col-span-2 rounded-lg shadow-xl mb-5 lg:mb-0">
<div class="mx-6 my-8 2xl:mx-10">
<img class="w-8 md:w-9 lg:w-10 2xl:w-20 h-8 md:h-9 lg:h-10 2xl:h-20 rounded-full border-2 ml-1 lg:ml-3 2xl:ml-0 md:-mt-1 2xl:-mt-4" src="https://images.pexels.com/photos/3775534/pexels-photo-3775534.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<h1 class="text-white text-xs md:text-base 2xl:text-2xl pl-12 lg:pl-16 2xl:pl-20 -mt-8 md:-mt-10 lg:-mt-11 2xl:-mt-20 2xl:mx-8">Daniel Clifford</h1>
<h2 class="text-white text-opacity-50 text-xs md:text-base 2xl:text-2xl pl-12 lg:pl-16 2xl:pl-20 2xl:my-2 2xl:mx-8">Verified Graduate</h2>
</div>
<div class="-mt-6 relative">
<p class="text-white text-xl 2xl:text-4xl font-bold px-7 lg:px-9 2xl:pt-6 2xl:mx-2">I received a job offer mid-course, and the subjects I learned were current, if not more so, in the company I joined. I honestly feel I got every penny’s worth.</p>
<br />
<p class="text-white text-opacity-50 font-medium md:text-sm 2xl:text-3xl px-7 lg:px-9 mb-3 2xl:pb-8 2xl:mx-2">“ I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a transition and have heard some people who had an amazing experience here. I signed up for the free intro course and found it incredibly fun! I enrolled shortly thereafter. The next 12 weeks was the best - and most grueling - time of my life. Since completing the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup. ”</p>
</div>
</div>
<!-- Ending of the component about Daniel Clifford -->
<!-- Beginning of the component about Jonathan Walters -->
<div class="bg-gray-900 lg:order-2 lg:row-span-1 2xl:row-span-1 lg:col-span-1 rounded-lg shadow-xl pb-4 mb-5 lg:mb-0">
<div class="mx-8 2xl:mx-10 my-10">
<img class="w-8 md:w-9 2xl:w-20 h-8 md:h-9 2xl:h-20 rounded-full border-2 -ml-1 -mt-2 lg:-mt-4" src="https://images.pexels.com/photos/634021/pexels-photo-634021.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<h1 class="text-white text-xs md:text-base 2xl:text-2xl pl-11 md:pl-12 2xl:pl-24 -mt-8 md:-mt-10 2xl:-mt-16">Jonathan Walters</h1>
<h2 class="text-white text-xs md:text-base 2xl:text-2xl text-opacity-50 pl-11 md:pl-12 2xl:pl-24">Verified Graduate</h2>
</div>
<div class="-mt-8 mx-1 lg:mx-2">
<p class="text-white text-lg lg:text-xl 2xl:text-4xl font-semibold pt-1 px-6 2xl:px-8 lg:pl-5 lg:pr-8">The team was very supportive and kept me motivated</p>
<br />
<p class="text-white text-opacity-50 font-medium md:text-sm 2xl:text-3xl pl-6 lg:pl-5 pr-4 -mt-1 lg:mt-6 2xl:mt-2 2xl:px-8">“ I started as a total newbie with virtually no coding skills. I now work as a mobile engineer for a big company. This was one of the best investments I’ve made in myself. ”</p>
</div>
</div>
<!-- Ending of the component about Jonathan Walters -->
<!-- Beginning of the component about Jeanette Harmon -->
<div class="bg-primary-color-white lg:order-3 lg:row-span-2 2xl:row-span-1 lg:col-span-1 rounded-lg shadow-xl mb-5 lg:mb-0 2xl:mb-8">
<div class="mx-8 my-10 lg:my-8">
<img class="w-8 md:w-9 lg:w-11 2xl:w-20 h-8 md:h-9 lg:h-11 2xl:h-20 rounded-full border-2 -mt-3 -ml-1 lg:-ml-0" src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<h1 class="primary-color-blackish-blue text-xs md:text-base 2xl:text-2xl pl-11 md:pl-12 lg:pl-14 2xl:pl-24 -mt-8 md:-mt-10 lg:-mt-11 2xl:-mt-16">Jeanette Harmon</h1>
<h2 class="primary-color-blackish-blue-opacity text-xs md:text-base 2xl:text-2xl pl-11 md:pl-12 lg:pl-14 2xl:pl-24">Verified Graduate</h2>
</div>
<div class="-mt-4 ml-5 mr-11">
<p class="primary-color-blackish-blue text-xl 2xl:text-4xl font-bold px-2 lg:px-3 -mt-6 lg:-mt-5 2xl:mt-12 2xl:pb-6">An overall wonderful and rewarding experience</p>
<br />
<p class="primary-color-blackish-blue-opacity font-medium md:text-sm 2xl:text-3xl pl-2 lg:pl-3 lg:pr-4 mb-6 2xl:pt-2 -mt-3">“ Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living while doing something I love. ”</p>
</div>
</div>
<!-- Ending of the component about Jeanette Harmon -->
<!-- Beginning of the component about Patrick Abrams -->
<div class="bg-purple-800 lg:order-4 lg:row-span-2 2xl:row-span-1 col-span-2 rounded-lg shadow-xl mb-5 lg:mb-0 2xl:mb-8 lg:pb-14 2xl:pb-20">
<div class="mx-8 my-8">
<img class="w-8 md:w-9 lg:w-10 2xl:w-20 h-8 md:h-9 lg:h-10 2xl:h-20 rounded-full border-2 lg:-mt-3" src="https://images.pexels.com/photos/3778603/pexels-photo-3778603.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<h1 class="text-white text-xs md:text-base 2xl:text-2xl pl-12 md:pl-14 2xl:pl-24 -mt-8 md:-mt-10 lg:-mt-11 2xl:-mt-16">Patrick Abrams</h1>
<h2 class="text-white text-xs md:text-base 2xl:text-2xl text-opacity-50 pl-12 md:pl-14 2xl:pl-24">Verified Graduate</h2>
</div>
<div class="px-3 -mt-3 mb-5 lg:mb-0">
<p class="text-white text-lg 2xl:text-4xl font-semibold px-4 -mt-3 lg:-mt-6 2xl:mt-8">Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and learning from their experiences was easy.</p>
<br />
<p class="text-white text-opacity-50 font-medium md:text-sm 2xl:text-3xl px-4 mt-1 lg:-mt-3 2xl:mt-6">“ The staff seem genuinely concerned about my progress which I find really refreshing. The program gave me the confidence necessary to be able to go out in the world and present myself as a capable junior developer. The standard is above the rest. You will get the personal attention you need from an incredible community of lgart and amazing people. ”</p>
</div>
</div>
<!-- Ending of the component about Patrick Abrams -->
<!-- Beginning of the component about Kira Whittle -->
<div class="bg-white lg:order-2 lg:row-span-4 lg:col-span-1 rounded-lg shadow-xl mb-5 lg:pb-4 ">
<div class="mx-8 my-8 lg:pl-1">
<img class="w-8 md:w-9 lg:w-12 2xl:w-20 h-8 md:h-9 lg:h-12 2xl:h-20 rounded-full border-2 lg:-mt-4 -ml-1 lg:-ml-4" src="https://images.pexels.com/photos/3762804/pexels-photo-3762804.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<h1 class="primary-color-blackish-blue text-xs md:text-base 2xl:text-2xl pl-10 md:pl-12 2xl:pl-24 -mt-8 md:-mt-10 lg:-mt-12 2xl:-mt-16">Kira Whittle</h1>
<h2 class="primary-color-blackish-blue-opacity text-xs md:text-base 2xl:text-sm pl-10 md:pl-12 2xl:pl-24">Verified Graduate</h2>
</div>
<div class="px-3 lg:px-5 lg:-mt-4 mb-5 lg:mb-0">
<p class="primary-color-blackish-blue text-xl 2xl:text-4xl font-semibold px-4 lg:px-0 -mt-2 lg:-mt-0">Such a life-changing experience. Highly recommended!</p>
<br />
<p class="primary-color-blackish-blue-opacity font-medium md:text-sm 2xl:text-2xl px-4 lg:px-0 2xl:px-4 lg:pr-3 lg:pb-3 mt-2 lg:-mt-1 2xl:mt-2 2xl:pb-64">“ Before joining the bootcamp, I’ve never written a line of code. I needed some structure from professionals who can help me learn programming step by step. I was encouraged to enroll by a former student of theirs who can only say wonderful things about the program. The entire curriculum and staff did not disappoint. They were very hands-on and I never had to wait long for assistance. The agile team project, in particular, was outstanding. It took my learning to the next level in a way that no tutorial could ever have. In fact, I’ve often referred to it during interviews as an example of my developent experience. It certainly helped me land a job as a full-stack developer after receiving multiple offers. 100% recommend! ”</p>
</div>
</div>
<!-- Ending of the component about Kira Whittle -->
</div>
</div>
</section>
<!-- testimonail 17 end -->
<!-- testimonail 18 start -->
<section class="section_divider">
<div>Testimonial 18</div>
</section>
<section class="antialiased sans-serif bg-gray-200 text-gray-600 p-3">
<div class="my-10 md:my-24 container mx-auto flex flex-col md:flex-row shadow-sm overflow-hidden" x-data="{ testimonialActive: 2 }" x-cloak>
<div class="relative w-full py-2 md:py-24 bg-indigo-700 md:w-1/2 flex flex-col item-center justify-center">
<div class="absolute top-0 left-0 z-10 grid-indigo w-16 h-16 md:w-40 md:h-40 md:ml-20 md:mt-24"></div>
<div class="relative text-2xl md:text-5xl py-2 px-6 md:py-6 md:px-1 md:w-64 md:mx-auto text-indigo-100 font-semibold leading-tight tracking-tight mb-0 z-20">
<span class="md:block">What Our</span>
<span class="md-block">Customers</span>
<span class="block">Are Saying!</span>
</div>
<div class="absolute right-0 bottom-0 mr-4 mb-4 hidden md:block">
<button
class="rounded-l-full border-r bg-gray-100 text-gray-500 focus:outline-none hover:text-indigo-500 font-bold w-12 h-10"
x-on:click="testimonialActive = testimonialActive === 1 ? 3 : testimonialActive - 1">
&#8592;
</button><button
class="rounded-r-full bg-gray-100 text-gray-500 focus:outline-none hover:text-indigo-500 font-bold w-12 h-10"
x-on:click="testimonialActive = testimonialActive >= 3 ? 1 : testimonialActive + 1">
&#8594;
</button>
</div>
</div>
<div class="bg-gray-100 md:w-1/2">
<div class="flex flex-col h-full relative">
<div class="absolute top-0 left-0 mt-3 ml-4 md:mt-5 md:ml-12">
<svg xmlns="http://www.w3.org/2000/svg" class="text-indigo-200 fill-current w-12 h-12 md:w-16 md:h-16" viewBox="0 0 24 24"><path d="M6.5 10c-.223 0-.437.034-.65.065.069-.232.14-.468.254-.68.114-.308.292-.575.469-.844.148-.291.409-.488.601-.737.201-.242.475-.403.692-.604.213-.21.492-.315.714-.463.232-.133.434-.28.65-.35.208-.086.39-.16.539-.222.302-.125.474-.197.474-.197L9.758 4.03c0 0-.218.052-.597.144C8.97 4.222 8.737 4.278 8.472 4.345c-.271.05-.56.187-.882.312C7.272 4.799 6.904 4.895 6.562 5.123c-.344.218-.741.4-1.091.692C5.132 6.116 4.723 6.377 4.421 6.76c-.33.358-.656.734-.909 1.162C3.219 8.33 3.02 8.778 2.81 9.221c-.19.443-.343.896-.468 1.336-.237.882-.343 1.72-.384 2.437-.034.718-.014 1.315.028 1.747.015.204.043.402.063.539.017.109.025.168.025.168l.026-.006C2.535 17.474 4.338 19 6.5 19c2.485 0 4.5-2.015 4.5-4.5S8.985 10 6.5 10zM17.5 10c-.223 0-.437.034-.65.065.069-.232.14-.468.254-.68.114-.308.292-.575.469-.844.148-.291.409-.488.601-.737.201-.242.475-.403.692-.604.213-.21.492-.315.714-.463.232-.133.434-.28.65-.35.208-.086.39-.16.539-.222.302-.125.474-.197.474-.197L20.758 4.03c0 0-.218.052-.597.144-.191.048-.424.104-.689.171-.271.05-.56.187-.882.312-.317.143-.686.238-1.028.467-.344.218-.741.4-1.091.692-.339.301-.748.562-1.05.944-.33.358-.656.734-.909 1.162C14.219 8.33 14.02 8.778 13.81 9.221c-.19.443-.343.896-.468 1.336-.237.882-.343 1.72-.384 2.437-.034.718-.014 1.315.028 1.747.015.204.043.402.063.539.017.109.025.168.025.168l.026-.006C13.535 17.474 15.338 19 17.5 19c2.485 0 4.5-2.015 4.5-4.5S19.985 10 17.5 10z"/></svg>
</div>
<div class="h-full relative z-10">
<div x-show.immediate="testimonialActive === 1">
<p class="text-gray-600 serif font-normal italic px-6 py-6 md:px-16 md:py-10 text-xl md:text-2xl" x-show.transition="testimonialActive == 1">
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
</p>
</div>
<div x-show.immediate="testimonialActive === 2">
<p class="text-gray-600 serif font-normal italic px-6 py-6 md:px-16 md:py-10 text-xl md:text-2xl" x-show.transition="testimonialActive == 2">
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
</p>
</div>
<div x-show.immediate="testimonialActive === 3">
<p class="text-gray-600 serif font-normal italic px-6 py-6 md:px-16 md:py-10 text-xl md:text-2xl" x-show.transition="testimonialActive == 3">
Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
</p>
</div>
</div>
<div class="flex my-4 justify-center items-center">
<button
@click.prevent="testimonialActive = 1"
class="text-center font-bold shadow-xs focus:outline-none focus:shadow-outline inline-block rounded-full mx-2"
:class="{'h-12 w-12 opacity-25 bg-indigo-300 text-gray-600': testimonialActive != 1, 'h-16 w-16 opacity-100 bg-indigo-600 text-white': testimonialActive == 1 }"
>JD</button>
<button
@click.prevent="testimonialActive = 2"
class="text-center font-bold shadow-xs focus:outline-none focus:shadow-outline h-16 w-16 inline-block bg-indigo-600 rounded-full mx-2"
:class="{'h-12 w-12 opacity-25 bg-indigo-300 text-gray-600': testimonialActive != 2, 'h-16 w-16 opacity-100 bg-indigo-600 text-white': testimonialActive == 2 }"
>WD</button>
<button
@click.prevent="testimonialActive = 3"
class="text-center font-bold shadow-xs focus:outline-none focus:shadow-outline h-12 w-12 inline-block bg-indigo-600 rounded-full mx-2"
:class="{'h-12 w-12 opacity-25 bg-indigo-300 text-gray-600': testimonialActive != 3, 'h-16 w-16 opacity-100 bg-indigo-600 text-white': testimonialActive == 3 }"
>JW</button>
</div>
<div class="flex justify-center px-6 pt-2 pb-6 md:py-6">
<div class="text-center" x-show="testimonialActive == 1">
<h2 class="text-sm md:text-base font-bold text-gray-700 leading-tight">John Doe</h2>
<small class="text-gray-500 text-xs md:text-sm truncate">CEO, ABC Inc.</small>
</div>
<div class="text-center" x-show="testimonialActive == 2">
<h2 class="text-sm md:text-base font-bold text-gray-700 leading-tight">Winter Doe</h2>
<small class="text-gray-500 text-xs md:text-sm truncate">CTO, XYZ Corp.</small>
</div>
<div class="text-center" x-show="testimonialActive == 3">
<h2 class="text-sm md:text-base font-bold text-gray-700 leading-tight">John Wick</h2>
<small class="text-gray-500 text-xs md:text-sm truncate">Product Manager, Fake Corp.</small>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js" defer></script>
<!-- testimonail 18 end -->
<!-- testimonail 19 start -->
<section class="section_divider">
<div>Testimonail 19</div>
</section>
<div class="max-w-md mx-auto py-4 px-8 bg-white shadow-lg rounded-lg my-20">
<div class="flex justify-center md:justify-end -mt-16">
<img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
</div>
<div>
<h2 class="text-gray-800 text-3xl font-semibold">Design Tools</h2>
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
</div>
<div class="flex justify-end mt-4">
<a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
</div>
</div>
<!-- testimonail 19 end -->
<!-- testimonial 20 start -->
<section class="section_divider">
<div>Testimonial 20</div>
</section>
<div class="flex items-center justify-center px-5 py-5">
<div class="w-full mx-auto max-w-xl rounded-lg bg-white dark:bg-gray-800 shadow-lg px-5 pt-5 pb-10 text-gray-800 dark:text-gray-50">
<div class="w-full pt-1 text-center pb-5 -mt-16 mx-auto">
<a href="#" class="block relative">
<img class="mx-auto object-cover rounded-full h-20 w-20 border-2 border-indigo-500" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
</a>
</div>
<div class="w-full mb-10">
<div class="text-3xl text-indigo-500 text-left leading-tight h-3">
“
</div>
<p class="text-sm text-gray-600 dark:text-gray-100 text-center px-5">
To get social media testimonials like these, keep your customers engaged with your social media accounts by posting regularly yourself
</p>
<div class="text-3xl text-indigo-500 text-right leading-tight h-3 -mt-3">
”
</div>
</div>
<div class="w-full">
<p class="text-md text-indigo-500 font-bold text-center">
Tom Hardy
</p>
<p class="text-xs text-gray-500 dark:text-gray-300 text-center">
@thom.hardy
</p>
</div>
</div>
</div>
<!-- testimonial 20 end -->
<!-- testimonial 21 start -->
<section class="section_divider">
<div>Testimonial 21</div>
</section>
<section class=" w-full mb-6">
<div class="mx-auto bg-gradient-to-b from-blue-500 w-full md:w-60 to-blue-600 rounded-lg p-4 shadow ">
<div class="flex items-center text-left">
<div class="flex-shrink-0">
<div class="inline-block relative">
<a href="#" class="block relative">
<img alt="" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="mx-auto object-cover rounded-full h-16 w-16 "/>
</a>
</div>
</div>
<div class="ml-6">
<p class="flex items-baseline">
<span class="text-white">
Charlie Rabiller
</span>
</p>
<div class="flex items-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 1792 1792">
<path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 1792 1792">
<path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 1792 1792">
<path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 1792 1792">
<path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 1792 1792">
<path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z">
</path>
</svg>
</div>
</div>
</div>
<div class="mt-3">
<p class="mt-1 max-w-xs font-light text-white">
My first job of scanning photos at the Memories 2 Digital Photo Scanning was fantastic. She completed the work quickly while I was waiting. Thanks for a great service..
</p>
</div>
<div class="flex items-start text-gray-100 mt-6">
<button class="mr-4 hover:text-white">
<svg width="25" height="25" fill="currentColor" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1664 596q0-81-21.5-143t-55-98.5-81.5-59.5-94-31-98-8-112 25.5-110.5 64-86.5 72-60 61.5q-18 22-49 22t-49-22q-24-28-60-61.5t-86.5-72-110.5-64-112-25.5-98 8-94 31-81.5 59.5-55 98.5-21.5 143q0 168 187 355l581 560 580-559q188-188 188-356zm128 0q0 221-229 450l-623 600q-18 18-44 18t-44-18l-624-602q-10-8-27.5-26t-55.5-65.5-68-97.5-53.5-121-23.5-138q0-220 127-344t351-124q62 0 126.5 21.5t120 58 95.5 68.5 76 68q36-36 76-68t95.5-68.5 120-58 126.5-21.5q224 0 351 124t127 344z">
</path>
</svg>
</button>
<button class="hover:text-white">
<svg width="25" height="25" fill="currentColor" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1344 1024q133 0 226.5 93.5t93.5 226.5-93.5 226.5-226.5 93.5-226.5-93.5-93.5-226.5q0-12 2-34l-360-180q-92 86-218 86-133 0-226.5-93.5t-93.5-226.5 93.5-226.5 226.5-93.5q126 0 218 86l360-180q-2-22-2-34 0-133 93.5-226.5t226.5-93.5 226.5 93.5 93.5 226.5-93.5 226.5-226.5 93.5q-126 0-218-86l-360 180q2 22 2 34t-2 34l360 180q92-86 218-86z">
</path>
</svg>
</button>
</div>
</div>
</section>
<!-- testimonial 21 end -->
<!-- testimonial 22 start -->
<section class="section_divider">
<div>Testimonail 22</div>
</section>
<div class="bg-white dark:bg-gray-800 w-72 shadow-lg mx-auto rounded-xl p-4">
<p class="text-gray-600 dark:text-white">
<span class="font-bold text-indigo-500 text-lg">
“
</span>
To get social media testimonials like these, keep your customers engaged with your social media accounts by posting regularly yourself
<span class="font-bold text-indigo-500 text-lg">
”
</span>
</p>
<div class="flex items-center mt-4">
<a href="#" class="block relative">
<img alt="profil" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="mx-auto object-cover rounded-full h-10 w-10 "/>
</a>
<div class="flex flex-col ml-2 justify-between">
<span class="font-semibold text-indigo-500 text-sm">
Jean Miguel
</span>
<span class="dark:text-gray-400 text-xs flex items-center">
User of Tail-Kit
<img src="#__" class="ml-2 h-4 w-4"/>
</span>
</div>
</div>
</div>
<!-- testimonial 22 end -->
<!-- testimonial 23 start -->
<section class="section_divider">
<div>Testimonial 23</div>
</section>
<div class="mx-auto py-10 px-4 w-full max-w-7xl bg-gray-50">
<div class="relative mx-auto w-full h-full max-w-5xl flex shadow-xl">
<div class="z-10 relative py-10 pl-8 pr-2 w-full md:w-3/5 min-h-360px rounded md:rounded-r-none bg-blue-600 bg-opacity-70 md:bg-opacity-100 text-white">
<div class="mx-auto max-w-md flex flex-col">
<div class="flex-shrink-0">
<svg class="w-10 lg:w-12 h-10 lg:h-12" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/></svg>
</div>
<p class="text-xl sm:text-2xl lg:text-3xl font-extrabold leading-normal">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur aliquid, illo reiciendis voluptatum asperiores.</p>
<h3 class="mt-2 text-base font-bold">Adam Negan </h3>
<p class="text-sm">CEO of Bismart Enterprise</p>
</div>
</div>
<div class="absolute md:relative w-full md:w-2/5 min-h-full rounded-r overflow-hidden bg-blue-600">
<img src="https://fancytailwind.com/static/profile13-9abe52b1e8851f9e4afde349f2789d3e.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover filter grayscale brightness-125" />
</div>
<div class="z-10 absolute -bottom-5 right-1/2 md:-right-3 py-1 px-3 space-x-3 flex bg-yellow-500 text-yellow-100 transform translate-x-1/2 md:translate-x-0">
<button type="button" aria-label="previous" class="flex-shrink-0 hover:text-white" onClick={previousTestimony}>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
</svg>
</button>
<button type="button" aria-label="next" class="flex-shrink-0 hover:text-white" onClick={nextTestimony}>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</button>
</div>
</div>
</div>
<!-- testimonial 23 end -->
<!-- start of script section -->
<script type="text/javascript">
let toogler = document.getElementById("dark_mood_toogler");
let doc_html_el = document.getElementsByTagName('html')[0];
doc_html_el.addEventListener('keyup',(e)=>{
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
if(e.ctrlKey && e.keyCode =='220'){
doc_html_el.class =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
}
})
toogler.addEventListener('click',()=>{
doc_html_el.class =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
})
</script>
<!-- end of script section -->
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink