Skip to content

Commit

Permalink
added testi
Browse files Browse the repository at this point in the history
  • Loading branch information
@besoeasy
besoeasy authored Dec 7, 2023
1 parent ec9064b commit 0194ee6
Show file tree
Hide file tree
Showing 9 changed files with 623 additions and 0 deletions.
98 changes: 98 additions & 0 deletions components/testimonials/testi1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<section class="py-24 relative overflow-hidden">
<div class="container mx-auto px-4">
<h1 class="text-4xl lg:text-5xl text-center font-bold font-heading max-w-md lg:max-w-xl mx-auto mb-24">For those seeking an enjoyable way to learn</h1>
<div class="h-96 mb-32 lg:mb-16">
<div class="absolute left-1/2 transform -translate-x-1/2">
<div class="flex gap-8">
<div class="border border-gray-100 shadow rounded-3xl p-8 w-96 h-80">
<div class="flex items-center flex-wrap gap-4 mb-20">
<div class="bg-orange-50 rounded-xl overflow-hidden">
<img src="https://shuffle.dev/solstice-assets/images/testimonials/man-avatar3.png" alt="">
</div>
<div class="p-2 rounded-lg bg-gray-50 bg-opacity-50">
<p>
<span class="font-bold font-heading">Ethan Maynard,</span>
<span></span>
<span class="text-gray-400">Student</span>
</p>
</div>
</div>
<p class="text-gray-700 text-lg">“Yesterday I had my first day to study. What a great experience learning something so useful in simple ways!.”</p>
</div>
<div class="border border-gray-100 shadow rounded-3xl p-8 w-96 h-80">
<div class="flex items-center flex-wrap gap-4 mb-20">
<div class="bg-orange-50 rounded-xl overflow-hidden">
<img src="https://shuffle.dev/solstice-assets/images/testimonials/man-avatar1.png" alt="">
</div>
<div class="p-2 rounded-lg bg-gray-50 bg-opacity-50">
<p>
<span class="font-bold font-heading">Steven Klein,</span>
<span></span>
<span class="text-gray-400">Student</span>
</p>
</div>
</div>
<p class="text-gray-700 text-lg">“I've been more productive with Solstice and my academic performance is getting better every semester.”</p>
</div>
<div class="border border-gray-100 shadow rounded-3xl px-8 lg:px-12 py-8 lg:py-14 w-80 lg:w-96 relative">
<div class="absolute bottom-20 -right-6">
<svg xmlns="http://www.w3.org/2000/svg" width="57" height="65" viewbox="0 0 57 65" fill="none">
<g filter="url(#filter0_d_185_3282)">
<path d="M2.57076 1.83286C2.48332 1.4058 2.93358 1.07148 3.304 1.28843L54.6184 31.3429C54.9928 31.5622 54.9274 32.1332 54.5129 32.2635L28.9156 40.3104C28.8037 40.3456 28.7074 40.4199 28.6437 40.5202L15.5706 61.1006C15.3297 61.4799 14.7611 61.3747 14.6709 60.9342L2.57076 1.83286Z" fill="#FF7100"></path>
<path d="M26.9838 39.4298L26.9837 39.4298L15.8744 56.9188L5.189 4.72776L50.666 31.3633L28.3433 38.3808C27.7839 38.5567 27.3024 38.9282 26.9838 39.4298Z" stroke="white" stroke-width="4"></path>
</g>
<defs><filter id="filter0_d_185_3282" x="0.559814" y="0.220398" width="56.3052" height="64.1128" filterunits="userSpaceOnUse" color-interpolation-filters="sRGB"><feflood flood-opacity="0" result="BackgroundImageFix"></feflood><fecolormatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></fecolormatrix><feoffset dy="1"></feoffset><fegaussianblur stddeviation="1"></fegaussianblur><fecolormatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.28 0"></fecolormatrix><feblend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_185_3282"></feblend><feblend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_185_3282" result="shape"></feblend></filter></defs>
</svg>
</div>
<div class="flex items-center flex-wrap gap-4 mb-20">
<div class="rounded-xl overflow-hidden">
<img src="https://shuffle.dev/solstice-assets/images/testimonials/woman-avatar1.png" alt="">
</div>
<div class="p-2 rounded-lg bg-gray-50 bg-opacity-50">
<p>
<span class="font-bold font-heading">Hanna Stanton,</span>
<span></span>
<span class="text-gray-400">Student</span>
</p>
</div>
</div>
<p class="font-medium text-xl">“I can invite my friend to study in specific topic together. They took learning to the next level.”</p>
</div>
<div class="border border-gray-100 shadow rounded-3xl p-8 w-96 h-80">
<div class="flex items-center flex-wrap gap-4 mb-20">
<div class="rounded-xl overflow-hidden">
<img src="https://shuffle.dev/solstice-assets/images/testimonials/man-avatar2.png" alt="">
</div>
<div class="p-2 rounded-lg bg-gray-50 bg-opacity-50">
<p>
<span class="font-bold font-heading">Levin Sandoval,</span>
<span></span>
<span class="text-gray-400">Student</span>
</p>
</div>
</div>
<p class="text-gray-700 text-lg">“What a great learning experience. I had my first day to study learning something so useful in simple ways!”</p>
</div>
<div class="border border-gray-100 shadow rounded-3xl p-8 w-96 h-80">
<div class="flex items-center flex-wrap gap-4 mb-20">
<div class="bg-orange-50 rounded-xl overflow-hidden">
<img src="https://shuffle.dev/solstice-assets/images/testimonials/woman-avatar2.png" alt="">
</div>
<div class="p-2 rounded-lg bg-gray-50 bg-opacity-50">
<p>
<span class="font-bold font-heading">Elena Rae,</span>
<span></span>
<span class="text-gray-400">Student</span>
</p>
</div>
</div>
<p class="text-gray-700 text-lg">“Yesterday I had my first day to study. What a great experience learning something so useful in simple ways! ”</p>
</div>
</div>
</div>
</div>
<div class="flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="6" viewbox="0 0 160 6" fill="none"><rect width="160" height="6" rx="3" fill="#F0F0F0"></rect><rect x="60" width="40" height="6" rx="3" fill="#FF7100"></rect></svg>
</div>
</div>
</section>
69 changes: 69 additions & 0 deletions components/testimonials/testi2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<section class="py-24">
<div class="container mx-auto px-4">
<h1 class="text-center text-4xl lg:text-5xl font-bold font-heading mb-6 max-w-md mx-auto">Testimonials from our users</h1>
<p class="text-center text-gray-600 mb-20">See what they have to say about us</p>
<div class="flex flex-wrap mb-20 lg:mb-40 -mx-4">
<div class="w-full lg:w-1/3 p-4">
<div class="border border-orange-500 p-12 rounded-t-3xl rounded-br-3xl mb-8 lg:h-full">
<div class="mb-8">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="22" viewbox="0 0 30 22" fill="none">
<path d="M13.1971 4.75862C10.9375 4.89655 9.11058 5.47127 7.71635 6.48276C6.37019 7.49425 5.57692 8.87356 5.33654 10.6207C5.28846 11.2184 5.28846 11.8621 5.33654 12.5517C5.72115 12 6.20192 11.6092 6.77885 11.3793C7.35577 11.1494 8.05289 11.0345 8.87019 11.0345C10.1683 11.0345 11.2981 11.5172 12.2596 12.4828C13.2212 13.4483 13.7019 14.7126 13.7019 16.2759C13.7019 17.977 13.125 19.3563 11.9712 20.4138C10.8173 21.4713 9.30289 22 7.42788 22C5.07212 22 3.24519 21.1724 1.94712 19.5172C0.649038 17.8161 0 15.5862 0 12.8276C0 9.47126 1.05769 6.57471 3.17308 4.13793C5.33654 1.65517 8.67789 0.275861 13.1971 0V4.75862ZM29.4952 4.75862C27.1875 4.89655 25.3606 5.47127 24.0144 6.48276C22.6683 7.49425 21.875 8.87356 21.6346 10.6207C21.5865 11.0345 21.5625 11.6782 21.5625 12.5517C21.9952 12 22.5 11.6092 23.0769 11.3793C23.6538 11.1494 24.351 11.0345 25.1683 11.0345C26.4663 11.0345 27.5962 11.5172 28.5577 12.4828C29.5192 13.4483 30 14.7126 30 16.2759C30 17.977 29.4231 19.3563 28.2692 20.4138C27.1154 21.4713 25.601 22 23.726 22C21.3221 22 19.4712 21.1724 18.1731 19.5172C16.9231 17.8161 16.2981 15.5862 16.2981 12.8276C16.2981 9.47126 17.3558 6.57471 19.4712 4.13793C21.6346 1.65517 24.976 0.275861 29.4952 0V4.75862Z" fill="#FF7100"></path>
</svg>
</div>
<h2 class="text-xl font-bold font-heading mb-4">I've been more productive with Solstice</h2>
<p class="text-gray-600">I've been more productive and my academic performance is getting better every semester.</p>
</div>
<div class="flex items-center gap-4 flex-wrap">
<div class="rounded-full bg-orange-50 overflow-hidden">
<img src="https://shuffle.dev/solstice-assets/images/testimonials/man-avatar1.png" alt="">
</div>
<div>
<h2 class="font-semibold mb-1">Steven Klein</h2>
<p class="text-gray-500 text-sm">Student</p>
</div>
</div>
</div>
<div class="w-full lg:w-1/3 p-4">
<div class="border border-orange-500 p-12 rounded-t-3xl rounded-br-3xl mb-8 lg:h-full">
<div class="mb-8">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="22" viewbox="0 0 30 22" fill="none">
<path d="M13.1971 4.75862C10.9375 4.89655 9.11058 5.47127 7.71635 6.48276C6.37019 7.49425 5.57692 8.87356 5.33654 10.6207C5.28846 11.2184 5.28846 11.8621 5.33654 12.5517C5.72115 12 6.20192 11.6092 6.77885 11.3793C7.35577 11.1494 8.05289 11.0345 8.87019 11.0345C10.1683 11.0345 11.2981 11.5172 12.2596 12.4828C13.2212 13.4483 13.7019 14.7126 13.7019 16.2759C13.7019 17.977 13.125 19.3563 11.9712 20.4138C10.8173 21.4713 9.30289 22 7.42788 22C5.07212 22 3.24519 21.1724 1.94712 19.5172C0.649038 17.8161 0 15.5862 0 12.8276C0 9.47126 1.05769 6.57471 3.17308 4.13793C5.33654 1.65517 8.67789 0.275861 13.1971 0V4.75862ZM29.4952 4.75862C27.1875 4.89655 25.3606 5.47127 24.0144 6.48276C22.6683 7.49425 21.875 8.87356 21.6346 10.6207C21.5865 11.0345 21.5625 11.6782 21.5625 12.5517C21.9952 12 22.5 11.6092 23.0769 11.3793C23.6538 11.1494 24.351 11.0345 25.1683 11.0345C26.4663 11.0345 27.5962 11.5172 28.5577 12.4828C29.5192 13.4483 30 14.7126 30 16.2759C30 17.977 29.4231 19.3563 28.2692 20.4138C27.1154 21.4713 25.601 22 23.726 22C21.3221 22 19.4712 21.1724 18.1731 19.5172C16.9231 17.8161 16.2981 15.5862 16.2981 12.8276C16.2981 9.47126 17.3558 6.57471 19.4712 4.13793C21.6346 1.65517 24.976 0.275861 29.4952 0V4.75862Z" fill="#FF7100"></path>
</svg>
</div>
<h2 class="text-xl font-bold font-heading mb-4">What a great learning experience</h2>
<p class="text-gray-600">Yesterday I had my first day to study. What a great experience learning something so useful in simple ways!</p>
</div>
<div class="flex items-center gap-4 flex-wrap">
<div class="rounded-full bg-amber-200 overflow-hidden">
<img src="https://shuffle.dev/solstice-assets/images/testimonials/woman-avatar2.png" alt="">
</div>
<div>
<h2 class="font-semibold mb-1">Elena Rae</h2>
<p class="text-gray-500 text-sm">Student</p>
</div>
</div>
</div>
<div class="w-full lg:w-1/3 p-4">
<div class="border border-orange-500 p-12 rounded-t-3xl rounded-br-3xl mb-8 lg:h-full">
<div class="mb-8">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="22" viewbox="0 0 30 22" fill="none">
<path d="M13.1971 4.75862C10.9375 4.89655 9.11058 5.47127 7.71635 6.48276C6.37019 7.49425 5.57692 8.87356 5.33654 10.6207C5.28846 11.2184 5.28846 11.8621 5.33654 12.5517C5.72115 12 6.20192 11.6092 6.77885 11.3793C7.35577 11.1494 8.05289 11.0345 8.87019 11.0345C10.1683 11.0345 11.2981 11.5172 12.2596 12.4828C13.2212 13.4483 13.7019 14.7126 13.7019 16.2759C13.7019 17.977 13.125 19.3563 11.9712 20.4138C10.8173 21.4713 9.30289 22 7.42788 22C5.07212 22 3.24519 21.1724 1.94712 19.5172C0.649038 17.8161 0 15.5862 0 12.8276C0 9.47126 1.05769 6.57471 3.17308 4.13793C5.33654 1.65517 8.67789 0.275861 13.1971 0V4.75862ZM29.4952 4.75862C27.1875 4.89655 25.3606 5.47127 24.0144 6.48276C22.6683 7.49425 21.875 8.87356 21.6346 10.6207C21.5865 11.0345 21.5625 11.6782 21.5625 12.5517C21.9952 12 22.5 11.6092 23.0769 11.3793C23.6538 11.1494 24.351 11.0345 25.1683 11.0345C26.4663 11.0345 27.5962 11.5172 28.5577 12.4828C29.5192 13.4483 30 14.7126 30 16.2759C30 17.977 29.4231 19.3563 28.2692 20.4138C27.1154 21.4713 25.601 22 23.726 22C21.3221 22 19.4712 21.1724 18.1731 19.5172C16.9231 17.8161 16.2981 15.5862 16.2981 12.8276C16.2981 9.47126 17.3558 6.57471 19.4712 4.13793C21.6346 1.65517 24.976 0.275861 29.4952 0V4.75862Z" fill="#FF7100"></path>
</svg>
</div>
<h2 class="text-xl font-bold font-heading mb-4">They took learning to the next level</h2>
<p class="text-gray-600">I can invite my friend to study in specific topic together. They took learning to the next level.</p>
</div>
<div class="flex items-center gap-4 flex-wrap">
<div class="rounded-full bg-orange-300 overflow-hidden">
<img src="https://shuffle.dev/solstice-assets/images/testimonials/man-avatar3.png" alt="">
</div>
<div>
<h2 class="font-semibold mb-1">Rob Schapiro</h2>
<p class="text-gray-500 text-sm">Student</p>
</div>
</div>
</div>
</div>
<div class="flex justify-center"><a class="w-full sm:w-auto text-center h-12 inline-flex items-center justify-center py-3 px-5 rounded-full bg-orange-500 border border-orange-600 shadow text-sm font-semibold text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">View more</a></div>
</div>
</section>
33 changes: 33 additions & 0 deletions components/testimonials/testi3.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<section class="py-24 xl:py-36 overflow-hidden">
<div class="container mx-auto px-4">
<div class="border border-orange-100 rounded-3xl p-8 lg:p-16 relative">
<div class="lg:max-w-md xl:max-w-2xl">
<h1 class="text-3xl lg:text-4xl font-semibold mb-16 max-w-lg">“I just wanted to say that Solstice alone is a real lifesaver, but the platform is really next level!”</h1>
<div class="flex items-center justify-between flex-wrap gap-4">
<div>
<h2 class="text-lg font-semibold mb-1">Hanna Stanton</h2>
<p class="text-gray-500">Student</p>
</div>
<div class="flex items-center gap-3">
<a class="text-gray-100 hover:text-orange-500 transition duration-200" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewbox="0 0 10 10" fill="none"><circle cx="5" cy="5" r="5" fill="currentColor"></circle></svg>
</a>
<a class="text-orange-500" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7.5" fill="white" stroke="currentColor"></circle><circle cx="8" cy="8" r="5" fill="currentColor"></circle></svg>
</a>
<a class="text-gray-100 hover:text-orange-500 transition duration-200" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewbox="0 0 10 10" fill="none"><circle cx="5" cy="5" r="5" fill="currentColor"></circle></svg>
</a>
</div>
</div>
</div>
<div class="hidden lg:block absolute right-0 top-1/2 transform -translate-y-1/2 h-128 w-96">
<div class="relative h-full">
<img class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20" src="https://shuffle.dev/solstice-assets/images/testimonials/woman-picture.png" alt="">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 w-full bg-orange-200 rounded-4xl transform rotate-6 h-full"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full bg-orange-50 rounded-4xl transform rotate-12 h-full"></div>
</div>
</div>
</div>
</div>
</section>
Loading

0 comments on commit 0194ee6

Please sign in to comment.