Merge branch 'vivek' of http://git.wdipl.com/Mohd.Ansari/ask-mutual-fund into tufail-dev

css/style.css

@@ -1085,7 +1085,7 @@ span.textaccor {
   font-size: 24px;
   line-height: 30px;
   font-weight: 600;
-  color: #dcdcdc;
+  color: white;
   font-family: var(--font-primary);
   margin-top: 18px;
 }
@@ -1183,6 +1183,200 @@ span.textaccor {
     font-family: var(--font-secondary);
 }
 
+/* ===========================
+   Timeline
+=========================== */
+.timeline {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 10px;
+  margin: 80px auto;
+  list-style: none;
+  position: relative;
+}
+
+.timeline::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  right: 10px;
+  height: 1px;
+  background: #b18b4a65;
+  transform: translateY(-50%);
+  z-index: 0;
+}
+
+.timeline-item {
+  position: relative;
+  z-index: 1;
+}
+
+.timeline li::before {
+  content: attr(data-year);
+  position: absolute;
+  top: -40px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+  color: #3E3F3F;
+  font-weight: 400;
+  white-space: nowrap;
+  font-family: var(--font-primary);
+}
+
+
+/* ===========================
+   Kite Style
+=========================== */
+.timeline-item .kite {
+  display: block;
+  width: 6px;
+  height: 6px;
+  background: #000;
+  border: 1px solid gray;
+  transform: rotate(45deg);
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
+}
+
+/* Active kite (fade-in) */
+.timeline-item.active .kite {
+  background: #b18c4a;
+  opacity: 1;
+  animation: fadeIn 0.4s ease forwards;
+}
+
+.timeline li.active::before {
+  color: #b18c4a;
+}
+
+/* Inactive kite (fade-out) */
+.timeline-item:not(.active) .kite {
+  animation: fadeOut 0.4s ease forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    background: #000;
+  }
+  to {
+    opacity: 1;
+    background: #b18c4a;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    background: #b18c4a;
+  }
+  to {
+    opacity: 1;
+    background: #000;
+  }
+}
+
+/* ===========================
+   Line Fill
+=========================== */
+.line-fill {
+  position: absolute;
+  top: 50%;
+  left: 60px;
+  height: 2px;
+  background: #b18c4a;
+  z-index: 0;
+  transform-origin: left;
+  width: 0;
+  transition: width 0.5s linear;
+}
+
+/* ===========================
+   Swiper Container
+=========================== */
+.swiper {
+  width: 100%;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 0 60px;
+  box-sizing: border-box;
+}
+
+.swiper-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 1px; /* added subtle gap between slides */
+}
+
+.swiper-slide {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: #131313;
+  gap: 2px; /* reduced gap between slide elements */
+}
+
+.swiper-slide img {
+  width: 82px;
+  height: 82px;
+  object-fit: contain;
+  display: block;
+  margin: 0 auto 2px; /* small bottom margin to reduce space */
+}
+
+.swiper-slide h2 {
+  font-size: 40px;
+  color: #b18c4a;
+  margin: 0 0 10px 0; /* small margin below heading */
+}
+
+.swiper-slide .heading {
+  color: #b18c4a;
+  text-align: center;
+  line-height: 1.3; /* tighter line height */
+  margin: 0 0 2px 0; /* small margin below heading */
+}
+
+.swiper-slide .sub-heading-container {
+  width: 420px;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+}
+
+.swiper-slide .sub-heading-container p {
+  color: #fff;
+  margin: 0; /* remove default margin */
+  line-height: 1.4; /* tighter line height */
+}
+
+
+/* ===========================
+   Swiper Navigation
+=========================== */
+.swiper-button-prev,
+.swiper-button-next {
+  top: 50%;
+  transform: translateY(-50%);
+  color: #fff;
+}
+
+.swiper-button-prev {
+  left: 10px;
+}
+
+.swiper-button-next {
+  right: 10px;
+}
+
+
 /* blog */
 
 .blog-banner {
@@ -1629,6 +1823,14 @@ span.textaccor {
   .links a {
     font-size: 12px;
   }
+
+
+  /* mobile about-page */
+
+
+  /*  */
+
+
   .blog-tittle-banner {
     font-size: 40px;
   }

js/main.js

@@ -1,4 +1,6 @@
-// ✅ Load header and footer, then initialize navbar script after header injected
+// ===============================
+// ✅ Load Header & Footer
+// ===============================
 ['header', 'footer'].forEach(id => {
   const file = id === 'header' ? 'components/header.html' : 'components/footer.html';
   fetch(file)
@@ -16,7 +18,9 @@
     });
 });
 
