Update header link to "Discover Events" and fix hosts logos

Green-Software-Foundation · Aug 25, 2024 · 3b4489f · 3b4489f
1 parent cbc7a16
commit 3b4489f
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 46 deletions.
diff --git a/public/hosts/goldman-sachs.svg b/public/hosts/goldman-sachs.svg
diff --git a/src/components/event-card.astro b/src/components/event-card.astro
@@ -1,11 +1,15 @@
 ---
 import { Icon } from "astro-icon/components";
 
-const { address, country, countryCode, date, time, organizers } = Astro.props;
+const { address, country, countryCode, date, time, organizers, link } =
+  Astro.props;
 ---
 
-<div
-  class="flex flex-col items-center w-full sm:max-w-sm bg-primary-dark rounded-lg hover:-translate-y-2 transition-transform group"
+<a
+  href={link}
+  target="_blank"
+  rel="noreferrer"
+  class={`flex flex-col items-center w-full sm:max-w-sm bg-primary-dark rounded-lg transition-transform group ${link ? 'hover:-translate-y-2 cursor-pointer' : ' cursor-auto'}`}
 >
   <div
     class="py-4 px-4 mb-2 text-xs font-bold text-white bg-primary-default w-full rounded-t-lg flex justify-between"
@@ -33,20 +37,25 @@ const { address, country, countryCode, date, time, organizers } = Astro.props;
       </div>
     )
   }
-  {address && country && (
-    <h5 class="text-base font-extrabold text-white text-center">{`${address}, ${country}`}</h5>
-  )}
-    <h5 class="mt-2 text-primary-lighter">Organized by:</h5>
+  {
+    address && country && (
+      <h5 class="text-base font-extrabold text-white text-center">{`${address}, ${country}`}</h5>
+    )
+  }
+  <h5 class="mt-2 text-primary-lighter">Organized by:</h5>
   <div class="flex items-center justify-center gap-3 mb-2">
-    { 
+    {
       organizers.map((organizer) => (
-        <span class="font-extrabold text-secondary-default">{organizer.name}</span>
+        <span class="font-extrabold text-secondary-default">
+          {organizer.name}
+        </span>
       ))
     }
   </div>
+
   <div
     class="inline-flex text-primary-lighter rounded-lg pb-4 group-hover:translate-x-1 transition-transform"
   >
-    <Icon name="lucide:move-right" />
+    {link && <Icon name="lucide:move-right" />}
   </div>
-</div>
+</a>
diff --git a/src/components/header.astro b/src/components/header.astro
@@ -15,10 +15,11 @@ import { Icon } from "astro-icon/components";
     >
       Learn More About GSF
     </a>
-    <button
+    <a
+      href="#events"
       class="bg-secondary-default text-gray-darkest text-sm font-bold py-3.5 px-8 rounded-lg hover:bg-btn-hover transition-colors"
     >
-      Register
-    </button>
+      Discover Events
+    </a>
   </div>
 </nav>
diff --git a/src/data/regional-events.json b/src/data/regional-events.json
@@ -70,21 +70,7 @@
     ]
   },
   {
-    "address": "Helsinki",
-    "country": "Finland",
-    "countryCode": "FI",
-    "date": "October 3",
-    "time": "",
-    "eventLink": "",
-    "organizers": [
-      {
-        "name": "Thoughtworks",
-        "logo": "/hosts/thoughtworks.svg"
-      }
-    ]
-  },
-  {
-    "address": "Barcelona",
+    "address": "Madrid",
     "country": "Spain",
     "countryCode": "ES",
     "date": "October 3",
@@ -228,7 +214,26 @@
         "name": "NTT Data",
         "logo": "/hosts/ntt-data.svg",
         "height": "2rem"
+      },
+      {
+        "name": "CAST",
+        "logo": "/hosts/cast.svg"
+
+      }
+    ]
+  },
+  {
+    "address": "Birmingham",
+    "country": "UK",
+    "countryCode": "GB",
+    "date": "October 2",
+    "time": "2-6pm GMT",
+    "eventLink": "",
+    "organizers": [
+      {
+        "name": "Goldman Sachs",
+        "logo": "/hosts/goldman-sachs.svg"
       }
     ]
   }
-]
+]
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -81,16 +81,15 @@ const hosts = regionalEventsData
             (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
           )
           .map((item) => (
-            <a href={item.eventLink} target="_blank" rel="noreferrer">
-              <EventCard
-                address={item.address}
-                country={item.country}
-                countryCode={item.countryCode}
-                date={item.date}
-                time={item.time}
-                organizers={item.organizers}
-              />
-            </a>
+            <EventCard
+              address={item.address}
+              country={item.country}
+              countryCode={item.countryCode}
+              date={item.date}
+              time={item.time}
+              organizers={item.organizers}
+              link={item.eventLink}
+            />
           ))
       }
     </div>