index.html

@@ -275,8 +275,8 @@
 
                         <div class="slide1">
                             <div class="slide1-box">
-                                <div class="image-container image-container1">
+                                <div class="image-container">
-                                    <img src="assets/images/hai1/qa.jpg" alt="Business Meeting">
+                                    <img src="templateapi/assets/images/hai1/qa.jpg" alt="Business Meeting">
                                     <div class="image-overlay">
                                         <h4>QA & Testing</h4>
                                         <p>A close-up of a developer's screen showing a green 'Tests Passed' status and
@@ -284,7 +284,7 @@
                                     </div>
                                 </div>
                                 <div class="image-container">
-                                    <img src="assets/images/hai1/hai12.jpg" alt="Architecture">
+                                    <img src="templateapi/assets/images/hai1/hai12.jpg" alt="Architecture">
                                     <div class="image-overlay">
                                         <h4>Software Dev</h4>
                                         <p>A sleek image of a professional wireframe/design on a large monitor, with a
@@ -294,10 +294,11 @@
                             </div>
                         </div>
 
+
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
-                                    <img src="assets/images/hai1/ai.jpg" alt="Analytics">
+                                    <img src="templateapi/assets/images/hai1/ai.jpg" alt="Analytics">
                                     <div class="image-overlay">
                                         <h4>AI & Data</h4>
                                         <p>A stunning, large-scale data visualization or chart (like a complex network
@@ -305,8 +306,8 @@
                                         </p>
                                     </div>
                                 </div>
-                                <div class="image-container image-container1">
+                                <div class="image-container">
-                                    <img src="assets/images/hai1/cyber.jpg" alt="Technology">
+                                    <img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
                                     <div class="image-overlay">
                                         <h4>Cybersecurity</h4>
                                         <p>A digital shield or lock icon overlaid on a dark, technical background with
@@ -325,7 +326,7 @@
                                             a successful performance report graph.</p>
                                     </div>
                                 </div>
-                                <div class="image-container image-container1">
+                                <div class="image-container">
                                     <img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
                                     <div class="image-overlay">
                                         <h4>Cybersecurity</h4>
@@ -345,7 +346,7 @@
                                             split view showing the finished product on a mobile phone.</p>
                                     </div>
                                 </div>
-                                <div class="image-container image-container1">
+                                <div class="image-container">
                                     <img src="templateapi/assets/images/hai1/qa.jpg" alt="Technology">
                                     <div class="image-overlay">
                                         <h4>QA & Testing</h4>
@@ -366,7 +367,7 @@
                                         </p>
                                     </div>
                                 </div>
-                                <div class="image-container image-container1">
+                                <div class="image-container">
                                     <img src="templateapi/assets/images/hai1/aws..jpg" alt="Technology">
                                     <div class="image-overlay">
                                         <h4>Cloud & DevOps</h4>
@@ -388,7 +389,7 @@
                                         </p>
                                     </div>
                                 </div>
-                                <div class="image-container image-container1">
+                                <div class="image-container">
                                     <img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
                                     <div class="image-overlay">
                                         <h4>Cybersecurity</h4>
@@ -409,7 +410,7 @@
                                             split view showing the finished product on a mobile phone.</p>
                                     </div>
                                 </div>
-                                <div class="image-container image-container1">
+                                <div class="image-container">
                                     <img src="templateapi/assets/images/hai1/aws..jpg" alt="Beach">
                                     <div class="image-overlay">
                                         <h4>Cloud & DevOps</h4>

main.css

@@ -182,16 +182,16 @@
  }
 
  .orange {
-     background:#9bc9ff ;
+     background: #fec192;
-     background-image: url('assets/images/unlockcarrer/mentorship.png');
+     background-image: url('assets/images/unlockcarrer/jobs.png');
      background-size: 115px;
      background-repeat: no-repeat;
      background-position: bottom right;
  }
 
  .blue {
-     background:#fec192;
+     background: #9bc9ff;
-     background-image: url('assets/images/unlockcarrer/jobs.png');
+     background-image: url('assets/images/unlockcarrer/mentorship.png');
      background-size: 115px;
      background-repeat: no-repeat;
      background-position: bottom right;
@@ -663,6 +663,10 @@
      transition: transform 0.3s ease;
  }
 