-// ✅ Pages mapping
+// ===============================
+// ✅ Routes for SPA Navigation
+// ===============================
 const routes = {
   "#/": "pages/home.html",
   "#/our-fund": "pages/our-fund.html",
@@ -26,7 +30,134 @@ const routes = {
   "#/blog": "pages/blog.html",
 };
 
-// ✅ Initialize Swiper if present
+// ===============================
+// ✅ Timeline Data
+// ===============================
+const timelineData = {
+  1983: {
+    icon: "../assests/images/1983-Icon.png",
+    heading: "The beginning",
+    sub: "Set up by Mr. Asit Koticha and Mr. Sameer Koticha, ASK Group offers research-based Investment advisory."
+  },
+  1991: {
+    icon: "../assests/images/1991-Icon.png",
+    heading: "ASK Raymond James",
+    sub: "ASK Group and Raymond James Financial enter into a Partnership."
+  },
+  2007: {
+    icon: "../assests/images/2007-Icon.png",
+    heading: "Launch of ASK Wealth Advisors",
+    sub: "Raymond James Financial partnership exits."
+  },
+  2008: {
+    icon: "../assests/images/2008-Icon.png",
+    heading: "Launch of ASK multi-family office",
+    sub: ""
+  },
+  2013: {
+    icon: "../assests/images/2013-Icon.png",
+    heading: "License from SEBI",
+    sub: "ASK Wealth Advisors receives an Investment Advisor License from SEBI."
+  },
+  2015: {
+    icon: "../assests/images/2015-Icon.png",
+    heading: "Best Independent Wealth Advisor",
+    sub: "ASK Wealth Advisors adjudged 'the best Independent Wealth Advisor, 2015' by Wealth Briefing, Asia."
+  },
+  2016: {
+    icon: "../assests/images/2016-Icon.png",
+    heading: "",
+    sub: "Advent International acquires minority stake in ASK Group."
+  },
+  2017: {
+    icon: "../assests/images/2015-Icon.png",
+    heading: "",
+    sub: "ASK Wealth Advisors adjudged 'One to Watch - Wealth Manager - India Domestic' - Distinction, 2017 by Asian Private Banker."
+  },
+  2018: {
+    icon: "../assests/images/2015-Icon.png",
+    heading: "ASK launches its first offshore fund - ASK Global Strategies Fund",
+    sub: "TWICE IN A ROW: ASK Wealth advisors adjudged 'Best Performing Financial Advisor' - Wealth 2016-17 by UTI MF & CNBC TV18."
+  },
+  2019: {
+    icon: "../assests/images/1983-Icon.png",
+    heading: "Hall of Fame",
+    sub: "ASK Wealth Advisors inducted into the 'Hall of Fame' at the Financial Advisor Awards for 2018-19 and 2019-20 by UTI MF & CNBC TV18."
+  },
+  2020: {
+    icon: "../assests/images/2015-Icon.png",
+    heading: "Outstanding Private Bank",
+    sub: "Outstanding Private Bank for UNHW clients at the Private Banker International Global Wealth Summit & Awards 2020, Singapore."
+  },
+  2022: {
+    icon: "../assests/images/2022-icon.png",
+    heading: "Blackstone Acquisition",
+    sub: "Blackstone acquires majority stake in ASK Group. Advent International exits."
+  }
+};
+
+// ===============================
+// ✅ Initialize Timeline & Swiper
+// ===============================
+function initTimelineSwiper() {
+  const swiperWrapper = document.querySelector(".swiper-wrapper");
+  const timelineItems = document.querySelectorAll(".timeline-item");
+  if (!swiperWrapper || !timelineItems.length) return;
+
+  // Generate Swiper slides
+  swiperWrapper.innerHTML = "";
+  timelineItems.forEach((item) => {
+    const year = item.dataset.year;
+    const content = timelineData[year] || { icon: "", heading: "", sub: "" };
+    const slide = document.createElement("div");
+    slide.classList.add("swiper-slide");
+    slide.innerHTML = `
+      ${content.icon ? `<img src="${content.icon}" alt="icon" />` : ""}
+      <h2>${year}</h2>
+      ${content.heading ? `<p class="heading">${content.heading}</p>` : ""}
+      ${content.sub ? `<div class="sub-heading-container"><p>${content.sub}</p></div>` : ""}
+    `;
+    swiperWrapper.appendChild(slide);
+  });
+
+  // Line fill logic
+  const lineFill = document.querySelector(".line-fill");
+  const totalKites = timelineItems.length;
+
+  function updateTimeline(index) {
+    timelineItems.forEach((item, i) => {
+      item.classList.toggle("active", i === index);
+    });
+    const timelineWidth = document.querySelector(".timeline").offsetWidth - 40;
+    const newWidth = (timelineWidth / (totalKites - 1)) * index;
+    if (lineFill) lineFill.style.width = newWidth + "px";
+  }
+
+  // Initialize Swiper
+  const swiper = new Swiper(".mySwiper", {
+    spaceBetween: 20,
+    centeredSlides: true,
+    effect: "fade",
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+    },
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    }
+  });
+
+  swiper.on("slideChange", () => {
+    updateTimeline(swiper.realIndex);
+  });
+
+  updateTimeline(0);
+}
+
+// ===============================
+// ✅ Generic Swiper Init (Other Pages)
+// ===============================
 function initSwiper() {
   if (document.querySelector(".mySwiper")) {
     new Swiper(".mySwiper", {
@@ -41,7 +172,9 @@ function initSwiper() {
   }
 }
 
+// ===============================
 // ✅ Team Drawer
+// ===============================
 window.openDrawer = function (name, role, img, desc) {
   document.getElementById("drawerName").textContent = name;
   document.getElementById("drawerRole").textContent = role;
@@ -52,9 +185,9 @@ window.openDrawer = function (name, role, img, desc) {
   drawer.show();
 };
 
-// ==============================
-// 🪄 GSAP STACK SCROLL ANIMATION
-// ==============================
+// ===============================
+// ✅ GSAP Stack Scroll Animation
+// ===============================
 let cards = [];
 let currentIndex = 0;
 let animating = false;
@@ -71,16 +204,13 @@ function initGsapStackScroll() {
   gsap.set(cards[0], { opacity: 1, y: "0%" });
   currentIndex = 0;
 
-  // 🎯 Mouse enter/leave detect karein
   section.addEventListener('mouseenter', () => { isInsideSection = true; });
   section.addEventListener('mouseleave', () => { isInsideSection = false; });
 
-  // 🌐 Global scroll listener
   window.removeEventListener('wheel', window._gsapStackHandler);
   window._gsapStackHandler = function (e) {
-    if (!isInsideSection) return;  // 📌 agar mouse section ke bahar hai to kuch mat karo
-
-    e.preventDefault(); // ✅ sirf section ke andar scroll disable karo
+    if (!isInsideSection) return;
+    e.preventDefault();
     if (animating) return;
 
     if (e.deltaY > 0) {
@@ -124,7 +254,9 @@ function showPrevGsapCard() {
   currentIndex--;
 }
 
-// ✅ Load page content dynamically
+// ===============================
+// ✅ Load Page Content Dynamically
+// ===============================
 function loadPage() {
   const hash = location.hash || "#/";
   const page = routes[hash] || routes["#/"];
@@ -133,22 +265,20 @@ function loadPage() {
     .then(res => res.text())
     .then(html => {
       document.getElementById("page-content").innerHTML = html;
-
-      // ✅ Scroll to top after page load
       window.scrollTo({ top: 0, behavior: "smooth" });
 
-      // ✅ Re-init Swiper if present
+      // Init all components after content load
       initSwiper();
-
-      // ✅ Re-init GSAP scroll stack animation
+      initTimelineSwiper();
       initGsapStackScroll();
-
     })
     .catch(() => {
       document.getElementById("page-content").innerHTML = "<h2>Page not found</h2>";
     });
 }
 
-// ✅ Event listener for routing
+// ===============================
+// ✅ Router Event Listener
+// ===============================
 window.addEventListener("hashchange", loadPage);
-loadPage(); // default page load
+loadPage(); // Default load

js/script.js

@@ -0,0 +1,132 @@
+
+  // ===============================
+  // Timeline Data
+  // ===============================
+alert("Hello World")
+  
+  const timelineData = {
+    1983: {
+      icon: "../assests/images/1983-Icon.png",
+      heading: "The beginning",
+      sub: "The beginning — Set up by Mr. Asit Koticha and Mr. Sameer Koticha, ASK Group offers research-based Investment advisory."
+    },
+    1991: {
+      icon: "../assests/images/1991-Icon.png",
+      heading: "ASK Raymond James",
+      sub: "ASK Group and Raymond James Financial enter into a Partnership."
+    },
+    2007: {
+      icon: "../assests/images/2007-Icon.png",
+      heading: "Launch of ASK Wealth Advisors",
+      sub: "Raymond James Financial partnership exits."
+    },
+    2008: {
+      icon: "../assests/images/2008-Icon.png",
+      heading: "Launch of ASK multi-family office",
+      sub: ""
+    },
+    2013: {
+      icon: "../assests/images/2013-Icon.png",
+      heading: "License from SEBI",
+      sub: "ASK Wealth Advisors receives an Investment Advisor License from SEBI."
+    },
+    2015: {
+      icon: "../assests/images/2015-Icon.png",
+      heading: "Best Independent Wealth Advisor",
+      sub: "ASK Wealth Advisors adjudged 'the best Independent Wealth Advisor, 2015' by Wealth Briefing, Asia."
+    },
+    2016: {
+      icon: "../assests/images/2016-Icon.png",
+      heading: "",
+      sub: "Advent International acquires minority stake in ASK Group."
+    },
+    2017: {
+      icon: "../assests/images/2015-Icon.png",
+      heading: "",
+      sub: "ASK Wealth Advisors adjudged 'One to Watch - Wealth Manager - India Domestic' - Distinction, 2017 by Asian Private Banker."
+    },
+    2018: {
+      icon: "../assests/images/2015-Icon.png",
+      heading: "ASK launches its first offshore fund - ASK Global Strategies Fund",
+      sub: "TWICE IN A ROW: ASK Wealth advisors adjudged 'Best Performing Financial Advisor' - Wealth 2016-17 by UTI MF & CNBC TV18."
+    },
+    2019: {
+      icon: "../assests/images/1983-Icon.png",
+      heading: "Hall of Fame",
+      sub: "ASK Wealth Advisors inducted into the 'Hall of Fame' at the Financial Advisor Awards for the Years 2018-19 and 2019-20 by UTI MF & CNBC TV18."
+    },
+    2020: {
+      icon: "../assests/images/2015-Icon.png",
+      heading: "Outstanding Private Bank",
+      sub: "Outstanding Private Bank for UNHW clients at the Private Banker International Global Wealth Summit & Awards 2020, Singapore."
+    },
+    2022: {
+      icon: "../assests/images/2022-icon.png",
+      heading: "Blackstone Acquisition",
+      sub: "Blackstone acquires majority stake in ASK Group. Advent International exits."
+    }
+  };
+
+  // ===============================
+  // Generate Swiper Slides
+  // ===============================
+  const swiperWrapper = document.querySelector(".swiper-wrapper");
+  const timelineItems = document.querySelectorAll(".timeline-item");
+
+  timelineItems.forEach((item) => {
+    const year = item.dataset.year;
+    const content = timelineData[year] || { icon: "", heading: "", sub: "" };
+
+    const slide = document.createElement("div");
+    slide.classList.add("swiper-slide");
+
+    slide.innerHTML = `
+      ${content.icon ? `<img src="${content.icon}" alt="icon" />` : ""}
+      <h2>${year}</h2>
+      ${content.heading ? `<p class="heading">${content.heading}</p>` : ""}
+      ${content.sub ? `<div class="sub-heading-container"><p>${content.sub}</p></div>` : ""}
+    `;
+
+    swiperWrapper.appendChild(slide);
+  });
+
+  // ===============================
+  // Timeline Line Fill
+  // ===============================
+  const lineFill = document.querySelector(".line-fill");
+  const totalKites = timelineItems.length;
+
+  function updateTimeline(index) {
+    timelineItems.forEach((item, i) => {
+      item.classList.toggle("active", i === index);
+    });
+
+    const timelineWidth = document.querySelector(".timeline").offsetWidth - 40; // adjust for padding
+    const newWidth = (timelineWidth / (totalKites - 1)) * index;
+    lineFill.style.width = newWidth + "px";
+  }
+
+  // ===============================
+  // Initialize Swiper
+  // ===============================
+  const swiper = new Swiper(".mySwiper", {
+    spaceBetween: 20,
+    centeredSlides: true,
+    effect: "fade",
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false
+    },
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev"
+    }
+  });
+
+  // Update timeline on slide change
+  swiper.on("slideChange", () => {
+    updateTimeline(swiper.realIndex);   
+  });
+
+  // Initial timeline update
+  updateTimeline(0);

pages/about.html

@@ -1,3 +1,4 @@
+ 
 <section class="hero_banner">
   <div class="banner_overlay">
     <div class="hero_content">
@@ -69,6 +70,33 @@
 <section class="history_animation">
   <div class="container">
     <h1 class="title">Our History</h1>
+
+        <!-- Timeline -->
+    <ul class="timeline">
+      <li class="timeline-item" data-year="1983"><span class="kite"></span></li>
+      <li class="timeline-item" data-year="1991"><span class="kite"></span></li>
+      <li class="timeline-item" data-year="2007"><span class="kite"></span></li>
+      <li class="timeline-item" data-year="2008"><span class="kite"></span></li>
+      <li class="timeline-item" data-year="2013"><span class="kite"></span></li>
+      <li class="timeline-item" data-year="2015"><span class="kite"></span></li>
+      <li class="timeline-item" data-year="2016"><span class="kite"></span></li>
+      <li class="timeline-item" data-year="2017"><span class="kite"></span></li>
+      <li class="timeline-item" data-year="2018"><span class="kite"></span></li>
+      <li class="timeline-item" data-year="2019"><span class="kite"></span></li>
+      <li class="timeline-item" data-year="2020"><span class="kite"></span></li>
+      <li class="timeline-item" data-year="2022"><span class="kite"></span></li>
+      <div class="line-fill"></div>
+    </ul>
+
+    <!-- Swiper -->
+    <div class="swiper mySwiper">
+      <div class="swiper-wrapper" id="swiper-content">
+        <!-- Slides will be generated dynamically -->
+      </div>
+      <div class="swiper-button-next"></div>
+      <div class="swiper-button-prev"></div>
+    </div>
+    
   </div>
 </section>