feat: added hero section to homepage

[yaboi332]

Pull Request

Description

Added Hero Section to homepage

Type of Change

• [x ] feat: New feature
• fix: Bug fix
• chore: Maintenance (dependencies, config, etc.)
• docs: Documentation only
• style: Code style (formatting, no logic change)
• refactor: Code refactor (no new feature or fix)

Changes Made

-Added Hero Section
-Added Heading and subheading
-Added social icons
-Added right column for logo

Screenshots (if applicable)

Checklist

• [ x] My code follows the project's style guidelines
• [ x] I have performed a self-review of my code
• [ x] I have tested my changes locally
• [x ] npm run lint passes without errors
• [ x] npm run build completes successfully

Related Issues

[sebastian-noel]

Hey, good first attempt @yaboi332 ! A few things to fix and improve before this is ready to merge.

Club name is wrong -- it should be "Graphics Programming Knights", not "Graphic Design Knights". Please fix this.

The layout is missing most of what's in the Figma and the task description. The section should be a two-column layout -- left column has the large bold heading, subtitle, and buttons; right column is just a placeholder <div> with a comment like {/* ASCII render goes here */}. Right now there's no heading and no two-column structure. When you are fixing this though, you don't have to worry about the purple glow effect. Look at how the AboutSection component is structured for an example of how to build out a section. You can use git checkout main to get to the main branch and browse around, then git checkout <your-branch-name> to come back to your branch and continue work.

The icon buttons need to be redone. Instead of pasting in colored brand images, install react-icons and use the proper SVG components:

npm install react-icons

Then in your component:

import { FaInstagram, FaLinkedin, FaDiscord } from "react-icons/fa";

<FaDiscord size={20} />   // inside the Join Us button
<FaInstagram size={28} /> // standalone icon button
<FaLinkedin size={28} />  // standalone icon button

The task also specifies the links -- make sure each button/icon is wrapped in an <a> tag with the correct href and target="_blank" (this makes it so the links open in a new tab).

Don't be afraid to ask AI for help with the code. You can have it generate something and then review and tweak it yourself -- this is a completely normal workflow and expected for you to be able to match the quality we are aiming for as a beginner. Just try to read through each line of code and understand it, you can use AI for this as well. I'd recommend using an AI that has context of the project rather than a standalone chatbot. Since you're on VS Code, GitHub Copilot is built in and is a good starting point (the chatbot on the side of your screen).

Also, before opening a new PR, run npm run lint and npm run build locally and make sure both pass -- check CONTRIBUTING.md for the full workflow.

DM me or drop questions in #web-dev and I'm happy to help!

[sebastian-noel]

looks good! much better work, fixed a few things and merged it!

heres what I fixed to get this building and aligned with the design system:

• Added the missing react-icons dependency (build was failing without it)
• Swapped raw Tailwind colors (bg-black, text-gray-400, bg-purple-600, etc.) for the theme's design tokens (bg-page-background, text-text-secondary, bg-accent, etc.)
• Fixed root element (div → section), removed the redundant min-h-screen and invalid min-h [screen-size] arbitrary value
• Fixed a broken LinkedIn URL typo
• Reworked the hero to actually fill the full section height (it was collapsing to content height since h-full doesn't resolve against a non-stretching flex parent) and scaled up the layout/typography so it reads as a proper hero rather than a small block of text