Skip to content

Commit 1e8b199

Browse files
SolankimimohSolankimimoh
committed
feat(sponsors): Add and redesign sponsors section
Introduces a new sponsors section to the homepage, loading data from new translation files. Sponsor cards use a high-contrast white background and a grayscale-to-color hover effect. Logos are displayed at their intrinsic size to preserve original aspect ratio.
1 parent 768f44f commit 1e8b199

10 files changed

Lines changed: 235 additions & 2 deletions

File tree

‎public/assets/images/sponsors/gold_davidson_canada.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/assets/images/sponsors/marquee_telus_digital.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/assets/images/sponsors/silver_transit.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/app/[locale]/page.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default async function Home({
1414

1515
const t_home = await getTranslations({ locale, namespace: 'Home' });
1616
const t_gallery = await getTranslations({ locale, namespace: 'Gallery' });
17+
const t_sponsors = await getTranslations({ locale, namespace: 'Sponsors' });
1718

1819
const copy: HomeLandingCopy = {
1920
hero: {
@@ -66,9 +67,23 @@ export default async function Home({
6667
line1: t_gallery('header.heading.line1'),
6768
line2: t_gallery('header.heading.line2'),
6869
},
70+
},
71+
items: t_gallery.raw('items') as HomeLandingCopy['gallery']['items'],
72+
},
73+
sponsors: {
74+
header: {
75+
subheading: t_sponsors('header.subheading'),
76+
heading: {
77+
line1: t_sponsors('header.heading.line1'),
78+
line2: t_sponsors('header.heading.line2'),
6979
},
70-
items: t_gallery.raw('items'),
71-
},
80+
},
81+
cta: {
82+
label: t_sponsors('header.cta'),
83+
link: t_sponsors('header.cta_link'),
84+
},
85+
tiers: t_sponsors.raw('tiers') as HomeLandingCopy['sponsors']['tiers'],
86+
},
7287
};
7388

7489
return <HomeLanding copy={copy} />;

‎src/components/home/home-landing.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { HeroContent } from './hero-content';
66
import { HeroTicker } from './hero-ticker';
77
import GalleryGrid from '../gallery/gallery-grid';
88
import { SectionHeader } from '../common/section-header';
9+
import { SponsorsTiers } from '../sponsors/sponsors-tiers';
910
import type { HomeLandingCopy } from './types';
1011

1112
export type { HomeLandingCopy } from './types';
@@ -57,6 +58,20 @@ export function HomeLanding({ copy }: HomeLandingProps) {
5758
/>
5859
<GalleryGrid items={copy.gallery.items} />
5960
</section>
61+
62+
{/* Sponsors Section */}
63+
<section className="mx-auto w-full max-w-[1440px] px-6 py-32 md:px-12">
64+
<SectionHeader
65+
subheading={copy.sponsors.header.subheading}
66+
headingLine1={copy.sponsors.header.heading.line1}
67+
headingLine2={copy.sponsors.header.heading.line2}
68+
/>
69+
<SponsorsTiers
70+
tiers={copy.sponsors.tiers}
71+
ctaLabel={copy.sponsors.cta.label}
72+
ctaLink={copy.sponsors.cta.link}
73+
/>
74+
</section>
6075
</main>
6176
</>
6277
);

‎src/components/home/types.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,4 +57,27 @@ export type HomeLandingCopy = {
5757
height: number;
5858
}[];
5959
};
60+
sponsors: {
61+
header: {
62+
subheading: string;
63+
heading: {
64+
line1: string;
65+
line2: string;
66+
};
67+
};
68+
cta: {
69+
label: string;
70+
link: string;
71+
};
72+
tiers: {
73+
title: string;
74+
subtitle: string;
75+
badge: string;
76+
items: {
77+
name: string;
78+
logo?: string;
79+
link?: string;
80+
}[];
81+
}[];
82+
};
6083
};

‎src/components/sponsors/sponsors-tiers.tsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
'use client';
2+
3+
// Note: Reverted to <img> tag to respect original SVG sizing as requested.
4+
// Using a white background for maximum contrast with dark/transparent logos.
5+
// Added grayscale-to-color hover effect.
6+
7+
type SponsorTier = {
8+
title: string;
9+
subtitle: string;
10+
badge: string;
11+
items: {
12+
name: string;
13+
logo?: string;
14+
link?: string;
15+
}[];
16+
};
17+
18+
type SponsorsTiersProps = {
19+
tiers: SponsorTier[];
20+
ctaLabel: string;
21+
ctaLink: string;
22+
};
23+
24+
export function SponsorsTiers({ tiers, ctaLabel, ctaLink }: SponsorsTiersProps) {
25+
return (
26+
<div className="space-y-14">
27+
{tiers.map((tier) => (
28+
<section key={tier.title} className="space-y-6">
29+
<div className="flex flex-col gap-4 border-b border-white/10 pb-4 md:flex-row md:items-end md:justify-between">
30+
<div className="flex items-center gap-3">
31+
<h3 className="font-display text-2xl uppercase tracking-tight text-white md:text-3xl">
32+
{tier.title}
33+
</h3>
34+
<span className="rounded-full border border-white/20 px-3 py-1 font-mono text-[10px] uppercase tracking-[0.2em] text-white/70">
35+
{tier.badge}
36+
</span>
37+
</div>
38+
<p className="max-w-xl font-mono text-xs uppercase tracking-[0.18em] text-white/55 md:text-right">
39+
{tier.subtitle}
40+
</p>
41+
</div>
42+
43+
<div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4">
44+
{tier.items.map((sponsor) => (
45+
<a
46+
key={sponsor.name}
47+
href={sponsor.link || '#'}
48+
target="_blank"
49+
rel="noopener noreferrer"
50+
className="group relative flex items-center justify-center rounded-lg bg-white p-6 transition-all duration-300 hover:scale-105"
51+
>
52+
{sponsor.logo && (
53+
<img
54+
src={sponsor.logo}
55+
alt={sponsor.name}
56+
className="grayscale transition-all duration-300 group-hover:grayscale-0"
57+
/>
58+
)}
59+
</a>
60+
))}
61+
</div>
62+
</section>
63+
))}
64+
65+
<div className="pt-2">
66+
<a
67+
href={ctaLink}
68+
target="_blank"
69+
rel="noopener noreferrer"
70+
className="inline-flex items-center border border-white/25 px-5 py-3 font-mono-tech text-xs uppercase tracking-[0.2em] text-white transition-colors hover:border-google-blue hover:text-google-blue"
71+
>
72+
{ctaLabel}
73+
</a>
74+
</div>
75+
</div>
76+
);
77+
}

