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) => ( - - ))} +
+
+
+ {name} +

"{review}"

-
+
+ ); +} + +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; +}