<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Global Bridge — Presentation</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: #050505; overflow: hidden; height: 100vh; }
.slide {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}
.slide.active { opacity: 1; pointer-events: auto; }
.slide-inner {
opacity: 0; transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.76, 0, 0.24, 1) 0.2s,
transform 0.8s cubic-bezier(0.76, 0, 0.24, 1) 0.2s;
}
.slide.active .slide-inner {
opacity: 1; transform: translateY(0);
}
.fade-item {
opacity: 0; transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.slide.active .fade-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.slide.active .fade-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.slide.active .fade-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }
.slide.active .fade-item:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 1.0s; }
.slide.active .fade-item:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 1.2s; }
.bar-grow {
width: 0; transition: width 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.slide.active .bar-grow { width: 100%; }
.slide.active .bar-grow.delay-1 { transition-delay: 0.5s; }
.slide.active .bar-grow.delay-2 { transition-delay: 0.7s; }
.slide.active .bar-grow.delay-3 { transition-delay: 0.9s; }
.stat-num {
opacity: 0; transform: scale(0.5);
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slide.active .stat-num { opacity: 1; transform: scale(1); transition-delay: 0.6s; }
.icon-pop {
opacity: 0; transform: scale(0);
transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slide.active .icon-pop { opacity: 1; transform: scale(1); }
.quote-line {
width: 0; height: 2px; background: linear-gradient(to right, #3b82f6, transparent);
transition: width 0.8s ease;
}
.slide.active .quote-line { width: 80px; transition-delay: 0.5s; }
.progress-bar {
transition: width 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(59,130,246,0.1); }
50% { box-shadow: 0 0 40px rgba(59,130,246,0.25); }
}
.glow-card { animation: pulse-glow 4s ease-in-out infinite; }
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.float { animation: float 5s ease-in-out infinite; }
.nav-dot {
transition: all 0.3s ease;
}
.nav-dot.active {
background: #3b82f6;
width: 32px;
border-radius: 9999px;
}
</style>
</head>
<body>
<!-- Background Glow -->
<div class="fixed inset-0 z-0">
<div class="absolute top-1/4 left-1/4 w-[600px] h-[600px] bg-blue-500/5 rounded-full blur-[120px]"></div>
<div class="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] bg-blue-400/5 rounded-full blur-[100px]"></div>
</div>
<!-- Top Progress Bar -->
<div class="fixed top-0 left-0 right-0 h-[3px] bg-neutral-900 z-50">
<div id="progressBar" class="progress-bar h-full bg-gradient-to-r from-blue-500 to-blue-300" style="width: 16.66%"></div>
</div>
<!-- Slide Counter -->
<div class="fixed top-6 right-8 z-50 text-neutral-500 text-sm font-medium tracking-wide">
<span id="currentNum" class="text-white">01</span> <span class="text-neutral-700">/</span> <span class="text-neutral-600">06</span>
</div>
<!-- Navigation Dots -->
<div class="fixed right-8 top-1/2 -translate-y-1/2 z-50 flex flex-col gap-2">
<button onclick="goTo(0)" class="nav-dot active w-2 h-2 rounded-full bg-neutral-700 cursor-pointer"></button>
<button onclick="goTo(1)" class="nav-dot w-2 h-2 rounded-full bg-neutral-700 cursor-pointer"></button>
<button onclick="goTo(2)" class="nav-dot w-2 h-2 rounded-full bg-neutral-700 cursor-pointer"></button>
<button onclick="goTo(3)" class="nav-dot w-2 h-2 rounded-full bg-neutral-700 cursor-pointer"></button>
<button onclick="goTo(4)" class="nav-dot w-2 h-2 rounded-full bg-neutral-700 cursor-pointer"></button>
<button onclick="goTo(5)" class="nav-dot w-2 h-2 rounded-full bg-neutral-700 cursor-pointer"></button>
</div>
<!-- Nav Arrows -->
<button onclick="prev()" class="fixed left-6 top-1/2 -translate-y-1/2 z-50 w-10 h-10 rounded-full border border-neutral-800 bg-neutral-900/50 backdrop-blur-sm flex items-center justify-center text-neutral-500 hover:text-white hover:border-neutral-600 transition-all duration-300 cursor-pointer">
<i data-lucide="chevron-left" class="w-4 h-4"></i>
</button>
<button onclick="next()" class="fixed right-20 top-1/2 -translate-y-1/2 z-50 w-10 h-10 rounded-full border border-neutral-800 bg-neutral-900/50 backdrop-blur-sm flex items-center justify-center text-neutral-500 hover:text-white hover:border-neutral-600 transition-all duration-300 cursor-pointer">
<i data-lucide="chevron-right" class="w-4 h-4"></i>
</button>
<!-- ==================== SLIDE 1: Title ==================== -->
<div class="slide active" data-slide="0">
<div class="slide-inner text-center max-w-4xl px-8">
<div class="icon-pop inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-blue-500/20 bg-blue-500/5 mb-8">
<span class="w-1.5 h-1.5 rounded-full bg-blue-400"></span>
<span class="text-[10px] font-medium uppercase tracking-wider text-blue-400">Higher Education Debate · 2026</span>
</div>
<h1 class="text-5xl md:text-7xl lg:text-8xl font-medium tracking-tight leading-[0.9] text-white mb-6">
The Global<br><span class="text-blue-400">Bridge</span>
</h1>
<div class="quote-line mx-auto mb-6"></div>
<p class="text-neutral-400 text-lg md:text-xl font-light leading-relaxed max-w-2xl mx-auto">
English as the Medium of Instruction<br>in Higher Education in Bangladesh
</p>
<div class="fade-item mt-12 flex items-center justify-center gap-2 text-neutral-600 text-sm">
<span>Press</span>
<span class="px-2 py-0.5 rounded border border-neutral-800 text-neutral-500 text-xs">→</span>
<span>or click to navigate</span>
</div>
</div>
</div>
<!-- ==================== SLIDE 2: Introduction ==================== -->
<div class="slide" data-slide="1">
<div class="slide-inner max-w-5xl w-full px-8 grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="fade-item flex items-center gap-2 mb-4">
<div class="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center icon-pop">
<i data-lucide="brain" class="w-4 h-4 text-blue-400"></i>
</div>
<span class="text-[10px] font-medium uppercase tracking-wider text-neutral-500">Introduction</span>
</div>
<h2 class="fade-item text-3xl md:text-4xl font-medium tracking-tight text-white leading-tight mb-6">
The Habit of Language
</h2>
<div class="fade-item space-y-4">
<p class="text-neutral-400 font-light leading-relaxed">
"Our minds become clogged with the smokestack of habitual actions."
</p>
<p class="text-neutral-500 font-light leading-relaxed text-sm">
For decades, Bangladesh has debated Bangla vs. English in classrooms. Is our devotion to a single medium a <span class="text-white font-normal">habit holding graduates back</span>?
</p>
</div>
</div>
<div class="fade-item glow-card rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-sm p-8">
<div class="flex items-start gap-4 mb-6">
<div class="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center flex-shrink-0 icon-pop">
<i data-lucide="lightbulb" class="w-5 h-5 text-blue-400"></i>
</div>
<div>
<h3 class="text-white font-medium text-sm mb-1">Core Proposition</h3>
<p class="text-neutral-500 text-sm font-light leading-relaxed">English as the <span class="text-blue-400">primary medium</span> of instruction in higher education</p>
</div>
</div>
<div class="h-px bg-gradient-to-r from-transparent via-neutral-800 to-transparent mb-6"></div>
<div class="space-y-4">
<div class="flex items-start gap-3">
<span class="w-5 h-5 rounded-full border border-green-500/30 bg-green-500/10 flex items-center justify-center flex-shrink-0 mt-0.5 icon-pop">
<i data-lucide="check" class="w-3 h-3 text-green-400"></i>
</span>
<p class="text-neutral-400 text-sm font-light">Not to <span class="text-neutral-300">replace</span> our mother tongue</p>
</div>
<div class="flex items-start gap-3">
<span class="w-5 h-5 rounded-full border border-green-500/30 bg-green-500/10 flex items-center justify-center flex-shrink-0 mt-0.5 icon-pop">
<i data-lucide="check" class="w-3 h-3 text-green-400"></i>
</span>
<p class="text-neutral-400 text-sm font-light">To <span class="text-blue-400 font-normal">empower</span> our future</p>
</div>
</div>
</div>
</div>
</div>
<!-- ==================== SLIDE 3: Gateway to Knowledge ==================== -->
<div class="slide" data-slide="2">
<div class="slide-inner max-w-5xl w-full px-8">
<div class="fade-item flex items-center gap-2 mb-4">
<div class="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center icon-pop">
<i data-lucide="book-open" class="w-4 h-4 text-blue-400"></i>
</div>
<span class="text-[10px] font-medium uppercase tracking-wider text-neutral-500">Access & Knowledge</span>
</div>
<h2 class="fade-item text-3xl md:text-4xl font-medium tracking-tight text-white leading-tight mb-12">
The Gateway to Knowledge
</h2>
<div class="grid md:grid-cols-2 gap-8">
<!-- Research Gap -->
<div class="fade-item rounded-2xl border border-neutral-800 bg-neutral-900/30 p-8 hover:border-neutral-700 transition-colors duration-300">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center icon-pop">
<i data-lucide="file-search" class="w-5 h-5 text-blue-400"></i>
</div>
<h3 class="text-white font-medium">The Research Gap</h3>
</div>
<div class="mb-6">
<div class="stat-num text-5xl md:text-6xl font-medium text-blue-400 tracking-tighter">80%+</div>
<p class="text-neutral-500 text-sm mt-1">of global scientific research<br>is published in English</p>
</div>
<div class="h-px bg-gradient-to-r from-transparent via-neutral-800 to-transparent mb-4"></div>
<p class="text-neutral-500 text-sm font-light leading-relaxed">
Limiting higher education to Bangla builds a <span class="text-neutral-300">wall between students and global discoveries</span>.
</p>
</div>
<!-- Digital World -->
<div class="fade-item rounded-2xl border border-neutral-800 bg-neutral-900/30 p-8 hover:border-neutral-700 transition-colors duration-300">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center icon-pop">
<i data-lucide="globe" class="w-5 h-5 text-blue-400"></i>
</div>
<h3 class="text-white font-medium">The Digital World</h3>
</div>
<div class="space-y-4 mb-6">
<div>
<div class="flex justify-between text-xs mb-2">
<span class="text-neutral-400">English Content Online</span>
<span class="text-blue-400">~60%</span>
</div>
<div class="w-full h-1.5 rounded-full bg-neutral-800">
<div class="bar-grow delay-1 h-full rounded-full bg-gradient-to-r from-blue-500 to-blue-300"></div>
</div>
</div>
<div>
<div class="flex justify-between text-xs mb-2">
<span class="text-neutral-400">Bangla Content Online</span>
<span class="text-neutral-500">~0.1%</span>
</div>
<div class="w-full h-1.5 rounded-full bg-neutral-800">
<div class="bar-grow delay-2 h-full rounded-full bg-neutral-600" style="width:0"></div>
</div>
</div>
</div>
<div class="h-px bg-gradient-to-r from-transparent via-neutral-800 to-transparent mb-4"></div>
<p class="text-neutral-500 text-sm font-light leading-relaxed">
Creativity requires "looking for different answers." Those answers are written in the <span class="text-neutral-300">code of English</span>.
</p>
</div>
</div>
</div>
</div>
<!-- ==================== SLIDE 4: Economic Survival ==================== -->
<div class="slide" data-slide="3">
<div class="slide-inner max-w-5xl w-full px-8">
<div class="fade-item flex items-center gap-2 mb-4">
<div class="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center icon-pop">
<i data-lucide="trending-up" class="w-4 h-4 text-blue-400"></i>
</div>
<span class="text-[10px] font-medium uppercase tracking-wider text-neutral-500">Economy & Mobility</span>
</div>
<h2 class="fade-item text-3xl md:text-4xl font-medium tracking-tight text-white leading-tight mb-4">
Economic Survival &<br>Global Mobility
</h2>
<p class="fade-item text-neutral-500 text-sm font-light mb-12">The "struggle for survival" in a competitive world</p>
<div class="grid md:grid-cols-2 gap-6">
<!-- Employability -->
<div class="fade-item group rounded-2xl border border-neutral-800 bg-neutral-900/30 p-8 hover:border-blue-500/20 transition-all duration-300">
<div class="float mb-6">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-blue-600/5 border border-blue-500/10 flex items-center justify-center icon-pop">
<i data-lucide="briefcase" class="w-6 h-6 text-blue-400"></i>
</div>
</div>
<h3 class="text-white font-medium text-lg mb-4">Employability</h3>
<ul class="space-y-3">
<li class="flex items-start gap-3">
<span class="w-1 h-1 rounded-full bg-blue-400 mt-2 flex-shrink-0"></span>
<span class="text-neutral-400 text-sm font-light">English is the <span class="text-neutral-200">lingua franca of business</span></span>
</li>
<li class="flex items-start gap-3">
<span class="w-1 h-1 rounded-full bg-blue-400 mt-2 flex-shrink-0"></span>
<span class="text-neutral-400 text-sm font-light">Tech startups in Dhaka demand English proficiency</span>
</li>
<li class="flex items-start gap-3">
<span class="w-1 h-1 rounded-full bg-blue-400 mt-2 flex-shrink-0"></span>
<span class="text-neutral-400 text-sm font-light">Multinationals in Dubai, Singapore hire on English</span>
</li>
</ul>
</div>
<!-- Higher Ambition -->
<div class="fade-item group rounded-2xl border border-neutral-800 bg-neutral-900/30 p-8 hover:border-blue-500/20 transition-all duration-300">
<div class="float mb-6" style="animation-delay: 0.5s">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500/20 to-blue-600/5 border border-blue-500/10 flex items-center justify-center icon-pop">
<i data-lucide="plane" class="w-6 h-6 text-blue-400"></i>
</div>
</div>
<h3 class="text-white font-medium text-lg mb-4">Higher Ambition</h3>
<ul class="space-y-3">
<li class="flex items-start gap-3">
<span class="w-1 h-1 rounded-full bg-blue-400 mt-2 flex-shrink-0"></span>
<span class="text-neutral-400 text-sm font-light">English is the <span class="text-neutral-200">passport</span> to global scholarships</span>
</li>
<li class="flex items-start gap-3">
<span class="w-1 h-1 rounded-full bg-blue-400 mt-2 flex-shrink-0"></span>
<span class="text-neutral-400 text-sm font-light">Erasmus, Fulbright, Commonwealth programs</span>
</li>
<li class="flex items-start gap-3">
<span class="w-1 h-1 rounded-full bg-blue-400 mt-2 flex-shrink-0"></span>
<span class="text-neutral-400 text-sm font-light">Ivy League research requires English fluency</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ==================== SLIDE 5: Creativity Concern ==================== -->
<div class="slide" data-slide="4">
<div class="slide-inner max-w-5xl w-full px-8">
<div class="fade-item flex items-center gap-2 mb-4">
<div class="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center icon-pop">
<i data-lucide="sparkles" class="w-4 h-4 text-blue-400"></i>
</div>
<span class="text-[10px] font-medium uppercase tracking-wider text-neutral-500">Counterargument</span>
</div>
<h2 class="fade-item text-3xl md:text-4xl font-medium tracking-tight text-white leading-tight mb-12">
Addressing the "Creativity" Concern
</h2>
<div class="grid md:grid-cols-5 gap-8 items-start">
<!-- Left: Myth -->
<div class="fade-item md:col-span-2 rounded-2xl border border-red-500/10 bg-red-500/5 p-8">
<div class="flex items-center gap-2 mb-4">
<i data-lucide="x-circle" class="w-4 h-4 text-red-400/70"></i>
<span class="text-[10px] font-medium uppercase tracking-wider text-red-400/70">Common Myth</span>
</div>
<p class="text-neutral-300 font-light leading-relaxed text-sm">
"Learning in a second language <span class="text-neutral-100 font-normal">stifles creativity</span>."
</p>
</div>
<!-- Right: Reality -->
<div class="fade-item md:col-span-3 space-y-6">
<div class="rounded-2xl border border-green-500/10 bg-green-500/5 p-8">
<div class="flex items-center gap-2 mb-4">
<i data-lucide="check-circle" class="w-4 h-4 text-green-400/70"></i>
<span class="text-[10px] font-medium uppercase tracking-wider text-green-400/70">Reality</span>
</div>
<p class="text-neutral-300 font-light leading-relaxed text-sm">
Bilingual education <span class="text-blue-400 font-normal">expands</span> the brain's ability to solve complex problems.
</p>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="rounded-xl border border-neutral-800 bg-neutral-900/30 p-5">
<div class="icon-pop w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center mb-3">
<i data-lucide="puzzle" class="w-4 h-4 text-blue-400"></i>
</div>
<h4 class="text-white text-sm font-medium mb-1">Cognitive Flexibility</h4>
<p class="text-neutral-500 text-xs font-light leading-relaxed">Bilingual brains show superior problem-solving</p>
</div>
<div class="rounded-xl border border-neutral-800 bg-neutral-900/30 p-5">
<div class="icon-pop w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center mb-3">
<i data-lucide="shuffle" class="w-4 h-4 text-blue-400"></i>
</div>
<h4 class="text-white text-sm font-medium mb-1">Breaking the Routine</h4>
<p class="text-neutral-500 text-xs font-light leading-relaxed">Escape the "rut" of local thinking</p>
</div>
</div>
<div class="rounded-xl border border-neutral-800 bg-neutral-900/30 p-5">
<p class="text-neutral-400 text-sm font-light leading-relaxed italic">
"We are not betraying our heritage by embracing English; we are <span class="text-blue-400 font-normal not-italic">protecting our future</span>."
</p>
</div>
</div>
</div>
</div>
</div>
<!-- ==================== SLIDE 6: Conclusion ==================== -->
<div class="slide" data-slide="5">
<div class="slide-inner text-center max-w-4xl px-8">
<div class="icon-pop inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-blue-500/20 bg-blue-500/5 mb-8">
<i data-lucide="flag" class="w-3 h-3 text-blue-400"></i>
<span class="text-[10px] font-medium uppercase tracking-wider text-blue-400">Conclusion</span>
</div>
<h2 class="fade-item text-4xl md:text-5xl lg:text-6xl font-medium tracking-tight text-white leading-tight mb-8">
From Barrier<br>to <span class="text-blue-400">Bridge</span>
</h2>
<div class="quote-line mx-auto mb-8"></div>
<div class="fade-item max-w-2xl mx-auto mb-10">
<p class="text-neutral-400 text-lg font-light leading-relaxed italic">
"It is no fate to go back and change our minds."
</p>
</div>
<div class="fade-item grid grid-cols-3 gap-4 max-w-lg mx-auto mb-12">
<div class="rounded-xl border border-neutral-800 bg-neutral-900/30 p-4 text-center">
<i data-lucide="book-open" class="w-5 h-5 text-blue-400 mx-auto mb-2"></i>
<p class="text-neutral-400 text-xs font-light">Access to<br>Knowledge</p>
</div>
<div class="rounded-xl border border-neutral-800 bg-neutral-900/30 p-4 text-center">
<i data-lucide="briefcase" class="w-5 h-5 text-blue-400 mx-auto mb-2"></i>
<p class="text-neutral-400 text-xs font-light">Economic<br>Survival</p>
</div>
<div class="rounded-xl border border-neutral-800 bg-neutral-900/30 p-4 text-center">
<i data-lucide="sparkles" class="w-5 h-5 text-blue-400 mx-auto mb-2"></i>
<p class="text-neutral-400 text-xs font-light">Creative<br>Ability</p>
</div>
</div>
<p class="fade-item text-white text-xl font-medium">Give them the world's language.</p>
<p class="fade-item text-neutral-600 text-sm mt-6">Thank you</p>
</div>
</div>
<script>
lucide.createIcons();
let current = 0;
const total = 6;
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.nav-dot');
const progress = document.getElementById('progressBar');
const counter = document.getElementById('currentNum');
function goTo(n) {
if (n < 0 || n >= total || n === current) return;
slides[current].classList.remove('active');
dots[current].classList.remove('active');
current = n;
slides[current].classList.remove('active');
// Force reflow for re-animation
void slides[current].offsetWidth;
slides[current].classList.add('active');
dots[current].classList.add('active');
progress.style.width = ((current + 1) / total * 100) + '%';
counter.textContent = String(current + 1).padStart(2, '0');
}
function next() { goTo(current + 1); }
function prev() { goTo(current - 1); }
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); next(); }
if (e.key === 'ArrowLeft') { e.preventDefault(); prev(); }
});
// Touch support
let touchStartX = 0;
document.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; });
document.addEventListener('touchend', (e) => {
const diff = touchStartX - e.changedTouches[0].screenX;
if (Math.abs(diff) > 50) { diff > 0 ? next() : prev(); }
});
</script>
</body>
</html>