University Alumni Network Page

Create an alumni network page for "Crestfield University" — a mid-size private university with 45,000+ alumni worldwide. The page serves as a central hub for alumni engagement, networking, events, and giving. Design should feel prestigious yet welcoming and modern.

1. HERO SECTION (60vh height)
- Background: wide-angle photo of the university campus with autumn foliage, slight dark gradient overlay
- Headline: "Welcome Back, Crestfield Alumni"
- Subheading: "45,000+ graduates. One powerful network. Stay connected, give back, and grow together."
- Two CTAs: "Join the Network" (primary, filled) and "Find Alumni" (secondary, outlined with white border)
- Stats bar at bottom of hero (overlapping into next section):
  - "45,200+ Alumni" | "72 Countries" | "340+ Events/Year" | "$12.8M Raised in 2025"
  - Each stat has a small icon above it (graduation cap, globe, calendar, heart)
  - White card background with subtle shadow

2. ALUMNI SPOTLIGHT SECTION (featured profiles, 3 cards)
- Section headline: "Alumni Making an Impact"
- Card 1: "Dr. Nadia Chen, Class of 2008" — Chief Medical Officer at Meridian Health — Photo headshot — Quote: "Crestfield gave me the foundation to think critically and lead with empathy." — "Read Story →"
- Card 2: "Marcus Rivera, Class of 2015" — Founder & CEO of GreenLoop Technologies — Photo headshot — Quote: "The connections I made in the entrepreneurship program still drive my business today." — "Read Story →"
- Card 3: "Priya Anand, Class of 2019" — Senior Data Scientist at NASA JPL — Photo headshot — Quote: "My professors didn't just teach — they mentored. That changed everything." — "Read Story →"
- Each card: rounded photo (120px circle), name, class year, title, one-line quote, link
- Horizontal scroll on mobile, 3-column grid on desktop
- "See All Alumni Stories" link below

3. UPCOMING EVENTS (calendar-style list, 4 events)
- Section headline: "Events & Reunions"
- Event 1: "Class of 2016 — 10-Year Reunion" — Saturday, May 16, 2026 — On Campus, Grand Hall — "Register" button — Badge: "Reunion"
- Event 2: "Alumni Networking Mixer — NYC Chapter" — Thursday, April 3, 2026 — The Loft, Manhattan — "RSVP" button — Badge: "Networking"
- Event 3: "Webinar: Career Pivots After 30" — Wednesday, April 9, 2026 — Virtual (Zoom) — "Join" button — Badge: "Virtual"
- Event 4: "Homecoming Weekend 2026" — October 10–12, 2026 — On Campus — "Save the Date" button — Badge: "Homecoming"
- Each event: date column on left (month + day stacked), event details center, action button right
- Color-coded badges by event type
- "View Full Events Calendar →" link at bottom

4. ALUMNI DIRECTORY (search & filter preview)
- Headline: "Find Your Classmates"
- Search bar: placeholder "Search by name, class year, company, or location..."
- Filter row: Class Year (dropdown), Industry (dropdown), Location (dropdown), Chapter (dropdown)
- Preview results grid (4 cards):
  - "Jordan Blake, '12" — Marketing Director, Ogilvy — San Francisco, CA — "Connect" button
  - "Aisha Okonkwo, '18" — Software Engineer, Stripe — London, UK — "Connect" button
  - "Tom Nakamura, '05" — Partner, Baker McKenzie — Tokyo, Japan — "Connect" button
  - "Elena Petrova, '21" — Graduate Student, MIT — Cambridge, MA — "Connect" button
- Each card: avatar circle, name + class year, title + company, location with pin icon, connect button
- "Browse Full Directory →" link (requires login)
- Note: "Log in to your alumni account to view full profiles and connect"

5. MENTORSHIP PROGRAM (2-column split)
- Left column:
  - Headline: "Give Back. Pay It Forward."
  - Subheading: "Join the Crestfield Mentorship Program"
  - Body: "Connect with current students and recent graduates who could benefit from your experience. Whether you offer career advice, portfolio reviews, or interview prep — your time makes a difference."
  - Stats: "820 active mentors" | "1,400+ matches made" | "94% satisfaction rate"
  - "Become a Mentor" CTA button
- Right column:
  - Illustration or photo of a mentor and mentee in a virtual call
  - Testimonial card: "My mentor helped me land my first job out of college. I'm now mentoring three students myself." — Kai Torres, '20
- Background: light blue-gray tinted section for contrast

