From 00691070e8f5ae7cc8764ad3a5cb3e93e6030324 Mon Sep 17 00:00:00 2001
From: sulagna-1 <sulagnapatra8@gmail.com>
Date: Wed, 1 Oct 2025 22:12:15 +0530
Subject: [PATCH 1/2] Update index.html

The website has dark-mode toggle, I tried to make it a bit better than before because minor issues were present. If you are satisfied with my work so far I'll continue adding further changes like
1. proceed with your requirements
2. enhancement of dark-mode
3. add scroll-up and scroll-down buttons
---
 index.html | 1400 +++++++++++++++++++++++++++++++---------------------
 1 file changed, 825 insertions(+), 575 deletions(-)

diff --git a/index.html b/index.html
index b667b341..c3ab7b9f 100644
--- a/index.html
+++ b/index.html
@@ -5,685 +5,935 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CodeClip</title>
 
-    <!-- ================ Favicon ================  -->
-    <link
-      rel="shortcut icon"
-      href="assets/favicon/codeClip-favicon.png"
-      type="image/png"
-    />
-
-    <!-- ================ Meta Tags ================  -->
-    <meta
-      name="keywords"
-      content="CodeClip, Coding Challenges, Open Source, GSSoC, Frontend Practice, JavaScript Logics, GitHub Contributions, Web Development Tasks"
-    />
-    <meta
-      name="description"
-      content="CodeClip is a browser-based platform where developers solve real-world coding challenges, practice frontend and logic tasks, and contribute to open source. Proudly built for GSSoC 2025."
-    />
-    <meta name="robots" content="index, follow" />
-
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="CodeClip - Code, Run & Contribute" />
-    <meta
-      property="og:description"
-      content="Solve coding challenges, contribute to open source, and climb the leaderboard on CodeClip. A GSSoC 2025 project for developers."
-    />
-
-    <meta
-      property="twitter:title"
-      content="CodeClip - Code, Run & Contribute"
-    />
-    <meta
-      property="twitter:description"
-      content="Solve coding challenges, contribute to open source, and climb the leaderboard on CodeClip. A GSSoC 2025 project for developers."
-    />
-
-    <!-- ================ Vendor CSS ================  -->
-
-<!-- ================ Vendor CSS ================ -->
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-<link rel="stylesheet" href="styles/owl.carousel.min.css" />
-<link rel="stylesheet" href="styles/owl.theme.default.min.css" />
-<link rel="stylesheet" href="styles/fontawesome.css" />
-<!-- Custom CSS & External Libraries -->
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
-/>
-<!-- Global / Main Styles -->
-<link rel="stylesheet" href="styles/main.css" />
-<link rel="stylesheet" href="./styles.css" />
-
-<!-- External Libraries -->
-<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
-
-<!-- Optional: Challenge-specific styles -->
-<!-- <link rel="stylesheet" href="../styles/challenges.css" /> -->
-
-<!-- === SMART PROGRESS DASHBOARD FEATURE START === -->
-<link rel="stylesheet" href="./styles/progress-dashboard.css" />
-<!-- === SMART PROGRESS DASHBOARD FEATURE END === -->
-
-<!-- Inline custom tweaks -->
-<style>
-  .icon-container {
-    display: flex;
-    gap: 6px;
-    margin: 8px 0;
-    font-size: 24px;
-  }
-.icon-container i {
-  transition: transform 0.2s ease;
-}
-  .icon-container i:hover {
-    transform: scale(1.2);
-  }
-  .navbar-light .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-}
-</style>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- Devicon -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
+    
+    <!-- AOS -->
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+
+    <style>
+      :root {
+        --primary-color: #0d6efd;
+        --secondary-color: #00bfff;
+        --dark-bg: #121212;
+        --dark-card: #1e1e1e;
+        --dark-text: #e0e0e0;
+        --light-text: #333;
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html {
+        scroll-behavior: smooth;
+      }
+
+      body {
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        transition: background-color 0.3s, color 0.3s;
+      }
+
+      /* Loading Screen */
+      #loading-screen {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999;
+        transition: opacity 0.5s ease;
+      }
+
+      #loading-screen.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .loader {
+        text-align: center;
+        color: white;
+      }
+
+      .loader i {
+        font-size: 3rem;
+        margin-bottom: 1rem;
+        animation: spin 1.5s linear infinite;
+      }
+
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+
+      /* Navbar */
+      .navbar {
+        background-color: white !important;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        transition: background-color 0.3s;
+      }
+
+      .navbar-brand {
+        font-weight: bold;
+        font-size: 1.5rem;
+      }
+
+      .navbar-nav .nav-link {
+        position: relative;
+        font-weight: 500;
+        margin: 0 8px;
+        transition: color 0.3s ease;
+        color: rgba(0, 0, 0, 0.8) !important;
+      }
+
+      .navbar-nav .nav-link::after {
+        content: "";
+        position: absolute;
+        bottom: -4px;
+        left: 0;
+        width: 0%;
+        height: 2px;
+        background: var(--primary-color);
+        transition: width 0.3s ease;
+      }
+
+      .navbar-nav .nav-link:hover::after,
+      .navbar-nav .nav-link.active::after {
+        width: 100%;
+      }
+
+      .navbar-nav .nav-link.active {
+        font-weight: 600;
+        color: var(--primary-color) !important;
+      }
+
+      /* Dark Mode Toggle */
+      .dark-mode-toggle {
+        display: flex;
+        align-items: center;
+        margin-left: 1rem;
+      }
+
+      .toggle-label {
+        margin-left: 0.5rem;
+        cursor: pointer;
+        font-size: 1.2rem;
+      }
+
+      /* Hero Section */
+      .heroSection {
+        padding: 120px 0 80px;
+        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+      }
+
+      .heroSection h1 {
+        font-size: 3.5rem;
+        font-weight: 700;
+        margin-bottom: 1.5rem;
+      }
+
+      .blueCol {
+        color: var(--primary-color);
+      }
+
+      .heroDescription {
+        font-size: 1.1rem;
+        line-height: 1.6;
+        margin-bottom: 2rem;
+      }
+
+      .ctaBtn-Container {
+        display: flex;
+        gap: 1rem;
+      }
+
+      .heroSectionBtn {
+        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+        color: white;
+        border: none;
+        padding: 12px 25px;
+        border-radius: 30px;
+        font-weight: 600;
+        transition: transform 0.3s, box-shadow 0.3s;
+      }
+
+      .heroSectionBtn:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+      }
+
+      /* Challenge Section */
+      #challengeSection {
+        padding: 80px 0;
+      }
+
+      .card {
+        border: none;
+        border-radius: 15px;
+        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        margin-bottom: 2rem;
+        height: 100%;
+      }
+
+      .card:hover {
+        transform: translateY(-10px);
+        box-shadow: 0 15px 30px rgba(0,0,0,0.15);
+      }
+
+      .card-Header {
+        font-weight: 600;
+        color: var(--primary-color);
+        margin-bottom: 10px;
+      }
+
+      .card-Level {
+        display: inline-block;
+        font-size: 0.75rem;
+        font-weight: 600;
+        padding: 4px 12px;
+        border-radius: 20px;
+        margin-bottom: 15px;
+      }
+
+      .medium-Col {
+        background: #fff3cd;
+        color: #856404;
+      }
+
+      .hard-Col {
+        background: #f8d7da;
+        color: #721c24;
+      }
+
+      .icon-container {
+        display: flex;
+        gap: 8px;
+        margin: 10px 0;
+        font-size: 1.5rem;
+      }
+
+      .card-Participate {
+        font-size: 0.9rem;
+        color: #6c757d;
+        margin-bottom: 15px;
+      }
+
+      .card-Text {
+        font-size: 0.95rem;
+        line-height: 1.6;
+        margin-bottom: 20px;
+      }
+
+      .card-CTAButton {
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      .card-Btn {
+        display: inline-block;
+        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+        color: white;
+        text-decoration: none;
+        font-weight: 500;
+        padding: 8px 20px;
+        border-radius: 25px;
+        transition: all 0.3s ease;
+      }
+
+      .card-Btn:hover {
+        background: linear-gradient(45deg, #0056b3, #0099cc);
+        transform: scale(1.05);
+        color: white;
+        text-decoration: none;
+      }
+
+      /* Leaderboard Section */
+      .leaderboard-wrapper {
+        padding: 80px 0;
+        background: #f8f9fa;
+      }
+
+      .leaderboard-list {
+        max-width: 600px;
+        margin: 0 auto;
+        background: white;
+        border-radius: 15px;
+        padding: 30px;
+        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+      }
+
+      .leaderboard-list h2 {
+        text-align: center;
+        margin-bottom: 1rem;
+      }
+
+      .highlight {
+        color: var(--primary-color);
+      }
+
+      .leaderboard-list p {
+        text-align: center;
+        margin-bottom: 2rem;
+        color: #6c757d;
+      }
+
+      .leaderboard-row {
+        display: flex;
+        align-items: center;
+        padding: 15px;
+        border-radius: 10px;
+        margin-bottom: 10px;
+        transition: background 0.3s;
+      }
+
+      .leaderboard-row:hover {
+        background: #f8f9fa;
+      }
+
+      .rank-1, .rank-2, .rank-3 {
+        background: #f8f9fa;
+      }
+
+      .rank {
+        font-weight: bold;
+        width: 40px;
+      }
+
+      .leaderboard-Img {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        margin: 0 15px;
+      }
+
+      .userName {
+        flex: 1;
+        font-weight: 500;
+      }
+
+      .points {
+        font-weight: bold;
+        color: var(--primary-color);
+      }
+
+      /* About Section */
+      #aboutSection {
+        padding: 80px 0;
+      }
+
+      .secHeader {
+        font-size: 2.5rem;
+        font-weight: 700;
+        text-align: center;
+        margin-bottom: 3rem;
+      }
+
+      .secHeader span {
+        color: var(--primary-color);
+      }
+
+      .aboutContainer p {
+        font-size: 1.1rem;
+        line-height: 1.7;
+        margin-bottom: 2rem;
+      }
+
+      .aboutCTA-Btn {
+        display: inline-block;
+        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+        color: white;
+        text-decoration: none;
+        font-weight: 600;
+        padding: 12px 30px;
+        border-radius: 30px;
+        transition: all 0.3s ease;
+      }
+
+      .aboutCTA-Btn:hover {
+        background: linear-gradient(45deg, #0056b3, #0099cc);
+        transform: translateY(-3px);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        color: white;
+        text-decoration: none;
+      }
+
+      /* Footer */
+      footer {
+        background: #f8f9fa;
+        padding: 50px 0 20px;
+      }
+
+      .footer-logo-col .navbar-brand {
+        font-size: 1.8rem;
+        margin-bottom: 1rem;
+        display: block;
+      }
+
+      .footer-desc {
+        color: #6c757d;
+        line-height: 1.6;
+      }
+
+      .footer-title {
+        font-weight: 600;
+        margin-bottom: 1.5rem;
+        text-align: center;
+      }
+
+      .footer-contact-btn {
+        width: 100%;
+        max-width: 250px;
+        margin-bottom: 1rem;
+      }
+
+      .footerNote {
+        color: #6c757d;
+        padding-top: 20px;
+      }
+
+      /* Scroll to top button */
+      .scroll_to_top {
+        position: fixed;
+        bottom: 30px;
+        right: 30px;
+        background: var(--primary-color);
+        color: white;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-decoration: none;
+        box-shadow: 0 3px 10px rgba(0,0,0,0.2);
+        transition: all 0.3s;
+        z-index: 100;
+      }
+
+      .scroll_to_top:hover {
+        background: var(--secondary-color);
+        transform: translateY(-3px);
+        color: white;
+      }
+
+      /* Dark Mode Styles */
+      body.dark-mode {
+        background-color: var(--dark-bg);
+        color: var(--dark-text);
+      }
+
+      body.dark-mode .navbar {
+        background-color: #1f1f1f !important;
+        border-bottom: 1px solid #333;
+      }
+
+      body.dark-mode .navbar-nav .nav-link {
+        color: var(--dark-text) !important;
+      }
+
+      body.dark-mode .navbar-nav .nav-link.active {
+        color: var(--secondary-color) !important;
+      }
+
+      body.dark-mode .navbar-nav .nav-link::after {
+        background: var(--secondary-color);
+      }
+
+      body.dark-mode .heroSection {
+        background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+      }
+
+      body.dark-mode .card {
+        background-color: var(--dark-card);
+        color: var(--dark-text);
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+      }
+
+      body.dark-mode .card-Header {
+        color: var(--secondary-color);
+      }
+
+      body.dark-mode .medium-Col {
+        background: #3a2e05;
+        color: #ffd54f;
+      }
+
+      body.dark-mode .hard-Col {
+        background: #3a0a0a;
+        color: #ff8a8a;
+      }
+
+      body.dark-mode .card-Participate {
+        color: #aaa;
+      }
+
+      body.dark-mode .leaderboard-wrapper {
+        background: #1a1a1a;
+      }
+
+      body.dark-mode .leaderboard-list {
+        background: var(--dark-card);
+        color: var(--dark-text);
+      }
+
+      body.dark-mode .leaderboard-row:hover {
+        background: #2a2a2a;
+      }
+
+      body.dark-mode .rank-1, 
+      body.dark-mode .rank-2, 
+      body.dark-mode .rank-3 {
+        background: #2a2a2a;
+      }
+
+      body.dark-mode footer {
+        background: #1f1f1f;
+        color: var(--dark-text);
+      }
+
+      body.dark-mode .footer-desc {
+        color: #aaa;
+      }
+
+      body.dark-mode .text-muted {
+        color: #aaa !important;
+      }
+
+      /* Responsive */
+      @media (max-width: 768px) {
+        .heroSection h1 {
+          font-size: 2.5rem;
+        }
+        
+        .ctaBtn-Container {
+          flex-direction: column;
+        }
+        
+        .heroSectionBtn {
+          width: 100%;
+          margin-bottom: 10px;
+        }
+      }
+    </style>
   </head>
 
   <body>
     <!-- Loading Screen -->
     <div id="loading-screen">
         <div class="loader">
-            <i class="fa-solid fa-spinner"></i>
-            <h2>Loading<span class="dots"></span></h2>
+            <i class="fas fa-spinner"></i>
+            <h2>Loading your experience...</h2>
         </div>
     </div>
-    <a id="top"></a>  <!--added for issue 260 -->
-    <!-- ================================ Header Section Start Here ================================ -->
-    <header>
-      <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
+
+    <!-- Header -->
+    <header id="top">
+      <nav class="navbar navbar-expand-lg navbar-light fixed-top">
         <div class="container">
-          <a class="navbar-brand" href="#top">Code<span>Clip</span></a>
-          <button
-            class="navbar-toggler"
-            type="button"
-            data-bs-toggle="collapse"
-            data-bs-target="#navbarSupportedContent"
-            aria-controls="navbarSupportedContent"
-            aria-expanded="false"
-            aria-label="Toggle navigation">
+          <a class="navbar-brand" href="#top">🌐 CodeClip</a>
+          
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
+                  data-bs-target="#navbarNav" aria-controls="navbarNav" 
+                  aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
-          <!-- ================================ issue #605 Starts Here ================================ -->
-           <div class="collapse navbar-collapse" id="navbarSupportedContent">
-              <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                <li class="nav-item">
-                    <a class="nav-link" aria-current="page" href="#top">Home</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#challengeSection">Challenges</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#leaderboardSection">Leaderboard</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="#aboutSection">About</a>
-                        </li>
-                        <li class="nav-item">
-                    <a class="nav-link" href="#contactFooter">Contact</a>
-                  </li>
-                </ul>
+          
+          <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav ms-auto">
+              <li class="nav-item">
+                <a class="nav-link active" href="#top">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#challengeSection">Challenges</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#leaderboardSection">Leaderboard</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#aboutSection">About</a>
+              </li>
+            </ul>
+            
+            <div class="dark-mode-toggle">
+              <div class="form-check form-switch">
+                <input class="form-check-input" type="checkbox" id="darkModeToggle">
+                <label class="form-check-label toggle-label" for="darkModeToggle">
+                  <i class="fas fa-moon"></i>
+                </label>
+              </div>
+            </div>
           </div>
-          <!-- ================================ issue #605 Ends Here ================================ -->
         </div>
       </nav>
     </header>
-    <!-- ================================ Header Section Start Here ================================ -->
- <main>
-    <!-- ================================ Hero Section Start Here ================================ -->
-    <section id="top" class="heroSection">
-      <div class="container">
-        <div class="row heroSection-Container">
-          <div class="col-12 col-md-6 heroSection-Left">
-            <div  data-aos="fade-right" data-aos-duration="650" class="gssocContainer shinning-effect">
-              <img 
+
+    <main>
+      <!-- Hero Section -->
+      <section class="heroSection">
+        <div class="container">
+          <div class="row align-items-center">
+            <div class="col-12 col-md-6">
+              <div class="gssocContainer mb-4">
+                <img 
                 src="assets/images/hero-section/gssoc-log.png"
                 class="img-fluid gssoc-logo"
                 alt="gssoc logo"
               />
-              <p>GSSOC 2025</p>
-            </div>
-
-            <h1 data-aos="fade-right" data-aos-duration="650">
-              Code Run <br />
-              <span class="blueCol">Contribute</span>
-            </h1>
-            <p data-aos="fade-right" data-aos-duration="650" class="heroDescription text-muted">
-              CodeClip is a lightweight, browser-based platform designed to make
-              coding practice simple, accessible, and collaborative. Whether
-              you're a beginner looking to sharpen your skills or an aspiring
-              contributor to open source, CodeClip offers a clean interface
-              where you can solve real-world coding challenges, run your code
-              live, and share your solutions — all without any setup, Built
-              entirely with HTML, CSS, and JavaScript, CodeClip is not just a
-              tool but a learning experience itself. It’s an open-source project
-              proudly developed as part of
-              <strong>GirlScript Summer of Code (GSSoC)</strong>, aimed at
-              empowering developers through hands-on practice and meaningful
-              contributions.
-            </p>
+                <h4 class="text-primary">GSSoC 2025</h4>
+              </div>
 
-            <!-- ==== Do Changes According to requirements === -->
-            <div class="ctaBtn-Container">
-              <button data-aos-duration="650" data-aos="fade-right" class="btn heroSectionBtn">
-                <i class="fa-solid fa-gear"></i> Code
-              </button>
-              <button data-aos-duration="650" data-aos="fade-right" class="btn heroSectionBtn">
-                <i class="fa-solid fa-cloud"></i> Run
-              </button>
+              <h1>
+                Code Run <br />
+                <span class="blueCol">Contribute</span>
+              </h1>
+              <p class="heroDescription text-muted">
+                CodeClip is a lightweight, browser-based platform designed to make
+                coding practice simple, accessible, and collaborative. Whether
+                you're a beginner looking to sharpen your skills or an aspiring
+                contributor to open source, CodeClip offers a clean interface
+                where you can solve real-world coding challenges, run your code
+                live, and share your solutions — all without any setup.
+              </p>
+
+              <div class="ctaBtn-Container">
+                <button class="btn heroSectionBtn">
+                  <i class="fas fa-code"></i> Code
+                </button>
+                <button class="btn heroSectionBtn">
+                  <i class="fas fa-play"></i> Run
+                </button>
+              </div>
             </div>
-          </div>
 
-          <div class="col-12 col-md-6 heroSection-Right d-none d-md-block">
-            <img  data-aos="zoom-in-left"
-              src="assets/images/hero-section/hero-Img.png"
-              class="img-fluid"
-              alt="hero section image"
-            />
+            <div class="col-12 col-md-6 d-none d-md-block">
+              <img 
+                src="assets/images/hero-section/hero-Img.png"
+                class="img-fluid rounded"
+                alt="CodeClip Hero Image"
+              />
+            </div>
           </div>
         </div>
-      </div>
-    </section>
-    <!-- ================================ Hero Section End Here ================================ -->
+      </section>
 
-    <!-- ================================ Challenge Section Start Here ================================ -->
-    <section id="challengeSection">
-      <div class="container">
-        <div class="row challengeContainer">
-          <!-- ==== Card 1 ==== -->
-          <div class="col-12 col-md-4">
-            <div data-aos-duration="800" data-aos="fade-up" class="card">
-              <div class="card-body">
-                <div class="card-TopContainer">
-                  <h5 class="card-Header">Frontend Challenges</h5>
-                  <p class="card-Level medium-Col">EASY</p>
+      <!-- Challenge Section -->
+      <section id="challengeSection">
+        <div class="container">
+          <h2 class="text-center mb-5">Coding Challenges</h2>
+          <div class="row">
+            <!-- Card 1 -->
+            <div class="col-12 col-md-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <div class="card-TopContainer">
+                    <h5 class="card-Header">Frontend Challenges</h5>
+                    <p class="card-Level medium-Col">EASY</p>
+                  </div>
                   <div class="icon-container">
                     <i class="devicon-html5-plain colored" title="HTML5"></i>
                     <i class="devicon-css3-plain colored" title="CSS3"></i>
                     <i class="devicon-javascript-plain colored" title="JavaScript"></i>
                   </div>
-                </div>
-
-                <p class="card-Participate">
-                  <i class="fa-solid fa-people-group"></i> 135 coders joined
-                </p>
-                <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
-                  Build real UI components using HTML, CSS, and JavaScript.
-                  These tasks help you improve your layout, styling,
-                  responsiveness, and interactivity,no frameworks, just clean
-                  frontend skills.
-                </p>
-
-                <div class="card-CTAButton">
-                  <!-- === Create webpage of frontend challenge and add link here === -->
-                  <a href="frontendChallenges.html" class="card-Btn">Join Now</a>
+                  <p class="card-Participate">
+                    <i class="fas fa-users"></i> 135 coders joined
+                  </p>
+                  <p class="card-Text">
+                    Build real UI components using HTML, CSS, and JavaScript.
+                    These tasks help you improve your layout, styling,
+                    responsiveness, and interactivity.
+                  </p>
+                  <div class="card-CTAButton">
+                    <a href="#" class="card-Btn">Join Now</a>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
 
-          <!-- ==== Card 2 ==== -->
-          <div class="col-12 col-md-4">
-            <div data-aos-duration="800" data-aos="fade-up" class="card">
-              <div class="card-body">
-                <div class="card-TopContainer">
-                  <h5 class="card-Header">JavaScript Logics</h5>
-                  <p class="card-Level medium-Col">MEDIUM</p>
+            <!-- Card 2 -->
+            <div class="col-12 col-md-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <div class="card-TopContainer">
+                    <h5 class="card-Header">JavaScript Logics</h5>
+                    <p class="card-Level medium-Col">MEDIUM</p>
+                  </div>
                   <div class="icon-container">
                     <i class="devicon-javascript-plain colored" title="JavaScript"></i>
                   </div>
-                </div>
-
-                <p class="card-Participate">
-                  <i class="fa-solid fa-people-group"></i> 189 coders joined
-                </p>
-                <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
-                  Master the core of JavaScript by solving logic-based problems
-                  that boost your thinking and problem-solving skills. Perfect
-                  for beginners and intermediates.
-                </p>
-
-                <div class="card-CTAButton">
-                  <!-- === Create webpage of javascript logics and add link here === -->
-                  <a href="jslogics.html" class="card-Btn">Join Now</a>
+                  <p class="card-Participate">
+                    <i class="fas fa-users"></i> 189 coders joined
+                  </p>
+                  <p class="card-Text">
+                    Master the core of JavaScript by solving logic-based problems
+                    that boost your thinking and problem-solving skills.
+                  </p>
+                  <div class="card-CTAButton">
+                    <a href="#" class="card-Btn">Join Now</a>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
 
-          <!-- ==== Card 3 ==== -->
-          <div class="col-12 col-md-4">
-            <div data-aos-duration="800" data-aos="fade-up" class="card">
-              <div class="card-body">
-                <div class="card-TopContainer">
-                  <h5 class="card-Header">Backend Basics</h5>
-                  <p class="card-Level hard-Col">HARD</p>
+            <!-- Card 3 -->
+            <div class="col-12 col-md-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <div class="card-TopContainer">
+                    <h5 class="card-Header">Backend Basics</h5>
+                    <p class="card-Level hard-Col">HARD</p>
+                  </div>
                   <div class="icon-container">
                     <i class="devicon-nodejs-plain colored" title="Node.js"></i>
                     <i class="devicon-express-original colored" title="Express.js"></i>
                   </div>
-                </div>
-
-                <p class="card-Participate">
-                  <i class="fa-solid fa-people-group"></i> 150 coders joined
-                </p>
-                <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
-                  Learn the fundamentals of backend development through simple
-                  tasks using APIs, data handling, and server-side logic. A
-                  great start for aspiring full-stack developers.
-                </p>
-
-                <div class="card-CTAButton">
-                  <!-- === Create webpage of backend bbasic and add link here === -->
-                  <a href="backendChallenges.html" class="card-Btn">Join Now</a>
+                  <p class="card-Participate">
+                    <i class="fas fa-users"></i> 150 coders joined
+                  </p>
+                  <p class="card-Text">
+                    Learn the fundamentals of backend development through simple
+                    tasks using APIs, data handling, and server-side logic.
+                  </p>
+                  <div class="card-CTAButton">
+                    <a href="#" class="card-Btn">Join Now</a>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+        </div>
+      </section>
 
-          <!-- ==== Card 4 ==== -->
-          <div data-aos-duration="800" data-aos="fade-up" class="col-12 col-md-4">
-            <div class="card">
-              <div class="card-body">
-                <div class="card-TopContainer">
-                  <h5 class="card-Header">UI Design Tasks</h5>
-                  <p class="card-Level">EASY</p>
-                  <div class="icon-container">
-                    <i class="devicon-html5-plain colored" title="HTML5"></i>
-                    <i class="devicon-css3-plain colored" title="CSS3"></i>
-                  </div>
-                </div>
+      <!-- Leaderboard Section -->
+      <section id="leaderboardSection" class="leaderboard-wrapper">
+        <div class="container">
+          <div class="leaderboard-list">
+            <h2>
+              <span class="highlight">Top Coder</span> of the Week
+            </h2>
+            <p>
+              Meet our top coders who accepted challenges, wrote great code,
+              contributed to open source, and stood out as the best performers of the week.
+            </p>
 
-                <p class="card-Participate">
-                  <i class="fa-solid fa-people-group"></i> 120 coders joined
-                </p>
-                <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
-                  Practice building beautiful and functional UI components using
-                  HTML and CSS. Perfect for improving your design sense and
-                  layout skills.
-                </p>
-
-                <div class="card-CTAButton">
-                  <!-- === Create webpage of ui design challenge and add link here === -->
-                  <a href="uiChallenges.html" class="card-Btn">Join Now</a>
-                </div>
-              </div>
+            <div class="leaderboard-row rank-1">
+              <span class="rank">#1</span>
+              <img src="assets/images/leaderboard-section/user-1.png" alt="User 1" class="leaderboard-Img">
+              <span class="userName">Rahul <span class="badge gold">🏆</span></span>
+              <span class="points">1250 pts</span>
             </div>
-          </div>
-
-          <!-- ==== Card 5 ==== -->
-          <div class="col-12 col-md-4">
-            <div data-aos-duration="800" data-aos="fade-up" class="card">
-              <div class="card-body">
-                <div class="card-TopContainer">
-                  <h5 class="card-Header">Open Source Challenges</h5>
-                  <p class="card-Level medium-Col">MEDIUM</p>
-                  <div class="icon-container">
-                    <i class="devicon-git-plain colored" title="Git"></i>
-                    <i class="devicon-github-original colored" title="GitHub"></i>
-                  </div>
-                </div>
 
-                <p class="card-Participate">
-                  <i class="fa-solid fa-people-group"></i> 200 coders joined
-                </p>
-                <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
-                  Practice real world contribution workflows using Git and
-                  GitHub. You'll learn how to contribute to projects, manage
-                  pull requests.
-                </p>
-
-                <div class="card-CTAButton">
-                  <!-- === Create webpages of open source challenge and add link here === -->
-                  <a href="gitChallenges.html" class="card-Btn">Join Now</a>
-                </div>
-              </div>
+            <div class="leaderboard-row rank-2">
+              <span class="rank">#2</span>
+              <img src="assets/images/leaderboard-section/user-2.png" alt="User 2" class="leaderboard-Img">
+              <span class="userName">Manisha <span class="badge silver">🥈</span></span>
+              <span class="points">1180 pts</span>
             </div>
-          </div>
-          <!-- added card 6 -->
-          <!-- === Card 6 === -->
-           <div class="col-12 col-md-4">
-            <div data-aos-duration="800" data-aos="fade-up" class="card">
-              <div class="card-body">
-                <div class="card-TopContainer">
-                  <h5 class="card-Header">JavaScript Mini Projects</h5>
-                  <p class="card-Level medium-Col">Easy</p>
-                  <div class="icon-container">
-                    <i class="devicon-javascript-plain colored" title="JavaScript"></i>
-                    <i class="devicon-css3-plain colored" title="CSS3"></i>
-                  </div>
-                </div>
 
-                <p class="card-Participate">
-                  <i class="fa-solid fa-people-group"></i> 300 coders joined
-                </p>
-                <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
-                  Created an interactive form/input area,Applied CSS styles for visual consistency .Added features like auto-focus, clear input after add, and animation.
-                </p>
+            <div class="leaderboard-row rank-3">
+              <span class="rank">#3</span>
+              <img src="assets/images/leaderboard-section/user-1.png" alt="User 3" class="leaderboard-Img">
+              <span class="userName">Pankaj <span class="badge bronze">🥉</span></span>
+              <span class="points">1100 pts</span>
+            </div>
 
-                <div class="card-CTAButton">
-                  <!-- === Create webpages of open source challenge and add link here === -->
-                  <a href="#" class="card-Btn">Join Now</a>
-                </div>
-              </div>
+            <div class="leaderboard-row">
+              <span class="rank">#4</span>
+              <img src="assets/images/leaderboard-section/user-2.png" alt="User 4" class="leaderboard-Img">
+              <span class="userName">Simran</span>
+              <span class="points">980 pts</span>
             </div>
           </div>
         </div>
-      </div>
-    </section>
-    <style>
-      /* Section spacing */
-#challengeSection {
-  padding: 2rem 0;
-}
-
-/* Bootstrap row gap fix */
-.challengeContainer {
-  row-gap: 1.5rem; /* vertical spacing between rows */
-}
-
-/* Card styles */
-.challengeContainer .card {
-  box-shadow: rgba(19, 117, 216, 0.2) 0px 8px 24px;
-  border: none;
-  border-radius: 15px;
-  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-  height: 100%;
-  word-wrap: break-word;   /* prevent long words from breaking layout */
-  overflow-wrap: break-word;
-}
-
-/* Card hover */
-.challengeContainer .card:hover {
-  transform: translateY(-3px) scale(1.01);
-  box-shadow: 0 0 18px rgba(37, 99, 235, 0.45);
-}
-
-/* Card top container */
-.card-TopContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;   /* makes sure text + icons don’t overlap */
-  gap: 8px;
-}
-
-/* Header */
-.card-Header {
-  font-size: 20px;
-  font-weight: 600;
-  margin-bottom: 0;
-  flex: 1 1 auto;
-  min-width: 120px;
-}
-
-/* Difficulty badge */
-.card-Level {
-  font-size: 12px;
-  padding: 4px 20px;
-  border-radius: 17px;
-  font-weight: 700;
-  margin: 0 7px 0 0;
-  white-space: nowrap; /* keeps badge text on one line */
-}
-.medium-Col {
-  background-color: #fff3cd;
-  color: #a88825;
-}
-.hard-Col {
-  background-color: #f8d7da;
-  color: #7d1c1c;
-}
-
-/* Participation info */
-.card-Participate {
-  font-size: 13px;
-  color: #666;
-  margin: 6px 0;
-  opacity: 0.9;
-  line-height: 1.4;
-}
-
-/* Description text */
-.card-Text {
-  font-size: 14px;
-  opacity: 0.85;
-  text-align: justify;
-  line-height: 1.6;
-  hyphens: auto;  /* breaks long words cleanly */
-}
-
-/* Button */
-.card-CTAButton {
-  display: flex;
-  justify-content: flex-end;
-}
-.card-Btn {
-  text-decoration: none;
-  font-size: 13px;
-  padding: 8px 28px;
-  border-radius: 5px;
-  background-color: #2563eb;
-  color: white;
-  font-weight: 700;
-  transition: all 0.2s ease-in-out;
-}
-.card-Btn:hover {
-  background-color: #1d4ed8;
-  box-shadow: 0px 3px 8px rgba(0,0,0,0.25);
-}
-
-    </style>
-    <!-- ================================ Challenge Section End Here ================================ -->
-
-    <!-- ================================ Leaderboard Section Starts Here ================================ -->
-  <section id="leaderboardSection" class="leaderboard-wrapper">
-  <div class="leaderboard-list">
-    <h2>
-      <span class="highlight">Top Coder</span> of the Week
-    </h2>
-    <p>
-      Meet our top coders who accepted challenges, wrote great code,
-      contributed to open source, and stood out as the best performers of the week.
-    </p>
-
-    <div class="leaderboard-row rank-1">
-      <span class="rank">#1</span>
-      <img src="assets/images/leaderboard-section/user-1.png" alt="User 1" class="leaderboard-Img">
-      <span class="userName">Rahul <span class="badge gold">🏆</span></span>
-      <span class="points">1250 pts</span>
-    </div>
-
-    <div class="leaderboard-row rank-2">
-      <span class="rank">#2</span>
-      <img src="assets/images/leaderboard-section/user-2.png" alt="User 2" class="leaderboard-Img">
-      <span class="userName">Manisha <span class="badge silver">🥈</span></span>
-      <span class="points">1180 pts</span>
-    </div>
-
-    <div class="leaderboard-row rank-3">
-      <span class="rank">#3</span>
-      <img src="assets/images/leaderboard-section/user-1.png" alt="User 3" class="leaderboard-Img">
-      <span class="userName">Pankaj <span class="badge bronze">🥉</span></span>
-      <span class="points">1100 pts</span>
-    </div>
-
-    <div class="leaderboard-row">
-      <span class="rank">#4</span>
-      <img src="assets/images/leaderboard-section/user-2.png" alt="User 4" class="leaderboard-Img">
-      <span class="userName">Simran</span>
-      <span class="points">980 pts</span>
-    </div>
-  </div>
-</section>
-
-    <!-- ================================ Leaderboard Section End Here ================================ -->
-
-    <!-- ================================ About Section Start Here ================================ -->
-    <section id="aboutSection">
-      <div class="container">
-        <h3 data-aos-duration="650" data-aos="fade-up" class="secHeader"><span>About</span> CodeClip</h3>
-        <div class="row aboutContainer">
-          <div class="col-10">
-            <p data-aos-duration="650" data-aos="fade-up text-muted">
-              CodeClip is a lightweight, browser-based platform designed to make
-              coding practice simple, accessible, and collaborative. Whether
-              you're a beginner looking to sharpen your skills or an aspiring
-              contributor to open source, CodeClip offers a clean interface
-              where you can solve real-world coding challenges, run your code
-              live, and share your solutions — all without any setup, Built
-              entirely with HTML, CSS, and JavaScript, CodeClip is not just a
-              tool but a learning experience itself. It’s an open-source project
-              proudly developed as part of
-              <strong>GirlScript Summer of Code (GSSoC)</strong>, aimed at
-              empowering developers through hands-on practice and meaningful
-              contributions.
-            </p>
+      </section>
 
