✨ style: minor mods in ui color+cols

docusaurus.config.js

@@ -19,6 +19,7 @@ const config = {
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
   baseUrl: '/DevContrib/',
+  trailingSlash: false,
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.

src/components/HomepageFeatures/index.js

@@ -38,12 +38,16 @@ 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={clsx(styles.feature)}>
+        <div className="text--center">
+          <Svg className={styles.featureSvg} role="img" />
+        </div>
+        <div className="text--center padding-horiz--md">
+          <Heading as="h3" className={clsx(styles.featureTitle)}>
+            {title}
+          </Heading>
+          <p className={clsx(styles.featureDescription)}>{description}</p>
+        </div>
       </div>
     </div>
   );
@@ -51,7 +55,7 @@ function Feature({Svg, title, description}) {
 
 export default function HomepageFeatures() {
   return (
-    <section className={styles.features}>
+    <section className={clsx(styles.features)}>
       <div className="container">
         <div className="row">
           {FeatureList.map((props, idx) => (

src/components/HomepageFeatures/styles.module.css

@@ -1,11 +1,61 @@
+/* Feature Section Styling */
 .features {
+  background-color: #f5f5f5;
+  padding: 4rem 0;
+}
+
+.feature {
   display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   align-items: center;
-  padding: 2rem 0;
-  width: 100%;
+  padding: 2rem;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.feature:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 }
 
 .featureSvg {
-  height: 200px;
-  width: 200px;
+  width: 80px;
+  height: 80px;
+  margin-bottom: 1.5rem;
+  transition: fill 0.3s ease;
 }
+
+.feature:hover .featureSvg {
+  fill: #6495ed;
+}
+
+.featureTitle {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+  color: #333;
+}
+
+.featureDescription {
+  color: #666;
+  font-size: 1rem;
+  line-height: 1.5;
+  text-align: center;
+  max-width: 300px;
+  margin: 0 auto;
+}
+
+/* Responsive grid for feature cards */
+@media (max-width: 768px) {
+  .features {
+    padding: 2rem 0;
+  }
+
+  .feature {
+    margin-bottom: 2rem;
+  }
+}
+

src/pages/index.module.css

@@ -1,23 +1,145 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
+/* Hero Banner Section */
 .heroBanner {
-  padding: 4rem 0;
+  padding: 5rem 2rem;
   text-align: center;
   position: relative;
   overflow: hidden;
+  background: linear-gradient(to right, #6495ed, #3b82f6); /* Added gradient background */
+  color: white;
+  border-radius: 12px;
 }
 
 @media screen and (max-width: 996px) {
   .heroBanner {
-    padding: 2rem;
+    padding: 3rem 1.5rem;
   }
 }
 
+.hero__title {
+  font-size: 3rem;
+  font-weight: bold;
+  letter-spacing: -0.5px;
+  line-height: 1.2;
+  margin-bottom: 1.5rem;
+  text-shadow: 2px 2px rgba(0, 0, 0, 0.2); /* Slight text shadow for depth */
+}
+
+.hero__subtitle {
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  opacity: 0.9;
+  line-height: 1.5;
+  font-weight: 300;
+}
+
+@media screen and (max-width: 996px) {
+  .hero__title {
+    font-size: 2.5rem;
+  }
+  .hero__subtitle {
+    font-size: 1.2rem;
+  }
+}
+
+/* Buttons Section */
 .buttons {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  gap: 20px;
+  margin-top: 2rem;
+  animation: fadeIn 1s ease-out; /* Added fade-in animation */
 }
+
+.button {
+  padding: 12px 30px;
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 50px;
+  background-color: #6495ed;
+  color: white;
+  text-align: center;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* Subtle box-shadow for better depth */
+}
+
+.button:hover {
+  background-color: #4169e1;
+  color: #fff;
+  transform: translateY(-5px); /* Smooth hover effect */
+}
+
+.button::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 300%;
+  height: 300%;
+  background-color: #fff;
+  transition: width 0.4s ease, height 0.4s ease, top 0.4s ease, left 0.4s ease;
+  border-radius: 50%;
+  z-index: 0;
+  transform: translate(-50%, -50%);
+}
+
+.button:hover::before {
+  width: 0;
+  height: 0;
+  top: 50%;
+  left: 50%;
+}
+
+/* Animation for Fade-in */
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Feature Section */
+.features {
+  background: #f8fafc; /* Light background for features */
+  padding: 4rem 0;
+}
+
+.featureSvg {
+  max-width: 150px;
+  max-height: 150px;
+  margin-bottom: 20px;
+  transition: transform 0.3s ease;
+}
+
+.featureSvg:hover {
+  transform: scale(1.1); /* Slight scaling effect on hover */
+}
+
+.text--center {
+  text-align: center;
+}
+
+/* Typography Adjustments */
+h1, h2, h3 {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 700;
+}
+
+p {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 300;
+  line-height: 1.6;
+}
+