Skip to content

Commit 229d9b9

Browse files
Hilo-HiloHilo-Hilo
committed
Add Fall 2026 recruitment timeline to signup
1 parent fc5cef4 commit 229d9b9

4 files changed

Lines changed: 198 additions & 57 deletions

File tree

‎public/forms/interest-form-preview.webp‎

14.2 KB
Loading

‎public/forms/newsletter-form-preview.webp‎

38.6 KB
Loading

‎public/recruitment/fa26/recruitment-timeline.webp‎

115 KB
Loading

‎src/pages/SignUp.tsx‎

Lines changed: 198 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,238 @@
11
import { ExternalLink } from "lucide-react";
2+
import { FaInstagram, FaLinkedinIn } from "react-icons/fa";
3+
import { SiLinktree } from "react-icons/si";
24
import { EnhancedButton } from "@/components/ui/enhanced-button";
35
import { PageHeader } from "@/components/PageHeader";
6+
import { publicAssetPath } from "@/lib/publicAsset";
47

58
const INTEREST_FORM = "https://forms.gle/EQmWP1JWzDzrFji79";
69
const NEWSLETTER_FORM = "https://forms.gle/qCxn93mfunF3Dtep7";
10+
const RECRUITMENT_POST = "https://www.instagram.com/p/DcUXakNy7cj/";
711

812
const forms = [
913
{
10-
n: "01",
11-
title: "Get updates",
12-
body: "Sign up for our interest form to receive updates about events, courses, and opportunities.",
14+
eyebrow: "Fall 2026 interest form",
15+
title: "Express interest",
16+
body: "Tell us you are interested and receive application updates, event announcements, and opportunities.",
1317
src: INTEREST_FORM,
14-
label: "Interest form",
18+
cta: "Fill out the interest form",
19+
preview: "/forms/interest-form-preview.webp",
20+
featured: true,
1521
},
1622
{
17-
n: "02",
18-
title: "Newsletter",
19-
body: "Subscribe to our newsletter for in-depth articles and exclusive content.",
23+
eyebrow: "Monthly newsletter",
24+
title: "Get the newsletter",
25+
body: "Subscribe for club news, upcoming socials, general meetings, and professional opportunities.",
2026
src: NEWSLETTER_FORM,
21-
label: "Newsletter form",
27+
cta: "Sign up for the newsletter",
28+
preview: "/forms/newsletter-form-preview.webp",
29+
featured: false,
2230
},
2331
];
2432

2533
const socials = [
26-
{ name: "instagram", url: "https://www.instagram.com/ucb_compbio/" },
2734
{
28-
name: "linkedin",
35+
name: "Instagram",
36+
detail: "@ucb_compbio",
37+
url: "https://www.instagram.com/ucb_compbio/",
38+
icon: FaInstagram,
39+
},
40+
{
41+
name: "LinkedIn",
42+
detail: "CompBio at Berkeley",
2943
url: "https://www.linkedin.com/company/computational-biology-at-berkeley/",
44+
icon: FaLinkedinIn,
45+
},
46+
{
47+
name: "Linktree",
48+
detail: "All club links",
49+
url: "https://linktr.ee/compbioatberkeley",
50+
icon: SiLinktree,
3051
},
31-
{ name: "linktree", url: "https://linktr.ee/compbioatberkeley" },
3252
];
3353

