Skip to content

Commit 01d6e69

Browse files
escherliesescherlies
committed
Add sponsors display section
- Create a new SponsorsDisplay component - Integrate the sponsors display into the main application layout - Add a new data file for sponsor information - Show sponsors categorized by tier with logos and links - Include call-to-action messages for empty sponsorship tiers - Update sponsorship page headings with emojis
1 parent 77a10cf commit 01d6e69

File tree

4 files changed

+124
-6
lines changed

4 files changed

+124
-6
lines changed

‎src/app.jsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { BsFullscreenExit } from '@aminya/solid-icons/bs/BsFullscreenExit';
99
import TopMenu from "~/components/TopMenu";
1010
import MobileMenu from "~/components/MobileMenu";
1111
import LavaBackground from "~/components/LavaBackground";
12+
import SponsorsDisplay from "~/components/SponsorsDisplay"; // Added import
1213
import "./app.css";
1314

1415
// Create client-only versions of components that need browser APIs
@@ -84,6 +85,9 @@ export default function App() {
8485
{/* Routes */}
8586
<Suspense>{props.children}</Suspense>
8687

88+
{/* Sponsors Display */}
89+
<SponsorsDisplay />
90+
8791
{/* Footer */}
8892
<footer class="w-full py-6 my-6 text-center relative">
8993
<div class="max-w-3xl mx-auto px-6 py-4 rounded-lg flex flex-col md:flex-row items-center justify-center gap-4">

‎src/components/SponsorsDisplay.jsx

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { For, Show } from 'solid-js';
2+
import { A } from "@solidjs/router";
3+
import { sponsors as allSponsors } from '~/data/sponsors';
4+
5+
export default function SponsorsDisplay() {
6+
const tierOrder = ["Diamond", "Gold", "Silver", "Bronze", "Custom"];
7+
const tierEmojis = {
8+
Diamond: "💎",
9+
Gold: "🥇",
10+
Silver: "🥈",
11+
Bronze: "🥉",
12+
Custom: "✨",
13+
};
14+
15+
// Filter custom sponsors without a logo URL upfront
16+
const processedSponsors = allSponsors.filter(sponsor => {
17+
if (sponsor.tier === "Custom") {
18+
return !!sponsor.logoUrl;
19+
}
20+
return true;
21+
});
22+
23+
const sponsorsByTier = tierOrder.reduce((acc, tier) => {
24+
const tierSponsors = processedSponsors.filter(s => s.tier === tier);
25+
// Always include the tier in the acc, even if empty, to handle CTA later
26+
acc[tier] = tierSponsors;
27+
return acc;
28+
}, {});
29+
30+
// Determine if there are any sponsors at all to display the main heading
31+
const hasAnySponsors = Object.values(sponsorsByTier).some(sponsors => sponsors.length > 0);
32+
33+
return (
34+
<div class="w-full py-8 my-8 text-center relative">
35+
<div class="max-w-5xl mx-auto px-4">
36+
<Show when={hasAnySponsors}>
37+
<h2 class="text-3xl font-bold mb-10 text-white">Our Valued Sponsors</h2>
38+
</Show>
39+
<For each={tierOrder}>
40+
{(tier) => {
41+
const currentTierSponsors = sponsorsByTier[tier];
42+
43+
// Logic for showing section:
44+
// Show if it's a non-Custom tier (CTA will be shown if empty)
45+
// OR if it's Custom AND has sponsors
46+
const shouldShowSection = tier !== "Custom" || (currentTierSponsors && currentTierSponsors.length > 0);
47+
48+
return (
49+
<Show when={shouldShowSection}>
50+
<section class="mb-12">
51+
<h3 class="text-2xl font-semibold mb-6 text-white/90">
52+
{tierEmojis[tier] || ""} {tier} Sponsors
53+
</h3>
54+
<Show
55+
when={currentTierSponsors && currentTierSponsors.length > 0}
56+
fallback={
57+
// Fallback is CTA, only for non-Custom tiers
58+
<Show when={tier !== "Custom"}>
59+
<p class="text-white/70">
60+
No {tier} sponsors yet. Want your logo here?{' '}
61+
<A href="/sponsorship" class="text-white hover:text-gray-200 underline">
62+
Become a sponsor!
63+
</A>
64+
</p>
65+
</Show>
66+
}
67+
>
68+
<div class="flex flex-wrap justify-center items-center gap-8">
69+
<For each={currentTierSponsors}>
70+
{(sponsor) => (
71+
<a
72+
href={sponsor.websiteUrl}
73+
target="_blank"
74+
rel="noopener noreferrer"
75+
title={sponsor.name}
76+
class="block p-2 bg-white/5 hover:bg-white/10 rounded-lg transition-colors"
77+
>
78+
<img
79+
src={sponsor.logoUrl}
80+
alt={`${sponsor.name} logo`}
81+
class="max-h-16 md:max-h-20 object-contain"
82+
/>
83+
</a>
84+
)}
85+
</For>
86+
</div>
87+
</Show>
88+
</section>
89+
</Show>
90+
);
91+
}}
92+
</For>
93+
</div>
94+
</div>
95+
);
96+
}

‎src/data/sponsors.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @typedef {object} Sponsor
3+
* @property {string} name - The name of the sponsoring company or individual.
4+
* @property {string | null} logoUrl - The URL of the sponsor's logo. Null if no logo.
5+
* @property {string} websiteUrl - The URL to the sponsor's website.
6+
* @property {'Diamond' | 'Gold' | 'Silver' | 'Bronze' | 'Custom'} tier - The sponsorship tier.
7+
*/
8+
9+
/** @type {Sponsor[]} */
10+
export const sponsors = [
11+
// Example of how to add a sponsor:
12+
// {
13+
// name: "Example Sponsor Inc.",
14+
// logoUrl: "https://example.com/logo.png",
15+
// websiteUrl: "https://example.com",
16+
// tier: "Gold",
17+
// },
18+
];

‎src/routes/sponsorship.jsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default function Sponsorship() {
4747
<div class="w-full space-y-6">
4848
{/* Non-sponsorship donation */}
4949
<div class="p-6 bg-white/10 backdrop-blur-lg rounded-xl border border-white/20 hover:bg-white/15 transition-colors">
50-
<h3 class="text-2xl font-bold mb-2">Non-sponsorship donation</h3>
50+
<h3 class="text-2xl font-bold mb-2">💖 Non-sponsorship donation</h3>
5151
<p class="text-xl mb-4">0+ EUR</p>
5252
<ul class="list-disc list-inside space-y-2 mb-4">
5353
<li>Supporting the conference and official Nix projects</li>
@@ -60,7 +60,7 @@ export default function Sponsorship() {
6060

6161
{/* Bronze Tier */}
6262
<div class="p-6 bg-white/10 backdrop-blur-lg rounded-xl border border-white/20 hover:bg-white/15 transition-colors">
63-
<h3 class="text-2xl font-bold mb-2">Bronze</h3>
63+
<h3 class="text-2xl font-bold mb-2">🥉 Bronze</h3>
6464
<p class="text-xl mb-4">1024+ EUR</p>
6565
<ul class="list-disc list-inside space-y-2 mb-4">
6666
<li>Linked logo on the website</li>
@@ -75,7 +75,7 @@ export default function Sponsorship() {
7575

7676
{/* Silver Tier */}
7777
<div class="p-6 bg-white/10 backdrop-blur-lg rounded-xl border border-white/20 hover:bg-white/15 transition-colors">
78-
<h3 class="text-2xl font-bold mb-2">Silver</h3>
78+
<h3 class="text-2xl font-bold mb-2">🥈 Silver</h3>
7979
<p class="text-xl mb-4">2048+ EUR</p>
8080
<ul class="list-disc list-inside space-y-2 mb-4">
8181
<li>Everything from Bronze</li>
@@ -91,7 +91,7 @@ export default function Sponsorship() {
9191

9292
{/* Gold Tier */}
9393
<div class="p-6 bg-white/10 backdrop-blur-lg rounded-xl border border-white/20 hover:bg-white/15 transition-colors">
94-
<h3 class="text-2xl font-bold mb-2">Gold</h3>
94+
<h3 class="text-2xl font-bold mb-2">🥇 Gold</h3>
9595
<p class="text-xl mb-4">4096+ EUR</p>
9696
<ul class="list-disc list-inside space-y-2 mb-4">
9797
<li>Everything from Silver</li>
@@ -106,7 +106,7 @@ export default function Sponsorship() {
106106

107107
{/* Diamond Tier */}
108108
<div class="p-6 bg-white/10 backdrop-blur-lg rounded-xl border border-white/20 hover:bg-white/15 transition-colors">
109-
<h3 class="text-2xl font-bold mb-2">Diamond</h3>
109+
<h3 class="text-2xl font-bold mb-2">💎 Diamond</h3>
110110
<p class="text-xl mb-4">8192+ EUR</p>
111111
<ul class="list-disc list-inside space-y-2 mb-4">
112112
<li>Everything from Gold</li>
@@ -123,7 +123,7 @@ export default function Sponsorship() {
123123

124124
{/* Custom Tier */}
125125
<div class="p-6 bg-white/10 backdrop-blur-lg rounded-xl border border-white/20 hover:bg-white/15 transition-colors">
126-
<h3 class="text-2xl font-bold mb-2">Custom</h3>
126+
<h3 class="text-2xl font-bold mb-2">✨ Custom</h3>
127127
<p class="text-xl mb-4">Sponsor in a more custom way, such as</p>
128128
<ul class="list-disc list-inside space-y-2 mb-4">
129129
<li>Food, drinks, services, equipment</li>

0 commit comments

Comments
 (0)