E-LINK

The riskiest assumption was that busy people would turn up

The thing most likely to break this plan was whether the people involved would turn up at all. So we mapped four groups, students, alumni, recruiters and Career Services, against what each one gets from E-LINK and what we are asking from them in return. If that trade looks bad for any group, the plan fails there.

Working as the project manager rather than the designer taught me more than the design work did. As a designer I ask whether the design is good. As a project manager I had to ask who does the work, when they do it, and what happens if they do not. Most student proposals I have seen say whether the design is good and never say who does the work.

Students

Primary Beneficiaries of E-Link

Would gain access to alumni network & employers, structured and precise interview formation.
Main gain: higher internship success rate.

Alumni Mentors & Esade Alumni Network

Would gain access to preselected candidates and recognition within Esade.
Increased alumni engagement strengthening bonds and recognition of the network.

Employers (external)

Access to well prepared candidates while reducing companies’ screening costs.
Opportunity of strengthening their company’s attractivity to qualified candidates.

Career Services & Esade

Stronger employer relationships, precise data insight on students aspiration.
Improved school reputation through higher internship landing rate for students.

4 Key Success Factors

Clear alignment with Career Services
Clear model of formation and commitment for Alumni mentors
Quality control of student preparation
Strong engagement incentives for all stakeholders

The two hardest groups to win over were students, who would skip sessions without a reason to turn up, and Career Services, who would carry most of the added workload. So we paired every student session with a real incentive, and we gave Career Services logistical support and ready to use templates so that E-LINK reduced their workload instead of adding to it.

Twelve weeks, five phases, a checkpoint at the end of each

We broke the work into five phases, from problem definition through pilot testing to expansion and closure, and scheduled them across a 12 week window from late February to mid May. The milestones are informing students, running a 48 hour pilot, going live, and comparing the results against the baseline. Each phase ends with a checkpoint, so anyone can see what has been done and what comes next.

Timeline · Feb 23, 2026 to May 11, 2026

Inform students & gather signupsMarch 30, 2026
Execute 48h pilot test cycleApril 27, 2026
Go Live: Launch core platformMay 1, 2026
Compare results vs baselineMay 9, 2026
Formalize project completionMay 11, 2026

Discovery & Problem
Outreach & Network
Design & Prototyping
Testing & Q&A
Launch & Execution
Expansion & Closure

Work Breakdown Structure

Phase 1

Project Foundation
Stakeholder Research
Scope Finalization

Phase 2

Interface & Experience
Resource Architecture
Networking Features

Phase 3

Pilot Readiness
Testing & Refinement
Validation

Phase 4

Core System Deployment
Engagement Initiatives
Strategic Partnerships

Phase 5

Scale Up Operations
Performance Auditing
Project Closing

Gantt · Phase Schedule

Discovery & Problem

Feb 24 – Mar 15

Outreach & Network

Mar 9 – Apr 13

Design & Prototyping

Apr 13 – Apr 20

Testing & QA

Apr 20 – Apr 28

Launch & Execution

Apr 27 – May 2

Expansion & Closure

May 1 – May 11

CompletedIn ProgressNot Started

We listed the plan's weaknesses before the pitch

We ran the plan through a risk register before we pitched it. We listed three external risks (student engagement, recruiters coming on board, alumni fatigue) and four internal ones (platform failures, data privacy, misalignment with Career Services, low quality prep material), and graded each one on probability and impact with a specific mitigation.

Writing a risk register before the pitch felt like handing people reasons to say no. It made the pitch easier. Everyone in that room was going to find those weaknesses anyway, and listing them first meant we already had an answer ready for each one. I would rather point out where the plan is likely to fail than have someone else point it out for me.

