<!DOCTYPE html>
<html class="scroll-smooth" lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>NCCAL EXPO 2026 - Nigeria Cold Chain & Agro-logistics Exhibition | Colocated with NIPOLI EXPO</title>
<meta content="NCCAL EXPO 2026 colocated with NIPOLI EXPO 2026. Join West Africa's premier gathering of agro-logistics professionals at NIPOLI Village, NCRI, Ibadan. April 28-30, 2026." name="description"/>
<link rel="icon" type="image/png" href="https://nccalexpo.nipoliexpo.com/wp-content/uploads/2026/01/coldchain.png">
<link rel="apple-touch-icon" href="https://nccalexpo.nipoliexpo.com/wp-content/uploads/2026/01/coldchain.png">
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#1e3a8a",
secondary: "#22c55e",
accent: "#93c5fd",
"background-light": "#f8fafc",
"background-dark": "#0f172a",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Montserrat", "sans-serif"],
},
animation: {
'float': 'float 6s ease-in-out infinite',
'pulse-slow': 'pulse 4s ease-in-out infinite',
'slide-up': 'slideUp 0.5s ease-out',
'fade-in': 'fadeIn 0.8s ease-out',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-20px)' },
},
slideUp: {
'0%': { transform: 'translateY(30px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
}
}
},
},
};
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #22c55e 0%, #3b82f6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.card-hover {
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-hover:hover {
transform: translateY(-10px) scale(1.02);
}
.bg-mesh {
background-image: radial-gradient(at 40% 20%, hsla(212, 100%, 74%, 0.3) 0px, transparent 50%),
radial-gradient(at 80% 0%, hsla(142, 76%, 36%, 0.2) 0px, transparent 50%),
radial-gradient(at 0% 50%, hsla(225, 71%, 40%, 0.2) 0px, transparent 50%);
}
.countdown-item {
background: linear-gradient(135deg, rgba(30, 58, 138, 0.9), rgba(30, 58, 138, 0.7));
backdrop-filter: blur(10px);
}
.exhibitor-card {
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
}
.dark .exhibitor-card {
background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
}
.glow-green {
box-shadow: 0 0 40px rgba(34, 197, 94, 0.3);
}
.glow-blue {
box-shadow: 0 0 40px rgba(30, 58, 138, 0.3);
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.animate-marquee {
animation: marquee 30s linear infinite;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-sans antialiased transition-colors duration-300">
<!-- Navigation -->
<nav class="sticky top-0 z-50 w-full bg-white/95 dark:bg-background-dark/95 backdrop-blur-xl border-b border-slate-200 dark:border-slate-800 shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20 items-center">
<div class="flex-shrink-0 flex items-center">
<a href="#">
<img src="https://nccalexpo.nipoliexpo.com/wp-content/uploads/2026/01/NIGERIA-cold-chain-and-agrologistics.png" alt="NCCAL EXPO 2026 Logo" class="h-16 w-auto">
</a>
</div>
<div class="hidden lg:flex items-center space-x-8">
<a class="text-sm font-semibold hover:text-primary dark:hover:text-secondary transition-colors relative group" href="#">
Home
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-secondary transition-all group-hover:w-full"></span>
</a>
<!-- NCCAL Dropdown -->
<div class="relative group">
<button class="text-sm font-semibold hover:text-primary dark:hover:text-secondary transition-colors relative flex items-center space-x-1">
<span>NCCAL</span>
<span class="material-icons-outlined text-sm transition-transform group-hover:rotate-180">expand_more</span>
</button>
<div class="absolute top-full left-0 mt-2 w-56 bg-white dark:bg-slate-800 rounded-xl shadow-2xl border border-slate-100 dark:border-slate-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top scale-95 group-hover:scale-100 z-50">
<div class="py-2">
<a href="#about" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-primary dark:text-accent">info</span>
About NCCAL
</a>
<a href="#why-colocated" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-secondary">handshake</span>
Why Co-located
</a>
<a href="#industry-review" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-blue-500">analytics</span>
Industry Review
</a>
<a href="#sectors" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-purple-500">category</span>
Covering Sectors
</a>
<a href="#visitors" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-amber-500">groups</span>
For Delegate
</a>
<a href="#schedule" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-red-500">calendar_month</span>
Conference Schedule
</a>
</div>
</div>
</div>
<!-- Exhibitors Dropdown -->
<div class="relative group">
<button class="text-sm font-semibold hover:text-primary dark:hover:text-secondary transition-colors relative flex items-center space-x-1">
<span>Exhibitors</span>
<span class="material-icons-outlined text-sm transition-transform group-hover:rotate-180">expand_more</span>
</button>
<div class="absolute top-full left-0 mt-2 w-56 bg-white dark:bg-slate-800 rounded-xl shadow-2xl border border-slate-100 dark:border-slate-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top scale-95 group-hover:scale-100 z-50">
<div class="py-2">
<a href="#exhibitors" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-secondary">storefront</span>
Why Exhibit
</a>
<a href="#exhibitor-profile" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-blue-500">badge</span>
Exhibitor Profile
</a>
<a href="#reserve-space" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-purple-500">event_seat</span>
Reserve A Space
</a>
<a href="https://nccalexpo.nipoliexpo.com/wp-content/uploads/2026/01/NCCAL-EXPO-2026.pdf" download="NCCAL-EXPO-2026-Brochure.pdf" target="_blank" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-amber-500">download</span>
Download Brochure
</a>
<a href="#visa-support" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-red-500">flight</span>
Visa Support
</a>
<a href="#useful-info" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-teal-500">info</span>
Useful Information
</a>
</div>
</div>
</div>
<!-- Visitors Dropdown -->
<div class="relative group">
<button class="text-sm font-semibold hover:text-primary dark:hover:text-secondary transition-colors relative flex items-center space-x-1">
<span>Visitors</span>
<span class="material-icons-outlined text-sm transition-transform group-hover:rotate-180">expand_more</span>
</button>
<div class="absolute top-full left-0 mt-2 w-56 bg-white dark:bg-slate-800 rounded-xl shadow-2xl border border-slate-100 dark:border-slate-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top scale-95 group-hover:scale-100 z-50">
<div class="py-2">
<a href="#why-visit" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-secondary">star</span>
Why Visit
</a>
<a href="#visitor-profile" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-blue-500">badge</span>
Visitor Profile
</a>
<a href="#visitor-registration" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-purple-500">how_to_reg</span>
Visitor Registration
</a>
<a href="#useful-for-visiting" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-amber-500">info</span>
Useful For Visiting
</a>
</div>
</div>
</div>
<!-- Contact Us Dropdown -->
<div class="relative group">
<button class="text-sm font-semibold hover:text-primary dark:hover:text-secondary transition-colors relative flex items-center space-x-1">
<span>Contact Us</span>
<span class="material-icons-outlined text-sm transition-transform group-hover:rotate-180">expand_more</span>
</button>
<div class="absolute top-full left-0 mt-2 w-56 bg-white dark:bg-slate-800 rounded-xl shadow-2xl border border-slate-100 dark:border-slate-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top scale-95 group-hover:scale-100 z-50">
<div class="py-2">
<a href="#contact" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-secondary">mail</span>
Connect Us
</a>
<a href="#locate-venue" class="flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-primary/5 dark:hover:bg-primary/10 hover:text-primary dark:hover:text-secondary transition-colors">
<span class="material-icons-outlined text-lg mr-3 text-red-500">location_on</span>
Locate The Venue
</a>
</div>
</div>
</div>
<button onclick="openModal('exhibitor')" class="bg-gradient-to-r from-primary to-blue-700 hover:from-blue-700 hover:to-primary text-white px-6 py-2.5 rounded-full font-bold text-sm transition-all transform hover:scale-105 shadow-lg hover:shadow-xl">
Book A Space
</button>
<button class="p-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors" onclick="toggleDarkMode()">
<span class="material-icons-outlined text-xl" id="theme-icon">dark_mode</span>
</button>
</div>
<div class="lg:hidden flex items-center space-x-4">
<button class="p-2 rounded-full bg-slate-100 dark:bg-slate-800" onclick="toggleDarkMode()">
<span class="material-icons-outlined text-xl" id="theme-icon-mobile">dark_mode</span>
</button>
<button class="p-2 text-slate-600 dark:text-slate-300" onclick="toggleMobileMenu()">
<span class="material-icons-outlined text-2xl" id="menu-icon">menu</span>
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden lg:hidden bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800">
<div class="px-4 py-6 space-y-4">
<a class="block text-lg font-semibold hover:text-primary transition-colors" href="#">Home</a>
<!-- Mobile NCCAL Dropdown -->
<div class="space-y-2">
<button onclick="toggleMobileDropdown()" class="flex items-center justify-between w-full text-lg font-semibold hover:text-primary transition-colors">
<span>NCCAL</span>
<span class="material-icons-outlined text-lg transition-transform" id="mobile-dropdown-icon">expand_more</span>
</button>
<div id="mobile-nccal-dropdown" class="hidden pl-4 space-y-3 border-l-2 border-secondary/30">
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#about">
<span class="material-icons-outlined text-sm mr-2 text-primary dark:text-accent">info</span>
About NCCAL
</a>
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#why-colocated">
<span class="material-icons-outlined text-sm mr-2 text-secondary">handshake</span>
Why Co-located
</a>
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#industry-review">
<span class="material-icons-outlined text-sm mr-2 text-blue-500">analytics</span>
Industry Review
</a>
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#sectors">
<span class="material-icons-outlined text-sm mr-2 text-purple-500">category</span>
Covering Sectors
</a>
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#visitors">
<span class="material-icons-outlined text-sm mr-2 text-amber-500">groups</span>
For Delegate
</a>
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#schedule">
<span class="material-icons-outlined text-sm mr-2 text-red-500">calendar_month</span>
Conference Schedule
</a>
</div>
</div>
<!-- Mobile Exhibitors Dropdown -->
<div class="space-y-2">
<button onclick="toggleMobileExhibitorDropdown()" class="flex items-center justify-between w-full text-lg font-semibold hover:text-primary transition-colors">
<span>Exhibitors</span>
<span class="material-icons-outlined text-lg transition-transform" id="mobile-exhibitor-dropdown-icon">expand_more</span>
</button>
<div id="mobile-exhibitor-dropdown" class="hidden pl-4 space-y-3 border-l-2 border-secondary/30">
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#exhibitors">
<span class="material-icons-outlined text-sm mr-2 text-secondary">storefront</span>
Why Exhibit
</a>
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#exhibitor-profile">
<span class="material-icons-outlined text-sm mr-2 text-blue-500">badge</span>
Exhibitor Profile
</a>
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#reserve-space">
<span class="material-icons-outlined text-sm mr-2 text-purple-500">event_seat</span>
Reserve A Space
</a>
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="https://nccalexpo.nipoliexpo.com/wp-content/uploads/2026/01/NCCAL-EXPO-2026.pdf" download="NCCAL-EXPO-2026-Brochure.pdf" target="_blank">
<span class="material-icons-outlined text-sm mr-2 text-amber-500">download</span>
Download Brochure
</a>
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#visa-support">
<span class="material-icons-outlined text-sm mr-2 text-red-500">flight</span>
Visa Support
</a>
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#useful-info">
<span class="material-icons-outlined text-sm mr-2 text-teal-500">info</span>
Useful Information
</a>
</div>
</div>
<!-- Mobile Visitors Dropdown -->
<div class="space-y-2">
<button onclick="toggleMobileVisitorDropdown()" class="flex items-center justify-between w-full text-lg font-semibold hover:text-primary transition-colors">
<span>Visitors</span>
<span class="material-icons-outlined text-lg transition-transform" id="mobile-visitor-dropdown-icon">expand_more</span>
</button>
<div id="mobile-visitor-dropdown" class="hidden pl-4 space-y-3 border-l-2 border-secondary/30">
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#why-visit">
<span class="material-icons-outlined text-sm mr-2 text-secondary">star</span>
Why Visit
</a>
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#visitor-profile">
<span class="material-icons-outlined text-sm mr-2 text-blue-500">badge</span>
Visitor Profile
</a>
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#visitor-registration">
<span class="material-icons-outlined text-sm mr-2 text-purple-500">how_to_reg</span>
Visitor Registration
</a>
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#useful-for-visiting">
<span class="material-icons-outlined text-sm mr-2 text-amber-500">info</span>
Useful For Visiting
</a>
</div>
</div>
<!-- Mobile Contact Us Dropdown -->
<div class="space-y-2">
<button onclick="toggleMobileContactDropdown()" class="flex items-center justify-between w-full text-lg font-semibold hover:text-primary transition-colors">
<span>Contact Us</span>
<span class="material-icons-outlined text-lg transition-transform" id="mobile-contact-dropdown-icon">expand_more</span>
</button>
<div id="mobile-contact-dropdown" class="hidden pl-4 space-y-3 border-l-2 border-secondary/30">
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#contact">
<span class="material-icons-outlined text-sm mr-2 text-secondary">mail</span>
Connect Us
</a>
<a class="flex items-center text-base text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-secondary transition-colors" href="#locate-venue">
<span class="material-icons-outlined text-sm mr-2 text-red-500">location_on</span>
Locate The Venue
</a>
</div>
</div>
<button onclick="openModal('exhibitor')" class="w-full bg-gradient-to-r from-primary to-blue-700 text-white px-6 py-3 rounded-full font-bold text-lg mt-4">
Book A Space
</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="relative min-h-[90vh] flex items-center overflow-hidden bg-mesh">
<div class="absolute inset-0 z-0">
<!-- Video Background -->
<video
autoplay
muted
loop
playsinline
poster="https://nccalexpo.nipoliexpo.com/wp-content/uploads/2026/01/NCCAL3.png"
class="w-full h-full object-cover opacity-40 dark:opacity-25"
>
<source src="https://nccalexpo.nipoliexpo.com/wp-content/uploads/2026/01/NCCAL.mp4" type="video/mp4">
<!-- Fallback image if video doesn't load -->
<img alt="NCCAL EXPO 2026 - Nigeria Cold Chain and Agro-logistics Exhibition" class="w-full h-full object-cover" src="https://nccalexpo.nipoliexpo.com/wp-content/uploads/2026/01/NCCAL3.png"/>
</video>
<div class="absolute inset-0 bg-gradient-to-br from-primary/80 via-primary/50 to-transparent dark:from-background-dark/90 dark:via-background-dark/70"></div>
</div>
<!-- Animated Background Elements -->
<div class="absolute top-20 right-20 w-72 h-72 bg-secondary/20 rounded-full blur-3xl animate-pulse-slow"></div>
<div class="absolute bottom-20 left-10 w-96 h-96 bg-accent/20 rounded-full blur-3xl animate-float"></div>
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full py-20">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="animate-fade-in">
<div class="inline-flex items-center space-x-2 bg-white/10 dark:bg-white/5 backdrop-blur-md px-4 py-2 rounded-full mb-6">
<span class="w-2 h-2 bg-secondary rounded-full animate-pulse"></span>
<span class="text-white text-sm font-medium">April 28-30, 2026 • NIPOLI Village, NCRI, Ibadan, Nigeria</span>
</div>
<div class="inline-flex items-center space-x-2 bg-secondary/20 backdrop-blur-md px-4 py-2 rounded-full mb-6 ml-2">
<span class="material-icons-outlined text-secondary text-sm">event</span>
<span class="text-white text-sm font-medium">Colocated with <a href="https://www.nipoliexpo.com" target="_blank" class="underline hover:text-secondary">NIPOLI EXPO 2026</a></span>
</div>
<h3 class="font-display text-3xl md:text-4xl lg:text-5xl font-black text-white leading-tight">
Revolutionizing Nigeria's Food Security through
<span class="gradient-text">Cold Chain & Agro-logistics Innovation</span>
</h3>
<p class="mt-6 text-lg md:text-xl text-slate-200 leading-relaxed max-w-xl">
<strong>NCCAL EXPO 2026</strong> colocated with <strong><a href="https://www.nipoliexpo.com" target="_blank" class="underline hover:text-secondary">NIPOLI EXPO 2026</a></strong> — West Africa's largest gathering of agro-logistics professionals, technology pioneers, investors, and policymakers at NIPOLI Village, NCRI, Ibadan.
</p>
<div class="mt-10 flex flex-wrap gap-4">
<a onclick="openModal('exhibitor')" class="cursor-pointer bg-gradient-to-r from-secondary to-green-600 hover:from-green-600 hover:to-secondary text-white px-8 py-4 rounded-xl font-bold text-lg transition-all shadow-xl hover:-translate-y-1 hover:shadow-2xl flex items-center space-x-2">
<span class="material-icons-outlined">storefront</span>
<span>Exhibit with Us</span>
</a>
<a onclick="openModal('visitor')" class="cursor-pointer bg-white/10 hover:bg-white/20 backdrop-blur-md border-2 border-white/30 text-white px-8 py-4 rounded-xl font-bold text-lg transition-all flex items-center space-x-2">
<span class="material-icons-outlined">confirmation_number</span>
<span>Get Visitor Pass</span>
</a>
</div>
<!-- Countdown Timer -->
<div class="mt-12 grid grid-cols-4 gap-3 max-w-md">
<div class="countdown-item rounded-xl p-4 text-center">
<p class="text-3xl md:text-4xl font-bold text-white" id="days">00</p>
<p class="text-xs text-slate-300 uppercase tracking-wider mt-1">Days</p>
</div>
<div class="countdown-item rounded-xl p-4 text-center">
<p class="text-3xl md:text-4xl font-bold text-white" id="hours">00</p>
<p class="text-xs text-slate-300 uppercase tracking-wider mt-1">Hours</p>
</div>
<div class="countdown-item rounded-xl p-4 text-center">
<p class="text-3xl md:text-4xl font-bold text-white" id="minutes">00</p>
<p class="text-xs text-slate-300 uppercase tracking-wider mt-1">Mins</p>
</div>
<div class="countdown-item rounded-xl p-4 text-center">
<p class="text-3xl md:text-4xl font-bold text-white" id="seconds">00</p>
<p class="text-xs text-slate-300 uppercase tracking-wider mt-1">Secs</p>
</div>
</div>
</div>
<!-- Hero Image Card -->
<div class="hidden lg:block relative">
<div class="relative">
<div class="absolute -inset-4 bg-gradient-to-r from-secondary/50 to-primary/50 rounded-3xl blur-2xl opacity-50"></div>
<img alt="NCCAL EXPO 2026 - Cold Chain & agro-logistics Solutions" class="relative rounded-3xl shadow-2xl w-full h-[500px] object-cover" src="https://nccalexpo.nipoliexpo.com/wp-content/uploads/2026/01/NCCAL-4.png"/>
<div class="absolute -bottom-6 -left-6 bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-2xl">
<div class="flex items-center space-x-4">
<div class="w-14 h-14 bg-secondary/10 rounded-full flex items-center justify-center">
<span class="material-icons-outlined text-secondary text-2xl">trending_up</span>
</div>
<div>
<p class="text-2xl font-bold text-primary dark:text-white">₦3.5T</p>
<p class="text-sm text-slate-500">Market Opportunity</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Colocation Banner -->
<section class="relative z-30 -mt-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-12">
<div class="bg-gradient-to-r from-secondary via-green-500 to-secondary rounded-2xl p-6 shadow-2xl">
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center space-x-4">
<div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center">
<span class="material-icons-outlined text-white text-3xl">handshake</span>
</div>
<div>
<h3 class="text-white font-bold text-xl">NCCAL EXPO 2026 + <a href="https://www.nipoliexpo.com" target="_blank" class="underline hover:text-green-200">NIPOLI EXPO 2026</a></h3>
<p class="text-green-100">Two powerful expos, one strategic location — NIPOLI Village, NCRI, Ibadan</p>
</div>
</div>
<div class="flex items-center space-x-4">
<div class="text-center px-4 border-r border-white/30">
<p class="text-2xl font-bold text-white">April 28-30</p>
<p class="text-green-100 text-sm">2026</p>
</div>
<div class="text-center px-4">
<p class="text-2xl font-bold text-white">3 Days</p>
<p class="text-green-100 text-sm">of Innovation</p>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-white dark:bg-slate-800 rounded-3xl shadow-2xl grid grid-cols-2 lg:grid-cols-4 overflow-hidden">
<div class="p-8 text-center border-r border-b lg:border-b-0 border-slate-100 dark:border-slate-700 group hover:bg-primary/5 dark:hover:bg-primary/10 transition-colors">
<div class="inline-flex items-center justify-center w-12 h-12 bg-primary/10 rounded-full mb-4 group-hover:scale-110 transition-transform">
<span class="material-icons-outlined text-primary">groups</span>
</div>
<p class="text-4xl font-extrabold text-primary dark:text-accent">3,000+</p>
<p class="mt-2 text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Expected Visitors</p>
</div>
<div class="p-8 text-center border-b lg:border-b-0 lg:border-r border-slate-100 dark:border-slate-700 group hover:bg-primary/5 dark:hover:bg-primary/10 transition-colors">
<div class="inline-flex items-center justify-center w-12 h-12 bg-secondary/10 rounded-full mb-4 group-hover:scale-110 transition-transform">
<span class="material-icons-outlined text-secondary">store</span>
</div>
<p class="text-4xl font-extrabold text-primary dark:text-accent">50+</p>
<p class="mt-2 text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Exhibitors</p>
</div>
<div class="p-8 text-center border-r border-slate-100 dark:border-slate-700 group hover:bg-primary/5 dark:hover:bg-primary/10 transition-colors">
<div class="inline-flex items-center justify-center w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-full mb-4 group-hover:scale-110 transition-transform">
<span class="material-icons-outlined text-blue-600 dark:text-blue-400">school</span>
</div>
<p class="text-4xl font-extrabold text-primary dark:text-accent">10+</p>
<p class="mt-2 text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Sessions & Workshops</p>
</div>
<div class="p-8 text-center group hover:bg-primary/5 dark:hover:bg-primary/10 transition-colors">
<div class="inline-flex items-center justify-center w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-full mb-4 group-hover:scale-110 transition-transform">
<span class="material-icons-outlined text-purple-600 dark:text-purple-400">public</span>
</div>
<p class="text-4xl font-extrabold text-primary dark:text-accent">25+</p>
<p class="mt-2 text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Countries</p>
</div>
</div>
</section>
<!-- About Section -->
<section class="py-24 bg-background-light dark:bg-background-dark" id="about">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-16 items-start">
<div class="relative order-2 lg:order-1">
<div class="absolute -top-8 -left-8 w-32 h-32 bg-secondary/20 rounded-full blur-3xl"></div>
<div class="absolute -bottom-8 -right-8 w-40 h-40 bg-primary/20 rounded-full blur-3xl"></div>
<div class="relative">
<img alt="NCCAL EXPO - Nigeria Cold Chain and Agro-logistics Exhibition" class="rounded-3xl shadow-2xl w-full object-cover" src="https://nccalexpo.nipoliexpo.com/wp-content/uploads/2026/01/NCCAL.png"/>
</div>
</div>
<div class="order-1 lg:order-2">
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>About NCCAL EXPO</span>
</span>
<h2 class="mt-4 font-display text-2xl md:text-4xl lg:text-4xl font-bold text-primary dark:text-white leading-tight">
Bridging the Gap in Nigeria's Food Value Chain
</h2>
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400 leading-relaxed">
<strong class="text-primary dark:text-accent">NCCAL EXPO 2026</strong> is colocated with <strong class="text-secondary"><a href="https://www.nipoliexpo.com" target="_blank" class="underline hover:text-green-700">NIPOLI EXPO 2026</a></strong> at the prestigious NIPOLI Village, National Cereals Research Institute (NCRI), Ibadan. This strategic partnership amplifies the impact, bringing together the complete agricultural value chain under one roof.
</p>
<div class="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-6">
<div class="flex items-start space-x-4 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-md">
<div class="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-red-500">warning</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">40% Loss</p>
<p class="text-sm text-slate-500">Of fresh produce lost annually</p>
</div>
</div>
<div class="flex items-start space-x-4 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-md">
<div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-green-500">trending_down</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">60% Reduction</p>
<p class="text-sm text-slate-500">Possible with proper cold chain</p>
</div>
</div>
<div class="flex items-start space-x-4 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-md">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-blue-500">handshake</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">500+ Connections</p>
<p class="text-sm text-slate-500">B2B meetings facilitated</p>
</div>
</div>
<div class="flex items-start space-x-4 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-md">
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-purple-500">account_balance</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">$50M+ Deals</p>
<p class="text-sm text-slate-500">Investment opportunities</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Why Co-located Section -->
<section class="py-24 bg-gradient-to-br from-secondary/5 via-white to-primary/5 dark:from-secondary/10 dark:via-background-dark dark:to-primary/10" id="why-colocated">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>Strategic Partnership</span>
<span class="w-8 h-0.5 bg-secondary"></span>
</span>
<h2 class="mt-4 font-display text-3xl md:text-4xl font-bold text-primary dark:text-white">Why Co-located with <a href="https://www.nipoliexpo.com" target="_blank" class="underline hover:text-secondary">NIPOLI EXPO</a>?</h2>
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">The power of two premier exhibitions under one roof creates unprecedented opportunities</p>
</div>
<div class="grid lg:grid-cols-2 gap-12 items-center mb-16">
<div class="relative">
<div class="absolute -inset-4 bg-gradient-to-r from-secondary/20 to-primary/20 rounded-3xl blur-2xl"></div>
<div class="relative bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-2xl">
<div class="flex items-center space-x-4 mb-6">
<div class="w-16 h-16 bg-secondary/10 rounded-2xl flex items-center justify-center">
<span class="material-icons-outlined text-3xl text-secondary">handshake</span>
</div>
<div>
<h3 class="text-2xl font-bold text-primary dark:text-white">NCCAL + NIPOLI</h3>
<p class="text-slate-500">A Strategic Alliance</p>
</div>
</div>
<p class="text-slate-600 dark:text-slate-400 leading-relaxed mb-6">
By co-locating NCCAL EXPO with <a href="https://www.nipoliexpo.com" target="_blank" class="text-secondary underline hover:text-green-700">NIPOLI EXPO 2026</a>, we create a comprehensive ecosystem that addresses the entire agricultural value chain — from farm inputs and production to post-harvest handling, cold chain logistics, and market access.
</p>
<div class="grid grid-cols-2 gap-4">
<div class="bg-slate-50 dark:bg-slate-700/50 rounded-xl p-4 text-center">
<p class="text-3xl font-bold text-secondary">2x</p>
<p class="text-sm text-slate-500">Networking Opportunities</p>
</div>
<div class="bg-slate-50 dark:bg-slate-700/50 rounded-xl p-4 text-center">
<p class="text-3xl font-bold text-primary dark:text-accent">5,000+</p>
<p class="text-sm text-slate-500">Combined Visitors</p>
</div>
</div>
</div>
</div>
<div class="space-y-6">
<div class="flex items-start space-x-4 p-6 bg-white dark:bg-slate-800 rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
<div class="w-14 h-14 bg-green-100 dark:bg-green-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-2xl text-green-500">sync</span>
</div>
<div>
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Complete Value Chain Coverage</h4>
<p class="text-slate-500 dark:text-slate-400 mt-1">Access the full spectrum from agricultural inputs to cold chain solutions in one location.</p>
</div>
</div>
<div class="flex items-start space-x-4 p-6 bg-white dark:bg-slate-800 rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
<div class="w-14 h-14 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-2xl text-blue-500">savings</span>
</div>
<div>
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Cost-Effective Participation</h4>
<p class="text-slate-500 dark:text-slate-400 mt-1">One trip, two exhibitions — maximize your ROI with reduced travel and accommodation costs.</p>
</div>
</div>
<div class="flex items-start space-x-4 p-6 bg-white dark:bg-slate-800 rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
<div class="w-14 h-14 bg-purple-100 dark:bg-purple-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-2xl text-purple-500">hub</span>
</div>
<div>
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Cross-Industry Connections</h4>
<p class="text-slate-500 dark:text-slate-400 mt-1">Meet stakeholders from agricultural production, logistics, technology, and finance sectors.</p>
</div>
</div>
<div class="flex items-start space-x-4 p-6 bg-white dark:bg-slate-800 rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
<div class="w-14 h-14 bg-amber-100 dark:bg-amber-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-2xl text-amber-500">location_on</span>
</div>
<div>
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Strategic Location</h4>
<p class="text-slate-500 dark:text-slate-400 mt-1">NIPOLI Village at NCRI, Ibadan — Nigeria's agricultural research hub with excellent facilities.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Industry Review Section -->
<section class="py-24 bg-primary relative overflow-hidden" id="industry-review">
<div class="absolute inset-0 opacity-10">
<div class="absolute top-0 left-0 w-full h-full" style="background-image: url('data:image/svg+xml,<svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><g fill=\"%23ffffff\" fill-opacity=\"0.4\"><circle cx=\"30\" cy=\"30\" r=\"2\"/></g></g></svg>')"></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center max-w-3xl mx-auto mb-16">
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>Market Insights</span>
<span class="w-8 h-0.5 bg-secondary"></span>
</span>
<h2 class="mt-4 font-display text-3xl md:text-4xl lg:text-5xl font-bold text-white">Nigeria Cold Chain Industry Review</h2>
<p class="mt-4 text-lg text-blue-100">Understanding the landscape, challenges, and opportunities</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 text-center">
<div class="w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="material-icons-outlined text-3xl text-red-300">warning</span>
</div>
<p class="text-4xl font-bold text-white mb-2">40%</p>
<p class="text-blue-100">Post-harvest losses annually in Nigeria</p>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 text-center">
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="material-icons-outlined text-3xl text-green-300">trending_up</span>
</div>
<p class="text-4xl font-bold text-white mb-2">₦3.5T</p>
<p class="text-blue-100">Cold chain market opportunity</p>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 text-center">
<div class="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="material-icons-outlined text-3xl text-blue-300">ac_unit</span>
</div>
<p class="text-4xl font-bold text-white mb-2">5%</p>
<p class="text-blue-100">Current cold storage penetration</p>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 text-center">
<div class="w-16 h-16 bg-amber-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="material-icons-outlined text-3xl text-amber-300">speed</span>
</div>
<p class="text-4xl font-bold text-white mb-2">25%</p>
<p class="text-blue-100">Annual growth rate projected</p>
</div>
</div>
<div class="grid lg:grid-cols-2 gap-12">
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20">
<h3 class="text-2xl font-bold text-white mb-6 flex items-center">
<span class="material-icons-outlined text-red-400 mr-3">error_outline</span>
Key Challenges
</h3>
<ul class="space-y-4">
<li class="flex items-start space-x-3">
<span class="material-icons-outlined text-red-400 text-sm mt-1">close</span>
<span class="text-blue-100">Inadequate cold storage infrastructure across the supply chain</span>
</li>
<li class="flex items-start space-x-3">
<span class="material-icons-outlined text-red-400 text-sm mt-1">close</span>
<span class="text-blue-100">Unreliable power supply affecting cold chain operations</span>
</li>
<li class="flex items-start space-x-3">
<span class="material-icons-outlined text-red-400 text-sm mt-1">close</span>
<span class="text-blue-100">Limited access to financing for cold chain investments</span>
</li>
<li class="flex items-start space-x-3">
<span class="material-icons-outlined text-red-400 text-sm mt-1">close</span>
<span class="text-blue-100">Lack of skilled workforce and technical expertise</span>
</li>
<li class="flex items-start space-x-3">
<span class="material-icons-outlined text-red-400 text-sm mt-1">close</span>
<span class="text-blue-100">Poor last-mile connectivity to rural farming areas</span>
</li>
</ul>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20">
<h3 class="text-2xl font-bold text-white mb-6 flex items-center">
<span class="material-icons-outlined text-green-400 mr-3">lightbulb</span>
Emerging Opportunities
</h3>
<ul class="space-y-4">
<li class="flex items-start space-x-3">
<span class="material-icons-outlined text-green-400 text-sm mt-1">check</span>
<span class="text-blue-100">Solar-powered cold storage solutions for off-grid areas</span>
</li>
<li class="flex items-start space-x-3">
<span class="material-icons-outlined text-green-400 text-sm mt-1">check</span>
<span class="text-blue-100">Government incentives and AfCFTA trade opportunities</span>
</li>
<li class="flex items-start space-x-3">
<span class="material-icons-outlined text-green-400 text-sm mt-1">check</span>
<span class="text-blue-100">IoT and digital tracking for temperature monitoring</span>
</li>
<li class="flex items-start space-x-3">
<span class="material-icons-outlined text-green-400 text-sm mt-1">check</span>
<span class="text-blue-100">Growing demand from quick commerce and food delivery</span>
</li>
<li class="flex items-start space-x-3">
<span class="material-icons-outlined text-green-400 text-sm mt-1">check</span>
<span class="text-blue-100">Pharmaceutical cold chain expansion post-COVID</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Covering Sectors Section -->
<section class="py-24 bg-background-light dark:bg-background-dark" id="sectors">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>Exhibition Scope</span>
<span class="w-8 h-0.5 bg-secondary"></span>
</span>
<h2 class="mt-4 font-display text-3xl md:text-4xl font-bold text-primary dark:text-white">Covering Sectors</h2>
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">NCCAL EXPO covers the entire cold chain and agro-logistics ecosystem</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700">
<div class="w-16 h-16 bg-gradient-to-br from-blue-100 to-blue-50 dark:from-blue-900/50 dark:to-blue-900/30 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-primary dark:text-accent">ac_unit</span>
</div>
<h3 class="text-xl font-bold text-slate-800 dark:text-white mb-3">Cold Storage & Warehousing</h3>
<p class="text-slate-500 dark:text-slate-400 mb-4">Cold rooms, blast freezers, controlled atmosphere storage, modular cold storage units, and warehouse management systems.</p>
<ul class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>Walk-in coolers & freezers</span></li>
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>Industrial refrigeration</span></li>
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>Ripening chambers</span></li>
</ul>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700">
<div class="w-16 h-16 bg-gradient-to-br from-green-100 to-green-50 dark:from-green-900/50 dark:to-green-900/30 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-secondary">local_shipping</span>
</div>
<h3 class="text-xl font-bold text-slate-800 dark:text-white mb-3">Refrigerated Transport</h3>
<p class="text-slate-500 dark:text-slate-400 mb-4">Reefer trucks, insulated vans, temperature-controlled containers, and fleet management solutions.</p>
<ul class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>Reefer trucks & trailers</span></li>
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>Last-mile delivery vehicles</span></li>
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>Transport refrigeration units</span></li>
</ul>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700">
<div class="w-16 h-16 bg-gradient-to-br from-purple-100 to-purple-50 dark:from-purple-900/50 dark:to-purple-900/30 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-purple-600">inventory_2</span>
</div>
<h3 class="text-xl font-bold text-slate-800 dark:text-white mb-3">Packaging Solutions</h3>
<p class="text-slate-500 dark:text-slate-400 mb-4">Insulated packaging, phase change materials, vacuum packaging, and smart packaging with temperature indicators.</p>
<ul class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>Thermal containers & boxes</span></li>
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>Cool chain packaging</span></li>
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>Sustainable packaging</span></li>
</ul>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700">
<div class="w-16 h-16 bg-gradient-to-br from-red-100 to-red-50 dark:from-red-900/50 dark:to-red-900/30 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-red-500">gps_fixed</span>
</div>
<h3 class="text-xl font-bold text-slate-800 dark:text-white mb-3">IoT & Technology</h3>
<p class="text-slate-500 dark:text-slate-400 mb-4">Temperature monitoring devices, GPS tracking, supply chain visibility platforms, and cold chain analytics.</p>
<ul class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>Real-time temperature loggers</span></li>
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>Cold chain visibility software</span></li>
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>AI-powered analytics</span></li>
</ul>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700">
<div class="w-16 h-16 bg-gradient-to-br from-cyan-100 to-cyan-50 dark:from-cyan-900/50 dark:to-cyan-900/30 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-cyan-500">solar_power</span>
</div>
<h3 class="text-xl font-bold text-slate-800 dark:text-white mb-3">Renewable Energy Solutions</h3>
<p class="text-slate-500 dark:text-slate-400 mb-4">Solar-powered cold rooms, hybrid refrigeration systems, and energy-efficient cooling technologies.</p>
<ul class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>Solar cold storage</span></li>
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>Battery storage systems</span></li>
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>Energy management</span></li>
</ul>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700">
<div class="w-16 h-16 bg-gradient-to-br from-pink-100 to-pink-50 dark:from-pink-900/50 dark:to-pink-900/30 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-pink-500">biotech</span>
</div>
<h3 class="text-xl font-bold text-slate-800 dark:text-white mb-3">Pharma & Healthcare</h3>
<p class="text-slate-500 dark:text-slate-400 mb-4">Vaccine cold chain, pharmaceutical logistics, medical cold storage, and temperature-sensitive healthcare products.</p>
<ul class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>Vaccine storage solutions</span></li>
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>Medical refrigerators</span></li>
<li class="flex items-center space-x-2"><span class="material-icons-outlined text-secondary text-sm">check_circle</span><span>GDP compliance systems</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Featured Categories -->
<section class="py-24 bg-gradient-to-b from-slate-50 to-white dark:from-slate-900/50 dark:to-background-dark">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>Product Categories</span>
<span class="w-8 h-0.5 bg-secondary"></span>
</span>
<h2 class="mt-4 font-display text-3xl md:text-4xl font-bold text-primary dark:text-white">Explore the Complete Ecosystem</h2>
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">Discover cutting-edge solutions across the entire temperature-controlled supply chain.</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
<div class="exhibitor-card p-8 rounded-2xl border border-slate-100 dark:border-slate-700 text-center card-hover cursor-pointer group shadow-lg">
<div class="w-20 h-20 bg-gradient-to-br from-blue-100 to-blue-50 dark:from-blue-900/50 dark:to-blue-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
<span class="material-icons-outlined text-4xl text-primary dark:text-accent">ac_unit</span>
</div>
<h3 class="font-bold text-slate-800 dark:text-white text-lg">Cold Storage</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Warehouses & Facilities</p>
</div>
<div class="exhibitor-card p-8 rounded-2xl border border-slate-100 dark:border-slate-700 text-center card-hover cursor-pointer group shadow-lg">
<div class="w-20 h-20 bg-gradient-to-br from-green-100 to-green-50 dark:from-green-900/50 dark:to-green-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
<span class="material-icons-outlined text-4xl text-secondary">local_shipping</span>
</div>
<h3 class="font-bold text-slate-800 dark:text-white text-lg">Reefer Transport</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Trucks & Fleet Solutions</p>
</div>
<div class="exhibitor-card p-8 rounded-2xl border border-slate-100 dark:border-slate-700 text-center card-hover cursor-pointer group shadow-lg">
<div class="w-20 h-20 bg-gradient-to-br from-purple-100 to-purple-50 dark:from-purple-900/50 dark:to-purple-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
<span class="material-icons-outlined text-4xl text-purple-600">inventory_2</span>
</div>
<h3 class="font-bold text-slate-800 dark:text-white text-lg">Packaging</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Insulated & Smart Packaging</p>
</div>
<div class="exhibitor-card p-8 rounded-2xl border border-slate-100 dark:border-slate-700 text-center card-hover cursor-pointer group shadow-lg">
<div class="w-20 h-20 bg-gradient-to-br from-orange-100 to-orange-50 dark:from-orange-900/50 dark:to-orange-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
<span class="material-icons-outlined text-4xl text-orange-500">restaurant</span>
</div>
<h3 class="font-bold text-slate-800 dark:text-white text-lg">Food Processing</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Equipment & Machinery</p>
</div>
<div class="exhibitor-card p-8 rounded-2xl border border-slate-100 dark:border-slate-700 text-center card-hover cursor-pointer group shadow-lg">
<div class="w-20 h-20 bg-gradient-to-br from-red-100 to-red-50 dark:from-red-900/50 dark:to-red-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
<span class="material-icons-outlined text-4xl text-red-500">gps_fixed</span>
</div>
<h3 class="font-bold text-slate-800 dark:text-white text-lg">IoT & Tracking</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Temperature Monitoring</p>
</div>
<div class="exhibitor-card p-8 rounded-2xl border border-slate-100 dark:border-slate-700 text-center card-hover cursor-pointer group shadow-lg">
<div class="w-20 h-20 bg-gradient-to-br from-cyan-100 to-cyan-50 dark:from-cyan-900/50 dark:to-cyan-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
<span class="material-icons-outlined text-4xl text-cyan-500">solar_power</span>
</div>
<h3 class="font-bold text-slate-800 dark:text-white text-lg">Solar Cold Rooms</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Off-grid Solutions</p>
</div>
<div class="exhibitor-card p-8 rounded-2xl border border-slate-100 dark:border-slate-700 text-center card-hover cursor-pointer group shadow-lg">
<div class="w-20 h-20 bg-gradient-to-br from-amber-100 to-amber-50 dark:from-amber-900/50 dark:to-amber-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
<span class="material-icons-outlined text-4xl text-amber-500">agriculture</span>
</div>
<h3 class="font-bold text-slate-800 dark:text-white text-lg">Agri-Tech</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Smart Farming Solutions</p>
</div>
<div class="exhibitor-card p-8 rounded-2xl border border-slate-100 dark:border-slate-700 text-center card-hover cursor-pointer group shadow-lg">
<div class="w-20 h-20 bg-gradient-to-br from-teal-100 to-teal-50 dark:from-teal-900/50 dark:to-teal-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
<span class="material-icons-outlined text-4xl text-teal-500">hub</span>
</div>
<h3 class="font-bold text-slate-800 dark:text-white text-lg">Supply Chain</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Logistics Software</p>
</div>
<div class="exhibitor-card p-8 rounded-2xl border border-slate-100 dark:border-slate-700 text-center card-hover cursor-pointer group shadow-lg">
<div class="w-20 h-20 bg-gradient-to-br from-pink-100 to-pink-50 dark:from-pink-900/50 dark:to-pink-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
<span class="material-icons-outlined text-4xl text-pink-500">biotech</span>
</div>
<h3 class="font-bold text-slate-800 dark:text-white text-lg">Pharma Cold Chain</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Medical Logistics</p>
</div>
<div class="exhibitor-card p-8 rounded-2xl border border-slate-100 dark:border-slate-700 text-center card-hover cursor-pointer group shadow-lg">
<div class="w-20 h-20 bg-gradient-to-br from-indigo-100 to-indigo-50 dark:from-indigo-900/50 dark:to-indigo-900/30 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
<span class="material-icons-outlined text-4xl text-indigo-500">account_balance</span>
</div>
<h3 class="font-bold text-slate-800 dark:text-white text-lg">Finance & Insurance</h3>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-2">Investment & Coverage</p>
</div>
</div>
</div>
</section>
<!-- Exhibitor Section -->
<section class="py-24 bg-primary relative overflow-hidden" id="exhibitors">
<div class="absolute inset-0 opacity-10">
<div class="absolute top-0 left-0 w-full h-full" style="background-image: url('data:image/svg+xml,<svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><g fill=\"%23ffffff\" fill-opacity=\"0.4\"><circle cx=\"30\" cy=\"30\" r=\"2\"/></g></g></svg>')"></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center max-w-3xl mx-auto mb-16">
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>For Exhibitors</span>
<span class="w-8 h-0.5 bg-secondary"></span>
</span>
<h2 class="mt-4 font-display text-3xl md:text-4xl lg:text-5xl font-bold text-white">Why Exhibit at NCCAL EXPO?</h2>
<p class="mt-4 text-lg text-blue-100">Position your brand at the forefront of West Africa's cold chain revolution</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-colors">
<div class="w-16 h-16 bg-secondary/20 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-secondary">visibility</span>
</div>
<h3 class="text-xl font-bold text-white mb-3">Maximum Visibility</h3>
<p class="text-blue-100">Showcase your products to 5,000+ qualified buyers, investors, and decision-makers from across Africa and beyond.</p>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-colors">
<div class="w-16 h-16 bg-secondary/20 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-secondary">handshake</span>
</div>
<h3 class="text-xl font-bold text-white mb-3">Quality Leads</h3>
<p class="text-blue-100">Connect with pre-qualified buyers through our AI-powered matchmaking system and scheduled B2B meetings.</p>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-colors">
<div class="w-16 h-16 bg-secondary/20 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-secondary">campaign</span>
</div>
<h3 class="text-xl font-bold text-white mb-3">Brand Amplification</h3>
<p class="text-blue-100">Benefit from extensive marketing coverage across digital, print, TV, and social media reaching millions.</p>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-colors">
<div class="w-16 h-16 bg-secondary/20 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-secondary">rocket_launch</span>
</div>
<h3 class="text-xl font-bold text-white mb-3">Product Launch Platform</h3>
<p class="text-blue-100">Unveil new products and innovations to an engaged audience hungry for the latest cold chain solutions.</p>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-colors">
<div class="w-16 h-16 bg-secondary/20 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-secondary">diversity_3</span>
</div>
<h3 class="text-xl font-bold text-white mb-3">Network Expansion</h3>
<p class="text-blue-100">Join exclusive networking events, gala dinner, and VIP sessions with industry leaders and government officials.</p>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-colors">
<div class="w-16 h-16 bg-secondary/20 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-secondary">insights</span>
</div>
<h3 class="text-xl font-bold text-white mb-3">Market Intelligence</h3>
<p class="text-blue-100">Gain valuable insights into market trends, competitor analysis, and customer needs through our research reports.</p>
</div>
</div>
<!-- CTA Button for Exhibitors -->
<div class="text-center">
<button onclick="openModal('exhibitor')" class="bg-secondary hover:bg-green-600 text-white px-12 py-5 rounded-xl font-bold text-xl shadow-2xl transition-all hover:-translate-y-1 inline-flex items-center space-x-3">
<span class="material-icons-outlined text-2xl">storefront</span>
<span>Apply to Exhibit</span>
</button>
<p class="text-blue-200 mt-4">Contact our sales team for booth options and pricing</p>
</div>
</div>
</section>
<!-- Exhibitor Profile Section -->
<section class="py-24 bg-background-light dark:bg-background-dark" id="exhibitor-profile">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>Who Should Exhibit</span>
<span class="w-8 h-0.5 bg-secondary"></span>
</span>
<h2 class="mt-4 font-display text-3xl md:text-4xl font-bold text-primary dark:text-white">Exhibitor Profile</h2>
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">NCCAL EXPO welcomes companies and organizations across the cold chain and agro-logistics value chain</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700">
<div class="w-16 h-16 bg-gradient-to-br from-blue-100 to-blue-50 dark:from-blue-900/50 dark:to-blue-900/30 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-primary dark:text-accent">ac_unit</span>
</div>
<h3 class="text-xl font-bold text-slate-800 dark:text-white mb-3">Cold Storage Providers</h3>
<p class="text-slate-500 dark:text-slate-400">Manufacturers and suppliers of cold rooms, freezers, blast chillers, and warehouse refrigeration systems.</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700">
<div class="w-16 h-16 bg-gradient-to-br from-green-100 to-green-50 dark:from-green-900/50 dark:to-green-900/30 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-secondary">local_shipping</span>
</div>
<h3 class="text-xl font-bold text-slate-800 dark:text-white mb-3">Transport & Logistics</h3>
<p class="text-slate-500 dark:text-slate-400">Reefer truck manufacturers, fleet operators, transport refrigeration units, and logistics service providers.</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700">
<div class="w-16 h-16 bg-gradient-to-br from-red-100 to-red-50 dark:from-red-900/50 dark:to-red-900/30 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-red-500">memory</span>
</div>
<h3 class="text-xl font-bold text-slate-800 dark:text-white mb-3">Technology Companies</h3>
<p class="text-slate-500 dark:text-slate-400">IoT solution providers, temperature monitoring systems, supply chain software, and tracking solutions.</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700">
<div class="w-16 h-16 bg-gradient-to-br from-cyan-100 to-cyan-50 dark:from-cyan-900/50 dark:to-cyan-900/30 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-cyan-500">solar_power</span>
</div>
<h3 class="text-xl font-bold text-slate-800 dark:text-white mb-3">Renewable Energy</h3>
<p class="text-slate-500 dark:text-slate-400">Solar cold storage solutions, battery systems, hybrid cooling technologies, and energy management systems.</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700">
<div class="w-16 h-16 bg-gradient-to-br from-purple-100 to-purple-50 dark:from-purple-900/50 dark:to-purple-900/30 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-purple-600">inventory_2</span>
</div>
<h3 class="text-xl font-bold text-slate-800 dark:text-white mb-3">Packaging Companies</h3>
<p class="text-slate-500 dark:text-slate-400">Insulated packaging, thermal containers, phase change materials, and temperature indicators.</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700">
<div class="w-16 h-16 bg-gradient-to-br from-amber-100 to-amber-50 dark:from-amber-900/50 dark:to-amber-900/30 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-amber-500">account_balance</span>
</div>
<h3 class="text-xl font-bold text-slate-800 dark:text-white mb-3">Financial Services</h3>
<p class="text-slate-500 dark:text-slate-400">Banks, investment firms, insurance companies, and fintech solutions for cold chain financing.</p>
</div>
</div>
</div>
</section>
<!-- Reserve A Space Section -->
<section class="py-24 bg-gradient-to-br from-secondary/5 via-white to-primary/5 dark:from-secondary/10 dark:via-background-dark dark:to-primary/10" id="reserve-space">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>Book Your Booth</span>
<span class="w-8 h-0.5 bg-secondary"></span>
</span>
<h2 class="mt-4 font-display text-3xl md:text-4xl font-bold text-primary dark:text-white">Reserve A Space</h2>
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">Choose the perfect booth package for your exhibition needs</p>
</div>
<div class="grid md:grid-cols-3 gap-8 mb-12">
<!-- Standard Booth -->
<div class="bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-xl border-2 border-slate-200 dark:border-slate-700 hover:border-secondary transition-colors">
<div class="text-center mb-8">
<h3 class="text-2xl font-bold text-slate-800 dark:text-white mb-2">Standard Booth</h3>
<p class="text-slate-500">Perfect for small businesses</p>
<div class="mt-4">
<span class="text-4xl font-bold text-primary dark:text-accent">9 sqm</span>
</div>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-secondary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">Shell scheme booth (3m x 3m)</span>
</li>
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-secondary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">1 table & 2 chairs</span>
</li>
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-secondary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">Power connection</span>
</li>
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-secondary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">Company name fascia</span>
</li>
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-secondary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">2 exhibitor badges</span>
</li>
</ul>
<button onclick="openModal('exhibitor')" class="w-full bg-slate-100 dark:bg-slate-700 hover:bg-secondary hover:text-white text-slate-800 dark:text-white font-bold py-4 rounded-xl transition-all">
Request Quote
</button>
</div>
<!-- Premium Booth -->
<div class="bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-xl border-2 border-secondary relative transform scale-105">
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-secondary text-white font-bold px-6 py-2 rounded-full text-sm">
MOST POPULAR
</div>
<div class="text-center mb-8">
<h3 class="text-2xl font-bold text-slate-800 dark:text-white mb-2">Premium Booth</h3>
<p class="text-slate-500">Ideal for medium enterprises</p>
<div class="mt-4">
<span class="text-4xl font-bold text-secondary">18 sqm</span>
</div>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-secondary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">Shell scheme booth (6m x 3m)</span>
</li>
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-secondary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">2 tables & 4 chairs</span>
</li>
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-secondary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">Enhanced power supply</span>
</li>
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-secondary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">Spotlight lighting</span>
</li>
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-secondary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">4 exhibitor badges</span>
</li>
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-secondary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">Catalog listing (full page)</span>
</li>
</ul>
<button onclick="openModal('exhibitor')" class="w-full bg-secondary hover:bg-green-600 text-white font-bold py-4 rounded-xl transition-all shadow-lg">
Request Quote
</button>
</div>
<!-- Island Booth -->
<div class="bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-xl border-2 border-primary">
<div class="text-center mb-8">
<h3 class="text-2xl font-bold text-slate-800 dark:text-white mb-2">Island Booth</h3>
<p class="text-slate-500">For maximum impact</p>
<div class="mt-4">
<span class="text-4xl font-bold text-primary dark:text-accent">36+ sqm</span>
</div>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-primary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">Raw space (open on all sides)</span>
</li>
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-primary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">Custom booth design allowed</span>
</li>
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-primary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">Premium power allocation</span>
</li>
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-primary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">Priority placement</span>
</li>
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-primary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">8+ exhibitor badges</span>
</li>
<li class="flex items-center space-x-3">
<span class="material-icons-outlined text-primary">check_circle</span>
<span class="text-slate-600 dark:text-slate-400">Speaking slot opportunity</span>
</li>
</ul>
<button onclick="openModal('exhibitor')" class="w-full bg-primary hover:bg-blue-700 text-white font-bold py-4 rounded-xl transition-all shadow-lg">
Request Quote
</button>
</div>
</div>
<div class="text-center">
<p class="text-slate-600 dark:text-slate-400 mb-4">Need a custom solution? Contact our sales team for tailored packages.</p>
<a href="#contact" class="inline-flex items-center space-x-2 text-secondary font-bold hover:underline">
<span>Contact Sales Team</span>
<span class="material-icons-outlined">arrow_forward</span>
</a>
</div>
</div>
</section>
<!-- Visa Support Section -->
<section class="py-24 bg-background-light dark:bg-background-dark" id="visa-support">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div>
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>Travel Assistance</span>
</span>
<h2 class="mt-4 font-display text-3xl md:text-4xl font-bold text-primary dark:text-white leading-tight">
Visa Support Services
</h2>
<p class="mt-6 text-lg text-slate-600 dark:text-slate-400 leading-relaxed">
We understand that traveling to Nigeria may require visa arrangements. Our dedicated team is here to assist international exhibitors and visitors with their visa application process.
</p>
<div class="mt-8 space-y-6">
<div class="flex items-start space-x-4 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-md">
<div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-green-500">description</span>
</div>
<div>
<h4 class="font-bold text-slate-800 dark:text-white">Invitation Letters</h4>
<p class="text-sm text-slate-500">Official invitation letters for visa application upon confirmed registration.</p>
</div>
</div>
<div class="flex items-start space-x-4 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-md">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-blue-500">support_agent</span>
</div>
<div>
<h4 class="font-bold text-slate-800 dark:text-white">Visa Guidance</h4>
<p class="text-sm text-slate-500">Step-by-step guidance on Nigeria visa requirements and application process.</p>
</div>
</div>
<div class="flex items-start space-x-4 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-md">
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-purple-500">hotel</span>
</div>
<div>
<h4 class="font-bold text-slate-800 dark:text-white">Hotel Recommendations</h4>
<p class="text-sm text-slate-500">Partner hotels near the venue with special rates for NCCAL EXPO participants.</p>
</div>
</div>
<div class="flex items-start space-x-4 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-md">
<div class="w-12 h-12 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-amber-500">airport_shuttle</span>
</div>
<div>
<h4 class="font-bold text-slate-800 dark:text-white">Airport Transfers</h4>
<p class="text-sm text-slate-500">Arrange pickup from Lagos or Ibadan airports to your hotel and venue.</p>
</div>
</div>
</div>
</div>
<div class="relative">
<div class="absolute -inset-4 bg-gradient-to-r from-secondary/20 to-primary/20 rounded-3xl blur-2xl"></div>
<div class="relative bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-2xl">
<h3 class="text-2xl font-bold text-primary dark:text-white mb-6">Request Visa Support</h3>
<form action="https://formsubmit.co/info.cemsnigeria@gmail.com" method="POST" class="space-y-5">
<input type="hidden" name="_subject" value="Visa Support Request - NCCAL EXPO 2026">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_template" value="table">
<input type="hidden" name="_next" value="https://nccalexpo.nipoliexpo.com/">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">First Name *</label>
<input type="text" name="first_name" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Last Name *</label>
<input type="text" name="last_name" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary">
</div>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Email *</label>
<input type="email" name="email" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Country of Residence *</label>
<input type="text" name="country" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Passport Number *</label>
<input type="text" name="passport_number" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Participation Type *</label>
<select name="participation_type" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary">
<option>Exhibitor</option>
<option>Visitor</option>
<option>Speaker</option>
<option>Sponsor</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Additional Notes</label>
<textarea rows="3" name="notes" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary resize-none" placeholder="Any specific requirements..."></textarea>
</div>
<button type="submit" class="w-full bg-gradient-to-r from-secondary to-green-600 hover:from-green-600 hover:to-secondary text-white font-bold py-4 rounded-xl transition-all shadow-lg">
Submit Request
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Useful Information Section -->
<section class="py-24 bg-gradient-to-b from-slate-50 to-white dark:from-slate-900/50 dark:to-background-dark" id="useful-info">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>Exhibitor Resources</span>
<span class="w-8 h-0.5 bg-secondary"></span>
</span>
<h2 class="mt-4 font-display text-3xl md:text-4xl font-bold text-primary dark:text-white">Useful Information</h2>
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">Everything you need to know for a successful exhibition experience at NCCAL EXPO 2026</p>
</div>
<!-- Important Dates -->
<div class="mb-16">
<h3 class="text-2xl font-bold text-primary dark:text-white mb-8 flex items-center">
<span class="material-icons-outlined text-secondary mr-3">event</span>
Important Dates & Deadlines
</h3>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg border-l-4 border-red-500">
<p class="text-sm text-red-500 font-bold uppercase mb-2">Early Bird Deadline</p>
<p class="text-xl font-bold text-slate-800 dark:text-white">January 31, 2026</p>
<p class="text-sm text-slate-500 mt-2">Save 20% on booth rates</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg border-l-4 border-amber-500">
<p class="text-sm text-amber-500 font-bold uppercase mb-2">Standard Booking</p>
<p class="text-xl font-bold text-slate-800 dark:text-white">March 15, 2026</p>
<p class="text-sm text-slate-500 mt-2">Regular booth rates apply</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg border-l-4 border-blue-500">
<p class="text-sm text-blue-500 font-bold uppercase mb-2">Booth Setup</p>
<p class="text-xl font-bold text-slate-800 dark:text-white">April 27, 2026</p>
<p class="text-sm text-slate-500 mt-2">8:00 AM - 6:00 PM</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg border-l-4 border-green-500">
<p class="text-sm text-green-500 font-bold uppercase mb-2">Exhibition Days</p>
<p class="text-xl font-bold text-slate-800 dark:text-white">April 28-30, 2026</p>
<p class="text-sm text-slate-500 mt-2">9:00 AM - 6:00 PM daily</p>
</div>
</div>
</div>
<!-- Venue & Travel Information -->
<div class="grid lg:grid-cols-2 gap-12 mb-16">
<div class="bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-xl">
<h3 class="text-xl font-bold text-primary dark:text-white mb-6 flex items-center">
<span class="material-icons-outlined text-secondary mr-3">location_on</span>
Venue Information
</h3>
<div class="space-y-4">
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-primary text-sm">place</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">NIPOLI Village, NCRI</p>
<p class="text-slate-500 text-sm">National Cereals Research Institute, Ibadan, Oyo State, Nigeria</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-green-500 text-sm">square_foot</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">Exhibition Space</p>
<p class="text-slate-500 text-sm">5,000+ sqm of indoor & outdoor exhibition area</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-blue-500 text-sm">local_parking</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">Parking</p>
<p class="text-slate-500 text-sm">Ample parking space available for exhibitors and visitors</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-purple-500 text-sm">wifi</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">Facilities</p>
<p class="text-slate-500 text-sm">WiFi, power supply, restrooms, and refreshment areas</p>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-xl">
<h3 class="text-xl font-bold text-primary dark:text-white mb-6 flex items-center">
<span class="material-icons-outlined text-secondary mr-3">flight</span>
Travel & Accommodation
</h3>
<div class="space-y-4">
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-red-500 text-sm">flight_land</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">Nearest Airports</p>
<p class="text-slate-500 text-sm">Ibadan Airport (20 mins) | Lagos Airport (2 hours)</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-amber-500 text-sm">hotel</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">Partner Hotels</p>
<p class="text-slate-500 text-sm">Special rates at Premier Hotel, Kakanfo Inn & more</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-cyan-100 dark:bg-cyan-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-cyan-500 text-sm">directions_car</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">Ground Transportation</p>
<p class="text-slate-500 text-sm">Shuttle services, car rentals & taxi services available</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-teal-100 dark:bg-teal-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-teal-500 text-sm">support_agent</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">Travel Desk</p>
<p class="text-slate-500 text-sm">Contact us for personalized travel assistance</p>
</div>
</div>
</div>
</div>
</div>
<!-- Booth Setup & Services -->
<div class="mb-16">
<h3 class="text-2xl font-bold text-primary dark:text-white mb-8 flex items-center">
<span class="material-icons-outlined text-secondary mr-3">build</span>
Booth Setup & On-site Services
</h3>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
<div class="w-14 h-14 bg-gradient-to-br from-blue-100 to-blue-50 dark:from-blue-900/50 dark:to-blue-900/30 rounded-xl flex items-center justify-center mb-4">
<span class="material-icons-outlined text-2xl text-primary">construction</span>
</div>
<h4 class="font-bold text-slate-800 dark:text-white mb-2">Booth Construction</h4>
<p class="text-slate-500 text-sm">Shell scheme booths provided. Custom builds must be approved by organizers.</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
<div class="w-14 h-14 bg-gradient-to-br from-amber-100 to-amber-50 dark:from-amber-900/50 dark:to-amber-900/30 rounded-xl flex items-center justify-center mb-4">
<span class="material-icons-outlined text-2xl text-amber-500">electrical_services</span>
</div>
<h4 class="font-bold text-slate-800 dark:text-white mb-2">Power & Utilities</h4>
<p class="text-slate-500 text-sm">Standard power included. Additional electrical requirements available on request.</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
<div class="w-14 h-14 bg-gradient-to-br from-green-100 to-green-50 dark:from-green-900/50 dark:to-green-900/30 rounded-xl flex items-center justify-center mb-4">
<span class="material-icons-outlined text-2xl text-green-500">inventory</span>
</div>
<h4 class="font-bold text-slate-800 dark:text-white mb-2">Furniture & Equipment</h4>
<p class="text-slate-500 text-sm">Tables, chairs, display units & AV equipment available for rent.</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
<div class="w-14 h-14 bg-gradient-to-br from-purple-100 to-purple-50 dark:from-purple-900/50 dark:to-purple-900/30 rounded-xl flex items-center justify-center mb-4">
<span class="material-icons-outlined text-2xl text-purple-500">local_shipping</span>
</div>
<h4 class="font-bold text-slate-800 dark:text-white mb-2">Shipping & Logistics</h4>
<p class="text-slate-500 text-sm">Official freight forwarder for customs clearance and delivery to booth.</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
<div class="w-14 h-14 bg-gradient-to-br from-red-100 to-red-50 dark:from-red-900/50 dark:to-red-900/30 rounded-xl flex items-center justify-center mb-4">
<span class="material-icons-outlined text-2xl text-red-500">security</span>
</div>
<h4 class="font-bold text-slate-800 dark:text-white mb-2">Security & Insurance</h4>
<p class="text-slate-500 text-sm">24/7 security provided. Exhibitors advised to insure their goods.</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
<div class="w-14 h-14 bg-gradient-to-br from-cyan-100 to-cyan-50 dark:from-cyan-900/50 dark:to-cyan-900/30 rounded-xl flex items-center justify-center mb-4">
<span class="material-icons-outlined text-2xl text-cyan-500">restaurant</span>
</div>
<h4 class="font-bold text-slate-800 dark:text-white mb-2">Catering Services</h4>
<p class="text-slate-500 text-sm">On-site restaurants and catering for booth hospitality available.</p>
</div>
</div>
</div>
<!-- Rules & Guidelines -->
<div class="mb-16">
<h3 class="text-2xl font-bold text-primary dark:text-white mb-8 flex items-center">
<span class="material-icons-outlined text-secondary mr-3">gavel</span>
Rules & Guidelines
</h3>
<div class="bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-xl">
<div class="grid md:grid-cols-2 gap-8">
<div>
<h4 class="font-bold text-slate-800 dark:text-white mb-4 flex items-center">
<span class="material-icons-outlined text-green-500 mr-2">check_circle</span>
Exhibitor Responsibilities
</h4>
<ul class="space-y-3 text-slate-600 dark:text-slate-400">
<li class="flex items-start space-x-2">
<span class="material-icons-outlined text-secondary text-sm mt-1">arrow_right</span>
<span>Staff booth during all exhibition hours (9 AM - 6 PM)</span>
</li>
<li class="flex items-start space-x-2">
<span class="material-icons-outlined text-secondary text-sm mt-1">arrow_right</span>
<span>Maintain professional appearance and conduct</span>
</li>
<li class="flex items-start space-x-2">
<span class="material-icons-outlined text-secondary text-sm mt-1">arrow_right</span>
<span>Keep booth area clean and organized</span>
</li>
<li class="flex items-start space-x-2">
<span class="material-icons-outlined text-secondary text-sm mt-1">arrow_right</span>
<span>Comply with fire and safety regulations</span>
</li>
<li class="flex items-start space-x-2">
<span class="material-icons-outlined text-secondary text-sm mt-1">arrow_right</span>
<span>Remove all materials by April 30, 8:00 PM</span>
</li>
</ul>
</div>
<div>
<h4 class="font-bold text-slate-800 dark:text-white mb-4 flex items-center">
<span class="material-icons-outlined text-red-500 mr-2">cancel</span>
Prohibited Items & Activities
</h4>
<ul class="space-y-3 text-slate-600 dark:text-slate-400">
<li class="flex items-start space-x-2">
<span class="material-icons-outlined text-red-500 text-sm mt-1">close</span>
<span>No audio/visual that disturbs neighboring booths</span>
</li>
<li class="flex items-start space-x-2">
<span class="material-icons-outlined text-red-500 text-sm mt-1">close</span>
<span>No blocking aisles or common areas</span>
</li>
<li class="flex items-start space-x-2">
<span class="material-icons-outlined text-red-500 text-sm mt-1">close</span>
<span>No subletting of booth space</span>
</li>
<li class="flex items-start space-x-2">
<span class="material-icons-outlined text-red-500 text-sm mt-1">close</span>
<span>No hazardous materials without approval</span>
</li>
<li class="flex items-start space-x-2">
<span class="material-icons-outlined text-red-500 text-sm mt-1">close</span>
<span>No dismantling before official closing time</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- FAQs -->
<div>
<h3 class="text-2xl font-bold text-primary dark:text-white mb-8 flex items-center">
<span class="material-icons-outlined text-secondary mr-3">help</span>
Frequently Asked Questions
</h3>
<div class="space-y-4">
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg overflow-hidden">
<button onclick="toggleFaq(1)" class="w-full px-6 py-5 flex items-center justify-between text-left hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
<span class="font-bold text-slate-800 dark:text-white">What is included in the booth package?</span>
<span class="material-icons-outlined text-secondary transition-transform" id="faq-icon-1">expand_more</span>
</button>
<div id="faq-1" class="hidden px-6 pb-5">
<p class="text-slate-600 dark:text-slate-400">Standard shell scheme includes walls, fascia with company name, 1 table, 2 chairs, power socket, and spotlights. Premium and Island booths include additional features. Check the Reserve A Space section for full details.</p>
</div>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg overflow-hidden">
<button onclick="toggleFaq(2)" class="w-full px-6 py-5 flex items-center justify-between text-left hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
<span class="font-bold text-slate-800 dark:text-white">Can I bring my own booth design?</span>
<span class="material-icons-outlined text-secondary transition-transform" id="faq-icon-2">expand_more</span>
</button>
<div id="faq-2" class="hidden px-6 pb-5">
<p class="text-slate-600 dark:text-slate-400">Yes, custom booth designs are allowed for Island Booth packages. All designs must be submitted for approval at least 30 days before the event. Height restrictions and safety requirements apply.</p>
</div>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg overflow-hidden">
<button onclick="toggleFaq(3)" class="w-full px-6 py-5 flex items-center justify-between text-left hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
<span class="font-bold text-slate-800 dark:text-white">How do I ship my exhibition materials?</span>
<span class="material-icons-outlined text-secondary transition-transform" id="faq-icon-3">expand_more</span>
</button>
<div id="faq-3" class="hidden px-6 pb-5">
<p class="text-slate-600 dark:text-slate-400">We have an official freight forwarder who can handle customs clearance and delivery to your booth. Contact our logistics team at logistics@cems-ng.com for shipping instructions and documentation requirements.</p>
</div>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg overflow-hidden">
<button onclick="toggleFaq(4)" class="w-full px-6 py-5 flex items-center justify-between text-left hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
<span class="font-bold text-slate-800 dark:text-white">What is the cancellation policy?</span>
<span class="material-icons-outlined text-secondary transition-transform" id="faq-icon-4">expand_more</span>
</button>
<div id="faq-4" class="hidden px-6 pb-5">
<p class="text-slate-600 dark:text-slate-400">Cancellations made 90+ days before the event receive 75% refund. Cancellations 60-89 days receive 50% refund. Cancellations less than 60 days are non-refundable. Booth space may be transferred to another company with organizer approval.</p>
</div>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg overflow-hidden">
<button onclick="toggleFaq(5)" class="w-full px-6 py-5 flex items-center justify-between text-left hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
<span class="font-bold text-slate-800 dark:text-white">How many exhibitor badges do I receive?</span>
<span class="material-icons-outlined text-secondary transition-transform" id="faq-icon-5">expand_more</span>
</button>
<div id="faq-5" class="hidden px-6 pb-5">
<p class="text-slate-600 dark:text-slate-400">Standard Booth: 2 badges, Premium Booth: 4 badges, Island Booth: 8 badges. Additional badges can be purchased. All badges provide full access to exhibition areas and networking events.</p>
</div>
</div>
</div>
</div>
<!-- Download Resources -->
<div class="mt-16 bg-gradient-to-r from-primary to-blue-700 rounded-3xl p-8 md:p-12">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div>
<h3 class="text-2xl font-bold text-white mb-2">Download Exhibitor Resources</h3>
<p class="text-blue-100">Get all the information you need to plan your participation</p>
</div>
<div class="flex flex-wrap gap-4">
<a href="https://nccalexpo.nipoliexpo.com/wp-content/uploads/2026/01/NCCAL-EXPO-2026.pdf" target="_blank" class="bg-white text-primary px-6 py-3 rounded-xl font-bold flex items-center space-x-2 hover:bg-blue-50 transition-colors">
<span class="material-icons-outlined">download</span>
<span>Exhibitor Brochure</span>
</a>
<a href="#contact" class="bg-secondary text-white px-6 py-3 rounded-xl font-bold flex items-center space-x-2 hover:bg-green-600 transition-colors">
<span class="material-icons-outlined">email</span>
<span>Request Manual</span>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Why Visit Section -->
<section class="py-24 bg-primary relative overflow-hidden" id="why-visit">
<div class="absolute inset-0 opacity-10">
<div class="absolute top-0 left-0 w-full h-full" style="background-image: url('data:image/svg+xml,<svg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><g fill=\"%23ffffff\" fill-opacity=\"0.4\"><circle cx=\"30\" cy=\"30\" r=\"2\"/></g></g></svg>')"></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center max-w-3xl mx-auto mb-16">
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>For Visitors</span>
<span class="w-8 h-0.5 bg-secondary"></span>
</span>
<h2 class="mt-4 font-display text-3xl md:text-4xl lg:text-5xl font-bold text-white">Why Visit NCCAL EXPO 2026?</h2>
<p class="mt-4 text-lg text-blue-100">Discover the benefits of attending West Africa's premier cold chain exhibition</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-colors">
<div class="w-16 h-16 bg-secondary/20 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-secondary">explore</span>
</div>
<h3 class="text-xl font-bold text-white mb-3">Discover Latest Technologies</h3>
<p class="text-blue-100">Explore cutting-edge cold chain solutions, from solar-powered storage to IoT monitoring systems, all under one roof.</p>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-colors">
<div class="w-16 h-16 bg-secondary/20 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-secondary">groups</span>
</div>
<h3 class="text-xl font-bold text-white mb-3">Network with Industry Leaders</h3>
<p class="text-blue-100">Connect with 50+ exhibitors, investors, government officials, and fellow professionals from 25+ countries.</p>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-colors">
<div class="w-16 h-16 bg-secondary/20 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-secondary">school</span>
</div>
<h3 class="text-xl font-bold text-white mb-3">Learn from Experts</h3>
<p class="text-blue-100">Attend 10+ conference sessions, workshops, and panel discussions led by industry experts and thought leaders.</p>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-colors">
<div class="w-16 h-16 bg-secondary/20 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-secondary">handshake</span>
</div>
<h3 class="text-xl font-bold text-white mb-3">B2B Matchmaking</h3>
<p class="text-blue-100">Schedule one-on-one meetings with potential suppliers, partners, and investors through our matchmaking platform.</p>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-colors">
<div class="w-16 h-16 bg-secondary/20 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-secondary">savings</span>
</div>
<h3 class="text-xl font-bold text-white mb-3">Exclusive Deals</h3>
<p class="text-blue-100">Access show-only discounts, special financing offers, and early-bird pricing from exhibitors.</p>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-colors">
<div class="w-16 h-16 bg-secondary/20 rounded-2xl flex items-center justify-center mb-6">
<span class="material-icons-outlined text-3xl text-secondary">workspace_premium</span>
</div>
<h3 class="text-xl font-bold text-white mb-3">CPD & Certificates</h3>
<p class="text-blue-100">Earn continuing professional development points and receive certificates of participation.</p>
</div>
</div>
<div class="text-center">
<button onclick="openModal('visitor')" class="bg-secondary hover:bg-green-600 text-white px-12 py-5 rounded-xl font-bold text-xl shadow-2xl transition-all hover:-translate-y-1 inline-flex items-center space-x-3">
<span class="material-icons-outlined text-2xl">confirmation_number</span>
<span>Register to Visit</span>
</button>
</div>
</div>
</section>
<!-- Visitor Profile Section -->
<section class="py-24 bg-background-light dark:bg-background-dark" id="visitor-profile">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>Who Should Visit</span>
<span class="w-8 h-0.5 bg-secondary"></span>
</span>
<h2 class="mt-4 font-display text-3xl md:text-4xl font-bold text-primary dark:text-white">Visitor Profile</h2>
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">NCCAL EXPO attracts professionals from across the agricultural and cold chain value chain</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700 text-center">
<div class="w-20 h-20 bg-gradient-to-br from-green-100 to-green-50 dark:from-green-900/50 dark:to-green-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
<span class="material-icons-outlined text-4xl text-green-500">agriculture</span>
</div>
<h3 class="text-lg font-bold text-slate-800 dark:text-white mb-2">Farmers & Cooperatives</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Find storage solutions to reduce post-harvest losses</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700 text-center">
<div class="w-20 h-20 bg-gradient-to-br from-blue-100 to-blue-50 dark:from-blue-900/50 dark:to-blue-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
<span class="material-icons-outlined text-4xl text-blue-500">local_shipping</span>
</div>
<h3 class="text-lg font-bold text-slate-800 dark:text-white mb-2">Logistics Companies</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Discover reefer trucks and fleet solutions</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700 text-center">
<div class="w-20 h-20 bg-gradient-to-br from-purple-100 to-purple-50 dark:from-purple-900/50 dark:to-purple-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
<span class="material-icons-outlined text-4xl text-purple-500">store</span>
</div>
<h3 class="text-lg font-bold text-slate-800 dark:text-white mb-2">Retailers & Supermarkets</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Source refrigeration and display equipment</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700 text-center">
<div class="w-20 h-20 bg-gradient-to-br from-amber-100 to-amber-50 dark:from-amber-900/50 dark:to-amber-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
<span class="material-icons-outlined text-4xl text-amber-500">restaurant</span>
</div>
<h3 class="text-lg font-bold text-slate-800 dark:text-white mb-2">Food Processors</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Find processing and cold storage equipment</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700 text-center">
<div class="w-20 h-20 bg-gradient-to-br from-red-100 to-red-50 dark:from-red-900/50 dark:to-red-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
<span class="material-icons-outlined text-4xl text-red-500">biotech</span>
</div>
<h3 class="text-lg font-bold text-slate-800 dark:text-white mb-2">Pharma & Healthcare</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Vaccine storage and medical cold chain</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700 text-center">
<div class="w-20 h-20 bg-gradient-to-br from-cyan-100 to-cyan-50 dark:from-cyan-900/50 dark:to-cyan-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
<span class="material-icons-outlined text-4xl text-cyan-500">account_balance</span>
</div>
<h3 class="text-lg font-bold text-slate-800 dark:text-white mb-2">Investors & Banks</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Explore investment opportunities</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700 text-center">
<div class="w-20 h-20 bg-gradient-to-br from-teal-100 to-teal-50 dark:from-teal-900/50 dark:to-teal-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
<span class="material-icons-outlined text-4xl text-teal-500">policy</span>
</div>
<h3 class="text-lg font-bold text-slate-800 dark:text-white mb-2">Government Officials</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Policy makers and regulatory bodies</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all card-hover border border-slate-100 dark:border-slate-700 text-center">
<div class="w-20 h-20 bg-gradient-to-br from-indigo-100 to-indigo-50 dark:from-indigo-900/50 dark:to-indigo-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
<span class="material-icons-outlined text-4xl text-indigo-500">science</span>
</div>
<h3 class="text-lg font-bold text-slate-800 dark:text-white mb-2">Researchers & Academia</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Universities and research institutes</p>
</div>
</div>
<!-- Visitor Statistics -->
<div class="bg-gradient-to-r from-primary to-blue-700 rounded-3xl p-8 md:p-12">
<div class="grid md:grid-cols-4 gap-8 text-center">
<div>
<p class="text-4xl md:text-5xl font-bold text-white mb-2">3,000+</p>
<p class="text-blue-100">Expected Visitors</p>
</div>
<div>
<p class="text-4xl md:text-5xl font-bold text-white mb-2">25+</p>
<p class="text-blue-100">Countries</p>
</div>
<div>
<p class="text-4xl md:text-5xl font-bold text-white mb-2">70%</p>
<p class="text-blue-100">Decision Makers</p>
</div>
<div>
<p class="text-4xl md:text-5xl font-bold text-white mb-2">85%</p>
<p class="text-blue-100">Intend to Buy</p>
</div>
</div>
</div>
</div>
</section>
<!-- Visitor Registration Section -->
<section class="py-24 bg-gradient-to-br from-secondary/5 via-white to-primary/5 dark:from-secondary/10 dark:via-background-dark dark:to-primary/10" id="visitor-registration">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div>
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>Get Your Pass</span>
</span>
<h2 class="mt-4 font-display text-3xl md:text-4xl lg:text-5xl font-bold text-primary dark:text-white leading-tight">
Visitor Registration
</h2>
<p class="mt-6 text-lg text-slate-600 dark:text-slate-400 leading-relaxed">
Choose the pass that best suits your needs and register today to secure your spot at NCCAL EXPO 2026.
</p>
<div class="mt-8 space-y-4">
<div class="flex items-center space-x-4 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-md">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-green-500">check</span>
</div>
<span class="text-slate-700 dark:text-slate-300">Early bird registration now open</span>
</div>
<div class="flex items-center space-x-4 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-md">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-green-500">check</span>
</div>
<span class="text-slate-700 dark:text-slate-300">Instant confirmation via email</span>
</div>
<div class="flex items-center space-x-4 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-md">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-green-500">check</span>
</div>
<span class="text-slate-700 dark:text-slate-300">Access to B2B matchmaking platform</span>
</div>
<div class="flex items-center space-x-4 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-md">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-green-500">check</span>
</div>
<span class="text-slate-700 dark:text-slate-300">Digital badge for contactless entry</span>
</div>
</div>
</div>
<div class="relative">
<div class="absolute -inset-4 bg-gradient-to-r from-secondary/30 to-primary/30 rounded-3xl blur-3xl"></div>
<div class="relative bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-2xl">
<h3 class="text-2xl font-bold text-primary dark:text-white mb-6">Visitor Pass Options</h3>
<div class="space-y-4">
<div class="border-2 border-slate-200 dark:border-slate-700 rounded-2xl p-6 hover:border-secondary transition-colors cursor-pointer" onclick="openModal('visitor')">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-slate-800 dark:text-white">Standard Pass</h4>
<p class="text-sm text-slate-500">Exhibition access only</p>
</div>
<span class="px-3 py-1 bg-slate-100 dark:bg-slate-700 rounded-full text-sm font-medium text-slate-600 dark:text-slate-300">Free</span>
</div>
<ul class="mt-4 space-y-2 text-sm text-slate-600 dark:text-slate-400">
<li class="flex items-center space-x-2">
<span class="material-icons-outlined text-secondary text-sm">check</span>
<span>Exhibition hall access (all 3 days)</span>
</li>
<li class="flex items-center space-x-2">
<span class="material-icons-outlined text-secondary text-sm">check</span>
<span>Product demonstrations</span>
</li>
<li class="flex items-center space-x-2">
<span class="material-icons-outlined text-secondary text-sm">check</span>
<span>Event catalog</span>
</li>
</ul>
</div>
<div class="border-2 border-secondary rounded-2xl p-6 bg-green-50 dark:bg-green-900/20 cursor-pointer relative" onclick="openModal('visitor')">
<div class="absolute -top-3 right-4 bg-secondary text-white text-xs font-bold px-3 py-1 rounded-full">RECOMMENDED</div>
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-slate-800 dark:text-white">Conference Pass</h4>
<p class="text-sm text-slate-500">Full event access</p>
</div>
<span class="px-3 py-1 bg-secondary/20 rounded-full text-sm font-medium text-secondary">Premium</span>
</div>
<ul class="mt-4 space-y-2 text-sm text-slate-600 dark:text-slate-400">
<li class="flex items-center space-x-2">
<span class="material-icons-outlined text-secondary text-sm">check</span>
<span>All Standard Pass benefits</span>
</li>
<li class="flex items-center space-x-2">
<span class="material-icons-outlined text-secondary text-sm">check</span>
<span>Conference sessions & workshops</span>
</li>
<li class="flex items-center space-x-2">
<span class="material-icons-outlined text-secondary text-sm">check</span>
<span>Networking lunch (all days)</span>
</li>
<li class="flex items-center space-x-2">
<span class="material-icons-outlined text-secondary text-sm">check</span>
<span>B2B matchmaking platform</span>
</li>
</ul>
</div>
<div class="border-2 border-primary rounded-2xl p-6 bg-blue-50 dark:bg-blue-900/20 cursor-pointer" onclick="openModal('visitor')">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-slate-800 dark:text-white">VIP Pass</h4>
<p class="text-sm text-slate-500">Executive experience</p>
</div>
<span class="px-3 py-1 bg-primary/20 rounded-full text-sm font-medium text-primary dark:text-accent">Executive</span>
</div>
<ul class="mt-4 space-y-2 text-sm text-slate-600 dark:text-slate-400">
<li class="flex items-center space-x-2">
<span class="material-icons-outlined text-primary text-sm">check</span>
<span>All Conference Pass benefits</span>
</li>
<li class="flex items-center space-x-2">
<span class="material-icons-outlined text-primary text-sm">check</span>
<span>VIP lounge access</span>
</li>
<li class="flex items-center space-x-2">
<span class="material-icons-outlined text-primary text-sm">check</span>
<span>Gala dinner invitation</span>
</li>
<li class="flex items-center space-x-2">
<span class="material-icons-outlined text-primary text-sm">check</span>
<span>Executive roundtables</span>
</li>
</ul>
</div>
</div>
<button onclick="openModal('visitor')" class="w-full mt-6 bg-gradient-to-r from-secondary to-green-600 hover:from-green-600 hover:to-secondary text-white font-bold py-4 rounded-xl transition-all shadow-lg">
Register Now
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Useful For Visiting Section -->
<section class="py-24 bg-background-light dark:bg-background-dark" id="useful-for-visiting">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>Visitor Resources</span>
<span class="w-8 h-0.5 bg-secondary"></span>
</span>
<h2 class="mt-4 font-display text-3xl md:text-4xl font-bold text-primary dark:text-white">Useful Information for Visitors</h2>
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">Everything you need to plan your visit to NCCAL EXPO 2026</p>
</div>
<!-- Event Details -->
<div class="grid lg:grid-cols-3 gap-8 mb-16">
<div class="bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-xl">
<h3 class="text-xl font-bold text-primary dark:text-white mb-6 flex items-center">
<span class="material-icons-outlined text-secondary mr-3">event</span>
Event Details
</h3>
<div class="space-y-4">
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-primary text-sm">calendar_today</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">Dates</p>
<p class="text-slate-500 text-sm">April 28-30, 2026</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-green-500 text-sm">schedule</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">Opening Hours</p>
<p class="text-slate-500 text-sm">9:00 AM - 6:00 PM daily</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-blue-500 text-sm">location_on</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">Venue</p>
<p class="text-slate-500 text-sm">NIPOLI Village, NCRI, Ibadan</p>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-xl">
<h3 class="text-xl font-bold text-primary dark:text-white mb-6 flex items-center">
<span class="material-icons-outlined text-secondary mr-3">directions</span>
Getting There
</h3>
<div class="space-y-4">
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-red-500 text-sm">flight</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">By Air</p>
<p class="text-slate-500 text-sm">Fly to Ibadan or Lagos Airport</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-amber-500 text-sm">directions_car</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">By Road</p>
<p class="text-slate-500 text-sm">Located on Lagos-Ibadan Expressway</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-purple-500 text-sm">local_parking</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">Parking</p>
<p class="text-slate-500 text-sm">Free parking available on-site</p>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-xl">
<h3 class="text-xl font-bold text-primary dark:text-white mb-6 flex items-center">
<span class="material-icons-outlined text-secondary mr-3">hotel</span>
Accommodation
</h3>
<div class="space-y-4">
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-cyan-100 dark:bg-cyan-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-cyan-500 text-sm">star</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">Partner Hotels</p>
<p class="text-slate-500 text-sm">Special rates for attendees</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-teal-100 dark:bg-teal-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-teal-500 text-sm">airport_shuttle</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">Shuttle Service</p>
<p class="text-slate-500 text-sm">Free shuttle from partner hotels</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-indigo-500 text-sm">support_agent</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">Travel Desk</p>
<p class="text-slate-500 text-sm">Contact us for assistance</p>
</div>
</div>
</div>
</div>
</div>
<!-- What to Expect -->
<div class="mb-16">
<h3 class="text-2xl font-bold text-primary dark:text-white mb-8 flex items-center">
<span class="material-icons-outlined text-secondary mr-3">checklist</span>
What to Expect at NCCAL EXPO
</h3>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg text-center">
<div class="w-14 h-14 bg-gradient-to-br from-blue-100 to-blue-50 dark:from-blue-900/50 dark:to-blue-900/30 rounded-xl flex items-center justify-center mx-auto mb-4">
<span class="material-icons-outlined text-2xl text-primary">storefront</span>
</div>
<h4 class="font-bold text-slate-800 dark:text-white mb-2">Exhibition Hall</h4>
<p class="text-slate-500 text-sm">50+ exhibitors showcasing the latest cold chain solutions</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg text-center">
<div class="w-14 h-14 bg-gradient-to-br from-green-100 to-green-50 dark:from-green-900/50 dark:to-green-900/30 rounded-xl flex items-center justify-center mx-auto mb-4">
<span class="material-icons-outlined text-2xl text-green-500">mic</span>
</div>
<h4 class="font-bold text-slate-800 dark:text-white mb-2">Conference Sessions</h4>
<p class="text-slate-500 text-sm">Keynotes, panels, and workshops by industry experts</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg text-center">
<div class="w-14 h-14 bg-gradient-to-br from-amber-100 to-amber-50 dark:from-amber-900/50 dark:to-amber-900/30 rounded-xl flex items-center justify-center mx-auto mb-4">
<span class="material-icons-outlined text-2xl text-amber-500">handshake</span>
</div>
<h4 class="font-bold text-slate-800 dark:text-white mb-2">Networking Events</h4>
<p class="text-slate-500 text-sm">B2B matchmaking, networking lunches, and gala dinner</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg text-center">
<div class="w-14 h-14 bg-gradient-to-br from-purple-100 to-purple-50 dark:from-purple-900/50 dark:to-purple-900/30 rounded-xl flex items-center justify-center mx-auto mb-4">
<span class="material-icons-outlined text-2xl text-purple-500">smart_display</span>
</div>
<h4 class="font-bold text-slate-800 dark:text-white mb-2">Live Demos</h4>
<p class="text-slate-500 text-sm">See cold chain technologies in action</p>
</div>
</div>
</div>
<!-- Tips for Visitors -->
<div class="bg-gradient-to-r from-secondary/10 to-primary/10 dark:from-secondary/20 dark:to-primary/20 rounded-3xl p-8 md:p-12">
<h3 class="text-2xl font-bold text-primary dark:text-white mb-8 flex items-center">
<span class="material-icons-outlined text-secondary mr-3">tips_and_updates</span>
Tips for a Successful Visit
</h3>
<div class="grid md:grid-cols-2 gap-6">
<div class="flex items-start space-x-4">
<div class="w-8 h-8 bg-secondary rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold">1</div>
<div>
<h4 class="font-bold text-slate-800 dark:text-white">Pre-register Online</h4>
<p class="text-slate-600 dark:text-slate-400 text-sm">Avoid queues by registering in advance and printing your badge</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-8 h-8 bg-secondary rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold">2</div>
<div>
<h4 class="font-bold text-slate-800 dark:text-white">Plan Your Schedule</h4>
<p class="text-slate-600 dark:text-slate-400 text-sm">Review the conference program and select sessions in advance</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-8 h-8 bg-secondary rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold">3</div>
<div>
<h4 class="font-bold text-slate-800 dark:text-white">Use B2B Matchmaking</h4>
<p class="text-slate-600 dark:text-slate-400 text-sm">Schedule meetings with exhibitors before the event</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-8 h-8 bg-secondary rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold">4</div>
<div>
<h4 class="font-bold text-slate-800 dark:text-white">Bring Business Cards</h4>
<p class="text-slate-600 dark:text-slate-400 text-sm">Exchange contacts with exhibitors and fellow visitors</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-8 h-8 bg-secondary rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold">5</div>
<div>
<h4 class="font-bold text-slate-800 dark:text-white">Wear Comfortable Shoes</h4>
<p class="text-slate-600 dark:text-slate-400 text-sm">The exhibition hall is large — you'll be walking a lot!</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-8 h-8 bg-secondary rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold">6</div>
<div>
<h4 class="font-bold text-slate-800 dark:text-white">Stay Connected</h4>
<p class="text-slate-600 dark:text-slate-400 text-sm">Follow #NCCALEXPO2026 for live updates and announcements</p>
</div>
</div>
</div>
</div>
<!-- CTA -->
<div class="mt-16 text-center">
<button onclick="openModal('visitor')" class="bg-gradient-to-r from-secondary to-green-600 hover:from-green-600 hover:to-secondary text-white px-12 py-5 rounded-xl font-bold text-xl shadow-2xl transition-all hover:-translate-y-1 inline-flex items-center space-x-3">
<span class="material-icons-outlined text-2xl">confirmation_number</span>
<span>Register as Visitor</span>
</button>
<p class="text-slate-500 dark:text-slate-400 mt-4">Free registration for Standard Pass</p>
</div>
</div>
</section>
<!-- Schedule Section -->
<section class="py-24 bg-gradient-to-b from-slate-50 to-white dark:from-slate-900/50 dark:to-background-dark" id="schedule">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>Event Schedule</span>
<span class="w-8 h-0.5 bg-secondary"></span>
</span>
<h2 class="mt-4 font-display text-3xl md:text-4xl font-bold text-primary dark:text-white">Three Days of Innovation</h2>
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">Packed with keynotes, workshops, and networking opportunities</p>
</div>
<!-- Schedule Tabs -->
<div class="flex justify-center mb-12">
<div class="inline-flex bg-white dark:bg-slate-800 rounded-2xl p-2 shadow-lg flex-wrap justify-center">
<button onclick="showDay(1)" id="day1-btn" class="schedule-tab active px-6 py-3 rounded-xl font-bold transition-all bg-primary text-white">
Day 1 - April 28
</button>
<button onclick="showDay(2)" id="day2-btn" class="schedule-tab px-6 py-3 rounded-xl font-bold transition-all text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700">
Day 2 - April 29
</button>
<button onclick="showDay(3)" id="day3-btn" class="schedule-tab px-6 py-3 rounded-xl font-bold transition-all text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700">
Day 3 - April 30
</button>
</div>
</div>
<!-- Day 1 Schedule -->
<div id="day1" class="schedule-content">
<div class="space-y-6 max-w-4xl mx-auto">
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow flex flex-col md:flex-row md:items-center gap-6">
<div class="md:w-32 flex-shrink-0">
<span class="text-primary dark:text-accent font-bold">08:00 AM</span>
</div>
<div class="flex-grow">
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Registration & Welcome Coffee</h4>
<p class="text-slate-500">Networking opportunity with exhibitors and fellow attendees</p>
</div>
<span class="px-4 py-2 bg-slate-100 dark:bg-slate-700 rounded-full text-sm font-medium text-slate-600 dark:text-slate-300">Hall A</span>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow flex flex-col md:flex-row md:items-center gap-6">
<div class="md:w-32 flex-shrink-0">
<span class="text-primary dark:text-accent font-bold">09:30 AM</span>
</div>
<div class="flex-grow">
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Opening Ceremony & Keynote</h4>
<p class="text-slate-500">"The Future of Food Security in Africa" - Hon. Minister of Agriculture</p>
</div>
<span class="px-4 py-2 bg-primary/10 dark:bg-primary/20 rounded-full text-sm font-medium text-primary dark:text-accent">Main Stage</span>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow flex flex-col md:flex-row md:items-center gap-6">
<div class="md:w-32 flex-shrink-0">
<span class="text-primary dark:text-accent font-bold">11:00 AM</span>
</div>
<div class="flex-grow">
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Panel: Financing the Cold Chain Revolution</h4>
<p class="text-slate-500">Investment opportunities and funding mechanisms for cold chain infrastructure</p>
</div>
<span class="px-4 py-2 bg-green-100 dark:bg-green-900/30 rounded-full text-sm font-medium text-green-600 dark:text-green-400">Conference</span>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow flex flex-col md:flex-row md:items-center gap-6">
<div class="md:w-32 flex-shrink-0">
<span class="text-primary dark:text-accent font-bold">01:00 PM</span>
</div>
<div class="flex-grow">
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Networking Lunch</h4>
<p class="text-slate-500">Connect with industry peers and explore exhibition booths</p>
</div>
<span class="px-4 py-2 bg-amber-100 dark:bg-amber-900/30 rounded-full text-sm font-medium text-amber-600 dark:text-amber-400">Restaurant</span>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow flex flex-col md:flex-row md:items-center gap-6">
<div class="md:w-32 flex-shrink-0">
<span class="text-primary dark:text-accent font-bold">02:30 PM</span>
</div>
<div class="flex-grow">
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Workshop: Solar-Powered Cold Storage Solutions</h4>
<p class="text-slate-500">Hands-on session on implementing off-grid cold storage for rural areas</p>
</div>
<span class="px-4 py-2 bg-purple-100 dark:bg-purple-900/30 rounded-full text-sm font-medium text-purple-600 dark:text-purple-400">Workshop Hall</span>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow flex flex-col md:flex-row md:items-center gap-6">
<div class="md:w-32 flex-shrink-0">
<span class="text-primary dark:text-accent font-bold">05:00 PM</span>
</div>
<div class="flex-grow">
<h4 class="font-bold text-lg text-slate-800 dark:text-white">B2B Matchmaking Sessions</h4>
<p class="text-slate-500">Pre-scheduled meetings between buyers and exhibitors</p>
</div>
<span class="px-4 py-2 bg-blue-100 dark:bg-blue-900/30 rounded-full text-sm font-medium text-blue-600 dark:text-blue-400">Meeting Zone</span>
</div>
</div>
</div>
<!-- Day 2 Schedule -->
<div id="day2" class="schedule-content hidden">
<div class="space-y-6 max-w-4xl mx-auto">
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow flex flex-col md:flex-row md:items-center gap-6">
<div class="md:w-32 flex-shrink-0">
<span class="text-primary dark:text-accent font-bold">09:00 AM</span>
</div>
<div class="flex-grow">
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Keynote: IoT & Digital Transformation</h4>
<p class="text-slate-500">"Smart Cold Chain: From Farm to Fork Visibility"</p>
</div>
<span class="px-4 py-2 bg-primary/10 dark:bg-primary/20 rounded-full text-sm font-medium text-primary dark:text-accent">Main Stage</span>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow flex flex-col md:flex-row md:items-center gap-6">
<div class="md:w-32 flex-shrink-0">
<span class="text-primary dark:text-accent font-bold">10:30 AM</span>
</div>
<div class="flex-grow">
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Live Product Demonstrations</h4>
<p class="text-slate-500">See the latest cold chain technologies in action</p>
</div>
<span class="px-4 py-2 bg-secondary/10 dark:bg-secondary/20 rounded-full text-sm font-medium text-secondary">Demo Zone</span>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow flex flex-col md:flex-row md:items-center gap-6">
<div class="md:w-32 flex-shrink-0">
<span class="text-primary dark:text-accent font-bold">02:00 PM</span>
</div>
<div class="flex-grow">
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Panel: Last-Mile Cold Chain Solutions</h4>
<p class="text-slate-500">Tackling the challenge of delivering fresh produce to consumers</p>
</div>
<span class="px-4 py-2 bg-green-100 dark:bg-green-900/30 rounded-full text-sm font-medium text-green-600 dark:text-green-400">Conference</span>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow flex flex-col md:flex-row md:items-center gap-6">
<div class="md:w-32 flex-shrink-0">
<span class="text-primary dark:text-accent font-bold">07:00 PM</span>
</div>
<div class="flex-grow">
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Gala Dinner & Awards Night</h4>
<p class="text-slate-500">Celebrating excellence in Nigeria's cold chain industry</p>
</div>
<span class="px-4 py-2 bg-amber-100 dark:bg-amber-900/30 rounded-full text-sm font-medium text-amber-600 dark:text-amber-400">Grand Ballroom</span>
</div>
</div>
</div>
<!-- Day 3 Schedule -->
<div id="day3" class="schedule-content hidden">
<div class="space-y-6 max-w-4xl mx-auto">
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow flex flex-col md:flex-row md:items-center gap-6">
<div class="md:w-32 flex-shrink-0">
<span class="text-primary dark:text-accent font-bold">09:00 AM</span>
</div>
<div class="flex-grow">
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Startup Pitch Competition</h4>
<p class="text-slate-500">Innovative cold chain startups compete for investment funding</p>
</div>
<span class="px-4 py-2 bg-purple-100 dark:bg-purple-900/30 rounded-full text-sm font-medium text-purple-600 dark:text-purple-400">Innovation Stage</span>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow flex flex-col md:flex-row md:items-center gap-6">
<div class="md:w-32 flex-shrink-0">
<span class="text-primary dark:text-accent font-bold">11:00 AM</span>
</div>
<div class="flex-grow">
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Policy Dialogue</h4>
<p class="text-slate-500">Government incentives and regulatory framework for cold chain development</p>
</div>
<span class="px-4 py-2 bg-blue-100 dark:bg-blue-900/30 rounded-full text-sm font-medium text-blue-600 dark:text-blue-400">Conference</span>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow flex flex-col md:flex-row md:items-center gap-6">
<div class="md:w-32 flex-shrink-0">
<span class="text-primary dark:text-accent font-bold">02:00 PM</span>
</div>
<div class="flex-grow">
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Facility Tours</h4>
<p class="text-slate-500">Visit state-of-the-art cold chain facilities in Lagos</p>
</div>
<span class="px-4 py-2 bg-secondary/10 dark:bg-secondary/20 rounded-full text-sm font-medium text-secondary">Off-site</span>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow flex flex-col md:flex-row md:items-center gap-6">
<div class="md:w-32 flex-shrink-0">
<span class="text-primary dark:text-accent font-bold">04:30 PM</span>
</div>
<div class="flex-grow">
<h4 class="font-bold text-lg text-slate-800 dark:text-white">Closing Ceremony</h4>
<p class="text-slate-500">Key takeaways and announcement of NCCAL EXPO 2027</p>
</div>
<span class="px-4 py-2 bg-primary/10 dark:bg-primary/20 rounded-full text-sm font-medium text-primary dark:text-accent">Main Stage</span>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-24 bg-gradient-to-r from-primary via-blue-700 to-primary relative overflow-hidden">
<div class="absolute inset-0">
<div class="absolute top-0 right-0 w-96 h-96 bg-secondary/20 rounded-full blur-3xl"></div>
<div class="absolute bottom-0 left-0 w-96 h-96 bg-accent/20 rounded-full blur-3xl"></div>
</div>
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
<h2 class="font-display text-4xl md:text-5xl font-bold text-white mb-6">Ready to Transform Nigeria's Food System?</h2>
<p class="text-xl text-blue-100 mb-4 max-w-2xl mx-auto">
Don't miss the opportunity to be part of West Africa's most important cold chain event at <strong>NIPOLI Village, NCRI, Ibadan</strong>.
</p>
<p class="text-lg text-blue-200 mb-10">
<span class="bg-white/20 px-4 py-2 rounded-full">📅 April 28-30, 2026 | Colocated with <a href="https://www.nipoliexpo.com" target="_blank" class="underline hover:text-secondary">NIPOLI EXPO 2026</a></span>
</p>
<div class="flex flex-wrap justify-center gap-4">
<button onclick="openModal('exhibitor')" class="bg-secondary hover:bg-green-600 text-white px-10 py-5 rounded-xl font-bold text-lg shadow-2xl transition-all hover:-translate-y-1 flex items-center space-x-2">
<span class="material-icons-outlined">storefront</span>
<span>Book Your Booth</span>
</button>
<button onclick="openModal('visitor')" class="bg-white/10 hover:bg-white/20 backdrop-blur-md border-2 border-white/30 text-white px-10 py-5 rounded-xl font-bold text-lg transition-all flex items-center space-x-2">
<span class="material-icons-outlined">confirmation_number</span>
<span>Register to Visit</span>
</button>
</div>
</div>
</section>
<!-- Locate The Venue Section -->
<section class="py-24 bg-gradient-to-br from-primary/5 via-white to-secondary/5 dark:from-primary/10 dark:via-background-dark dark:to-secondary/10" id="locate-venue">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>Find Us</span>
<span class="w-8 h-0.5 bg-secondary"></span>
</span>
<h2 class="mt-4 font-display text-3xl md:text-4xl font-bold text-primary dark:text-white">Locate The Venue</h2>
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">NCCAL EXPO 2026 takes place at the prestigious NIPOLI Village, NCRI, Ibadan</p>
</div>
<div class="grid lg:grid-cols-2 gap-12 items-start">
<!-- Map -->
<div class="relative">
<div class="absolute -inset-4 bg-gradient-to-r from-secondary/20 to-primary/20 rounded-3xl blur-2xl"></div>
<div class="relative bg-white dark:bg-slate-800 rounded-3xl overflow-hidden shadow-2xl">
<div class="aspect-video w-full">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3956.7561697982897!2d3.8969!3d7.4299!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zN8KwMjUnNDcuNiJOIDPCsDUzJzQ4LjgiRQ!5e0!3m2!1sen!2sng!4v1234567890"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
class="w-full h-full min-h-[300px]">
</iframe>
</div>
<div class="p-6 bg-gradient-to-r from-primary to-blue-700">
<div class="flex items-center space-x-4">
<div class="w-14 h-14 bg-white/20 rounded-xl flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-white text-2xl">place</span>
</div>
<div>
<h3 class="text-white font-bold text-lg">NIPOLI Village, NCRI</h3>
<p class="text-blue-100">National Cereals Research Institute, Ibadan, Oyo State, Nigeria</p>
</div>
</div>
</div>
</div>
</div>
<!-- Venue Details -->
<div class="space-y-6">
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg">
<h3 class="text-xl font-bold text-primary dark:text-white mb-4 flex items-center">
<span class="material-icons-outlined text-secondary mr-3">apartment</span>
Venue Details
</h3>
<div class="space-y-4">
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-primary text-sm">home</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">NIPOLI Village</p>
<p class="text-slate-500 text-sm">A purpose-built exhibition and conference facility</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-green-500 text-sm">science</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">NCRI Campus</p>
<p class="text-slate-500 text-sm">Located within the National Cereals Research Institute</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-blue-500 text-sm">square_foot</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">5,000+ sqm</p>
<p class="text-slate-500 text-sm">Exhibition space for 50+ exhibitors</p>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg">
<h3 class="text-xl font-bold text-primary dark:text-white mb-4 flex items-center">
<span class="material-icons-outlined text-secondary mr-3">directions</span>
How to Get There
</h3>
<div class="space-y-4">
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-red-500 text-sm">flight</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">By Air</p>
<p class="text-slate-500 text-sm">Ibadan Airport (20 mins) or Murtala Muhammed International Airport, Lagos (2 hours)</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-amber-500 text-sm">directions_car</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">By Road</p>
<p class="text-slate-500 text-sm">Accessible via Lagos-Ibadan Expressway. Follow signs to NCRI, Ibadan.</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-purple-500 text-sm">train</span>
</div>
<div>
<p class="font-bold text-slate-800 dark:text-white">By Rail</p>
<p class="text-slate-500 text-sm">Lagos-Ibadan rail service available. Taxi from Ibadan station to venue.</p>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-r from-secondary to-green-600 rounded-2xl p-6 text-white">
<h3 class="text-xl font-bold mb-4 flex items-center">
<span class="material-icons-outlined mr-3">support_agent</span>
Need Transport Assistance?
</h3>
<p class="text-green-100 mb-4">Our travel desk can help arrange airport transfers, hotel bookings, and ground transportation.</p>
<div class="flex flex-wrap gap-4">
<a href="#contact" class="bg-white text-secondary px-6 py-3 rounded-xl font-bold flex items-center space-x-2 hover:bg-green-50 transition-colors">
<span class="material-icons-outlined">email</span>
<span>Contact Travel Desk</span>
</a>
<a href="tel:+2348031919662" class="bg-white/20 text-white px-6 py-3 rounded-xl font-bold flex items-center space-x-2 hover:bg-white/30 transition-colors">
<span class="material-icons-outlined">call</span>
<span>+234 803 191 9662</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="py-24 bg-background-light dark:bg-background-dark" id="contact">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-16">
<div>
<span class="inline-flex items-center space-x-2 text-secondary font-bold uppercase tracking-widest text-sm">
<span class="w-8 h-0.5 bg-secondary"></span>
<span>Get In Touch</span>
</span>
<h2 class="mt-4 font-display text-3xl md:text-4xl font-bold text-primary dark:text-white">Contact Us</h2>
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">
Have questions? Our team is here to help. Reach out to us through any of the following channels.
</p>
<div class="mt-10 space-y-6">
<div class="flex items-start space-x-4">
<div class="w-14 h-14 bg-primary/10 dark:bg-primary/20 rounded-2xl flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-primary dark:text-accent">location_on</span>
</div>
<div>
<h4 class="font-bold text-slate-800 dark:text-white">Venue</h4>
<p class="text-slate-500 dark:text-slate-400">NIPOLI Village, NCRI<br/>Ibadan, Oyo State, Nigeria</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-14 h-14 bg-secondary/10 rounded-2xl flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-secondary">email</span>
</div>
<div>
<h4 class="font-bold text-slate-800 dark:text-white">Email</h4>
<p class="text-slate-500 dark:text-slate-400">info@cems-ng.com<br/>ridwan-a@cems-ng.com</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="w-14 h-14 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center flex-shrink-0">
<span class="material-icons-outlined text-blue-500">call</span>
</div>
<div>
<h4 class="font-bold text-slate-800 dark:text-white">Phone</h4>
<p class="text-slate-500 dark:text-slate-400">+234 80 31919662<br/>+234 701 008 8239</p>
</div>
</div>
</div>
<div class="mt-10 flex space-x-4">
<a href="#" class="w-12 h-12 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
<span class="material-icons-outlined">facebook</span>
</a>
<a href="#" class="w-12 h-12 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
<span class="material-icons-outlined">alternate_email</span>
</a>
<a href="#" class="w-12 h-12 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
<span class="material-icons-outlined">smart_display</span>
</a>
<a href="#" class="w-12 h-12 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
<span class="material-icons-outlined">share</span>
</a>
</div>
</div>
<div class="bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-2xl">
<h3 class="text-2xl font-bold text-primary dark:text-white mb-6">Send us a Message</h3>
<form action="https://formsubmit.co/info.cemsnigeria@gmail.com" method="POST" class="space-y-6">
<input type="hidden" name="_subject" value="New Contact Form Submission - NCCAL EXPO 2026">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_template" value="table">
<input type="hidden" name="_next" value="https://nipoliexpo.com/nccalexpo.html">
<div class="grid md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">First Name *</label>
<input type="text" name="first_name" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary focus:border-transparent transition-all" placeholder="John">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Last Name *</label>
<input type="text" name="last_name" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary focus:border-transparent transition-all" placeholder="Doe">
</div>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Email Address *</label>
<input type="email" name="email" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary focus:border-transparent transition-all" placeholder="john@company.com">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Company</label>
<input type="text" name="company" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary focus:border-transparent transition-all" placeholder="Your Company Ltd">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Interest *</label>
<select name="interest" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary focus:border-transparent transition-all">
<option>Exhibiting at NCCAL EXPO</option>
<option>Visiting the Exhibition</option>
<option>Sponsorship Opportunities</option>
<option>Speaking Opportunity</option>
<option>Media / Press</option>
<option>General Inquiry</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Message *</label>
<textarea rows="4" name="message" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary focus:border-transparent transition-all resize-none" placeholder="Tell us about your inquiry..."></textarea>
</div>
<button type="submit" class="w-full bg-gradient-to-r from-secondary to-green-600 hover:from-green-600 hover:to-secondary text-white font-bold py-4 rounded-xl transition-all shadow-lg hover:shadow-xl">
Send Message
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-slate-900 text-slate-300 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-12">
<div class="lg:col-span-2">
<div class="mb-6">
<a href="#">
<img src="https://nccalexpo.nipoliexpo.com/wp-content/uploads/2026/01/NIGERIA-cold-chain-and-agrologistics.png" alt="NCCAL EXPO 2026 Logo" class="h-20 w-auto brightness-10">
</a>
</div>
<p class="text-sm leading-relaxed text-slate-400 max-w-sm">
West Africa's premier exhibition for cold chain solutions and agro-logistics. NCCAL EXPO 2026 is colocated with <a href="https://www.nipoliexpo.com" target="_blank" class="text-secondary hover:underline">NIPOLI EXPO 2026</a> at NIPOLI Village, NCRI, Ibadan. April 28-30, 2026.
</p>
<div class="flex space-x-4 mt-6">
<a class="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center hover:bg-secondary transition-colors" href="#"><span class="material-icons-outlined text-sm">facebook</span></a>
<a class="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center hover:bg-secondary transition-colors" href="#"><span class="material-icons-outlined text-sm">alternate_email</span></a>
<a class="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center hover:bg-secondary transition-colors" href="#"><span class="material-icons-outlined text-sm">smart_display</span></a>
<a class="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center hover:bg-secondary transition-colors" href="#"><span class="material-icons-outlined text-sm">share</span></a>
</div>
</div>
<div>
<h4 class="text-white font-bold mb-6">Quick Links</h4>
<ul class="space-y-4 text-sm">
<li><a class="hover:text-secondary transition-colors" href="#about">About NCCAL</a></li>
<li><a class="hover:text-secondary transition-colors" href="#exhibitors">Exhibitor Info</a></li>
<li><a class="hover:text-secondary transition-colors" href="#visitors">Visitor Info</a></li>
<li><a class="hover:text-secondary transition-colors" href="#schedule">Event Schedule</a></li>
<li><a class="hover:text-secondary transition-colors" href="#">Floor Plan</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-6">Resources</h4>
<ul class="space-y-4 text-sm">
<li><a class="hover:text-secondary transition-colors" href="https://nccalexpo.nipoliexpo.com/wp-content/uploads/2026/01/NCCAL-EXPO-2026.pdf">NCAAL Brochure</a></li>
<li><a class="hover:text-secondary transition-colors" href="#">Exhibitor Manual</a></li>
<li><a class="hover:text-secondary transition-colors" href="#">Travel & Hotels</a></li>
<li><a class="hover:text-secondary transition-colors" href="sitemap.xml" target="_blank">Sitemap</a></li>
<li><a class="hover:text-secondary transition-colors" href="#">FAQs</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-6">Newsletter</h4>
<p class="text-sm mb-4">Subscribe for latest updates and early bird offers.</p>
<form action="https://formsubmit.co/info.cemsnigeria@gmail.com" method="POST" class="space-y-3">
<input type="hidden" name="_subject" value="New Newsletter Subscription - NCCAL EXPO 2026">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_template" value="table">
<input type="hidden" name="_next" value="https://nccalexpo.nipoliexpo.com/">
<input type="hidden" name="subscription_type" value="Newsletter">
<input class="w-full bg-slate-800 border-none rounded-xl focus:ring-secondary text-sm py-3 px-4" placeholder="Your Email" type="email" name="email" required/>
<button type="submit" class="w-full bg-secondary text-white font-bold py-3 rounded-xl hover:bg-green-600 transition-colors">Subscribe</button>
</form>
</div>
</div>
<div class="pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center text-sm text-slate-500">
<p>© 2026 NCCAL EXPO. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a class="hover:text-white transition-colors" href="#">Privacy Policy</a>
<a class="hover:text-white transition-colors" href="#">Terms of Service</a>
<a class="hover:text-white transition-colors" href="#">Cookie Policy</a>
</div>
</div>
</div>
</footer>
<!-- Floating WhatsApp Button -->
<a href="https://wa.me/2347010088239" target="_blank" rel="noopener noreferrer" class="fixed bottom-6 right-6 z-40 group" aria-label="Chat on WhatsApp">
<div class="relative">
<!-- Pulse Animation Ring -->
<div class="absolute inset-0 bg-green-500 rounded-full animate-ping opacity-25"></div>
<!-- Button -->
<div class="relative w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center shadow-2xl hover:shadow-green-500/50 hover:scale-110 transition-all duration-300 cursor-pointer">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
</svg>
</div>
<!-- Tooltip -->
<div class="absolute right-20 top-1/2 -translate-y-1/2 bg-slate-900 text-white text-sm font-medium px-4 py-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap pointer-events-none">
Chat with us on WhatsApp
<div class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1 w-2 h-2 bg-slate-900 rotate-45"></div>
</div>
</div>
</a>
<!-- Registration Modal -->
<div id="modal" class="fixed inset-0 z-50 hidden items-center justify-center p-4">
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="closeModal()"></div>
<div class="relative bg-white dark:bg-slate-800 rounded-3xl max-w-lg w-full max-h-[90vh] overflow-y-auto shadow-2xl">
<button onclick="closeModal()" class="absolute top-4 right-4 w-10 h-10 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
<span class="material-icons-outlined">close</span>
</button>
<div class="p-8">
<h3 id="modal-title" class="text-2xl font-bold text-primary dark:text-white mb-2">Register</h3>
<p id="modal-subtitle" class="text-slate-500 dark:text-slate-400 mb-6">Fill in your details below</p>
<form id="registration-form" action="https://formsubmit.co/info.cemsnigeria@gmail.com" method="POST" class="space-y-5">
<input type="hidden" name="_subject" id="form-subject" value="New Registration - NCCAL EXPO 2026">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_template" value="table">
<input type="hidden" name="_next" value="https://nipoliexpo.com/nccalexpo.html">
<input type="hidden" name="registration_type" id="registration-type" value="General">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">First Name *</label>
<input type="text" name="first_name" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Last Name *</label>
<input type="text" name="last_name" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary">
</div>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Email *</label>
<input type="email" name="email" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Phone Number *</label>
<input type="tel" name="phone" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Company *</label>
<input type="text" name="company" required class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary">
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Job Title</label>
<input type="text" name="job_title" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary">
</div>
<div id="exhibitor-fields" class="hidden space-y-5">
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Booth Size Preference</label>
<select name="booth_size" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary">
<option>Standard Booth (9 sqm)</option>
<option>Premium Booth (18 sqm)</option>
<option>Island Booth (36+ sqm)</option>
<option>Custom Requirements</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Products/Services to Exhibit</label>
<textarea rows="3" name="products_services" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary resize-none"></textarea>
</div>
</div>
<div id="visitor-fields" class="hidden">
<div>
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Pass Type</label>
<select name="pass_type" class="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 focus:ring-2 focus:ring-secondary">
<option>Standard Pass - Exhibition Access</option>
<option>Conference Pass - Full Event Access</option>
<option>VIP Pass - Executive Experience</option>
</select>
</div>
</div>
<div class="flex items-start space-x-3">
<input type="checkbox" name="privacy_accepted" value="Yes" class="mt-1 rounded border-slate-300 text-secondary focus:ring-secondary" required>
<label class="text-sm text-slate-500 dark:text-slate-400">I agree to receive communications about NCCAL EXPO and accept the <a href="#" class="text-primary dark:text-accent underline">privacy policy</a>.</label>
</div>
<button type="submit" class="w-full bg-gradient-to-r from-secondary to-green-600 hover:from-green-600 hover:to-secondary text-white font-bold py-4 rounded-xl transition-all shadow-lg">
Submit Registration
</button>
</form>
</div>
</div>
</div>
<script>
// Dark Mode Toggle
function toggleDarkMode() {
document.documentElement.classList.toggle('dark');
const isDark = document.documentElement.classList.contains('dark');
document.getElementById('theme-icon').textContent = isDark ? 'light_mode' : 'dark_mode';
const mobileIcon = document.getElementById('theme-icon-mobile');
if (mobileIcon) mobileIcon.textContent = isDark ? 'light_mode' : 'dark_mode';
}
// Mobile Menu Toggle
function toggleMobileMenu() {
const menu = document.getElementById('mobile-menu');
const icon = document.getElementById('menu-icon');
menu.classList.toggle('hidden');
icon.textContent = menu.classList.contains('hidden') ? 'menu' : 'close';
}
// Mobile NCCAL Dropdown Toggle
function toggleMobileDropdown() {
const dropdown = document.getElementById('mobile-nccal-dropdown');
const icon = document.getElementById('mobile-dropdown-icon');
dropdown.classList.toggle('hidden');
icon.style.transform = dropdown.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';
}
// Mobile Exhibitors Dropdown Toggle
function toggleMobileExhibitorDropdown() {
const dropdown = document.getElementById('mobile-exhibitor-dropdown');
const icon = document.getElementById('mobile-exhibitor-dropdown-icon');
dropdown.classList.toggle('hidden');
icon.style.transform = dropdown.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';
}
// Mobile Visitors Dropdown Toggle
function toggleMobileVisitorDropdown() {
const dropdown = document.getElementById('mobile-visitor-dropdown');
const icon = document.getElementById('mobile-visitor-dropdown-icon');
dropdown.classList.toggle('hidden');
icon.style.transform = dropdown.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';
}
// Mobile Contact Us Dropdown Toggle
function toggleMobileContactDropdown() {
const dropdown = document.getElementById('mobile-contact-dropdown');
const icon = document.getElementById('mobile-contact-dropdown-icon');
dropdown.classList.toggle('hidden');
icon.style.transform = dropdown.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';
}
// FAQ Toggle
function toggleFaq(num) {
const content = document.getElementById('faq-' + num);
const icon = document.getElementById('faq-icon-' + num);
content.classList.toggle('hidden');
icon.style.transform = content.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';
}
// Countdown Timer
function updateCountdown() {
const eventDate = new Date('2026-04-28T09:00:00').getTime();
const now = new Date().getTime();
const distance = eventDate - now;
if (distance > 0) {
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById('days').textContent = days.toString().padStart(2, '0');
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
}
}
setInterval(updateCountdown, 1000);
updateCountdown();
// Schedule Tabs
function showDay(day) {
document.querySelectorAll('.schedule-content').forEach(el => el.classList.add('hidden'));
document.querySelectorAll('.schedule-tab').forEach(el => {
el.classList.remove('bg-primary', 'text-white');
el.classList.add('text-slate-600', 'dark:text-slate-300');
});
document.getElementById('day' + day).classList.remove('hidden');
const btn = document.getElementById('day' + day + '-btn');
btn.classList.add('bg-primary', 'text-white');
btn.classList.remove('text-slate-600', 'dark:text-slate-300');
}
// Modal Functions
function openModal(type) {
const modal = document.getElementById('modal');
const title = document.getElementById('modal-title');
const subtitle = document.getElementById('modal-subtitle');
const exhibitorFields = document.getElementById('exhibitor-fields');
const visitorFields = document.getElementById('visitor-fields');
const formSubject = document.getElementById('form-subject');
const registrationType = document.getElementById('registration-type');
exhibitorFields.classList.add('hidden');
visitorFields.classList.add('hidden');
if (type === 'exhibitor') {
title.textContent = 'Exhibitor Registration';
subtitle.textContent = 'Secure your booth at NCCAL EXPO 2026 (Colocated with NIPOLI EXPO)';
exhibitorFields.classList.remove('hidden');
formSubject.value = 'New Exhibitor Registration - NCCAL EXPO 2026';
registrationType.value = 'Exhibitor';
} else if (type === 'visitor') {
title.textContent = 'Visitor Registration';
subtitle.textContent = 'Get your pass for NCCAL EXPO 2026 | April 28-30, Ibadan';
visitorFields.classList.remove('hidden');
formSubject.value = 'New Visitor Registration - NCCAL EXPO 2026';
registrationType.value = 'Visitor';
} else {
title.textContent = 'Quick Registration';
subtitle.textContent = 'Join NCCAL EXPO 2026 at NIPOLI Village, NCRI, Ibadan';
formSubject.value = 'New Quick Registration - NCCAL EXPO 2026';
registrationType.value = 'General';
}
modal.classList.remove('hidden');
modal.classList.add('flex');
document.body.style.overflow = 'hidden';
}
function closeModal() {
const modal = document.getElementById('modal');
modal.classList.add('hidden');
modal.classList.remove('flex');
document.body.style.overflow = 'auto';
}
// Close modal on escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
});
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
const href = this.getAttribute('href');
if (href !== '#') {
e.preventDefault();
const target = document.querySelector(href);
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
// Close mobile menu if open
const mobileMenu = document.getElementById('mobile-menu');
if (!mobileMenu.classList.contains('hidden')) {
toggleMobileMenu();
}
}
}
});
});
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('section').forEach(section => {
section.style.opacity = '0';
section.style.transform = 'translateY(20px)';
section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(section);
});
// Make stats section visible immediately
document.querySelector('section:first-of-type').style.opacity = '1';
document.querySelector('section:first-of-type').style.transform = 'translateY(0)';
</script>
</body>
</html>