fix: ui

Reviewed-on: #36

index.html

@@ -163,7 +163,8 @@
             <div class="logo">KodePilot</div>
             <input type="text" class="search" placeholder="Search Opportunities">
             <div class="buttons">
-                <a href="/login">Log in</a>
+                <!-- <a href="/login">Log in</a> -->
+                <button class="login_first" onclick="goToLogin()">Login</button>
                 <button class="business" onclick="getInTouch()">Let's Talk</button>
                 <button class="login" onclick="goToApplay()">Request a call</button>
             </div>
@@ -268,7 +269,7 @@
             </div>
         </section>
 
-        <section id="slider">
+        <section class="slider" id="slider">
             <div class="slide1r-container">
                 <div class="slide1r-wrapper">
                     <div class="slide1r-track" id="slide1rTrack">
@@ -456,6 +457,7 @@
                 </div>
             </div>
         </section>
+
         <section class="move-slider-ruby">
             <div class="move-slider-container">
                 <div class="move-slider-box-static">
@@ -538,8 +540,8 @@
                 </div>
             </div>
         </section>
-        <section>
 
+        <section class="practice-container-parent">
             <div class="practice-container">
                 <div class="practice-container-box">
                     <div class="practice-container-text-box">
@@ -637,15 +639,6 @@
                 </div>
         </section>
 
-        <section class="move-slider" style="display: none;">
-            <div class="container-slider">
-                <div class="container-slider-baby container-slider-1"></div>
-                <div class="container-slider-baby container-slider-2"></div>
-                <div class="container-slider-baby container-slider-3"></div>
-                <div class="container-slider-baby container-slider-4"></div>
-            </div>
-        </section>
-
         <section class="our-numbers">
             <div class="stats-grid">
                 <div class="stat-item">
@@ -679,9 +672,11 @@
                 </div>
             </div>
         </section>
+
         <section class="corces-s">
             <div class="corces"></div>
         </section>
+
         <footer class="footer">
             <div class="footer-container">
                 <div class="footer-section company-section">
@@ -784,9 +779,9 @@
             </div>
 
             <div class="footer-bottom">
-                <div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
-                    <p style="margin-top: 20px 0px; padding: 10px 0px; font-size: 15px; margin-bottom : 30px">
-                        Copyright © 2025 <a href="#" style="color: #120ee2;">KodePilot</a> - All
+                <div>
+                    <p>
+                        Copyright © 2025 <a>KodePilot</a> - All
                         rights
                         reserved.
                     </p>

main.css

@@ -1,6 +1,7 @@
  :root {
      --course-max-width: 1200px;
      --course-max-width-small: 1000px;
+     --section-margin: 30px 20px;
  }
 
  @media (max-width: 1360px) {
@@ -42,7 +43,8 @@
      border-bottom: 1px solid #eee;
      position: fixed;
      width: 100%;
-     height: 56px;
+     top: 0;
+     height: 60px;
      z-index: 9999;
  }
 
@@ -90,18 +92,20 @@
  }
 
  .business {
-     background: #ffcc00;
+     background: #FFD700;
+     color: #030101;
  }
 
  .login {
-     background: #007bff;
+     background: #1E90FF;
      color: #fff;
  }
 
  .hero {
      text-align: start;
-     padding: 50px 20px;
+     margin: var(--section-margin);
      line-height: 20px;
+     padding-top: 11px;
  }
 
  .hero h1 {
@@ -130,6 +134,7 @@
      margin: auto;
      padding: 20px;
      flex-wrap: wrap;
+     margin-top: 50px;
  }
 
  .cards_box {
@@ -164,6 +169,7 @@
      display: block;
      margin-top: 10px;
      font-weight: normal;
+     max-width: 120px;
  }
 
  .green {
@@ -216,7 +222,7 @@
  }
 
  .users {
-     padding: 0px 20px;
+     margin: var(--section-margin);
      display: flex;
      justify-content: center;
      align-items: center;
@@ -313,7 +319,7 @@
  }
 
  .mnc {
-     padding: 40px 20px;
+     margin: var(--section-margin);
      display: flex;
      justify-content: center;
      align-items: center;
@@ -378,8 +384,10 @@
  }
 
  .our-numbers {
-     max-width: var(--course-max-width);
-     margin: 50px auto 50px auto;
+     width: 100%;
+     display: flex;
+     justify-content: center;
+     align-items: center;
  }
 
  .our-numbers h2 {
@@ -391,17 +399,19 @@
  }
 
  .stats-grid {
+     margin: var(--section-margin);
      display: grid;
      grid-template-columns: repeat(6, 1fr);
+     min-width: var(--course-max-width);
      gap: 20px;
      justify-items: center;
      align-items: stretch;
+     max-width: 90%;
  }
 
  .stat-item {
      background: HSL(0, 0%, 96.5%);
      text-align: center;
-     padding: 20px 10px;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
@@ -486,7 +496,7 @@
 
  .subtitle {
      color: #6b7280;
-     line-height: 0px;
+     line-height: 22px;
  }
 
  .arrow-icon {
@@ -550,6 +560,17 @@
      color: #1f2937;
  }
 
+ .slider {
+     margin: var(--section-margin);
+     display: flex;
+     justify-content: center;
+     align-items: center;
+ }
+
+ .opportunity-section {
+     margin: var(--section-margin);
+ }
+
  .hover-slider {
      display: none;
      padding: 0 0 50px 0;
@@ -571,12 +592,10 @@
  }
 
  .slide1r-container {
-     margin: 0 auto;
      max-width: var(--course-max-width-small);
      width: 100%;
      position: relative;
      border-radius: 20px;
-     padding: 25px;
      font-family: 'Arial', sans-serif;
  }
 
@@ -964,15 +983,14 @@
  }
 
  .move-slider-ruby {
-     width: 100%;
+     width: auto;
      overflow: hidden;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
-     margin-top: 76px;
-     padding-bottom: 40px;
+     margin: var(--section-margin);
  }
 
  .move-slider-box-static {
@@ -980,7 +998,6 @@
      height: 350px;
      min-width: 350px;
      border-radius: 10px;
-     padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
@@ -1135,8 +1152,10 @@
  }
 
  .card-simple {
-     max-width: var(--course-max-width);
-     margin: 70px auto 70px auto;
+     margin: var(--section-margin);
+     display: flex;
+     justify-content: center;
+     align-items: center;
  }
 
  .card-easy {
@@ -1144,7 +1163,7 @@
      background-color: #F6F8FA;
      border-radius: 20px;
      overflow: hidden;
-     margin: 20px;
+     max-width: var(--course-max-width);
  }
 
  .card-easy-left {
@@ -1390,11 +1409,8 @@
      align-items: flex-start;
  }
 