6. GIVING & CAMPAIGNS (donation section)
- Headline: "Support the Next Generation"
- Subheading: "Your gift creates scholarships, funds research, and improves campus life."
- Featured campaign card (large):
  - "Annual Fund 2026 — Goal: $3,000,000"
  - Progress bar: $2,180,000 raised (73% filled, animated on scroll)
  - "4,200 donors this year"
  - "Give Now" prominent button
- Three smaller campaign cards in a row:
  - "STEM Scholarship Fund" — $420,000 / $500,000 goal — 84% — "Donate"
  - "Library Renovation" — $1.1M / $2M goal — 55% — "Donate"
  - "Athletics Program" — $280,000 / $400,000 goal — 70% — "Donate"
- Each with progress bar, amount raised, percentage, donate button
- "View All Campaigns →" link

7. CHAPTERS & REGIONAL GROUPS (interactive map or grid)
- Headline: "Alumni Chapters Worldwide"
- Interactive map with pins at major chapter locations, or a grid of chapter cards
- Featured chapters (6 cards):
  - New York City — 3,800 members — "Join Chapter"
  - San Francisco — 2,400 members — "Join Chapter"
  - London — 1,100 members — "Join Chapter"
  - Chicago — 1,600 members — "Join Chapter"
  - Washington D.C. — 2,100 members — "Join Chapter"
  - Singapore — 680 members — "Join Chapter"
- Each card: city name, member count, small flag or city icon, join button
- "Find Your Local Chapter →" link

8. NEWS & UPDATES (3-column blog-style cards)
- Headline: "From the Alumni Office"
- Card 1: "Crestfield Ranked #28 in National University Rankings" — March 5, 2026 — News badge — Thumbnail image
- Card 2: "New Career Services Portal Now Open to All Alumni" — February 22, 2026 — Announcement badge — Thumbnail image
- Card 3: "Alumni Entrepreneur Wins Forbes 30 Under 30" — February 10, 2026 — Feature badge — Thumbnail image
- Each card: thumbnail image (16:9), badge, title, date, "Read More →" link
- "View All News →" link

9. BENEFITS & PERKS (icon grid, 2 rows of 4)
- Headline: "Your Alumni Benefits"
- Row 1:
  - Career Services — Resume reviews, job board access, career coaching
  - Library Access — Digital library and research databases
  - Campus Discounts — Bookstore, athletics events, campus facilities
  - Insurance Plans — Group rates on health, auto, and life insurance
- Row 2:
  - Travel Discounts — Partner hotels and airlines
  - Continuing Education — Free audit of select online courses
  - Email for Life — Keep your @crestfield.edu email address
  - Transcript Requests — Fast-track official transcript orders
- Each item: icon (48px), benefit name, one-line description
- "View All Benefits →" link

10. CALL TO ACTION / SIGN UP (full-width banner)
- Background: university brand color with diagonal geometric pattern
- Headline: "Not Yet Connected?"
- Body: "Create your alumni account to access the directory, RSVP to events, join chapters, and unlock all benefits."
- Email input + "Get Started" button
- Below: "Already have an account? Log In"

11. FOOTER
- University logo + "Crestfield University Alumni Association"
- Footer columns:
  - Connect: Directory, Chapters, Mentorship, Events
  - Give: Annual Fund, Campaigns, Planned Giving, Matching Gifts
  - Resources: Benefits, Career Services, Transcripts, Email
  - About: Our Mission, Staff, Contact, Privacy Policy
- Social icons: LinkedIn, Facebook, Instagram, Twitter, YouTube
- "© 2026 Crestfield University Alumni Association. All rights reserved."
- Address: "One University Drive, Crestfield, MA 02140"

Design: Prestigious and modern. Background: #F8F9FB (cool off-white), cards: #FFFFFF with subtle shadow (0 2px 8px rgba(0,0,0,0.06)), text: #1A1F36 (dark navy), accent: #1E40AF (university blue), secondary accent: #9333EA (purple for CTAs/highlights), success green: #16A34A for progress bars. Typography: "Merriweather" for headings, "Inter" for body. Border-radius: 12px on cards, 8px on buttons. Section padding: 80px top/bottom.

Responsive: On mobile, alumni spotlight cards become a horizontal swipe carousel, event list becomes stacked cards with date badge on top, directory search filters collapse into a "Filters" expandable button, chapters grid becomes 2-column, benefits grid becomes accordion-style list. Sticky "Join the Network" banner at bottom on mobile.