From 022b262f34ecbb8bfd1cc8de59822633f9d9cb83 Mon Sep 17 00:00:00 2001
From: Medha K <medhakvinod@gmail.com>
Date: Tue, 28 May 2024 22:53:44 +0530
Subject: [PATCH 1/3] added hover card effect

---
 src/components/HomepageFeatures/index.js      | 49 +++++++++----------
 .../HomepageFeatures/styles.module.css        | 32 ++++++++++--
 2 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index 70f1e8842..2b3136fa7 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/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,8 +15,8 @@ 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
@@ -23,10 +24,9 @@ const FeatureList = [
       </>
     ),
   },
-
   {
-    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
@@ -34,10 +34,9 @@ const FeatureList = [
       </>
     ),
   },
-
   {
-    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
@@ -45,10 +44,9 @@ const FeatureList = [
       </>
     ),
   },
-
   {
-    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
@@ -56,10 +54,9 @@ const FeatureList = [
       </>
     ),
   },
-
   {
-    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>
   );
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
index b248eb2e5..7946dc269 100644
--- a/src/components/HomepageFeatures/styles.module.css
+++ b/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;
+}

From 633a08bfca6353e21157a80b16b3f5ad597ecaea Mon Sep 17 00:00:00 2001
From: Medha K <medhakvinod@gmail.com>
Date: Wed, 29 May 2024 11:17:13 +0530
Subject: [PATCH 2/3] aligned footer to center

---
 src/css/custom.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/css/custom.css b/src/css/custom.css
index 24468af9e..0b9435240 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -22,3 +22,6 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+.footer{
+  text-align: center;
+}
\ No newline at end of file

From 07a9be83909bd3a6e4be6674c3cfe2a063d5ef16 Mon Sep 17 00:00:00 2001
From: Medha K <medhakvinod@gmail.com>
Date: Wed, 29 May 2024 15:09:53 +0530
Subject: [PATCH 3/3] modified tablet view of the footer

---
 src/css/custom.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 0b9435240..c0c2d03f0 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -22,6 +22,12 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
-.footer{
+.footer {
   text-align: center;
+}
+
+@media (min-width: 700px) {
+  .footer .col {
+      --ifm-col-width: 33%;
+}
 }
\ No newline at end of file