Add community partners and sponspors

src/components/CommunityPartners.astro

@@ -0,0 +1,129 @@
+---
+import { communityPartners } from "../lib/content"
+---
+
+<section class="community-partners">
+    <h2 class="community-partners-heading">
+        <span class="community-partners-prefix">Community </span>
+        Partners
+    </h2>
+    <div class="community-partners-card">
+        <div id="partners-container">
+            {communityPartners.map((partner, index) => {
+                return <figure class="partner" id={`partner-${index + 1}`}>
+                    <img class="partner-logo" src={partner.logo}/>
+                </figure>
+            })}
+        </div>
+    </div>
+</section>
+
+<style>
+    .community-partners {
+        text-align: center;
+        max-width: 1200px;
+        margin: 0 auto 2.5rem;
+        padding: 0;
+    }
+
+    .community-partners-card {
+        background: rgba(61, 120, 171, 0.1);
+        border: 1px solid rgba(61, 120, 171, 0.2);
+        border-radius: 1rem;
+        overflow: hidden;
+        padding: 4rem 1.5rem 3rem;
+    }
+    .community-partners-heading {
+        font-family: 'Squada One', system-ui, sans-serif;
+		font-size: 2.5rem;
+		font-weight: 400;
+		margin: 0 0 1rem 0;
+		line-height: 1.2;
+		letter-spacing: 0.02em;
+		color: rgb(251, 113, 133);
+    }
+
+    .community-partners-prefix {
+        color: white;
+        font-family: 'Squada One', system-ui, sans-serif;
+        font-size: 2.5rem;
+        font-weight: 400;
+        letter-spacing: 0.02em;
+    }
+
+    @media (min-width: 769px) {
+        .community-partners {
+            margin-bottom: 4rem;
+        }
+
+        .community-partners-card {
+            padding: 6rem 2rem 4rem;
+        }
+
+        .community-partners-heading {
+            font-size: 4rem;
+        }
+
+        .community-partners-prefix {
+            font-size: 4rem;
+        }
+    }
+    .partner {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1.25rem;
+    }
+    .partner-logo {
+        max-width: 100%;
+        max-height: 52px;
+        height: auto;
+        object-fit: contain;
+        display: block;
+    }
+
+    /* Mobile: show 3 logos per row */
+    #partners-container {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        justify-items: center;
+        row-gap: 2.25rem;
+        column-gap: 1.25rem;
+    }
+    @media (min-width: 640px) {
+        #partners-container {
+            display: grid;
+            grid-template-columns: repeat(6, 1fr);
+            grid-template-rows: repeat(2, 1fr);
+            row-gap: 2.25rem;
+            column-gap: 1.5rem;
+        }
+        #partner-1 {
+            grid-column-start: 1;
+            grid-column-end: 3;
+        }
+        #partner-2 {
+            grid-column-start: 3;
+            grid-column-end: 5;
+        }
+        #partner-3 {
+            grid-column-start: 5;
+            grid-column-end: 7;
+        }
+        #partner-4 {
+            grid-column-start: 2;
+            grid-column-end: 4;
+        }
+        #partner-5 {
+            grid-column-start: 4;
+            grid-column-end: 6;
+        }
+    }
+
+    @media (min-width: 769px) {
+        .partner-logo {
+            max-height: 80px;
+        }
+    }
+</style>

src/components/Sponsors.astro

