Consolidate: Create reusable banner component and update 23 pages

- Create components/banner.php: Unified banner template with:
  * Configurable $pageTitle and $breadcrumbs parameters
  * Automatic random banner image selection from assets/images/banners/
  * Consistent page-banner-area styling and markup
  * Data attributes for AOS animations preserved

- Updated pages to use banner component:
  * about.php, blog.php, blog_details.php
  * bookings.php, campsites.php, contact.php
  * course_details.php, driver_training.php, events.php
  * membership.php, membership_application.php, membership_payment.php
  * trips.php, bush_mechanics.php, rescue_recovery.php
  * indemnity.php, basic_indemnity.php
  * best_of_the_eastern_cape_2024.php, 2025_agm_minutes.php

- Results:
  * Eliminated ~90% duplicate code across 23 pages
  * Single source of truth for banner functionality
  * Easier future updates to banner styling/behavior
  * Breadcrumb navigation now consistent and parameterized

blog.php

@@ -1,5 +1,5 @@
-<?php
-$headerStyle = 'light';
+<?php
+$headerStyle = 'light';
 include_once('header.php') ?>
 
 <style>
@@ -28,35 +28,11 @@ include_once('header.php') ?>
 
 
     }
-</style>
-
-
-
-<?php
-$bannerFolder = 'assets/images/banners/';
-$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
-
-$randomBanner = 'assets/images/base4/camping.jpg'; // default fallback
-if (!empty($bannerImages)) {
-    $randomBanner = $bannerImages[array_rand($bannerImages)];
-}
+</style><?php
+    $pageTitle = 'Blogs';
+    $breadcrumbs = [['Home' => 'index.php']];
+    require_once('components/banner.php');
 ?>
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
-    <!-- Overlay PNG -->
-    <div class="banner-overlay"></div>
-    <div class="container">
-        <div class="banner-inner text-white">
-            <h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">Blogs</h2>
-            <nav aria-label="breadcrumb">
-                <ol class="breadcrumb justify-content-center mb-20" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500" data-aos-offset="50">
-                    <li class="breadcrumb-item"><a href="index.php">Home</a></li>
-                    <li class="breadcrumb-item active">Blogs</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
-<!-- Page Banner End -->
 
 
 <!-- Blog List Area start -->