diff --git a/assests/images/1983-Icon.png b/assests/images/1983-Icon.png deleted file mode 100644 index f5c795a..0000000 Binary files a/assests/images/1983-Icon.png and /dev/null differ diff --git a/assests/images/1983-Icon.svg b/assests/images/1983-Icon.svg new file mode 100644 index 0000000..30b1b71 --- /dev/null +++ b/assests/images/1983-Icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assests/images/1991-Icon.png b/assests/images/1991-Icon.png deleted file mode 100644 index 29ad184..0000000 Binary files a/assests/images/1991-Icon.png and /dev/null differ diff --git a/assests/images/1991-Icon.svg b/assests/images/1991-Icon.svg new file mode 100644 index 0000000..85749c7 --- /dev/null +++ b/assests/images/1991-Icon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assests/images/2007-Icon.png b/assests/images/2007-Icon.png deleted file mode 100644 index 7c294ef..0000000 Binary files a/assests/images/2007-Icon.png and /dev/null differ diff --git a/assests/images/2007-Icon.svg b/assests/images/2007-Icon.svg new file mode 100644 index 0000000..fdb5974 --- /dev/null +++ b/assests/images/2007-Icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assests/images/2008-Icon.png b/assests/images/2008-Icon.png deleted file mode 100644 index 3b92b98..0000000 Binary files a/assests/images/2008-Icon.png and /dev/null differ diff --git a/assests/images/2008-Icon.svg b/assests/images/2008-Icon.svg new file mode 100644 index 0000000..ed298c8 --- /dev/null +++ b/assests/images/2008-Icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assests/images/2013-Icon.png b/assests/images/2013-Icon.png deleted file mode 100644 index 35209cc..0000000 Binary files a/assests/images/2013-Icon.png and /dev/null differ diff --git a/assests/images/2013-Icon.svg b/assests/images/2013-Icon.svg new file mode 100644 index 0000000..0714756 --- /dev/null +++ b/assests/images/2013-Icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assests/images/2015-Icon.png b/assests/images/2015-Icon.png deleted file mode 100644 index ea7f898..0000000 Binary files a/assests/images/2015-Icon.png and /dev/null differ diff --git a/assests/images/2015-Icon.svg b/assests/images/2015-Icon.svg new file mode 100644 index 0000000..f89a2b9 --- /dev/null +++ b/assests/images/2015-Icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assests/images/2016-Icon.png b/assests/images/2016-Icon.png deleted file mode 100644 index 7a0fe1b..0000000 Binary files a/assests/images/2016-Icon.png and /dev/null differ diff --git a/assests/images/2016-Icon.svg b/assests/images/2016-Icon.svg new file mode 100644 index 0000000..f5855a9 --- /dev/null +++ b/assests/images/2016-Icon.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/assests/images/2016-Mobile-Icon.svg b/assests/images/2016-Mobile-Icon.svg new file mode 100644 index 0000000..b4588b1 --- /dev/null +++ b/assests/images/2016-Mobile-Icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assests/images/2022-Icon.png b/assests/images/2022-Icon.png deleted file mode 100644 index 1122d70..0000000 Binary files a/assests/images/2022-Icon.png and /dev/null differ diff --git a/assests/images/2022-Icon.svg b/assests/images/2022-Icon.svg new file mode 100644 index 0000000..2c9f416 --- /dev/null +++ b/assests/images/2022-Icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assests/images/about-banner-img.png b/assests/images/about-banner-img.png deleted file mode 100644 index 8190fae..0000000 Binary files a/assests/images/about-banner-img.png and /dev/null differ diff --git a/assests/images/about-banner-img.svg b/assests/images/about-banner-img.svg new file mode 100644 index 0000000..4ee6948 --- /dev/null +++ b/assests/images/about-banner-img.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assests/images/mobile-about-banner.png b/assests/images/mobile-about-banner.png deleted file mode 100644 index 8190fae..0000000 Binary files a/assests/images/mobile-about-banner.png and /dev/null differ diff --git a/assests/images/mobile-about-banner.svg b/assests/images/mobile-about-banner.svg new file mode 100644 index 0000000..9368f99 --- /dev/null +++ b/assests/images/mobile-about-banner.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/css/style.css b/css/style.css index f854d4d..7cf2a4a 100644 --- a/css/style.css +++ b/css/style.css @@ -8,10 +8,8 @@ /* for headings or special text */ } -a - - { - text-decoration: none; +a { + text-decoration: none; } .navbar { @@ -212,7 +210,6 @@ a.color-a { color: #fff; } - /* Footer */ /* Floating WhatsApp Icon */ @@ -225,7 +222,7 @@ a.color-a { border-radius: 50%; text-align: center; font-size: 28px; - box-shadow: 0 4px 8px rgba(0,0,0,0.2); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); width: 55px; height: 55px; display: flex; @@ -370,11 +367,11 @@ a.color-a { .ask-advantage2 { padding: 0px 0px 60px 0px; } - .ask-advantage2 { - padding: 0px 0px 60px 0px; - } - .ask-advantage-scroll { - padding: 60px 0 0 0; +.ask-advantage2 { + padding: 0px 0px 60px 0px; +} +.ask-advantage-scroll { + padding: 60px 0 0 0; } .ask-advantage h2 { @@ -997,9 +994,8 @@ span.textaccor { /* our-fund */ .ask-advantage3 { - padding: 60px 0; - background-image: url("../assests/images/Our-Funds-back.svg"); - + padding: 60px 0; + background-image: url("../assests/images/Our-Funds-back.svg"); } .coming-soon-container { @@ -1057,20 +1053,19 @@ span.textaccor { /* about hero*/ .hero_banner { - background: url("../assests/images/about-banner-img.png") no-repeat; + background: url("../assests/images/about-banner-img.svg") no-repeat; background-position: center; background-size: cover; - height: 420px; + height: 70vh; position: relative; } .banner_overlay { - width: 100%; + width: 95%; height: 100%; display: flex; align-items: center; justify-content: center; - padding: 0 7rem; } .hero_content { @@ -1079,17 +1074,17 @@ span.textaccor { .hero_content .heading { font-size: 50px; - font-weight: 500; + font-weight: 400; color: white; font-family: var(--font-secondary); - margin: 0; line-height: 1.2; + margin: 0; } .hero_content .sub-heading { font-size: 24px; line-height: 30px; - font-weight: 600; + font-weight: 400; color: white; font-family: var(--font-primary); margin-top: 18px; @@ -1097,15 +1092,12 @@ span.textaccor { /* about history text */ .about-stats-section { - height: 600px; + min-height: 600px; background-color: #fff; - color: #0a1f2b; - line-height: 1.7; } .about-stats-section .container { padding-top: 60px; - padding-left: 10px; } .about-text { @@ -1134,7 +1126,16 @@ span.textaccor { position: relative; } -.about-stat-border::before { +.about-stat-box { + border-right: 1px solid #b18c4a; + /* width: 236px; */ + box-sizing: border-box; +} + +.last-box { + border-right: none; +} +/* .about-stat-border::before { content: ""; position: absolute; left: 0; @@ -1143,7 +1144,7 @@ span.textaccor { width: 1px; height: 112px; background-color: #b18c4a; -} +} */ .about-stat-box h3 { font-size: 40px; @@ -1173,19 +1174,18 @@ span.textaccor { /* about history animation */ -.history_animation{ - background: #131313; - height: 718px; +.history_animation { + background: #131313; + height: 650px; } .history_animation .container { padding-top: 60px; - padding-left: 10px; } -.history_animation .container .title{ - text-align: left; - color: white; - font-family: var(--font-secondary); +.history_animation .container .title { + text-align: left; + color: white; + font-family: var(--font-secondary); } /* =========================== @@ -1224,13 +1224,12 @@ span.textaccor { left: 50%; transform: translateX(-50%); font-size: 16px; - color: #3E3F3F; + color: #3e3f3f; font-weight: 400; white-space: nowrap; font-family: var(--font-primary); } - /* =========================== Kite Style =========================== */ @@ -1295,7 +1294,7 @@ span.textaccor { z-index: 0; transform-origin: left; width: 0; - transition: left 0.45s linear, width 0.45s linear; /* animate both */ + transition: left 0.45s linear, width 0.45s linear; } /* =========================== @@ -1315,7 +1314,7 @@ span.textaccor { .swiper-wrapper { display: flex; align-items: center; - gap: 1px; /* added subtle gap between slides */ + gap: 1px; } .swiper-slide { @@ -1325,32 +1324,32 @@ span.textaccor { align-items: center; text-align: center; background: #131313; - gap: 2px; /* reduced gap between slide elements */ + gap: 2px; } .swiper-slide img { - width: 82px; - height: 82px; - object-fit: contain; + min-width: 82px; + min-height: 82px; + object-fit: cover; display: block; - margin: 0 auto 2px; /* small bottom margin to reduce space */ + margin: 0 auto 2px; } .swiper-slide h2 { font-size: 40px; color: #b18c4a; - margin: 0 0 10px 0; /* small margin below heading */ + margin: 0 0 10px 0; } .swiper-slide .heading { color: #b18c4a; text-align: center; - line-height: 1.3; /* tighter line height */ - margin: 0 0 2px 0; /* small margin below heading */ + line-height: 1.3; + margin: 0 0 2px 0; } .swiper-slide .sub-heading-container { - width: 420px; + width: 723px; display: flex; flex-direction: column; margin: 0 auto; @@ -1358,11 +1357,10 @@ span.textaccor { .swiper-slide .sub-heading-container p { color: #fff; - margin: 0; /* remove default margin */ - line-height: 1.4; /* tighter line height */ + margin: 0; + line-height: 1.4; } - /* =========================== Swiper Navigation =========================== */ @@ -1370,7 +1368,12 @@ span.textaccor { .swiper-button-next { top: 50%; transform: translateY(-50%); - color: #fff; + color: #b18c4a; +} + +.swiper-button-prev::after, +.swiper-button-next::after { + font-size: 25px; } .swiper-button-prev { @@ -1381,7 +1384,6 @@ span.textaccor { right: 10px; } - /* blog */ .blog-banner { @@ -1882,12 +1884,164 @@ span.textaccor { font-size: 12px; } - /* mobile about-page */ + .hero_banner { + background: url("../assests/images/mobile-about-banner.svg") no-repeat; + background-position: center; + background-size: cover; + height: 70vh; + } + .banner_overlay { + padding: 0 25px; + } - /* */ + .hero_content .heading:nth-child(3) { + display: none; + } + .hero_content .heading { + font-size: 40px; + } + + .hero_content .sub-heading { + font-size: 16px; + } + + .about-stats-section .container { + padding-left: 25px; + padding-right: 25px; + padding-top: 60px; + } + + .about-text { + font-size: 16px; + } + + .about-sub-text { + font-size: 16px; + } + + .about-stats-row { + flex-direction: column; + justify-content: center; + align-items: center; + } + + .about-stat-box { + border-bottom: 1px solid #033a49; + border-right: none; + width: 200px; + box-sizing: border-box; + /* margin-bottom: 20px; */ + margin: 0 auto 20px auto; + } + + .last-box { + border-bottom: none; + } + + .about-stat-box h3 { + font-size: 32px; + line-height: 42px; + text-align: center; + } + + .about-stat-box p { + font-size: 16px; + text-align: center; + margin-bottom: 30px; + } + + .month-date-container { + display: flex; + justify-content: center; + align-items: center; + padding-bottom: 12vh; + } + + .about-as-of-date { + font-weight: 400; + } + + .history_animation { + width: 100%; + overflow-x: scroll; + overflow-y: hidden; + height: 600px; + } + + .history_animation .container { + padding: 60px 0 0 25px; + } + + .history_animation .container .title { + font-size: 32px; + } + + /* .timeline { + min-width: 1200px; + overflow: visible; + position: relative; + } */ + + .timeline::before { + content: ""; + position: absolute; + top: 50%; + left: 10px; + right: 10px; + height: 1px; + background: #b18b4a65; + transform: translateY(-50%); + z-index: 0; + } + + .timeline li::before { + content: attr(data-year); + position: absolute; + left: 8%; + transform: translateX(-50%); + font-size: 18px; + color: #3e3f3f; + font-weight: 600; + white-space: nowrap; + font-family: var(--font-primary); + } + + .swiper { + padding: 0; + margin-top: -40px; + } + + .swiper-slide h2 { + font-size: 35px; + } + + .swiper-slide img { + min-width: 82px; + min-height: 66px; + object-fit: cover; + display: block; + margin: 0 auto 2px; + } + + .swiper-slide .sub-heading-container { + width: 285px; + } + + .swiper-slide .heading, + .swiper-slide .sub-heading-container p { + font-size: 14px; + } + + .swiper-button-prev { + left: 5px; + } + + .swiper-button-next { + right: 5px; + } .blog-tittle-banner { font-size: 40px; @@ -1913,7 +2067,6 @@ span.textaccor { .navbar { background-color: #033a4900; padding: 0 0; - } .navbar-collapse.show { z-index: 999; @@ -1925,7 +2078,7 @@ span.textaccor { width: 100%; background: #fff; border-bottom: 1px solid #033a49; -} + } .container, .container-md, @@ -2064,16 +2217,7 @@ span.textaccor { .container.blog-aling { padding: 0 20px; } - .ask-advantage-scroll { + .ask-advantage-scroll { padding: 60px 25px 0 25px !important; + } } -} - - - - - - - - - diff --git a/js/main.js b/js/main.js index 8e8e4f1..f0102c4 100644 --- a/js/main.js +++ b/js/main.js @@ -1,17 +1,18 @@ // =============================== // ✅ Load Header & Footer // =============================== -['header', 'footer'].forEach(id => { - const file = id === 'header' ? 'components/header.html' : 'components/footer.html'; +["header", "footer"].forEach((id) => { + const file = + id === "header" ? "components/header.html" : "components/footer.html"; fetch(file) - .then(res => res.text()) - .then(html => { + .then((res) => res.text()) + .then((html) => { const mount = document.getElementById(id); if (!mount) return; mount.innerHTML = html; - if (id === 'header') { - const script = document.createElement('script'); - script.src = 'js/navbar.js'; + if (id === "header") { + const script = document.createElement("script"); + script.src = "js/navbar.js"; script.defer = true; document.body.appendChild(script); } @@ -35,88 +36,140 @@ const routes = { // =============================== const timelineData = { 1983: { - icon: "../assests/images/1983-Icon.png", + icon: "../assests/images/1983-Icon.svg", heading: "The beginning", - sub: "Set up by Mr. Asit Koticha and Mr. Sameer Koticha, ASK Group offers research-based Investment advisory." + sub1: "Set up by Mr. Asit Koticha and Mr. Sameer Koticha,", + sub2: "ASK Group offers research-based Investment advisory", + sub3: "", }, 1991: { - icon: "../assests/images/1991-Icon.png", + icon: "../assests/images/1991-Icon.svg", heading: "ASK Raymond James", - sub: "ASK Group and Raymond James Financial enter into a Partnership." + sub1: "ASK Group and Raymond James", + sub2: "Financial enter into a Partnership", + sub3: "", }, 2007: { - icon: "../assests/images/2007-Icon.png", + icon: "../assests/images/2007-Icon.svg", heading: "Launch of ASK Wealth Advisors", - sub: "Raymond James Financial partnership exits." + sub1: "Raymond James Financial partnership exits.", + sub2: "", + sub3: "", }, 2008: { - icon: "../assests/images/2008-Icon.png", + icon: "../assests/images/2008-Icon.svg", heading: "Launch of ASK multi-family office", - sub: "" + sub1: "", + sub2: "", + sub3: "", }, 2013: { - icon: "../assests/images/2013-Icon.png", + icon: "../assests/images/2013-Icon.svg", heading: "License from SEBI", - sub: "ASK Wealth Advisors receives an Investment Advisor License from SEBI." + sub1: "ASK Wealth Advisors receives an", + sub2: "Investment Advisor License from SEBI.", + sub3: "", }, 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." + icon: "../assests/images/2015-Icon.svg", + heading: "ASK Wealth Advisors adjudged", + sub1: ` "the best Independent Wealth Advisor, 2015" `, + sub2: "by Wealth Briefing, Asia.", + sub3: "", }, 2016: { - icon: "../assests/images/2016-Icon.png", + icon: "../assests/images/2016-Icon.svg", + mobileIcon: "../assests/images/2016-Mobile-Icon.svg", heading: "", - sub: "Advent International acquires minority stake in ASK Group." + sub1: "Advert International acquires minority ", + sub2: "stake in ASK Group.", + sub3: "", }, 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." + icon: "../assests/images/2015-Icon.svg", + heading: "ASK Wealth Advisors adjudged", + sub1: `"One to Watch - Wealth Manager - India Domestic" - Distinction, 2017"`, + sub2: "by Asian Private Banker.", + sub3: "", }, 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." + icon: "../assests/images/2015-Icon.svg", + heading: + "ASK launches its first offshore fund - ASK Global Strategies Fund", + sub1: "TWICE IN A ROW:", + sub2: " ASK Wealth advisors adjudged", + sub3: `"Best Performing Financial Advisor"-Wealth 2016-17 by UTI MF & CNBC TV18.`, }, 2019: { - icon: "../assests/images/1983-Icon.png", + icon: "../assests/images/1983-Icon.svg", 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." + sub1: `ASK Wealth Advisors inducted into the "Hall of Fame"`, + sub2: "at the Financial Advisor Awards for the Years ", + sub3: "2018-19 and 2019-20 by UTI MF & CNBC TV18.", }, 2020: { - icon: "../assests/images/2015-Icon.png", + icon: "../assests/images/2015-Icon.svg", heading: "Outstanding Private Bank", - sub: "Outstanding Private Bank for UNHW clients at the Private Banker International Global Wealth Summit & Awards 2020, Singapore." + sub1: "Outstanding Private Bank for UNHW clients ", + sub2: "at the Private Banker International Global", + sub3: "Wealth Summit & Awards 2020, Singapore.", }, 2022: { - icon: "../assests/images/2022-icon.png", + icon: "../assests/images/2022-Icon.svg", heading: "Blackstone Acquisition", - sub: "Blackstone acquires majority stake in ASK Group. Advent International exits." - } + sub1: "Blackstone acquires majority stake in ", + sub2: "ASK Group, Advert International exits.", + sub3: "", + }, }; // =============================== // ✅ Initialize Timeline & Swiper // =============================== function initTimelineSwiper() { - const swiperWrapper = document.querySelector(".swiper-wrapper"); + const swiperWrapper = document.querySelector(".swiper-wrapper"); const timelineItems = document.querySelectorAll(".timeline-item"); if (!swiperWrapper || !timelineItems.length) return; - // Generate Swiper slides + // ✅ Check if screen width is 768px or below + const isMobile = window.matchMedia("(max-width: 768px)").matches; + swiperWrapper.innerHTML = ""; - timelineItems.forEach((item) => { - const year = item.dataset.year; - const content = timelineData[year] || { icon: "", heading: "", sub: "" }; + Object.keys(timelineData).forEach((year) => { + const content = timelineData[year]; const slide = document.createElement("div"); slide.classList.add("swiper-slide"); + + // ✅ Use mobile icon if on mobile, else desktop + const iconToUse = isMobile && content.mobileIcon ? content.mobileIcon : content.icon; + + const headingColor = ["2015", "2017", "2018"].includes(year) + ? "#ffffff" + : "#b18c4a"; + const sub1Color = ["2015", "2017", "2018"].includes(year) + ? "#b18c4a" + : "#ffffff"; + const customTopPad = ["2018"].includes(year) ? "1rem" : ""; + slide.innerHTML = ` - ${content.icon ? `icon` : ""} + ${iconToUse ? `icon` : ""}

${year}

- ${content.heading ? `

${content.heading}

` : ""} - ${content.sub ? `

${content.sub}

` : ""} + ${ + content.heading + ? `

${content.heading}

` + : "" + } +
+ ${ + content.sub1 + ? `

${content.sub1}

` + : "" + } + ${content.sub2 ? `

${content.sub2}

` : ""} + ${content.sub3 ? `

${content.sub3}

` : ""} +
`; + swiperWrapper.appendChild(slide); }); @@ -128,7 +181,8 @@ function initTimelineSwiper() { timelineItems.forEach((item, i) => { item.classList.toggle("active", i === index); }); - const timelineWidth = document.querySelector(".timeline").offsetWidth - 10; + const timelineWidth = + document.querySelector(".timeline")?.offsetWidth - 20; const newWidth = (timelineWidth / (totalKites - 1)) * index; if (lineFill) lineFill.style.width = newWidth + "px"; } @@ -139,13 +193,13 @@ function initTimelineSwiper() { centeredSlides: true, effect: "fade", autoplay: { - delay: 2500, + delay: 3000, disableOnInteraction: false, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", - } + }, }); swiper.on("slideChange", () => { @@ -181,152 +235,13 @@ window.openDrawer = function (name, role, img, desc) { document.getElementById("drawerImg").src = img; document.getElementById("drawerDesc").innerHTML = desc; - const drawer = bootstrap.Offcanvas.getOrCreateInstance(document.getElementById('teamDrawer')); + const drawer = bootstrap.Offcanvas.getOrCreateInstance( + document.getElementById("teamDrawer") + ); drawer.show(); }; -// =============================== -// ✅ 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 = []; @@ -335,7 +250,7 @@ let animating = false; let isInsideSection = false; function initGsapStackScroll() { - const section = document.querySelector('.cards-wrapper'); + const section = document.querySelector(".cards-wrapper"); if (!section) return; cards = Array.from(section.querySelectorAll('.card-scroll')); @@ -349,7 +264,7 @@ function initGsapStackScroll() { section.addEventListener('mouseenter', () => (isInsideSection = true)); section.addEventListener('mouseleave', () => (isInsideSection = false)); - window.removeEventListener('wheel', window._gsapStackHandler); + window.removeEventListener("wheel", window._gsapStackHandler); window._gsapStackHandler = function (e) { if (!isInsideSection) return; e.preventDefault(); @@ -483,8 +398,8 @@ function loadPage() { const page = routes[hash] || routes["#/"]; fetch(page) - .then(res => res.text()) - .then(html => { + .then((res) => res.text()) + .then((html) => { document.getElementById("page-content").innerHTML = html; window.scrollTo({ top: 0, behavior: "smooth" }); @@ -494,7 +409,8 @@ function loadPage() { initGsapStackScroll(); }) .catch(() => { - document.getElementById("page-content").innerHTML = "

Page not found

"; + document.getElementById("page-content").innerHTML = + "

Page not found

"; }); } diff --git a/pages/about.html b/pages/about.html index f0b5d8e..fabd721 100644 --- a/pages/about.html +++ b/pages/about.html @@ -54,13 +54,13 @@
-
+

29 Years

Equity Experience

-
+
As of July 2025