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

2025_agm_minutes.php

@@ -67,28 +67,15 @@ $page_id = 'agm_minutes';
         float: right;
     }
 
-    .clearfix {
+
-        clear: both;
-    }
 
 </style>
 
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('assets/images/blog/2/agm.jpg');">
+<?php
-    <div class="banner-overlay"></div>
+    $pageTitle = '2025 AGM Minutes';
-    <div class="container">
+    $breadcrumbs = [['Home' => 'index.php']];
-        <div class="banner-inner text-white">
+    require_once('components/banner.php');
-            <h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">2025 AGM Minutes & Chairman's Report</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">2025 AGM Minutes & Chairman's Report</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
-<!-- Page Banner End -->
-
 
 <!-- Blog Detaisl Area start -->
 <section class="blog-detaisl-page py-100 rel z-1">

about.php

@@ -39,31 +39,11 @@ include_once('header.php');
     }
    
 </style>
-<!-- Page Banner Start -->
 <?php
-$bannerFolder = 'assets/images/banners/';
+$pageTitle = 'About';
-$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
+$breadcrumbs = [['Home' => 'index.php']];
-
+require_once('components/banner.php');
-$randomBanner = 'assets/images/base4/camping.jpg'; // default fallback
-if (!empty($bannerImages)) {
-    $randomBanner = $bannerImages[array_rand($bannerImages)];
-}
 ?>
-<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 mb-50">
-            <h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">About</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">About</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
 <!-- Benefit Area start -->
 <section class="benefit-area mt-100 rel z-1">
     <div class="container">

basic_indemnity.php

@@ -38,33 +38,11 @@ if (isset($_SESSION['user_id'])) {
 
     }
 </style>
-<!-- Page Banner Start -->
 <?php
-$bannerFolder = 'assets/images/banners/';
+    $pageTitle = 'Indemnity';
-$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
+    $breadcrumbs = [['Home' => 'index.php']];
-
+    require_once('components/banner.php');
-$randomBanner = 'assets/images/base4/camping.jpg'; // default fallback
-if (!empty($bannerImages)) {
-    $randomBanner = $bannerImages[array_rand($bannerImages)];
-}
 ?>
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
-<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">Indemnity</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 ">Membership</li>
-                    <li class="breadcrumb-item ">Application</li>
-                    <li class="breadcrumb-item active">Indemnity</li>
-                    <li class="breadcrumb-item ">Payment</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
 <!-- Page Banner End -->
 
 

batch_update_banners.php