-            <p data-aos-duration="650" data-aos="fade-up" class="ctaBtn">
-              <a
-                href="https://github.com/opensource-society/CodeClip"
-                target="_blank"
-                title="click here to start contributing in CodeClip Project under GSSoC'25"
-                class="aboutCTA-Btn"
-                >Contribute to CodeClip</a
-              >
-            </p>
+      <!-- About Section -->
+      <section id="aboutSection">
+        <div class="container">
+          <h3 class="secHeader"><span>About</span> CodeClip</h3>
+          <div class="row justify-content-center">
+            <div class="col-12 col-lg-10">
+              <p class="text-muted">
+                CodeClip is a lightweight, browser-based platform designed to make
+                coding practice simple, accessible, and collaborative. Whether
+                you're a beginner looking to sharpen your skills or an aspiring
+                contributor to open source, CodeClip offers a clean interface
+                where you can solve real-world coding challenges, run your code
+                live, and share your solutions — all without any setup.
+              </p>
+              <p class="text-muted">
+                Built entirely with HTML, CSS, and JavaScript, CodeClip is not just a
+                tool but a learning experience itself. It's an open-source project
+                proudly developed as part of
+                <strong>GirlScript Summer of Code (GSSoC)</strong>, aimed at
+                empowering developers through hands-on practice and meaningful
+                contributions.
+              </p>
+
+              <div class="text-center mt-4">
+                <a
+                  href="https://github.com/opensource-society/CodeClip"
+                  target="_blank"
+                  class="aboutCTA-Btn"
+                >
+                  Contribute to CodeClip
+                </a>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
-    </section>
+      </section>
     </main>
 
