feat(frontend) : implement figma homepage design#57
Conversation
carlgabrielDP4
commented
May 26, 2026
- Swapped font to Fira Code and Lato
- Add dark theme color palette CSS variables
- Add 5 CSS animations: blink, fade-up, terminal-glow, float, shimmer (I added for fun for fun to make page feel more alive, but we can always take the css off if clients do not like it)
- Redesign NavBar with larger logo and wordmark, remove about/blog links
- Remove Footer component entirely
- Lock homepage to viewport height, disable scroll
- Build full-bleed hero with aurora background image
- Add Linux Users Group heading and at University of Auckland subheading
- Create terminal mock window with 3 clickable menu buttons
- Style terminal buttons with hover effects and glow
- Add blinking cursor to terminal prompt (Will actually be a CLI later on.)
- Create sign-up and events stub pages
- Copy background image to public folder
amanda-yap
left a comment
There was a problem hiding this comment.
Hey Carl, this is looking super good 🔥 just left a couple of comments for some small changes.
| export const metadata: Metadata = { | ||
| title: "UoA Linux User Group", | ||
| description: "Website for UoA Linux User Group", | ||
| title: "LUG@UoA — Linux Users Group at University of Auckland", |
There was a problem hiding this comment.
I think LUG goes as "Linux User Group" instead of "Linux Users Group" (based on their branding repo). Maybe change this to "Linux User Group at The University of Auckland"
| body { | ||
| max-width: 100vw; | ||
| overflow-x: hidden; /* tells browser: if anything sticks out horizontally, don’t show, just clip it */ | ||
| overflow-x: hidden; |
There was a problem hiding this comment.
I think we might need to add overflow-y: auto; so that the website can be vertically scrollable. Right now, the bottom of the command palette is cut off on my screen and I can't scroll to see it :(
| </main> | ||
| <Container> | ||
| <section className="pt-32 pb-16"> | ||
| <h1 className="font-mono text-4xl font-bold mb-4">Admin</h1> |
There was a problem hiding this comment.
I don't think we need font-mono for all the Tailwind class strings since you've set it in globals.css already
| {/* heading */} | ||
| <div className="fade-up fade-up-1"> | ||
| <h1 className="font-mono font-bold text-white text-5xl sm:text-6xl md:text-7xl leading-[1.05] tracking-tight"> | ||
| Linux Users |
| {/* subheading */} | ||
| <div className="fade-up fade-up-2 mt-4"> | ||
| <p className="shimmer-accent font-mono text-xl sm:text-2xl"> | ||
| at University of Auckland |
There was a problem hiding this comment.
at The University of Auckland