home nav ui change (#397)

Author: pvishalkeerthan

src/components/homepage/homeNavBoxes.module.css

@@ -5,115 +5,135 @@
   width: 100%;
 }
 
-.featureSvg {
-  height: 200px;
-  width: 200px;
-}
-
-
-
-
-.grid3col{
+.grid3col {
   display: grid;
-  grid-template-columns: repeat(4,minmax(0,1fr));
-  gap:56px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 56px;
   margin: 0 auto;
   padding: 0;
 }
+
 @media screen and (max-width: 1680px) {
-  .grid3col{
-    display: grid;
-    grid-template-columns: repeat(3,minmax(0,1fr));
-    gap:56px;
-    margin: 0 auto;
+  .grid3col {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
+
 @media screen and (max-width: 1180px) {
-  .grid3col{
-    display: grid;
-    grid-template-columns: repeat(2,minmax(0,1fr));
-    gap:56px;
-    margin: 0 auto;
+  .grid3col {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+
 @media screen and (max-width: 768px) {
-  .grid3col{
-    display: grid;
-    grid-template-columns: repeat(1,minmax(0,1fr));
-    gap:56px 0px;
-    margin: 0 auto;
+  .grid3col {
+    grid-template-columns: 1fr;
+    gap: 32px;
   }
 }
 
-
-.listContainer{
-  min-height: 17rem;
+.listContainer {
+  min-height: 20rem;
 }
+
 @media screen and (max-width: 768px) {
-  .listContainer{
-    min-height: 3rem;
+  .listContainer {
+    min-height: 5rem;
     padding-bottom: 1rem;
   }
 }
-.listContainer li{
+
+.listContainer li {
   list-style-type: none;
   position: relative;
+  padding: 0.28rem 1rem;
+  font-size: 1rem;
+  color: #444;
+  transition: color 0.2s;
 }
 
+.listContainer li:hover {
+  color: #007bff;
+}
 
-
-
-
-.listContainer li:before{
-  --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="white" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
+.listContainer li:before {
+  --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="%2300bfff" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
   background: var(--ifm-menu-link-sublist-icon) 50% / 1.25rem 1.25rem;
   transform: rotate(90deg);
-    content: '';
-    position: absolute;
-    height: 1.25rem;
-    width: 1.25rem;
-    left: -1.5rem;
-    top: 0.5rem;
-  }
+  content: '';
+  position: absolute;
+  height: 1.25rem;
+  width: 1.25rem;
+  left: -1.5rem;
+  top: 0.5rem;
+}
 
-.homecard{
+.homecard {
   background-color: #1c1f26;
-  width: 320px;
-  padding: 8px;
+  width: 330px;
+  height: 420px;
+  padding: 20px;
   position: relative;
   display: block;
   border-radius: 16px;
-  border: 1px solid #a8b3cf33;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.homecard:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
+}
+
+html[data-theme='light'] .homecard {
+  background-color: #ffffff;
+  border: 1px solid #e0e0e0;
+  color: #333;
 }
 
-html[data-theme='light'] .homecard{
-  background-color: #fff;
-  border: 1px solid #a8b3cf;
-  color: #000;
+html[data-theme='dark'] .homecard {
+  transition: transform 0.3s, box-shadow 0.3s;
 }
 
+html[data-theme='dark'] .homecard:hover {
+  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.2);
+}
 
-.homecard h2{
-  margin: 8px 16px;
-  min-height: 2.4rem;
-  font-size: 1.25rem;
+.homecard h2 {
+  margin: 0 0 1rem;
+  font-size: 1.5rem;
   line-height: 1.4;
+  font-weight: 700;
+  color: #222;
 }
 
-html[data-theme='light'] .homecard a{
-   color: #000;
+html[data-theme='dark'] .homecard h2 {
+  color: #e0e0e0;
 }
-.homecard a{
-  color: white;
-  text-decoration: underline;
-  line-height: 2rem;;
+
+.homecard a {
+  color: #007bff;
+  text-decoration: none;
+  font-weight: 600;
 }
-html[data-theme='light'] .homeIcon{
-  filter: brightness(0.5);
+
+.homecard a:hover {
+  text-decoration: underline;
 }
-.homeIcon{
-  width: 28px;
-  height: 28px;
-  border-radius: 0!important;
+
+.homeIcon {
+  width: 32px;
+  height: 32px;
+  border-radius: 0 !important;
   margin: 12px 0 4px 16px;
+  filter: brightness(0.9);
+}
+
+html[data-theme='light'] .homeIcon {
+  filter: brightness(0.3);
+}
+
+html[data-theme='dark'] .homeIcon {
+  filter: brightness(1.5);
 }