-    <!-- ================================ Footer Section Start Here ================================ -->
+    <!-- Footer -->
     <footer id="contactFooter">
       <div class="container">
         <div class="row align-items-start justify-content-between py-4">
-          <div data-aos-duration="650" data-aos="fade-up" class="col-12 col-md-3 mb-4 mb-md-0 footer-logo-col">
-            <a class="navbar-brand mb-2" id="homeSection"
-              >Code<span>Clip</span></a
-            > 
-            <p class="footer-desc mb-0 text-dark">
-              CodeClip is a open source project under GirlScript Summer of Code
-              (GSSoC) 2025 to open for contribution
-            </p> 
+          <div class="col-12 col-md-4 mb-4 mb-md-0 footer-logo-col">
+            <a class="navbar-brand mb-2">Code<span class="text-primary">Clip</span></a>
+            <p class="footer-desc">
+              CodeClip is an open source project under GirlScript Summer of Code
+              (GSSoC) 2025 open for contributions.
+            </p>
           </div>
-          <!-- Removed footer nav links when navbar is sticky issue #610 -->
+          
           <div class="col-12 col-md-6 footer-contact-col-main">
-            <h5 data-aos-duration="650" data-aos="fade-left" class="footer-title">Contact Us</h5>
-            <div class="footer-contact-row d-flex justify-content-center">
-              <div data-aos-duration="650" data-aos="fade-right"
-                class="footer-contact-col d-flex flex-column gap-3 w-100"
-              >
+            <h5 class="footer-title">Contact Us</h5>
+            <div class="row">
+              <div class="col-12 col-sm-6">
                 <a
                   href="https://github.com/opensource-society/CodeClip"
                   target="_blank"
