Contact Full Page

<!-- i. Breadcrumb Section -->
<section class="py-3 bg-light border-bottom">
  <div class="container">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="index.html" class="text-decoration-none">Home</a></li>
        <li class="breadcrumb-item active fw-bold text-primary" aria-current="page">Contact Us</li>
      </ol>
    </nav>
  </div>
</section>

<!-- Main Contact Section -->
<section class="py-5 bg-white">
  <div class="container py-lg-4">
    <div class="row g-5">
      <!-- ii. Contact Information -->
      <div class="col-lg-4">
        <h3 class="fw-bold mb-4">Contact Information</h3>
        <p class="text-muted mb-5">Have a question or a project in mind? reach out and let's create something amazing together.</p>

        <div class="d-flex mb-4 align-items-center">
          <div class="icon-box bg-primary-subtle text-primary rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
            <i class="bi bi-geo-alt-fill fs-4"></i>
          </div>
          <div>
            <h6 class="fw-bold mb-0">Location</h6>
            <p class="text-muted small mb-0">123 Design Street, New York, USA</p>
          </div>
        </div>

        <div class="d-flex mb-4 align-items-center">
          <div class="icon-box bg-success-subtle text-success rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
            <i class="bi bi-telephone-fill fs-4"></i>
          </div>
          <div>
            <h6 class="fw-bold mb-0">Phone Number</h6>
            <p class="text-muted small mb-0">+1 (555) 000-1234</p>
          </div>
        </div>

        <div class="d-flex mb-4 align-items-center">
          <div class="icon-box bg-info-subtle text-info rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
            <i class="bi bi-envelope-at-fill fs-4"></i>
          </div>
          <div>
            <h6 class="fw-bold mb-0">Email Address</h6>
            <p class="text-muted small mb-0">hello@alexrivera.dev</p>
          </div>
        </div>

        <!-- Social Links -->
        <div class="mt-5">
          <h6 class="fw-bold mb-3">Follow Me</h6>
          <div class="d-flex gap-2">
            <a href="#" class="btn btn-outline-dark btn-sm rounded-circle"><i class="bi bi-linkedin"></i></a>
            <a href="#" class="btn btn-outline-dark btn-sm rounded-circle"><i class="bi bi-github"></i></a>
            <a href="#" class="btn btn-outline-dark btn-sm rounded-circle"><i class="bi bi-twitter-x"></i></a>
          </div>
        </div>
      </div>

      <!-- iii. Get In Touch Message Form -->
      <div class="col-lg-8">
        <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5">
          <h3 class="fw-bold mb-4">Send a Message</h3>
          <form id="contactForm">
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label small fw-bold">Full Name</label>
                <input type="text" class="form-control bg-light border-0 py-3 rounded-3" placeholder="Enter your name" required>
              </div>
              <div class="col-md-6">
                <label class="form-label small fw-bold">Email Address</label>
                <input type="email" class="form-control bg-light border-0 py-3 rounded-3" placeholder="Enter your email" required>
              </div>
              <div class="col-12">
                <label class="form-label small fw-bold">Subject</label>
                <input type="text" class="form-control bg-light border-0 py-3 rounded-3" placeholder="Project Inquiry" required>
              </div>
              <div class="col-12">
                <label class="form-label small fw-bold">Message</label>
                <textarea class="form-control bg-light border-0 rounded-3" rows="5" placeholder="How can I help you?" required></textarea>
              </div>
              <div class="col-12 text-end">
                <button type="submit" class="btn btn-primary btn-lg px-5 rounded-pill shadow-sm">
                  Send Message <i class="bi bi-send ms-2"></i>
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- iv. Embedded Location Map -->
<section class="py-5 bg-light">
  <div class="container">
    <div class="rounded-4 overflow-hidden border shadow-sm" style="height: 400px;">
      <!-- Placeholder for Iframe - Realistic Representation -->
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.6782387902!2d-74.11976373954434!3d40.69766374874431!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1698234567890!5m2!1sen!2sbd" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy">
      </iframe>
    </div>
  </div>
</section>

<!-- v. Client Testimonials (Owl Carousel) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

<section class="py-5 bg-white">
  <div class="container py-4 text-center">
    <h6 class="text-primary fw-bold text-uppercase mb-2">Reviews</h6>
    <h2 class="fw-bold mb-5">Successful Partnerships</h2>
    <div class="owl-carousel testimonial-slider text-center">
      <div class="item px-4">
        <i class="bi bi-quote fs-1 text-primary opacity-25"></i>
        <p class="lead fst-italic text-muted mb-4">"Alex delivered the project perfectly on time. The attention to detail in the code and design was truly exceptional. Highly recommended!"</p>
        <img src="https://i.pravatar.cc/100?u=1" class="rounded-circle mx-auto mb-3" style="width: 80px; height: 80px;" alt="Client">
        <h6 class="fw-bold mb-1">Sarah Johnson</h6>
        <p class="small text-secondary">Tech Lead at Innovate Solutions</p>
      </div>
      <div class="item px-4">
        <i class="bi bi-quote fs-1 text-primary opacity-25"></i>
        <p class="lead fst-italic text-muted mb-4">"Working with Alex was a game changer for our business. The new website increased our sales by 40% in just two months."</p>
        <img src="https://i.pravatar.cc/100?u=2" class="rounded-circle mx-auto mb-3" style="width: 80px; height: 80px;" alt="Client">
        <h6 class="fw-bold mb-1">Michael Chen</h6>
        <p class="small text-secondary">Founder of E-Commerce Hub</p>
      </div>
    </div>
  </div>
</section>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script>
  $(document).ready(function() {
    $(".testimonial-slider").owlCarousel({
      loop: true,
      margin: 30,
      dots: true,
      nav: false,
      autoplay: true,
      autoplayTimeout: 5000,
      responsive: {
        0: {
          items: 1
        },
        768: {
          items: 1
        },
        1000: {
          items: 1
        }
      }
    });
  });

</script>

<style>
  .form-control:focus {
    box-shadow: none;
    background-color: #fff !important;
    border: 1px solid #0d6efd !important;
  }

  .testimonial-slider .owl-dots {
    margin-top: 30px;
  }

  .testimonial-slider .owl-dot.active span {
    background: #0d6efd !important;
  }

  .icon-box {
    transition: transform 0.3s ease;
  }

  .d-flex:hover .icon-box {
    transform: scale(1.1);
  }

</style>