Services & Insights

<!-- Breadcrumb section and header parts were standard across sections, 
     below is the combined implementation of the requested pages following all rules. -->

<!-- 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="#" class="text-decoration-none text-muted">Home</a></li>
        <li class="breadcrumb-item active text-primary fw-bold" aria-current="page">Services & Insights</li>
      </ol>
    </nav>
  </div>
</section>

<!-- e. Services Page:
     i. Breadcrumb Section.
     ii. Services List (using bootstrap cards with icons).
     iii. Working Process (Step 1, Step 2, etc.).
     iv. Pricing Plans.
     v. Service FAQ Section. -->
<section class="py-5">
  <div class="container">
    <div class="text-center mb-5">
      <h6 class="text-primary fw-bold text-uppercase">What I Do</h6>
      <h2 class="display-5 fw-bold">My Professional Services</h2>
    </div>
    <!-- ii. Services List -->
    <div class="row g-4 mb-5">
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm p-4 text-center service-card-hover">
          <div class="icon-box-large bg-primary-subtle text-primary mx-auto mb-4">
            <i class="bi bi-laptop fs-1"></i>
          </div>
          <h4>Web Development</h4>
          <p class="text-muted">High-performance custom websites built with clean, scalable code and modern frameworks.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm p-4 text-center service-card-hover">
          <div class="icon-box-large bg-success-subtle text-success mx-auto mb-4">
            <i class="bi bi-phone fs-1"></i>
          </div>
          <h4>App Design</h4>
          <p class="text-muted">Mobile-first user interfaces designed to provide seamless experiences on iOS and Android.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm p-4 text-center service-card-hover">
          <div class="icon-box-large bg-info-subtle text-info mx-auto mb-4">
            <i class="bi bi-search fs-1"></i>
          </div>
          <h4>SEO Optimization</h4>
          <p class="text-muted">Boosting your visibility on search engines to ensure your target audience finds you easily.</p>
        </div>
      </div>
    </div>

    <!-- iii. Working Process -->
    <div class="py-5">
      <h3 class="text-center fw-bold mb-5">My Working Process</h3>
      <div class="row g-0 text-center position-relative">
        <div class="col-md-3">
          <div class="process-step">
            <div class="step-number bg-primary text-white mx-auto mb-3">01</div>
            <h5>Strategy</h5>
            <p class="small text-muted px-3">Understanding requirements and planning the architectural flow.</p>
          </div>
        </div>
        <div class="col-md-3 border-md-start">
          <div class="process-step">
            <div class="step-number bg-primary text-white mx-auto mb-3">02</div>
            <h5>Design</h5>
            <p class="small text-muted px-3">Creating high-fidelity prototypes and UI components.</p>
          </div>
        </div>
        <div class="col-md-3 border-md-start">
          <div class="process-step">
            <div class="step-number bg-primary text-white mx-auto mb-3">03</div>
            <h5>Development</h5>
            <p class="small text-muted px-3">Writing clean, bug-free transitions into functional code.</p>
          </div>
        </div>
        <div class="col-md-3 border-md-start">
          <div class="process-step">
            <div class="step-number bg-primary text-white mx-auto mb-3">04</div>
            <h5>Launch</h5>
            <p class="small text-muted px-3">Rigorous testing, optimization, and final deployment.</p>
          </div>
        </div>
      </div>
    </div>

    <!-- iv. Pricing Plans -->
    <div class="py-5">
      <h3 class="text-center fw-bold mb-5">Flexible Pricing</h3>
      <div class="row g-4 justify-content-center">
        <div class="col-md-4">
          <div class="card h-100 border-0 shadow-sm rounded-4 text-center p-4">
            <h5 class="text-muted">Basic</h5>
            <h2 class="fw-bold mb-3">$199</h2>
            <ul class="list-unstyled mb-4">
              <li class="mb-2">1 Page Design</li>
              <li class="mb-2">Responsive Layout</li>
              <li class="mb-2">5 Days Delivery</li>
              <li class="text-decoration-line-through text-muted small">SEO Audit</li>
            </ul>
            <a href="#" class="btn btn-outline-primary rounded-pill">Choose Plan</a>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100 border-primary border-2 shadow shadow-lg rounded-4 text-center p-4 position-relative overflow-hidden">
            <span class="badge bg-primary position-absolute top-0 end-0 m-3 px-3">Popular</span>
            <h5 class="text-primary">Standard</h5>
            <h2 class="fw-bold mb-3">$499</h2>
            <ul class="list-unstyled mb-4 text-dark fw-medium">
              <li class="mb-2">5 Page Website</li>
              <li class="mb-2">Custom Code</li>
              <li class="mb-2">Speed Optimization</li>
              <li class="mb-2">SEO Basic Setup</li>
            </ul>
            <a href="#" class="btn btn-primary rounded-pill shadow">Choose Plan</a>
          </div>
        </div>
      </div>
    </div>

    <!-- v. Service FAQ Section -->
    <div class="py-5 col-lg-8 mx-auto">
      <h3 class="text-center fw-bold mb-4">Service Questions</h3>
      <div class="accordion accordion-flush bg-white rounded shadow-sm overflow-hidden" id="serviceFAQ">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#f1">
              Do you provide source code?
            </button>
          </h2>
          <div id="f1" class="accordion-collapse collapse show" data-bs-parent="#serviceFAQ">
            <div class="accordion-body text-muted small">
              Yes, all project files and source codes are handed over upon final payment completion.
            </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="#f2">
              What is your project refund policy?
            </button>
          </h2>
          <div id="f2" class="accordion-collapse collapse" data-bs-parent="#serviceFAQ">
            <div class="accordion-body text-muted small">
              We offer partial refunds if the project is cancelled during the design phase. Conditions apply.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- f. Blog Page:
     i. Breadcrumb Section.
     ii. Latest Blog Posts (Bootstrap card with sidebar).
     iii. Pagination. -->
