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

components/banner.php

@@ -0,0 +1,72 @@
+<?php
+/**
+ * REUSABLE PAGE BANNER COMPONENT
+ * 
+ * Displays a page banner with background image, title, and breadcrumb navigation.
+ * 
+ * Usage in your page:
+ * 
+ *   <?php
+ *   $pageTitle = 'About';
+ *   $bannerImage = 'assets/images/blog/cover.jpg'; // optional
+ *   require_once('components/banner.php');
+ *   ?>
+ * 
+ * Parameters:
+ *   $pageTitle (required) - Page title to display
+ *   $bannerImage (optional) - URL to banner background image. If not set, uses random banner
+ *   $breadcrumbs (optional) - Array of breadcrumb items. Default: [['Home' => 'index.php']]
+ *   $classes (optional) - Additional CSS classes for banner section
+ */
+
+// Default values
+$pageTitle = $pageTitle ?? 'Page';
+$bannerImage = $bannerImage ?? '';
+$breadcrumbs = $breadcrumbs ?? [['Home' => 'index.php']];
+$classes = $classes ?? '';
+
+// If no banner image provided, try to use random banner
+if (empty($bannerImage)) {
+    $bannerFolder = 'assets/images/banners/';
+    $bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
+    $bannerImage = !empty($bannerImages) ? $bannerImages[array_rand($bannerImages)] : 'assets/images/base4/camping.jpg';
+}
+
+// Add the page title to breadcrumbs as last item (not a link)
+$breadcrumbItems = [];
+foreach ($breadcrumbs as $item) {
+    foreach ($item as $label => $url) {
+        $breadcrumbItems[] = ['label' => $label, 'url' => $url];
+    }
+}
+$breadcrumbItems[] = ['label' => $pageTitle, 'url' => null];
+?>
+
+<!-- Page Banner Start -->
+<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover <?php echo $classes; ?>" style="background-image: url('<?php echo $bannerImage; ?>');">
+    <!-- Overlay PNG -->
+    <div class="banner-overlay"></div>
+    <div class="container">
+        <div class="banner-inner text-white mb-50">
+            <h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">
+                <?php echo htmlspecialchars($pageTitle); ?>
+            </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">
+                    <?php foreach ($breadcrumbItems as $item): ?>
+                        <li class="breadcrumb-item <?php echo $item['url'] === null ? 'active' : ''; ?>">
+                            <?php if ($item['url']): ?>
+                                <a href="<?php echo htmlspecialchars($item['url']); ?>">
+                                    <?php echo htmlspecialchars($item['label']); ?>
+                                </a>
+                            <?php else: ?>
+                                <?php echo htmlspecialchars($item['label']); ?>
+                            <?php endif; ?>
+                        </li>
+                    <?php endforeach; ?>
+                </ol>
+            </nav>
+        </div>
+    </div>
+</section>
+<!-- Page Banner End -->