About Agency Full Page

<!-- Breadcrumb Header -->
<section class="bg-light py-5">
  <div class="container mt-4">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">About Us</li>
      </ol>
    </nav>
    <h1 class="display-4 fw-bold">About Our Agency</h1>
  </div>
</section>

<!-- Company Introduction -->
<section class="py-5">
  <div class="container">
    <div class="row align-items-center g-5">
      <div class="col-lg-6">
        <h2 class="fw-bold mb-4">Driving Innovation Since 2008</h2>
        <p class="lead text-muted">We are a collective of designers, developers, and strategists dedicated to crafting exceptional digital experiences.</p>
        <p>Our journey began with a simple mission: to bridge the gap between complex technology and intuitive user experiences. Over the past decade, we've transformed from a small startup to a global agency serving Fortune 500 companies.</p>
        <div class="row pt-3">
          <div class="col-6">
            <h4 class="fw-bold text-primary">150+</h4>
            <p class="small text-uppercase">Team Members</p>
          </div>
          <div class="col-6">
            <h4 class="fw-bold text-primary">12</h4>
            <p class="small text-uppercase">Global Offices</p>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div id="aboutGallery" class="carousel slide shadow-lg rounded-4 overflow-hidden" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=80&w=800" class="d-block w-100" alt="Office Life">
            </div>
            <div class="carousel-item">
              <img src="https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&q=80&w=800" class="d-block w-100" alt="Meeting">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#aboutGallery" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#aboutGallery" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Mission & Vision -->
<section class="py-5 bg-light">
  <div class="container">
    <div class="row g-4">
      <div class="col-md-6">
        <div class="card border-0 shadow-sm h-100 p-4 rounded-4">
          <div class="card-body">
            <div class="icon-circle bg-primary text-white mb-3">
              <i class="bi bi-rocket-takeoff fs-3"></i>
            </div>
            <h3 class="fw-bold">Our Mission</h3>
            <p class="text-muted">To empower businesses through disruptive technology and creative storytelling that resonates with their target audience and drives measurable growth.</p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card border-0 shadow-sm h-100 p-4 rounded-4">
          <div class="card-body">
            <div class="icon-circle bg-dark text-white mb-3">
              <i class="bi bi-eye fs-3"></i>
            </div>
            <h3 class="fw-bold">Our Vision</h3>
            <p class="text-muted">To become the world's most developer-centric agency, where creativity meets engineering to solve the next generation of digital challenges.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Stats Counter -->
<section class="py-5 bg-primary text-white">
  <div class="container">
    <div class="row text-center g-4">
      <div class="col-md-3">
        <h2 class="counter fw-bold display-5" data-val="500">0</h2>
        <p class="mb-0">Projects Completed</p>
      </div>
      <div class="col-md-3">
        <h2 class="counter fw-bold display-5" data-val="120">0</h2>
        <p class="mb-0">Design Awards</p>
      </div>
      <div class="col-md-3">
        <h2 class="counter fw-bold display-5" data-val="98">0</h2>
        <p class="mb-0">Client Retention %</p>
      </div>
      <div class="col-md-3">
        <h2 class="counter fw-bold display-5" data-val="15">0</h2>
        <p class="mb-0">Years in Industry</p>
      </div>
    </div>
  </div>
</section>

<!-- Team Members -->
<section class="py-5">
  <div class="container py-5">
    <div class="text-center mb-5">
      <h2 class="fw-bold">Meet Our Leadership</h2>
      <p class="text-muted">Innovators and dreamers behind our success</p>
    </div>
    <div class="row g-4">
      <div class="col-lg-3 col-md-6">
        <div class="card border-0 team-card text-center">
          <img src="https://i.pravatar.cc/300?u=1" class="card-img-top rounded-4 mb-3" alt="CEO">
          <h5 class="fw-bold mb-1">Alex Morgan</h5>
          <p class="text-primary small fw-bold">CEO & Founder</p>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card border-0 team-card text-center">
          <img src="https://i.pravatar.cc/300?u=2" class="card-img-top rounded-4 mb-3" alt="CTO">
          <h5 class="fw-bold mb-1">Sarah Chen</h5>
          <p class="text-primary small fw-bold">Chief Architect</p>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card border-0 team-card text-center">
          <img src="https://i.pravatar.cc/300?u=3" class="card-img-top rounded-4 mb-3" alt="Designer">
          <h5 class="fw-bold mb-1">David Ross</h5>
          <p class="text-primary small fw-bold">Design Director</p>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="card border-0 team-card text-center">
          <img src="https://i.pravatar.cc/300?u=4" class="card-img-top rounded-4 mb-3" alt="Manager">
          <h5 class="fw-bold mb-1">Elena Scott</h5>
          <p class="text-primary small fw-bold">Marketing Head</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- FAQ Section -->
<section class="py-5 bg-light">
  <div class="container py-4">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <h2 class="text-center fw-bold mb-5">Common Questions</h2>
        <div class="accordion accordion-flush shadow-sm rounded-4 overflow-hidden" id="faqAccordion">
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#q1">
                How do you handle project timelines?
              </button>
            </h2>
            <div id="q1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
              <div class="accordion-body text-muted">
                We follow an Agile methodology, providing bi-weekly updates and maintaining clear milestones to ensure on-time delivery.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#q2">
                Do you provide post-launch support?
              </button>
            </h2>
            <div id="q2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
              <div class="accordion-body text-muted">
                Yes, we offer tiered maintenance packages that include security updates, performance monitoring, and content updates.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#q3">
                What industries do you specialize in?
              </button>
            </h2>
            <div id="q3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
              <div class="accordion-body text-muted">
                While we are industry-agnostic, we have deep expertise in FinTech, E-commerce, Healthcare, and SaaS platforms.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Footer -->
<footer class="bg-dark text-white py-4 mt-auto">
  <div class="container text-center text-md-between d-md-flex align-items-center">
    <p class="mb-0">&copy; 2023 Digital Agency. All rights reserved.</p>
    <div class="mt-3 mt-md-0">
      <a href="#" class="text-white text-decoration-none me-4 small">Privacy Policy</a>
      <a href="#" class="text-white text-decoration-none small">Contact Us</a>
    </div>
  </div>
</footer>

<style>
  .icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .team-card img {
    transition: transform 0.3s ease;
    aspect-ratio: 1/1;
    object-fit: cover;
  }

  .team-card:hover img {
    transform: scale(1.03);
  }

  .accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
    color: var(--bs-primary);
    font-weight: bold;
  }

  .breadcrumb-item+.breadcrumb-item::before {
    content: ">";
  }

</style>

<script>
  // Simple counter script
  document.addEventListener("DOMContentLoaded", () => {
    const counters = document.querySelectorAll('.counter');
    const speed = 200;

    const startCount = (el) => {
      const target = +el.getAttribute('data-val');
      const count = +el.innerText;
      const inc = target / speed;

      if (count < target) {
        el.innerText = Math.ceil(count + inc);
        setTimeout(() => startCount(el), 1);
      } else {
        el.innerText = target;
      }
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          startCount(entry.target);
          observer.unobserve(entry.target);
        }
      });
    }, {
      threshold: 1
    });

    counters.forEach(c => observer.observe(c));
  });

</script>