update resources page

[nicoleluo7]

Resources Page Styling Updates

Overview

This PR improves the visual design and consistency of the Resources page while maintaining functionality. The page now matches the styling patterns used across the rest of the website.

Changes Made

Styling Improvements

Typography & Layout

• Unified typography: Updated fonts and sizes to match Home.css patterns
  • Headers now use consistent HelveticaNeue font
  • Body text standardized to 1.15rem across all subpages (Foreword, FAQ, Courses, Clubs, etc.)
  • Reduced spacing between section headers (e.g., "Foreword") and content from 2rem to 0.5rem

Page Header

• Added Resources page header: Added main "Resources" header matching the style of Sponsors and Calendar pages
  • Black, bold title (font-weight-bold)
  • Subtitle: "Information and guides for CS majors at Cornell"
  • Properly centered and responsive

Layout Modernization

• Replaced float-based layout with CSS Grid:
  • Desktop: Grid layout with sticky sidebar
  • Tablet: Horizontal sidebar navigation
  • Mobile: Stacked layout with responsive spacing
• Improved header centering: Section headers (Foreword, FAQ, etc.) now span full width and are centered like other pages

Visual Enhancements

Sidebar

• Enhanced hover states with color transitions and padding
• Active link highlighting with red color and border
• Improved responsive behavior on smaller screens

Accordion Components

• Updated styling for FAQ accordions with better hover effects
• Improved color scheme using ACSU red (#b01c33) for active states
• Better spacing and typography

Anecdotes Section (Major Enhancement)

• Restructured with year groupings: Organized anecdotes into Freshman, Sophomore, Junior, and Senior sections
• Enhanced visual design:
  • Card-based layout for each year group with shadows and hover effects
  • Custom styled year headers with decorative underlines
  • Improved intro section with gradient background and border accent
  • Anecdotes-specific accordion styling with better colors and spacing
  • Card-like containers for each anecdote with hover effects
• Better visual hierarchy: Clear separation between year groups with improved spacing

Responsive Design

• Updated all media queries for better mobile/tablet experience
• Consistent spacing adjustments across breakpoints
• Proper font size scaling for smaller screens

Files Changed

• client/src/pages/Resource/Resources.jsx
• client/src/pages/Resource/Resources/Components/Header.js
• client/src/pages/Resource/Resources/Components/Section.js
• client/src/pages/Resource/Resources/Pages/Anecdotes.js
• client/src/pages/Resource/Resources/Pages/FAQ.js
• client/src/pages/Resource/Resources/CSS/Resources.css
• client/src/pages/Resource/Resources/CSS/Accordion.css

Testing

• All subpages render correctly
• Navigation between sections works smoothly
• Responsive design tested on mobile, tablet, and desktop
• Accordion functionality preserved
• No linting errors

Screenshots

---

Note: This PR maintains backward compatibility and doesn't change any functional behavior, only visual styling and layout improvements.