@@ -0,0 +1,94 @@
+<?php
+/**
+ * BATCH UPDATE BANNER COMPONENTS - ROBUST
+ * Updates pages using the page-banner-area pattern to use the reusable banner component
+ */
+
+// Configuration for each file: filename => ['pageTitle', [breadcrumbs]]
+$filesToUpdate = [
+    'blog.php' => ['Blogs', [['Home' => 'index.php']]],
+    'blog_details.php' => ['Blog Details', [['Home' => 'index.php'], ['Blogs' => 'blog.php']]],
+    'bookings.php' => ['Bookings', [['Home' => 'index.php']]],
+    'campsites.php' => ['Campsites', [['Home' => 'index.php']]],
+    'contact.php' => ['Contact Us', [['Home' => 'index.php']]],
+    'driver_training.php' => ['Driver Training', [['Home' => 'index.php']]],
+    'events.php' => ['Events', [['Home' => 'index.php']]],
+    'membership.php' => ['Membership', [['Home' => 'index.php']]],
+    'membership_application.php' => ['Membership Application', [['Home' => 'index.php'], ['Membership' => 'membership.php']]],
+    'membership_payment.php' => ['Membership Payment', [['Home' => 'index.php'], ['Membership' => 'membership.php']]],
+    'trips.php' => ['Trips', [['Home' => 'index.php']]],
+    'bush_mechanics.php' => ['Bush Mechanics', [['Home' => 'index.php']]],
+    'rescue_recovery.php' => ['Rescue & Recovery', [['Home' => 'index.php']]],
+    'best_of_the_eastern_cape_2024.php' => ['Best of Eastern Cape 2024', [['Home' => 'index.php']]],
+    '2025_agm_minutes.php' => ['2025 AGM Minutes', [['Home' => 'index.php']]],
+];
+
+$updated = 0;
+$skipped = 0;
+$failed = 0;
+
+foreach ($filesToUpdate as $filename => $config) {
+    $filepath = __DIR__ . '/' . $filename;
+    
+    if (!file_exists($filepath)) {
+        echo "[MISSING] $filename\n";
+        $failed++;
+        continue;
+    }
+    
+    $content = file_get_contents($filepath);
+    
+    // Check if already uses banner component
+    if (strpos($content, 'components/banner.php') !== false) {
+        echo "[SKIP] $filename - Already uses banner component\n";
+        $skipped++;
+        continue;
+    }
+    
+    // Check if file has page-banner-area
+    if (strpos($content, 'page-banner-area') === false) {
+        echo "[SKIP] $filename - No page-banner-area found\n";
+        $skipped++;
+        continue;
+    }
+    
+    list($pageTitle, $breadcrumbs) = $config;
+    
+    // Format breadcrumbs array for PHP code
+    $breadcrumbStr = '[';
+    foreach ($breadcrumbs as $item) {
+        $breadcrumbStr .= '[';
+        foreach ($item as $label => $url) {
+            $breadcrumbStr .= "'{$label}' => '{$url}', ";
+        }
+        $breadcrumbStr = rtrim($breadcrumbStr, ', ') . '], ';
+    }
+    $breadcrumbStr = rtrim($breadcrumbStr, ', ') . ']';
+    
+    // Build replacement code
+    $replacement = "<?php\n    \$pageTitle = '{$pageTitle}';\n    \$breadcrumbs = {$breadcrumbStr};\n    require_once('components/banner.php');\n?>";
+    
+    // Pattern: Match from "<?php $bannerFolder" through entire banner section including "<!-- Page Banner End -->"
+    // This handles the PHP setup code + HTML section + closing comment
+    $pattern = '/[\s]*<\?php\s*\$bannerFolder\s*=\s*[\'"]assets\/images\/banners\/[\'"];[\s\S]*?<\/section>\s*<!-- Page Banner End -->/';
+    
+    $newContent = preg_replace($pattern, $replacement, $content, 1, $count);
+    
+    if ($count > 0 && file_put_contents($filepath, $newContent) !== false) {
+        $updated++;
+        echo "[UPDATE] $filename\n";
+    } else {
+        $failed++;
+        echo "[FAIL] $filename\n";
+    }
+}
+
+echo "\n";
+echo str_repeat("=", 50) . "\n";
+echo "BATCH UPDATE SUMMARY\n";
+echo str_repeat("=", 50) . "\n";
+echo "Updated: $updated\n";
+echo "Skipped: $skipped\n";
+echo "Failed:  $failed\n";
+echo str_repeat("=", 50) . "\n";
+?>

best_of_the_eastern_cape_2024.php

@@ -67,31 +67,15 @@ $page_id = 'best_0f_ec';
         float: right;
     }
 
-    .clearfix {
+
-        clear: both;
-    }
 
 </style>
 
-
+<?php
-
+    $pageTitle = 'Best of the Eastern Cape 2024';
-
+    $breadcrumbs = [['Home' => 'index.php']];
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('assets/images/blog/1/cover.jpg');">
+    require_once('components/banner.php');
-<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">Best of the Eastern Cape 2024</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">Best of the Eastern Cape 2024</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
-<!-- Page Banner End -->
-
 
 <!-- Blog Detaisl Area start -->
 <section class="blog-detaisl-page py-100 rel z-1">

blog.php

@@ -28,35 +28,11 @@ include_once('header.php') ?>
 
 
     }
-</style>
+</style><?php
-
+    $pageTitle = 'Blogs';
-
+    $breadcrumbs = [['Home' => 'index.php']];
-
+    require_once('components/banner.php');
-<?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)];
-}
 ?>
-<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 -->

blog_details.php

@@ -31,20 +31,11 @@ include_once('header.php') ?>
 
 
 
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('assets/images/blog/1/cover.jpg');">
+<?php
-    <div class="container">
+    $pageTitle = 'Blog Details';
-        <div class="banner-inner text-white">
+    $breadcrumbs = [['Home' => 'index.php'], ['Blogs' => 'blog.php']];
-            <h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">Best of the Eastern Cape 2024</h2>
+    require_once('components/banner.php');
-            <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">Best of the Eastern Cape 2024</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
-<!-- Page Banner End -->
 
 
 <!-- Blog Detaisl Area start -->

bookings.php

@@ -59,28 +59,10 @@ $user_id = $_SESSION['user_id'];
 </style>
 </style>
 <?php
-$bannerFolder = 'assets/images/banners/';
+    $pageTitle = 'My Bookings';
-$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
+    $breadcrumbs = [['Home' => 'index.php']];
-
+    require_once('components/banner.php');
-$randomBanner = 'assets/images/base4/camping.jpg'; // default fallback
-if (!empty($bannerImages)) {
-    $randomBanner = $bannerImages[array_rand($bannerImages)];
-}
 ?>
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
-<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">My Bookings</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">My bookings</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
 
 <!-- Tour List Area start -->
 <section class="tour-list-page py-100 rel z-1">

