added hover card effect

src/components/HomepageFeatures/index.js

@@ -1,11 +1,12 @@
-import clsx from "clsx";
-import Heading from "@theme/Heading";
-import styles from "./styles.module.css";
+import React from 'react';
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
 
 const FeatureList = [
   {
-    title: "Structured Curriculum",
-    Svg: require("@site/static/img/hero_images/structured_curriculum.svg").default,
+    title: 'Structured Curriculum',
+    Svg: require('@site/static/img/hero_images/structured_curriculum.svg').default,
     description: (
       <>
         Clear 30-day plan, daily lessons covering essential C++ concepts in an
@@ -14,52 +15,48 @@ const FeatureList = [
     ),
   },
   {
-    title: "Comprehensive Documentation",
-    Svg: require("@site/static/img/hero_images/well_documentation.svg").default,
+    title: 'Comprehensive Documentation',
+    Svg: require('@site/static/img/hero_images/well_documentation.svg').default,
     description: (
       <>
         Detailed guides with explanations, code samples, and resources aiding
         better understanding of <code>C++</code> topics.
       </>
     ),
   },
-
   {
-    title: "We Are Open Source",
-    Svg: require("@site/static/img/hero_images/open_source.svg").default,
+    title: 'We Are Open Source',
+    Svg: require('@site/static/img/hero_images/open_source.svg').default,
     description: (
       <>
         Accessible collaborative C++ project, providing hands-on experience and
         opportunities for practical learning and contributions.
       </>
     ),
   },
-
   {
-    title: "Free Access",
-    Svg: require("@site/static/img/hero_images/free_access.svg").default,
+    title: 'Free Access',
+    Svg: require('@site/static/img/hero_images/free_access.svg').default,
     description: (
       <>
         Entire program, resources, and materials accessible at no cost, ensuring
         inclusivity for all interested learners.
       </>
     ),
   },
-
   {
-    title: "Informative Blogs",
-    Svg: require("@site/static/img/hero_images/informative_blogs.svg").default,
+    title: 'Informative Blogs',
+    Svg: require('@site/static/img/hero_images/informative_blogs.svg').default,
     description: (
       <>
         Regularly updated blogs covering diverse C++ topics, offering
         supplementary insights and knowledge beyond lessons.
       </>
     ),
   },
-
   {
-    title: "Community Engagement",
-    Svg: require("@site/static/img/hero_images/community_engagement.svg").default,
+    title: 'Community Engagement',
+    Svg: require('@site/static/img/hero_images/community_engagement.svg').default,
     description: (
       <>
         Supportive community fostering interaction, collaboration, and learning
@@ -72,12 +69,14 @@ const FeatureList = [
 function Feature({ Svg, title, description }) {
   return (
     <div className={clsx("col col--4")}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <Heading as="h3">{title}</Heading>
-        <p>{description}</p>
+      <div className={styles.featureContainer}>
+        <div className="text--center">
+          <Svg className={styles.featureSvg} role="img" />
+        </div>
+        <div className="text--center padding-horiz--md">
+          <Heading as="h3" className={styles.heading}>{title}</Heading>
+          <p>{description}</p>
+        </div>
       </div>
     </div>
   );

src/components/HomepageFeatures/styles.module.css

@@ -1,11 +1,37 @@
 .features {
   display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 4rem 0;
+}
+.featureContainer {
+  padding: 1rem;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  background-color: var(--ifm-font-color-base-inverse);
+  margin: 1rem;
+  transition: box-shadow 0.3s ease;
+  height: 410px;
 }
 
+.featureContainer:hover {
+  box-shadow: 0 8px 20px var(--ifm-font-color-base);
+  transform: translateY(-10px);
+}
 .featureSvg {
   height: 200px;
   width: 200px;
 }
+
+.textCenter {
+  text-align: center;
+}
+
+.paddingHorizMd {
+  padding: 0 1rem;
+}
+
+.heading {
+  margin-top: 0;
+  font-size: 1.5rem;
+}