3454
const SignUp = () => (
3555
<div>
3656
<PageHeader
37-
eyebrow="05 / sign up"
57+
eyebrow="Stay connected"
3858
title="Join our community"
3959
lede="Stay connected with Computational Biology at Berkeley and be the first to know about events, opportunities, and updates."
4060
/>
4161

4262
<section className="mx-auto max-w-6xl px-4 py-16 sm:px-6 md:py-20 lg:px-8">
43-
<div className="grid items-start gap-4 lg:grid-cols-3">
63+
<div className="grid gap-4 lg:grid-cols-[1.15fr_0.85fr]">
64+
<article className="overflow-hidden rounded border border-border bg-card lg:col-span-2">
65+
<div className="grid lg:grid-cols-[minmax(280px,0.72fr)_1.28fr]">
66+
<a
67+
href={RECRUITMENT_POST}
68+
target="_blank"
69+
rel="noopener noreferrer"
70+
aria-label="View the Fall 2026 recruitment timeline on Instagram (opens in a new tab)"
71+
className="group relative block overflow-hidden bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
72+
>
73+
<img
74+
src={publicAssetPath("/recruitment/fa26/recruitment-timeline.webp")}
75+
alt="Fall 2026 recruitment timeline: applications open August 26, Calapalooza August 27, info sessions September 2 and 7, officers event September 3, applicant social September 8, applications due September 11 at 5 PM, and interviews September 12–13."
76+
width="1080"
77+
height="1350"
78+
loading="eager"
79+
decoding="async"
80+
className="h-full max-h-[42rem] w-full object-cover object-top transition-transform duration-300 group-hover:scale-[1.015]"
81+
/>
82+
<span className="absolute inset-x-4 bottom-4 flex items-center justify-between gap-3 rounded bg-background/95 px-4 py-3 text-sm font-bold text-heading shadow-sm backdrop-blur-sm">
83+
View the original post
84+
<ExternalLink className="h-4 w-4 shrink-0 text-link" aria-hidden="true" />
85+
</span>
86+
</a>
87+
88+
<div className="flex flex-col justify-center p-6 md:p-8 lg:p-10">
89+
<p className="eyebrow">Fall 2026 recruitment</p>
90+
<h2 className="mt-3 text-3xl font-bold text-heading">Recruitment starts August 26</h2>
91+
<p className="mt-4 max-w-[52ch] text-sm leading-relaxed text-muted-foreground">
92+
Applications and coffee chats open August 26. Meet us at Calapalooza, join an info
93+
session, and get to know our project managers and officers before applications close
94+
September 11 at 5 PM.
95+
</p>
96+
97+
<div className="mt-7 flex flex-wrap gap-3">
98+
<EnhancedButton asChild variant="gold" size="lg">
99+
<a href={INTEREST_FORM} target="_blank" rel="noopener noreferrer">
100+
Express interest
101+
<ExternalLink />
102+
<span className="sr-only"> (opens in a new tab)</span>
103+
</a>
104+
</EnhancedButton>
105+
<EnhancedButton asChild variant="outline" size="lg">
106+
<a href={RECRUITMENT_POST} target="_blank" rel="noopener noreferrer">
107+
View timeline on Instagram
108+
<ExternalLink />
109+
<span className="sr-only"> (opens in a new tab)</span>
110+
</a>
111+
</EnhancedButton>
112+
</div>
113+
</div>
114+
</div>
115+
</article>
116+
44117
{forms.map((form) => (
45-
<article key={form.n} className="flex flex-col overflow-hidden rounded border border-border bg-card">
46-
<div className="border-b border-border p-5">
47-
<p className="text-[11px] text-label">[{form.n}]</p>
48-
<h2 className="mt-2 text-lg font-bold text-heading">{form.title}</h2>
49-
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">{form.body}</p>
118+
<article
119+
key={form.title}
120+
className={
121+
form.featured
122+
? "relative isolate flex min-h-64 flex-col overflow-hidden rounded border border-primary bg-primary p-6 text-primary-foreground md:p-8"
123+
: "relative isolate flex min-h-64 flex-col overflow-hidden rounded border border-border bg-card p-6 md:p-8"
124+
}
125+
>
126+
<div className="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
127+
<img
128+
src={publicAssetPath(form.preview)}
129+
alt=""
130+
width="960"
131+
height="600"
132+
loading="lazy"
133+
decoding="async"
134+
draggable="false"
135+
className={
136+
form.featured
137+
? "h-full w-full object-cover object-top opacity-[0.18] grayscale contrast-75"
138+
: "h-full w-full object-cover object-top opacity-[0.14] grayscale contrast-75 dark:opacity-[0.1]"
139+
}
140+
/>
141+
<span
142+
className={
143+
form.featured
144+
? "absolute inset-0 bg-gradient-to-r from-primary via-primary/95 to-primary/70"
145+
: "absolute inset-0 bg-gradient-to-r from-card via-card/95 to-card/75"
146+
}
147+
/>
50148
</div>
51-
<iframe
52-
src={form.src}
53-
title={form.label}
54-
className="h-[400px] w-full border-0 bg-background"
55-
loading="lazy"
56-
>
57-
Loading...
58-
</iframe>
59-
<div className="border-t border-border p-4">
60-
<EnhancedButton asChild variant="outline" size="sm" className="w-full">
61-
<a href={form.src} target="_blank" rel="noopener noreferrer">
62-
open in new tab
63-
<ExternalLink />
64-
</a>
65-
</EnhancedButton>
149+
150+
<div className="flex flex-1 flex-col">
151+
<div>
152+
<p
153+
className={
154+
form.featured
155+
? "text-[11px] uppercase tracking-[0.14em] text-primary-foreground/75"
156+
: "eyebrow"
157+
}
158+
>
159+
{form.eyebrow}
160+
</p>
161+
<h2
162+
className={
163+
form.featured
164+
? "mt-3 text-2xl font-bold text-primary-foreground"
165+
: "mt-3 text-2xl font-bold text-heading"
166+
}
167+
>
168+
{form.title}
169+
</h2>
170+
<p
171+
className={
172+
form.featured
173+
? "mt-3 max-w-[48ch] text-sm leading-relaxed text-primary-foreground/80"
174+
: "mt-3 max-w-[48ch] text-sm leading-relaxed text-muted-foreground"
175+
}
176+
>
177+
{form.body}
178+
</p>
179+
</div>
180+
181+
<div className="mt-auto pt-8">
182+
<EnhancedButton
183+
asChild
184+
variant={form.featured ? "gold" : "outline"}
185+
size="lg"
186+
className="w-full sm:w-auto"
187+
>
188+
<a href={form.src} target="_blank" rel="noopener noreferrer">
189+
{form.cta}
190+
<ExternalLink />
191+
<span className="sr-only"> (opens in a new tab)</span>
192+
</a>
193+
</EnhancedButton>
194+
</div>
66195
</div>
67196
</article>
68197
))}
69198

70-
<article className="flex min-h-[526px] flex-col overflow-hidden rounded border border-border bg-card lg:min-h-0 lg:self-stretch">
71-
<div className="border-b border-border p-5">
72-
<p className="text-[11px] text-label">[03]</p>
73-
<h2 className="mt-2 text-lg font-bold text-heading">Connect with us</h2>
74-
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
75-
Follow along between meetings. Events, recaps, and opportunities go out here first.
76-
</p>
77-
</div>
199+
<article className="rounded border border-border bg-card p-6 md:p-8 lg:col-span-2">
200+
<div className="grid gap-8 lg:grid-cols-[0.72fr_1.28fr] lg:items-center">
201+
<div>
202+
<p className="eyebrow">Social channels</p>
203+
<h2 className="mt-3 text-2xl font-bold text-heading">Connect with us</h2>
204+
<p className="mt-3 max-w-[42ch] text-sm leading-relaxed text-muted-foreground">
205+
Follow along between meetings. Events, recaps, and opportunities go out here first.
206+
</p>
207+
</div>
78208

79-
<div className="flex flex-1 flex-col gap-2 p-5">
80-
{socials.map((social) => (
81-
<a
82-
key={social.name}
83-
href={social.url}
84-
target="_blank"
85-
rel="noopener noreferrer"
86-
className="flex min-h-11 items-center justify-between rounded border border-border px-4 text-[13px] text-heading hover:border-border-strong hover:bg-muted hover:text-heading"
87-
>
88-
{social.name}
89-
<ExternalLink className="h-4 w-4 text-muted-foreground" />
90-
</a>
91-
))}
92-
<p className="mt-auto border-t border-border pt-4 text-sm leading-relaxed text-muted-foreground">
93-
Questions? Reach out through any of these platforms and we will get back to you soon.
94-
</p>
209+
<div className="grid gap-3 sm:grid-cols-3">
210+
{socials.map((social) => {
211+
const Icon = social.icon;
212+
213+
return (
214+
<a
215+
key={social.name}
216+
href={social.url}
217+
target="_blank"
218+
rel="noopener noreferrer"
219+
aria-label={`Visit ${social.name} (opens in a new tab)`}
220+
className="flex min-h-28 items-center gap-4 rounded border border-border bg-background p-4 text-heading transition-colors duration-150 hover:border-border-strong hover:bg-muted hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
221+
>
222+
<Icon className="h-9 w-9 shrink-0 text-link" aria-hidden="true" />
223+
<span className="min-w-0">
224+
<span className="flex items-center gap-1.5 text-sm font-bold">
225+
{social.name}
226+
<ExternalLink className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
227+
</span>
228+
<span className="mt-1 block truncate text-xs text-muted-foreground">
229+
{social.detail}
230+
</span>
231+
</span>
232+
</a>
233+
);
234+
})}
235+
</div>
95236
</div>
96237
</article>
97238
</div>

0 commit comments

Comments
 (0)