style: mobile responsiveness, nav improvements, and content updates

[tjhiaj]

Description

This PR encompasses responsive design improvements, content enhancements, navigation fixes, and footer updates. Key highlights include removing login from navbar, adding social links, improving image handling, splitting content for clarity, and making the entire site mobile-responsive with consistent spacing.

Type of Change

• Bug fix
• New feature
• Refactor / code improvement
• Documentation update
• Style / UI change
• Configuration change

Changes Made

Navigation & Routing

• Removed login button from Navbar (both desktop and mobile views) - login now only accessible via URL
• Updated About route links to /aboutus in Navbar and Footer
• Centered desktop navigation links while keeping hamburger button right-aligned
• Inset navbar on mobile to prevent full-width stretching (w-[calc(100%-2rem)] mx-4 sm:mx-6)

Homepage Hero (MainSection)

• Centered "WiCSM" heading and subtitle text on mobile
• Adjusted photo stack to be closer to text horizontally on desktop
• Scaled photo shuffle down on mobile (w-[260px] h-[260px] sm:w-[300px] sm:h-[300px])
• Increased "University of Toronto Scarborough" subtitle from text-[0.8rem] to text-base md:text-lg
• Raised content z-index to prevent gradient overlap on subtitle
• Added responsive padding (px-6 sm:px-10 md:px-16 lg:px-24) and top spacing (pt-28 sm:pt-24)

Who We Are Section (WhoSection)

• Added descriptive paragraph explaining WiCSM's mission
• Updated image crop handling with object-center for consistent positioning

Data Bites Section (NextEventSection)

• Split long data bites paragraph into three separate paragraphs for better readability
• Fixed image rendering: now uses square tile container with Image fill + object-cover
• Centered heading and paragraph text on mobile (text-center md:text-left)
• Added responsive padding (px-6 sm:px-10 md:px-16 lg:px-24)
• Paragraphs now center on mobile with mx-auto md:mx-0
• Updated font size to consistent text-lg

Support Our Mission Section (SupportMissionSection)

• Updated paragraph text from text-[0.8rem] md:text-lg to text-lg for consistency
• Centered heading and text on mobile (text-center md:text-left)
• Centered sponsor image on mobile
• Added responsive padding (px-6 sm:px-10 md:px-16 lg:px-24)

Footer

• Added social media icons and external links:
  • Instagram (FaInstagram from react-icons)
  • Facebook (FaFacebook from react-icons)
  • Discord (FaDiscord from react-icons)
  • LinkedIn (FaLinkedinIn from react-icons)
• Updated About link to /aboutus
• Centered quicklinks on mobile using self-center md:self-auto alignment

Bug Fixes

• Fixed AboutSection import path in /aboutus page
• Fixed missing next/image imports in components that use <Image /> components

Testing

• Tested locally
• Verified on mobile / responsive views
• Added or updated tests

Checklist

• Code follows the project's style guidelines
• No new warnings or errors in the console
• Related documentation has been updated (if applicable)
• PR title follows conventional format

Additional Notes

All responsive changes use Tailwind CSS breakpoints (sm:, md:, lg:). Desktop layouts remain functionally unchanged except for navigation centering. No new dependencies added beyond existing react-icons library usage for social icons.

Next PR: fix carousel jump, increase contrast in value cards to meet accessibility standards