Code	Risk	Probability	Impact	Grade	Mitigation
EXT-1	Low Student Engagement Students are "lazy" or disinterested in attending sessions.	High	High	A	Incentivize attendance with social events (dinners/drinks). Showcase success statistics early to prove value.
EXT-2	Recruiters Not Participating Employers do not see the value in the platform.	Medium	High	A	Highlight reduced screening costs and access to "well prepared" candidates. Create a sense of competition/urgency among firms.
EXT-3	Alumni Fatigue Mentors feel overwhelmed by student requests or lack of structure.	Medium	Medium	B	Implement structured "Coffee Chat" modules and clear templates to reduce workload. Guarantee recognition or stipends for their help.
INT-1	Technical Platform Failure The "Study Buddy" or matching algorithm fails.	Low	High	A	Conduct a rigorous 48 hour pilot testing phase before core launch. Perform rapid technical iterations based on error reports.
INT-2	Data Privacy Breach Leak of private alumni contact info (personally identifiable information) or student interview transcripts.	Low	Critical	A	Restrict access to the Esade network only. Implement strict quality control and student governed repository rules.
INT-3	Misalignment with Career Services Project duplicates work or creates extra burden for school staff.	Medium	High	A	Offer logistical support and run all joint events together. Ensure complete transparency on data, objectives, and results.
INT-4	Poor Quality of Prep Material Students share inaccurate "culture codes" or transcripts.	Medium	Medium	B	Establish a quality control protocol for all uploaded resources. Assign leadership roles to Student Club reps for moderation.

Two risks were graded A, and they shaped the plan more than anything else. Low student engagement is high probability and high impact, which is why every milestone pairs a session with a social incentive. Data privacy is low probability and critical impact, which is why we scoped the repository as private to Esade with student governed access rather than open to anyone with a link.

How we would know whether it worked

The landing rate is the number the school cares about, but it is a bad number to run the project on, because you do not get an answer for two years. So we also tracked things that change every week: who turned up, who messaged an alumnus, and who came back. A number you only get at the end cannot tell you what to change while the project is still running.

+20%

Interview landing rate

The main measure of success. It takes two years to read, and it compares the interview landing rate after launch against the baseline of about 35% from before E-LINK.

Adoption roadmap

By Mar 2027Engage 60–80 students
By Jun 2027Activate 10–15 alumni mentors
Mar–Oct 2027Host 3 recruiter dinners
By Jan 2028Centralize 30–40 prep resources
By Jun 2028Grow to 30 alumni mentors
By Jan 2029Grow to 140–200 students

Growth targets

Students engaged

By Mar 202760–80

By Jan 2029140–200

Alumni mentors

By Jun 202710–15

By Jun 202830

Recruiter dinners

Between March and October 2027

Prep resources centralized

30–40

By January 2028

What we could measure every week

Participants

Daily connections

Students who contacted an alumnus

We tracked how much people actually used the platform, because that shows up within weeks, long before two years of interview data could.

Behind the Prototype

The Code, Page by Page

This shows each page of the prototype next to the React component behind it. Pick a page to watch it run and read its code. E-LINK was a proposal and was never shipped, so every person and company in the prototype is sample data. No real alumni or recruiter information is used.

AlumniDatabase.tsx202 lines

import { Link } from "react-router";
import { ArrowLeft, Search, Filter, MapPin, Briefcase, Calendar } from "lucide-react";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
import { useState } from "react";

