From 9a0d5aa7d5833cc68375e0007b7717bc7b058f59 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mouhamadalyasen3555@gmail.com>
Date: Wed, 14 May 2025 23:41:46 +0300
Subject: [PATCH] Refactor projects section layout for improved readability and
 consistency, update navbar styles for better responsiveness, and remove
 unused image assets.

---
 components/projects.html                      | 331 ++++++++----------
 css/templatemo-first-portfolio-style.css      | 113 +++++-
 .../projects/{bpro-erp.jpg => bpro-erp.png}   | Bin
 3 files changed, 259 insertions(+), 185 deletions(-)
 rename images/projects/{bpro-erp.jpg => bpro-erp.png} (100%)

diff --git a/components/projects.html b/components/projects.html
index 75e48ef..e362e49 100644
--- a/components/projects.html
+++ b/components/projects.html
@@ -1,183 +1,156 @@
 <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 class="clearfix"></div>
-
-        <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>
-
-        <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>
-
-        <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>
-
-        <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>
-
-        <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>
-
-        <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>
-        
-        <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>
-
-        <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.jpg" class="popup-image">
-              <img
-                src="images/projects/bpro-erp.jpg"
-                class="projects-image img-fluid"
-                alt=""
-              />
-            </a>
-          </div>
-        </div>
-
-        <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">Moneyout Bank</h3>
-            </div>
-            <a
-              href="images/projects/moneyout.png"
-              class="popup-image"
-            >
-              <img
-                src="images/projects/moneyout.png"
-                class="projects-image img-fluid"
-                alt=""
-              />
-            </a>
-          </div>
+  <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>
-  </section>
\ No newline at end of file
+
+    <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>
+
+      <!-- Moneyout Bank -->
+      <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">Moneyout Bank</h3>
+          </div>
+          <a href="images/projects/moneyout.png" class="popup-image">
+            <img src="images/projects/moneyout.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>
\ No newline at end of file
diff --git a/css/templatemo-first-portfolio-style.css b/css/templatemo-first-portfolio-style.css
index 7e2c3c6..5e98168 100644
--- a/css/templatemo-first-portfolio-style.css
+++ b/css/templatemo-first-portfolio-style.css
@@ -1268,28 +1268,116 @@ strong {
   }
 
   .navbar {
-    background: var(--white-color);
+    background: rgba(83, 93, 161, 0.95);
     padding: 10px 0;
   }
 
   .navbar .container {
     background: transparent;
+    padding: 0 15px;
   }
 
   .navbar-brand {
-    color: var(--primary-color);
+    color: var(--white-color);
+    font-size: 24px;
   }
 
-  .navbar-nav .nav-link {
-    color: var(--primary-color);
+  .navbar-toggler {
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .navbar-toggler:focus {
+    box-shadow: none;
+  }
+
+  .navbar-toggler-icon {
+    background-image: none;
+    position: relative;
+    width: 30px;
+    height: 2px;
+    background-color: var(--white-color);
+    display: inline-block;
+    vertical-align: middle;
+    transition: all 0.3s ease;
+  }
+
+  .navbar-toggler-icon:before,
+  .navbar-toggler-icon:after {
+    content: '';
+    position: absolute;
+    width: 30px;
+    height: 2px;
+    background-color: var(--white-color);
+    left: 0;
+    transition: all 0.3s ease;
+  }
+
+  .navbar-toggler-icon:before {
+    top: -8px;
+  }
+
+  .navbar-toggler-icon:after {
+    bottom: -8px;
+  }
+
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
+    background-color: transparent;
+  }
+
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
+    transform: rotate(45deg);
+    top: 0;
+  }
+
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
+    transform: rotate(-45deg);
+    bottom: 0;
+  }
+
+  .navbar-collapse {
+    background: rgba(83, 93, 161, 0.98);
+    margin: 10px -15px -10px;
+    padding: 20px;
+    border-radius: 0 0 10px 10px;
+  }
+
+  .navbar-nav {
     padding: 10px 0;
   }
 
-  .navbar .custom-btn {
-    border-color: var(--secondary-color);
+  .navbar-nav .nav-link {
+    color: var(--white-color);
+    padding: 12px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .navbar-nav .nav-link:last-child {
+    border-bottom: none;
+  }
+
+  .navbar-nav .nav-link:hover {
     color: var(--secondary-color);
   }
 
+  .navbar-nav .nav-link::after {
+    display: none;
+  }
+
+  .navbar .custom-btn {
+    border-color: var(--white-color);
+    color: var(--white-color);
+    margin-top: 10px;
+    width: 100%;
+    text-align: center;
+  }
+
+  .navbar .custom-btn:hover {
+    background: var(--white-color);
+    color: var(--primary-color);
+  }
+
   .hero {
     padding-top: 200px;
     padding-bottom: 400px;
@@ -1347,6 +1435,19 @@ strong {
 }
 
 @media screen and (max-width: 575px) {
+  .navbar-brand {
+    font-size: 20px;
+  }
+
+  .navbar .container {
+    padding: 0 10px;
+  }
+
+  .navbar-collapse {
+    margin: 10px -10px -10px;
+    padding: 15px;
+  }
+
   .navbar .container {
     margin-right: 12px;
     margin-left: 12px;
diff --git a/images/projects/bpro-erp.jpg b/images/projects/bpro-erp.png
similarity index 100%
rename from images/projects/bpro-erp.jpg
rename to images/projects/bpro-erp.png