added dynamic card

Reviewed-on: #14

index.html

@@ -5,51 +5,171 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Kodepilot Clone</title>
-    <script>
+    <link rel="stylesheet" href="main.css">
-        async function loadAsset(primary, fallback, type) {
+    <link rel="stylesheet" href="templateapi/main.css">
-            try {
+    <link rel="icon" type="image/x-icon" href="assets/images/logo/favicon.ico">
-                const res = await fetch(primary, { method: "HEAD" });
+    <style>
-                if (res.ok) {
+        .center-container {
-                    addTag(primary, type);
+            display: flex;
-                } else {
+            flex-direction: column;
-                    throw new Error("Primary missing");
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            position: relative;
         }
-            } catch (e) {
+
-                addTag(fallback, type);
+        .scene {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            width: 100%;
+        }
+
+
+        .cube-wrapper {
+            transform-style: preserve-3d;
+            animation: bouncing 2s infinite;
+        }
+
+        .cube {
+            transform-style: preserve-3d;
+            transform: rotateX(45deg) rotateZ(45deg);
+            animation: rotation 2s infinite;
+        }
+
+        .cube-faces {
+            transform-style: preserve-3d;
+            height: 80px;
+            /* $size */
+            width: 80px;
+            /* $size */
+            position: relative;
+            transform-origin: 0 0;
+            transform: translateX(0) translateY(0) translateZ(-40px);
+            /* -$size/2 */
+        }
+
+        .cube-face {
+            position: absolute;
+            inset: 0;
+            background: #003366;
+            border: solid 1px rgb(255, 255, 255);
+        }
+
+        .cube-face.shadow {
+            transform: translateZ(-80px);
+            animation: bouncing-shadow 2s infinite;
+        }
+
+        .cube-face.top {
+            transform: translateZ(80px);
+        }
+
+        .cube-face.front {
+            transform-origin: 0 50%;
+            transform: rotateY(-90deg);
+        }
+
+        .cube-face.back {
+            transform-origin: 0 50%;
+            transform: rotateY(-90deg) translateZ(-80px);
+        }
+
+        .cube-face.right {
+            transform-origin: 50% 0;
+            transform: rotateX(-90deg) translateY(-80px);
+        }
+
+        .cube-face.left {
+            transform-origin: 50% 0;
+            transform: rotateX(-90deg) translateY(-80px) translateZ(80px);
+        }
+
+        @keyframes rotation {
+            0% {
+                transform: rotateX(45deg) rotateY(0) rotateZ(45deg);
+                animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
+            }
+
+            50% {
+                transform: rotateX(45deg) rotateY(0) rotateZ(225deg);
+                animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
+            }
+
+            100% {
+                transform: rotateX(45deg) rotateY(0) rotateZ(405deg);
+                animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
             }
         }
 
-        function addTag(url, type) {
+        @keyframes bouncing {
-            if (type === "js") {
+            0% {
-                const s = document.createElement("script");
+                transform: translateY(-40px);
-                s.src = url;
+                animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
-                s.defer = true;
+            }
-                document.head.appendChild(s);
+
-            } else if (type === "css") {
+            45% {
-                const l = document.createElement("link");
+                transform: translateY(40px);
-                l.rel = "stylesheet";
+                animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-                l.href = url;
+            }
-                document.head.appendChild(l);
+
+            100% {
+                transform: translateY(-40px);
+                animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
             }
         }
 
-        loadAsset("main.css", "https://kodepilot.in/templateapi/main.css", "css");
+        @keyframes bouncing-shadow {
-        loadAsset("main.js", "https://kodepilot.in/templateapi/main.js", "js");
+            0% {
-    </script>
+                transform: translateZ(-80px) scale(1.3);
+                animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
+                opacity: 0.05;
+            }
+
+            45% {
+                transform: translateZ(0);
+                animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+                opacity: 0.3;
+            }
+
+            100% {
+                transform: translateZ(-80px) scale(1.3);
+                animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
+                opacity: 0.05;
+            }
+        }
+    </style>
 </head>
 
 <body>
+    <div id="msg" style="font-size: largest;" class="center-container">
+        <div class="scene">
+            <div class="cube-wrapper">
+                <div class="cube">
+                    <div class="cube-faces">
+                        <div class="cube-face shadow"></div>
+                        <div class="cube-face bottom"></div>
+                        <div class="cube-face top"></div>
+                        <div class="cube-face left"></div>
+                        <div class="cube-face right"></div>
+                        <div class="cube-face back"></div>
+                        <div class="cube-face front"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="body" style="display: none;">
         <header class="navbar">
             <div class="logo">Kodepilot</div>
             <input type="text" class="search" placeholder="Search Opportunities">
             <nav>
-            <a href="#">Internships</a>
+                <a href="/login">Log in</a>
-            <a href="#">Jobs</a>
-            <a href="#">Competitions</a>
             </nav>
             <div class="buttons">
-            <a href="/my/"><button class="business">Dashboard</button></a>
+                <button class="business" onclick="getInTouch()">Get in touch</button>
-            <button class="login" onclick="goToLogin()">Login</button>
+                <button class="login" onclick="goToApplay()">Apply</button>
             </div>
         </header>
 
@@ -57,7 +177,8 @@
             <div class="hero_container">
                 <div class="cards_box">
                     <h1><span class="blue_text">Unlock</span> Your Career</h1>
-                <p>Explore opportunities from across the globe to grow, showcase skills, gain CV points & get hired by
+                    <p>Explore opportunities from across the globe to grow, showcase skills, gain CV points & get hired
+                        by
                         your
                         dream company.</p>
                     <button class="button_blue_box"><img
@@ -136,15 +257,8 @@
                             <img src="https://repo.dhanu.cloud/ico/jbl.svg" alt="jbl">
                             <img src="https://repo.dhanu.cloud/ico/ust.svg" alt="ust">
                             <img src="https://repo.dhanu.cloud/ico/accenture.svg" alt="accenture">
-                        <img class="image-hcl" src="https://repo.dhanu.cloud/ico/hcl.svg" alt="hcl">
-                        <img src="https://repo.dhanu.cloud/ico/ebmpapst.svg" alt="ebmpapst">
-                        <img src="https://repo.dhanu.cloud/ico/infosys.svg" alt="infosys">
-                        <img src="https://repo.dhanu.cloud/ico/jbl.svg" alt="jbl">
-                        <img src="https://repo.dhanu.cloud/ico/ust.svg" alt="ust">
-                        <img src="https://repo.dhanu.cloud/ico/accenture.svg" alt="accenture">
                         </div>
                     </div>
-
                 </div>
             </div>
         </section>
@@ -157,19 +271,19 @@
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
-                                <img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+                                    <img src="assets/images/hai1/qa.jpg"
                                         alt="Business Meeting">
                                     <div class="image-overlay">
-                                    <h4>Business Innovation</h4>
+                                        <h4>QA & Testing</h4>
-                                    <p>Modern workspace collaboration</p>
+                                        <p>A close-up of a developer's screen showing a green 'Tests Passed' status and a successful performance report graph.</p>
                                     </div>
                                 </div>
                                 <div class="image-container">
-                                <img src="https://images.unsplash.com/photo-1542744094-24638eff58bb?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+                                    <img src="assets/images/hai1/hai12.jpg"
                                         alt="Architecture">
                                     <div class="image-overlay">
-                                    <h4>Modern Architecture</h4>
+                                        <h4>Software Dev</h4>
-                                    <p>Contemporary design solutions</p>
+                                        <p>A sleek image of a professional wireframe/design on a large monitor, with a split view showing the finished product on a mobile phone.</p>
                                     </div>
                                 </div>
                             </div>
@@ -179,19 +293,19 @@
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
-                                <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+                                    <img src="assets/images/hai1/ai.jpg"
                                         alt="Analytics">
                                     <div class="image-overlay">
-                                    <h4>Data Analytics</h4>
+                                        <h4>AI & Data</h4>
-                                    <p>Business intelligence insights</p>
+                                        <p>A stunning, large-scale data visualization or chart (like a complex network graph) displayed on a screen, hinting at discovery and high-level strategy.</p>
                                     </div>
                                 </div>
                                 <div class="image-container">
-                                <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+                                    <img src="assets/images/hai1/cyber.jpg"
                                         alt="Technology">
                                     <div class="image-overlay">
-                                    <h4>Technology Hub</h4>
+                                        <h4>Cybersecurity</h4>
-                                    <p>Innovation and development</p>
+                                        <p>A digital shield or lock icon overlaid on a dark, technical background with green/blue code lines, symbolizing protection.</p>
                                     </div>
                                 </div>
                             </div>
@@ -199,19 +313,19 @@
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
-                                <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+                                    <img src="assets/images/hai1/qa.jpg"
                                         alt="Analytics">
                                     <div class="image-overlay">
-                                    <h4>Data Analytics</h4>
+                                        <h4>QA & Testing</h4>
-                                    <p>Business intelligence insights</p>
+                                        <p>A close-up of a developer's screen showing a green 'Tests Passed' status and a successful performance report graph.</p>
                                     </div>
                                 </div>
                                 <div class="image-container">
-                                <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+                                    <img src="assets/images/hai1/cyber.jpg"
                                         alt="Technology">
                                     <div class="image-overlay">
-                                    <h4>Technology Hub</h4>
+                                        <h4>Cybersecurity</h4>
-                                    <p>Innovation and development</p>
+                                        <p>A digital shield or lock icon overlaid on a dark, technical background with green/blue code lines, symbolizing protection.</p>
                                     </div>
                                 </div>
                             </div>
@@ -219,19 +333,19 @@
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
-                                <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+                                    <img src="assets/images/hai1/hai12.jpg"
                                         alt="Analytics">
                                     <div class="image-overlay">
-                                    <h4>Data Analytics</h4>
+                                        <h4>Software Dev</h4>
-                                    <p>Business intelligence insights</p>
+                                        <p>A sleek image of a professional wireframe/design on a large monitor, with a split view showing the finished product on a mobile phone.</p>
                                     </div>
                                 </div>
                                 <div class="image-container">
-                                <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+                                    <img src="assets/images/hai1/qa.jpg"
                                         alt="Technology">
                                     <div class="image-overlay">
-                                    <h4>Technology Hub</h4>
+                                        <h4>QA & Testing</h4>
-                                    <p>Innovation and development</p>
+                                        <p>A close-up of a developer's screen showing a green 'Tests Passed' status and a successful performance report graph.</p>
                                     </div>
                                 </div>
                             </div>
@@ -239,19 +353,19 @@
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
-                                <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+                                    <img src="assets/images/hai1/ai.jpg"
                                         alt="Analytics">
                                     <div class="image-overlay">
-                                    <h4>Data Analytics</h4>
+                                        <h4>AI & Data</h4>
-                                    <p>Business intelligence insights</p>
+                                        <p>A stunning, large-scale data visualization or chart (like a complex network graph) displayed on a screen, hinting at discovery and high-level strategy.</p>
                                     </div>
                                 </div>
                                 <div class="image-container">
-                                <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+                                    <img src="assets/images/hai1/aws..jpg"
                                         alt="Technology">
                                     <div class="image-overlay">
-                                    <h4>Technology Hub</h4>
+                                        <h4>Cloud & DevOps</h4>
-                                    <p>Innovation and development</p>
+                                        <p>An abstract, interconnected graphic of servers and data pipelines with subtle logos (AWS/Azure/GCP-style icons, if usage is permitted) to symbolize powerful infrastructure.</p>
                                     </div>
                                 </div>
                             </div>
@@ -259,48 +373,46 @@
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
-                                <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+                                    <img src="assets/images/hai1/ai.jpg"
                                         alt="Analytics">
                                     <div class="image-overlay">
-                                    <h4>Data Analytics</h4>
+                                        <h4>AI & Data</h4>
-                                    <p>Business intelligence insights</p>
+                                        <p>A stunning, large-scale data visualization or chart (like a complex network graph) displayed on a screen, hinting at discovery and high-level strategy.</p>
                                     </div>
                                 </div>
                                 <div class="image-container">
-                                <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+                                    <img src="assets/images/hai1/cyber.jpg"
                                         alt="Technology">
                                     <div class="image-overlay">
-                                    <h4>Technology Hub</h4>
+                                        <h4>Cybersecurity</h4>
-                                    <p>Innovation and development</p>
+                                        <p>A digital shield or lock icon overlaid on a dark, technical background with green/blue code lines, symbolizing protection.</p>
                                     </div>
                                 </div>
                             </div>
                         </div>
 
-                    <!-- Slide 3 -->
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
-                                <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+                                    <img src="assets/images/hai1/hai12.jpg"
                                         alt="Creativity">
                                     <div class="image-overlay">
-                                    <h4>Creative Space</h4>
+                                        <h4>Software Dev</h4>
-                                    <p>Inspiration and expression</p>
+                                        <p>A sleek image of a professional wireframe/design on a large monitor, with a split view showing the finished product on a mobile phone.</p>
                                     </div>
                                 </div>
                                 <div class="image-container">
-                                <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
+                                    <img src="assets/images/hai1/aws..jpg"
                                         alt="Beach">
                                     <div class="image-overlay">
-                                    <h4>Tropical Paradise</h4>
+                                        <h4>Cloud & DevOps</h4>
-                                    <p>Natural beauty and relaxation</p>
+                                        <p>An abstract, interconnected graphic of servers and data pipelines with subtle logos (AWS/Azure/GCP-style icons, if usage is permitted) to symbolize powerful infrastructure.</p>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-
                 <button class="nav-button prev-btn" id="prevBtn" aria-label="Previous slide"></button>
                 <button class="nav-button next-btn" id="nextBtn" aria-label="Next slide"></button>
             </div>
@@ -318,23 +430,18 @@
 
                 <div class="cards-grid">
                     <div class="card-add  card-quizzes">
-                    <h3>Quizzes</h3>
                     </div>
 
                     <div class="card-add  card-hackathons">
-                    <h3>Hackathons</h3>
                     </div>
 
                     <div class="card-add  card-scholarships">
-                    <h3>Scholarships</h3>
                     </div>
 
                     <div class="card-add  card-conferences">
-                    <h3>Conferences</h3>
                     </div>
 
                     <div class="card-add  card-festivals">
-                    <h3>College Festivals</h3>
                     </div>
                 </div>
             </div>
@@ -363,7 +470,8 @@
                             </p>
                             <p class="slide-text">
                                 "From farm inventory to eco-shipment tracking, kodepilot built us a green-tech backbone.
-                            Their system lets us trace every organic ingredient and prove our sustainability story to
+                                Their system lets us trace every organic ingredient and prove our sustainability story
+                                to
                                 conscious customers."
                             </p>
                             <div class="slide-logo-box">
@@ -406,7 +514,8 @@
                                 "
                             </p>
                             <p class="slide-text">
-                            "Loan processing used to take weeks. kodepilot’ smart engine made approvals happen in days
+                                "Loan processing used to take weeks. kodepilot’ smart engine made approvals happen in
+                                days
                                 without compromising security."
                             </p>
                             <div class="slide-logo-box">
@@ -425,10 +534,90 @@
             </div>
         </section>
 
+
+    <section class="practice-cards-container">
+
+        <!-- <div class="practice-cards-container"> -->
+            <div class="practice-container">
+                <h1 class="practice-title">Practice Coding & Ace Hiring Assessments</h1>
+                <p class="practice-subtitle">Level up your coding skills by practicing the hiring assessments of your dream companies & ace your placement game!</p>
+                
+                <div class="practice-cards-wrapper">
+                    <!-- Coding Practice Card -->
+                    <div class="practice-card active">
+                        <div class="practice-card-content">
+                            <div>
+                                <div class="practice-card-icon">💻</div>
+                                <h3>Coding Practice</h3>
+                                <p>Level up your coding skills by practicing the hiring Questions.</p>
+                            </div>
+                            <a href="#" class="practice-cta-btn">Start Now ➤</a>
+                        </div>
+                        <div class="practice-card-svg">
+                            <img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice">
+                        </div>
+                    </div>
+                    
+                    <!-- Interview Preparation Card -->
+                    <div class="practice-card">
+                        <div class="practice-card-content">
+                            <div>
+                                <div class="practice-card-icon">📋</div>
+                                <h3>Interview Preparation</h3>
+                                <p>Crack Top companies in just 5 days.</p>
+                                <div class="practice-footer-text">20+ Companies</div>
+                            </div>
+                            <a href="#" class="practice-cta-btn">Start Now ➤</a>
+                        </div>
+                        <div class="practice-card-svg">
+                            <img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice">
+                        </div>
+                    </div>
+                    
+                    <!-- Projects Card -->
+                    <div class="practice-card">
+                        <div class="practice-card-content">
+                            <div>
+                                <div class="practice-card-icon">📂</div>
+                                <h3>Projects</h3>
+                                <p>Projects epitomize perfect synergy for success.</p>
+                                <div class="practice-footer-text">15+ Projects</div>
+                            </div>
+                            <a href="#" class="practice-cta-btn">Start Now ➤</a>
+                        </div>
+                        <div class="practice-card-svg">
+                            <img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice">
+                        </div>
+                    </div>
+                    
+                    <!-- Skill Based Assessments Card -->
+                    <div class="practice-card">
+                        <div class="practice-card-content">
+                            <div>
+                                <div class="practice-card-icon">📝</div>
+                                <h3>Skill Based Assessments</h3>
+                                <p>Assess your skills and get ahead of the curve.</p>
+                                <div class="practice-footer-text">2000+ Questions</div>
+                            </div>
+                            <a href="#" class="practice-cta-btn">Start Now ➤</a>
+                        </div>
+                        <div class="practice-card-svg">
+                            <img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        <!-- </div> -->
+
+    </section>
+
+        
+
+
     <section class="card-simple">
         <div class="card-easy">
             <div class="card-easy-left">
-                <img src="templateapi/Assets/Images/learn/learn.png" alt="Student Image">
+                <img src="assets/images/learn/learn.png" alt="Student Image">
             </div>
             <div class="card-easy-right">
                 <h2>Learn & Level Up Your Skills</h2>
@@ -438,8 +627,6 @@
                     <div class="feature"><span>✓</span>Certificate</div>
                     <div class="feature"><span>✓</span>Projects & Assignments</div>
                 </div>
-                <button>Explore Courses</button>
-            </div>
             </div>
         </section>
 
@@ -488,71 +675,6 @@
         <section class="corces-s">
             <div class="corces"></div>
         </section>
-
-    <script>
-        console.log("test");
-        document.addEventListener('DOMContentLoaded', async () => {
-            const allCourses = [];
-
-            const baseUrl = 'https://kodepilot.in/course/index.php';
-            const res = await fetch(baseUrl);
-            const html = await res.text();
-
-            const categoryRegex = /<h3 class="categoryname aabtn"><a href="([^"]+)">([^<]+)<\/a><\/h3>/g;
-            const categories = [];
-            let match;
-            while ((match = categoryRegex.exec(html)) !== null) {
-                categories.push({ url: match[1], name: match[2] });
-            }
-
-            for (const category of categories) {
-                const resCat = await fetch(category.url);
-                const catHtml = await resCat.text();
-                const cleanHtml = catHtml.replace(/\n/g, ' ');
-
-                const courseRegex = /<div class="card dashboard-card [^"]*"[^>]*>.*?<a href="([^"]+)"[^>]*>.*?background-image: url\(([^)]+)\);".*?<span class="sr-only">(.*?)<\/span>.*?<div class="course-category">\s*([^<]+)<\/div>.*?<div class="course-summary">.*?<p>(.*?)<\/p>/g;
-
-                while ((match = courseRegex.exec(cleanHtml)) !== null) {
-                    allCourses.push({
-                        category: match[4].trim(),
-                        link: match[1].trim(),
-                        image: match[2].trim(),
-                        name: match[3].trim(),
-                        description: match[5].replace(/<br\s*\/?>/g, ' ').trim()
-                    });
-                }
-            }
-
-            renderCourses(allCourses);
-        });
-
-        function renderCourses(allCourses) {
-            const container = document.querySelector('.corces');
-            if (!container) {
-                console.error("⚠️ No .corces container found in DOM");
-                return;
-            }
-
-            container.innerHTML = ''; // clear old content
-
-            allCourses.forEach(course => {
-                const courseDiv = document.createElement('div');
-                courseDiv.className = 'course-card';
-                courseDiv.innerHTML = `
-            <a href="${course.link}" target="_blank">
-              <div class="course-image" style="background-image: url(${course.image});"></div>
-            </a>
-            <div class="course-content">
-              <div class="course-category">${course.category}</div>
-              <a href="${course.link}" class="course-name" target="_blank">${course.name}</a>
-              <div class="course-description">${course.description}</div>
-            </div>
-        `;
-                container.appendChild(courseDiv);
-            });
-        }
-    </script>
-
         <footer class="footer">
             <div class="footer-container">
                 <div class="footer-section company-section">
@@ -595,7 +717,8 @@
 
                     <div class="newsletter-section">
                         <h4>Stay Updated</h4>
-                    <p>We'll send you updates on the latest courses and coding opportunities to enhance your skills and
+                        <p>We'll send you updates on the latest courses and coding opportunities to enhance your skills
+                            and
                             advance your career.</p>
 
                         <div class="newsletter-form">
@@ -660,39 +783,27 @@
             <div class="footer-bottom">
                 <div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
                     <div class="footer-bottom-links">
-                    <a href="#">About Us</a>
-                    <a href="#">Contact Us</a>
-                    <a href="#">Careers</a>
-                    <a href="#" style="color: #10b981;">We're hiring <span class="hiring-badge">•</span></a>
-                    <a href="#">Instructors</a>
-                    <a href="#">Become an Instructor</a>
-                </div>
-                <div class="footer-bottom-links" style="margin-top: 10px;">
-                    <a href="#">Student Reviews</a>
-                    <a href="#">FAQs</a>
-                    <a href="#">Course Catalog</a>
-                    <a href="#">Certificates</a>
-                    <a href="#">Student Support</a>
-                </div>
-                <div class="footer-bottom-links" style="margin-top: 10px;">
-                    <a href="#">Affiliate Program</a>
-                    <a href="#">Corporate Training</a>
-                    <a href="#">Bulk Enrollment</a>
-                    <a href="#">Student Discount</a>
-                </div>
-                <div class="footer-bottom-links" style="margin-top: 10px;">
-                    <a href="#">Terms & Conditions</a>
-                    <a href="#">Privacy Policy</a>
-                    <a href="#">Refund Policy</a>
-                    <a href="#">Sitemap</a>
-                </div>
                     <p style="margin-top: 20px;">
-                    Copyright © 2025 <a href="#" style="color: #10b981;">Kode Pilot Learning Pvt Ltd</a> - All rights
+                        <p style="color:#000;">
-                    reserved.
+                            Copyright © 2025 <a href="#" style="color:#000; text-decoration:none;">Kode Pilot Learning Pvt Ltd</a> - All rights reserved.
+                        </p>
                     </p>
                 </div>
             </div>
         </footer>
+    </div>
+    <script src="main.js"></script>
+    <script src="templateapi/main.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script type="text/javascript">
+        $(window).on("load", function () {
+            $('#msg').show();
+            setTimeout(function () {
+                $('#body').show();
+                $('#msg').hide();
+            }, 1000);
+        });
+    </script>
 </body>
 
 </html>

main.css

@@ -22,16 +22,22 @@
 
  .search {
      flex: 1;
-     margin: 0 20px;
+     margin: 0 20px 0 10px;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 20px;
+     max-width: 344px;
+     position: absolute;
+     left: 142px;
  }
 
  nav a {
      margin: 0 10px;
      text-decoration: none;
      color: #333;
+     position: absolute;
+     right: 235px;
+     top: 19px;
  }
 
  .buttons button {
@@ -125,16 +131,24 @@
 
  .green {
      background: #9BE6C1;
+     background-image: url('assets/images/unlockcarrer/internship.png');
+     background-size: 115px;
+     background-repeat: no-repeat;
+     background-position: bottom right;
  }
 
  .orange {
      background: #fec192;
+     background-image: url('assets/images/unlockcarrer/jobs.png');
+     background-size: 115px;
+     background-repeat: no-repeat;
+     background-position: bottom right;
  }
 
  .blue {
      background: #9bc9ff;
-     background-image: url('https://d8it4huxumps7.cloudfront.net/uploads/images/67724b0c0d0f7_img1.png?d=211x163');
+     background-image: url('assets/images/unlockcarrer/mentorship.png');
-     background-size: 140px;
+     background-size: 115px;
      background-repeat: no-repeat;
      background-position: bottom right;
  }
@@ -142,15 +156,26 @@
 
  .purple {
      background: #c8bbff;
+     background-image: url('assets/images/unlockcarrer/practice.png');
+     background-size: 120px;
+     background-repeat: no-repeat;
+     background-position: bottom right;
  }
 
  .yellow {
      background: #ffdd80;
-     color: #333;
+     background-image: url('assets/images/unlockcarrer/competitions.png');
+     background-size: 115px;
+     background-repeat: no-repeat;
+     background-position: bottom right;
  }
 
  .pink {
      background: #ffb1cc;
+     background-image: url('assets/images/unlockcarrer/more.png');
+     background-size: 115px;
+     background-repeat: no-repeat;
+     background-position: bottom right;
  }
 
  .users {
@@ -260,7 +285,7 @@
  .mnc-box {
      display: flex;
      align-items: center;
-     max-width: 1200px;
+     max-width: 1159px;
 
  }
 
@@ -277,6 +302,7 @@
      font-weight: 600;
      font-size: 1.3vw;
      white-space: nowrap;
+     margin-top: -5px;
  }
 
  .mnc h2 .gray,
@@ -292,14 +318,13 @@
  .mnc-logos {
      overflow: hidden;
      width: 100%;
-     height: 55px;
  }
 
  .mnc-logos-track {
      display: flex;
-     gap: 5vw;
+     gap: 40px;
-     animation: stepScroll 12s infinite;
+     transform: translateX(0);
-     height: 100%;
+     transition: transform 0.5s ease;
  }
 
  .mnc-logos img {
@@ -310,33 +335,7 @@
 
  .mnc-logos img.image-hcl {
      height: 25px;
- }
+     margin-top: 8px;
-
- @keyframes stepScroll {
-
-     0%,
-     20% {
-         transform: translateX(0);
-     }
-
-     25%,
-     45% {
-         transform: translateX(-25%);
-     }
-
-     50%,
-     70% {
-         transform: translateX(-50%);
-     }
-
-     75%,
-     95% {
-         transform: translateX(-75%);
-     }
-
-     100% {
-         transform: translateX(0);
-     }
  }
 
  .our-numbers {
@@ -553,27 +552,27 @@
  }
 
  .card-quizzes {
-     background: linear-gradient(to bottom right, #60a5fa, #2563eb);
+     background: url('assets/images/seize/quizz.png') no-repeat center/cover;
      color: white;
  }
 
  .card-hackathons {
-     background: linear-gradient(to bottom right, #4ade80, #22c55e);
+     background: url('assets/images/seize/hackathons.png') no-repeat center/cover;
      color: white;
  }
 
  .card-scholarships {
-     background: linear-gradient(to bottom right, #a855f7, #7c3aed);
+     background: url('assets/images/seize/scholarships.png') no-repeat center/cover;
      color: white;
  }
 
  .card-conferences {
-     background: linear-gradient(to bottom right, #fed7aa, #fdba74);
+     background: url('assets/images/seize/conferences.png') no-repeat center/cover;
      color: #1f2937;
  }
 
  .card-festivals {
-     background: linear-gradient(to bottom right, #facc15, #eab308);
+     background: url('assets/images/seize/test.png') no-repeat center/cover;
      color: #1f2937;
  }
 
@@ -704,13 +703,11 @@
      position: relative;
      overflow: hidden;
      border-radius: 16px;
-     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
      transition: all 0.3s ease;
  }
 
  .image-container:hover {
      transform: translateY(-5px);
-     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
  }
 
  .slide1-box img {
@@ -917,7 +914,7 @@
  .footer {
      background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
      color: white;
-     padding: 60px 0 30px 0;
+     padding: 60px 0 0;
      font-size: 14px;
  }
 
@@ -1100,6 +1097,7 @@
      font-size: 12px;
      color: #94a3b8;
      text-align: left;
+     background: white;
  }
 
  .footer-bottom-links {
@@ -1320,7 +1318,7 @@
 
  .card-simple {
      max-width: 1200px;
-     margin: 50px auto 50px auto;
+     margin: 70px auto 70px auto;
  }
 
  .card-easy {
@@ -1342,7 +1340,7 @@
  }
 
  .card-easy-left img {
-     width: 80%;
+     width: 100%;
      border-radius: 15px;
  }
 
@@ -1448,15 +1446,11 @@
      color: white;
      border: none;
      padding: 8px 18px;
-     /* controls height and width */
      border-radius: 25px;
      font-size: 0.9em;
      width: auto;
-     /* ensures it doesn't stretch */
      max-width: 155px;
-     /* optional limit */
      display: inline-block;
-     /* prevents flex from stretching it */
      cursor: pointer;
      transition: background 0.3s;
  }
@@ -1475,12 +1469,336 @@
 
      .card-easy-right {
          padding: 80px 50px;
-         /* more top/bottom space increases height */
      }
 
      .card-easy-left img {
          width: 90%;
          max-height: 100%;
-         /* image takes more vertical space */
      }
  }
+
+ /*----------------------------------------------------------------------------------------------------------------------*/
+
+
+ /* Practice Cards Component CSS - Unique class names to prevent conflicts */
+.practice-cards-container * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.practice-cards-container {
+    background-color: #ffffff;
+    color: #1f2937;
+    padding: 40px 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.practice-container {
+    max-width: 1300px;
+    width: 100%;
+}
+
+.practice-title {
+    font-size: 32px;
+    font-weight: 700;
+    margin-bottom: 12px;
+    color: #111827;
+    text-align: left;
+}
+
+.practice-subtitle {
+    font-size: 18px;    
+    color: #6b7280;
+    max-width: 700px;
+    /* margin: 0 auto 40px; */
+    line-height: 1.5;
+    text-align: left;
+}
+
+.practice-cards-wrapper {
+    margin: 30px 0;
+    display: flex;
+    height: 380px;
+    border-radius: 12px;
+    overflow: hidden;
+    /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); */
+    position: relative;
+    gap: 1px;
+    background-color: #d1d5db;
+    padding: 1px;
+}
+
+.practice-card {
+    flex: 1;
+    display: flex;
+    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transform-origin: center;
+    background-color: white;
+    border-radius: 0;
+}
+
+.practice-card:first-child {
+    border-radius: 11px 0 0 11px;
+}
+
+.practice-card:last-child {
+    border-radius: 0 11px 11px 0;
+}
+
+.practice-card-content {
+    flex: 1;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transition: all 0.7s ease;
+    min-width: 0;
+    z-index: 2;
+    position: relative;
+}
+
+/* Color changes for active and hover states */
+.practice-card.active { background-color: #c6e0f1; }
+.practice-card:nth-child(1):hover,
+.practice-card:nth-child(1).active { background-color: #89CFF0; }
+.practice-card:nth-child(2):hover,
+.practice-card:nth-child(2).active { background-color: #FEB4CF; }
+.practice-card:nth-child(3):hover,
+.practice-card:nth-child(3).active { background-color: #DFC5FE; }
+.practice-card:nth-child(4):hover,
+.practice-card:nth-child(4).active { background-color: #FFE186; }
+
+/* SVG Container */
+.practice-card-svg {
+    width: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 1.3s cubic-bezier(0.23, 1, 0.32, 1);
+    opacity: 0;
+    padding: 20px;
+    background: transparent;
+}
+
+.practice-card-svg svg {
+    width: 100%;
+    height: 100%;
+    max-width: 180px;
+    max-height: 180px;
+    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
+}
+
+.practice-card-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    margin-bottom: 16px;
+    transition: transform 0.5s ease;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.practice-card:nth-child(1) .practice-card-icon { background-color: #1268f3; color: white; }
+.practice-card:nth-child(2) .practice-card-icon { background-color: #ef4444; color: white; }
+.practice-card:nth-child(3) .practice-card-icon { background-color: #8b5cf6; color: white; }
+.practice-card:nth-child(4) .practice-card-icon { background-color: #f59e0b; color: white; }
+
+.practice-card h3 {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 12px;
+    color: #111827;
+    transition: transform 0.5s ease;
+}
+
+.practice-card p {
+    font-size: 15px;
+    color: #6b7280;
+    line-height: 1.5;
+    margin-bottom: 16px;
+    transition: transform 0.5s ease;
+}
+
+.practice-meta-info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    font-size: 14px;
+    color: #4b5563;
+    transition: transform 0.5s ease;
+}
+
+.practice-meta-logo {
+    width: 24px;
+    height: 24px;
+    background-color: #3b82f6;
+    border-radius: 4px;
+    margin-right: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.practice-footer-text {
+    font-size: 14px;
+    font-weight: 600;
+    color: #374151;
+    margin-top: auto;
+    transition: transform 0.5s ease;
+}
+
+.practice-cta-btn {
+    margin-top: 16px;
+    background-color: #111827;
+    color: white;
+    padding: 10px 16px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    text-decoration: none;
+    width: fit-content;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+    opacity: 0;
+    transform: translateY(15px);
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.practice-cta-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: left 0.8s;
+}
+
+.practice-cta-btn:hover::before {
+    left: 100%;
+}
+
+.practice-cta-btn:hover {
+    background-color: #374151;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+}
+
+/* Active card styles */
+.practice-card.active {
+    flex: 3.5;
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
+    z-index: 10;
+}
+
+.practice-card.active .practice-card-svg {
+    width: 45%;
+    opacity: 1;
+}
+
+.practice-card.active .practice-cta-btn {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.practice-card.active .practice-card-icon {
+    transform: scale(1.1) rotate(5deg);
+}
+
+.practice-card.active h3 {
+    transform: translateY(-3px);
+}
+
+.practice-card.active p,
+.practice-card.active .practice-meta-info,
+.practice-card.active .practice-footer-text {
+    transform: translateY(-2px);
+}
+
+/* Hover effects for non-active cards */
+.practice-card:hover:not(.active) {
+    flex: 1.3;
+    transform: translateY(-4px) scale(1.01);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    z-index: 5;
+}
+
+.practice-card:hover:not(.active) .practice-card-svg {
+    width: 25%;
+    opacity: 0.8;
+}
+
+/* Subtle overlay effect */
+.practice-card::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
+    opacity: 0;
+    transition: opacity 0.6s ease;
+    pointer-events: none;
+}
+
+.practice-card.active::after,
+.practice-card:hover::after {
+    opacity: 1;
+}
+
+@media (max-width: 992px) {
+    .practice-cards-wrapper {
+        flex-direction: column;
+        height: auto;
+        border-radius: 12px;
+    }
+    
+    .practice-card {
+        flex-direction: column;
+        height: auto;
+        border-radius: 0 !important;
+    }
+    
+    .practice-card:first-child {
+        border-radius: 12px 12px 0 0 !important;
+    }
+    
+    .practice-card:last-child {
+        border-radius: 0 0 12px 12px !important;
+    }
+    
+    .practice-card.active .practice-card-svg,
+    .practice-card:hover .practice-card-svg {
+        width: 100%;
+        height: 200px;
+    }
+    
+    .practice-card.active {
+        transform: translateY(-5px) scale(1.01);
+    }
+    
+    .practice-card:hover:not(.active) {
+        transform: translateY(-3px) scale(1.005);
+    }
+}

main.js

@@ -1,7 +1,12 @@
-function goToLogin() {
+function goToApplay() {
-    window.location.href = "/my/";
+    window.location.href = "/applay/";
 }
 
+function getInTouch() {
+    window.open("https://wa.me/1234567890?text=Hi%20Link%20kodepilote%20Team...", "_blank");
+}
+
+
 (function () {
     if (window.Slide1rSliderLoaded) {
         return;
@@ -194,19 +199,18 @@ document.addEventListener("DOMContentLoaded", () => {
     const track = document.querySelector(".move-slider-track");
     const boxes = Array.from(track.children);
 
-    // Clone all slides once
     boxes.forEach(box => {
         const clone = box.cloneNode(true);
         track.appendChild(clone);
     });
 
     let position = 0;
-    const speed = 1; // pixels per frame, adjust for faster/slower scroll
+    const speed = 1;
 
     function animate() {
         position -= speed;
         if (Math.abs(position) >= track.scrollWidth / 2) {
-            position = 0; // reset after first set slides out
+            position = 0;
         }
         track.style.transform = `translateX(${position}px)`;
         requestAnimationFrame(animate);
@@ -224,9 +228,247 @@ const observer = new IntersectionObserver((entries) => {
             const index = Array.from(statItems).indexOf(entry.target);
             entry.target.style.transitionDelay = `${(index + 1) * 0.1}s`;
             entry.target.classList.add('visible');
-            // observer.unobserve(entry.target); // optional: animate only once
         }
     });
-}, { threshold: 0.2 }); // 20% visible
+}, { threshold: 0.2 });
+
+console.log("test");
+document.addEventListener('DOMContentLoaded', async () => {
+    // const allCourses = [];
+
+    // const baseUrl = 'https://kodepilot.in/course/index.php';
+    // const res = await fetch(baseUrl);
+    // const html = await res.text();
+
+    // const categoryRegex = /<h3 class="categoryname aabtn"><a href="([^"]+)">([^<]+)<\/a><\/h3>/g;
+    // const categories = [];
+    // let match;
+    // while ((match = categoryRegex.exec(html)) !== null) {
+    //     categories.push({ url: match[1], name: match[2] });
+    // }
+
+    // for (const category of categories) {
+    //     const resCat = await fetch(category.url);
+    //     const catHtml = await resCat.text();
+    //     const cleanHtml = catHtml.replace(/\n/g, ' ');
+
+    //     const courseRegex = /<div class="card dashboard-card [^"]*"[^>]*>.*?<a href="([^"]+)"[^>]*>.*?background-image: url\(([^)]+)\);".*?<span class="sr-only">(.*?)<\/span>.*?<div class="course-category">\s*([^<]+)<\/div>.*?<div class="course-summary">.*?<p>(.*?)<\/p>/g;
+
+    //     while ((match = courseRegex.exec(cleanHtml)) !== null) {
+    //         allCourses.push({
+    //             category: match[4].trim(),
+    //             link: match[1].trim(),
+    //             image: match[2].trim(),
+    //             name: match[3].trim(),
+    //             description: match[5].replace(/<br\s*\/?>/g, ' ').trim()
+    //         });
+    //     }
+    // }
+    const allCourses = [
+        {
+            category: "Software Development & Engineering",
+            link: "https://kodepilot.in/course/view.php?id=16",
+            image: "https://kodepilot.in/pluginfile.php/53/course/overviewfiles/UiUx.png",
+            name: "UI/UX Design",
+            description: "Learn the fundamentals of user interface and user experience design."
+        },
+        {
+            category: "Software Development & Engineering",
+            link: "https://kodepilot.in/course/view.php?id=9",
+            image: "https://kodepilot.in/pluginfile.php/39/course/overviewfiles/IOS.png",
+            name: "iOS Development",
+            description: "Build iOS apps using Swift and Apple’s development tools."
+        },
+        {
+            category: "Software Development & Engineering",
+            link: "https://kodepilot.in/course/view.php?id=7",
+            image: "https://kodepilot.in/pluginfile.php/35/course/overviewfiles/RD.png",
+            name: "React Development",
+            description: "Master React.js for building fast and scalable web apps."
+        },
+        {
+            category: "Software Development & Engineering",
+            link: "https://kodepilot.in/course/view.php?id=5",
+            image: "https://kodepilot.in/pluginfile.php/31/course/overviewfiles/PFS.png",
+            name: "Full Stack Development",
+            description: "End-to-end training in frontend, backend, and databases."
+        },
+        {
+            category: "Software Development & Engineering",
+            link: "https://kodepilot.in/course/view.php?id=3",
+            image: "https://kodepilot.in/pluginfile.php/25/course/overviewfiles/JFS.png",
+            name: "Java Full Stack",
+            description: "Become a full stack developer with Java, Spring, and modern tools."
+        },
+        {
+            category: "Quality & Testing",
+            link: "https://kodepilot.in/course/view.php?id=13",
+            image: "https://kodepilot.in/pluginfile.php/46/course/overviewfiles/PT.png",
+            name: "Performance Testing",
+            description: "Learn tools and techniques for testing system performance."
+        },
+        {
+            category: "Quality & Testing",
+            link: "https://kodepilot.in/course/view.php?id=10",
+            image: "https://kodepilot.in/pluginfile.php/41/course/overviewfiles/QA.png",
+            name: "QA Testing",
+            description: "Understand quality assurance practices for reliable software."
+        },
+        {
+            category: "Cloud & DevOps",
+            link: "https://kodepilot.in/course/view.php?id=17",
+            image: "https://kodepilot.in/pluginfile.php/55/course/overviewfiles/GC.png",
+            name: "Google Cloud",
+            description: "Get hands-on with Google Cloud Platform services and tools."
+        },
+        {
+            category: "Cloud & DevOps",
+            link: "https://kodepilot.in/course/view.php?id=4",
+            image: "https://kodepilot.in/pluginfile.php/28/course/overviewfiles/AWSA.png",
+            name: "AWS Associate",
+            description: "Prepare for AWS certifications and cloud computing skills."
+        },
+        {
+            category: "AI, Data & Emerging Tech (On-demand & trending)",
+            link: "https://kodepilot.in/course/view.php?id=26",
+            image: "https://kodepilot.in/pluginfile.php/73/course/overviewfiles/DE.png",
+            name: "Data Engineering",
+            description: "Build pipelines and manage data at scale for analytics."
+        },
+        {
+            category: "AI, Data & Emerging Tech (On-demand & trending)",
+            link: "https://kodepilot.in/course/view.php?id=18",
+            image: "https://kodepilot.in/pluginfile.php/58/course/overviewfiles/PE.png",
+            name: "Prompt Engineering",
+            description: "Learn to design prompts for AI models like ChatGPT."
+        },
+        {
+            category: "AI, Data & Emerging Tech (On-demand & trending)",
+            link: "https://kodepilot.in/course/view.php?id=12",
+            image: "https://kodepilot.in/pluginfile.php/44/course/overviewfiles/AI%28Ess%29.png",
+            name: "AI Essentials",
+            description: "Introduction to AI, ML concepts, and real-world use cases."
+        },
+        {
+            category: "Enterprise & Business Tech",
+            link: "https://kodepilot.in/course/view.php?id=24",
+            image: "https://kodepilot.in/pluginfile.php/70/course/overviewfiles/ServiceNow.png",
+            name: "ServiceNow",
+            description: "Learn ITSM and workflow automation with ServiceNow."
+        },
+        {
+            category: "Enterprise & Business Tech",
+            link: "https://kodepilot.in/course/view.php?id=19",
+            image: "https://kodepilot.in/pluginfile.php/61/course/overviewfiles/SAP.png",
+            name: "SAP",
+            description: "Master SAP ERP modules for enterprise solutions."
+        },
+        {
+            category: "Cybersecurity & Compliance",
+            link: "https://kodepilot.in/course/view.php?id=23",
+            image: "https://kodepilot.in/pluginfile.php/69/course/overviewfiles/Security.png",
+            name: "Security Fundamentals",
+            description: "Understand core concepts of IT security and defense."
+        },
+        {
+            category: "Cybersecurity & Compliance",
+            link: "https://kodepilot.in/course/view.php?id=22",
+            image: "https://kodepilot.in/pluginfile.php/68/course/overviewfiles/CyE.png",
+            name: "Cyber Essentials",
+            description: "Learn the basics of cybersecurity and compliance standards."
+        }
+    ];
+
+    console.table(allCourses);
+
+
+    renderCourses(allCourses);
+});
+
+function renderCourses(allCourses) {
+    const container = document.querySelector('.corces');
+    if (!container) {
+        console.error("⚠️ No .corces container found in DOM");
+        return;
+    }
+
+    container.innerHTML = '';
+
+    // Group courses by category
+    const grouped = {};
+    allCourses.forEach(course => {
+        if (!grouped[course.category]) grouped[course.category] = [];
+        grouped[course.category].push(course);
+    });
+
+    // Render each category section
+    Object.keys(grouped).forEach(category => {
+        const section = document.createElement('div');
+        section.className = 'course-section';
+
+        section.innerHTML = `
+            <h2 class="course-category-title">${category}</h2>
+            <div class="course-slider">
+                <button class="prev-btn">◀</button>
+                <div class="course-track"></div>
+                <button class="next-btn">▶</button>
+            </div>
+        `;
+
+        const track = section.querySelector('.course-track');
+
+        grouped[category].forEach(course => {
+            const courseDiv = document.createElement('div');
+            courseDiv.className = 'course-card';
+            courseDiv.innerHTML = `
+                <a href="${course.link}" target="_blank">
+                  <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>
+                  <div class="course-description">${course.description}</div>
+                </div>
+            `;
+            track.appendChild(courseDiv);
+        });
+
+        const prevBtn = section.querySelector('.prev-btn');
+        const nextBtn = section.querySelector('.next-btn');
+
+        let scrollAmount = 0;
+        prevBtn.addEventListener('click', () => {
+            track.scrollBy({ left: -300, behavior: 'smooth' });
+        });
+        nextBtn.addEventListener('click', () => {
+            track.scrollBy({ left: 300, behavior: 'smooth' });
+        });
+
+        container.appendChild(section);
+    });
+}
 
 statItems.forEach(item => observer.observe(item));
+
+
+const track = document.querySelector('.mnc-logos-track');
+const gap = 40;
+let index = 0;
+
+function stepScroll() {
+    const items = track.children;
+    const first = items[0];
+    const moveWidth = first.offsetWidth + gap;
+
+    track.style.transform = `translateX(-${moveWidth}px)`;
+
+    track.addEventListener('transitionend', function handler() {
+        track.appendChild(first);
+        track.style.transition = 'none';
+        track.style.transform = 'translateX(0)';
+        void track.offsetWidth; // force reflow
+        track.style.transition = 'transform 0.5s ease';
+        track.removeEventListener('transitionend', handler);
+    });
+}
+
+setInterval(stepScroll, 3000);