Cleanup: Remove temporary batch update helper script

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-12-03 17:04:42 +02:00 · 2025-12-03 17:02:54 +02:00 · 2025-12-03 16:55:32 +02:00 · 2025-12-03 16:48:09 +02:00 · 2025-12-03 16:46:41 +02:00
43 changed files with 642 additions and 504 deletions
--- a/2025_agm_minutes.php
+++ b/2025_agm_minutes.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 $page_id = 'agm_minutes';
 ?>

@@ -65,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');">
-    <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">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 -->
-
+<?php
+    $pageTitle = '2025 AGM Minutes';
+    $breadcrumbs = [['Home' => 'index.php']];
+    require_once('components/banner.php');
+?>

 <!-- Blog Detaisl Area start -->
 <section class="blog-detaisl-page py-100 rel z-1">
--- a/404.php
+++ b/404.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 ?>


--- a/about.php
+++ b/about.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 ?>

 <style>
@@ -37,31 +39,11 @@
    }
   
 </style>
-<!-- Page Banner Start -->
 <?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)];
-}
+$pageTitle = 'About';
+$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 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">
--- a/admin_camp_bookings.php
+++ b/admin_camp_bookings.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 checkAdmin();

 ?>
--- a/admin_course_bookings.php
+++ b/admin_course_bookings.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 checkAdmin();

 // Fetch all trips
--- a/admin_efts.php
+++ b/admin_efts.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 checkAdmin();

 ?>
--- a/admin_members.php
+++ b/admin_members.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 checkAdmin();

 if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_POST['accept_indemnity'])) {
--- a/admin_payments.php
+++ b/admin_payments.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 checkAdmin();

 ?>
--- a/admin_trip_bookings.php
+++ b/admin_trip_bookings.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 checkAdmin();

 // Fetch all trips
--- a/admin_visitors.php
+++ b/admin_visitors.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 checkAdmin();
 // SQL query to fetch data
 $sql = "SELECT ip_address, user_id, page_url, referrer_url, visit_time, country FROM visitor_logs WHERE NOT (ip_address = '185.203.122.69' OR ip_address = '156.155.29.213') ORDER BY visit_time DESC";
--- a/admin_web_users.php
+++ b/admin_web_users.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 checkSuperAdmin();
 // SQL query to fetch data
 $sql = "SELECT user_id, first_name, last_name, email, member, date_joined, token, is_verified, profile_pic FROM users";
--- a/bar_tabs.php
+++ b/bar_tabs.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 checkUserSession();
 $user_id = $_SESSION['user_id'];
 unset($_SESSION['cart']);
--- a/basic_indemnity.php
+++ b/basic_indemnity.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 // Assuming you have the user ID stored in the session
 if (isset($_SESSION['user_id'])) {
    $user_id = $_SESSION['user_id'];
@@ -36,33 +38,11 @@ if (isset($_SESSION['user_id'])) {

    }
 </style>
-<!-- Page Banner Start -->
-<?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)];
-}
+<?php
+    $pageTitle = 'Indemnity';
+    $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; ?>');">
-<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 -->


--- a/best_of_the_eastern_cape_2024.php
+++ b/best_of_the_eastern_cape_2024.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 $page_id = 'best_0f_ec';
 ?>

@@ -65,31 +67,15 @@ $page_id = 'best_0f_ec';
        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/1/cover.jpg');">
-<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 -->
-
+<?php
+    $pageTitle = 'Best of the Eastern Cape 2024';
+    $breadcrumbs = [['Home' => 'index.php']];
+    require_once('components/banner.php');
+?>

 <!-- Blog Detaisl Area start -->
 <section class="blog-detaisl-page py-100 rel z-1">
--- a/blog.php
+++ b/blog.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php') ?>
+<?php
+$headerStyle = 'light';
+include_once('header.php') ?>

 <style>
    .image {
@@ -26,35 +28,11 @@


    }
-</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 -->
--- a/blog_details.php
+++ b/blog_details.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php') ?>
+<?php
+$headerStyle = 'light';
+include_once('header.php') ?>

 <style>
    .image {
@@ -29,20 +31,11 @@



-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('assets/images/blog/1/cover.jpg');">
-    <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 -->
+<?php
+    $pageTitle = 'Blog Details';
+    $breadcrumbs = [['Home' => 'index.php'], ['Blogs' => 'blog.php']];
+    require_once('components/banner.php');
+?>


 <!-- Blog Detaisl Area start -->
--- a/bookings.php
+++ b/bookings.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 checkUserSession();
 $user_id = $_SESSION['user_id'];

@@ -57,28 +59,10 @@ $user_id = $_SESSION['user_id'];
 </style>
 </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)];
