About us Page (Full)

<div class="container py-4">
  <!-- i. Breadcrumb Section -->
  <nav aria-label="breadcrumb" class="mb-5">
    <ol class="breadcrumb bg-light p-3 rounded-4 shadow-sm border-0">
      <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-primary">Home</a></li>
      <li class="breadcrumb-item active" aria-current="page">About Us</li>
    </ol>
  </nav>

  <!-- ii. Our Story & Journey Section -->
  <section class="row align-items-center mb-5 pb-5">
    <div class="col-lg-6 mb-4 mb-lg-0">
      <div class="position-relative">
        <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800" class="img-fluid rounded-5 shadow-lg" alt="Our Journey">
        <div class="position-absolute bottom-0 start-0 bg-primary text-white p-4 rounded-4 m-3 d-none d-md-block">
          <h3 class="fw-bold mb-0">10+</h3>
          <small>Years of Excellence</small>
        </div>
      </div>
    </div>
    <div class="col-lg-6 ps-lg-5">
      <h6 class="text-primary fw-bold text-uppercase mb-2">Our Story</h6>
      <h2 class="display-5 fw-bold mb-4">Crafting the Future of Online Shopping</h2>
      <p class="text-muted mb-4 fs-5">Founded in 2014, ShopEase started as a small boutique with a big dream: to bridge the gap between quality products and doorstep convenience.</p>
      <p class="text-muted mb-4 small">Over the last decade, we have grown into a global marketplace, serving millions of customers while maintaining our core values of integrity, quality, and customer-first service. Our journey is fueled by a passion for innovation and a commitment to providing an unparalleled shopping experience.</p>
      <div class="row g-3">
        <div class="col-6">
          <h5 class="fw-bold mb-1">5M+</h5>
          <p class="small text-muted mb-0">Products Delivered</p>
        </div>
        <div class="col-6">
          <h5 class="fw-bold mb-1">98%</h5>
          <p class="small text-muted mb-0">Happy Customers</p>
        </div>
      </div>
    </div>
  </section>

  <!-- iii. Why Shop With Us (Features) -->
  <section class="py-5 bg-light rounded-5 px-4 mb-5 shadow-sm">
    <div class="text-center mb-5">
      <h2 class="fw-bold">Why Shop With Us?</h2>
      <div class="mx-auto bg-primary rounded-pill mb-3" style="height: 4px; width: 60px;"></div>
    </div>
    <div class="row g-4">
      <div class="col-md-4 text-center">
        <div class="mb-3 text-primary"><i class="bi bi-truck fs-1"></i></div>
        <h5 class="fw-bold">Free Shipping</h5>
        <p class="small text-muted">Enjoy free standard shipping on all orders over $99. No hidden fees.</p>
      </div>
      <div class="col-md-4 text-center">
        <div class="mb-3 text-primary"><i class="bi bi-shield-check fs-1"></i></div>
        <h5 class="fw-bold">Secure Payments</h5>
        <p class="small text-muted">Your security is our priority. We use industry-leading encryption.</p>
      </div>
      <div class="col-md-4 text-center">
        <div class="mb-3 text-primary"><i class="bi bi-headset fs-1"></i></div>
        <h5 class="fw-bold">24/7 Support</h5>
        <p class="small text-muted">Dedicated support team to assist you anytime, anywhere.</p>
      </div>
    </div>
  </section>

  <!-- iv. Our Team Members -->
  <section class="py-5 mb-5">
    <div class="text-center mb-5">
      <h2 class="fw-bold">Meet Our Creative Minds</h2>
      <p class="text-muted">The people behind our success.</p>
    </div>
    <div class="row g-4">
      <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden team-card h-100">
          <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400" class="card-img-top" alt="CEO">
          <div class="card-body text-center">
            <h6 class="fw-bold mb-1">Mark Anderson</h6>
            <small class="text-primary d-block mb-3">CEO & Founder</small>
            <div class="d-flex justify-content-center gap-2">
              <a href="#" class="text-muted"><i class="bi bi-linkedin"></i></a>
              <a href="#" class="text-muted"><i class="bi bi-twitter-x"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden team-card h-100">
          <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400" class="card-img-top" alt="Designer">
          <div class="card-body text-center">
            <h6 class="fw-bold mb-1">Sarah Johnson</h6>
            <small class="text-primary d-block mb-3">Creative Director</small>
            <div class="d-flex justify-content-center gap-2">
              <a href="#" class="text-muted"><i class="bi bi-linkedin"></i></a>
              <a href="#" class="text-muted"><i class="bi bi-instagram"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden team-card h-100">
          <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=400" class="card-img-top" alt="Lead Dev">
          <div class="card-body text-center">
            <h6 class="fw-bold mb-1">David Smith</h6>
            <small class="text-primary d-block mb-3">CTO</small>
            <div class="d-flex justify-content-center gap-2">
              <a href="#" class="text-muted"><i class="bi bi-linkedin"></i></a>
              <a href="#" class="text-muted"><i class="bi bi-github"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden team-card h-100">
          <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400" class="card-img-top" alt="Marketing">
          <div class="card-body text-center">
            <h6 class="fw-bold mb-1">Emma Wilson</h6>
            <small class="text-primary d-block mb-3">Marketing Head</small>
            <div class="d-flex justify-content-center gap-2">
              <a href="#" class="text-muted"><i class="bi bi-linkedin"></i></a>
              <a href="#" class="text-muted"><i class="bi bi-facebook"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- v. Happy Customer Feedbacks (Carousel) -->
  <section class="py-5 bg-dark text-white rounded-5 px-4 mb-5 shadow-lg overflow-hidden">
    <div class="text-center mb-5">
      <h2 class="fw-bold text-white">Happy Customers</h2>
      <div class="mx-auto bg-primary rounded-pill mb-3" style="height: 4px; width: 60px;"></div>
    </div>
    <div id="feedbackCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner pb-5">
        <div class="carousel-item active text-center">
          <div class="text-warning mb-3">
            <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
          </div>
          <p class="fs-4 fst-italic mb-4 px-md-5">"The quality of products and the incredible shipping speed really impressed me. I've become a lifetime customer of ShopEase!"</p>
          <h6 class="fw-bold mb-0">Robert Patterson</h6>
          <small class="opacity-50">Verified Buyer</small>
        </div>
        <div class="carousel-item text-center">
          <div class="text-warning mb-3">
            <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
          </div>
          <p class="fs-4 fst-italic mb-4 px-md-5">"Found hard-to-find gadgets at very competitive prices. Excellent customer service that actually listens to your concerns."</p>
          <h6 class="fw-bold mb-0">Jessica Miller</h6>
          <small class="opacity-50">Frequent Shopper</small>
        </div>
      </div>
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#feedbackCarousel" data-bs-slide-to="0" class="active rounded-circle" style="width: 10px; height: 10px;"></button>
        <button type="button" data-bs-target="#feedbackCarousel" data-bs-slide-to="1" class="rounded-circle" style="width: 10px; height: 10px;"></button>
      </div>
    </div>
  </section>
</div>

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

  .team-card {
    transition: all 0.3s ease;
  }

  .team-card:hover {
    transform: translateY(-10px);
  }

  .team-card img {
    height: 260px;
    object-fit: cover;
  }

  .carousel-indicators {
    bottom: -20px;
  }

</style>