converting all parts to glassmorphism
This commit is contained in:
Bhakti
@@ -6,77 +6,66 @@ import { FaMessage } from "react-icons/fa6";
|
||||
const Testimonial = () => {
|
||||
return (
|
||||
<>
|
||||
<section className="bg-[#FBFFE4] py-12 px-2 md:px-32">
|
||||
<section className=" py-12 px-2 md:px-32">
|
||||
<div className="container mx-auto">
|
||||
<div className="text-center">
|
||||
<h2 className="text-xl sm:text-4xl font-bold mb-4">WHY CHOOSE US</h2>
|
||||
<h2 className="text-xl sm:text-4xl font-bold mb-4">WHY CHOOSE US?</h2>
|
||||
<h1 className="text-3xl sm:text-6xl font-bold mb-4">
|
||||
Benefits of online tutoring services with us
|
||||
Record breaking features like never before
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row justify-center mt-8 h-auto">
|
||||
<div className="w-full h-full md:w-1/3 p-4">
|
||||
<div className="bg-[#B3D8A8] rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
|
||||
<IoMdContacts className=" text-4xl p-1 rounded-lg text-white bg-blue-600 " />
|
||||
|
||||
<h3 className="text-xl font-bold mb-2">One-on-One Mentoring</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
All of our special education experts have a degree in special
|
||||
education
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-sm p-6 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
|
||||
<svg class="w-7 h-7 text-gray-500 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
|
||||
</svg>
|
||||
<a href="#">
|
||||
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">Need a help in Claim?</h5>
|
||||
</a>
|
||||
<p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
|
||||
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
|
||||
See our guideline
|
||||
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="w-full h-full md:w-1/3 p-4">
|
||||
<div className="bg-[#B3D8A8] rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
|
||||
<FaClock className=" text-4xl p-1.5 rounded-lg text-white bg-green-600 " />
|
||||
|
||||
<h3 className="text-xl font-bold mb-2">24/7 Mentor Availability</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Our Mentors are always available to respond as quick as
|
||||
possible for you
|
||||
</p>
|
||||
</div>
|
||||
<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
|
||||
<svg class="w-7 h-7 text-gray-500 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
|
||||
</svg>
|
||||
<a href="#">
|
||||
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">Need a help in Claim?</h5>
|
||||
</a>
|
||||
<p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
|
||||
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
|
||||
See our guideline
|
||||
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="w-full h-full md:w-1/3 p-4">
|
||||
<div className="bg-[#B3D8A8] rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
|
||||
<FaMessage className=" text-4xl p-2 rounded-lg text-white bg-orange-600 " />
|
||||
|
||||
<h3 className="text-xl font-bold mb-2">Interactive Session</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Our digital messaging with audio and video chat features give interactiveness.
|
||||
</p>
|
||||
</div>
|
||||
<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
|
||||
<svg class="w-7 h-7 text-gray-500 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
|
||||
</svg>
|
||||
<a href="#">
|
||||
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">Need a help in Claim?</h5>
|
||||
</a>
|
||||
<p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
|
||||
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
|
||||
See our guideline
|
||||
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* <div class="w-full md:w-1/3 p-4">
|
||||
<div class="bg-white rounded-lg p-6 text-center shadow-md">
|
||||
<img
|
||||
src="https://cdn-icons-png.flaticon.com/512/2768/2768851.png"
|
||||
alt="Icon"
|
||||
class="w-12 h-12 mb-4"
|
||||
/>
|
||||
<h3 class="text-2xl font-bold mb-2">Interactive Whiteboard</h3>
|
||||
<p class="text-gray-600">
|
||||
Our digital whiteboard equipped with audio and video chat
|
||||
features
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 p-4">
|
||||
<div class="bg-white rounded-lg p-6 text-center shadow-md">
|
||||
<img
|
||||
src="https://cdn-icons-png.flaticon.com/512/2768/2768851.png"
|
||||
alt="Icon"
|
||||
class="w-12 h-12 mb-4"
|
||||
/>
|
||||
<h3 class="text-2xl font-bold mb-2">Affordable Prices</h3>
|
||||
<p class="text-gray-600">
|
||||
Choose an expert tutor based on your budget and per hour
|
||||
</p>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user