@@ -207,68 +207,73 @@ export default function ClubPage() {
207207 </ div >
208208
209209 { /* Navigation */ }
210- < nav className = "flex flex-1 gap-2 overflow-x-auto pb-2 scrollbar-none lg:flex-col lg:pb-0 " >
210+ < nav className = "w-full gap-2 overflow-x-auto pb-2 scrollbar-none lg:grid lg:grid-cols-5 lg:gap-3 lg:overflow-visible " >
211211 < Link
212212 href = "/club#general"
213- className = { `group flex shrink-0 items-center justify-center gap-3 rounded-xl border border-transparent px-6 py -4 text-sm font-bold tracking-widest transition-all duration-200 lg:w-full lg:justify-between ${
213+ className = { `group flex items-center justify-center gap-2 rounded-xl border border-transparent py-3 px -4 text-sm font-bold tracking-wider transition-all duration-200 md:py-3 md:text-base ${
214214 activeTab === 'general'
215215 ? 'border-green-500/20 bg-green-500/10 text-green-400 shadow-[inset_0_0_20px_rgba(34,197,94,0.05)]'
216216 : 'text-gray-500 hover:bg-white/[0.02] hover:text-white'
217217 } `}
218+ aria-label = "General Events - Club gatherings with QR check-ins"
218219 >
219- < span > General Events</ span >
220+ < span > Events</ span >
220221 < span
221222 className = { `h-2 w-2 rounded-full transition-all ${ activeTab === 'general' ? "bg-green-400 shadow-[0_0_8px_rgba(74,222,128,0.5)]" : "bg-transparent group-hover:bg-green-500/40" } ` }
222223 > </ span >
223224 </ Link >
224225 < Link
225226 href = "/club#hackathons"
226- className = { `group flex shrink-0 items-center justify-center gap-3 rounded-xl border border-transparent px-6 py -4 text-sm font-bold tracking-widest transition-all duration-200 lg:w-full lg:justify-between ${
227+ className = { `group flex items-center justify-center gap-2 rounded-xl border border-transparent py-3 px -4 text-sm font-bold tracking-wider transition-all duration-200 md:py-3 md:text-base ${
227228 activeTab === 'hackathons'
228229 ? 'border-[#00A8A8]/20 bg-white/[0.03] text-[#00A8A8] shadow-[inset_0_0_20px_rgba(0,168,168,0.05)]'
229230 : 'text-gray-500 hover:bg-white/[0.02] hover:text-white'
230231 } `}
232+ aria-label = "My Hackathons - Competition events you're registered for"
231233 >
232- < span > My Hackathons</ span >
234+ < span > Hackathons</ span >
233235 < span
234236 className = { `h-2 w-2 rounded-full transition-all ${ activeTab === 'hackathons' ? "bg-[#00A8A8] shadow-[0_0_8px_rgba(0,168,168,0.5)]" : "bg-transparent group-hover:bg-[#00A8A8]/40" } ` }
235237 > </ span >
236238 </ Link >
237239 < Link
238240 href = "/club#projects"
239- className = { `group flex shrink-0 items-center justify-center gap-3 rounded-xl border border-transparent px-6 py -4 text-sm font-bold tracking-widest transition-all duration-200 lg:w-full lg:justify-between ${
241+ className = { `group flex items-center justify-center gap-2 rounded-xl border border-transparent py-3 px -4 text-sm font-bold tracking-wider transition-all duration-200 md:py-3 md:text-base ${
240242 activeTab === 'projects'
241243 ? 'border-[#00A8A8]/20 bg-white/[0.03] text-[#00A8A8] shadow-[inset_0_0_20px_rgba(0,168,168,0.05)]'
242244 : 'text-gray-500 hover:bg-white/[0.02] hover:text-white'
243245 } `}
246+ aria-label = "My Projects - Your submitted project entries"
244247 >
245- < span > My Projects</ span >
248+ < span > Projects</ span >
246249 < span
247250 className = { `h-2 w-2 rounded-full transition-all ${ activeTab === 'projects' ? "bg-[#00A8A8] shadow-[0_0_8px_rgba(0,168,168,0.5)]" : "bg-transparent group-hover:bg-[#00A8A8]/40" } ` }
248251 > </ span >
249252 </ Link >
250253 < Link
251254 href = "/club#history"
252- className = { `group flex shrink-0 items-center justify-center gap-3 rounded-xl border border-transparent px-6 py -4 text-sm font-bold tracking-widest transition-all duration-200 lg:w-full lg:justify-between ${
255+ className = { `group flex items-center justify-center gap-2 rounded-xl border border-transparent py-3 px -4 text-sm font-bold tracking-wider transition-all duration-200 md:py-3 md:text-base ${
253256 activeTab === 'history'
254257 ? 'border-[#00A8A8]/20 bg-white/[0.03] text-[#00A8A8] shadow-[inset_0_0_20px_rgba(0,168,168,0.05)]'
255258 : 'text-gray-500 hover:bg-white/[0.02] hover:text-white'
256259 } `}
260+ aria-label = "Attendance History - Your event check-in records"
257261 >
258- < span > Attendance History</ span >
262+ < span > History</ span >
259263 < span
260264 className = { `h-2 w-2 rounded-full transition-all ${ activeTab === 'history' ? "bg-[#00A8A8] shadow-[0_0_8px_rgba(0,168,168,0.5)]" : "bg-transparent group-hover:bg-[#00A8A8]/40" } ` }
261265 > </ span >
262266 </ Link >
263267 < Link
264268 href = "/club#status"
265- className = { `group flex shrink-0 items-center justify-center gap-3 rounded-xl border border-transparent px-6 py -4 text-sm font-bold tracking-widest transition-all duration-200 lg:w-full lg:justify-between ${
269+ className = { `group flex items-center justify-center gap-2 rounded-xl border border-transparent py-3 px -4 text-sm font-bold tracking-wider transition-all duration-200 md:py-3 md:text-base ${
266270 activeTab === 'status'
267271 ? 'border-[#00A8A8]/20 bg-white/[0.03] text-[#00A8A8] shadow-[inset_0_0_20px_rgba(0,168,168,0.05)]'
268272 : 'text-gray-500 hover:bg-white/[0.02] hover:text-white'
269273 } `}
274+ aria-label = "Membership Status - Your member access info"
270275 >
271- < span > Membership </ span >
276+ < span > Status </ span >
272277 < span
273278 className = { `h-2 w-2 rounded-full transition-all ${ activeTab === 'status' ? "bg-[#00A8A8] shadow-[0_0_8px_rgba(0,168,168,0.5)]" : "bg-transparent group-hover:bg-[#00A8A8]/40" } ` }
274279 > </ span >
@@ -299,35 +304,53 @@ export default function ClubPage() {
299304 </ li >
300305 </ ul >
301306 </ div >
302- < div className = "mt-6 rounded-xl border border-white/5 bg-white/5 p-6" >
303- < h4 className = "mb-2 font-mono text-xs font-bold tracking-widest text-white uppercase" > Quick Navigation</ h4 >
304- < div className = "flex flex-wrap gap-2" >
307+ < div className = "mt-6 rounded-xl border border-white/5 bg-white/5 p-4 md:p-6" >
308+ < h4 className = "mb-3 flex items-center gap-2 font-mono text-xs font-bold tracking-wider text-white uppercase" >
309+ < svg className = "w-4 h-4" fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >
310+ < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2 } d = "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a2 2 0 002-2v-4a2 2 0 00-2-2h-2a2 2 0 00-2 2v4a1 1 0 001 1zm-3 1h2" />
311+ </ svg >
312+ Quick Links
313+ </ h4 >
314+ < div className = "grid grid-cols-2 gap-3" >
305315 < Link
306316 href = "/hackathons"
307- className = "inline-flex items-center gap-2 rounded-lg border border-green-500/30 bg-green-500/10 px-4 py-2 text-xs font-mono text-green-400 transition-all hover:bg-green-500/20 hover:shadow-[0_0_10px_rgba(34,197,94,0.3)]"
317+ className = "group flex items-center justify-center gap-2 rounded-xl border border-green-500/30 bg-green-500/10 px-4 py-3 text-sm font-medium text-green-400 transition-all hover:bg-green-500/20 active:scale-[0.98]"
318+ aria-label = "Browse all hackathons and competitions"
308319 >
309- < svg className = "w-3 h-3 " fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >
320+ < svg className = "w-4 h-4 shrink-0 " fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >
310321 < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2 } d = "M13 10V3L4 14h7v7l9-11h-7z" />
311322 </ svg >
312- Browse Hackathons
323+ < span > Browse Hackathons</ span >
313324 </ Link >
314325 < Link
315326 href = "/club"
316- className = "inline-flex items-center gap-2 rounded-lg border border-white/20 bg-white/5 px-4 py-2 text-xs font-mono text-white transition-all hover:bg-white/10 hover:shadow-[0_0_10px_rgba(255,255,255,0.1)]"
327+ className = "group flex items-center justify-center gap-2 rounded-xl border border-white/20 bg-white/5 px-4 py-3 text-sm font-medium text-white transition-all hover:bg-white/10 active:scale-[0.98]"
328+ aria-label = "Go to club events terminal"
317329 >
318- < svg className = "w-3 h-3 " fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >
330+ < svg className = "w-4 h-4 shrink-0 " fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >
319331 < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2 } d = "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
320332 </ svg >
321- Club Terminal
333+ < span > Club Terminal</ span >
322334 </ Link >
323335 < Link
324336 href = "/judge"
325- className = "inline-flex items-center gap-2 rounded-lg border border-purple-500/30 bg-purple-500/10 px-4 py-2 text-xs font-mono text-purple-400 transition-all hover:bg-purple-500/20"
337+ className = "group flex items-center justify-center gap-2 rounded-xl border border-purple-500/30 bg-purple-500/10 px-4 py-3 text-sm font-medium text-purple-400 transition-all hover:bg-purple-500/20 active:scale-[0.98]"
338+ aria-label = "Access judge portal"
326339 >
327- < svg className = "w-3 h-3 " fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >
340+ < svg className = "w-4 h-4 shrink-0 " fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >
328341 < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2 } d = "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
329342 </ svg >
330- Judge Portal
343+ < span > Judge Portal</ span >
344+ </ Link >
345+ < Link
346+ href = "/dashboard"
347+ className = "group flex items-center justify-center gap-2 rounded-xl border border-gray-500/30 bg-gray-500/10 px-4 py-3 text-sm font-medium text-gray-400 transition-all hover:bg-gray-500/20 active:scale-[0.98]"
348+ aria-label = "Return to main dashboard"
349+ >
350+ < svg className = "w-4 h-4 shrink-0" fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >
351+ < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2 } d = "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 00-1 1v4a1 1 0 011 1h2a2 2 0 002-2v-4a1 1 0 001-1zm-3 1h2" />
352+ </ svg >
353+ < span > Dashboard</ span >
331354 </ Link >
332355 </ div >
333356 </ div >
0 commit comments