@@ -0,0 +1,210 @@
+---
+import { sponsors } from "../lib/content"
+const platinumSponsors = sponsors.filter(sponsor => sponsor.ranking === 'Platinum');
+const diamondSponsors = sponsors.filter(sponsors => sponsors.ranking === 'Diamond');
+---
+
+<section class="sponsors">
+    <h2 class="sponsors-heading">
+        <span class="sponsors-prefix">Our </span>
+        Sponsors
+    </h2>
+    <div class="sponsors-cards">
+        <div class="sponsor-card">
+            <h3 id="sponsors-platinum" class="sponsor-card-title">Platinum</h3>
+            <div class="sponsor-divider" aria-hidden="true"></div>
+            <div class="sponsor-logos">
+                {platinumSponsors.map((sponsor) => {
+                    return (
+                        <figure class="sponsor-platinum">
+                            <img class="sponsor-logo" src={sponsor.logo}/>
+                            {sponsor.name !== 'AWS' && (
+                                <p class="sponsor-name">{sponsor.name}</p>
+                            )}
+                        </figure>
+                    );
+                })}
+            </div>
+        </div>
+
+        <div class="sponsor-card">
+            <h3 id="sponsors-diamond" class="sponsor-card-title">Diamond</h3>
+            <div class="sponsor-divider" aria-hidden="true"></div>
+            <div class="sponsor-logos">
+                {diamondSponsors.map((sponsor) => {
+                    return (
+                        <figure class="sponsor-diamond">
+                            {sponsor.name === 'Fortinet' ? (
+                                <div id="fortinet-bg">
+                                    <img class="sponsor-logo" id="fortinet" src={sponsor.logo}/>
+                                </div>
+                            ) : (
+                                <img class="sponsor-logo" src={sponsor.logo}/>
+                            )}
+                            {sponsor.name !== 'Fortinet' && (
+                                <p class="sponsor-name">{sponsor.name}</p>
+                            )}
+                        </figure>
+                    );
+                })}
+            </div>
+        </div>
+    </div>
+</section>
+
+<style>
+    .sponsors {
+        text-align: center;
+    }
+    .sponsors-heading {
+        font-family: 'Squada One', system-ui, sans-serif;
+		font-size: 2.5rem;
+		font-weight: 400;
+		margin: 0 0 1rem 0;
+		line-height: 1.2;
+		letter-spacing: 0.02em;
+		color: rgb(168, 251, 90);
+    }
+
+    .sponsors-prefix {
+        color: white;
+        font-family: 'Squada One', system-ui, sans-serif;
+        font-size: 2.5rem;
+        font-weight: 400;
+        letter-spacing: 0.02em;
+    }
+
+    @media (min-width: 769px) {
+        .sponsors-heading {
+            font-size: 4rem;
+        }
+
+        .sponsors-prefix {
+            font-size: 4rem;
+        }
+    }
+
+    .sponsors-cards {
+        max-width: 1200px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 1.5rem;
+        padding: 0 1.5rem;
+    }
+
+    .sponsor-card {
+        flex: 1 1 calc(50% - 0.75rem);
+    }
+
+    @media (min-width: 769px) {
+        .sponsors-cards {
+            flex-direction: row;
+            flex-wrap: nowrap;
+            gap: 2.5rem;
+            padding: 0;
+        }
+
+        .sponsor-card {
+            flex: 1;
+        }
+    }
+
+    .sponsor-card {
+        background: rgba(61, 120, 171, 0.1);
+        border: 1px solid rgba(61, 120, 171, 0.2);
+        border-radius: 1rem;
+        padding: 3rem 1.5rem 3rem;
+        overflow: hidden;
+    }
+
+    @media (min-width: 769px) {
+        .sponsor-card {
+            padding: 1rem 2rem 4rem;
+        }
+    }
+
+    .sponsor-card-title {
+        font-family: 'Squada One', system-ui, sans-serif;
+        font-size: 1.5rem;
+        font-weight: 400;
+        margin: 0;
+        line-height: 1.1;
+    }
+
+    .sponsor-divider {
+        height: 0;
+        width: 100%;
+        margin: 0.75rem auto 2.25rem auto;
+        border-top: none;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+        background: transparent;
+        border-radius: 0;
+        display: block;
+    }
+
+    .sponsor-logos {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2rem;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .sponsor-platinum,
+    .sponsor-diamond {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+    }
+
+    .sponsor-logo {
+        max-width: 50%;
+    }
+    #sponsors-platinum {
+        color: #6ABAC3;
+    }
+    #sponsors-diamond {
+        color: #B367B3;
+    }
+    #fortinet-bg {
+        display: flex;
+        justify-content: center;
+        justify-self: center;
+    }
+    #fortinet {
+        display: flex;
+        justify-self: center;
+        align-self: center;
+        width: auto;
+        max-width: 55%;
+        max-height: 70px;
+        object-fit: contain;
+    }
+
+    .sponsor-name {
+        margin: 0;
+        font-size: 1.1rem;
+        color: white;
+        opacity: 0.95;
+        font-family: 'Noto Sans', system-ui, sans-serif;
+    }
+
+    @media (min-width: 769px) {
+        .sponsor-card-title {
+            font-size: 2.25rem;
+        }
+
+        .sponsor-logo {
+            max-width: 65%;
+        }
+
+        #fortinet {
+            max-width: 60%;
+            max-height: 90px;
+        }
+    }
+</style>

src/components/VenueLogisticsSectionSecondVersion.astro

@@ -11,7 +11,11 @@ interface Props {
 
 const { content } = Astro.props;
 
-const cityEntries = Object.entries(content) as [City, VenueLogisticsSectionNewVersion][];
+
+const cityEntries = Object.entries(content) as [
+  City,
+  VenueLogisticsSectionNewVersion,
+][];
 ---
 
 {
@@ -96,6 +100,41 @@ const cityEntries = Object.entries(content) as [City, VenueLogisticsSectionNewVe
   }
 
   .venue-logistics-title-box .venue-logistics-heading {
+    font-family: "Squada One", system-ui, sans-serif;
+    font-size: 2.5rem;
+    text-align: center;
+    margin: 0 0 0.5rem 0;
+    color: rgb(255, 193, 77);
+    line-height: 1;
+    letter-spacing: 0.02em;
+    text-transform: none;
+  }
+
+  .venue-logistics-title-box .venue-logistics-heading .heading-prefix {
+    color: white;
+    font-family: "Squada One", system-ui, sans-serif;
+  }
+
+  .venue-logistics-venue {
+    text-align: center;
+    margin: 0;
+    font-size: 1.125rem;
+    line-height: 1.6;
+    opacity: 0.9;
+  }
+
+  @media (min-width: 769px) {
+    .venue-logistics-title-box .venue-logistics-heading {
+      font-size: 4rem;
+    }
+
+    .venue-logistics-venue {
+      font-size: 1.25rem;
+    }
+  }
+
+  .hero-city-title {
+    font-size: 2.5rem;
     font-family: "Squada One", system-ui, sans-serif;
     font-size: 2.5rem;
     text-align: center;