‎src/i18n/request.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export default getRequestConfig(async ({ requestLocale }) => {
1818
const home = (await import(`../messages/${locale}/home.json`)).default;
1919
const gallery = (await import(`../messages/${locale}/gallery.json`)).default;
2020
const footer = (await import(`../messages/${locale}/footer.json`)).default;
21+
const sponsors = (await import(`../messages/${locale}/sponsors.json`)).default;
2122

2223
return {
2324
locale,
@@ -28,6 +29,7 @@ export default getRequestConfig(async ({ requestLocale }) => {
2829
Home: home,
2930
Gallery: gallery,
3031
Footer: footer,
32+
Sponsors: sponsors,
3133
},
3234
};
3335
});

‎src/messages/en/sponsors.json‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"header": {
3+
"subheading": "Sponsorship",
4+
"heading": {
5+
"line1": "Our Sponsors",
6+
"line2": "Build DevFest With Us"
7+
},
8+
"cta": "Become a Sponsor",
9+
"cta_link": "https://forms.gle/xDCZe4ZuP98YoCAJ9"
10+
},
11+
"tiers": [
12+
{
13+
"title": "Marquee Sponsor",
14+
"subtitle": "Headline partner powering DevFest Montreal 2026.",
15+
"badge": "Marquee",
16+
"items": [
17+
{
18+
"name": "TELUS Digital",
19+
"logo": "/assets/images/sponsors/marquee_telus_digital.svg",
20+
"link": "https://www.telusdigital.com/"
21+
}
22+
]
23+
},
24+
{
25+
"title": "Gold Sponsor",
26+
"subtitle": "Strategic sponsor supporting local developer growth.",
27+
"badge": "Gold",
28+
"items": [
29+
{
30+
"name": "Davidson Canada",
31+
"logo": "/assets/images/sponsors/gold_davidson_canada.svg",
32+
"link": "https://www.davidson.group/nos-filiales/davidson-canada"
33+
}
34+
]
35+
},
36+
{
37+
"title": "Silver Sponsor",
38+
"subtitle": "Community sponsor helping us connect builders across the city.",
39+
"badge": "Silver",
40+
"items": [
41+
{
42+
"name": "Transit",
43+
"logo": "/assets/images/sponsors/silver_transit.svg",
44+
"link": "https://manifesto.transitapp.com/fr/jobs"
45+
}
46+
]
47+
}
48+
]
49+
}

‎src/messages/fr/sponsors.json‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"header": {
3+
"subheading": "Commandites",
4+
"heading": {
5+
"line1": "Nos Sponsors",
6+
"line2": "Construisons DevFest Ensemble"
7+
},
8+
"cta": "Devenir Sponsor",
9+
"cta_link": "https://forms.gle/xDCZe4ZuP98YoCAJ9"
10+
},
11+
"tiers": [
12+
{
13+
"title": "Sponsor Marquee",
14+
"subtitle": "Partenaire principal qui propulse DevFest Montréal 2026.",
15+
"badge": "Marquee",
16+
"items": [
17+
{
18+
"name": "TELUS Digital",
19+
"logo": "/assets/images/sponsors/marquee_telus_digital.svg",
20+
"link": "https://www.telusdigital.com/"
21+
}
22+
]
23+
},
24+
{
25+
"title": "Sponsor Or",
26+
"subtitle": "Sponsor stratégique qui soutient la croissance des développeurs locaux.",
27+
"badge": "Or",
28+
"items": [
29+
{
30+
"name": "Davidson Canada",
31+
"logo": "/assets/images/sponsors/gold_davidson_canada.svg",
32+
"link": "https://www.davidson.group/nos-filiales/davidson-canada"
33+
}
34+
]
35+
},
36+
{
37+
"title": "Sponsor Argent",
38+
"subtitle": "Sponsor communautaire qui nous aide à connecter les talents de la ville.",
39+
"badge": "Argent",
40+
"items": [
41+
{
42+
"name": "Transit",
43+
"logo": "/assets/images/sponsors/silver_transit.svg",
44+
"link": "https://manifesto.transitapp.com/fr/jobs"
45+
}
46+
]
47+
}
48+
]
49+
}

0 commit comments

Comments
 (0)