export function AlumniDatabase() {
  const [searchTerm, setSearchTerm] = useState("");
  const [careerFilter, setCareerFilter] = useState("all");
  const [locationFilter, setLocationFilter] = useState("all");

  const alumni = [
    {
      id: 1,
      name: "Maria Garcia",
      career: "Investment Banking",
      company: "Goldman Sachs",
      location: "London, UK",
      graduationYear: 2019,
      age: 28,
      imageUrl: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150",
    },
    {
      id: 2,
      name: "Carlos Rodriguez",
      career: "Management Consulting",
      company: "McKinsey & Company",
      location: "Barcelona, Spain",
      graduationYear: 2018,
      age: 29,
      imageUrl: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150",
    },
    {
      id: 3,
      name: "Sophie Laurent",
      career: "Technology",
      company: "Google",
      location: "Paris, France",
      graduationYear: 2020,
      age: 27,
      imageUrl: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150",
    },
    {
      id: 4,
      name: "Alessandro Rossi",
      career: "Private Equity",
      company: "KKR",
      location: "Milan, Italy",
      graduationYear: 2017,
      age: 30,
      imageUrl: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150",
    },
    {
      id: 5,
      name: "Laura Martinez",
      career: "Marketing",
      company: "LVMH",
      location: "Madrid, Spain",
      graduationYear: 2021,
      age: 26,
      imageUrl: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150",
    },
    {
      id: 6,
      name: "Thomas Müller",
      career: "Entrepreneurship",
      company: "Founder @ TechStart",
      location: "Berlin, Germany",
      graduationYear: 2016,
      age: 31,
      imageUrl: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=150",
    },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
      <div className="max-w-7xl mx-auto p-8">
        {/* Header */}
        <div className="text-center mb-12">
          <Link to="/">
            <Button variant="ghost" className="mb-6 hover:bg-[#0B1E3D]/10">
              <ArrowLeft className="w-4 h-4 mr-2" />
              Back to Dashboard
            </Button>
          </Link>
          <h1 className="text-5xl font-bold text-[#0B1E3D] mb-4">Alumni Database</h1>
          <p className="text-gray-600 text-lg">Find and connect with ESADE alumni worldwide</p>
        </div>

        {/* Navigation */}
        <div className="bg-white rounded-2xl shadow-lg p-6 mb-10 max-w-4xl mx-auto border border-gray-200">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <Link to="/elink/group-chats" className="w-full">
              <Button variant="outline" className="w-full border-[#0B1E3D] text-[#0B1E3D] hover:bg-[#0B1E3D]/10">Group Chats</Button>
            </Link>
            <Link to="/elink/alumni-database" className="w-full">
              <Button className="w-full bg-[#0B1E3D] hover:bg-[#0a1929] text-white">Alumni Database</Button>
            </Link>
            <Link to="/elink/mentorship" className="w-full">
              <Button variant="outline" className="w-full border-[#0B1E3D] text-[#0B1E3D] hover:bg-[#0B1E3D]/10">Mentorship Program</Button>
            </Link>
            <Link to="/elink/dinners" className="w-full">
              <Button variant="outline" className="w-full border-[#0B1E3D] text-[#0B1E3D] hover:bg-[#0B1E3D]/10">Recruiter Dinners</Button>
            </Link>
          </div>
        </div>

        {/* Filters */}
        <div className="bg-white rounded-2xl shadow-lg p-8 mb-8 max-w-5xl mx-auto border border-gray-200">
          <div className="flex items-center gap-2 mb-6">
            <Filter className="w-5 h-5 text-[#0B1E3D]" />
            <h2 className="text-xl font-semibold text-[#0B1E3D]">Filter Alumni</h2>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Search by name</label>
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#0B1E3D] w-4 h-4" />
                <Input
                  type="text"
                  placeholder="Search alumni..."
                  className="pl-10 border-2 focus:border-[#0B1E3D]"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Career Field</label>
              <Select value={careerFilter} onValueChange={setCareerFilter}>
                <SelectTrigger>
                  <SelectValue placeholder="All careers" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Careers</SelectItem>
                  <SelectItem value="banking">Investment Banking</SelectItem>
                  <SelectItem value="consulting">Management Consulting</SelectItem>
                  <SelectItem value="tech">Technology</SelectItem>
                  <SelectItem value="pe">Private Equity</SelectItem>
                  <SelectItem value="marketing">Marketing</SelectItem>
                  <SelectItem value="entrepreneurship">Entrepreneurship</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Location</label>
              <Select value={locationFilter} onValueChange={setLocationFilter}>
                <SelectTrigger>
                  <SelectValue placeholder="All locations" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Locations</SelectItem>
                  <SelectItem value="spain">Spain</SelectItem>
                  <SelectItem value="uk">United Kingdom</SelectItem>
                  <SelectItem value="france">France</SelectItem>
                  <SelectItem value="germany">Germany</SelectItem>
                  <SelectItem value="italy">Italy</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </div>

        {/* Alumni Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
          {alumni.map((person) => (
            <div key={person.id} className="bg-white rounded-2xl shadow-md p-6 hover:shadow-xl transition-all hover:-translate-y-1 border border-gray-200">
              <div className="flex items-center gap-4 mb-4">
                <img
                  src={person.imageUrl}
                  alt={person.name}
                  className="w-16 h-16 rounded-full object-cover"
                />
                <div>
                  <h3 className="font-semibold text-lg text-gray-900">{person.name}</h3>
                  <p className="text-sm text-gray-500">Class of {person.graduationYear}</p>
                </div>
              </div>
              <div className="space-y-2 mb-4">
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  <Briefcase className="w-4 h-4" />
                  <span>{person.career}</span>
                </div>
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  <MapPin className="w-4 h-4" />
                  <span>{person.location}</span>
                </div>
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  <Calendar className="w-4 h-4" />
                  <span>{person.age} years old</span>
                </div>
              </div>
              <p className="text-sm text-gray-700 mb-4">{person.company}</p>
              <Button className="w-full bg-[#0B1E3D] hover:bg-[#0a1929] text-white">Connect</Button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

import { Link } from "react-router";
import { ArrowLeft, MessageCircle, Users, Search } from "lucide-react";
import { Button } from "../ui/button";
import { Input } from "../ui/input";

export function GroupChats() {
  const groupChats = [
    {
      id: 1,
      name: "Finance & Banking Professionals",
      members: 234,
      description: "Connect with alumni and recruiters in finance and banking sectors",
      activeNow: 12,
    },
    {
      id: 2,
      name: "Tech & Innovation",
      members: 189,
      description: "Network with professionals in technology, startups, and innovation",
      activeNow: 8,
    },
    {
      id: 3,
      name: "Consulting Network",
      members: 156,
      description: "Join consultants and consulting recruiters for career opportunities",
      activeNow: 15,
    },
    {
      id: 4,
      name: "Marketing & Brand Management",
      members: 142,
      description: "Connect with marketing professionals and brand managers",
      activeNow: 6,
    },
    {
      id: 5,
      name: "Entrepreneurship Hub",
      members: 98,
      description: "Network with founders, entrepreneurs, and venture capitalists",
      activeNow: 4,
    },
    {
      id: 6,
      name: "Luxury & Retail",
      members: 87,
      description: "Connect with professionals in luxury goods and retail sectors",
      activeNow: 3,
    },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
      <div className="max-w-7xl mx-auto p-8">
        {/* Header */}
        <div className="text-center mb-12">
          <Link to="/">
            <Button variant="ghost" className="mb-6 hover:bg-[#0B1E3D]/10">
              <ArrowLeft className="w-4 h-4 mr-2" />
              Back to Dashboard
            </Button>
          </Link>
          <h1 className="text-5xl font-bold text-[#0B1E3D] mb-4">E-Link Professional Network</h1>
          <p className="text-gray-600 text-lg">Connect with recruiters and alumni in large group chats</p>
        </div>

        {/* Navigation */}
        <div className="bg-white rounded-2xl shadow-lg p-6 mb-10 max-w-4xl mx-auto border border-gray-200">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <Link to="/elink/group-chats" className="w-full">
              <Button className="w-full bg-[#0B1E3D] hover:bg-[#0a1929] text-white">Group Chats</Button>
            </Link>
            <Link to="/elink/alumni-database" className="w-full">
              <Button variant="outline" className="w-full border-[#0B1E3D] text-[#0B1E3D] hover:bg-[#0B1E3D]/10">Alumni Database</Button>
            </Link>
            <Link to="/elink/mentorship" className="w-full">
              <Button variant="outline" className="w-full border-[#0B1E3D] text-[#0B1E3D] hover:bg-[#0B1E3D]/10">Mentorship Program</Button>
            </Link>
            <Link to="/elink/dinners" className="w-full">
              <Button variant="outline" className="w-full border-[#0B1E3D] text-[#0B1E3D] hover:bg-[#0B1E3D]/10">Recruiter Dinners</Button>
            </Link>
          </div>
        </div>

        {/* Search */}
        <div className="mb-8 max-w-2xl mx-auto">
          <div className="relative">
            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-[#0B1E3D] w-5 h-5" />
            <Input
              type="text"
              placeholder="Search group chats by industry or interest..."
              className="pl-12 h-12 border-2 border-gray-200 focus:border-[#0B1E3D] rounded-xl"
            />
          </div>
        </div>

        {/* Group Chats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
          {groupChats.map((chat) => (
            <div key={chat.id} className="bg-white rounded-2xl shadow-md p-6 hover:shadow-xl transition-all hover:-translate-y-1 border border-gray-200">
              <div className="flex items-start justify-between mb-4">
                <div className="flex items-center gap-3">
                  <div className="w-14 h-14 rounded-2xl bg-[#0B1E3D] flex items-center justify-center shadow-lg">
                    <MessageCircle className="w-7 h-7 text-white" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg text-gray-900">{chat.name}</h3>
                    <div className="flex items-center gap-2 text-sm text-gray-500">
                      <Users className="w-4 h-4" />
                      <span>{chat.members} members</span>
                    </div>
                  </div>
                </div>
                {chat.activeNow > 0 && (
                  <div className="flex items-center gap-1 text-xs text-green-600 bg-green-50 px-2 py-1 rounded-full">
                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
                    {chat.activeNow} active
                  </div>
                )}
              </div>
              <p className="text-gray-600 text-sm mb-4">{chat.description}</p>
              <Button className="w-full bg-[#0B1E3D] hover:bg-[#0a1929] text-white">Join Chat</Button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

import { Link } from "react-router";
import { ArrowLeft, BookOpen, Video, FileText, Calendar } from "lucide-react";
import { Button } from "../ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";

export function MentorshipProgram() {
  const mentors = [
    {
      id: 1,
      name: "David Chen",
      role: "Senior Consultant @ Bain & Company",
      specialty: "Case Interview Prep",
      sessions: 24,
      imageUrl: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150",
      documents: ["Case Framework Guide", "Market Sizing Examples", "Behavioral Questions"],
    },
    {
      id: 2,
      name: "Emma Thompson",
      role: "VP @ J.P. Morgan",
      specialty: "Finance Interviews",
      sessions: 18,
      imageUrl: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150",
      documents: ["Valuation Methods", "M&A Process Overview", "Technical Q&A"],
    },
    {
      id: 3,
      name: "Lucas Silva",
      role: "Product Manager @ Meta",
      specialty: "Tech Interviews",
      sessions: 31,
      imageUrl: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=150",
      documents: ["Product Case Studies", "PM Interview Framework", "Metrics Deep-Dive"],
    },
  ];

  const upcomingWorkshops = [
    {
      id: 1,
      title: "Investment Banking Interview Bootcamp",
      mentor: "Emma Thompson",
      date: "May 5, 2026",
      time: "18:00 - 20:00 CET",
      spots: 8,
    },
    {
      id: 2,
      title: "Consulting Case Practice Session",
      mentor: "David Chen",
      date: "May 8, 2026",
      time: "19:00 - 21:00 CET",
      spots: 12,
    },
    {
      id: 3,
      title: "Tech PM Interview Masterclass",
      mentor: "Lucas Silva",
      date: "May 12, 2026",
      time: "17:30 - 19:30 CET",
      spots: 5,
    },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
      <div className="max-w-7xl mx-auto p-8">
        {/* Header */}
        <div className="text-center mb-12">
          <Link to="/">
            <Button variant="ghost" className="mb-6 hover:bg-[#0B1E3D]/10">
              <ArrowLeft className="w-4 h-4 mr-2" />
              Back to Dashboard
            </Button>
          </Link>
          <h1 className="text-5xl font-bold text-[#0B1E3D] mb-4">Alumni Mentorship Program</h1>
          <p className="text-gray-600 text-lg">Learn from experienced alumni through documents and workshops</p>
        </div>

        {/* Navigation */}
        <div className="bg-white rounded-2xl shadow-lg p-6 mb-10 max-w-4xl mx-auto border border-gray-200">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <Link to="/elink/group-chats" className="w-full">
              <Button variant="outline" className="w-full border-[#0B1E3D] text-[#0B1E3D] hover:bg-[#0B1E3D]/10">Group Chats</Button>
            </Link>
            <Link to="/elink/alumni-database" className="w-full">
              <Button variant="outline" className="w-full border-[#0B1E3D] text-[#0B1E3D] hover:bg-[#0B1E3D]/10">Alumni Database</Button>
            </Link>
            <Link to="/elink/mentorship" className="w-full">
              <Button className="w-full bg-[#0B1E3D] hover:bg-[#0a1929] text-white">Mentorship Program</Button>
            </Link>
            <Link to="/elink/dinners" className="w-full">
              <Button variant="outline" className="w-full border-[#0B1E3D] text-[#0B1E3D] hover:bg-[#0B1E3D]/10">Recruiter Dinners</Button>
            </Link>
          </div>
        </div>

        {/* Mentors Section */}
        <div className="mb-12">
          <h2 className="text-3xl font-bold text-[#0B1E3D] mb-6 text-center">Available Mentors</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
            {mentors.map((mentor) => (
              <Card key={mentor.id} className="hover:shadow-xl transition-all hover:-translate-y-1 border-gray-200">
                <CardHeader>
                  <div className="flex items-center gap-4 mb-2">
                    <img
                      src={mentor.imageUrl}
                      alt={mentor.name}
                      className="w-16 h-16 rounded-full object-cover"
                    />
                    <div>
                      <CardTitle className="text-lg">{mentor.name}</CardTitle>
                      <CardDescription className="text-sm">{mentor.role}</CardDescription>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="mb-4">
                    <p className="text-sm font-medium text-gray-700 mb-2">Specialty</p>
                    <p className="text-sm text-gray-600">{mentor.specialty}</p>
                  </div>
                  <div className="mb-4">
                    <p className="text-sm font-medium text-gray-700 mb-2">Interview Prep Documents</p>
                    <div className="space-y-1">
                      {mentor.documents.map((doc, idx) => (
                        <div key={idx} className="flex items-center gap-2 text-sm text-gray-600">
                          <FileText className="w-4 h-4 text-[#0B1E3D]" />
                          <span>{doc}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                  <div className="text-xs text-gray-500 mb-4">
                    {mentor.sessions} students mentored
                  </div>
                  <Button className="w-full bg-[#0B1E3D] hover:bg-[#0a1929] text-white">
                    <BookOpen className="w-4 h-4 mr-2" />
                    View Documents
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

        {/* Upcoming Workshops */}
        <div>
          <h2 className="text-3xl font-bold text-[#0B1E3D] mb-6 text-center">Upcoming One-on-One Workshops</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
            {upcomingWorkshops.map((workshop) => (
              <Card key={workshop.id} className="hover:shadow-xl transition-all hover:-translate-y-1 border-gray-200">
                <CardHeader>
                  <CardTitle className="text-lg">{workshop.title}</CardTitle>
                  <CardDescription>Led by {workshop.mentor}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3 mb-4">
                    <div className="flex items-center gap-2 text-sm text-gray-600">
                      <Calendar className="w-4 h-4" />
                      <span>{workshop.date}</span>
                    </div>
                    <div className="flex items-center gap-2 text-sm text-gray-600">
                      <Video className="w-4 h-4" />
                      <span>{workshop.time}</span>
                    </div>
                    <div className="text-sm">
                      <span className={`font-medium ${workshop.spots <= 5 ? 'text-orange-600' : 'text-[#0B1E3D]'}`}>
                        {workshop.spots} spots remaining
                      </span>
                    </div>
                  </div>
                  <Button className="w-full bg-[#0B1E3D] hover:bg-[#0a1929] text-white">Register Now</Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

import { Link } from "react-router";
import { ArrowLeft, Utensils, MapPin, Clock, Users, Calendar } from "lucide-react";
import { Button } from "../ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";

export function RecruiterDinners() {
  const dinners = [
    {
      id: 1,
      company: "McKinsey & Company",
      recruiter: "Sarah Williams",
      recruiterRole: "Senior Recruiting Manager",
      date: "May 10, 2026",
      time: "19:30",
      location: "Restaurant Moments, Barcelona",
      totalSpots: 12,
      spotsLeft: 4,
      cuisine: "Mediterranean",
      imageUrl: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=500",
      description: "Intimate dinner to learn about consulting careers and the McKinsey recruiting process",
    },
    {
      id: 2,
      company: "Goldman Sachs",
      recruiter: "Michael Chen",
      recruiterRole: "Head of Campus Recruiting EMEA",
      date: "May 15, 2026",
      time: "20:00",
      location: "ABaC Restaurant, Barcelona",
      totalSpots: 10,
      spotsLeft: 2,
      cuisine: "Fine Dining",
      imageUrl: "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=500",
      description: "Exclusive opportunity to network with Goldman Sachs recruiters over dinner",
    },
    {
      id: 3,
      company: "Google",
      recruiter: "Ana Rodriguez",
      recruiterRole: "Tech Recruiting Lead",
      date: "May 18, 2026",
      time: "19:00",
      location: "Cinc Sentits, Barcelona",
      totalSpots: 15,
      spotsLeft: 9,
      cuisine: "Contemporary Catalan",
      imageUrl: "https://images.unsplash.com/photo-1515669097368-22e68427d265?w=500",
      description: "Meet Google's recruiting team and learn about tech career opportunities",
    },
    {
      id: 4,
      company: "LVMH",
      recruiter: "Sophie Laurent",
      recruiterRole: "Talent Acquisition Director",
      date: "May 22, 2026",
      time: "20:30",
      location: "Disfrutar, Barcelona",
      totalSpots: 12,
      spotsLeft: 12,
      cuisine: "Modern Spanish",
      imageUrl: "https://images.unsplash.com/photo-1578474846511-04ba529f0b88?w=500",
      description: "Network with LVMH recruiters and explore luxury brand management careers",
    },
  ];

  const getStatusBadge = (spotsLeft: number, totalSpots: number) => {
    const percentage = (spotsLeft / totalSpots) * 100;
    if (percentage <= 20) {
      return <Badge variant="destructive">Almost Full</Badge>;
    } else if (percentage <= 50) {
      return <Badge className="bg-orange-500">Filling Up</Badge>;
    } else {
      return <Badge className="bg-green-500">Available</Badge>;
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
      <div className="max-w-7xl mx-auto p-8">
        {/* Header */}
        <div className="text-center mb-12">
          <Link to="/">
            <Button variant="ghost" className="mb-6 hover:bg-[#0B1E3D]/10">
              <ArrowLeft className="w-4 h-4 mr-2" />
              Back to Dashboard
            </Button>
          </Link>
          <h1 className="text-5xl font-bold text-[#0B1E3D] mb-4">Recruiter Dinners</h1>
          <p className="text-gray-600 text-lg">Exclusive networking dinners with top recruiters - First come, first served</p>
        </div>

        {/* Navigation */}
        <div className="bg-white rounded-2xl shadow-lg p-6 mb-10 max-w-4xl mx-auto border border-gray-200">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <Link to="/elink/group-chats" className="w-full">
              <Button variant="outline" className="w-full border-[#0B1E3D] text-[#0B1E3D] hover:bg-[#0B1E3D]/10">Group Chats</Button>
            </Link>
            <Link to="/elink/alumni-database" className="w-full">
              <Button variant="outline" className="w-full border-[#0B1E3D] text-[#0B1E3D] hover:bg-[#0B1E3D]/10">Alumni Database</Button>
            </Link>
            <Link to="/elink/mentorship" className="w-full">
              <Button variant="outline" className="w-full border-[#0B1E3D] text-[#0B1E3D] hover:bg-[#0B1E3D]/10">Mentorship Program</Button>
            </Link>
            <Link to="/elink/dinners" className="w-full">
              <Button className="w-full bg-[#0B1E3D] hover:bg-[#0a1929] text-white">Recruiter Dinners</Button>
            </Link>
          </div>
        </div>

        {/* Info Banner */}
        <div className="bg-[#0B1E3D]/5 border-2 border-[#0B1E3D]/20 rounded-2xl p-6 mb-8 max-w-4xl mx-auto">
          <div className="flex items-start gap-3">
            <Utensils className="w-5 h-5 text-[#0B1E3D] mt-0.5" />
            <div>
              <h3 className="font-semibold text-[#0B1E3D] mb-1">How It Works</h3>
              <p className="text-sm text-gray-700">
                These intimate dinners are limited to 10-15 students per event. Register quickly as spots fill up fast!
                All dinners are hosted at premium Barcelona restaurants and are complimentary for ESADE students.
              </p>
            </div>
          </div>
        </div>

        {/* Dinners Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
          {dinners.map((dinner) => (
            <Card key={dinner.id} className="overflow-hidden hover:shadow-xl transition-all hover:-translate-y-1 border-gray-200">
              <div className="relative h-48">
                <img
                  src={dinner.imageUrl}
                  alt={dinner.location}
                  className="w-full h-full object-cover"
                />
                <div className="absolute top-4 right-4">
                  {getStatusBadge(dinner.spotsLeft, dinner.totalSpots)}
                </div>
              </div>
              <CardHeader>
                <div className="flex items-start justify-between">
                  <div>
                    <CardTitle className="text-xl">{dinner.company}</CardTitle>
                    <CardDescription className="mt-1">
                      with {dinner.recruiter}, {dinner.recruiterRole}
                    </CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-gray-600 mb-4">{dinner.description}</p>
                <div className="space-y-2 mb-4">
                  <div className="flex items-center gap-2 text-sm text-gray-600">
                    <Calendar className="w-4 h-4" />
                    <span>{dinner.date}</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm text-gray-600">
                    <Clock className="w-4 h-4" />
                    <span>{dinner.time}</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm text-gray-600">
                    <MapPin className="w-4 h-4" />
                    <span>{dinner.location}</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm text-gray-600">
                    <Utensils className="w-4 h-4" />
                    <span>{dinner.cuisine}</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm">
                    <Users className="w-4 h-4" />
                    <span className={dinner.spotsLeft <= 3 ? 'text-orange-600 font-medium' : 'text-gray-600'}>
                      {dinner.spotsLeft} of {dinner.totalSpots} spots remaining
                    </span>
                  </div>
                </div>
                <Button
                  className="w-full bg-[#0B1E3D] hover:bg-[#0a1929] text-white disabled:bg-gray-400"
                  disabled={dinner.spotsLeft === 0}
                >
                  {dinner.spotsLeft === 0 ? 'Fully Booked' : 'Reserve My Spot'}
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}

How it turned out, and what I would change

This was a proposal. It had to be detailed enough that Career Services could pick it up and run it without us. The stakeholder analysis taught me the most. It is easy to design something excellent for students and forget that it also has to be worth the time of the staff and the alumni. That analysis changed real decisions in the plan.

The next step is to stop testing it on paper. I would run a small pilot that Career Services has actually agreed to. Every number in this plan is a projection until someone does that.

What I took away is that on a project like this, people approve the plan rather than the screens. I came in wanting to design the platform, and the useful work turned out to be the schedule, the stakeholder analysis and the risk register. Those are the documents that decide whether anything gets built at all.

I was frustrated for the first few weeks. Being the project manager meant watching other people make the decisions I wanted to make, and building a Gantt chart is not why I went into design. By the end I had changed my mind. The schedule and the risk register are what turned this from an idea into something a school could actually run, and I now put my hand up for that role instead of avoiding it.

How I would change this today with AI

Two parts of this plan were going to be done by hand and should not be. Matching a student to an alumnus meant Career Services reading profiles, which is exactly the work that made the plan expensive for them. A model could do the first pass from what each person says they want and hand staff a short list to approve. Writing the risk register and the schedule also took weeks, and a model would get me to a first draft in an afternoon.

None of that touches the reason this plan might fail, which is whether busy alumni give up an evening. No model makes anybody turn up. Faster drafts would only mean more of the semester spent testing the plan on real people instead of writing it.

Fewer Esade students were landing interviews than students at rival schools

Esade held at 35% while its rivals climbed to 53%

Nobody knew what alumni actually did after graduating

A large alumni network, scattered and unusable

A slipping landing rate is a recruiting problem too