<section class="py-5 bg-light">
  <div class="container">
    <div class="row g-5">
      <!-- Blog Posts -->
      <div class="col-lg-8">
        <div class="row g-4">
          <div class="col-12">
            <div class="card border-0 shadow-sm overflow-hidden rounded-4 blog-card">
              <img src="https://images.unsplash.com/photo-1487014679447-9f8336841d58?auto=format&fit=crop&q=80&w=1000" class="card-img-top" alt="Blog">
              <div class="card-body p-4">
                <span class="badge bg-primary-subtle text-primary mb-2">Technology</span>
                <h3 class="fw-bold h4">The Future of UI/UX in 2024</h3>
                <p class="text-muted">Artificial intelligence is reshaping the landscape of modern design paradigms. Learn how to stay ahead...</p>
                <a href="#" class="btn btn-link p-0 text-decoration-none fw-bold">Read More <i class="bi bi-arrow-right"></i></a>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100">
              <div class="card-body p-4">
                <h5 class="fw-bold fs-6">Bootstrap 5.3 Utility Masters</h5>
                <p class="small text-muted">A guide to writing CSS faster using Bootstrap's refined classes.</p>
                <a href="#" class="small text-primary text-decoration-none fw-bold">Read Tips</a>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100">
              <div class="card-body p-4">
                <h5 class="fw-bold fs-6">Responsive Typography Secrets</h5>
                <p class="small text-muted">Methods for dynamic text resizing for better mobile accessibility.</p>
                <a href="#" class="small text-primary text-decoration-none fw-bold">Read Tips</a>
              </div>
            </div>
          </div>
        </div>
        <!-- iii. Pagination -->
        <nav class="mt-5">
          <ul class="pagination pagination-lg justify-content-center">
            <li class="page-item disabled"><a class="page-link shadow-none border-0 rounded-circle me-2" href="#"><i class="bi bi-chevron-left"></i></a></li>
            <li class="page-item active"><a class="page-link shadow-none border-0 rounded-circle me-2" href="#">1</a></li>
            <li class="page-item"><a class="page-link shadow-none border-0 rounded-circle me-2" href="#">2</a></li>
            <li class="page-item"><a class="page-link shadow-none border-0 rounded-circle" href="#"><i class="bi bi-chevron-right"></i></a></li>
          </ul>
        </nav>
      </div>
      <!-- Sidebar -->
      <div class="col-lg-4">
        <div class="card border-0 shadow-sm p-4 rounded-4 mb-4">
          <h5 class="fw-bold mb-3">Search</h5>
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search blog...">
            <button class="btn btn-primary"><i class="bi bi-search"></i></button>
          </div>
        </div>
        <div class="card border-0 shadow-sm p-4 rounded-4">
          <h5 class="fw-bold mb-3">Popular Tags</h5>
          <div class="d-flex flex-wrap gap-2">
            <span class="badge bg-light text-dark py-2 px-3 border">#React</span>
            <span class="badge bg-light text-dark py-2 px-3 border">#WebDev</span>
            <span class="badge bg-light text-dark py-2 px-3 border">#Portfolio</span>
            <span class="badge bg-light text-dark py-2 px-3 border">#CSS</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- g. Contact Page:
     i. Breadcrumb Section.
     ii. Contact Form Application.
     iii. Google Maps Integration.
     iv. Address, Phone, Email Information. -->