- .practice-container {
-     max-width: 1200px;
-     width: 100%;
-     margin: 0 auto;
-     padding: 0 20px;
+ .practice-container-parent {
+     margin: var(--section-margin);
  }
 
  .practice-container-box {
@@ -1541,7 +1557,6 @@
      justify-content: center;
      transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
      opacity: 0;
-     padding: 20px;
      background: transparent;
      flex-shrink: 0;
  }
@@ -1648,10 +1663,10 @@
  }
 
  .practice-cta-btn {
+     padding: 10px;
      margin-top: 16px;
      background-color: #111827;
      color: white;
-     padding: 10px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
@@ -1756,12 +1771,8 @@
 
      .stat-item {
          min-height: 100px;
-         padding: 15px 8px;
      }
 
-     .our-numbers {
-         padding: 40px 20px;
-     }
 
      .our-numbers h2 {
          font-size: 2rem;
@@ -1779,7 +1790,6 @@
 
      .stat-item {
          min-height: 110px;
-         padding: 20px;
      }
 
      .mnc h2 {
@@ -1795,7 +1805,7 @@
  }
 
  @media (max-width: 768px) {
-     .practice-container {
+     .practice-container-parent {
          display: none;
      }
 
@@ -1803,11 +1813,9 @@
          display: flex;
          align-items: center;
          max-width: 90%;
-         padding: 20px;
      }
 
      .slide1r-container {
-         padding: 20px;
          width: 90%;
      }
 
@@ -1817,23 +1825,28 @@
      }
 
      .container {
-         padding: 20px;
          width: 90%;
      }
 
      .move-slider-container {
-         padding: 20px;
          width: 90%;
      }
 
+     .move-slider-ruby {
+         width: auto;
+     }
+
+     .card-simple {
+         min-width: 90%;
+     }
+
      .move-slider-animation-box {
          margin-top: 393px;
          margin-right: 0px;
      }
 
      .move-slider-box-static {
-         padding: 20px;
-         min-width: 90%;
+         min-width: 100%;
      }
 
      .card-simple {
@@ -1898,10 +1911,6 @@
          max-height: 100%;
      }
 
-     .our-numbers {
-         margin: 0 auto 0 auto;
-     }
-
      .corces-s {
          margin: 0px 0;
      }
@@ -2001,6 +2010,7 @@
 
  @media (max-width: 480px) {
      .stats-grid {
+         max-width: 90%;
          grid-template-columns: 1fr;
          gap: 25px;
      }
@@ -2031,6 +2041,13 @@
      .next-btn {
          right: -15px;
      }
+
+     .card-add {
+         width: 95%;
+         height: 100%;
+         max-width: 100%;
+         min-height: 280px;
+     }
  }
 
  @keyframes fadeInUp {

main.js

@@ -1,3 +1,7 @@
+function goToLogin() {
+    window.location.href = "/login";
+}
+
 function goToApplay() {
     window.location.href = "/apply/";
 }
@@ -428,7 +432,6 @@ setInterval(() => {
     }, 500);
 }, 5000);
 
-
 document.addEventListener("DOMContentLoaded", () => {
     document.querySelectorAll(".footer a").forEach(link => {
         link.setAttribute("href", "/apply");