<?php
include 'navbar.php';
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Building Construction | Tbil Properties</title>
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<style>
  /* Hero Section */
  .hero-section {
    height: 90vh;
    background: url('assets/img/tz1.jpg') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    position: relative;
  }
  .hero-section::before {
    content: '';
    position: absolute;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.5);
  }
  .hero-section .hero-content {
    position: relative;
    z-index: 2;
  }

  /* Services Section */
  .service-card {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transition: all .3s ease;
    cursor: pointer;
    text-align: center;
  }
  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  }
  .service-icon {
    font-size: 40px;
    margin-bottom: 15px;
    color: #000; /* changed from blue to black */
  }

  /* Process Section */
  .process-step {
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    background: #f9f9f9;
    transition: all .3s ease;
  }
  .process-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  }
  .process-step i {
    font-size: 40px;
    color: #000; /* changed from blue to black */
    margin-bottom: 15px;
  }
  /* Hero Section */
  .hero-section {
    height: 90vh;
    background: url('assets/img/tz1.jpg') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    position: relative;
  }
  .hero-section::before {
    content: '';
    position: absolute;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.5);
  }
  .hero-section .hero-content {
    position: relative;
    z-index: 2;
  }
  /* Services Section */
  .service-card {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transition: all .3s ease;
    cursor: pointer;
    text-align: center;
  }
  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  }
  .service-icon {
    font-size: 40px;
    margin-bottom: 15px;
    color: #007bff;
  }
  /* Process Section */
  .process-step {
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    background: #f9f9f9;
    transition: all .3s ease;
  }
  .process-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  }
</style>
</head>
<body>

<!-- ===================== HERO BANNER ===================== -->
<section class="hero-section">
  <div class="hero-content">
    <h1 class="fw-bold mb-3"style="color:#fff">Professional Building Construction Services</h1>
    <p class="lead mb-4">We build high-quality residential, commercial, and industrial properties in Nigeria with unmatched precision and reliability.</p>
    <a href="https://wa.link/ira501" target="_blank" class="btn btn-success btn-lg">
      <i class="bi bi-whatsapp"></i> Contact Us on WhatsApp
    </a>
  </div>
</section>

<!-- ===================== WHY CHOOSE US ===================== -->
<section class="py-5">
  <div class="container">
    <h2 class="text-center mb-5">Why Choose Tbil Properties for Your Construction Project</h2>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="service-card">
          <i class="bi bi-award service-icon"style="color:#000"></i>
          <h5 class="fw-bold mb-2">Trusted Expertise</h5>
          <p>Our team of experienced engineers and architects ensures every project meets international quality standards.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="service-card">
          <i class="bi bi-clock service-icon"style="color:#000"></i>
          <h5 class="fw-bold mb-2">On-Time Delivery</h5>
          <p>We value your time and always complete projects on schedule without compromising quality.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="service-card">
          <i class="bi bi-cash-stack service-icon"style="color:#000"></i>
          <h5 class="fw-bold mb-2">Transparent Pricing</h5>
          <p>Our pricing is clear and fair with no hidden charges, giving you peace of mind during construction.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===================== OUR PROCESS ===================== -->
<section class="py-5 bg-light">
  <div class="container">
    <h2 class="text-center mb-5">Our Construction Process</h2>
    <div class="row g-4">
      <div class="col-md-3">
        <div class="process-step">
          <i class="bi bi-pencil-square service-icon"></i>
          <h6>1. Planning & Design</h6>
          <p>We understand your vision and create a detailed blueprint for your project.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="process-step">
          <i class="bi bi-tools service-icon"></i>
          <h6>2. Quality Construction</h6>
          <p>Our skilled team executes the construction using top-grade materials.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="process-step">
          <i class="bi bi-building service-icon"></i>
          <h6>3. Supervision & Management</h6>
          <p>Every stage is closely supervised to ensure standards and deadlines are met.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="process-step">
          <i class="bi bi-check2-circle service-icon"></i>
          <h6>4. Project Delivery</h6>
          <p>Your completed property is delivered on time and ready for use.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===================== CONTACT CTA ===================== -->
<section class="py-5 text-center" style="background:#000; color:white;">
  <div class="container">
    <h2 class="mb-4">Ready to Start Your Construction Project?</h2>
    <p class="mb-4">Send us a message or contact us directly on WhatsApp to discuss your project.</p>
    <a href="https://wa.link/ira501" target="_blank" class="btn btn-success btn-lg">
      <i class="bi bi-whatsapp"></i> Contact Us on WhatsApp
    </a>
  </div>
</section>

<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<?php
include 'footer.php';
?>

