Review Section(Testimonial)Added (#488)

Co-authored-by: Shubhadip Bhowmik <[email protected]>
subhadipbhowmik · Aug 9, 2024 · 1138f05 · 1138f05
1 parent 5e98d64
commit 1138f05
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 15 deletions.
diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
@@ -63,7 +64,35 @@ const FeatureList = [
   },
 ];
 
-function Feature({Svg, title, description}) {
+const TestimonialList = [
+  {
+    name: 'John Doe',
+    review: 'This curriculum is incredibly structured and easy to follow. It made learning C++ a breeze!',
+  },
+  {
+    name: 'Jane Smith',
+    review: 'The documentation is top-notch. I could easily find explanations and code samples for all topics.',
+  },
+  {
+    name: 'Alex Johnson',
+    review: 'Being an open-source project, it offers great opportunities to contribute and learn practically.',
+  },
+  {
+    name: 'Chris Lee',
+    review: 'The free access to all resources is fantastic. It makes learning C++ accessible to everyone.',
+  },
+  {
+    name: 'Pat Kim',
+    review: 'The community engagement is superb. It’s great to have support and collaboration from other learners.',
+  },
+  {
+    name: 'Amayra',
+    review: 'The course was Incredible. It was Beginner Friendly and well organised.Loved it!!.',
+  },
+
+];
+
+function Feature({ Svg, title, description }) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
@@ -77,16 +106,42 @@ function Feature({Svg, title, description}) {
   );
 }
 
-export default function HomepageFeatures() {
+function Testimonial({ name, review }) {
   return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
+    <div className={clsx('col col--2')}>
+      <div className={clsx(styles.testimonialCard, 'card')}>
+        <div className="card__body">
+          <Heading as="h4" className="text--center">{name}</Heading>
+          <p className="text--center">"{review}"</p>
         </div>
       </div>
-    </section>
+    </div>
+  );
+}
+
+export default function HomepageFeatures() {
+  return (
+    <>
+      <section className={styles.features}>
+        <div className="container">
+          <div className="row">
+            {FeatureList.map((props, idx) => (
+              <Feature {...props} key={idx} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className={styles.testimonials}>
+        <div className="container">
+          <Heading as="h2" className="text--center">OUR TESTIMONIALS</Heading>
+          <div className="row">
+            {TestimonialList.map((props, idx) => (
+              <Testimonial {...props} key={idx} />
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
   );
 }
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
@@ -3,24 +3,47 @@
   align-items: center;
   padding: 2rem 0;
   width: 100%;
-
 }
 
 .featureSvg {
   height: 200px;
   width: 200px;
+  padding: 20px;
+  margin: 10px;
+  align-items: center;
   transform: translateX(0px);
   animation: float 6s ease-out infinite;
 }
 
 @keyframes float {
-  0%{
+  0% {
     transform: translateY(0px);
   }
-  50%{
-  transform: translateY(-15px);
+  50% {
+    transform: translateY(-15px);
   }
-  100%{
+  100% {
     transform: translateY(0px);
   }
-}
+}
+
+.testimonialCard {
+  display: flex;
+  align-items: center;
+  padding: 2rem;
+  height: 300px;
+  width: 100%;
+  background-color: #ecf6f0;
+  border-radius: 8px;
+  margin: 10px;
+  transition: transform 0.25s ease-in-out;
+  box-shadow: 0 8px 16px rgba(6, 1, 1, 0.1);
+}
+
+.testimonialCard:hover {
+  transform: translateY(-15px);
+}
+
+.testimonialCard .card__body {
+  text-align: center;
+}