+ .image-container:hover .image-overlay {
+     transform: translateY(0);
+ }
+
  .image-overlay h4 {
      margin: 0 0 5px 0;
      font-size: 16px;
@@ -1294,7 +1298,7 @@
  .course-category-title {
      font-size: 22px;
      font-weight: bold;
-     padding-left: 14px;
+     margin-bottom: 15px;
  }
 
  .course-slider {
@@ -1929,6 +1933,10 @@
          margin-left: 15px;
      }
 
+     .slide1r-container {
+         padding: 20px;
+     }
+
      .slide1-box {
          flex-direction: column;
          gap: 15px;
@@ -2052,15 +2060,7 @@
      }
 
      .cards_box {
-         margin-top: 20px;
+         margin-top: 28px;
-     }
-
-     .slide1 {
-         min-height: 50%;
-     }
-
-     .image-container1 {
-         display: none !important;
      }
 
      .buttons {
@@ -2197,11 +2197,6 @@
      .mobile-hamburger {
          display: none;
      }
-
-     .hero_container {
-         padding-top: 0px;
-         margin-top: 0px;
-     }
  }
 
  @keyframes fadeInUp {

main.js

@@ -11,111 +11,105 @@ function getInTouch() {
     window.open("https://wa.me/+919787466226?text=Hi%20KodePilot%20Team%2C%0A%0AI%20came%20across%20your%20website%20and%20would%20like%20to%20know%20more%20about%20your%20Career%20Guidance%20and%20Placement%20support%20services.%20Could%20you%20please%20share%20the%20details%3F%0A%0AThanks%21", "_blank");
 }
 
-class Slide1rSlider {
+(function () {
-    constructor({ trackId = 'slide1rTrack', prevId = 'prevBtn', nextId = 'nextBtn', autoPlayDuration = 5000, invert = true } = {}) {
+    if (window.Slide1rSliderLoaded) {
-        this.trackId = trackId;
+        return;
-        this.prevId = prevId;
+    }
-        this.nextId = nextId;
+    window.Slide1rSliderLoaded = true;
-        this.autoPlayDuration = autoPlayDuration;
+
-        this.invert = invert;
+    class Slide1rSlider {
-        if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => this.initSlider());
+        constructor() {
-        else this.initSlider();
+            setTimeout(() => {
+                this.initSlider();
+            }, 100);
         }
 
         initSlider() {
-        this.track = document.getElementById(this.trackId);
+            try {
-        if (!this.track) return console.warn('slide track not found:', this.trackId);
+                this.track = document.getElementById('slide1rTrack');
+                this.slides = document.querySelectorAll('.slide1');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
 
-        this.originalSlides = Array.from(this.track.querySelectorAll('.slide1'));
+                if (!this.track || this.slides.length === 0) {
-        if (this.originalSlides.length === 0) return console.warn('no .slide1 found');
+                    console.warn("Slider DOM elements not found. Retrying...");
-
+                    setTimeout(() => this.initSlider(), 200);
-        this.prevBtn = document.getElementById(this.prevId);
+                    return;
-        this.nextBtn = document.getElementById(this.nextId);
-
-        this.setupStructure();
-        this.bindEvents();
-
-        this.currentIndex = 1;
-        this.updateSlider(false);
-        this.startAutoPlay();
                 }
 
-    setupStructure() {
+                this.currentIndex = 0;
-        this.track.style.display = 'flex';
-        this.track.style.transition = 'transform 0.5s ease';
-        this.track.querySelectorAll('.slide1').forEach(s => {
-            s.style.minWidth = '100%';
-            s.style.boxSizing = 'border-box';
-        });
-
-        const first = this.originalSlides[0].cloneNode(true);
-        const last = this.originalSlides[this.originalSlides.length - 1].cloneNode(true);
-
-        this.track.insertBefore(last, this.track.firstChild);
-        this.track.appendChild(first);
-
-        this.slides = Array.from(this.track.querySelectorAll('.slide1'));
                 this.totalSlides = this.slides.length;
+                this.autoPlayDuration = 5000;
+
+                this.init();
+            } catch (err) {
+                console.error("Slider initialization failed:", err);
+            }
         }
 
-    updateSlider(animate = true) {
+        init() {
-        this.track.style.transition = animate ? 'transform 0.5s ease' : 'none';
+            try {
-        this.track.style.transform = `translateX(-${this.currentIndex * 100}%)`;
+                this.updateSlider();
+                this.bindEvents();
+                this.startAutoPlay();
+                this.bindKeyboardEvents();
+            } catch (err) {
+                console.error("Slider init error:", err);
+            }
+        }
+
+
+        updateSlider() {
+            try {
+                const translateX = -this.currentIndex * 100;
+                this.track.style.transform = `translateX(${translateX}%)`;
+
+            } catch (err) {
+                console.error("Error updating slider:", err);
+            }
         }
 
         nextSlide() {
-        if (this.invert) {
+            try {
-            this.currentIndex--;
+                this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
-            this.updateSlider(true);
+                this.updateSlider();
-            if (this.currentIndex === 0) {
-                setTimeout(() => {
-                    this.track.style.transition = 'none';
-                    this.currentIndex = this.slides.length - 2;
-                    this.updateSlider(false);
-                }, 500);
-            }
-        } else {
-            this.currentIndex++;
-            this.updateSlider(true);
-            if (this.currentIndex === this.slides.length - 1) {
-                setTimeout(() => {
-                    this.track.style.transition = 'none';
-                    this.currentIndex = 1;
-                    this.updateSlider(false);
-                }, 500);
-            }
-        }
                 this.restartAutoPlay();
+            } catch (err) {
+                console.error("Error going to next slide:", err);
+            }
         }
 
         prevSlide() {
-        if (this.invert) {
+            try {
-            this.currentIndex++;
+                this.currentIndex = this.currentIndex === 0 ? this.totalSlides - 1 : this.currentIndex - 1;
-            this.updateSlider(true);
+                this.updateSlider();
-            if (this.currentIndex === this.slides.length - 1) {
-                setTimeout(() => {
-                    this.track.style.transition = 'none';
-                    this.currentIndex = 1;
-                    this.updateSlider(false);
-                }, 500);
-            }
-        } else {
-            this.currentIndex--;
-            this.updateSlider(true);
-            if (this.currentIndex === 0) {
-                setTimeout(() => {
-                    this.track.style.transition = 'none';
-                    this.currentIndex = this.slides.length - 2;
-                    this.updateSlider(false);
-                }, 500);
-            }
-        }
                 this.restartAutoPlay();
+            } catch (err) {
+                console.error("Error going to previous slide:", err);
+            }
+        }
+
+        goToSlide(index) {
+            try {
+                this.currentIndex = index;
+                this.updateSlider();
+                this.restartAutoPlay();
+            } catch (err) {
+                console.error("Error going to slide:", err);
+            }
         }
 
         startAutoPlay() {
+            try {
                 this.stopAutoPlay();
-        this.autoPlayInterval = setInterval(() => this.nextSlide(), this.autoPlayDuration);
+
+                this.autoPlayInterval = setInterval(() => {
+                    this.nextSlide();
+                }, this.autoPlayDuration);
+
+            } catch (err) {
+                console.error("Error starting autoplay:", err);
+            }
         }
 
         stopAutoPlay() {
@@ -131,36 +125,79 @@ class Slide1rSlider {
         }
 
         bindEvents() {
-        if (this.nextBtn) this.nextBtn.addEventListener('click', () => this.nextSlide());
+            try {
-        if (this.prevBtn) this.prevBtn.addEventListener('click', () => this.prevSlide());
+                if (this.nextBtn) {
+                    this.nextBtn.addEventListener('click', () => this.nextSlide());
+                }
 
-        const container = this.track.closest('.slide1r-container') || this.track.parentElement;
+                if (this.prevBtn) {
+                    this.prevBtn.addEventListener('click', () => this.prevSlide());
+                }
+
+                const container = document.querySelector('.slide1r-container');
                 if (container) {
                     container.addEventListener('mouseenter', () => this.stopAutoPlay());
                     container.addEventListener('mouseleave', () => this.startAutoPlay());
                 }
 
-        let startX = 0, endX = 0;
+                let startX = 0;
-        this.track.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; this.stopAutoPlay(); });
+                let endX = 0;
-        this.track.addEventListener('touchmove', (e) => { endX = e.touches[0].clientX; });
+
+                if (this.track) {
+                    this.track.addEventListener('touchstart', (e) => {
+                        startX = e.touches[0].clientX;
+                        this.stopAutoPlay();
+                    });
+
+                    this.track.addEventListener('touchmove', (e) => {
+                        endX = e.touches[0].clientX;
+                    });
+
                     this.track.addEventListener('touchend', () => {
-            const delta = startX - endX;
+                        const deltaX = startX - endX;
-            if (Math.abs(delta) > 50) {
+                        if (Math.abs(deltaX) > 50) {
-                if (delta > 0) this.nextSlide(); else this.prevSlide();
+                            if (deltaX > 0) {
+                                this.nextSlide();
+                            } else {
+                                this.prevSlide();
+                            }
                         }
                         this.startAutoPlay();
                     });
-
-        document.addEventListener('keydown', (e) => {
-            const containerEl = document.querySelector('.slide1r-container');
-            if (!containerEl) return;
-            if (e.key === 'ArrowLeft') this.prevSlide();
-            if (e.key === 'ArrowRight') this.nextSlide();
-        });
                 }
-}
+            } catch (err) {
+                console.error("Error binding events:", err);
+            }
+        }
 
-new Slide1rSlider({ invert: true, autoPlayDuration: 4000 });
+        bindKeyboardEvents() {
+            const keyHandler = (e) => {
+                const container = document.querySelector('.slide1r-container');
+                if (container && this.isElementInViewport(container)) {
+                    if (e.key === 'ArrowLeft') {
+                        this.prevSlide();
+                    } else if (e.key === 'ArrowRight') {
+                        this.nextSlide();
+                    }
+                }
+            };
+
+            document.addEventListener('keydown', keyHandler);
+        }
+
+        isElementInViewport(el) {
+            const rect = el.getBoundingClientRect();
+            return (
+                rect.top >= 0 &&
+                rect.left >= 0 &&
+                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+            );
+        }
+    }
+
+    new Slide1rSlider();
+})();
 
 const statItems = document.querySelectorAll('.stat-item');