Your IP : 216.73.216.93
<?php
include 'includes/config.php';
include 'includes/functions.php';
?>
<?php include 'includes/header.php'; ?>
<!-- WhatsApp Floating Button -->
<div class="whatsapp-float">
<div class="whatsapp-icon">
<i class="bi bi-whatsapp"></i>
</div>
<div class="whatsapp-tooltip">
Chat with us on WhatsApp!
</div>
</div>
<!-- Hero Slider Section -->
<section class="hero-slider-section">
<div class="hero-slider">
<!-- Slide 1 -->
<div class="slide active">
<div class="slide-image">
<img src="assets/images/py.jpg" alt="AI Technology">
</div>
<div class="slide-overlay"></div>
<div class="container">
<div class="row align-items-center min-vh-80">
<div class="col-lg-6">
<div class="slide-content">
<h1 class="slide-title">Master Python programming and machine learning</h1>
<p class="slide-description">Learn cutting-edge AI technologies from industry experts. Build intelligent systems and transform industries with machine learning.</p>
<div class="slide-buttons">
<a href="courses.php" class="btn btn-primary btn-lg">Explore Python Courses</a>
<a href="about.php" class="btn btn-outline-light btn-lg">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="slide">
<div class="slide-image">
<img src="assets/images/web.jpg" alt="Web Development">
</div>
<div class="slide-overlay"></div>
<div class="container">
<div class="row align-items-center min-vh-80">
<div class="col-lg-6">
<div class="slide-content">
<h1 class="slide-title">Modern Web Development</h1>
<p class="slide-description">Master full-stack development with the latest frameworks. Build responsive, scalable applications that power the modern web.</p>
<div class="slide-buttons">
<a href="courses.php" class="btn btn-primary btn-lg">View Web Courses</a>
<a href="about.php" class="btn btn-outline-light btn-lg">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="slide">
<div class="slide-image">
<img src="assets/images/data.jpg" alt="Data Science">
</div>
<div class="slide-overlay"></div>
<div class="container">
<div class="row align-items-center min-vh-80">
<div class="col-lg-6">
<div class="slide-content">
<h1 class="slide-title">Data Science & Analytics</h1>
<p class="slide-description">Unlock insights from data with powerful analytics tools. Learn to extract meaningful patterns and drive data-informed decisions.</p>
<div class="slide-buttons">
<a href="courses.php" class="btn btn-primary btn-lg">Discover Data Courses</a>
<a href="about.php" class="btn btn-outline-light btn-lg">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slider Controls -->
<div class="slider-controls">
<button class="slider-prev" aria-label="Previous slide">
<i class="bi bi-chevron-left"></i>
</button>
<button class="slider-next" aria-label="Next slide">
<i class="bi bi-chevron-right"></i>
</button>
</div>
<!-- Slider Indicators -->
<div class="slider-indicators">
<button class="indicator active" data-slide="0" aria-label="Go to slide 1"></button>
<button class="indicator" data-slide="1" aria-label="Go to slide 2"></button>
<button class="indicator" data-slide="2" aria-label="Go to slide 3"></button>
</div>
</section>
<!-- Categories Section -->
<section class="categories-section py-5">
<div class="container">
<h2 class="section-title text-center mb-5">Browse by Category</h2>
<div class="row">
<?php
// Get categories with course counts
$categories_sql = "SELECT c.*, COUNT(co.id) as course_count
FROM categories c
LEFT JOIN courses co ON c.id = co.category_id
GROUP BY c.id
ORDER BY course_count DESC
LIMIT 6";
$categories_result = $conn->query($categories_sql);
if ($categories_result && $categories_result->num_rows > 0) {
while($category = $categories_result->fetch_assoc()) {
?>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card category-card h-100 text-center">
<div class="card-body">
<div class="category-icon mb-3">
<i class="bi bi-laptop fs-1 text-primary"></i>
</div>
<h5 class="card-title"><?php echo htmlspecialchars($category['name']); ?></h5>
<p class="card-text text-muted"><?php echo htmlspecialchars($category['description']); ?></p>
<div class="course-count">
<span class="badge bg-primary rounded-pill"><?php echo $category['course_count']; ?> Courses</span>
</div>
<a href="courses.php?category=<?php echo $category['id']; ?>" class="btn btn-outline-primary btn-sm mt-3">Explore Category</a>
</div>
</div>
</div>
<?php
}
} else {
echo '<div class="col-12 text-center"><p>No categories available.</p></div>';
}
?>
</div>
<div class="text-center mt-4">
<a href="courses.php" class="btn btn-outline-primary">View All Categories</a>
</div>
</div>
</section>
<section class="popular-courses py-5">
<div class="container">
<h2 class="section-title text-center mb-5">Popular Courses</h2>
<div class="row">
<?php
$popular_courses = getPopularCourses($conn, 3);
if ($popular_courses && $popular_courses->num_rows > 0) {
while($course = $popular_courses->fetch_assoc()) {
$discount = 0;
if($course['old_price'] > 0 && $course['current_price'] > 0) {
$discount = round((($course['old_price'] - $course['current_price']) / $course['old_price']) * 100);
}
// Enhanced image path handling
$image_path = $course['image'];
$display_image = 'assets/images/course-placeholder.jpg'; // Default fallback
if (!empty($image_path)) {
// Remove any leading/trailing spaces
$image_path = trim($image_path);
// Case 1: Full URL (http:// or https://)
if (preg_match('/^https?:\/\//', $image_path)) {
$display_image = $image_path;
}
// Case 2: Absolute server path (/var/www/...)
elseif (strpos($image_path, '/') === 0) {
// Convert absolute path to relative if possible
$doc_root = $_SERVER['DOCUMENT_ROOT'];
if (strpos($image_path, $doc_root) === 0) {
$display_image = str_replace($doc_root, '', $image_path);
} else {
$display_image = $image_path;
}
}
// Case 3: Already relative path with assets/
elseif (strpos($image_path, 'assets/') === 0) {
$display_image = $image_path;
}
// Case 4: Just a filename - assume it's in courses directory
else {
$display_image = 'assets/images/courses/' . $image_path;
}
// Final check - does the file exist?
if (strpos($display_image, 'http') !== 0) {
if (!file_exists($display_image)) {
$display_image = 'assets/images/course-placeholder.jpg';
}
}
}
?>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card course-card h-100">
<?php if($discount > 0): ?>
<span class="discount-badge"><?php echo $discount; ?>% OFF</span>
<?php endif; ?>
<?php if($course['is_popular']): ?>
<span class="popular-badge">🔥 Popular</span>
<?php endif; ?>
<img src="<?php echo $display_image; ?>"
class="card-img-top"
alt="<?php echo htmlspecialchars($course['title']); ?>"
onerror="this.onerror=null; this.src='assets/images/test.png';"
style="height: 200px; object-fit: cover;">
<div class="card-body">
<h5 class="card-title"><?php echo htmlspecialchars($course['title']); ?></h5>
<p class="card-text text-muted"><?php echo substr(htmlspecialchars($course['description']), 0, 100); ?>...</p>
<div class="course-meta mb-2">
<small class="text-muted">
<i class="bi bi-person me-1"></i>By <?php echo htmlspecialchars($course['instructor_name']); ?>
</small>
</div>
<div class="price-section">
<?php if($course['old_price'] > 0 && $course['current_price'] > 0): ?>
<span class="old-price text-muted">$<?php echo number_format($course['old_price'], 2); ?></span>
<?php endif; ?>
<span class="current-price fw-bold text-primary">
<?php echo ($course['current_price'] == 0) ? 'Free' : '$' . number_format($course['current_price'], 2); ?>
</span>
</div>
</div>
<div class="card-footer bg-transparent">
<div class="d-grid gap-2">
<a href="course-details.php?id=<?php echo $course['id']; ?>" class="btn btn-outline-primary btn-sm">
<i class="bi bi-eye me-1"></i>View Details
</a>
<?php if(isset($_SESSION['user_id'])): ?>
<button class="btn btn-primary btn-sm add-to-cart" data-course-id="<?php echo $course['id']; ?>">
<i class="bi bi-cart-plus me-1"></i>Add to Cart
</button>
<?php else: ?>
<a href="login.php" class="btn btn-primary btn-sm">
<i class="bi bi-lock me-1"></i>Login to Enroll
</a>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php
}
} else {
echo '<div class="col-12 text-center py-4">
<i class="bi bi-book fs-1 text-muted mb-3"></i>
<h5 class="text-muted">No Popular Courses Available</h5>
<p class="text-muted">Check back later for featured courses.</p>
<a href="courses.php" class="btn btn-outline-primary">Browse All Courses</a>
</div>';
}
?>
</div>
<div class="text-center mt-4">
<a href="courses.php" class="btn btn-outline-primary btn-lg">
<i class="bi bi-arrow-right me-2"></i>View All Courses
</a>
</div>
</div>
</section>
<style>
/* WhatsApp Floating Button Styles */
.whatsapp-float {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 1000;
transform: translateY(100px);
opacity: 0;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.whatsapp-float.show {
transform: translateY(0);
opacity: 1;
}
.whatsapp-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #25D366, #128C7E);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
transition: all 0.3s ease;
position: relative;
animation: pulse 2s infinite;
}
.whatsapp-icon:hover {
transform: scale(1.1);
box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
}
.whatsapp-icon i {
font-size: 28px;
color: white;
}
.whatsapp-tooltip {
position: absolute;
right: 70px;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 8px 12px;
border-radius: 6px;
font-size: 0.85rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.whatsapp-float:hover .whatsapp-tooltip {
opacity: 1;
transform: translateY(-50%) translateX(-5px);
}
@keyframes pulse {
0% {
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
}
50% {
box-shadow: 0 4px 25px rgba(37, 211, 102, 0.7);
}
100% {
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
}
}
/* Hero Slider Styles */
.hero-slider-section {
position: relative;
overflow: hidden;
height: 80vh;
min-height: 600px;
}
.hero-slider {
position: relative;
width: 100%;
height: 100%;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
display: flex;
align-items: center;
}
.slide.active {
opacity: 1;
}
.slide-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%);
z-index: 1;
}
.slide-content {
position: relative;
z-index: 2;
color: white;
padding: 2rem 0;
}
.slide-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.2;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.slide-description {
font-size: 1.25rem;
margin-bottom: 2rem;
line-height: 1.6;
max-width: 90%;
opacity: 0.9;
}
.slide-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.min-vh-80 {
min-height: 80vh;
}
/* Slider Controls */
.slider-controls {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 2rem;
z-index: 3;
transform: translateY(-50%);
}
.slider-prev,
.slider-next {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.slider-prev:hover,
.slider-next:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
/* Slider Indicators */
.slider-indicators {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
z-index: 3;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid white;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
}
.indicator.active {
background: white;
transform: scale(1.2);
}
/* Categories Section */
.categories-section {
background: #fff;
}
.category-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: none;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
border: 1px solid #f0f0f0;
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}
.category-icon {
color: #4e73df;
}
.category-card .card-title {
font-weight: 700;
color: #2c3e50;
margin-bottom: 0.5rem;
}
.category-card .card-text {
color: #6c757d;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1rem;
}
.course-count .badge {
font-size: 0.8rem;
padding: 0.5rem 1rem;
}
/* Popular Courses */
.popular-courses {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.course-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: none;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
overflow: hidden;
}
.course-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.discount-badge {
position: absolute;
top: 12px;
left: 12px;
background: linear-gradient(45deg, #dc3545, #e35d6a);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
z-index: 2;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}
.popular-badge {
position: absolute;
top: 12px;
right: 12px;
background: linear-gradient(45deg, #ff6b35, #ff8e53);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
z-index: 2;
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}
.card-img-top {
border-radius: 0;
transition: transform 0.3s ease;
}
.course-card:hover .card-img-top {
transform: scale(1.05);
}
.card-body {
padding: 1.5rem;
}
.card-title {
font-weight: 700;
color: #2c3e50;
margin-bottom: 0.75rem;
font-size: 1.1rem;
line-height: 1.4;
}
.card-text {
color: #6c757d;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1rem;
}
.course-meta {
margin-bottom: 1rem;
}
.price-section {
display: flex;
align-items: center;
gap: 8px;
margin: 1rem 0;
}
.old-price {
text-decoration: line-through;
font-size: 0.9rem;
color: #6c757d !important;
}
.current-price {
font-size: 1.25rem;
font-weight: 700;
}
.card-footer {
border-top: 1px solid #e9ecef;
padding: 1.25rem 1.5rem;
background: transparent;
}
.section-title {
font-weight: 800;
color: #2c3e50;
font-size: 2.5rem;
margin-bottom: 3rem !important;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(45deg, #4e73df, #224abe);
border-radius: 2px;
}
.btn-outline-primary {
border-width: 2px;
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: 50px;
transition: all 0.3s ease;
}
.btn-outline-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(78, 115, 223, 0.3);
}
.btn-primary {
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 50px;
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(78, 115, 223, 0.4);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.hero-slider-section {
height: 70vh;
min-height: 500px;
}
.slide-title {
font-size: 2.5rem;
}
.slide-description {
font-size: 1.1rem;
max-width: 100%;
}
.slide-buttons {
flex-direction: column;
align-items: flex-start;
}
.slider-controls {
padding: 0 1rem;
}
.slider-prev,
.slider-next {
width: 40px;
height: 40px;
}
.section-title {
font-size: 2rem;
}
.course-card, .category-card {
margin-bottom: 2rem;
}
.card-body {
padding: 1.25rem;
}
/* WhatsApp button mobile adjustments */
.whatsapp-float {
bottom: 20px;
right: 20px;
}
.whatsapp-icon {
width: 55px;
height: 55px;
}
.whatsapp-icon i {
font-size: 24px;
}
.whatsapp-tooltip {
display: none; /* Hide tooltip on mobile */
}
}
@media (max-width: 576px) {
.hero-slider-section {
height: 60vh;
min-height: 400px;
}
.slide-title {
font-size: 2rem;
}
.slide-description {
font-size: 1rem;
}
.slide-buttons .btn {
width: 100%;
text-align: center;
}
.whatsapp-float {
bottom: 15px;
right: 15px;
}
.whatsapp-icon {
width: 50px;
height: 50px;
}
.whatsapp-icon i {
font-size: 22px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// WhatsApp Button Functionality
const whatsappButton = document.querySelector('.whatsapp-float');
let scrollTimeout;
// Function to open WhatsApp
function openWhatsApp() {
const phoneNumber = '+254758762150';
const message = 'Hello Gex Neural Academy I would like to get more information about your courses.';
const whatsappURL = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
window.open(whatsappURL, '_blank');
}
// Show/hide WhatsApp button on scroll
function handleScroll() {
const scrollPosition = window.scrollY;
const heroHeight = document.querySelector('.hero-slider-section').offsetHeight;
// Show button when scrolled past hero section
if (scrollPosition > heroHeight * 0.3) {
whatsappButton.classList.add('show');
} else {
whatsappButton.classList.remove('show');
}
// Clear existing timeout
clearTimeout(scrollTimeout);
// Hide button after 3 seconds of no scrolling (optional)
scrollTimeout = setTimeout(() => {
if (scrollPosition > heroHeight * 0.3) {
whatsappButton.classList.remove('show');
}
}, 3000);
}
// Add click event to WhatsApp button
whatsappButton.addEventListener('click', openWhatsApp);
// Throttle scroll event for better performance
let scrollThrottleTimeout;
window.addEventListener('scroll', function() {
if (!scrollThrottleTimeout) {
scrollThrottleTimeout = setTimeout(function() {
scrollThrottleTimeout = null;
handleScroll();
}, 100);
}
});
// Initial check on page load
handleScroll();
// Hero Slider Functionality
const slider = document.querySelector('.hero-slider');
const slides = document.querySelectorAll('.slide');
const indicators = document.querySelectorAll('.indicator');
const prevButton = document.querySelector('.slider-prev');
const nextButton = document.querySelector('.slider-next');
let currentSlide = 0;
let slideInterval;
// Initialize slider
function initSlider() {
// Show first slide
showSlide(currentSlide);
// Start auto-slide
startAutoSlide();
// Add event listeners
prevButton.addEventListener('click', showPrevSlide);
nextButton.addEventListener('click', showNextSlide);
indicators.forEach((indicator, index) => {
indicator.addEventListener('click', () => {
showSlide(index);
resetAutoSlide();
});
});
// Pause auto-slide on hover
slider.addEventListener('mouseenter', pauseAutoSlide);
slider.addEventListener('mouseleave', startAutoSlide);
}
function showSlide(index) {
// Hide all slides
slides.forEach(slide => {
slide.classList.remove('active');
});
// Remove active class from all indicators
indicators.forEach(indicator => {
indicator.classList.remove('active');
});
// Show current slide
slides[index].classList.add('active');
indicators[index].classList.add('active');
currentSlide = index;
}
function showNextSlide() {
let nextIndex = (currentSlide + 1) % slides.length;
showSlide(nextIndex);
resetAutoSlide();
}
function showPrevSlide() {
let prevIndex = (currentSlide - 1 + slides.length) % slides.length;
showSlide(prevIndex);
resetAutoSlide();
}
function startAutoSlide() {
slideInterval = setInterval(showNextSlide, 5000); // Change slide every 5 seconds
}
function pauseAutoSlide() {
clearInterval(slideInterval);
}
function resetAutoSlide() {
pauseAutoSlide();
startAutoSlide();
}
// Initialize the slider
initSlider();
// Add to cart functionality for popular courses
const addToCartButtons = document.querySelectorAll('.popular-courses .add-to-cart');
addToCartButtons.forEach(button => {
button.addEventListener('click', function() {
const courseId = this.getAttribute('data-course-id');
const courseCard = this.closest('.course-card');
// Add loading state
const originalText = this.innerHTML;
this.innerHTML = '<i class="bi bi-arrow-repeat spinner-border spinner-border-sm me-1"></i> Adding...';
this.disabled = true;
addToCart(courseId, this, originalText, courseCard);
});
});
function addToCart(courseId, button, originalText, courseCard) {
fetch('add_to_cart.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `course_id=${courseId}&action=add`
})
.then(response => response.json())
.then(data => {
// Reset button state
button.innerHTML = originalText;
button.disabled = false;
if(data.success) {
showAlert('🎉 Course added to cart successfully!', 'success');
updateCartCount();
// Add success animation to card
courseCard.style.transform = 'scale(1.02)';
courseCard.style.boxShadow = '0 10px 30px rgba(40, 167, 69, 0.3)';
setTimeout(() => {
courseCard.style.transform = '';
courseCard.style.boxShadow = '';
}, 1000);
} else {
showAlert(data.message || 'Error adding course to cart', 'error');
}
})
.catch(error => {
console.error('Error:', error);
button.innerHTML = originalText;
button.disabled = false;
showAlert('An error occurred. Please try again.', 'error');
});
}
function updateCartCount() {
// Update cart count badge in header
const cartBadge = document.querySelector('.cart-count');
if(cartBadge) {
let currentCount = parseInt(cartBadge.textContent) || 0;
cartBadge.textContent = currentCount + 1;
cartBadge.style.display = 'inline-block';
// Add animation to cart badge
cartBadge.style.transform = 'scale(1.5)';
setTimeout(() => {
cartBadge.style.transform = 'scale(1)';
}, 300);
}
}
function showAlert(message, type) {
// Remove existing alerts
const existingAlerts = document.querySelectorAll('.alert');
existingAlerts.forEach(alert => alert.remove());
const alertDiv = document.createElement('div');
alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
alertDiv.style.cssText = 'top: 80px; right: 20px; z-index: 9999; min-width: 300px; border: none; border-radius: 15px;';
if (type === 'success') {
alertDiv.style.background = 'linear-gradient(45deg, #28a745, #20c997)';
alertDiv.style.color = 'white';
}
alertDiv.innerHTML = `
<div class="d-flex align-items-center">
<i class="bi ${type === 'success' ? 'bi-check-circle' : 'bi-exclamation-triangle'} me-2"></i>
<div>${message}</div>
</div>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"></button>
`;
document.body.appendChild(alertDiv);
// Auto remove after 5 seconds
setTimeout(() => {
if(alertDiv.parentNode) {
alertDiv.parentNode.removeChild(alertDiv);
}
}, 5000);
}
// Add hover effects for course cards
const courseCards = document.querySelectorAll('.popular-courses .course-card');
courseCards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-8px)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
});
});
// Add hover effects for category cards
const categoryCards = document.querySelectorAll('.category-card');
categoryCards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
});
});
});
</script>
<section class="stats-section py-5 bg-light">
<div class="container">
<div class="row text-center">
<div class="col-md-3">
<h3 class="stat-number">10+</h3>
<p class="stat-label">Students Enrolled</p>
</div>
<div class="col-md-3">
<h3 class="stat-number">50+</h3>
<p class="stat-label">Courses Available</p>
</div>
<div class="col-md-3">
<h3 class="stat-number">30+</h3>
<p class="stat-label">Expert Instructors</p>
</div>
<div class="col-md-3">
<h3 class="stat-number">24/7</h3>
<p class="stat-label">Live Sessions</p>
</div>
</div>
</div>
</section>
<?php include 'includes/footer.php'; ?>