bush_mechanics.php

@@ -20,32 +20,11 @@ $page_id = 'bush_mechanics';
         font-size: 16px;
     }
     
-</style>
+</style><?php
-
+    $pageTitle = 'Bush Mechanics';
-<?php
+    $breadcrumbs = [['Home' => 'index.php']];
-$bannerFolder = 'assets/images/banners/';
+    require_once('components/banner.php');
-$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)];
-}
 ?>
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
-<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">Bush Mechanics</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">Bush Mechanics</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
-<!-- Page Banner End -->
 
 <!-- Product Details Start -->
 <section class="product-details pt-100">

campsites.php

@@ -22,33 +22,14 @@ while ($row = $result->fetch_assoc()) {
 
     .info-box img {
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    }
     
 </style>
 
 <?php
-$bannerFolder = 'assets/images/banners/';
+    $pageTitle = 'Campsites';
-$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
+    $breadcrumbs = [['Home' => 'index.php']];
-
+    require_once('components/banner.php');
-$randomBanner = 'assets/images/base4/camping.jpg'; // default fallback
-if (!empty($bannerImages)) {
-    $randomBanner = $bannerImages[array_rand($bannerImages)];
-}
 ?>
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
-    <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">Campsites</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">Campsites</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
 
 <!-- Tour List Area start -->
 <section class="tour-list-page py-100 rel z-1">

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 -->

contact.php

@@ -26,32 +26,11 @@ include_once('header.php') ?>
         display: block;
         /* Prevents inline whitespace issues */
     }
-</style>
+</style><?php
-
+    $pageTitle = 'Contact Us';
-<?php
+    $breadcrumbs = [['Home' => 'index.php']];
-$bannerFolder = 'assets/images/banners/';
+    require_once('components/banner.php');
-$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)];
-}
 ?>
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
-    <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">Contact Us</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.html">Home</a></li>
-                    <li class="breadcrumb-item active">Contact Us</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
-<!-- Page Banner End -->
 
 
 <!-- Contact Info Area start -->

course_details.php

@@ -9,20 +9,11 @@ $result = $conn->query($sql);
 
 
 
-<!-- Page Banner Start -->
+<?php
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url(assets/images/banner/banner.jpg);">
+    $pageTitle = 'Course Details';
-    <div class="container">
+    $breadcrumbs = [['Home' => 'index.php']];
-        <div class="banner-inner text-white">
+    require_once('components/banner.php');
-            <h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">4X4 Driver Training</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">4X4 Driver Training</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
 <!-- Page Banner End -->
 
 <!-- Product Details Start -->

driver_training.php

@@ -24,32 +24,11 @@ $page_id = 'driver_training';
         padding: 8px;
         font-size: 16px;
     }
-</style>
+</style><?php
-
+    $pageTitle = 'Driver Training';
-<?php
+    $breadcrumbs = [['Home' => 'index.php']];
-$bannerFolder = 'assets/images/banners/';
+    require_once('components/banner.php');
-$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)];
-}
 ?>
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
-    <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">4X4 Driver Training</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">4X4 Driver Training</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
-<!-- Page Banner End -->
 
 <!-- Product Details Start -->
 <section class="product-details pt-100">

events.php

@@ -54,41 +54,13 @@ include_once('header.php') ?>
         height: auto;
         border-radius: 5px;
     }
-
-    .custom-modal-close {
-        position: absolute;
-        top: 10px;
-        right: 20px;
-        font-size: 30px;
-        font-weight: bold;
-        color: #333;
-        cursor: pointer;
-    }
 </style>
 
 <?php
-$bannerFolder = 'assets/images/banners/';
+    $pageTitle = 'Events';
-$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
+    $breadcrumbs = [['Home' => 'index.php']];
-
+    require_once('components/banner.php');
-$randomBanner = 'assets/images/base4/camping.jpg'; // default fallback
-if (!empty($bannerImages)) {
-    $randomBanner = $bannerImages[array_rand($bannerImages)];
-}
 ?>
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
-    <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">4WDCSA events</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">4WDCSA Events</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
 
 <!-- Tour List Area start -->
 <section class="tour-list-page py-100 rel z-1">

indemnity.php

@@ -38,33 +38,11 @@ if (isset($_SESSION['user_id'])) {
 
     }
 </style>
-<!-- Page Banner Start -->
 <?php
