Worked

css/fonts.css

@@ -1,4 +1,4 @@
 @font-face {
   font-family: "Larken";
-  src: url("../assests/fonts/LarkenDEMO-Regular.otf") format("opentype");
+  src: url("../assests/fonts/Larken-Regular.otf") format("opentype");
 }

css/style.css

@@ -1386,11 +1386,43 @@ span.textaccor {
 /* blog */
 
 .blog-banner {
-  background-image: url("../assests/images/blog-banner.svg");
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
+  position: relative;
   height: 70vh;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+
+/* Background video setup */
+.blog-banner video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+}
+
+/* Optional dark overlay for readability */
+.blog-banner::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 0;
+}
+
+/* Content on top of video */
+.blog-aling {
+  position: relative;
+  z-index: 1;
+  text-align: left;
 }
 .blog-tittle-banner {
   font-family: var(--font-secondary);
@@ -1408,6 +1440,7 @@ span.textaccor {
   line-height: 100%;
   text-transform: capitalize;
   color: #b18c4a;
+  
 }
 .blog-aling {
   align-items: center;

css/testing.css

@@ -41,11 +41,14 @@ section.ask-advantage-scroll {
   flex-wrap: wrap;
   justify-content: center;
   margin-top: 60px;
+  
 }
 
+
 .card-scroll {
   background-image: url("../assests/images/desbackcard-scroll.svg");
   background-repeat: no-repeat;
+      background-size: cover;
   
  
   background-position: center center; /* centers it horizontally and vertically */
@@ -57,11 +60,12 @@ section.ask-advantage-scroll {
   display: flex;
   flex-direction: row;
   border: 1px solid #E6E7E8;
-  box-shadow: 0px 0px 14px 0px #0000000D;
+  box-shadow: 0px 5px 14px 0px #0000000D;
 
   /* reduce side padding so image aligns better */
   padding: 50px 80px 0px 80px; 
   gap: 60px;
+   transition: transform 0.3s ease;
 }
 
 .card-content {
@@ -70,6 +74,8 @@ section.ask-advantage-scroll {
 }
 .card-image {
     width: 40%;
+    display: flex;
+    align-items: end;
 }
 
 
@@ -205,7 +211,7 @@ color: #3E3F3F;
 
 .cards-wrapper {
   position: relative;
-  height: 600px;   /* ya jitna aapko chahiye ho */
+  height: 530px;   /* ya jitna aapko chahiye ho */
   overflow: hidden;
 }
 

js/main.js

@@ -188,6 +188,147 @@ window.openDrawer = function (name, role, img, desc) {
 // ===============================
 // ✅ GSAP Stack Scroll Animation
 // ===============================
+// ===============================
+// ✅ GSAP Stack Scroll Animation (Stack Effect)
+// ===============================
+// ===============================
+// ✅ GSAP Stack Scroll Animation (Video Jaisa Effect)
+// ===============================
+// let cards = [];
+// let currentIndex = 0;
+// let animating = false;
+// let isInsideSection = false;
+
+// function initGsapStackScroll() {
+//   const section = document.querySelector('.cards-wrapper');
+//   if (!section) return;
+
+//   cards = Array.from(section.querySelectorAll('.card-scroll'));
+//   if (!cards.length) return;
+
+//   // Hide all cards initially, show the first one
+//   gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
+//   gsap.set(cards[0], { opacity: 1, y: "0%", zIndex: 4 });
+//   currentIndex = 0;
+
+//   section.addEventListener('mouseenter', () => (isInsideSection = true));
+//   section.addEventListener('mouseleave', () => (isInsideSection = false));
+
+//   window.removeEventListener('wheel', window._gsapStackHandler);
+//   window._gsapStackHandler = function (e) {
+//     if (!isInsideSection) return;
+//     e.preventDefault();
+//     if (animating) return;
+
+//     if (e.deltaY > 0) {
+//       showNextGsapCard();
+//     } else {
+//       showPrevGsapCard();
+//     }
+//   };
+
+//   window.addEventListener('wheel', window._gsapStackHandler, { passive: false });
+// }
+
+// function showNextGsapCard() {
+//   if (currentIndex >= cards.length - 1) return;
+//   animating = true;
+
+//   const current = cards[currentIndex];
+//   const next = cards[currentIndex + 1];
+
+//   // Animate current card (scale down slightly and fade)
+//   gsap.to(current, {
+//     scale: 0.85,
+//     opacity: 1,
+//     y: "0%",
+//     transformOrigin: "center top",
+//     duration: 0.8,
+//     ease: "power2.inOut",
+//     onComplete: () => current.classList.add("previous")
+//   });
+
+//   // Animate next card (slide in from below and fade in)
+//   gsap.set(next, { zIndex: currentIndex + 5 });
+//   gsap.fromTo(
+//     next,
+//     { y: "100%", opacity: 0, scale: 1 },
+//     {
+//       y: "60px", // Active card slides up to top
+//       opacity: 1,
+//       scale: 1,
+//       duration: 0.8,
+//       ease: "power2.inOut",
+//       onComplete: () => {
+//         adjustPreviousCards();
+//         animating = false;
+//       },
+//     }
+//   );
+
+//   currentIndex++;
+// }
+
+// function showPrevGsapCard() {
+//   if (currentIndex <= 0) return;
+//   animating = true;
+
+//   const current = cards[currentIndex];
+//   const prev = cards[currentIndex - 1];
+
+//   // Hide current card
+//   gsap.to(current, {
+//     y: "100%",
+//     opacity: 0,
+//     duration: 0.8,
+//     ease: "power2.inOut",
+//     onComplete: () => current.classList.remove("previous")
+//   });
+
+//   // Bring back previous card
+//   gsap.to(prev, {
+//     y: "60px",
+//     opacity: 1,
+//     scale: 1,
+//     duration: 0.8,
+//     ease: "power2.inOut",
+//     onComplete: () => {
+//       adjustPreviousCards();
+//       animating = false;
+//     },
+//   });
+
+//   currentIndex--;
+// }
+
+// // 🪄 Adjust visible cards (up to 4-layer stack)
+// function adjustPreviousCards() {
+//   // Reset all cards
+//   gsap.set(cards, { clearProps: "transform" });
+
+//   // Get last 4 visible cards (behind currentIndex)
+//   const first = cards[currentIndex - 3];
+//   const second = cards[currentIndex - 2];
+//   const third = cards[currentIndex - 1];
+//   const fourth = cards[currentIndex];
+  
+
+//   if (first) gsap.set(first, { y: "0px", scale: 0.85, opacity: 1, zIndex: 1 });
+//   console.log(first);
+//   if (second) gsap.set(second, { y: "20px", scale: 0.9, opacity: 1, zIndex: 2 });
+//   console.log(second);
+//   if (third) gsap.set(third, { y: "40px", scale: 0.95, opacity: 1, zIndex: 3 });
+//   console.log(third);
+//   if (fourth) gsap.set(fourth, { y: "60px", scale: 1, opacity: 1, zIndex: 4 });
+//   console.log(fourth);
+//   // if (fifth) gsap.set(fifth, { y: "80px", scale: 1.5, opacity: 1, zIndex: 5 });
+//   // console.log(fifth);
+//   // if(!fourth) gsap.set(cards[currentIndex], { y: "0px", scale: 1, opacity: 1, zIndex: 4 });
+// }
+
+// document.addEventListener("DOMContentLoaded", initGsapStackScroll);
+
+
 let cards = [];
 let currentIndex = 0;
 let animating = false;
@@ -196,16 +337,17 @@ let isInsideSection = false;
 function initGsapStackScroll() {
   const section = document.querySelector('.cards-wrapper');
   if (!section) return;
-  
+
   cards = Array.from(section.querySelectorAll('.card-scroll'));
   if (!cards.length) return;
 
-  gsap.set(cards, { opacity: 0, y: "100%" });
-  gsap.set(cards[0], { opacity: 1, y: "0%" });
+  // Hide all cards initially, show the first one
+  gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
+  gsap.set(cards[0], { opacity: 1, y: "0px", zIndex: 4 });
   currentIndex = 0;
 
-  section.addEventListener('mouseenter', () => { isInsideSection = true; });
-  section.addEventListener('mouseleave', () => { isInsideSection = false; });
+  section.addEventListener('mouseenter', () => (isInsideSection = true));
+  section.addEventListener('mouseleave', () => (isInsideSection = false));
 
   window.removeEventListener('wheel', window._gsapStackHandler);
   window._gsapStackHandler = function (e) {
@@ -219,6 +361,7 @@ function initGsapStackScroll() {
       showPrevGsapCard();
     }
   };
+
   window.addEventListener('wheel', window._gsapStackHandler, { passive: false });
 }
 
@@ -229,10 +372,32 @@ function showNextGsapCard() {
   const current = cards[currentIndex];
   const next = cards[currentIndex + 1];
 
-  gsap.to(current, { y: "-100%", opacity: 0, duration: 0.8, ease: "power2.inOut" });
-  gsap.fromTo(next,
-    { y: "100%", opacity: 0 },
-    { y: "0%", opacity: 1, duration: 0.8, ease: "power2.inOut", onComplete: () => animating = false }
+  // Animate current card (move it to previous stack position)
+  gsap.to(current, {
+    y: "40px",
+    scale: 0.95,
+    opacity: 1,
+    duration: 0.8,
+    ease: "power2.inOut",
+    onComplete: () => current.classList.add("previous")
+  });
+
+  // Animate next card (slide in from below and become active)
+  gsap.set(next, { zIndex: 5 }); // Active card gets highest z-index
+  gsap.fromTo(
+    next,
+    { y: "100%", opacity: 0, scale: 1 },
+    {
+      y: "60px", // Active card position
+      opacity: 1,
+      scale: 1,
+      duration: 0.8,
+      ease: "power2.inOut",
+      onComplete: () => {
+        adjustPreviousCards();
+        animating = false;
+      },
+    }
   );
 
   currentIndex++;
@@ -245,15 +410,71 @@ function showPrevGsapCard() {
   const current = cards[currentIndex];
   const prev = cards[currentIndex - 1];
 
-  gsap.to(current, { y: "100%", opacity: 0, duration: 0.8, ease: "power2.inOut" });
-  gsap.fromTo(prev,
-    { y: "-100%", opacity: 0 },
-    { y: "0%", opacity: 1, duration: 0.8, ease: "power2.inOut", onComplete: () => animating = false }
-  );
+  // Hide current card (slide it down)
+  gsap.to(current, {
+    y: "100%",
+    opacity: 0,
+    duration: 0.8,
+    ease: "power2.inOut",
+    onComplete: () => current.classList.remove("previous")
+  });
+
+  // Bring back previous card as active
+  gsap.set(prev, { zIndex: 5 }); // Active card gets highest z-index
+  gsap.to(prev, {
+    y: "60px", // Active card position
+    opacity: 1,
+    scale: 1,
+    duration: 0.8,
+    ease: "power2.inOut",
+    onComplete: () => {
+      adjustPreviousCards();
+      animating = false;
+    },
+  });
 
   currentIndex--;
 }
 
+// 🪄 Adjust visible cards (up to 4-layer stack including active card)
+function adjustPreviousCards() {
+  // Reset all cards to default state
+  gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
+  
+  // Always show the current active card
+  if (cards[currentIndex]) {
+    gsap.set(cards[currentIndex], { 
+      y: "60px", 
+      scale: 1, 
+      opacity: 1, 
+      zIndex: 5 
+    });
+  }
+
+  // Show up to 3 previous cards in the stack
+  for (let i = 1; i <= 3; i++) {
+    const prevIndex = currentIndex - i;
+    if (prevIndex >= 0) {
+      const yOffset = 60 - (i * 30); // 60px, 40px, 20px, 0px
+      const scale = 1 - (i * 0.05); // 1, 0.95, 0.9, 0.85
+      const zIndex = 5 - i; // 5, 4, 3, 2
+      
+      gsap.set(cards[prevIndex], { 
+        y: `${yOffset}px`, 
+        scale: scale, 
+        opacity: 1, 
+        zIndex: zIndex 
+      });
+    }
+  }
+}
+
+document.addEventListener("DOMContentLoaded", initGsapStackScroll);
+
+
+
+
+
 // ===============================
 // ✅ Load Page Content Dynamically
 // ===============================

pages/blog.html

@@ -1,15 +1,19 @@
 <section class="blog-banner">
-  <div  class="container blog-aling" >
-    <div class="row">
-  <div class="col-md-12 ">
-    <h1 class="blog-tittle-banner">Insights to Grow Your </h1>
-    <p class="blog-text-banner">Wealth Smarter</p>
-  </div>
-</div>  
+  <video autoplay muted loop playsinline>
+    <source src="./assests/video/vecteezy_a-woman-in-a-business-suit-is-working-on-her-laptop_57327662.mp4" type="video/mp4">
+  </video>
 
+  <div class="container blog-aling">
+    <div class="row">
+      <div class="col-md-12">
+        <h1 class="blog-tittle-banner">Insights to Grow Your</h1>
+        <p class="blog-text-banner">Wealth Smarter</p>
+      </div>
+    </div>
   </div>
 </section>
 
+
 <section class="ask-advantage container">
    <div class="row">
   <div class="col-md-12">

pages/contact.html

@@ -22,7 +22,9 @@
       <div class="hide-details-conne-dest">
         <img src="./assests/images/contact-call.svg" alt="" style="margin-bottom: 15px;">
         <h4>Call us on</h4>
-        <a href="tel:+91 98765 43210"><p>+91 98765 43210</p></a>
+        <a href="tel:+91 98765 43210">
+          <p>+91 98765 43210</p>
+        </a>
         <p class="size-mobile">Mon–Fri, 10 AM – 6 PM</p>
       </div>
       <div class="hide-details-conne-mobile">
@@ -31,7 +33,9 @@
         </div>
         <div class="hide-details-conne-text">
           <h4>Call us on</h4>
-          <a href="tel:+91 98765 43210"><p>+91 98765 43210</p></a>
+          <a href="tel:+91 98765 43210">
+            <p>+91 98765 43210</p>
+          </a>
           <p class="size-mobile">Mon–Fri, 10 AM – 6 PM</p>
         </div>
       </div>
@@ -41,8 +45,9 @@
       <div class="hide-details-conne-dest">
         <img src="./assests/images/contact-mail.svg" alt="" style="margin-bottom: 15px;">
         <h4>Mail us at</h4>
-        <a href="mailto:ask@gmail.com"><p>ask@gmail.com</p>
-        <p class="size-mobile">We'll respond within 24 hours</p>
+        <a href="mailto:ask@gmail.com">
+          <p>ask@gmail.com</p>
+          <p class="size-mobile">We'll respond within 24 hours</p>
       </div>
       <div class="hide-details-conne-mobile">
         <div class="hide-details-conne-img">
@@ -50,8 +55,9 @@
         </div>
         <div class="hide-details-conne-text">
           <h4>Mail us at</h4>
-          <a href="mailto:ask@gmail.com"><p>ask@gmail.com</p>
-          <p class="size-mobile">We'll respond within 24 hours</p>
+          <a href="mailto:ask@gmail.com">
+            <p>ask@gmail.com</p>
+            <p class="size-mobile">We'll respond within 24 hours</p>
         </div>
       </div>
     </div>
@@ -60,7 +66,9 @@
       <div class="hide-details-conne-dest">
         <img src="./assests/images/contact-whatsapp.svg" alt="" style="margin-bottom: 15px;">
         <h4>WhatsApp service</h4>
-        <a href="tel:+91 98765 43210"><p>+91 98765 43210</p></a>
+        <a href="tel:+91 98765 43210">
+          <p>+91 98765 43210</p>
+        </a>
         <p class="size-mobile">Available 24/7</p>
       </div>
       <div class="hide-details-conne-mobile">
@@ -69,7 +77,9 @@
         </div>
         <div class="hide-details-conne-text">
           <h4>WhatsApp service</h4>
-          <a href="tel:+91 98765 43210"><p>+91 98765 43210</p></a>
+          <a href="tel:+91 98765 43210">
+            <p>+91 98765 43210</p>
+          </a>
           <p class="size-mobile">Available 24/7</p>
         </div>
       </div>
@@ -107,4 +117,121 @@
 
 
 
+</section>
+<section class="ask-advantage2 container " style="margin-top: 60px;">
+  <h2>New to Mutual Funds?</h2>
+  <p class="lead">Here are answers to some common questions we often get</p>
+  <div class="accordion" id="accordionExample">
+    <div class="accordion" id="accordionExample">
+
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingOne">
+          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
+            aria-expanded="true" aria-controls="collapseOne">
+            Is it safe to invest in mutual funds?
+          </button>
+        </h2>
+        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
+          data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            <span class="textaccor">
+              Mutual funds are regulated by SEBI and offer risk diversification, but returns are not guaranteed and
+              depend on market performance.
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingTwo">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+            How much money do I need to start?
+          </button>
+        </h2>
+        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
+          data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            <span class="textaccor">
+              You can begin investing in most mutual funds with as little as ₹500 via SIP or lump sum.
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingThree">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+            data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+            Can I withdraw my money anytime?
+          </button>
+        </h2>
+        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
+          data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            <span class="textaccor">
+              Yes, most open-ended mutual funds allow withdrawals anytime, though some may have exit loads or specific
+              lock-in periods.
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingFour">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+            data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+            How are mutual funds taxed?
+          </button>
+        </h2>
+        <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
+          data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            <span class="textaccor">
+              Tax is based on the type of fund and holding period, with separate rules for equity and debt funds as per
+              prevailing tax laws.
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingFive">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+            data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
+            Do mutual funds guarantee returns?
+          </button>
+        </h2>
+        <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive"
+          data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            <span class="textaccor">
+              No, mutual funds do not guarantee returns; their value fluctuates according to market movements.
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingSix">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+            data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
+            What is NAV in mutual funds?
+          </button>
+        </h2>
+        <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix"
+          data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            <span class="textaccor">
+              NAV (Net Asset Value) is the per-unit price of a mutual fund, calculated daily after accounting for fund
+              assets and liabilities.
+            </span>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
 </section>

pages/home.html

@@ -324,6 +324,8 @@
 </section>
 
 
+
+
 <section class="ask-advantage container">
   <h2>Life Moments You Can Plan For</h2>
   <p class="lead">Choose a Goal and we’ll help you invest for it, step by step</p>