update about page

css/style.css

@@ -1055,7 +1055,7 @@ span.textaccor {
   font-size: 24px;
   line-height: 30px;
   font-weight: 600;
-  color: #dcdcdc;
+  color: white;
   font-family: var(--font-primary);
   margin-top: 18px;
 }
@@ -1153,6 +1153,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 {
@@ -1599,6 +1793,14 @@ span.textaccor {
   .links a {
     font-size: 12px;
   }
+
+
+  /* mobile about-page */
+
+
+  /*  */
+
+
   .blog-tittle-banner {
     font-size: 40px;
   }

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,20 @@
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+
+  <!-- Swiper CSS -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
+  
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
+
+  <!-- Custom CSS -->
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body> 
 <section class="hero_banner">
   <div class="banner_overlay">
     <div class="hero_content">
@@ -69,6 +86,43 @@
 <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>
 
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+
+    <!-- Swiper JS -->
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+
+<script src="/js/script.js"></script>
+</body>
+