diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index faf32b58..3854da22 100644
--- 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 (
@@ -77,16 +106,42 @@ function Feature({Svg, title, description}) {
);
}
-export default function HomepageFeatures() {
+function Testimonial({ name, review }) {
return (
-
-
-
- {FeatureList.map((props, idx) => (
-
- ))}
+
+ );
+}
+
+export default function HomepageFeatures() {
+ return (
+ <>
+
+
+
+ {FeatureList.map((props, idx) => (
+
+ ))}
+
+
+
+
+
+
+
OUR TESTIMONIALS
+
+ {TestimonialList.map((props, idx) => (
+
+ ))}
+
+
+
+ >
);
}
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
index dd4ab61d..35886b56 100644
--- 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);
}
-}
\ No newline at end of file
+}
+
+.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;
+}