File: /var/www/html/alight.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nairobi Hub Strategic Advantage</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #1a1a1a;
color: white;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
/* Slide Styles */
.slide {
width: 100%;
min-height: 100vh;
padding: 60px;
display: none;
page-break-after: always;
}
.slide.active {
display: flex;
flex-direction: column;
}
/* Print Styles */
@media print {
.slide {
display: flex !important;
flex-direction: column;
min-height: 100vh;
page-break-after: always;
}
.controls, .progress-bar {
display: none !important;
}
body {
background: white;
}
}
/* Title Slide */
.slide-title {
background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
justify-content: center;
align-items: center;
text-align: center;
}
.slide-title h1 {
font-size: 4rem;
margin-bottom: 30px;
font-weight: 700;
}
.slide-title p {
font-size: 1.8rem;
color: #e0e7ff;
}
/* Content Slides */
.slide-content {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.slide h2 {
font-size: 3rem;
margin-bottom: 40px;
font-weight: 700;
border-bottom: 4px solid #3b82f6;
padding-bottom: 15px;
}
.content-section {
margin-bottom: 35px;
}
.content-section h3 {
font-size: 2rem;
color: #60a5fa;
margin-bottom: 15px;
}
.content-section ul {
list-style: none;
margin-left: 20px;
}
.content-section li {
font-size: 1.3rem;
margin-bottom: 12px;
padding-left: 30px;
position: relative;
line-height: 1.6;
}
.content-section li:before {
content: "•";
position: absolute;
left: 0;
color: #60a5fa;
font-size: 1.5rem;
}
/* Impact Slides */
.slide-impact {
background: linear-gradient(135deg, #065f46 0%, #064e3b 100%);
}
.slide-impact .highlight {
font-size: 1.8rem;
color: #fde047;
margin-bottom: 30px;
font-weight: 600;
}
.slide-impact ul li:before {
content: "✓";
color: #fde047;
}
/* Vision Slide */
.slide-vision {
background: linear-gradient(135deg, #581c87 0%, #4c1d95 100%);
justify-content: center;
}
.slide-vision .vision-text {
font-size: 2.2rem;
color: #e9d5ff;
font-style: italic;
margin-bottom: 30px;
font-weight: 600;
}
.slide-vision .statement {
font-size: 1.6rem;
line-height: 1.8;
}
/* List Grid Slide */
.slide-list {
background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%);
}
.list-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 30px;
}
.list-item {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 25px;
border-radius: 10px;
font-size: 1.4rem;
font-weight: 600;
}
/* Opportunity Slides */
.slide-opportunity {
background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
}
.opportunity-number {
font-size: 4rem;
color: rgba(255, 255, 255, 0.2);
font-weight: 700;
}
.opportunity-title {
font-size: 2.5rem;
margin-bottom: 30px;
}
.opportunity-section {
margin-bottom: 25px;
}
.opportunity-section .label {
font-size: 1.2rem;
color: #d1d5db;
font-weight: 600;
margin-bottom: 10px;
}
.opportunity-section .text {
font-size: 1.3rem;
line-height: 1.6;
}
.opportunity-section ul {
list-style: none;
margin-left: 20px;
}
.opportunity-section ul li {
font-size: 1.2rem;
margin-bottom: 8px;
padding-left: 25px;
position: relative;
}
.opportunity-section ul li:before {
content: "→";
position: absolute;
left: 0;
color: #34d399;
}
.impact-box {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 10px;
margin-top: 15px;
}
.impact-box .text {
color: #fde047;
font-weight: 600;
}
.innovation-text {
font-style: italic;
color: #93c5fd;
font-size: 1.2rem;
}
/* Two Column Slide */
.slide-two-column {
background: linear-gradient(135deg, #155e75 0%, #0e7490 100%);
}
.two-column-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 30px;
}
.column-box {
background: rgba(255, 255, 255, 0.1);
padding: 35px;
border-radius: 10px;
}
.column-box h3 {
font-size: 2rem;
margin-bottom: 10px;
}
.column-box .subtitle {
font-size: 1.3rem;
color: #d1d5db;
font-style: italic;
margin-bottom: 25px;
}
.column-box ul {
list-style: none;
}
.column-box li {
font-size: 1.2rem;
margin-bottom: 12px;
padding-left: 25px;
position: relative;
}
.column-box li:before {
content: "•";
position: absolute;
left: 0;
color: #67e8f9;
}
/* Questions Slide */
.slide-questions {
background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
}
.questions-subtitle {
font-size: 1.6rem;
color: #d1d5db;
font-style: italic;
margin-bottom: 35px;
}
.question-box {
background: rgba(255, 255, 255, 0.1);
padding: 25px;
border-radius: 10px;
margin-bottom: 20px;
font-size: 1.5rem;
}
/* Closing Slide */
.slide-closing {
background: linear-gradient(135deg, #4c1d95 0%, #db2777 100%);
justify-content: center;
align-items: center;
text-align: center;
}
.slide-closing h2 {
border: none;
margin-bottom: 40px;
}
.closing-statement {
font-size: 1.6rem;
margin-bottom: 25px;
max-width: 900px;
}
.closing-vision {
font-size: 1.6rem;
margin-bottom: 30px;
color: #fde047;
font-weight: 600;
max-width: 900px;
}
.closing-call {
font-size: 2.2rem;
font-weight: 700;
color: #34d399;
margin-bottom: 15px;
}
.closing-subtext {
font-size: 1.3rem;
color: #d1d5db;
font-style: italic;
margin-bottom: 30px;
}
.closing-action {
font-size: 2.8rem;
font-weight: 700;
}
/* Controls */
.controls {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #1f2937;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
z-index: 1000;
}
.btn {
background: #3b82f6;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: background 0.3s;
}
.btn:hover {
background: #2563eb;
}
.btn:disabled {
background: #4b5563;
cursor: not-allowed;
}
.slide-counter {
font-size: 1.1rem;
color: white;
}
.btn-print {
background: #059669;
}
.btn-print:hover {
background: #047857;
}
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 4px;
background: #3b82f6;
transition: width 0.3s;
z-index: 1001;
}
/* Different opportunity slide colors */
.slide-opportunity:nth-of-type(6) { background: linear-gradient(135deg, #064e3b 0%, #065f46 100%); }
.slide-opportunity:nth-of-type(7) { background: linear-gradient(135deg, #9a3412 0%, #dc2626 100%); }
.slide-opportunity:nth-of-type(8) { background: linear-gradient(135deg, #581c87 0%, #7c3aed 100%); }
.slide-opportunity:nth-of-type(9) { background: linear-gradient(135deg, #075985 0%, #0284c7 100%); }
.slide-opportunity:nth-of-type(10) { background: linear-gradient(135deg, #9f1239 0%, #e11d48 100%); }
.slide-opportunity:nth-of-type(11) { background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%); }
.slide-opportunity:nth-of-type(12) { background: linear-gradient(135deg, #4d7c0f 0%, #65a30d 100%); }
.slide-opportunity:nth-of-type(13) { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); }
</style>
</head>
<body>
<div class="progress-bar" id="progressBar"></div>
<!-- Slide 1: Title -->
<div class="slide slide-title active">
<h1>The Nairobi Hub Strategic Advantage</h1>
<p>Building a Lean, Community-Centered Platform for Impact</p>
</div>
<!-- Slide 2: The Reality -->
<div class="slide slide-content">
<h2>The Reality We're Navigating</h2>
<div class="content-section">
<h3>The Challenge</h3>
<ul>
<li>Humanitarian funding has taken its steepest dive on record</li>
<li>Recent US aid decisions have directly affected Alight's work</li>
</ul>
</div>
<div class="content-section">
<h3>The Opportunity</h3>
<ul>
<li>While bilateral funding shrinks, pooled funds are positioned to grow</li>
<li>UN actively channeling more funding through Country-Based Pooled Funds (CBPFs)</li>
<li>Nairobi is uniquely positioned to respond strategically</li>
</ul>
</div>
<div class="content-section">
<h3>The Reality</h3>
<ul>
<li>Needs of displaced people and host communities continue to grow</li>
<li>Requires evolution in how we work while staying grounded in communities we serve</li>
</ul>
</div>
</div>
<!-- Slide 3: Why Nairobi Matters -->
<div class="slide slide-impact">
<h2>Why Nairobi Matters</h2>
<p class="highlight">The only platform in East Africa that brings together:</p>
<ul>
<li>Direct connection to humanitarian operations in Somalia, Sudan, Rwanda, Ethiopia, and Kenya</li>
<li>Physical presence where donor decision-makers are based and actively working</li>
</ul>
</div>
<!-- Slide 4: Hub Purpose -->
<div class="slide slide-vision">
<h2>The Nairobi Hub's Purpose</h2>
<p class="vision-text">A focused, community-centered platform built around relevance, responsiveness, and trust</p>
<p class="statement">We can help translate what displaced people tell us they need into proposals that local organizations can actually deliver—more quickly and effectively than traditional approaches allow.</p>
</div>
<!-- Slide 5: Eight Opportunities Overview -->
<div class="slide slide-list">
<h2>Eight Strategic Opportunities</h2>
<div class="list-grid">
<div class="list-item">1. Become Experts in CBPF Access</div>
<div class="list-item">2. Make Co-Creation How We Actually Work</div>
<div class="list-item">3. The Refugee-Led Innovation Fund</div>
<div class="list-item">4. Virtual Donor Intelligence Briefings</div>
<div class="list-item">5. The Sub-Granting Platform Model</div>
<div class="list-item">6. A Space for Partnership and Alignment</div>
<div class="list-item">7. Mission-Driven Marketplace Platform</div>
<div class="list-item">8. White-Label Expertise Platform</div>
</div>
</div>
<!-- Slide 6: Opportunity 1 -->
<div class="slide slide-opportunity">
<div class="opportunity-number">#1</div>
<h2 class="opportunity-title">Become Experts in CBPF Access</h2>
<div class="opportunity-section">
<p class="label">The Context:</p>
<p class="text">Many local organizations struggle with CBPF systems. Most international NGOs move too slowly for rapid allocations.</p>
</div>
<div class="opportunity-section">
<p class="label">Our Approach:</p>
<ul>
<li>Track all 19 CBPF countries in real-time</li>
<li>Assemble rapid proposal teams (virtual, specialized)</li>
<li>Pursue Reserve Allocations requiring speed</li>
</ul>
</div>
<div class="opportunity-section">
<div class="impact-box">
<p class="label">The Impact:</p>
<p class="text">Just 2% of $6B CBPF growth = $120M through local partners</p>
</div>
</div>
<div class="opportunity-section">
<p class="label">The Innovation:</p>
<p class="innovation-text">Position Alight as trusted regional CBPF intelligence resource</p>
</div>
</div>
<!-- Slide 7: Opportunity 2 -->
<div class="slide slide-opportunity">
<div class="opportunity-number">#2</div>
<h2 class="opportunity-title">Make Co-Creation How We Actually Work</h2>
<div class="opportunity-section">
<p class="label">The Context:</p>
<p class="text">Most programs treat community engagement as compliance. People are consulted but not empowered to shape decisions.</p>
</div>
<div class="opportunity-section">
<p class="label">Our Approach:</p>
<ul>
<li>Community insight directly informs design, priorities, and adaptation</li>
<li>Programs co-created from the beginning</li>
<li>Feedback as real-time improvement tool</li>
<li>Lived experience shapes funding and success metrics</li>
</ul>
</div>
<div class="opportunity-section">
<div class="impact-box">
<p class="label">The Impact:</p>
<p class="text">Programs grounded in reality, adapt faster, build trust</p>
</div>
</div>
<div class="opportunity-section">
<p class="label">The Innovation:</p>
<p class="innovation-text">"Nothing about people without people—in practice, not just principle"</p>
</div>
</div>
<!-- Slide 8: Opportunity 3 -->
<div class="slide slide-opportunity">
<div class="opportunity-number">#3</div>
<h2 class="opportunity-title">The Refugee-Led Innovation Fund</h2>
<div class="opportunity-section">
<p class="label">The Context:</p>
<p class="text">Donors want to fund refugee-led organizations but worry about accountability barriers.</p>
</div>
<div class="opportunity-section">
<p class="label">Our Approach:</p>
<ul>
<li>Pooled mechanism for refugee-led organization proposals</li>
<li>Alight provides accessible financial management support</li>
<li>Successful pilots attract donor co-investment</li>
</ul>
</div>
<div class="opportunity-section">
<div class="impact-box">
<p class="label">The Impact:</p>
<p class="text">Reduces risk while demonstrating refugee-led delivery success</p>
</div>
</div>
<div class="opportunity-section">
<p class="label">The Innovation:</p>
<p class="innovation-text">Start in Kenya with 2 refugee-led orgs, document, then scale</p>
</div>
</div>
<!-- Slide 9: Opportunity 4 -->
<div class="slide slide-opportunity">
<div class="opportunity-number">#4</div>
<h2 class="opportunity-title">Virtual Donor Intelligence Briefings</h2>
<div class="opportunity-section">
<p class="label">The Context:</p>
<p class="text">Donors are stretched thin and overwhelmed. They need partners who can help make sense of complex situations.</p>
</div>
<div class="opportunity-section">
<p class="label">Our Approach:</p>
<ul>
<li>Monthly 90-minute virtual sessions</li>
<li>Brief on emerging crises before headlines</li>
<li>Share community insight data</li>
<li>Present 2-3 vetted funding opportunities</li>
</ul>
</div>
<div class="opportunity-section">
<div class="impact-box">
<p class="label">The Impact:</p>
<p class="text">Low cost, high value. Builds trust before formal proposals</p>
</div>
</div>
<div class="opportunity-section">
<p class="label">The Innovation:</p>
<p class="innovation-text">"We do the groundwork. You make more informed decisions."</p>
</div>
</div>
<!-- Slide 10: Opportunity 5 -->
<div class="slide slide-opportunity">
<div class="opportunity-number">#5</div>
<h2 class="opportunity-title">The Sub-Granting Platform Model</h2>
<div class="opportunity-section">
<p class="label">The Context:</p>
<p class="text">No efficient infrastructure connecting local organizations, INGOs, and donor accountability needs.</p>
</div>
<div class="opportunity-section">
<p class="label">Our Approach:</p>
<ul>
<li>Alight secures large grants (CBPF, ECHO, bilateral)</li>
<li>Sub-grant 60-70% to pre-qualified local/refugee-led partners</li>
<li>Provide accessible financial management support</li>
<li>Retain 10-15% for platform costs (fair, transparent)</li>
</ul>
</div>
<div class="opportunity-section">
<div class="impact-box">
<p class="label">The Impact:</p>
<p class="text">Donors achieve localization with manageable risk</p>
</div>
</div>
<div class="opportunity-section">
<p class="label">The Innovation:</p>
<p class="innovation-text">"We're not competing. We're helping them get funded."</p>
</div>
</div>
<!-- Slide 11: Opportunity 6 -->
<div class="slide slide-opportunity">
<div class="opportunity-number">#6</div>
<h2 class="opportunity-title">A Space for Partnership and Alignment</h2>
<div class="opportunity-section">
<p class="label">The Context:</p>
<p class="text">Humanitarian system is fragmented. No trusted space to turn learning into coordinated action.</p>
</div>
<div class="opportunity-section">
<p class="label">Our Approach:</p>
<ul>
<li>Convene donors, partners, communities around shared challenges</li>
<li>Ground conversations in live community insight and evidence</li>
<li>Translate learning into partnerships and funding pathways</li>
<li>Move upstream: connector, broker, platform partner</li>
</ul>
</div>
<div class="opportunity-section">
<div class="impact-box">
<p class="label">The Impact:</p>
<p class="text">Alignment happens before funding decisions are made</p>
</div>
</div>
<div class="opportunity-section">
<p class="label">The Innovation:</p>
<p class="innovation-text">Quarterly convenings focused on one shared challenge</p>
</div>
</div>
<!-- Slide 12: Opportunity 7 -->
<div class="slide slide-opportunity">
<div class="opportunity-number">#7</div>
<h2 class="opportunity-title">Mission-Driven Marketplace Platform</h2>
<div class="opportunity-section">
<p class="label">The Context:</p>
<p class="text">Refugees and CBOs create quality products but are locked out of markets. Income stays small and donor-dependent.</p>
</div>
<div class="opportunity-section">
<p class="label">Our Approach:</p>
<ul>
<li>Partner with CBOs to co-design and curate products</li>
<li>Use e-commerce and ethical marketplaces</li>
<li>Leverage Alight's brand to open market doors</li>
<li>Transparent revenue-sharing benefiting creators</li>
</ul>
</div>
<div class="opportunity-section">
<div class="impact-box">
<p class="label">The Impact:</p>
<p class="text">Real income, not stipends. Financial sustainability for CBOs</p>
</div>
</div>
<div class="opportunity-section">
<p class="label">The Innovation:</p>
<p class="innovation-text">Kenya pilot with 2-3 CBO partners, limited product line</p>
</div>
</div>
<!-- Slide 13: Opportunity 8 -->
<div class="slide slide-opportunity">
<div class="opportunity-number">#8</div>
<h2 class="opportunity-title">White-Label Expertise Platform</h2>
<div class="opportunity-section">
<p class="label">The Context:</p>
<p class="text">Organizations want practical co-creation and community insight tools, not theory. Alight has this but it's underutilized.</p>
</div>
<div class="opportunity-section">
<p class="label">Our Approach:</p>
<ul>
<li>Package expertise: training, co-creation labs, insight systems</li>
<li>White-label or co-branded delivery</li>
<li>Strategic event partnerships</li>
<li>Clear pathways: learning → pilots → partnerships</li>
</ul>
</div>
<div class="opportunity-section">
<div class="impact-box">
<p class="label">The Impact:</p>
<p class="text">Extends impact beyond programs, creates unrestricted revenue</p>
</div>
</div>
<div class="opportunity-section">
<p class="label">The Innovation:</p>
<p class="innovation-text">Deploy flagship Co-Creation Lab at high-profile event</p>
</div>
</div>
<!-- Slide 14: Operating Model -->
<div class="slide slide-content">
<h2>How This Works Within Budget Constraints</h2>
<div class="content-section">
<h3>Operating Model</h3>
<ul>
<li>Small permanent core team</li>
<li>Intentional use of specialized, time-limited expertise</li>
<li>Fixed costs carefully managed</li>
<li>Capacity expands only when funded</li>
</ul>
</div>
<div class="content-section">
<h3>Principles</h3>
<ul>
<li>Staffing aligns with funded opportunities</li>
<li>No parallel structures or unfunded expansion</li>
<li>Prioritize coordination, intelligence, convening</li>
</ul>
</div>
<div class="content-section">
<h3>Guiding Rule</h3>
<ul>
<li>If it's not creating leverage or unlocking funding, it doesn't belong in the fixed cost base</li>
</ul>
</div>
</div>
<!-- Slide 15: Success Metrics -->
<div class="slide slide-impact">
<h2>What Success Actually Looks Like</h2>
<p class="highlight">Success measured by strategic outcomes, not activity volume:</p>
<ul>
<li>Communities see their priorities reflected in program design and adaptation</li>
<li>Local and refugee-led partners gain funding, visibility, and scale through Alight</li>
<li>Donors view Nairobi as credible regional entry point</li>
<li>Hub demonstrably unlocks funding that sustains frontline programs</li>
</ul>
</div>
<!-- Slide 16: How We'll Make This Real -->
<div class="slide slide-two-column">
<h2>How We'll Make This Real</h2>
<div class="two-column-grid">
<div class="column-box">
<h3>Nairobi Hub</h3>
<p class="subtitle">The Operating Engine</p>
<ul>
<li>Leads community-centered design</li>
<li>Captures lived experience and learning</li>
<li>Coordinates local partners into platforms</li>
<li>Hosts pilots and convenings</li>
<li>Regional readiness for opportunities</li>
</ul>
</div>
<div class="column-box">
<h3>MET Team</h3>
<p class="subtitle">The Amplification Engine</p>
<ul>
<li>Owns marketing and communications</li>
<li>Leads donor engagement</li>
<li>Translates insight to donor narratives</li>
<li>Positions Hub as regional access point</li>
<li>Amplifies learning externally</li>
</ul>
</div>
</div>
</div>
<!-- Slide 17: Priority Donors -->
<div class="slide slide-content">
<h2>Priority Donors and Partners</h2>
<div class="content-section">
<h3>Multilateral & UN</h3>
<ul>
<li>UNHCR - refugee protection, services, innovation</li>
<li>OCHA (CBPF, CERF) - pooled funding</li>
</ul>
</div>
<div class="content-section">
<h3>Bilateral Donors</h3>
<ul>
<li>EU / ECHO - humanitarian response</li>
<li>UK FCDO - refugee-host integration</li>
</ul>
</div>
<div class="content-section">
<h3>Foundations & Philanthropy</h3>
<ul>
<li>Mastercard Foundation - livelihoods, education</li>
<li>IKEA Foundation - emergency response, resilience</li>
</ul>
</div>
<div class="content-section">
<h3>System Partners</h3>
<ul>
<li>Refugee-led and local civil society</li>
<li>Government of Kenya</li>
<li>Academic, innovation, private sector partners</li>
</ul>
</div>
</div>
<!-- Slide 18: Questions 1 -->
<div class="slide slide-questions">
<h2>Strategic Questions for Leadership</h2>
<p class="questions-subtitle">Community-Centered Strategy & Focus</p>
<div class="question-box">Which decisions are we genuinely willing to change based on community feedback?</div>
<div class="question-box">How will we prove community-centered design improves relevance?</div>
<div class="question-box">What must the Hub stop doing to remain focused?</div>
<div class="question-box">What familiar activities are we prepared to decline?</div>
</div>
<!-- Slide 19: Questions 2 -->
<div class="slide slide-questions" style="background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%);">
<h2>Strategic Questions for Leadership</h2>
<p class="questions-subtitle">Operating Model & Partnerships</p>
<div class="question-box">What is the maximum fixed cost we're willing to maintain?</div>
<div class="question-box">Which donors align with this model—and which don't?</div>
<div class="question-box">How far are we prepared to shift power to local partners?</div>
<div class="question-box">What level of risk are we willing to accept for genuine localization?</div>
</div>
<!-- Slide 20: Questions 3 -->
<div class="slide slide-questions" style="background: linear-gradient(135deg, #065f46 0%, #059669 100%);">
<h2>Strategic Questions for Leadership</h2>
<p class="questions-subtitle">Technology, Governance & Success</p>
<div class="question-box">Where can digital approaches reduce costs without compromising dignity?</div>
<div class="question-box">What governance enables speed rather than constrains it?</div>
<div class="question-box">What are the 3-5 indicators that prove strategic value?</div>
<div class="question-box">How quickly will we act if indicators show the model isn't working?</div>
</div>
<!-- Slide 21: Final Thought -->
<div class="slide slide-closing">
<h2>Final Thought</h2>
<p class="closing-statement">The humanitarian system is being pushed to evolve. Organizations trying to preserve old models will find it increasingly difficult.</p>
<p class="closing-vision">But organizations that see this moment as an opportunity to become something different—something more focused, responsive, accountable, and locally rooted—can not only survive but lead.</p>
<p class="closing-call">The Nairobi Hub can be that example.</p>
<p class="closing-subtext">Not just for Alight, but for the wider sector.</p>
<p class="closing-action">Let's build it together.</p>
</div>
<!-- Controls -->
<div class="controls">
<button class="btn" id="prevBtn" onclick="changeSlide(-1)">← Previous</button>
<div class="slide-counter">
<span id="currentSlide">1</span> / <span id="totalSlides">21</span>
</div>
<button class="btn btn-print" onclick="window.print()">🖨 Print to PDF</button>
<button class="btn" id="nextBtn" onclick="changeSlide(1)">Next →</button>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
document.getElementById('totalSlides').textContent = totalSlides;
function showSlide(n) {
slides.forEach(slide => slide.classList.remove('active'));
if (n >= totalSlides) currentSlide = totalSlides - 1;
if (n < 0) currentSlide = 0;
slides[currentSlide].classList.add('active');
// Update counter
document.getElementById('currentSlide').textContent = currentSlide + 1;
// Update progress bar
const progress = ((currentSlide + 1) / totalSlides) * 100;
document.getElementById('progressBar').style.width = progress + '%';
// Update button states
document.getElementById('prevBtn').disabled = currentSlide === 0;
document.getElementById('nextBtn').disabled = currentSlide === totalSlides - 1;
}
function changeSlide(direction) {
currentSlide += direction;
showSlide(currentSlide);
}
// Keyboard navigation
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight' || e.key === ' ') {
e.preventDefault();
if (currentSlide < totalSlides - 1) changeSlide(1);
} else if (e.key === 'ArrowLeft') {
e.preventDefault();
if (currentSlide > 0) changeSlide(-1);
}
});
// Initialize
showSlide(0);
</script>
</body>
</html>