-                  class="btn btn-primary mb-2 footer-contact-btn"
-                  style="max-width: 250px"
+                  class="btn btn-primary mb-2 footer-contact-btn d-block"
                 >
                   <i class="fab fa-github me-2"></i> GitHub
                 </a>
                 <a
                   href="https://discord.gg/NmGyBWAE3b"
                   target="_blank"
-                  class="btn btn-primary mb-2 footer-contact-btn"
-                  style="max-width: 250px"
+                  class="btn btn-primary mb-2 footer-contact-btn d-block"
                 >
                   <i class="fab fa-discord me-2"></i> Discord
                 </a>
               </div>
-              <div data-aos-duration="650" data-aos="fade-left"
-                class="footer-contact-col d-flex flex-column align-items-center"
-              >
-              <!-- margin added -->
+              <div class="col-12 col-sm-6">
                 <a
                   href="https://github.com/opensource-society/CodeClip/issues"
                   target="_blank"
-                  class="btn btn-primary mb-2 footer-contact-btn"
-                  style="max-width: 250px"
+                  class="btn btn-primary mb-2 footer-contact-btn d-block"
                 >
                   <i class="fas fa-exclamation-circle me-2"></i> Open an Issue
                 </a>
-                <!-- Added linkdin social connection -->
                 <a
-                  href="https://www.linkedin.com/in/adityai0"
+                  href="https://www.linkedin.com"
                   target="_blank"
-                  class="btn btn-primary mb-2 footer-contact-btn mt-3 "
-                  style="max-width: 250px"
+                  class="btn btn-primary mb-2 footer-contact-btn d-block"
                 >
                   <i class="fab fa-linkedin-in me-2"></i> LinkedIn
                 </a>
-                
               </div>
             </div>
           </div>
-        </div> 
-      </div> 
-    </div>
-    <hr />
-    <p data-aos-duration="650" data-aos="fade-up" class="footerNote text-center mb-0">
-      &copy; CodeClip | Open Source Project 2025
-    </p>
-  </div>
-</footer>
-    <!--AOS Animations-->
+        </div>
+        
+        <hr />
+        <p class="footerNote text-center mb-0">
+          &copy; CodeClip | Open Source Project 2025
+        </p>
+      </div>
+    </footer>
+
+    <!-- Scroll to top button -->
+    <a href="#top" class="scroll_to_top" aria-label="Scroll to top">
+      <i class="fas fa-arrow-up"></i>
+    </a>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- AOS JS -->
     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+
     <script>
+      // Initialize AOS
       AOS.init({
         duration: 650,
         once: true
       });
-    </script>
 
-    <!-- ================================ Footer Section End Here ================================ -->
-   <!--add scroll to top button -->
-    <a href="#top" class="scroll_to_top" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></a>
-    <!-- ================ Vendor JS ================  -->
-    <script src="scripts/jquery.min.js"></script>
-    <script src="scripts/owl.carousel.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-
-    <!-- ================ Custom JS ================  -->
-    <script src="scripts/main.js"></script>
+      // Loading screen - hide after 2 seconds
+      document.addEventListener('DOMContentLoaded', function() {
+        setTimeout(function() {
+          document.getElementById('loading-screen').classList.add('hidden');
+        }, 2000);
+      });
 
-    <script>
-      document.addEventListener("DOMContentLoaded", function () {
-    const loadingScreen = document.getElementById("loading-screen");
-    const loadingHeading = loadingScreen.querySelector("h2");
-
-    const sentences = [
-        "Loading your experience...",
-        "Almost ready, please wait..."
-    ];
-
-    let index = 0;
-    loadingHeading.innerHTML = sentences[index]; // show first sentence
-
-    // Change sentence every 4 seconds
-    const textInterval = setInterval(() => {
-        index = (index + 1) % sentences.length;
-        loadingHeading.innerHTML = sentences[index];
-        // inside setInterval
-        loadingHeading.classList.add("fade-out");
-setTimeout(() => {
-    loadingHeading.innerHTML = sentences[index];
-    loadingHeading.classList.remove("fade-out");
-}, 500);
-
-    }, 4000);
-
-    // Hide loading screen after 8 seconds
-    setTimeout(() => {
-        clearInterval(textInterval);
-        loadingScreen.classList.add("hidden");
-    }, 8000);
-});
+      // Dark mode toggle
+      const toggle = document.getElementById('darkModeToggle');
+      const body = document.body;
+
+      // Check for saved dark mode preference
+      if (localStorage.getItem('darkMode') === 'enabled') {
+        body.classList.add('dark-mode');
+        toggle.checked = true;
+      }
+
+      toggle.addEventListener('change', function() {
+        if (this.checked) {
+          body.classList.add('dark-mode');
+          localStorage.setItem('darkMode', 'enabled');
+        } else {
+          body.classList.remove('dark-mode');
+          localStorage.setItem('darkMode', 'disabled');
+        }
+      });
 
