From 55615907980f9e2cd9346de8ec2c80f95fa4d558 Mon Sep 17 00:00:00 2001
From: Preet Kalra <preet.k25627@nst.rishihood.edu.in>
Date: Wed, 29 Jul 2026 12:54:40 +0530
Subject: [PATCH] Improve homepage feature card layout

---
 src/pages/index.js          | 26 +++++++++++++++++---------
 src/pages/styles.module.css | 24 ++++++++++++++++++++++--
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index f1a6f39c9..4f5ba8d66 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -78,17 +78,25 @@ const features = [
   },
 ];
 
-function Feature({imageUrl, title, description}) {
+function Feature({ imageUrl, title, description }) {
   const imgUrl = useBaseUrl(imageUrl);
+
   return (
-    <div className={clsx('col col--4', styles.feature)}>
-      {imgUrl && (
-        <div className="text--center">
-          <img className={styles.featureImage} src={imgUrl} alt={title} />
-        </div>
-      )}
-      <h3>{title}</h3>
-      <p>{description}</p>
+    <div className={clsx('col col--4')}>
+      <div className={styles.feature}>
+        {imgUrl && (
+          <div className="text--center">
+            <img
+              className={styles.featureImage}
+              src={imgUrl}
+              alt={title}
+            />
+          </div>
+        )}
+
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
     </div>
   );
 }
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
index 85a3be075..74cf6c94a 100644
--- a/src/pages/styles.module.css
+++ b/src/pages/styles.module.css
@@ -18,6 +18,16 @@
 
 .feature {
   margin-top: 2rem;
+  padding: 1.5rem;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 12px;
+  height: 100%;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  background: var(--ifm-background-surface-color);
+}
+.feature:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 20px rgba(0,0,0,.08);
 }
 
 @media screen and (max-width: 966px) {
@@ -48,10 +58,20 @@
 }
 
 .featureImage {
-  height: 200px;
-  width: 200px;
+  width: 180px;
+  height: 180px;
+  object-fit: contain;
+  margin-bottom: 1rem;
+}
+.buttons {
+  flex-direction: column;
+  gap: 1rem;
 }
 
+.buttons a {
+  width: 100%;
+  max-width: 320px;
+}
 .intro {
   display: flex;
   align-items: center;