Added alternative image support

Signed-off-by: Jean-Baptiste Bianchi <jb.bianchi@neuroglia.io>

Author: JBBianchi

Diff for: public/img/logos/redhat.png

@@ -4,6 +4,7 @@ interface Props {
   alignment?: 'center' | 'start' | 'end';
   icon?: string;
   image?: string;
+  imageDark?: string;
   imageSize?: 'small' | 'medium';
 }
 
@@ -12,6 +13,7 @@ const {
   alignment = 'center',
   icon,
   image,
+  imageDark,
   imageSize = 'small',
 } = Astro.props;
 ---
@@ -25,7 +27,7 @@ const {
   ),
 ]}>
   <div class="card-body">
-    { image && 
+    { (image || imageDark) && 
       <div class:list={[
         'my-4', 
         'flex', 
@@ -35,7 +37,8 @@ const {
           `justify-center`
         ),
       ]}>
-        <img src={image} class={`img--${imageSize}`} />
+        { image && <img src={image} class:list={[`img--${imageSize}`, image && imageDark ? 'image-light' : '']} /> }
+        { imageDark && <img src={imageDark} class:list={[`img--${imageSize}`, image && imageDark ? 'image-dark' : '']} /> }
       </div>
     }
     { icon && <i class={icon}></i> }
@@ -63,4 +66,12 @@ const {
     height: 75px;
     max-width: none;
   }
+
+  html[data-theme="dark"] .image-light {
+    display: none;
+  }
+
+  html[data-theme="light"] .image-dark {
+    display: none;
+  }
 </style>

Diff for: public/img/logos/redhat.svg

@@ -149,14 +149,14 @@ do:
       <p>Neuroglia is a consultancy and solution design company for the digital transformation of companies and their services.</p>
       <a class="link link-accent" href="https://neuroglia.io/" target="_blank" rel="noopener">Learn More</a>
     </Card>
-    <Card title="Red Hat" image="img/logos/redhat.png" imageSize="medium">
+    <Card title="Red Hat" image="img/logos/redhat.svg" imageDark="img/logos/redhat_reverse.svg" imageSize="medium">
       <p>Red Hat sponsors Apache KIE SonataFlow, a tool for creating cloud-native workflows. SonataFlow supports service and event orchestration, integrating with your architecture using CloudEvents, REST calls, and other standard components.</p>
       <a class="link link-accent" href="https://www.redhat.com/en/technologies/cloud-computing/openshift/serverless" target="_blank" rel="noopener">Learn More</a>
     </Card>
     <Card title="Warrify" image="img/logos/warrify.png" imageSize="medium">
       <p>Warrify offers a leading data platform for the retail industry. With "warrify Journeys" (powered by Serverless Workflows) retailers are discovering new ways how to engage their customers in real time.</p>
       <a class="link link-accent" href="https://www.warrify.com" target="_blank" rel="noopener">Learn More</a>
-    </Card>   
+    </Card>
   </Section>
 
   <!-- Sponsors -->