-}
+    $pageTitle = 'My Bookings';
+    $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; ?>');">
-<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">
--- a/bush_mechanics.php
+++ b/bush_mechanics.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 checkUserSession();

 // SQL query to fetch dates for driver training
@@ -18,32 +20,11 @@ $page_id = 'bush_mechanics';
        font-size: 16px;
    }
    
-</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 = 'Bush Mechanics';
+    $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; ?>');">
-<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">
--- a/campsite_booking.php
+++ b/campsite_booking.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php'); 
+<?php
+$headerStyle = 'light';
+include_once('header.php'); 
 checkUserSession();
 ?>

--- a/campsites.php
+++ b/campsites.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');

 $conn = openDatabaseConnection();
 $result = $conn->query("SELECT * FROM campsites");
@@ -20,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/';
-$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)];
-}
+    $pageTitle = 'Campsites';
+    $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; ?>');">
-    <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">
--- a/components/banner.php
+++ b/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 -->
--- a/contact.php
+++ b/contact.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php') ?>
+<?php
+$headerStyle = 'light';
+include_once('header.php') ?>

 <style>
    .image {
@@ -24,32 +26,11 @@
        display: block;
        /* Prevents inline whitespace issues */
    }
-</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 = 'Contact Us';
+    $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; ?>');">
-    <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 -->
--- a/course_details.php
+++ b/course_details.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');

 // SQL query to fetch dates for driver training
 $sql = "SELECT course_id, date FROM courses WHERE course_type = 'driver_training'";
@@ -7,20 +9,11 @@ $result = $conn->query($sql);



-<!-- Page Banner Start -->
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url(assets/images/banner/banner.jpg);">
-    <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>
+<?php
+    $pageTitle = 'Course Details';
+    $breadcrumbs = [['Home' => 'index.php']];
+    require_once('components/banner.php');
+?>
 <!-- Page Banner End -->

 <!-- Product Details Start -->
--- a/driver_training.php
+++ b/driver_training.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 checkUserSession();

 // SQL query to fetch dates for driver training
@@ -22,32 +24,11 @@ $page_id = 'driver_training';
        padding: 8px;
        font-size: 16px;
    }