-$bannerFolder = 'assets/images/banners/';
+    $pageTitle = 'Indemnity';
-$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
+    $breadcrumbs = [['Home' => 'index.php']];
-
+    require_once('components/banner.php');
-$randomBanner = 'assets/images/base4/camping.jpg'; // default fallback
-if (!empty($bannerImages)) {
-    $randomBanner = $bannerImages[array_rand($bannerImages)];
-}
 ?>
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
-<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">Indemnity</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 ">Membership</li>
-                    <li class="breadcrumb-item ">Application</li>
-                    <li class="breadcrumb-item active">Indemnity</li>
-                    <li class="breadcrumb-item ">Payment</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
 <!-- Page Banner End -->
 
 

membership.php

@@ -15,33 +15,11 @@ $stmt->bind_param("i", $user_id);
 $stmt->execute();
 $result = $stmt->get_result();
 $user = $result->fetch_assoc();
+?><?php
+    $pageTitle = 'Membership';
+    $breadcrumbs = [['Home' => 'index.php']];
+    require_once('components/banner.php');
 ?>
-<?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)];
-}
-?>
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
-<div class="banner-overlay"></div>
-    <div class="container">
-        <div class="banner-inner text-white">
-            <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">Membership</li>
-                    <li class="breadcrumb-item ">Application</li>
-                    <li class="breadcrumb-item ">Indemnity</li>
-                    <li class="breadcrumb-item ">Payment</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
-<!-- Page Banner End -->
 <!-- Contact Form Area start -->
 <section class="about-us-area py-100 rpb-90 rel z-1">
     <div class="container">

membership_application.php

@@ -20,34 +20,11 @@ $stmt->bind_param("i", $user_id);
 $stmt->execute();
 $result = $stmt->get_result();
 $user = $result->fetch_assoc();
+?><?php
+    $pageTitle = 'Membership Application';
+    $breadcrumbs = [['Home' => 'index.php'], ['Membership' => 'membership.php']];
+    require_once('components/banner.php');
 ?>
-<?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)];
-}
-?>
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
-<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">Application</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 ">Membership</li>
-                    <li class="breadcrumb-item active">Application</li>
-                    <li class="breadcrumb-item ">Indemnity</li>
-                    <li class="breadcrumb-item ">Payment</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
-<!-- Page Banner End -->
 
 
 

membership_payment.php

@@ -67,36 +67,11 @@ $stmt->fetch();
 $stmt->close();
 
 $conn->close();
+?><?php
+    $pageTitle = 'Membership Payment';
+    $breadcrumbs = [['Home' => 'index.php'], ['Membership' => 'membership.php']];
+    require_once('components/banner.php');
 ?>
-
-
-<?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)];
-}
-?>
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
-<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">Payment</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 ">Membership</li>
-                    <li class="breadcrumb-item ">Application</li>
-                    <li class="breadcrumb-item ">Indemnity</li>
-                    <li class="breadcrumb-item active">Payment</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
-<!-- Page Banner End -->
 <!-- Contact Form Area start -->
 <section class="about-us-area py-100 rpb-90 rel z-1">
     <div class="container">

rescue_recovery.php

@@ -19,32 +19,11 @@ $page_id = 'rescue_recovery';
         padding: 8px;
         font-size: 16px;
     }
-</style>
+</style><?php
-
+    $pageTitle = 'Rescue & Recovery';
-<?php
+    $breadcrumbs = [['Home' => 'index.php']];
-$bannerFolder = 'assets/images/banners/';
+    require_once('components/banner.php');
-$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)];
-}
 ?>
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
-    <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">Rescue & Recovery</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">Rescue & Recovery</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
-<!-- Page Banner End -->
 
 <!-- Product Details Start -->
 <section class="product-details pt-100">

trips.php

@@ -14,44 +14,13 @@ include_once('header.php');
         display: block;
         /* Ensure proper block behavior */
     }
-
-    .image img {
-        width: 100%;
-        /* Image scales to fill the container */
-        height: 100%;
-        /* Image scales to fill the container */
-        object-fit: cover;
-        /* Fills the container while maintaining aspect ratio */
-        object-position: top;
-        /* Aligns the top of the image with the top of the container */
-        display: block;
-        /* Prevents inline whitespace issues */
-    }
 </style>
 
 <?php
-$bannerFolder = 'assets/images/banners/';
+    $pageTitle = 'Trips';
-$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
+    $breadcrumbs = [['Home' => 'index.php']];
-
+    require_once('components/banner.php');
-$randomBanner = 'assets/images/base4/camping.jpg'; // default fallback
-if (!empty($bannerImages)) {
-    $randomBanner = $bannerImages[array_rand($bannerImages)];
-}
 ?>
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
-<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">4WDCSA Trips</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">4WDCSA Trips</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
 
 <!-- Tour List Area start -->
 <section class="tour-list-page py-100 rel z-1">