From d4e2ed7c53c0d77423109eff8e7d6abbd637f17f Mon Sep 17 00:00:00 2001
From: yashpandav <pandavyash076@gmail.com>
Date: Sat, 18 Jan 2025 16:01:35 +0530
Subject: [PATCH] Improved Home Page UI

---
 index.html | 823 +++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 581 insertions(+), 242 deletions(-)

diff --git a/index.html b/index.html
index 8d3a06b..95c3e6f 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,9 @@
       src="https://kit.fontawesome.com/a076d05399.js"
       crossorigin="anonymous"
     ></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/SplitText.min.js"></script>
     <link rel="stylesheet" href="styles.css" />
     <link rel="stylesheet" href="navbar.css" />
     <style>
@@ -39,68 +42,110 @@
       }
 
       .slideshow-container {
-      position: relative;
-      max-width: 100%;
-      margin: auto;
-      overflow: hidden;
-    }
-
-    .mySlides {
-      display: none;
-    }
-
-    .banner-image {
-      width: 100%;
-      height: auto;
-    }
-
-    .prev, .next {
-      cursor: pointer;
-      position: absolute;
-      top: 50%;
-      width: auto;
-      padding: 16px;
-      margin-top: -22px;
-      color: white;
-      font-weight: bold;
-      font-size: 18px;
-      transition: 0.6s ease;
-      border-radius: 50%;
-      background: rgba(0, 0, 0, 0.5);
-      user-select: none;
-    }
-
-    .prev {
-      left: 10px;
-    }
-
-    .next {
-      right: 10px;
-    }
-
-    .prev:hover, .next:hover {
-      background: rgba(0, 0, 0, 0.8);
-    }
-
-    .dot-container {
-      text-align: center;
-      margin-top: 10px;
-    }
-
-    .dot {
-      cursor: pointer;
-      height: 15px;
-      width: 15px;
-      margin: 0 5px;
-      background-color: #bbb;
-      border-radius: 50%;
-      display: inline-block;
-      transition: background-color 0.6s ease;
-    }
-
-    .dot.active {
-      background-color: #717171;
-    }
+        position: relative;
+        max-width: 100%;
+        margin: 20px auto;
+        overflow: hidden;
+        border-radius: 12px;
+        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+      }
+
+      .slides-wrapper {
+        position: relative;
+        width: 100%;
+        height: 400px; /* Default height for desktop */
+      }
+
+      .mySlides {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        transition: opacity 0.8s ease-in-out;
+      }
+
+      .mySlides.active {
+        opacity: 1;
+      }
+
+      .banner-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .slide-caption {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: linear-gradient(transparent, rgba(0,0,0,0.7));
+        color: white;
+        padding: 20px;
+        font-size: 24px;
+        text-align: center;
+        transform: translateY(100%);
+        transition: transform 0.5s ease-out;
+      }
+
+      .mySlides.active .slide-caption {
+        transform: translateY(0);
+      }
+
+      .prev, .next {
+        cursor: pointer;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 45px;
+        height: 45px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255,255,255,0.2);
+        color: white;
+        font-size: 20px;
+        border-radius: 50%;
+        transition: all 0.3s ease;
+        backdrop-filter: blur(4px);
+      }
+
+      .prev { left: 20px; }
+      .next { right: 20px; }
+
+      .prev:hover, .next:hover {
+        background: rgba(255,255,255,0.4);
+        transform: translateY(-50%) scale(1.1);
+      }
+
+      .fade {
+        animation: fade 0.8s ease-in-out;
+      }
+
+      @keyframes fade {
+        from { opacity: 0.4 }
+        to { opacity: 1 }
+      }
+
+      .dot-container {
+        text-align: center;
+        margin-top: 10px;
+      }
+
+      .dot {
+        cursor: pointer;
+        height: 15px;
+        width: 15px;
+        margin: 0 5px;
+        background-color: #bbb;
+        border-radius: 50%;
+        display: inline-block;
+        transition: background-color 0.6s ease;
+      }
+
+      .dot.active {
+        background-color: #717171;
+      }
 
       .text {
         color: #fff;
@@ -116,45 +161,201 @@
       .options-section {
         text-align: center;
         padding: 40px 20px;
+        background-color: transparent;
       }
 
-      .options-section h2 {
-        color: #4a4a4a;
+      .section-title {
         font-size: 28px;
         margin-bottom: 10px;
+        color: var(--heading-color);
+        position: relative;
+        display: inline-block;
+        opacity: 0;
+        transform: translateY(20px);
+      }
+
+      .highlight-text {
+        background: linear-gradient(120deg, #ffd465, #ffa500);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        position: relative;
+        display: inline-block;
+      }
+
+      .highlight-text::after {
+        content: '';
+        position: absolute;
+        bottom: -5px;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background: linear-gradient(120deg, #ffd465, #ffa500);
+        transform: scaleX(0);
+        transform-origin: right;
+        transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
+      }
+
+      .section-title:hover .highlight-text::after {
+        transform: scaleX(1);
+        transform-origin: left;
       }
 
-      .options-section p {
-        color: var(--options-p);
+      .section-description {
         font-size: 18px;
         margin-bottom: 20px;
+        color: var(--para-color);
+        line-height: 1.6;
+        max-width: 600px;
+        margin: 0 auto 40px;
+        opacity: 0;
+        transform: translateY(20px);
       }
 
       .options-container {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 2rem;
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 2rem;
+      }
+
+      .option-card {
+        aspect-ratio: 1;
+        perspective: 1000px;
+      }
+
+      .card-inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        transform-style: preserve-3d;
+        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .card-front, .card-back {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        backface-visibility: hidden;
+        border-radius: 15px;
         display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 20px;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 1.5rem;
+      }
+      .card-front {
+        background: linear-gradient(145deg, #ffffff, #f0f0f0);
+        box-shadow: 
+          0 10px 20px rgba(0, 0, 0, 0.1),
+          0 6px 6px rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+      }
+      
+
+      .card-back {
+        background: linear-gradient(145deg, #ffd465, #ffa500);
+        transform: rotateY(180deg);
+        box-shadow: 
+          0 10px 20px rgba(0, 0, 0, 0.15),
+          0 6px 6px rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        color: white;
       }
 
-      .option {
-        text-align: center;
-        background-color: var(--card-bg);
-        border-radius: 8px;
-        padding: 20px;
-        width: 150px;
+      .card-image {
+        width: 100px;
+        height: 100px;
+        object-fit: cover;
+        border-radius: 50%;
+        margin-bottom: 1rem;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        background-color: white;
+        padding: 0.5rem;
         transition: transform 0.3s ease;
       }
 
-      .option img {
-        width: 60px;
-        height: 60px;
-        margin-bottom: 10px;
+      .card-title {
+        font-size: 1.25rem;
+        margin: 0.5rem 0;
+        color: var(--text-primary, #333);
+        font-weight: 600;
+        text-align: center;
+      }
+
+      .card-back p {
+        font-size: 1rem;
+        margin-bottom: 1.5rem;
+        text-align: center;
+        line-height: 1.4;
+      }
+
+      .card-button {
+        padding: 0.75rem 1.5rem;
+        font-size: 1rem;
+        border-radius: 25px;
+        background-color: white;
+        color: #ffa500;
+        border: none;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        transition: all 0.3s ease;
+        text-decoration: none;
+        font-weight: 500;
+      }
+
+      .card-button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+        background-color: #f8f8f8;
+      }
+
+      .option-card:hover .card-inner {
+        transform: rotateY(180deg);
+      }
+
+      /* Dark mode support */
+      @media (prefers-color-scheme: dark) {
+        .card-front {
+          background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
+          box-shadow: 
+            0 10px 20px rgba(0,0,0,0.3),
+            0 6px 6px rgba(0, 0, 0,0.2);
+        }
+        
+        .card-title {
+          color: var(--text-primary, #fff);
+        }
       }
 
-      .option p {
-        font-size: 16px;
+      /* Responsive adjustments */
+      @media (max-width: 768px) {
+        .options-container {
+          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+          gap: 1.5rem;
+          padding: 1.5rem;
+        }
+        
+        .card-image {
+          width: 80px;
+          height: 80px;
+        }
+        
+        .card-title {
+          font-size: 1.1rem;
+        }
+        
+        .card-back p {
+          font-size: 0.9rem;
+        }
+        
+        .card-button {
+          padding: 0.6rem 1.2rem;
+          font-size: 0.9rem;
+        }
       }
+
       .options-container:hover {
         color: #ffd465;
       }
@@ -585,10 +786,6 @@
       transition: all 0.3s ease; /* Smooth transition ke liye */
      }
 
-      .social-icons div a {
-        transition: all 0.3s ease;
-      }
-
       .social-icons div a:hover {
         scale: 1.3;
         rotate: 15deg;
@@ -654,9 +851,126 @@
           width: 100%;
         }
       }
-    </style>
+
+      /* Optional: Add a floating animation to the highlight text */
+      @keyframes float {
+        0% {
+          transform: translateY(0px);
+        }
+        50% {
+          transform: translateY(-5px);
+        }
+        100% {
+          transform: translateY(0px);
+        }
+      }
+      
+      .highlight-text {
+        animation: float 3s ease-in-out infinite;
+      }
+      
+      /* Optional: Add a subtle gradient animation to the highlight text */
+      @keyframes gradientFlow {
+        0% {
+          background-position: 0% 50%;
+        }
+        50% {
+          background-position: 100% 50%;
+        }
+        100% {
+          background-position: 0% 50%;
+        }
+      }
+      
+      .highlight-text {
+        background: linear-gradient(270deg, #ffd465, #ffa500, #ff8c00);
+        background-size: 200% auto;
+        animation: gradientFlow 3s ease infinite;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+      
+      /* Responsive adjustments */
+      @media (max-width: 768px) {
+        .section-title {
+          font-size: 24px;
+        }
+        
+        .section-description {
+          font-size: 16px;
+          padding: 0 20px;
+        }
+      }
+
+      /* Add these CSS rules to ensure no horizontal overflow */
+      html, body {
+        max-width: 100%;
+        overflow-x: hidden;
+      }
+      
+      .section {
+        width: 100vw;
+        max-width: 100vw;
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      
+      .options-container {
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+        padding: 20px;
+        box-sizing: border-box;
+      }
+
+      /* Add responsive adjustments for mobile */
+      @media screen and (max-width: 768px) {
+        .slides-wrapper {
+          height: 250px; /* Reduced height for tablets */
+        }
+        
+        .slide-caption {
+          font-size: 18px; /* Smaller font size for captions */
+          padding: 15px;
+        }
+
+        .prev, .next {
+          width: 35px; /* Smaller navigation buttons */
+          height: 35px;
+          font-size: 16px;
+        }
+      }
+
+      @media screen and (max-width: 480px) {
+        .slides-wrapper {
+          height: 200px; /* Further reduced height for mobile phones */
+        }
+        
+        .slide-caption {
+          font-size: 16px;
+          padding: 10px;
+        }
+
+        .prev, .next {
+          width: 30px;
+          height: 30px;
+          font-size: 14px;
+        }
+
+        .prev { left: 10px; }
+        .next { right: 10px; }
+
+        .dot {
+          height: 12px;
+          width: 12px;
+          margin: 0 4px;
+        }
+      }
+      </style>
   </head>
-  <body>
+  <body style="margin: 0; padding: 0; overflow-x: hidden;">
     <div id="cursor"></div>
     <!-- Navigation -->
     <nav class="navbar">
@@ -790,31 +1104,39 @@ <h2>Ajivika</h2>
       }
     </script>
 
-    <section class="section home-section">
+    <section class="section home-section" style="width: 100vw; padding: 0px; margin:0px; overflow-x: hidden;">
       <!-- Banner -->
-      <h1 style="color: var(--heading-color)">Welcome to Ajivika</h1>
-      <p style="color: var(--para-color);">Your one-stop destination for career growth and learning.</p>
-      <div class="slideshow-container">
-        <!-- Slide 1 -->
-        <div class="mySlides">
-          <img src="./upskill-banner.jpg" alt="Upskill" class="banner-image" />
-        </div>
-    
-        <!-- Slide 2 -->
-        <div class="mySlides">
-          <img src="./apply-jobs-banner.jpg" alt="Apply for the best jobs" class="banner-image" />
-        </div>
-    
-        <!-- Slide 3 -->
-        <div class="mySlides">
-          <img src="./resume-banner.jpg" alt="Get your resume made" class="banner-image" />
+      <h1 style="color: var(--heading-color); padding: 0 20px; font-size: 2.5rem; margin-bottom: 0.5rem;"> 
+      Welcome to <span style="background: linear-gradient(120deg, #ffd465, #ffa500); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Ajivika</span>
+    </h1>
+    <p style="color: var(--para-color); padding: 0 20px; font-size: 1.2rem; line-height: 1.6; max-width: 800px; margin: 0 auto 1.5rem;">
+      Your one-stop destination for career growth and learning.</p>
+      <div class="slideshow-container" style="width: 100%; max-width: 100%; margin: 20px 0; border-radius: 0;">
+        <div class="slides-wrapper">
+          <!-- Slide 1 -->
+          <div class="mySlides fade">
+            <img src="./upskill-banner.jpg" alt="Upskill" class="banner-image" />
+            <div class="slide-caption">Upskill Your Career</div>
+          </div>
+
+          <!-- Slide 2 -->
+          <div class="mySlides fade">
+            <img src="./apply-jobs-banner.jpg" alt="Apply for the best jobs" class="banner-image" />
+            <div class="slide-caption">Find Your Dream Job</div>
+          </div>
+
+          <!-- Slide 3 -->
+          <div class="mySlides fade">
+            <img src="./resume-banner.jpg" alt="Get your resume made" class="banner-image" />
+            <div class="slide-caption">Create Professional Resumes</div>
+          </div>
         </div>
-    
+
         <!-- Navigation buttons -->
         <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
         <a class="next" onclick="plusSlides(1)">&#10095;</a>
       </div>
-    
+
       <!-- Dots -->
       <div class="dot-container">
         <span class="dot" onclick="currentSlide(1)"></span>
@@ -822,122 +1144,85 @@ <h1 style="color: var(--heading-color)">Welcome to Ajivika</h1>
         <span class="dot" onclick="currentSlide(3)"></span>
       </div>
 
-      <section class="section options-section">
-        <h2 style="color: var(--para-color)">
+      <section class="section options-section" style="width: 100%; padding: 40px 0; margin: 0;">
+        <h2 class="section-title">
           What are
-          <span class="orange">you looking for?</span>
+          <span class="highlight-text">you looking for?</span>
         </h2>
-        <p>
+        <p class="section-description">
           Prepare for the next step in your career with the following options.
         </p>
-        <div class="options-container" style="display: flex; gap: 20px">
-          <div
-            class="option"
-            style="
-              text-align: center;
-              padding: 20px;
-              border: 1px solid #ccc;
-              transition: background-color 0.3s ease;
-              cursor: pointer;
-            "
-            onmouseover="this.style.backgroundColor='#FFD465'"
-            onmouseout="this.style.backgroundColor='var(--card-bg)'"
-          >
-            <a href="./resume.html" style="text-decoration: none; color: var(--card-text)">
-              <img
-                src="./resume2.jpg"
-                alt="Resume"
-                style="width: 100px; height: 100px"
-              />
-              <p>Resume</p>
-            </a>
+        <div class="options-container">
+          <!-- Resume Card -->
+          <div class="option-card">
+            <div class="card-inner">
+              <div class="card-front">
+                <img src="./resume2.jpg" alt="Resume" class="card-image" />
+                <h3 class="card-title">Resume</h3>
+              </div>
+              <div class="card-back">
+                <p>Create professional resumes that stand out</p>
+                <a href="./resume.html" class="card-button">Get Started</a>
+              </div>
+            </div>
           </div>
-          <div
-            class="option"
-            style="
-              text-align: center;
-              padding: 20px;
-              border: 1px solid #ccc;
-              transition: background-color 0.3s ease;
-              cursor: pointer;
-            "
-            onmouseover="this.style.backgroundColor='#FFD465'"
-            onmouseout="this.style.backgroundColor='var(--card-bg)'"
-          >
-            <a href="./index2.html" style="text-decoration: none; color: var(--card-text)">
-              <img
-                src="./job.webp"
-                alt="Apply for Jobs"
-                style="width: 100px; height: 100px"
-              />
-              <p>Apply for Jobs</p>
-            </a>
+
+          <!-- Jobs Card -->
+          <div class="option-card">
+            <div class="card-inner">
+              <div class="card-front">
+                <img src="./job.webp" alt="Apply for Jobs" class="card-image" />
+                <h3 class="card-title">Apply for Jobs</h3>
+              </div>
+              <div class="card-back">
+                <p>Find and apply to your dream job</p>
+                <a href="./index2.html" class="card-button">Search Jobs</a>
+              </div>
+            </div>
           </div>
-          <div
-            class="option"
-            style="
-              text-align: center;
-              padding: 20px;
-              border: 1px solid #ccc;
-              transition: background-color 0.3s ease;
-              cursor: pointer;
-            "
-            onmouseover="this.style.backgroundColor='#FFD465'"
-            onmouseout="this.style.backgroundColor='var(--card-bg)'"
-          >
-            <a
-              href="https://vwfds2rwkfwfree87eappta.streamlit.app/"
-              style="text-decoration: none; color: var(--card-bg)"
-            >
-              <img
-                src="./courses.png"
-                alt="Courses"
-                style="width: 100px; height: 100px"
-              />
-              <p>Courses</p>
-            </a>
+
+          <!-- Courses Card -->
+          <div class="option-card">
+            <div class="card-inner">
+              <div class="card-front">
+                <img src="./courses.png" alt="Courses" class="card-image" />
+                <h3 class="card-title">Courses</h3>
+              </div>
+              <div class="card-back">
+                <p>Enhance your skills with our courses</p>
+                <a href="https://vwfds2rwkfwfree87eappta.streamlit.app/" class="card-button">Start Learning</a>
+              </div>
+            </div>
           </div>
-          <div
-            class="option"
-            style="
-              text-align: center;
-              padding: 20px;
-              border: 1px solid #ccc;
-              transition: background-color 0.3s ease;
-              cursor: pointer;
-            "
-            onmouseover="this.style.backgroundColor='#FFD465'"
-            onmouseout="this.style.backgroundColor='var(--card-bg)'"
-          >
-            <a
-              href="https://public.tableau.com/app/profile/ojas.arora/viz/JobTrendAnalysis_17349777011460/HighestPayingJobs2"
-              style="text-decoration: none; color: var(--card-text)"
-            >
-              <img
-                src="./dashboard.jpg"
-                alt="Dashboard"
-                style="width: 100px; height: 100px"
-              />
-              <p>Dashboard</p>
-            </a>
+
+          <!-- Dashboard Card -->
+          <div class="option-card">
+            <div class="card-inner">
+              <div class="card-front">
+                <img src="./dashboard.jpg" alt="Dashboard" class="card-image" />
+                <h3 class="card-title">Dashboard</h3>
+              </div>
+              <div class="card-back">
+                <p>Analyze job market trends and insights</p>
+                <a href="https://public.tableau.com/app/profile/ojas.arora/viz/JobTrendAnalysis_17349777011460/HighestPayingJobs2" class="card-button">View Analytics</a>
+              </div>
+            </div>
           </div>
         </div>
       </section>
     </section>
 
     <!-- Footer -->
-    <footer style="background-color: #222; color: #fff; padding: 20px 10px">
-      <div
-        class="footer-container"
-        style="
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: space-between;
-          gap: 20px;
-          max-width: 1200px;
-          margin: auto;
-        "
-      >
+    <footer style="background-color: #222; color: #fff; padding: 20px 0; width: 100vw; overflow-x: hidden;">
+      <div class="footer-container" style="
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: 20px;
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+        padding: 0 20px;">
         <!-- About Section -->
         <div class="footer-section" style="flex: 1; min-width: 200px">
           <h3>
@@ -1161,46 +1446,100 @@ <h3>
     </button>
 
     <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
+      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
       integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     ></script>
     <script src="index.js"></script>
-
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        // Check if GSAP is loaded
+        if (typeof gsap !== 'undefined') {
+          // GSAP animations
+          gsap.to(".section-title", {
+            opacity: 1,
+            y: 0,
+            duration: 1,
+            ease: "power3.out"
+          });
+      
+          gsap.to(".section-description", {
+            opacity: 1,
+            y: 0,
+            duration: 1,
+            delay: 0.3,
+            ease: "power3.out"
+          });
+      
+          // SplitText animation (only if plugin is available)
+          if (typeof SplitText !== 'undefined') {
+            try {
+              const title = new SplitText(".section-title", { type: "chars, words" });
+              const chars = title.chars;
+      
+              gsap.from(chars, {
+                opacity: 0,
+                y: 20,
+                rotateX: -90,
+                stagger: 0.02,
+                duration: 1,
+                ease: "back.out(1.7)",
+              });
+            } catch (e) {
+              console.log("SplitText animation skipped");
+            }
+          }
+        } else {
+          // Fallback animation using CSS if GSAP is not available
+          document.querySelector('.section-title').style.opacity = '1';
+          document.querySelector('.section-description').style.opacity = '1';
+        }
+      
+        // Intersection Observer
+        if ('IntersectionObserver' in window) {
+          const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+              if (entry.isIntersecting) {
+                entry.target.style.transform = 'translateY(0)';
+                entry.target.style.opacity = '1';
+              }
+            });
+          }, {
+            threshold: 0.1
+          });
+      
+          document.querySelectorAll('.section-title, .section-description').forEach((el) => {
+            observer.observe(el);
+          });
+        }
+      });
+      </script>
     <script>
       let slideIndex = 1;
-    showSlides(slideIndex);
-
-    // Next/previous controls
-    function plusSlides(n) {
-      showSlides(slideIndex += n);
-    }
-
-    // Thumbnail image controls
-    function currentSlide(n) {
-      showSlides(slideIndex = n);
-    }
-
-    function showSlides(n) {
-      const slides = document.getElementsByClassName("mySlides");
-      const dots = document.getElementsByClassName("dot");
-      if (n > slides.length) { slideIndex = 1 }
-      if (n < 1) { slideIndex = slides.length }
-      for (let i = 0; i < slides.length; i++) {
-        slides[i].style.display = "none";
-      }
-      for (let i = 0; i < dots.length; i++) {
-        dots[i].className = dots[i].className.replace(" active", "");
-      }
-      slides[slideIndex - 1].style.display = "block";
-      dots[slideIndex - 1].className += " active";
-    }
-
-    // Auto-play functionality
-    setInterval(() => {
-      plusSlides(1);
-    }, 3000); // Change image every 3 seconds
+      showSlides(slideIndex);
+
+      function plusSlides(n) {
+        showSlides(slideIndex += n);
+      }
+
+      function showSlides(n) {
+        const slides = document.getElementsByClassName("mySlides");
+        
+        if (n > slides.length) { slideIndex = 1 }
+        if (n < 1) { slideIndex = slides.length }
+        
+        for (let i = 0; i < slides.length; i++) {
+          slides[i].classList.remove("active");
+        }
+        
+        slides[slideIndex-1].classList.add("active");
+      }
+
+      // Auto-play with smoother transitions
+      setInterval(() => {
+        plusSlides(1);
+      }, 5000);
     </script>
 
       <script>