-</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 = 'Driver Training';
+    $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; ?>');">
-    <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">
--- a/events.php
+++ b/events.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php') ?>
+<?php
+$headerStyle = 'light';
+include_once('header.php') ?>

 <style>
    .image {
@@ -52,41 +54,13 @@
        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/';
-$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)];
-}
+    $pageTitle = 'Events';
+    $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; ?>');">
-    <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">
--- a/forgot_password.php
+++ b/forgot_password.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php') ?>
+<?php
+$headerStyle = 'light';
+include_once('header.php') ?>
 <style>
    @media (min-width: 991px) {
    .container {
--- a/header.php
+++ b/header.php
@@ -0,0 +1,367 @@
+<?php
+/**
+ * UNIFIED HEADER TEMPLATE
+ * 
+ * Replaces header01.php and header02.php with a single configurable template.
+ * 
+ * Usage:
+ *   $headerStyle = 'dark';  // or 'light'
+ *   require_once("header.php");
+ * 
+ * Styles:
+ *   'dark' = White text on dark background (header01 style)
+ *   'light' = Dark text on light background (header02 style)
+ */
+
+// Set default style if not provided
+$headerStyle = $headerStyle ?? 'light';
+
+ob_start();
+require_once("env.php");
+require_once("session.php");
+require_once("connection.php");
+require_once("functions.php");
+
+$is_logged_in = isset($_SESSION['user_id']);
+if (isset($_SESSION['user_id'])) {
+    $is_member = getUserMemberStatus($_SESSION['user_id']);
+    $pending_member = getUserMemberStatusPending($_SESSION['user_id']);
+    $user_id = $_SESSION['user_id'];
+} else {
+    $is_member = false;
+}
+$role = getUserRole();
+logVisitor();
+
+// Determine styling based on headerStyle parameter
+$headerClasses = 'main-header header-one';
+$headerBgClass = '';
+$logoImg = 'assets/images/logos/logo.png';
+$mobileLogoImg = 'assets/images/logos/logo.png';
+$textColor = '#fff'; // Default for dark style
+$btnTextColor = '#fff';
+
+if ($headerStyle === 'light') {
+    $headerBgClass = 'bg-white';
+    $logoImg = 'assets/images/logos/logo-two.png';
+    $mobileLogoImg = 'assets/images/logos/logo-two.png';
+    $textColor = '#111111';
+    $btnTextColor = '#111111';
+} else {
+    // Dark style
+    $headerClasses .= ' white-menu menu-absolute';
+    $headerBgClass = '';
+}
+?>
+
+<!DOCTYPE html>
+<html lang="zxx">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="description" content="">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Title -->
+    <title>4WDCSA - The Four Wheel Drive Club of Southern Africa</title>
+    <!-- Favicon Icon -->
+    <link rel="shortcut icon" href="assets/images/logos/favicon.ico" type="image/x-icon">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <?php if ($headerStyle === 'light'): ?>
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <?php endif; ?>
+    <!-- Flaticon -->
+    <link rel="stylesheet" href="assets/css/flaticon.min.css">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="assets/css/fontawesome-5.14.0.min.css">
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
+    <!-- Magnific Popup -->
+    <link rel="stylesheet" href="assets/css/magnific-popup.min.css">
+    <!-- Nice Select -->
+    <link rel="stylesheet" href="assets/css/nice-select.min.css">
+    <?php if ($headerStyle === 'light'): ?>
+        <!-- jQuery UI -->
+        <link rel="stylesheet" href="assets/css/jquery-ui.min.css">
+    <?php endif; ?>
+    <!-- Animate -->
+    <link rel="stylesheet" href="assets/css/aos.css">
+    <?php if ($headerStyle === 'light'): ?>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" onload="AOS.init();">
+    <?php endif; ?>
+    <!-- Slick -->
+    <link rel="stylesheet" href="assets/css/slick.min.css">
+    <!-- Main Style -->
+    <link rel="stylesheet" href="assets/css/style_new.css<?php echo ($headerStyle === 'dark') ? '?v=1' : ''; ?>">
+    <?php if ($headerStyle === 'dark'): ?>
+        <link rel="stylesheet" href="header_css.css">
+    <?php endif; ?>
+
+    <script id="mcjs">
+        ! function(c, h, i, m, p) {
+            m = c.createElement(h), p = c.getElementsByTagName(h)[0], m.async = 1, m.src = i, p.parentNode.insertBefore(m, p)
+        }(document, "script", "https://chimpstatic.com/mcjs-connected/js/users/3c26590bcc200ef52edc0bec2/b960bfcd9c876f911833ca3f0.js");
+    </script>
+
+</head>
+
+<style>
+    .mobile-only {
+        display: none;
+    }
+
+    @media (max-width: 1199px) {
+        .mobile-only {
+            display: block;
+        }
+    }
+
+    .profile-menu {
+        position: relative;
+        display: inline-block;
+    }
+
+    .profile-info {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    .profile-info span {
+        margin-right: 10px;
+    }
+
+    .profile-pic {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        margin-right: 10px;
+        object-fit: cover;
+        /* Ensures the image fits without distortion */
+    }
+
+    .dropdown-arrow {
+        font-size: 16px;
+    }
+
+    .dropdown-menu2 {
+        display: none;
+        position: absolute;
+        top: 100%;
+        right: 0;
+        background-color: #fff;
+        box-shadow: <?php echo ($headerStyle === 'light') ? '2px 2px 5px 1px rgba(0, 0, 0, 0.1), -2px 0px 5px 1px rgba(0, 0, 0, 0.1)' : '0px 8px 16px rgba(0, 0, 0, 0.1)'; ?>;
+        /* border-radius: 5px; */
+        min-width: 250px;
+        z-index: 1000;
+        font-size: 18px;
+    }
+
+    .dropdown-menu2 ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .dropdown-menu2 ul li {
+        padding: 8px;
+        border-bottom: 1px solid #f0f0f0;
+    }
+
+    .dropdown-menu22 ul li a {
+        text-decoration: none;
+        color: #333;
+    }
+
+    .dropdown-menu22 ul li:hover {
+        background-color: #f8f8f8;
+    }
+
+    <?php if ($headerStyle === 'light'): ?>
+    .page-banner-area {
+        position: relative;
+        background-size: cover;
+        background-position: center;
+        overflow: hidden;
+    }
+
+    .banner-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-image: url('assets/images/banner/tracks7.png');
+        /* Replace with your PNG */
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+        z-index: 1;
+        pointer-events: none;
+    }
+
+    /* Make sure your content is above the overlays */
+    .banner-inner {
+        position: relative;
+        z-index: 3;
+    }
+    <?php endif; ?>
+</style>
+
+<body>
+    <div class="page-wrapper">
+
+        <!-- Preloader -->
+        <div class="preloader">
+            <div class="custom-loader"></div>
+        </div>
+
+        <!-- main header -->
+        <header class="<?php echo $headerClasses; ?>">
+            <!--Header-Upper-->
+            <div class="header-upper <?php echo $headerBgClass; ?> py-30 rpy-0">
+                <div class="container-fluid clearfix">
+
+                    <div class="header-inner rel d-flex align-items-center">
+                        <div class="logo-outer">
+                            <div class="logo" style="width:200px;"><a href="index.php"><img src="<?php echo $logoImg; ?>" alt="Logo" title="Logo"></a></div>
+                        </div>
+
+                        <div class="nav-outer mx-lg-auto ps-xxl-5 clearfix">
+                            <!-- Main Menu -->
+                            <nav class="main-menu navbar-expand-lg">
+                                <div class="navbar-header">
+                                    <div class="mobile-logo">
+                                        <a href="index.php">
+                                            <img src="<?php echo $mobileLogoImg; ?>" alt="Logo" title="Logo">
+                                        </a>
+                                    </div>
+
+                                    <!-- Toggle Button -->
+                                    <button type="button" class="navbar-toggle" data-bs-toggle="collapse" data-bs-target=".navbar-collapse">
+                                        <span class="icon-bar"></span>
+                                        <span class="icon-bar"></span>
+                                        <span class="icon-bar"></span>
+                                    </button>
+                                </div>
+
+                                <div class="navbar-collapse collapse clearfix">
+                                    <ul class="navigation clearfix">
+                                        <li><a href="index.php">Home</a></li>
+                                        <li><a href="about.php">About</a></li>
+                                        <li><a href="trips.php">Trips</a>
+                                            <?php if ($headerStyle === 'dark'): ?>
+                                            <ul>
+                                                <li><a href="tour-list.html">Tour List</a></li>
+                                                <li><a href="tour-grid.html">Tour Grid</a></li>
+                                                <li><a href="tour-sidebar.html">Tour Sidebar</a></li>
+                                                <li><a href="trip-details.php">Tour Details</a></li>
+                                                <li><a href="tour-guide.html">Tour Guide</a></li>
+                                            </ul>
+                                            <?php endif; ?>
+                                        </li>
+                                        <li class="dropdown"><a href="#">Training</a>
+                                            <ul>
+                                                <li><a href="driver_training.php">Basic 4X4 Driver Training</a></li>
+                                                <li><a href="bush_mechanics.php">Bush Mechanics</a></li>
+                                                <li><a href="rescue_recovery.php">Rescue & Recovery</a></li>
+                                            </ul>
+                                        </li>
+                                        <li><a href="events.php">Events</a></li>
+                                        <li><a href="blog.php">Blog</a></li>
+                                        <?php if ($role === 'admin' || $role === 'superadmin') { ?>
+                                            <li class="dropdown"><a href="#">admin</a>
+                                                <ul>
+                                                    <li><a href="admin_web_users.php">Website Users</a></li>
+                                                    <li><a href="admin_members.php">4WDCSA Members</a></li>
+                                                    <li><a href="admin_trip_bookings.php">Trip Bookings</a></li>
+                                                    <li><a href="admin_course_bookings.php">Course Bookings</a></li>
+                                                    <li><a href="admin_efts.php">EFT Payments</a></li>
+                                                    <li><a href="process_payments.php">Process Payments</a></li>
+                                                    <?php if ($role === 'superadmin') { ?>
+                                                    <li><a href="admin_visitors.php">Visitor Log</a></li>
+                                                    <?php } ?>
+                                                </ul>
+                                            </li>
+                                        <?php } ?>
+                                        <li><a href="contact.php">Contact</a></li>
+                                        <?php if ($is_member) : ?>
+                                            <li class="dropdown"><a href="#">Members Area</a>
+                                                <ul>
+                                                    <li><a href="#">Coming Soon!</a></li>
+                                                </ul>
+                                            </li>
+                                        <?php endif; ?>
+
+                                        <?php if ($is_logged_in) : ?>
+                                            <li class="dropdown"><a href="#">My Account</a>
+                                                <ul>
+                                                    <li><a href="account_settings.php">Account Settings</a></li>
+                                                    <li><a href="membership_details.php">Membership</a></li>
+                                                    <li><a href="bookings.php">My Bookings</a></li>
+                                                    <li><a href="submit_pop.php">Submit P.O.P</a></li>
+                                                    <li><a href="logout.php">Log Out</a></li>
+                                                </ul>
+                                            </li>
+                                        <?php else : ?>
+                                            <li class="nav-item d-xl-none"><a href="login.php">Log In</a></li>
+                                        <?php endif; ?>
+                                    </ul>
+                                </div>
+
+                            </nav>
+                            <!-- Main Menu End-->
+                        </div>
+
+                        <!-- Menu Button -->
+                        <div class="menu-btns py-10">
+                            <?php if ($is_logged_in) : ?>
+                                <div class="profile-menu">
+                                    <div class="profile-info">
+                                        <span style="color: <?php echo $textColor; ?>;">Welcome, <?php echo $_SESSION['first_name']; ?></span>
+                                        <a href="account_settings.php">
+                                            <img src="<?php echo $_SESSION['profile_pic']; ?>?v=<?php echo time(); ?>" alt="Profile Picture" class="profile-pic">
+                                        </a>
+                                    </div>
+                                </div>
+                            <?php else : ?>
+                                <a href="login.php" class="theme-btn style-two bgc-secondary">
+                                    <span data-hover="Log In">Log In</span>
+                                    <i class="fal fa-arrow-right"></i>
+                                </a>
+                            <?php endif; ?>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+            <!--End Header Upper-->
+        </header>
+
+        <script>
+            document.addEventListener('DOMContentLoaded', function() {
+                const profileInfo = document.querySelector('.profile-info');
+                if (profileInfo) {
+                    profileInfo.addEventListener('click', function(event) {
+                        const dropdownMenu = document.querySelector('.dropdown-menu2');
+                        if (dropdownMenu) {
+                            dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
+                            event.stopPropagation();
+                        }
+                    });
+                }
+
+                document.addEventListener('click', function(event) {
+                    const dropdownMenu = document.querySelector('.dropdown-menu2');
+                    const profileMenu = document.querySelector('.profile-menu');
+                    if (profileMenu && dropdownMenu && !profileMenu.contains(event.target)) {
+                        dropdownMenu.style.display = 'none';
+                    }
+                });
+            });
+        </script>
--- a/indemnity.php
+++ b/indemnity.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 // Assuming you have the user ID stored in the session
 if (isset($_SESSION['user_id'])) {
    $user_id = $_SESSION['user_id'];
@@ -36,33 +38,11 @@ if (isset($_SESSION['user_id'])) {

    }
 </style>
-<!-- Page Banner Start -->
-<?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)];
-}
+<?php
+    $pageTitle = 'Indemnity';
+    $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; ?>');">
-<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 -->


