feat again : migrate kodepilot source files from dhanush.s repo

Reviewed-on: #41

.gitignore

@@ -0,0 +1,132 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+package-lock.json

index.html

@@ -492,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">
@@ -674,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;
@@ -1023,18 +1023,7 @@
  .move-slider-animation-box {
      display: flex;
      gap: 20px;
-     animation: scroll 20s linear infinite;
+     will-change: transform;
- }
-
- @keyframes scroll {
-     from {
-         transform: translateX(0);
-     }
-
-     to {
-         transform: translateX(-50%);
-     }
-
  }
 
  .move-slider-box {
@@ -1046,7 +1035,7 @@
      background: #fff;
      border-radius: 12px;
      padding: 20px;
-     min-width: 350px;
+     min-width: 200px;
  }
 
  .move-slider-box .slide-content>*:not(.slide-text) {
@@ -1056,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 {
@@ -1065,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;
@@ -1104,6 +1099,7 @@
      gap: 12px;
  }
 
+
  .profile-info {
      display: flex;
      flex-direction: column;
@@ -1733,7 +1729,42 @@
  }
 
 
+ .whatsapp-icon {
+     position: fixed;
+     bottom: 20px;
+     left: 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 {
@@ -1848,7 +1879,6 @@
 
      .move-slider-animation-box {
          margin-top: 393px;
-         margin-right: 0px;
      }
 
      .move-slider-box-static {

main.js

@@ -12,6 +12,12 @@ function getInTouch(vall) {
 }
 
 
+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");
@@ -572,4 +578,36 @@ document.addEventListener("DOMContentLoaded", () => {
     }, { threshold: 0.3 });
 
     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();
+});