Code Architecture

Entry and Rendering

• index.js uses React 18's createRoot to mount the app
• App.js wraps content with BrowserRouter and defines Routes inside

Routing Definition

• Uses declarative Route components; each route explicitly specifies element
• Layout is composed at the route level: <><Header /><Navbar /><Home /></>
• Child pages usually do not render Header, only Navbar

Component Hierarchy

• Footer is inside Router but outside Routes, shared by all pages
• Header and Navbar are included per route in each Route's element

State Management

• No global state (Redux, Context, etc.)
• Components use React Hooks: useState, useEffect, useRef
• Typical usage:
  • Navbar: dropdown menu, mobile menu, close on outside click
  • Home: Intersection Observer for scroll animations

Style Organization

• Main styling: Tailwind utility classes
• Global: App.css, index.css
• Component-level: some components import index.css or custom CSS
• Utility: cn() in lib/utils.js merges clsx and tailwind-merge

Data Organization

Type	Location	Example
Hardcoded	Inside components	Navbar menu items, activity list
JSON	Honor_Wall.json	Honor wall data
Static assets	public/	Images, PDF links