Merge pull request 'test' (#41) from test into main

Reviewed-on: #41

index.html

@@ -162,10 +162,9 @@
             <div class="logo">KodePilot</div>
             <input type="text" class="search" placeholder="Search Opportunities">
             <div class="buttons">
-                <!-- <a href="/login">Log in</a> -->
                 <button class="login_first" onclick="goToLogin()">Login</button>
-                <button class="business" onclick="getInTouch()">Let's Talk</button>
-                <button class="login" onclick="goToApplay()">Request a call</button>
+                <button class="business" onclick="getInTouch('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')">Let's Talk</button>
+                <button class="login" onclick="getInZoho()">Request a call</button>
             </div>
         </header>
 
@@ -186,14 +185,14 @@
                         </span>
                     </button>
                 </div>
-                <div class="cards">
-                    <div class="card green">Internships<br><small>Gain Practical Experience</small></div>
-                    <div class="card orange">Mentorships<br><small>Guidance From Top Mentors</small></div>
-                    <div class="card blue">Jobs<br><small>Explore Diverse Careers</small></div>
-                    <div class="card purple">Practice<br><small>Refine Skills Daily</small></div>
-                    <div class="card yellow">Competitions<br><small>Battle For Excellence</small></div>
-                    <div class="card pink">More<br><small>Explore More Options</small></div>
-                </div>
+                    <div class="cards">
+                        <div class="card green" onclick="getInZoho()">Internships<br><small>Gain Practical Experience</small></div>
+                        <div class="card orange" onclick="getInZoho()">Mentorships<br><small>Guidance From Top Mentors</small></div>
+                        <div class="card blue" onclick="getInZoho()">Jobs<br><small>Explore Diverse Careers</small></div>
+                        <div class="card purple" onclick="getInZoho()">Practice<br><small>Refine Skills Daily</small></div>
+                        <div class="card yellow" onclick="getInZoho()">Competitions<br><small>Battle For Excellence</small></div>
+                        <div class="card pink" onclick="getInZoho()">More<br><small>Explore More Options</small></div>
+                    </div>
             </div>
         </section>
 
@@ -275,7 +274,7 @@
 
                         <div class="slide1">
                             <div class="slide1-box">
-                                <div class="image-container">
+                                <div class="image-container image-container1">
                                     <img src="templateapi/assets/images/hai1/qa.jpg" alt="Business Meeting">
                                     <div class="image-overlay">
                                         <h4>QA & Testing</h4>
@@ -294,7 +293,6 @@
                             </div>
                         </div>
 
-
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
@@ -306,7 +304,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>
@@ -326,7 +324,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 +344,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 +365,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 +387,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 +408,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>
@@ -439,22 +437,22 @@
                 </div>
 
                 <div class="cards-grid">
-                    <div class="card-add  card-quizzes">
-                    </div>
-
-                    <div class="card-add  card-hackathons">
-                    </div>
-
-                    <div class="card-add  card-scholarships">
-                    </div>
-
-                    <div class="card-add  card-conferences">
-                    </div>
-
-                    <div class="card-add  card-festivals">
-                    </div>
+                        <div class="card-add card-quizzes" 
+                            onclick="getInTouch('https://wa.me/9787466226?text=Hi%20KodePilot%20Team%2C%20I%20would%20like%20to%20know%20more%20about%20the%20Quizzes%20opportunities%20you%20provide.%20Could%20you%20please%20share%20the%20details%3F%20Thanks!')">
+                        </div>                         
+                        <div class="card-add card-hackathons" 
+                            onclick="getInTouch('https://wa.me/9787466226?text=Hi%20KodePilot%20Team%2C%20I%20came%20across%20the%20Hackathons%20section%20on%20your%20website.%20Could%20you%20share%20more%20information%20about%20upcoming%20Hackathons%20and%20how%20to%20participate%3F%20Thanks!')">
+                        </div>
+                         <div class="card-add card-scholarships" 
+                         onclick="getInTouch('https://wa.me/9787466226?text=Hi%20KodePilot%20Team%2C%20I%E2%80%99m%20interested%20in%20learning%20more%20about%20the%20Scholarships%20you%20offer.%20Could%20you%20please%20provide%20the%20details%3F%20Thanks!')">
+                        </div>
+                         <div class="card-add card-conferences" 
+                         onclick="getInTouch('https://wa.me/9787466226?text=Hi%20KodePilot%20Team%2C%20I%E2%80%99d%20like%20to%20know%20more%20about%20the%20Conferences%20mentioned%20on%20your%20website.%20Could%20you%20please%20share%20the%20details%3F%20Thanks!')">
+                        </div>
+                         <div class="card-add card-festivals" 
+                         onclick="getInTouch('https://wa.me/9787466226?text=Hi%20KodePilot%20Team%2C%20I%20saw%20the%20Tech%20Fest%20section%20on%20your%20website%20and%20I%E2%80%99m%20interested%20in%20participating.%20Could%20you%20please%20provide%20more%20information%3F%20Thanks!')">
+                        </div>
                 </div>
-            </div>
         </section>
 
         <section class="move-slider-ruby">
@@ -494,6 +492,29 @@
                         </div>
                     </div>
 
+                    <div class="move-slider-box">
+                        <div class="slide-content">
+                            <p class="slide-text-cot">
+                                "
+                            </p>
+                            <p class="slide-text">
+                                "The KodePilot curriculum gave me hands-on experience with networking and security. I
+                                gained practical
+                                skills and secured my position in network engineering with confidence."
+                            </p>
+                            <div class="slide-logo-box">
+                                <div class="profile-box">
+                                    <img src="templateapi/assets/images/hai1/user-icon.svg" alt="Client Logo"
+                                        class="slide-logo">
+                                    <div class="profile-info">
+                                        <p class="slide-name">koushik</p>
+                                        <p class="slide-role">Network Engineer</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="move-slider-box">
                         <div class="slide-content">
                             <p class="slide-text-cot">
@@ -676,6 +697,11 @@
             <div class="corces"></div>
         </section>
 
+        <div class="whatsapp-icon" onclick="WhatsgetInTouch()">
+             <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp" />
+        </div>
+
+
         <footer class="footer">
             <div class="footer-container">
                 <div class="footer-section company-section">

main.css

@@ -182,7 +182,7 @@
  }
 
  .orange {
-     background:#9bc9ff ;
+     background: #9bc9ff;
      background-image: url('assets/images/unlockcarrer/mentorship.png');
      background-size: 115px;
      background-repeat: no-repeat;
@@ -190,7 +190,7 @@
  }
 
  .blue {
-     background:#fec192;
+     background: #fec192;
      background-image: url('assets/images/unlockcarrer/jobs.png');
      background-size: 115px;
      background-repeat: no-repeat;
@@ -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;
@@ -1027,18 +1023,7 @@
  .move-slider-animation-box {
      display: flex;
      gap: 20px;
-     animation: scroll 20s linear infinite;
- }
-
- @keyframes scroll {
-     from {
-         transform: translateX(0);
-     }
-
-     to {
-         transform: translateX(-50%);
-     }
-
+     will-change: transform;
  }
 
  .move-slider-box {
@@ -1050,7 +1035,7 @@
      background: #fff;
      border-radius: 12px;
      padding: 20px;
-     min-width: 350px;
+     min-width: 200px;
  }
 
  .move-slider-box .slide-content>*:not(.slide-text) {
@@ -1060,6 +1045,11 @@
  .move-slider-box:hover .slide-content>*:not(.slide-text) {
      opacity: 0;
      pointer-events: none;
+     transition-delay: 0s;
+ }
+
+ .move-slider-box .slide-content>*:not(.slide-text) {
+     transition: opacity 0.3s ease 1s;
  }
 
  .move-slider-box .slide-text {
@@ -1069,9 +1059,10 @@
  }
 
  .move-slider-box:hover .slide-text {
-     transform: translateY(100px) scale(1.1);
+     transform: translateY(80px) scale(1.1);
  }
 
+
  .slide-content {
      display: flex;
      flex-direction: column;
@@ -1108,6 +1099,7 @@
      gap: 12px;
  }
 
+
  .profile-info {
      display: flex;
      flex-direction: column;
@@ -1298,7 +1290,7 @@
  .course-category-title {
      font-size: 22px;
      font-weight: bold;
-     margin-bottom: 15px;
+     padding-left: 14px;
  }
 
  .course-slider {
@@ -1737,7 +1729,42 @@
  }
 
 
+ .whatsapp-icon {
+     position: fixed;
+     bottom: 20px;
+     right: 20px;
+     width: 60px;
+     height: 60px;
+     cursor: pointer;
+     z-index: 1000;
+     border-radius: 50%;
+     overflow: hidden;
+     outline: greenyellow 1px solid;
+     transition: transform 0.2s;
+     display: flex;
+     align-items: center;
+     justify-content: center;
+ }
 
+ .whatsapp-icon::before {
+     content: "";
+     position: absolute;
+     inset: 0;
+     border-radius: 50%;
+     background: rgba(37, 211, 101, 0.209);
+     animation: pulse 2s infinite;
+     z-index: -1;
+ }
+
+ .whatsapp-icon img {
+     width: 80%;
+     height: auto;
+     object-fit: contain;
+ }
+
+ .whatsapp-icon:hover {
+     transform: scale(1.1);
+ }
 
 
  .practice-cards-wrapper .practice-card .practice-card-svg {
@@ -1852,7 +1879,6 @@
 
      .move-slider-animation-box {
          margin-top: 393px;
-         margin-right: 0px;
      }
 
      .move-slider-box-static {
@@ -1933,10 +1959,6 @@
          margin-left: 15px;
      }
 
-     .slide1r-container {
-         padding: 20px;
-     }
-
      .slide1-box {
          flex-direction: column;
          gap: 15px;
@@ -2060,7 +2082,15 @@
      }
 
      .cards_box {
-         margin-top: 28px;
+         margin-top: 20px;
+     }
+
+     .slide1 {
+         min-height: 50%;
+     }
+
+     .image-container1 {
+         display: none !important;
      }
 
      .buttons {
@@ -2197,6 +2227,11 @@
      .mobile-hamburger {
          display: none;
      }
+
+     .hero_container {
+         padding-top: 0px;
+         margin-top: 0px;
+     }
  }
 
  @keyframes fadeInUp {

main.js

@@ -7,197 +7,173 @@ function goToApplay() {
 }
 
 
-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 getInTouch(vall) {
+    window.open(vall, "_blank");
 }
 
-(function () {
-    if (window.Slide1rSliderLoaded) {
-        return;
+
+function WhatsgetInTouch() {
+    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 getInZoho() {
+    window.open("https://forms.zohopublic.in/krishnakode1/form/KodePilotRegistrationForm/formperma/A2L8xK6T13A9-s5Kxj8BqRTGsgmpKDHM0DDcZQWye5E");
+}
+
+
+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');
 
@@ -311,7 +287,7 @@ function renderCourses(allCourses) {
               <div class="course-image" style="background-image: url(${course.image});"></div>
             </a>
             <div class="course-content">
-              <a href="${course.link}" class="course-name" target="_blank">${course.name}</a>
+              <a href="/apply" class="course-name" target="_blank">${course.name}</a>
               <div class="course-description">${course.description}</div>
             </div>
         `;
@@ -603,3 +579,35 @@ document.addEventListener("DOMContentLoaded", () => {
 
     counters.forEach(counter => observer.observe(counter));
 });
+
+// i know it is a bad code but it works 😅
+document.addEventListener("DOMContentLoaded", () => {
+    const track = document.querySelector(".move-slider-animation-box");
+    const container = document.querySelector(".container");
+    let pos = 0;
+    const normalSpeed = 1;
+    let speed = 20;
+
+    function animate() {
+        pos -= speed;
+        track.style.transform = `translateX(${pos}px)`;
+
+        if (pos <= -100 && speed !== normalSpeed) {
+            speed = normalSpeed;
+        }
+
+        const firstChild = track.firstElementChild;
+        const firstRect = firstChild.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+
+        if (firstRect.right <= containerRect.left) {
+            track.appendChild(firstChild);
+            pos += firstChild.offsetWidth + 20;
+            track.style.transform = `translateX(${pos}px)`;
+        }
+
+        requestAnimationFrame(animate);
+    }
+
+    animate();
+});