Skip to content

Commit f0c60ef

Browse files
AryanM24AryanM24
committed
updated sponsors
1 parent 7c042a8 commit f0c60ef

11 files changed

Lines changed: 136 additions & 50 deletions

File tree

‎components/sponsors-section.tsx‎

Lines changed: 136 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,155 @@
11
import Image from "next/image"
22
import { SITE_CONFIG } from "@/lib/site-config"
3+
import { SafeExternalLink } from "@/components/safe-external-link"
34

4-
const sponsors: any[] = []
5+
type Sponsor = {
6+
name: string
7+
href: string
8+
src: string
9+
width: number
10+
height: number
11+
logoClassName?: string
12+
}
13+
14+
const sponsors: Sponsor[] = [
15+
{
16+
name: "Wolfram",
17+
href: "https://www.wolfram.com/",
18+
src: "/sponsors/wolfram.png",
19+
width: 2048,
20+
height: 1365,
21+
logoClassName: "max-h-[136px] max-w-[184px]",
22+
},
23+
{
24+
name: "nexos.ai",
25+
href: "https://nexos.ai/",
26+
src: "/sponsors/nexos-ai.png",
27+
width: 454,
28+
height: 111,
29+
logoClassName: "max-h-[92px] max-w-[244px]",
30+
},
31+
{
32+
name: "Incogni",
33+
href: "https://incogni.com/",
34+
src: "/sponsors/incogni.png",
35+
width: 2969,
36+
height: 863,
37+
logoClassName: "max-h-[96px] max-w-[244px] invert",
38+
},
39+
{
40+
name: "Interview Cake",
41+
href: "https://www.interviewcake.com/",
42+
src: "/sponsors/interviewcake.png",
43+
width: 1298,
44+
height: 232,
45+
logoClassName: "max-h-[84px] max-w-[244px]",
46+
},
47+
{
48+
name: "NordProtect",
49+
href: "https://nordprotect.com/",
50+
src: "/sponsors/nordprotect.png",
51+
width: 1023,
52+
height: 773,
53+
logoClassName: "max-h-[136px] max-w-[200px]",
54+
},
55+
{
56+
name: "NordVPN",
57+
href: "https://nordvpn.com/",
58+
src: "/sponsors/nordvpn.png",
59+
width: 1600,
60+
height: 746,
61+
logoClassName: "max-h-[116px] max-w-[232px]",
62+
},
63+
{
64+
name: "NordPass",
65+
href: "https://nordpass.com/",
66+
src: "/sponsors/nordpass.png",
67+
width: 440,
68+
height: 400,
69+
logoClassName: "max-h-[136px] max-w-[188px]",
70+
},
71+
{
72+
name: "Appwrite",
73+
href: "https://appwrite.io/",
74+
src: "/sponsors/appwrite.avif",
75+
width: 454,
76+
height: 111,
77+
logoClassName: "max-h-[92px] max-w-[244px]",
78+
},
79+
{
80+
name: "Saily",
81+
href: "https://saily.com/",
82+
src: "/sponsors/saily.png",
83+
width: 500,
84+
height: 500,
85+
logoClassName: "max-h-[136px] max-w-[188px] invert",
86+
},
87+
{
88+
name: "Art of Problem Solving",
89+
href: "https://artofproblemsolving.com/",
90+
src: "/sponsors/AOPS.png",
91+
width: 454,
92+
height: 111,
93+
logoClassName: "max-h-[92px] max-w-[244px]",
94+
},
95+
]
596