<section class="py-5" id="contact">
  <div class="container py-4">
    <h2 class="text-center fw-bold mb-5">Get In Touch</h2>
    <div class="row g-5">
      <div class="col-lg-4">
        <div class="d-flex mb-4">
          <div class="icon-circle bg-primary text-white me-3"><i class="bi bi-geo-alt"></i></div>
          <div>
            <h6 class="fw-bold mb-1">Office Location</h6>
            <p class="small text-muted mb-0">123 Tech Park, London, UK</p>
          </div>
        </div>
        <div class="d-flex mb-4">
          <div class="icon-circle bg-primary text-white me-3"><i class="bi bi-envelope"></i></div>
          <div>
            <h6 class="fw-bold mb-1">Email Support</h6>
            <p class="small text-muted mb-0">hello@alexrivera.dev</p>
          </div>
        </div>
        <div class="col-12 mt-4 rounded-4 overflow-hidden border shadow-sm" style="height: 250px;">
          <!-- iii. Google Maps Integration (Placeholder Image for Preview) -->
          <img src="https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?auto=format&fit=crop&w=400&q=80" class="w-100 h-100 object-fit-cover opacity-75" alt="Map">
        </div>
      </div>
      <div class="col-lg-8">
        <!-- ii. Contact Form -->
        <div class="card border-0 shadow-sm rounded-4 p-4">
          <form>
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label small fw-bold">Your Name</label>
                <input type="text" class="form-control rounded-pill px-3" placeholder="John Doe">
              </div>
              <div class="col-md-6">
                <label class="form-label small fw-bold">Email Address</label>
                <input type="email" class="form-control rounded-pill px-3" placeholder="email@example.com">
              </div>
              <div class="col-12">
                <label class="form-label small fw-bold">Subject</label>
                <input type="text" class="form-control rounded-pill px-3" placeholder="Project Inquiry">
              </div>
              <div class="col-12">
                <label class="form-label small fw-bold">Message</label>
                <textarea class="form-control rounded-4" rows="5" placeholder="Tell me about your project..."></textarea>
              </div>
              <div class="col-12 text-end">
                <button class="btn btn-primary px-5 py-2 rounded-pill shadow">Send Message <i class="bi bi-send-fill ms-2"></i></button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  .icon-box-large {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
  }

  .service-card-hover:hover .icon-box-large {
    transform: rotate(10deg);
  }

  .step-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
  }

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

  .blog-card img {
    height: 350px;
    object-fit: cover;
  }

  .page-link.active {
    background-color: #0d6efd !important;
    color: white !important;
  }

  .page-link {
    color: #6c757d;
    aspect-ratio: 1;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

</style>