Files
4WDCSA.co.za/contact.php
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

111 lines
5.1 KiB
PHP

<?php
$headerStyle = 'light';
include_once('header.php') ?>
<style>
.image {
width: 400px;
/* Set your desired width */
height: 320px;
/* Set your desired height */
overflow: hidden;
/* Hide any overflow */
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
$pageTitle = 'Contact Us';
$breadcrumbs = [['Home' => 'index.php']];
require_once('components/banner.php');
?>
<!-- Contact Info Area start -->
<section class="contact-info-area pt-100 rel z-1">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-4">
<div class="contact-info-content mb-30 rmb-55" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
<div class="section-title mb-30">
<h2>For any queries, please don't hesitate to contact us:</h2>
</div>
<!-- <p>Our dedicated support team is always ready to assist you with any questions or issues, offering prompt and personalized solutions to meet your needs.</p> -->
<!-- <div class="features-team-box mt-40">
<h6>85+ Expert Team member</h6>
<div class="feature-authors">
<img src="assets/images/features/feature-author1.jpg" alt="Author">
<img src="assets/images/features/feature-author2.jpg" alt="Author">
<img src="assets/images/features/feature-author3.jpg" alt="Author">
<img src="assets/images/features/feature-author4.jpg" alt="Author">
<img src="assets/images/features/feature-author5.jpg" alt="Author">
<img src="assets/images/features/feature-author6.jpg" alt="Author">
<img src="assets/images/features/feature-author7.jpg" alt="Author">
<span>+</span>
</div>
</div> -->
</div>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-md-6">
<div class="contact-info-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50" data-aos-delay="50">
<div class="icon"><i class="fas fa-envelope"></i></div>
<div class="content">
<h5>Need Help & Support</h5>
<div class="text"><i class="far fa-envelope"></i> <a href="mailto:info@4wdcsa.co.za">info@4wdcsa.co.za</a></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="contact-info-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50" data-aos-delay="100">
<div class="icon"><i class="fas fa-phone"></i></div>
<div class="content">
<h5>Need Anything Urgent</h5>
<div class="text"><i class="far fa-phone"></i> <a href="callto:+27 079 065 2795">+2779 065 2795</a></div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="contact-info-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50" data-aos-delay="50">
<div class="icon"><i class="fas fa-map-marker-alt"></i></div>
<div class="content">
<h5>BASE 4</h5>
<div class="text"><i class="fal fa-map-marker-alt"></i> Plot 50, Gemstone Rd, Doornrandje, Centurion, 0157</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Info Area end -->
<!-- Contact Form Area start -->
<!-- -->
<!-- Contact Form Area end -->
<!-- Contact Map Start -->
<div class="contact-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d818.9371187805272!2d28.000391592597513!3d-25.864399472588936!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sen!2sza!4v1744639736430!5m2!1sen!2sza" style="border:0; width: 100%;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!-- Contact Map End -->
<?php include_once("insta_footer.php"); ?>