697
export function SponsorsSection() {
798
return (
899
<section id="sponsors" className="flex min-h-screen flex-col justify-center px-4 py-24 sm:py-32 md:px-6 lg:px-8">
9100
<div className="w-full">
10-
{/* Main content */}
11101
<div className="w-full">
12102
<h2 className="font-display text-4xl font-bold tracking-tight text-foreground sm:text-5xl md:text-6xl uppercase">
13103
OUR SPONSORS
14104
</h2>
15105

16-
<p className="mt-6 font-subheading text-[28px] font-[300] leading-relaxed text-muted-foreground w-full max-w-none tracking-wide">
17-
Our sponsors make HackJPS possible by providing resources, mentorship, and opportunities for all participants.
18-
</p>
106+
<p className="mt-6 font-subheading text-[28px] font-[300] leading-relaxed text-muted-foreground w-full max-w-none tracking-wide">
107+
Our sponsors make HackJPS possible by providing resources, mentorship, and opportunities for all participants.
108+
</p>
19109

20-
{/* Sponsor list - simple text layout */}
21-
<div className="mt-16">
22-
{sponsors.length === 0 ? (
23-
<div className="flex items-center justify-center py-16">
24-
<p className="text-4xl text-muted-foreground font-subheading">
25-
Sponsors coming soon...
26-
</p>
27-
</div>
28-
) : (
29-
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
30-
{sponsors.map((sponsor) => (
31-
<div
32-
key={sponsor.name}
33-
className="relative p-3 border border-foreground/15 bg-card/10 hover:bg-foreground/5 transition-all flex items-center justify-center min-h-[160px]"
34-
>
35-
{/* Detached corners */}
36-
<div className="absolute -left-[4px] -top-[4px] h-3 w-3 border-l-2 border-t-2 border-foreground" />
37-
<div className="absolute -right-[4px] -top-[4px] h-3 w-3 border-r-2 border-t-2 border-foreground" />
38-
<div className="absolute -bottom-[4px] -left-[4px] h-3 w-3 border-b-2 border-l-2 border-foreground" />
39-
<div className="absolute -bottom-[4px] -right-[4px] h-3 w-3 border-b-2 border-r-2 border-foreground" />
110+
<div className="mt-16">
111+
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 sm:gap-5 lg:grid-cols-5 xl:gap-6">
112+
{sponsors.map((sponsor) => (
113+
<SafeExternalLink
114+
key={sponsor.name}
115+
href={sponsor.href}
116+
aria-label={`Visit ${sponsor.name}`}
117+
className="group block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-4 focus-visible:ring-offset-background"
118+
>
119+
<div
120+
className="relative flex h-[152px] items-center justify-center border border-foreground/15 bg-card/10 p-2 transition-all hover:border-accent/70 hover:bg-foreground/5 sm:h-[168px] lg:h-[176px]"
121+
>
122+
{/* Detached corners */}
123+
<div className="absolute -left-[4px] -top-[4px] h-3 w-3 border-l-2 border-t-2 border-foreground transition-colors group-hover:border-accent" />
124+
<div className="absolute -right-[4px] -top-[4px] h-3 w-3 border-r-2 border-t-2 border-foreground transition-colors group-hover:border-accent" />
125+
<div className="absolute -bottom-[4px] -left-[4px] h-3 w-3 border-b-2 border-l-2 border-foreground transition-colors group-hover:border-accent" />
126+
<div className="absolute -bottom-[4px] -right-[4px] h-3 w-3 border-b-2 border-r-2 border-foreground transition-colors group-hover:border-accent" />
40127

41-
<div className="relative">
42-
<Image
43-
src="/placeholder-logo.svg"
44-
alt={`${sponsor.name} logo placeholder`}
45-
width={200}
46-
height={150}
47-
className="h-auto w-full max-w-[200px]"
48-
/>
49-
</div>
50-
</div>
51-
))}
52-
</div>
53-
)}
128+
<Image
129+
src={sponsor.src}
130+
alt={`${sponsor.name} logo`}
131+
width={sponsor.width}
132+
height={sponsor.height}
133+
sizes="(min-width: 1024px) 20vw, (min-width: 640px) 33vw, 50vw"
134+
className={`h-auto w-auto object-contain transition-transform duration-200 group-hover:scale-[1.03] ${sponsor.logoClassName ?? ""}`}
135+
/>
136+
</div>
137+
</SafeExternalLink>
138+
))}
54139
</div>
140+
</div>
55141

56-
<div className="mt-12">
57-
<a
58-
href={SITE_CONFIG.links.sponsorContact}
59-
className="inline-flex items-center gap-2 text-accent transition-colors hover:text-accent/80"
60-
>
61-
<span>Become a sponsor</span>
62-
<span aria-hidden="true">-&gt;</span>
63-
</a>
64-
</div>
142+
<div className="mt-12">
143+
<a
144+
href={SITE_CONFIG.links.sponsorContact}
145+
className="inline-flex items-center gap-2 text-accent transition-colors hover:text-accent/80"
146+
>
147+
<span>Become a sponsor</span>
148+
<span aria-hidden="true">-&gt;</span>
149+
</a>
65150
</div>
66151
</div>
67-
</section>
68-
)
69-
}
152+
</div>
153+
</section>
154+
)
155+
}

‎public/sponsors/AOPS.png‎

26.8 KB
Loading

‎public/sponsors/appwrite.avif‎

2.78 KB
Binary file not shown.

‎public/sponsors/incogni.png‎

16.7 KB
Loading

‎public/sponsors/interviewcake.png‎

26.2 KB
Loading

‎public/sponsors/nexos-ai.png‎

16.1 KB
Loading

‎public/sponsors/nordpass.png‎

10.1 KB
Loading

‎public/sponsors/nordprotect.png‎

17.1 KB
Loading

‎public/sponsors/nordvpn.png‎

17.3 KB
Loading

‎public/sponsors/saily.png‎

7.79 KB
Loading

0 commit comments

Comments
 (0)