Add Advanced React Canada sponsorship

src/components/Conferences.astro

@@ -0,0 +1,225 @@
+---
+import jsnationImage from "../assets/jsnation.webp";
+import reactAdvancedImage from "../assets/RADV_Canada_event.webp";
+
+const conferences = [
+  {
+    name: "JS Nation US",
+    tagline:
+      "The main JSNation US event is coming up — Special Edition: AI for Web Dev!",
+    dates: "November 17 & 20, 2025",
+    location: "New York & Online",
+    discountCode: "FRIENDS",
+    url: "https://jsnation.us/",
+    image: jsnationImage,
+    imageAlt: "JS Nation US Conference Banner",
+  },
+  {
+    name: "React Advanced Canada",
+    tagline:
+      "React Advanced Canada lands in Toronto 🇨🇦 Join us on March 24 & 26 for 50+ talks, deep technical insights, and networking with some of the brightest minds in the industry.",
+    dates: "March 24 & 26, 2026",
+    location: "Toronto & Online",
+    discountCode: "ForwardJS",
+    url: "https://reactadvanced.com/canada/",
+    image: reactAdvancedImage,
+    imageAlt: "React Advanced Canada Logo",
+  },
+];
+---
+
+<section>
+  <div class="container">
+    <h2>PARTNER CONFERENCES</h2>
+    <div class="conferences">
+      {
+        conferences.map((conference) => (
+          <div class="conference-card">
+            <div class="conference-image">
+              <a
+                href={conference.url}
+                aria-label={`Visit ${conference.name} website`}
+              >
+                <img
+                  src={conference.image.src}
+                  alt={conference.imageAlt}
+                  loading="lazy"
+                />
+              </a>
+            </div>
+
+            <div class="conference-details">
+              <h3>{conference.name}</h3>
+              <p class="tagline">{conference.tagline}</p>
+
+              <div class="info">
+                <div class="info-item">
+                  <span class="label">When:</span>
+                  <span class="value">{conference.dates}</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">Where:</span>
+                  <span class="value">{conference.location}</span>
+                </div>
+              </div>
+
+              <div class="discount">
+                <span class="discount-label">Discount Code:</span>
+                <span class="discount-code">{conference.discountCode}</span>
+              </div>
+
+              <a href={conference.url} class="cta-button">
+                Learn More & Register
+              </a>
+            </div>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</section>
+
+<style>
+  section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    background-color: var(--gray);
+    padding: 3rem 1rem;
+  }
+
+  .container {
+    max-width: 1200px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .conferences {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+    gap: 2rem;
+
+    @media screen and (max-width: 1100px) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .conference-card {
+    display: flex;
+    flex-direction: column;
+    background: white;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .conference-image {
+    width: 100%;
+    overflow: hidden;
+    background: #f5f5f5;
+  }
+
+  .conference-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+  }
+
+  .conference-image:hover img {
+    transform: scale(1.05);
+  }
+
+  .conference-details {
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    flex: 1;
+  }
+
+  h3 {
+    font-size: 1.5rem;
+    margin: 0;
+    color: #000;
+  }
+
+  .tagline {
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #333;
+    margin: 0;
+  }
+
+  .info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin: 0.5rem 0;
+  }
+
+  .info-item {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .label {
+    font-weight: bold;
+    color: #000;
+    min-width: 60px;
+  }
+
+  .value {
+    color: #333;
+  }
+
+  .discount {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem;
+    background: linear-gradient(90deg, var(--purple), var(--blue));
+    border-radius: 4px;
+    text-align: center;
+    margin-top: auto;
+  }
+
+  .discount-label {
+    font-size: 0.875rem;
+    color: #fff;
+    font-weight: 600;
+  }
+
+  .discount-code {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #fff;
+    letter-spacing: 2px;
+    font-family: monospace;
+  }
+
+  .cta-button {
+    display: inline-block;
+    padding: 0.875rem 1.5rem;
+    background: #000;
+    color: #fff;
+    text-decoration: none;
+    text-align: center;
+    border-radius: 4px;
+    font-weight: bold;
+    transition:
+      background 0.2s ease,
+      transform 0.2s ease;
+  }
+
+  .cta-button:hover {
+    background: #333;
+    transform: scale(1.02);
+  }
+
+  .cta-button:active {
+    transform: scale(0.98);
+  }
+</style>

src/components/Events.astro

@@ -82,7 +82,7 @@ const upcomingEvents = await getCollection("upcomingEvents");
     display: flex;
     flex-direction: column;
     gap: 42px;
-    max-width: 1000px;
+    max-width: 1200px;
     width: 100%;
     padding: 2rem 1rem;
   }

src/components/Sponsors.astro

@@ -8,6 +8,7 @@ import JSNation from "../assets/jsnation.svg";
 import Teksystems from "../assets/teksystems.svg";
 import Shopify from "../assets/shopify.svg";
 import InvestOttawa from "../assets/investottawa.svg";
+import ReactAdvancedCanada from "../assets/RADV_Canada_logo.webp";
 
 const sponsors = [
   {
@@ -40,6 +41,11 @@ const sponsors = [
     logo: JSNation,
     href: "https://jsnation.us/",
   },
+  {
+    name: "React Advanced Canada",
+    logo: ReactAdvancedCanada,
+    href: "https://reactadvanced.com/canada/",
+  },
 ];
 ---
 
@@ -106,7 +112,7 @@ const sponsors = [
     display: flex;
     flex-direction: column;
     gap: var(--gap);
-    max-width: 1200px;
+    max-width: 1440px;
     margin: auto;
   }
 
@@ -118,7 +124,7 @@ const sponsors = [
 
   .marquee__hidden {
     display: none;
-    @media screen and (max-width: 1200px) {
+    @media screen and (max-width: 1440px) {
       display: flex;
     }
   }
@@ -131,7 +137,7 @@ const sponsors = [
     gap: 16px;
     animation: none;
 
-    @media screen and (max-width: 1200px) {
+    @media screen and (max-width: 1440px) {
       animation: scroll 12s linear infinite;
     }
   }

src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
 import Events from "../components/Events.astro";
 import Hero from "../components/Hero.astro";
-import JSNation from "../components/JSNation.astro";
+import Conferences from "../components/Conferences.astro";
 import Sponsors from "../components/Sponsors.astro";
 import Layout from "../layouts/Layout.astro";
 ---
@@ -10,5 +10,5 @@ import Layout from "../layouts/Layout.astro";
   <Hero />
   <Sponsors />
   <Events />
-  <JSNation />
+  <Conferences />
 </Layout>