TwoTalesDev/4WDCSA.co.za
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Consolidate: Create reusable banner component and update 23 pages

Browse Source 
- 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
This commit is contained in:
twotalesanimation
2025-12-03 17:02:54 +02:00
parent 110c853945
commit 2f94c17c28
21 changed files with 259 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
2025_agm_minutes.php
View File

@@ -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');">
<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">

26
about.php
View File

@@ -39,31 +39,11 @@ include_once('header.php');
}
</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">

28
basic_indemnity.php
View File

@@ -38,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)];
}
$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 -->

94
batch_update_banners.php Normal file
View File

@@ -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";
?>

28
best_of_the_eastern_cape_2024.php
View File

@@ -67,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">

32
blog.php
View File

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

19
blog_details.php
View File

@@ -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');">
<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 -->

24
bookings.php
View File

@@ -59,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">

29
bush_mechanics.php
View File

@@ -20,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">

25
campsites.php
View File

@@ -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/';
$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">

72
components/banner.php Normal file
View File

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

29
contact.php
View File

@@ -26,32 +26,11 @@ include_once('header.php') ?>
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 -->

19
course_details.php
View File

@@ -9,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 -->

29
driver_training.php
View File

@@ -24,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">

34
events.php
View File

@@ -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/';
$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">

28
indemnity.php
View File

@@ -38,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)];
}
$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 -->

30
membership.php
View File

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

31
membership_application.php
View File

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

33
membership_payment.php
View File

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

29
rescue_recovery.php
View File

@@ -19,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">

37
trips.php
View File

@@ -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/';
$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">