fix: image overview

index.html

@@ -275,8 +275,8 @@
 
                         <div class="slide1">
                             <div class="slide1-box">
-                                <div class="image-container">
-                                    <img src="templateapi/assets/images/hai1/qa.jpg" alt="Business Meeting">
+                                <div class="image-container image-container1">
+                                    <img src="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="templateapi/assets/images/hai1/hai12.jpg" alt="Architecture">
+                                    <img src="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,11 +294,10 @@
                             </div>
                         </div>
 
-
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
-                                    <img src="templateapi/assets/images/hai1/ai.jpg" alt="Analytics">
+                                    <img src="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
@@ -306,8 +305,8 @@
                                         </p>
                                     </div>
                                 </div>
-                                <div class="image-container">
-                                    <img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
+                                <div class="image-container image-container1">
+                                    <img src="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
@@ -326,7 +325,7 @@
                                             a successful performance report graph.</p>
                                     </div>
                                 </div>
-                                <div class="image-container">
+                                <div class="image-container image-container1">
                                     <img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
                                     <div class="image-overlay">
                                         <h4>Cybersecurity</h4>
@@ -346,7 +345,7 @@
                                             split view showing the finished product on a mobile phone.</p>
                                     </div>
                                 </div>
-                                <div class="image-container">
+                                <div class="image-container image-container1">
                                     <img src="templateapi/assets/images/hai1/qa.jpg" alt="Technology">
                                     <div class="image-overlay">
                                         <h4>QA & Testing</h4>
@@ -367,7 +366,7 @@
                                         </p>
                                     </div>
                                 </div>
-                                <div class="image-container">
+                                <div class="image-container image-container1">
                                     <img src="templateapi/assets/images/hai1/aws..jpg" alt="Technology">
                                     <div class="image-overlay">
                                         <h4>Cloud & DevOps</h4>
@@ -389,7 +388,7 @@
                                         </p>
                                     </div>
                                 </div>
-                                <div class="image-container">
+                                <div class="image-container image-container1">
                                     <img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
                                     <div class="image-overlay">
                                         <h4>Cybersecurity</h4>
@@ -410,7 +409,7 @@
                                             split view showing the finished product on a mobile phone.</p>
                                     </div>
                                 </div>
-                                <div class="image-container">
+                                <div class="image-container image-container1">
                                     <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: #fec192;
-     background-image: url('assets/images/unlockcarrer/jobs.png');
+     background:#9bc9ff ;
+     background-image: url('assets/images/unlockcarrer/mentorship.png');
      background-size: 115px;
      background-repeat: no-repeat;
      background-position: bottom right;
  }
 
  .blue {
-     background: #9bc9ff;
-     background-image: url('assets/images/unlockcarrer/mentorship.png');
+     background:#fec192;
+     background-image: url('assets/images/unlockcarrer/jobs.png');
      background-size: 115px;
      background-repeat: no-repeat;
      background-position: bottom right;
@@ -663,10 +663,6 @@
      transition: transform 0.3s ease;
  }
 
