Added frontend folder structure in Ombase's branch
This commit is contained in:
@@ -0,0 +1,289 @@
|
||||
import React from "react";
|
||||
|
||||
const Reviews = [
|
||||
[
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
],
|
||||
|
||||
[
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
],
|
||||
|
||||
[
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
],
|
||||
];
|
||||
|
||||
const ReviewSection = () => {
|
||||
return (
|
||||
<>
|
||||
<section className="bg-gray-100 py-12">
|
||||
<div className="container mx-auto">
|
||||
<div className="text-center">
|
||||
<h2 className=" text-2xl md:text-4xl font-bold mb-4">OUR TESTIMONIALS</h2>
|
||||
<h1 className="text-3xl md:text-6xl font-bold mb-4">
|
||||
What Our Students Say About Us
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="default-carousel"
|
||||
className="relative w-full"
|
||||
data-carousel="slide"
|
||||
>
|
||||
{/* <!-- Carousel wrapper --> */}
|
||||
<div className="relative h-64 overflow-hidden rounded-lg md:h-96">
|
||||
{/* <!-- Item 1 --> */}
|
||||
{Reviews.map((reviewList) => (
|
||||
<div
|
||||
className="hidden duration-700 ease-in-out w-full"
|
||||
data-carousel-item
|
||||
>
|
||||
<div className="flex w-full items-center justify-center h-full gap-8">
|
||||
{/* Review no 1 */}
|
||||
|
||||
{reviewList.map((review) => (
|
||||
<div className="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 md:py-2">
|
||||
<div className="flex flex-col items-center pb-10 p-2">
|
||||
<img
|
||||
className="w-20 h-20 md:w-24 md:h-24 mb-3 rounded-full shadow-lg"
|
||||
src={`${review.src}`}
|
||||
alt={`${review.alt}`}
|
||||
/>
|
||||
<h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">
|
||||
{review.name}
|
||||
</h5>
|
||||
<span className="text-base font-semibold text-gray-500 dark:text-gray-400">
|
||||
{review.occupation}
|
||||
</span>
|
||||
|
||||
<p className="md:hidden text-sm text-gray-600 text-center">
|
||||
{review.review.substring(0, 35)}....
|
||||
</p>
|
||||
|
||||
<p className="hidden md:block text-sm text-gray-600 text-center">
|
||||
{review.review.substring(0,200)}...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* <!-- Slider indicators --> */}
|
||||
<div className="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
|
||||
<button
|
||||
type="button"
|
||||
className="w-3 h-3 rounded-full"
|
||||
aria-current="true"
|
||||
aria-label="Slide 1"
|
||||
data-carousel-slide-to="0"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-3 h-3 rounded-full"
|
||||
aria-current="false"
|
||||
aria-label="Slide 2"
|
||||
data-carousel-slide-to="1"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-3 h-3 rounded-full"
|
||||
aria-current="false"
|
||||
aria-label="Slide 3"
|
||||
data-carousel-slide-to="2"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-3 h-3 rounded-full"
|
||||
aria-current="false"
|
||||
aria-label="Slide 4"
|
||||
data-carousel-slide-to="3"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-3 h-3 rounded-full"
|
||||
aria-current="false"
|
||||
aria-label="Slide 5"
|
||||
data-carousel-slide-to="4"
|
||||
></button>
|
||||
</div>
|
||||
{/* <!-- Slider controls --> */}
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
|
||||
data-carousel-prev
|
||||
>
|
||||
<span className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
||||
<svg
|
||||
className="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 1 1 5l4 4"
|
||||
/>
|
||||
</svg>
|
||||
<span className="sr-only">Previous</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
|
||||
data-carousel-next
|
||||
>
|
||||
<span className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
||||
<svg
|
||||
className="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="m1 9 4-4-4-4"
|
||||
/>
|
||||
</svg>
|
||||
<span className="sr-only">Next</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReviewSection;
|
||||
Reference in New Issue
Block a user