portfolio/components/projects.html

<section class="projects section-padding" id="section_4">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-8 col-12 ms-auto">
        <div class="section-title-wrap d-flex justify-content-center align-items-center mb-4">
          <img src="images/white-desk-work-study-aesthetics.jpg" class="avatar-image img-fluid" alt="" />
          <h2 class="text-white ms-4 mb-0">Projects</h2>
        </div>
      </div>
    </div>

    <div class="clearfix"></div>

    <div class="row">
      <!-- Law Office Login -->
      <div class="col-lg-4 col-md-6 col-12">
        <div class="projects-thumb">
          <div class="projects-info">
            <small class="projects-tag">Website</small>
            <h3 class="projects-title">Law-office Login</h3>
            <p class="projects-description">A secure login system for law office management with role-based access control and advanced security features.</p>
            <div class="projects-links">
              <a href="#" class="projects-link">View Demo</a>
              <a href="#" class="projects-link">Source Code</a>
            </div>
          </div>
          <a href="images/projects/law-office-login.png" class="popup-image">
            <img src="images/projects/law-office-login.png" class="projects-image img-fluid" alt="Law Office Login System" />
          </a>
        </div>
      </div>

      <!-- Easy-pay Login -->
      <div class="col-lg-4 col-md-6 col-12">
        <div class="projects-thumb">
          <div class="projects-info">
            <small class="projects-tag">Website</small>
            <h3 class="projects-title">Easy-pay Login</h3>
            <p class="projects-description">A modern payment system login interface with secure authentication and user-friendly design.</p>
            <div class="projects-links">
              <a href="#" class="projects-link">View Demo</a>
              <a href="#" class="projects-link">Source Code</a>
            </div>
          </div>
          <a href="images/projects/easy-pay-login.png" class="popup-image">
            <img src="images/projects/easy-pay-login.png" class="projects-image img-fluid" alt="Easy Pay Login System" />
          </a>
        </div>
      </div>

      <!-- Cloths Ecommerce -->
      <div class="col-lg-4 col-md-6 col-12">
        <div class="projects-thumb">
          <div class="projects-info">
            <small class="projects-tag">E-commerce</small>
            <h3 class="projects-title">Cloths Ecommerce</h3>
            <p class="projects-description">A full-featured e-commerce platform for clothing with advanced filtering and shopping cart functionality.</p>
            <div class="projects-links">
              <a href="#" class="projects-link">View Demo</a>
              <a href="#" class="projects-link">Source Code</a>
            </div>
          </div>
          <a href="images/projects/cloths-e-commerce.png" class="popup-image">
            <img src="images/projects/cloths-e-commerce.png" class="projects-image img-fluid" alt="Clothing E-commerce Platform" />
          </a>
        </div>
      </div>

      <!-- Law Office -->
      <div class="col-lg-4 col-md-6 col-12">
        <div class="projects-thumb">
          <div class="projects-info">
            <small class="projects-tag">Website</small>
            <h3 class="projects-title">Law Office</h3>
          </div>
          <a href="images/projects/law-office-home.png" class="popup-image">
            <img src="images/projects/law-office-home.png" class="projects-image img-fluid" alt="law office" />
          </a>
        </div>
      </div>

      <!-- SVU E-commerce -->
      <div class="col-lg-4 col-md-6 col-12">
        <div class="projects-thumb">
          <div class="projects-info">
            <small class="projects-tag">Website</small>
            <h3 class="projects-title">SVU E-commerce</h3>
          </div>
          <a href="images/projects/svu-hw.png" class="popup-image">
            <img src="images/projects/svu-hw.png" class="projects-image img-fluid" alt="" />
          </a>
        </div>
      </div>

      <!-- NANS's CRM -->
      <div class="col-lg-4 col-md-6 col-12">
        <div class="projects-thumb">
          <div class="projects-info">
            <small class="projects-tag">Website</small>
            <h3 class="projects-title">NANS's CRM</h3>
          </div>
          <a href="images/projects/nanas-main-dashboard.png" class="popup-image">
            <img src="images/projects/nanas-main-dashboard.png" class="projects-image img-fluid" alt="" />
          </a>
        </div>
      </div>

      <!-- Majsin's Restaurant -->
      <div class="col-lg-4 col-md-6 col-12">
        <div class="projects-thumb">
          <div class="projects-info">
            <small class="projects-tag">Website</small>
            <h3 class="projects-title">Majsin's Restaurant</h3>
          </div>
          <a href="images/projects/majsin-dashborad.png" class="popup-image">
            <img src="images/projects/majsin-dashborad.png" class="projects-image img-fluid" alt="" />
          </a>
        </div>
      </div>

      <!-- BPro's ERP System -->
      <div class="col-lg-4 col-md-6 col-12">
        <div class="projects-thumb">
          <div class="projects-info">
            <small class="projects-tag">Website</small>
            <h3 class="projects-title">BPro's ERP System</h3>
          </div>
          <a href="images/projects/bpro-erp.png" class="popup-image">
            <img src="images/projects/bpro-erp.png" class="projects-image img-fluid" alt="" />
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Lightbox -->
  <div class="lightbox">
    <div class="lightbox-content">
      <img src="" alt="" class="lightbox-image">
      <span class="lightbox-close">&times;</span>
    </div>
  </div>
</section>