+      // Active nav link on scroll
+      const sections = document.querySelectorAll('section');
+      const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
+
+      window.addEventListener('scroll', function() {
+        let current = '';
+        const scrollPosition = window.scrollY + 100;
+
+        sections.forEach(section => {
+          const sectionTop = section.offsetTop;
+          const sectionHeight = section.clientHeight;
+          
+          if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
+            current = section.getAttribute('id');
+          }
+        });
+
+        navLinks.forEach(link => {
+          link.classList.remove('active');
+          if (link.getAttribute('href') === `#${current}`) {
+            link.classList.add('active');
+          }
+        });
+
+        // Special case for top of page
+        if (scrollPosition < 100) {
+          navLinks.forEach(link => {
+            link.classList.remove('active');
+            if (link.getAttribute('href') === '#top') {
+              link.classList.add('active');
+            }
+          });
+        }
+      });
     </script>
   </body>
-</html>
\ No newline at end of file
+</html>

From 11aa4c2018dccfbaa560ee63ec41feabed1cbc6d Mon Sep 17 00:00:00 2001
From: sulagna-1 <sulagnapatra8@gmail.com>
Date: Thu, 2 Oct 2025 15:57:31 +0530
Subject: [PATCH 2/2] Update index.html

---
 index.html | 1025 ++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 719 insertions(+), 306 deletions(-)

diff --git a/index.html b/index.html
index c3ab7b9f..75219336 100644
--- a/index.html
+++ b/index.html
@@ -5,16 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CodeClip</title>
 
-    <!-- Bootstrap CSS -->
+    <!-- ================ Vendor CSS ================ -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    
-    <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    
-    <!-- Devicon -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
-    
-    <!-- AOS -->
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 
     <style>
@@ -24,13 +18,7 @@
         --dark-bg: #121212;
         --dark-card: #1e1e1e;
         --dark-text: #e0e0e0;
-        --light-text: #333;
-      }
-
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
+        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       }
 
       html {
@@ -38,8 +26,8 @@
       }
 
       body {
+        transition: var(--transition);
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        transition: background-color 0.3s, color 0.3s;
       }
 
       /* Loading Screen */
@@ -62,15 +50,11 @@
         pointer-events: none;
       }
 