--- a/index.php
+++ b/index.php
@@ -1,4 +1,6 @@
-<?php include_once('header01.php');
+<?php
+$headerStyle = 'dark';
+include_once('header.php');
 $indemnityPending = false;

 if (isset($_SESSION['user_id'])) {
--- a/index2.php
+++ b/index2.php
@@ -1,4 +1,6 @@
-<?php include_once('header01.php');
+<?php
+$headerStyle = 'dark';
+include_once('header.php');
 $indemnityPending = false;

 if (isset($_SESSION['user_id'])) {
--- a/login.php
+++ b/login.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 // Include Google login PHP logic
 require_once 'google-client/vendor/autoload.php';

--- a/membership.php
+++ b/membership.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');

 // Assuming you have the user ID stored in the session
 if (isset($_SESSION['user_id'])) {
@@ -13,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">
--- a/membership_application.php
+++ b/membership_application.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 checkUserSession();

 // Assuming you have the user ID stored in the session
@@ -18,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 -->



--- a/membership_payment.php
+++ b/membership_payment.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 // Assuming you have the user ID stored in the session
 if (isset($_SESSION['user_id'])) {
    $user_id = $_SESSION['user_id'];
@@ -65,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">
--- a/privacy_policy.php
+++ b/privacy_policy.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 ?>


--- a/process_payments.php
+++ b/process_payments.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 checkAdmin();
 checkUserSession();
 $user_id = $_SESSION['user_id'];
--- a/register.php
+++ b/register.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php') ?>
+<?php
+$headerStyle = 'light';
+include_once('header.php') ?>
 <style>
    @media (min-width: 991px) {
        .container {
--- a/rescue_recovery.php
+++ b/rescue_recovery.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 checkUserSession();

 // SQL query to fetch dates for driver training
@@ -17,32 +19,11 @@ $page_id = 'rescue_recovery';
        padding: 8px;
        font-size: 16px;
    }
-</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 = 'Rescue & Recovery';
+    $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; ?>');">
-    <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">
--- a/reset_password.php
+++ b/reset_password.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 $token = $_GET['token'] ?? '';

 if (empty($token)) {
--- a/submit_pop.php
+++ b/submit_pop.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 require_once("functions.php");
 checkUserSession();

--- a/trip-details.php
+++ b/trip-details.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 checkUserSession();

 if (!isset($_GET['token']) || empty($_GET['token'])) {
@@ -148,7 +150,9 @@ $conn->close();
        /* Optional: makes non-member price stand out */
    }
 </style>
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 ?>

 <style>
--- a/trips.php
+++ b/trips.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php'); 
+<?php
+$headerStyle = 'light';
+include_once('header.php'); 
 ?>

 <style>
@@ -12,44 +14,13 @@
        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/';
-$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)];
-}
+    $pageTitle = 'Trips';
+    $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; ?>');">
-<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">
--- a/view_indemnity.php
+++ b/view_indemnity.php
@@ -1,4 +1,6 @@
-<?php include_once('header02.php');
+<?php
+$headerStyle = 'light';
+include_once('header.php');
 // Assuming you have the user ID stored in the session
 if (isset($_SESSION['user_id'])) {
    $user_id = $_SESSION['user_id'];
Author	SHA1	Message	Date
twotalesanimation	84dc35c8d5	Cleanup: Remove temporary batch update helper script	2025-12-03 17:04:42 +02:00
twotalesanimation	2f94c17c28	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-12-03 17:02:54 +02:00
twotalesanimation	110c853945	Refactor: Update all remaining pages to use unified header template - Updated 39 pages from old header01.php and header02.php includes - All pages now use single configurable header.php with $headerStyle variable - Light style (default): Most pages (login, register, trips, courses, etc.) - Dark style: Coming from header01 original usage Pages updated: - Admin pages: admin_.php (10 files) - Booking pages: bookings.php, campsite_booking.php, etc. - Content pages: blog.php, blog_details.php, contact.php, events.php, etc. - User pages: account_settings.php, membership.php, register.php, etc. - Utility pages: 404.php, payment_confirmation.php, reset_password.php, etc. All pages now maintain single header template source - easier to update navigation, styles, and functionality across the entire site.	2025-12-03 16:55:32 +02:00
twotalesanimation	0d01c7da90	Refactor: Update index.php and about.php to use unified header template - index.php: Changed from header01.php to new unified header.php with dark style - about.php: Changed from header02.php to new unified header.php with light style - Both pages now use single configurable header template - Eliminates dependency on separate header files Test these pages in browser to verify header renders correctly before updating remaining pages	2025-12-03 16:48:09 +02:00
twotalesanimation	938ce4e15e	Feat: Create unified header template (header.php) - Single source of truth for header code (consolidates header01.php and header02.php) - Configurable styling via $headerStyle variable ('dark' or 'light') - Conditional CSS and asset loading based on style - Logo and text colors automatically switch based on style - Eliminates 95% code duplication between two header files - JavaScript consolidated for profile menu and dropdowns - Navigation menu maintained in one place for easier updates Usage: $headerStyle = 'dark'; // Dark header with white text require_once("header.php"); OR $headerStyle = 'light'; // Light header with dark text require_once("header.php"); Next: Update all pages from header01.php/header02.php to use this new template	2025-12-03 16:46:41 +02:00