Merge pull request #99 from danbaruka/fix/improve-nav-footer-accessibility-colors

Chore: Fix/improve nav footer accessibility colors (#94)

Author: Ranchhand87

website/src/components/HomepageFeatures/index.tsx

@@ -6,6 +6,7 @@ import styles from './styles.module.css';
 type FeatureItem = {
   title: string;
   description: ReactNode;
+  image: string;
 };
 
 const FeatureList: FeatureItem[] = [
@@ -18,6 +19,7 @@ const FeatureList: FeatureItem[] = [
         to enhance the Cardano Layer 1 developer experience.
       </>
     ),
+    image: '/img/OSC-con.png',
   },
   {
     title: 'Developer Advocate Program',
@@ -28,6 +30,7 @@ const FeatureList: FeatureItem[] = [
         programs within the Cardano ecosystem.
       </>
     ),
+    image: '/img/DA-icon.png',
   },
   {
     title: 'Member-Driven Organization',
@@ -38,14 +41,18 @@ const FeatureList: FeatureItem[] = [
         the Cardano ecosystem through collaborative innovation.
       </>
     ),
+    image: '/img/IntersectMBO.svg',
   },
 ];
 
-function Feature({title, description}: FeatureItem) {
+function Feature({title, description, image}: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className={styles.featureCard}>
         <div className={styles.featureContent}>
+          <div className={styles.featureImageContainer}>
+            <img src={image} alt={title} className={styles.featureImage} />
+          </div>
           <Heading as="h3" className={styles.featureTitle}>{title}</Heading>
           <p className={styles.featureDescription}>{description}</p>
         </div>

website/src/components/HomepageFeatures/styles.module.css

@@ -25,29 +25,63 @@
 
 .featureCard {
   background: #ffffff;
-  border: 1px solid rgba(1, 40, 170, 0.1);
+  border: 1px solid rgba(37, 85, 254, 0.1);
   border-radius: 16px;
   padding: 2.5rem 2rem;
   height: 100%;
   transition: all 0.3s ease;
-  box-shadow: 0 2px 8px rgba(1, 40, 170, 0.05);
+  box-shadow: 0 2px 8px rgba(37, 85, 254, 0.05);
 }
 
 .featureCard:hover {
   border-color: var(--ifm-color-primary);
-  box-shadow: 0 8px 32px rgba(1, 40, 170, 0.15);
+  box-shadow: 0 8px 32px rgba(37, 85, 254, 0.15);
   transform: translateY(-4px);
 }
 
 .featureContent {
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.featureImageContainer {
+  width: 120px;
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(37, 85, 254, 0.05) 0%, rgba(46, 123, 255, 0.05) 100%);
+  border-radius: 20px;
+  padding: 1.5rem;
+  transition: all 0.3s ease;
+}
+
+.featureCard:hover .featureImageContainer {
+  background: linear-gradient(135deg, rgba(37, 85, 254, 0.1) 0%, rgba(46, 123, 255, 0.1) 100%);
+  transform: scale(1.05);
+}
+
+.featureImage {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  filter: drop-shadow(0 4px 12px rgba(37, 85, 254, 0.15));
+  transition: all 0.3s ease;
+}
+
+.featureCard:hover .featureImage {
+  filter: drop-shadow(0 6px 20px rgba(37, 85, 254, 0.25));
+  transform: scale(1.05);
 }
 
 .featureTitle {
   font-size: 1.5rem;
   font-weight: 600;
-  color: var(--ifm-color-primary);
-  margin-bottom: 1.5rem;
+  color: #f55521;
+  margin: 0;
   line-height: 1.3;
 }
 
@@ -65,12 +99,28 @@
 
 [data-theme='dark'] .featureCard {
   background: var(--ifm-background-surface-color);
-  border-color: rgba(77, 102, 209, 0.2);
+  border-color: rgba(46, 123, 255, 0.2);
 }
 
 [data-theme='dark'] .featureCard:hover {
   border-color: var(--ifm-color-primary);
-  box-shadow: 0 8px 32px rgba(77, 102, 209, 0.2);
+  box-shadow: 0 8px 32px rgba(46, 123, 255, 0.2);
+}
+
+[data-theme='dark'] .featureImageContainer {
+  background: linear-gradient(135deg, rgba(46, 123, 255, 0.05) 0%, rgba(46, 123, 255, 0.1) 100%);
+}
+
+[data-theme='dark'] .featureCard:hover .featureImageContainer {
+  background: linear-gradient(135deg, rgba(46, 123, 255, 0.1) 0%, rgba(46, 123, 255, 0.15) 100%);
+}
+
+[data-theme='dark'] .featureImage {
+  filter: drop-shadow(0 4px 12px rgba(46, 123, 255, 0.2));
+}
+
+[data-theme='dark'] .featureCard:hover .featureImage {
+  filter: drop-shadow(0 6px 20px rgba(46, 123, 255, 0.3));
 }
 
 /* Responsive design */