- .image-container:hover .image-overlay {
-     transform: translateY(0);
- }
-
  .image-overlay h4 {
      margin: 0 0 5px 0;
      font-size: 16px;
@@ -1298,7 +1294,7 @@
  .course-category-title {
      font-size: 22px;
      font-weight: bold;
-     margin-bottom: 15px;
+     padding-left: 14px;
  }
 
  .course-slider {
@@ -1933,10 +1929,6 @@
          margin-left: 15px;
      }
 
-     .slide1r-container {
-         padding: 20px;
-     }
-
      .slide1-box {
          flex-direction: column;
          gap: 15px;
@@ -2060,7 +2052,15 @@
      }
 
      .cards_box {
-         margin-top: 28px;
+         margin-top: 20px;
+     }
+
+     .slide1 {
+         min-height: 50%;
+     }
+
+     .image-container1 {
+         display: none !important;
      }
 
      .buttons {
@@ -2197,6 +2197,11 @@
      .mobile-hamburger {
          display: none;
      }
+
+     .hero_container {
+         padding-top: 0px;
+         margin-top: 0px;
+     }
  }
 
  @keyframes fadeInUp {

main.js

@@ -11,193 +11,156 @@ 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");
 }
 
-(function () {
-    if (window.Slide1rSliderLoaded) {
-        return;
+class Slide1rSlider {
+    constructor({ trackId = 'slide1rTrack', prevId = 'prevBtn', nextId = 'nextBtn', autoPlayDuration = 5000, invert = true } = {}) {
+        this.trackId = trackId;
+        this.prevId = prevId;
+        this.nextId = nextId;
+        this.autoPlayDuration = autoPlayDuration;
+        this.invert = invert;
+        if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => this.initSlider());
+        else this.initSlider();
     }
-    window.Slide1rSliderLoaded = true;
 
-    class Slide1rSlider {
-        constructor() {
-            setTimeout(() => {
-                this.initSlider();
-            }, 100);
-        }
+    initSlider() {
+        this.track = document.getElementById(this.trackId);
+        if (!this.track) return console.warn('slide track not found:', this.trackId);
 
-        initSlider() {
-            try {
-                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.originalSlides.length === 0) return console.warn('no .slide1 found');
 
-                if (!this.track || this.slides.length === 0) {
-                    console.warn("Slider DOM elements not found. Retrying...");
-                    setTimeout(() => this.initSlider(), 200);
-                    return;
-                }
+        this.prevBtn = document.getElementById(this.prevId);
+        this.nextBtn = document.getElementById(this.nextId);
 
-                this.currentIndex = 0;
-                this.totalSlides = this.slides.length;
-                this.autoPlayDuration = 5000;
+        this.setupStructure();
+        this.bindEvents();
 
-                this.init();
-            } catch (err) {
-                console.error("Slider initialization failed:", err);
+        this.currentIndex = 1;
+        this.updateSlider(false);
+        this.startAutoPlay();
+    }
+
+    setupStructure() {
+        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;
+    }
+
+    updateSlider(animate = true) {
+        this.track.style.transition = animate ? 'transform 0.5s ease' : 'none';
+        this.track.style.transform = `translateX(-${this.currentIndex * 100}%)`;
+    }
+
+    nextSlide() {
+        if (this.invert) {
+            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);
+            }
+        } 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();
+    }
 
-        init() {
-            try {
-                this.updateSlider();
-                this.bindEvents();
-                this.startAutoPlay();
-                this.bindKeyboardEvents();
-            } catch (err) {
-                console.error("Slider init error:", err);
+    prevSlide() {
+        if (this.invert) {
+            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);
+            }
+        } 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();
+    }
 
+    startAutoPlay() {
+        this.stopAutoPlay();
+        this.autoPlayInterval = setInterval(() => this.nextSlide(), this.autoPlayDuration);
+    }
 
-        updateSlider() {
-            try {
-                const translateX = -this.currentIndex * 100;
-                this.track.style.transform = `translateX(${translateX}%)`;
+    stopAutoPlay() {
+        if (this.autoPlayInterval) {
+            clearInterval(this.autoPlayInterval);
+            this.autoPlayInterval = null;
+        }
+    }
 
-            } catch (err) {
-                console.error("Error updating slider:", err);
-            }
+    restartAutoPlay() {
+        this.stopAutoPlay();
+        this.startAutoPlay();
+    }
+
+    bindEvents() {
+        if (this.nextBtn) this.nextBtn.addEventListener('click', () => this.nextSlide());
+        if (this.prevBtn) this.prevBtn.addEventListener('click', () => this.prevSlide());
+
+        const container = this.track.closest('.slide1r-container') || this.track.parentElement;
+        if (container) {
+            container.addEventListener('mouseenter', () => this.stopAutoPlay());
+            container.addEventListener('mouseleave', () => this.startAutoPlay());
         }
 
-        nextSlide() {
-            try {
-                this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
-                this.updateSlider();
-                this.restartAutoPlay();
-            } catch (err) {
-                console.error("Error going to next slide:", err);
+        let startX = 0, endX = 0;
+        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;
+            if (Math.abs(delta) > 50) {
+                if (delta > 0) this.nextSlide(); else this.prevSlide();
             }
-        }
-
-        prevSlide() {
-            try {
-                this.currentIndex = this.currentIndex === 0 ? this.totalSlides - 1 : this.currentIndex - 1;
-                this.updateSlider();
-                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);
-
-            } catch (err) {
-                console.error("Error starting autoplay:", err);
-            }
-        }
-
-        stopAutoPlay() {
-            if (this.autoPlayInterval) {
-                clearInterval(this.autoPlayInterval);
-                this.autoPlayInterval = null;
-            }
-        }
-
-        restartAutoPlay() {
-            this.stopAutoPlay();
             this.startAutoPlay();
-        }
+        });
 
-        bindEvents() {
-            try {
-                if (this.nextBtn) {
-                    this.nextBtn.addEventListener('click', () => this.nextSlide());
-                }
-
-                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;
-                let endX = 0;
-
-                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 deltaX = startX - endX;
-                        if (Math.abs(deltaX) > 50) {
-                            if (deltaX > 0) {
-                                this.nextSlide();
-                            } else {
-                                this.prevSlide();
-                            }
-                        }
-                        this.startAutoPlay();
-                    });
-                }
-            } catch (err) {
-                console.error("Error binding events:", err);
-            }
-        }
-
-        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)
-            );
-        }
+        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();
+        });
     }
+}
 
-    new Slide1rSlider();
-})();
+new Slide1rSlider({ invert: true, autoPlayDuration: 4000 });
 
 const statItems = document.querySelectorAll('.stat-item');