|
| 1 | +--- |
| 2 | +import { getCollection } from "astro:content"; |
| 3 | +import { Image } from "astro:assets"; |
| 4 | +import Section from "@ui/Section.astro"; |
| 5 | +import Headline from "@ui/Headline.astro"; |
| 6 | +import Button from "@ui/Button.astro"; |
| 7 | +import { sponsorLogos } from "@data/sponsorLogos"; |
| 8 | +
|
| 9 | +const allPartners = await getCollection("sponsors", ({ data }) => { |
| 10 | + const isProd = import.meta.env.MODE === "production"; |
| 11 | + const notDraft = !isProd || data.draft !== true; |
| 12 | + const isPartner = data.tier === "Partners"; |
| 13 | + return notDraft && isPartner; |
| 14 | +}); |
| 15 | +
|
| 16 | +const isPyData = (name: string) => name.startsWith("PyData"); |
| 17 | +
|
| 18 | +const regular = allPartners |
| 19 | + .filter(p => !isPyData(p.data.name)) |
| 20 | + .sort((a, b) => a.data.name.localeCompare(b.data.name)); |
| 21 | +
|
| 22 | +const pydata = allPartners |
| 23 | + .filter(p => isPyData(p.data.name)) |
| 24 | + .sort((a, b) => a.data.name.localeCompare(b.data.name)); |
| 25 | +
|
| 26 | +const partners = [...regular, ...pydata]; |
| 27 | +
|
| 28 | +const sectionTitle = "Community Partners"; |
| 29 | +const sectionSubtitle = "Meet the local Python communities joining us at EuroPython 2026"; |
| 30 | +--- |
| 31 | + |
| 32 | +<Section variant="secondary"> |
| 33 | + <Headline id="community-partners" title={sectionTitle} center="true" /> |
| 34 | + <div class="container mx-auto px-6"> |
| 35 | + <div class="text-center mb-12"> |
| 36 | + <p class="text-lg text-gray-600 max-w-2xl mx-auto">{sectionSubtitle}</p> |
| 37 | + </div> |
| 38 | + |
| 39 | + <div class="partners-grid grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 gap-8 max-w-4xl mx-auto"> |
| 40 | + {partners.map((partner) => { |
| 41 | + const logo = sponsorLogos[partner.id]; |
| 42 | + return ( |
| 43 | + <a |
| 44 | + href={`/community-partners#sponsor-${partner.id}`} |
| 45 | + class="partner-card bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-4 border border-gray-100 hover:border-primary hover:-translate-y-1 flex flex-col items-center justify-center aspect-square" |
| 46 | + > |
| 47 | + {logo && ( |
| 48 | + <Image |
| 49 | + src={logo} |
| 50 | + alt={`${partner.data.name} Logo`} |
| 51 | + class="max-h-36 max-w-[80%] w-auto object-contain mb-2" |
| 52 | + /> |
| 53 | + )} |
| 54 | + <h3 class="font-semibold text-gray-900 text-center text-sm"> |
| 55 | + {partner.data.name} |
| 56 | + </h3> |
| 57 | + </a> |
| 58 | + ); |
| 59 | + })} |
| 60 | + </div> |
| 61 | + |
| 62 | + <div class="mt-10 text-center"> |
| 63 | + <Button url="/community-partners">Learn more about our partners</Button> |
| 64 | + </div> |
| 65 | + </div> |
| 66 | +</Section> |
| 67 | + |
| 68 | +<style> |
| 69 | + .partner-card:hover { |
| 70 | + transform: translateY(-4px); |
| 71 | + } |
| 72 | + |
| 73 | + .partners-grid { |
| 74 | + animation: fadeInUp 0.6s ease-out; |
| 75 | + } |
| 76 | + |
| 77 | + @keyframes fadeInUp { |
| 78 | + from { |
| 79 | + opacity: 0; |
| 80 | + transform: translateY(30px); |
| 81 | + } |
| 82 | + to { |
| 83 | + opacity: 1; |
| 84 | + transform: translateY(0); |
| 85 | + } |
| 86 | + } |
| 87 | + |
| 88 | + .container { |
| 89 | + max-width: 1150px; |
| 90 | + } |
| 91 | +</style> |
0 commit comments