-      .loader {
-        text-align: center;
-        color: white;
-      }
-
       .loader i {
         font-size: 3rem;
         margin-bottom: 1rem;
         animation: spin 1.5s linear infinite;
+        color: white;
       }
 
       @keyframes spin {
@@ -81,8 +65,9 @@
       /* Navbar */
       .navbar {
         background-color: white !important;
-        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-        transition: background-color 0.3s;
+        box-shadow: 0 2px 20px rgba(0,0,0,0.1);
+        transition: var(--transition);
+        backdrop-filter: blur(10px);
       }
 
       .navbar-brand {
@@ -93,240 +78,507 @@
       .navbar-nav .nav-link {
         position: relative;
         font-weight: 500;
-        margin: 0 8px;
-        transition: color 0.3s ease;
+        margin: 0 12px;
+        transition: var(--transition);
         color: rgba(0, 0, 0, 0.8) !important;
+        padding: 8px 16px !important;
+        border-radius: 25px;
       }
 
-      .navbar-nav .nav-link::after {
+      .navbar-nav .nav-link::before {
         content: "";
         position: absolute;
-        bottom: -4px;
+        top: 0;
         left: 0;
-        width: 0%;
-        height: 2px;
-        background: var(--primary-color);
-        transition: width 0.3s ease;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+        border-radius: 25px;
+        opacity: 0;
+        transition: var(--transition);
+        z-index: -1;
       }
 
-      .navbar-nav .nav-link:hover::after,
-      .navbar-nav .nav-link.active::after {
-        width: 100%;
+      .navbar-nav .nav-link:hover::before,
+      .navbar-nav .nav-link.active::before {
+        opacity: 1;
       }
 
+      .navbar-nav .nav-link:hover,
       .navbar-nav .nav-link.active {
-        font-weight: 600;
-        color: var(--primary-color) !important;
+        color: white !important;
+        transform: translateY(-2px);
       }
 
-      /* Dark Mode Toggle */
+      /* Beautiful Dark Mode Toggle */
       .dark-mode-toggle {
+        margin-left: 1.5rem;
+      }
+
+      .toggle-wrapper {
+        position: relative;
+        display: inline-block;
+      }
+
+      .toggle-input {
+        display: none;
+      }
+
+      .toggle-slider {
+        position: relative;
         display: flex;
         align-items: center;
-        margin-left: 1rem;
+        width: 70px;
+        height: 35px;
+        background: linear-gradient(145deg, #667eea, #764ba2);
+        border-radius: 50px;
+        cursor: pointer;
+        transition: var(--transition);
+        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+        overflow: hidden;
+      }
+
+      .toggle-slider::before {
+        content: '';
+        position: absolute;
+        left: 3px;
+        width: 29px;
+        height: 29px;
+        background: white;
+        border-radius: 50%;
+        transition: var(--transition);
+        z-index: 2;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+      }
+
+      .toggle-icons {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 10px;
+        z-index: 1;
       }
 
-      .toggle-label {
-        margin-left: 0.5rem;
+      .toggle-icons i {
+        color: white;
+        font-size: 14px;
+        transition: var(--transition);
+        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
+      }
+
+      .toggle-icons .sun { opacity: 1; }
+      .toggle-icons .moon { opacity: 0; }
+
+      .toggle-input:checked + .toggle-slider {
+        background: linear-gradient(145deg, #2c3e50, #3498db);
+      }
+
+      .toggle-input:checked + .toggle-slider::before {
+        transform: translateX(35px);
+        background: #ffd700;
+      }
+
+      .toggle-input:checked + .toggle-slider .sun { opacity: 0; }
+      .toggle-input:checked + .toggle-slider .moon { opacity: 1; }
+
+      /* Scroll Progress Bar */
+      .scroll-progress {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 3px;
+        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+        z-index: 1000;
+        transition: width 0.1s ease;
+      }
+
+      /* Scroll Buttons */
+      .scroll-buttons {
+        position: fixed;
+        right: 20px;
+        bottom: 20px;
+        z-index: 100;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .scroll-btn {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+        color: white;
+        border: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         cursor: pointer;
+        transition: var(--transition);
+        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+        opacity: 0;
+        transform: translateY(20px);
+      }
+
+      .scroll-btn.show {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      .scroll-btn:hover {
+        transform: translateY(-3px) scale(1.1);
+        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+      }
+
+      .scroll-btn i {
         font-size: 1.2rem;
       }
 
       /* Hero Section */
       .heroSection {
-        padding: 120px 0 80px;
+        padding: 140px 0 100px;
         background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        position: relative;
+        overflow: hidden;
+      }
+
+      .heroSection::before {
+        content: '';
+        position: absolute;
+        top: -50%;
+        right: -50%;
+        width: 100%;
+        height: 200%;
+        background: radial-gradient(circle, rgba(102,126,234,0.1) 0%, transparent 70%);
+        animation: float 6s ease-in-out infinite;
+      }
+
+      @keyframes float {
+        0%, 100% { transform: translateY(0px) rotate(0deg); }
+        50% { transform: translateY(-20px) rotate(180deg); }
       }
 
       .heroSection h1 {
         font-size: 3.5rem;
-        font-weight: 700;
+        font-weight: 800;
         margin-bottom: 1.5rem;
+        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
       }
 
       .blueCol {
-        color: var(--primary-color);
+        color: transparent;
+        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+        -webkit-background-clip: text;
+        background-clip: text;
       }
 
       .heroDescription {
         font-size: 1.1rem;
-        line-height: 1.6;
+        line-height: 1.7;
         margin-bottom: 2rem;
       }
 
       .ctaBtn-Container {
         display: flex;
-        gap: 1rem;
+        gap: 1.5rem;
+        flex-wrap: wrap;
       }
 
       .heroSectionBtn {
         background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
         color: white;
         border: none;
-        padding: 12px 25px;
-        border-radius: 30px;
+        padding: 14px 30px;
+        border-radius: 50px;
         font-weight: 600;
-        transition: transform 0.3s, box-shadow 0.3s;
+        transition: var(--transition);
+        position: relative;
+        overflow: hidden;
+        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+      }
+
+      .heroSectionBtn::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+        transition: left 0.5s;
+      }
+
+      .heroSectionBtn:hover::before {
+        left: 100%;
       }
 
       .heroSectionBtn:hover {
-        transform: translateY(-3px);
-        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        transform: translateY(-5px) scale(1.05);
+        box-shadow: 0 10px 25px rgba(0,0,0,0.3);
       }
 
-      /* Challenge Section */
+      /* Card Styles */
+      .icon-container {
+        display: flex;
+        gap: 6px;
+        margin: 8px 0;
+        font-size: 24px;
+      }
+
+      .icon-container i {
+        transition: transform 0.2s ease;
+      }
+
+      .icon-container i:hover {
+        transform: scale(1.2);
+      }
+
+      /* Section spacing */
       #challengeSection {
-        padding: 80px 0;
+        padding: 2rem 0;
+      }
+
+      /* Bootstrap row gap fix */
+      .challengeContainer {
+        row-gap: 1.5rem;
       }
 
-      .card {
+      /* Card styles */
+      .challengeContainer .card {
+        box-shadow: rgba(19, 117, 216, 0.2) 0px 8px 24px;
         border: none;
         border-radius: 15px;
-        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
-        margin-bottom: 2rem;
+        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
         height: 100%;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        cursor: pointer;
       }
 
-      .card:hover {
-        transform: translateY(-10px);
-        box-shadow: 0 15px 30px rgba(0,0,0,0.15);
+      /* Card hover */
+      .challengeContainer .card:hover {
+        transform: translateY(-3px) scale(1.01);
+        box-shadow: 0 0 18px rgba(37, 99, 235, 0.45);
       }
 
+      /* Card top container */
+      .card-TopContainer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      /* Header */
       .card-Header {
+        font-size: 20px;
         font-weight: 600;
-        color: var(--primary-color);
-        margin-bottom: 10px;
+        margin-bottom: 0;
+        flex: 1 1 auto;
+        min-width: 120px;
       }
 
+      /* Difficulty badge */
       .card-Level {
-        display: inline-block;
-        font-size: 0.75rem;
-        font-weight: 600;
-        padding: 4px 12px;
-        border-radius: 20px;
-        margin-bottom: 15px;
+        font-size: 12px;
+        padding: 4px 20px;
+        border-radius: 17px;
+        font-weight: 700;
+        margin: 0 7px 0 0;
+        white-space: nowrap;
       }
 
       .medium-Col {
-        background: #fff3cd;
-        color: #856404;
+        background-color: #fff3cd;
+        color: #a88825;
       }
 
       .hard-Col {
-        background: #f8d7da;
-        color: #721c24;
-      }
-
-      .icon-container {
-        display: flex;
-        gap: 8px;
-        margin: 10px 0;
-        font-size: 1.5rem;
+        background-color: #f8d7da;
+        color: #7d1c1c;
       }
 
+      /* Participation info */
       .card-Participate {
-        font-size: 0.9rem;
-        color: #6c757d;
-        margin-bottom: 15px;
+        font-size: 13px;
+        color: #666;
+        margin: 6px 0;
+        opacity: 0.9;
+        line-height: 1.4;
       }
 
+      /* Description text */
       .card-Text {
-        font-size: 0.95rem;
+        font-size: 14px;
+        opacity: 0.85;
+        text-align: justify;
         line-height: 1.6;
-        margin-bottom: 20px;
+        hyphens: auto;
       }
 
+      /* Button */
       .card-CTAButton {
         display: flex;
         justify-content: flex-end;
       }
 
       .card-Btn {
-        display: inline-block;
-        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
-        color: white;
         text-decoration: none;
-        font-weight: 500;
-        padding: 8px 20px;
-        border-radius: 25px;
-        transition: all 0.3s ease;
+        font-size: 13px;
+        padding: 8px 28px;
+        border-radius: 5px;
+        background-color: #2563eb;
+        color: white;
+        font-weight: 700;
+        transition: all 0.2s ease-in-out;
+        display: inline-block;
       }
 
       .card-Btn:hover {
-        background: linear-gradient(45deg, #0056b3, #0099cc);
-        transform: scale(1.05);
+        background-color: #1d4ed8;
+        box-shadow: 0px 3px 8px rgba(0,0,0,0.25);
         color: white;
         text-decoration: none;
       }
 
       /* Leaderboard Section */
       .leaderboard-wrapper {
-        padding: 80px 0;
+        padding: 100px 0;
         background: #f8f9fa;
       }
 
       .leaderboard-list {
-        max-width: 600px;
+        max-width: 700px;
         margin: 0 auto;
         background: white;
-        border-radius: 15px;
-        padding: 30px;
-        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+        border-radius: 25px;
+        padding: 40px;
+        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
+        position: relative;
+        overflow: hidden;
+      }
+
+      .leaderboard-list::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 8px;
+        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
       }
 
       .leaderboard-list h2 {
         text-align: center;
-        margin-bottom: 1rem;
+        margin-bottom: 1.5rem;
+        font-size: 2.2rem;
+        font-weight: 700;
       }
 
       .highlight {
-        color: var(--primary-color);
+        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
       }
 
       .leaderboard-list p {
         text-align: center;
-        margin-bottom: 2rem;
+        margin-bottom: 2.5rem;
         color: #6c757d;
+        font-size: 1.1rem;
       }
 
       .leaderboard-row {
         display: flex;
         align-items: center;
-        padding: 15px;
-        border-radius: 10px;
-        margin-bottom: 10px;
-        transition: background 0.3s;
+        padding: 18px 20px;
+        border-radius: 15px;
+        margin-bottom: 12px;
+        transition: var(--transition);
+        background: #f8f9fa;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .leaderboard-row::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 0;
+        background: linear-gradient(90deg, rgba(102,126,234,0.1), transparent);
+        transition: var(--transition);
+      }
+
+      .leaderboard-row:hover::before {
+        width: 100%;
       }
 
       .leaderboard-row:hover {
-        background: #f8f9fa;
+        transform: translateX(10px);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
       }
 
-      .rank-1, .rank-2, .rank-3 {
-        background: #f8f9fa;
+      .rank-1, .rank-2, .rank-3, .rank-4 {
+        background: linear-gradient(135deg, #fff9e6, #ffffff);
+        border: 2px solid #ffd700;
       }
 
+      .rank-2 { border-color: #c0c0c0; }
+      .rank-3 { border-color: #cd7f32; }
+      .rank-4 { border-color:chocolate  ; }
+
       .rank {
-        font-weight: bold;
-        width: 40px;
+        font-weight: 800;
+        width: 50px;
+        font-size: 1.2rem;
+        color: var(--primary-color);
       }
 
       .leaderboard-Img {
-        width: 40px;
-        height: 40px;
+        width: 50px;
+        height: 50px;
         border-radius: 50%;
-        margin: 0 15px;
+        margin: 0 20px;
+        border: 3px solid var(--primary-color);
+        transition: var(--transition);
+      }
+
+      .leaderboard-row:hover .leaderboard-Img {
+        transform: scale(1.1) rotate(5deg);
       }
 
       .userName {
         flex: 1;
-        font-weight: 500;
+        font-weight: 600;
+        font-size: 1.1rem;
       }
 
       .points {
-        font-weight: bold;
+        font-weight: 700;
         color: var(--primary-color);
+        font-size: 1.1rem;
+      }     
+             /* Add leaderboard CSS section */
+      .leaderboard-row:last-child {
+      background: #f8f9fa;
+      border: 2px solid transparent;
+      transition: var(--transition);
+      }
+
+      .leaderboard-row:last-child:hover {
+      transform: translateX(10px);
+      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
       }
 
       /* About Section */
@@ -403,32 +655,7 @@
         color: #6c757d;
         padding-top: 20px;
       }
-
-      /* Scroll to top button */
-      .scroll_to_top {
-        position: fixed;
-        bottom: 30px;
-        right: 30px;
-        background: var(--primary-color);
-        color: white;
-        width: 50px;
-        height: 50px;
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        text-decoration: none;
-        box-shadow: 0 3px 10px rgba(0,0,0,0.2);
-        transition: all 0.3s;
-        z-index: 100;
-      }
-
-      .scroll_to_top:hover {
-        background: var(--secondary-color);
-        transform: translateY(-3px);
-        color: white;
-      }
-
+    
       /* Dark Mode Styles */
       body.dark-mode {
         background-color: var(--dark-bg);
@@ -436,20 +663,17 @@
       }
 
       body.dark-mode .navbar {
-        background-color: #1f1f1f !important;
-        border-bottom: 1px solid #333;
+        background-color: #1a1a1a !important;
+        box-shadow: 0 2px 20px rgba(0,0,0,0.5);
       }
 
       body.dark-mode .navbar-nav .nav-link {
         color: var(--dark-text) !important;
       }
 
+      body.dark-mode .navbar-nav .nav-link:hover,
       body.dark-mode .navbar-nav .nav-link.active {
-        color: var(--secondary-color) !important;
-      }
-
-      body.dark-mode .navbar-nav .nav-link::after {
-        background: var(--secondary-color);
+        color: white !important;
       }
 
       body.dark-mode .heroSection {
@@ -459,7 +683,7 @@
       body.dark-mode .card {
         background-color: var(--dark-card);
         color: var(--dark-text);
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
       }
 
       body.dark-mode .card-Header {
@@ -467,12 +691,12 @@
       }
 
       body.dark-mode .medium-Col {
-        background: #3a2e05;
+        background-color: #3a2e05;
         color: #ffd54f;
       }
 
       body.dark-mode .hard-Col {
-        background: #3a0a0a;
+        background-color: #3a0a0a;
         color: #ff8a8a;
       }
 
@@ -481,7 +705,7 @@
       }
 
       body.dark-mode .leaderboard-wrapper {
-        background: #1a1a1a;
+        background: var(--dark-bg);
       }
 
       body.dark-mode .leaderboard-list {
@@ -489,14 +713,18 @@
         color: var(--dark-text);
       }
 
-      body.dark-mode .leaderboard-row:hover {
+      body.dark-mode .leaderboard-row {
         background: #2a2a2a;
       }
 
       body.dark-mode .rank-1, 
       body.dark-mode .rank-2, 
       body.dark-mode .rank-3 {
-        background: #2a2a2a;
+        background: linear-gradient(135deg, #3a3a3a, #2a2a2a);
+      }
+
+      body.dark-mode #aboutSection {
+        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
       }
 
       body.dark-mode footer {
@@ -505,13 +733,34 @@
       }
 
       body.dark-mode .footer-desc {
-        color: #aaa;
+        color: #aaa !important;
       }
 
       body.dark-mode .text-muted {
         color: #aaa !important;
       }
 
+      body.dark-mode .btn-primary {
+        background-color: #2563eb;
+        border-color: #2563eb;
+      }
+
+      body.dark-mode .btn-primary:hover {
+        background-color: #1d4ed8;
+        border-color: #1d4ed8;
+      }
+
+      body.dark-mode hr {
+        border-color: #444;
+      }
+      
+      body.dark-mode .navbar-brand {
+      color: var(--dark-text) !important;
+      }
+
+      body.dark-mode .navbar-brand span {
+      color: var(--secondary-color) !important;
+     }
       /* Responsive */
       @media (max-width: 768px) {
         .heroSection h1 {
@@ -526,35 +775,57 @@
           width: 100%;
           margin-bottom: 10px;
         }
+
+        .navbar-nav .nav-link {
+          margin: 5px 0;
+          text-align: center;
+        }
+
+        .dark-mode-toggle {
+          margin: 15px auto 0;
+          justify-content: center;
+        }
+
+        .scroll-buttons {
+          right: 15px;
+          bottom: 15px;
+        }
+        
+        .scroll-btn {
+          width: 45px;
+          height: 45px;
+        }
       }
     </style>
   </head>
 
   <body>
+    <!-- Scroll Progress Bar -->
+    <div class="scroll-progress"></div>
+
     <!-- Loading Screen -->
     <div id="loading-screen">
-        <div class="loader">
+        <div class="loader text-center text-white">
             <i class="fas fa-spinner"></i>
             <h2>Loading your experience...</h2>
         </div>
     </div>
 
     <!-- Header -->
-    <header id="top">
-      <nav class="navbar navbar-expand-lg navbar-light fixed-top">
+    <header>
+      <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
         <div class="container">
-          <a class="navbar-brand" href="#top">🌐 CodeClip</a>
-          
-          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
-                  data-bs-target="#navbarNav" aria-controls="navbarNav" 
+          <a class="navbar-brand" href="#top">Code<span>Clip</span></a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                  data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                   aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
           
-          <div class="collapse navbar-collapse" id="navbarNav">
-            <ul class="navbar-nav ms-auto">
+          <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
               <li class="nav-item">
-                <a class="nav-link active" href="#top">Home</a>
+                <a class="nav-link" href="#top">Home</a>
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#challengeSection">Challenges</a>
@@ -565,13 +836,20 @@ <h2>Loading your experience...</h2>
               <li class="nav-item">
                 <a class="nav-link" href="#aboutSection">About</a>
               </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#contactFooter">Contact</a>
+              </li>
             </ul>
             
+            <!-- Beautiful Dark Mode Toggle -->
             <div class="dark-mode-toggle">
-              <div class="form-check form-switch">
-                <input class="form-check-input" type="checkbox" id="darkModeToggle">
-                <label class="form-check-label toggle-label" for="darkModeToggle">
-                  <i class="fas fa-moon"></i>
+              <div class="toggle-wrapper">
+                <input type="checkbox" class="toggle-input" id="darkModeToggle">
+                <label class="toggle-slider" for="darkModeToggle">
+                  <div class="toggle-icons">
+                    <i class="fas fa-sun sun"></i>
+                    <i class="fas fa-moon moon"></i>
+                  </div>
                 </label>
               </div>
             </div>
@@ -582,20 +860,20 @@ <h2>Loading your experience...</h2>
 
     <main>
       <!-- Hero Section -->
-      <section class="heroSection">
+      <section id="top" class="heroSection">
         <div class="container">
-          <div class="row align-items-center">
+          <div class="row align-items-center min-vh-100">
             <div class="col-12 col-md-6">
               <div class="gssocContainer mb-4">
-                <img 
+                  <img 
                 src="assets/images/hero-section/gssoc-log.png"
                 class="img-fluid gssoc-logo"
                 alt="gssoc logo"
               />
-                <h4 class="text-primary">GSSoC 2025</h4>
+                <h4 class="text-primary fw-bold">GSSoC 2025</h4>
               </div>
 
-              <h1>
+              <h1 data-aos="fade-right" data-aos-duration="650">
                 Code Run <br />
                 <span class="blueCol">Contribute</span>
               </h1>
@@ -610,19 +888,21 @@ <h1>
 
               <div class="ctaBtn-Container">
                 <button class="btn heroSectionBtn">
-                  <i class="fas fa-code"></i> Code
+                  <i class="fas fa-code me-2"></i> Start Coding
                 </button>
                 <button class="btn heroSectionBtn">
-                  <i class="fas fa-play"></i> Run
+                  <i class="fas fa-rocket me-2"></i> Explore Challenges
                 </button>
               </div>
             </div>
 
-            <div class="col-12 col-md-6 d-none d-md-block">
+            <div class="col-12 col-md-6 d-none d-md-block text-center">
               <img 
                 src="assets/images/hero-section/hero-Img.png"
-                class="img-fluid rounded"
+                class="img-fluid rounded-3 shadow-lg"
                 alt="CodeClip Hero Image"
+                data-aos="zoom-in"
+                data-aos-delay="300"
               />
             </div>
           </div>
@@ -632,80 +912,171 @@ <h1>
       <!-- Challenge Section -->
       <section id="challengeSection">
         <div class="container">
-          <h2 class="text-center mb-5">Coding Challenges</h2>
-          <div class="row">
+          <div class="row challengeContainer">
+            <!-- All 6 Cards -->
             <!-- Card 1 -->
-            <div class="col-12 col-md-6 col-lg-4">
-              <div class="card">
+            <div class="col-12 col-md-4">
+              <div data-aos-duration="800" data-aos="fade-up" class="card">
                 <div class="card-body">
                   <div class="card-TopContainer">
                     <h5 class="card-Header">Frontend Challenges</h5>
                     <p class="card-Level medium-Col">EASY</p>
+                    <div class="icon-container">
+                      <i class="devicon-html5-plain colored" title="HTML5"></i>
+                      <i class="devicon-css3-plain colored" title="CSS3"></i>
+                      <i class="devicon-javascript-plain colored" title="JavaScript"></i>
+                    </div>
                   </div>
-                  <div class="icon-container">
-                    <i class="devicon-html5-plain colored" title="HTML5"></i>
-                    <i class="devicon-css3-plain colored" title="CSS3"></i>
-                    <i class="devicon-javascript-plain colored" title="JavaScript"></i>
-                  </div>
+
                   <p class="card-Participate">
                     <i class="fas fa-users"></i> 135 coders joined
                   </p>
-                  <p class="card-Text">
+                  <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
                     Build real UI components using HTML, CSS, and JavaScript.
                     These tasks help you improve your layout, styling,
                     responsiveness, and interactivity.
                   </p>
+
                   <div class="card-CTAButton">
-                    <a href="#" class="card-Btn">Join Now</a>
+                    <a href="frontendChallenges.html" class="card-Btn">Join Now</a>
                   </div>
                 </div>
               </div>
             </div>
 
             <!-- Card 2 -->
-            <div class="col-12 col-md-6 col-lg-4">
-              <div class="card">
+            <div class="col-12 col-md-4">
+              <div data-aos-duration="800" data-aos="fade-up" class="card">
                 <div class="card-body">
                   <div class="card-TopContainer">
                     <h5 class="card-Header">JavaScript Logics</h5>
                     <p class="card-Level medium-Col">MEDIUM</p>
+                    <div class="icon-container">
+                      <i class="devicon-javascript-plain colored" title="JavaScript"></i>
+                    </div>
                   </div>
-                  <div class="icon-container">
-                    <i class="devicon-javascript-plain colored" title="JavaScript"></i>
-                  </div>
+
                   <p class="card-Participate">
                     <i class="fas fa-users"></i> 189 coders joined
                   </p>
-                  <p class="card-Text">
+                  <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
                     Master the core of JavaScript by solving logic-based problems
                     that boost your thinking and problem-solving skills.
                   </p>
+
                   <div class="card-CTAButton">
-                    <a href="#" class="card-Btn">Join Now</a>
+                    <a href="jslogics.html" class="card-Btn">Join Now</a>
                   </div>
                 </div>
               </div>
             </div>
 
             <!-- Card 3 -->
-            <div class="col-12 col-md-6 col-lg-4">
-              <div class="card">
+            <div class="col-12 col-md-4">
+              <div data-aos-duration="800" data-aos="fade-up" class="card">
                 <div class="card-body">
                   <div class="card-TopContainer">
                     <h5 class="card-Header">Backend Basics</h5>
                     <p class="card-Level hard-Col">HARD</p>
+                    <div class="icon-container">
+                      <i class="devicon-nodejs-plain colored" title="Node.js"></i>
+                      <i class="devicon-express-original colored" title="Express.js"></i>
+                    </div>
                   </div>
-                  <div class="icon-container">
-                    <i class="devicon-nodejs-plain colored" title="Node.js"></i>
-                    <i class="devicon-express-original colored" title="Express.js"></i>
-                  </div>
+
                   <p class="card-Participate">
                     <i class="fas fa-users"></i> 150 coders joined
                   </p>
-                  <p class="card-Text">
+                  <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
                     Learn the fundamentals of backend development through simple
                     tasks using APIs, data handling, and server-side logic.
                   </p>
+
+                  <div class="card-CTAButton">
+                    <a href="backendChallenges.html" class="card-Btn">Join Now</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Card 4 -->
+            <div class="col-12 col-md-4">
+              <div data-aos-duration="800" data-aos="fade-up" class="card">
+                <div class="card-body">
+                  <div class="card-TopContainer">
+                    <h5 class="card-Header">UI Design Tasks</h5>
+                    <p class="card-Level">EASY</p>
+                    <div class="icon-container">
+                      <i class="devicon-html5-plain colored" title="HTML5"></i>
+                      <i class="devicon-css3-plain colored" title="CSS3"></i>
+                    </div>
+                  </div>
+
+                  <p class="card-Participate">
+                    <i class="fas fa-users"></i> 120 coders joined
+                  </p>
+                  <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
+                    Practice building beautiful and functional UI components using
+                    HTML and CSS. Perfect for improving your design sense and
+                    layout skills.
+                  </p>
+
+                  <div class="card-CTAButton">
+                    <a href="uiChallenges.html" class="card-Btn">Join Now</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Card 5 -->
+            <div class="col-12 col-md-4">
+              <div data-aos-duration="800" data-aos="fade-up" class="card">
+                <div class="card-body">
+                  <div class="card-TopContainer">
+                    <h5 class="card-Header">Open Source Challenges</h5>
+                    <p class="card-Level medium-Col">MEDIUM</p>
+                    <div class="icon-container">
+                      <i class="devicon-git-plain colored" title="Git"></i>
+                      <i class="devicon-github-original colored" title="GitHub"></i>
+                    </div>
+                  </div>
+
+                  <p class="card-Participate">
+                    <i class="fas fa-users"></i> 200 coders joined
+                  </p>
+                  <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
+                    Practice real world contribution workflows using Git and
+                    GitHub. You'll learn how to contribute to projects, manage
+                    pull requests.
+                  </p>
+
+                  <div class="card-CTAButton">
+                    <a href="gitChallenges.html" class="card-Btn">Join Now</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Card 6 -->
+            <div class="col-12 col-md-4">
+              <div data-aos-duration="800" data-aos="fade-up" class="card">
+                <div class="card-body">
+                  <div class="card-TopContainer">
+                    <h5 class="card-Header">JavaScript Mini Projects</h5>
+                    <p class="card-Level medium-Col">Easy</p>
+                    <div class="icon-container">
+                      <i class="devicon-javascript-plain colored" title="JavaScript"></i>
+                      <i class="devicon-css3-plain colored" title="CSS3"></i>
+                    </div>
+                  </div>
+
+                  <p class="card-Participate">
+                    <i class="fas fa-users"></i> 300 coders joined
+                  </p>
+                  <p data-aos-duration="800" data-aos="fade-up" class="card-Text">
+                    Created an interactive form/input area,Applied CSS styles for visual consistency .Added features like auto-focus, clear input after add, and animation.
+                  </p>
+
                   <div class="card-CTAButton">
                     <a href="#" class="card-Btn">Join Now</a>
                   </div>
@@ -719,7 +1090,7 @@ <h5 class="card-Header">Backend Basics</h5>
       <!-- Leaderboard Section -->
       <section id="leaderboardSection" class="leaderboard-wrapper">
         <div class="container">
-          <div class="leaderboard-list">
+          <div class="leaderboard-list" data-aos="zoom-in">
             <h2>
               <span class="highlight">Top Coder</span> of the Week
             </h2>
@@ -728,28 +1099,28 @@ <h2>
               contributed to open source, and stood out as the best performers of the week.
             </p>
 
-            <div class="leaderboard-row rank-1">
+            <div class="leaderboard-row rank-1" data-aos="fade-right" data-aos-delay="100">
               <span class="rank">#1</span>
               <img src="assets/images/leaderboard-section/user-1.png" alt="User 1" class="leaderboard-Img">
               <span class="userName">Rahul <span class="badge gold">🏆</span></span>
               <span class="points">1250 pts</span>
             </div>
 
-            <div class="leaderboard-row rank-2">
+            <div class="leaderboard-row rank-2" data-aos="fade-right" data-aos-delay="200">
               <span class="rank">#2</span>
               <img src="assets/images/leaderboard-section/user-2.png" alt="User 2" class="leaderboard-Img">
               <span class="userName">Manisha <span class="badge silver">🥈</span></span>
               <span class="points">1180 pts</span>
             </div>
 
-            <div class="leaderboard-row rank-3">
+            <div class="leaderboard-row rank-3" data-aos="fade-right" data-aos-delay="300">
               <span class="rank">#3</span>
               <img src="assets/images/leaderboard-section/user-1.png" alt="User 3" class="leaderboard-Img">
               <span class="userName">Pankaj <span class="badge bronze">🥉</span></span>
               <span class="points">1100 pts</span>
             </div>
 
-            <div class="leaderboard-row">
+            <div class="leaderboard-row rank-4" data-aos="fade-right" data-aos-delay="400">
               <span class="rank">#4</span>
               <img src="assets/images/leaderboard-section/user-2.png" alt="User 4" class="leaderboard-Img">
               <span class="userName">Simran</span>
@@ -762,10 +1133,10 @@ <h2>
       <!-- About Section -->
       <section id="aboutSection">
         <div class="container">
-          <h3 class="secHeader"><span>About</span> CodeClip</h3>
-          <div class="row justify-content-center">
-            <div class="col-12 col-lg-10">
-              <p class="text-muted">
+          <h3 data-aos-duration="650" data-aos="fade-up" class="secHeader"><span>About</span> CodeClip</h3>
+          <div class="row aboutContainer">
+            <div class="col-10">
+              <p data-aos-duration="650" data-aos="fade-up" class="text-muted">
                 CodeClip is a lightweight, browser-based platform designed to make
                 coding practice simple, accessible, and collaborative. Whether
                 you're a beginner looking to sharpen your skills or an aspiring
@@ -773,16 +1144,8 @@ <h3 class="secHeader"><span>About</span> CodeClip</h3>
                 where you can solve real-world coding challenges, run your code
                 live, and share your solutions — all without any setup.
               </p>
-              <p class="text-muted">
-                Built entirely with HTML, CSS, and JavaScript, CodeClip is not just a
-                tool but a learning experience itself. It's an open-source project
-                proudly developed as part of
-                <strong>GirlScript Summer of Code (GSSoC)</strong>, aimed at
-                empowering developers through hands-on practice and meaningful
-                contributions.
-              </p>
 
-              <div class="text-center mt-4">
+              <p data-aos-duration="650" data-aos="fade-up" class="ctaBtn">
                 <a
                   href="https://github.com/opensource-society/CodeClip"
                   target="_blank"
@@ -790,7 +1153,7 @@ <h3 class="secHeader"><span>About</span> CodeClip</h3>
                 >
                   Contribute to CodeClip
                 </a>
-              </div>
+              </p>
             </div>
           </div>
         </div>
@@ -801,139 +1164,189 @@ <h3 class="secHeader"><span>About</span> CodeClip</h3>
     <footer id="contactFooter">
       <div class="container">
         <div class="row align-items-start justify-content-between py-4">
-          <div class="col-12 col-md-4 mb-4 mb-md-0 footer-logo-col">
-            <a class="navbar-brand mb-2">Code<span class="text-primary">Clip</span></a>
-            <p class="footer-desc">
-              CodeClip is an open source project under GirlScript Summer of Code
-              (GSSoC) 2025 open for contributions.
+          <div data-aos-duration="650" data-aos="fade-up" class="col-12 col-md-4 mb-4 mb-md-0 footer-logo-col">
+            <a class="navbar-brand mb-2">Code<span>Clip</span></a>
+            <p class="footer-desc mb-0">
+              CodeClip is a open source project under GirlScript Summer of Code
+              (GSSoC) 2025 to open for contribution
             </p>
           </div>
           
-          <div class="col-12 col-md-6 footer-contact-col-main">
-            <h5 class="footer-title">Contact Us</h5>
-            <div class="row">
-              <div class="col-12 col-sm-6">
-                <a
-                  href="https://github.com/opensource-society/CodeClip"
-                  target="_blank"
-                  class="btn btn-primary mb-2 footer-contact-btn d-block"
-                >
+          <div class="col-12 col-md-7 footer-contact-col-main">
+            <h2 data-aos-duration="650" data-aos="fade-left" class="footer-title">Contact Us</h2>
+            <div class="footer-contact-row d-flex justify-content-center">
+              <div data-aos-duration="650" data-aos="fade-right"
+                class="footer-contact-col d-flex flex-column gap-3 w-100">
+                <a href="https://github.com/opensource-society/CodeClip" target="_blank"
+                  class="btn btn-primary mb-2 footer-contact-btn" style="max-width: 250px">
                   <i class="fab fa-github me-2"></i> GitHub
                 </a>
-                <a
-                  href="https://discord.gg/NmGyBWAE3b"
-                  target="_blank"
-                  class="btn btn-primary mb-2 footer-contact-btn d-block"
-                >
+                <a href="https://discord.gg/NmGyBWAE3b" target="_blank"
+                  class="btn btn-primary mb-2 footer-contact-btn" style="max-width: 250px">
                   <i class="fab fa-discord me-2"></i> Discord
                 </a>
               </div>
-              <div class="col-12 col-sm-6">
-                <a
-                  href="https://github.com/opensource-society/CodeClip/issues"
-                  target="_blank"
-                  class="btn btn-primary mb-2 footer-contact-btn d-block"
-                >
+              <div data-aos-duration="650" data-aos="fade-left"
+                class="footer-contact-col d-flex flex-column align-items-center">
+                <a href="https://github.com/opensource-society/CodeClip/issues" target="_blank"
+                  class="btn btn-primary mb-2 footer-contact-btn" style="max-width: 250px">
                   <i class="fas fa-exclamation-circle me-2"></i> Open an Issue
                 </a>
-                <a
-                  href="https://www.linkedin.com"
-                  target="_blank"
-                  class="btn btn-primary mb-2 footer-contact-btn d-block"
-                >
+                <a href="https://www.linkedin.com" target="_blank"
+                  class="btn btn-primary mb-2 footer-contact-btn mt-3" style="max-width: 250px">
                   <i class="fab fa-linkedin-in me-2"></i> LinkedIn
                 </a>
               </div>
             </div>
           </div>
         </div>
-        
         <hr />
-        <p class="footerNote text-center mb-0">
+        <p data-aos-duration="650" data-aos="fade-up" class="footerNote text-center mb-0">
           &copy; CodeClip | Open Source Project 2025
         </p>
       </div>
     </footer>
 
-    <!-- Scroll to top button -->
-    <a href="#top" class="scroll_to_top" aria-label="Scroll to top">
-      <i class="fas fa-arrow-up"></i>
-    </a>
+    <!-- Scroll Buttons -->
+    <div class="scroll-buttons">
+      <button class="scroll-btn scroll-up" onclick="scrollToSection('top')">
+        <i class="fas fa-chevron-up"></i>
+      </button>
+      <button class="scroll-btn scroll-down" onclick="scrollToNextSection()">
+        <i class="fas fa-chevron-down"></i>
+      </button>
+    </div>
 
-    <!-- Bootstrap JS -->
+    <!-- Scripts -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-    
-    <!-- AOS JS -->
     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
-
     <script>
       // Initialize AOS
       AOS.init({
         duration: 650,
         once: true
       });
+      
 
-      // Loading screen - hide after 2 seconds
-      document.addEventListener('DOMContentLoaded', function() {
+      // Loading screen
+      document.addEventListener("DOMContentLoaded", function () {
         setTimeout(function() {
-          document.getElementById('loading-screen').classList.add('hidden');
+          document.getElementById("loading-screen").classList.add("hidden");
         }, 2000);
       });
 
       // Dark mode toggle
-      const toggle = document.getElementById('darkModeToggle');
+      const toggle = document.getElementById("darkModeToggle");
       const body = document.body;
 
-      // Check for saved dark mode preference
-      if (localStorage.getItem('darkMode') === 'enabled') {
-        body.classList.add('dark-mode');
+      if (localStorage.getItem("darkMode") === "enabled") {
+        body.classList.add("dark-mode");
         toggle.checked = true;
       }
 
-      toggle.addEventListener('change', function() {
+      toggle.addEventListener("change", function() {
         if (this.checked) {
-          body.classList.add('dark-mode');
-          localStorage.setItem('darkMode', 'enabled');
+          body.classList.add("dark-mode");
+          localStorage.setItem("darkMode", "enabled");
         } else {
-          body.classList.remove('dark-mode');
-          localStorage.setItem('darkMode', 'disabled');
+          body.classList.remove("dark-mode");
+          localStorage.setItem("darkMode", "disabled");
         }
       });
 
-      // Active nav link on scroll
-      const sections = document.querySelectorAll('section');
-      const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
-
-      window.addEventListener('scroll', function() {
-        let current = '';
-        const scrollPosition = window.scrollY + 100;
-
-        sections.forEach(section => {
-          const sectionTop = section.offsetTop;
-          const sectionHeight = section.clientHeight;
-          
-          if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
-            current = section.getAttribute('id');
-          }
-        });
-
-        navLinks.forEach(link => {
-          link.classList.remove('active');
-          if (link.getAttribute('href') === `#${current}`) {
-            link.classList.add('active');
-          }
-        });
-
-        // Special case for top of page
-        if (scrollPosition < 100) {
-          navLinks.forEach(link => {
-            link.classList.remove('active');
-            if (link.getAttribute('href') === '#top') {
-              link.classList.add('active');
-            }
-          });
-        }
-      });
+     // Scroll progress bar
+window.addEventListener("scroll", function() {
+  const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+  const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+  const scrolled = (winScroll / height) * 100;
+  document.querySelector(".scroll-progress").style.width = scrolled + "%";
+});
+
+// Scroll buttons visibility
+const scrollButtons = document.querySelectorAll('.scroll-btn');
+
+window.addEventListener('scroll', function() {
+  const scrollPosition = window.pageYOffset;
+  
+  // Show/hide scroll up button
+  if (scrollPosition > 300) {
+    document.querySelector('.scroll-up').classList.add('show');
+  } else {
+    document.querySelector('.scroll-up').classList.remove('show');
+  }
+  
+  // Show/hide scroll down button (hide when near bottom)
+  if (scrollPosition < document.documentElement.scrollHeight - window.innerHeight - 100) {
+    document.querySelector('.scroll-down').classList.add('show');
+  } else {
+    document.querySelector('.scroll-down').classList.remove('show');
+  }
+});
+
+// Scroll to section function
+function scrollToSection(sectionId) {
+  document.getElementById(sectionId).scrollIntoView({
+    behavior: 'smooth'
+  });
+}
+
+// Scroll to next section
+function scrollToNextSection() {
+  const sections = ['top', 'challengeSection', 'leaderboardSection', 'aboutSection', 'contactFooter'];
+  const currentScroll = window.pageYOffset;
+  
+  for (let i = 0; i < sections.length - 1; i++) {
+    const section = document.getElementById(sections[i]);
+    const nextSection = document.getElementById(sections[i + 1]);
+    
+    if (currentScroll >= section.offsetTop && currentScroll < nextSection.offsetTop) {
+      nextSection.scrollIntoView({ behavior: 'smooth' });
+      return;
+    }
+  }
+  
+  // If at the last section, scroll to top
+  document.getElementById('top').scrollIntoView({ behavior: 'smooth' });
+}
+
+// FIXED: Active nav link on scroll - includes footer contact section
+const sections = document.querySelectorAll("section, footer");
+const navLinks = document.querySelectorAll(".navbar-nav .nav-link");
+
+window.addEventListener("scroll", function() {
+  let current = "";
+  const scrollPosition = window.scrollY + 100;
+
+  sections.forEach(section => {
+    const sectionTop = section.offsetTop;
+    const sectionHeight = section.clientHeight;
+    
+    if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
+      current = section.getAttribute("id");
+    }
+  });
+
+  navLinks.forEach(link => {
+    link.classList.remove("active");
+    if (link.getAttribute("href") === `#${current}`) {
+      link.classList.add("active");
+    }
+  });
+
+  // Special case for top of page
+  if (scrollPosition < 100) {
+    navLinks.forEach(link => {
+      link.classList.remove("active");
+      if (link.getAttribute("href") === "#top") {
+        link.classList.add("active");
+      }
+    });
+  }
+});
+    
     </script>
+    <!-- ================ Custom JS ================  -->
+    <script src="scripts/main.js"></script>
+    
   </body>
 </html>