From ab688231a0d1de514ac9b2d8e2e04a35a4704612 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 4 Nov 2025 18:45:38 +0530 Subject: [PATCH] made homepage feedback changes --- components/footer.html | 4 +- components/header.html | 4 +- css/style.css | 203 ++++++++++++++++++++++++++++++++++----- css/testing.css | 10 +- js/main.js | 157 ++++++++++++++++++------------- pages/home.html | 209 ++++++++++++++++++++++------------------- 6 files changed, 391 insertions(+), 196 deletions(-) diff --git a/components/footer.html b/components/footer.html index 31b7fc2..fa3e3f0 100644 --- a/components/footer.html +++ b/components/footer.html @@ -17,10 +17,10 @@ -
+
diff --git a/components/header.html b/components/header.html index a5c9891..decb522 100644 --- a/components/header.html +++ b/components/header.html @@ -42,8 +42,8 @@
  • Invest Now
    • -
  • - Login +
  • + Login
    • diff --git a/css/style.css b/css/style.css index f6badf1..a1317d4 100644 --- a/css/style.css +++ b/css/style.css @@ -46,18 +46,20 @@ a.nav-link:hover { } .nav-link:focus, -.nav-link:hover { +.nav-link:hover, +.login-btn span:hover { color: #b58b4b; } -.text-white { +.login-btn span { font-family: var(--font-primary); - font-weight: 600; + font-weight: 400; font-size: 16px; line-height: 120%; letter-spacing: 0%; text-align: center; color: #fff; + cursor: pointer; } /* Invest Now button */ @@ -181,10 +183,10 @@ span.banner-desc { justify-content: center; } -.invest-btn:hover { +/* .invest-btn:hover { background-color: #b58b4b; color: #fff; -} +} */ a.color-a { color: #fff; @@ -589,8 +591,13 @@ a.color-a { display: none; } +.date-container { + text-align: left; + padding: 0px 10px; +} + .as-of-date { - text-align: center; + width: 100%; font-family: var(--font-primary); font-weight: 400; font-style: Italic; @@ -658,12 +665,12 @@ span.banner-desc2 { height: auto; } -.tittle-blog { +.home-tittle-blog { font-family: var(--font-primary); font-weight: 600; - font-size: 28px; + font-size: 21px; line-height: 135%; - letter-spacing: 0%; + /* letter-spacing: 0%; */ color: #3e3f3f; } @@ -681,7 +688,7 @@ span.banner-desc2 { .desc-blog { font-family: var(--font-primary); font-weight: 400; - font-size: 20px; + font-size: 16px; line-height: 135%; color: #929197; margin-bottom: 25px; @@ -766,7 +773,8 @@ span.textaccor { padding-right: 0; } -.col-6:hover { +.descktop .col-6:hover, +.mobile .col-6:hover { background-color: rgba(155, 155, 155, 0.26); border-radius: 10px; } @@ -1038,13 +1046,82 @@ span.textaccor { display: none; } -.descktop-marging-new { +.wrapper { + display: flex; + flex-wrap: wrap; + gap: 39px; + margin: 0 auto; + max-width: 1200px; +} + +.outer_box { + display: flex; + justify-content: center; + align-items: center; + width: calc(25% - 15px); /* 4 cards on desktop */ + max-width: 250px; + padding: 45px 30px; + border-radius: 10px; +} + +.inner_box { + width: 100%; + display: flex; + flex-direction: column; + gap: 24px; +} + +.inner_box img { + width: 64px; + height: 64px; +} + +.inner_box .heading-container { + display: flex; + flex-direction: column; + line-height: 1.4; +} + +.inner_box .paragraph-container { + display: flex; + flex-direction: column; + gap: 0; + line-height: 1.4; + height: 40px; + margin-top: -10px; +} + +.inner_box h2 { + font-family: var(--font-primary); + font-size: 21px; + font-weight: 600; + color: #004a5d !important; + margin-bottom: 1; + padding: 0; +} + +.inner_box p { + font-family: var(--font-primary); + font-size: 16px; + font-weight: 400; + margin: 0; + color: #666; +} + +.outer_box:hover { + background-color: rgba(128, 128, 128, 0.24); + border-radius: 10px; + transform: translateY(-2px); + transition: all 0.3s ease; +} + +/* .descktop-marging-new { margin-left: 30px; - gap: 50px; + gap: 60px; } .padding-icon { width: 20%; - padding: 30px 25px; + padding: 40px 25px; transition: all 0.5s ease; border-radius: 10px; } @@ -1054,7 +1131,7 @@ span.textaccor { } .padding-icon1 { width: 20%; - padding: 30px 24px; + padding: 40px 24px; transition: all 0.5s ease; border-radius: 10px; } @@ -1064,7 +1141,7 @@ span.textaccor { } .padding-icon2 { width: 20%; - padding: 30px 35px; + padding: 40px 35px; transition: all 0.5s ease; border-radius: 10px; } @@ -1075,7 +1152,7 @@ span.textaccor { .padding-icon3 { width: 20%; - padding: 30px 35px; + padding: 40px 35px; transition: all 0.5s ease; border-radius: 10px; } @@ -1085,14 +1162,14 @@ span.textaccor { } .padding-icon4 { width: 20%; - padding: 30px 35px; + padding: 40px 35px; transition: all 0.5s ease; border-radius: 10px; } .padding-icon4:hover { background-color: #e6e7e8; border-radius: 10px; -} +} */ .gy-4 { --bs-gutter-y: 2.5rem; @@ -1599,6 +1676,8 @@ span.textaccor { font-size: 24px; } + + @media (max-width: 768px) { .navbar-expand-lg .gap-menu { flex-direction: column; @@ -1729,22 +1808,27 @@ span.textaccor { line-height: 16px; } + .date-container { + text-align: center; +} + .ask-advantage-home h2 { font-size: 24px; line-height: 36px; } .ask-advantage-home p.lead { - font-size: 14px; + font-size: 15px; line-height: 22px; } - .ask-advantage h2 { + + .ask-advantage-heading { font-size: 24px; line-height: 36px; } .ask-advantage p.lead { - font-size: 14px; + font-size: 15px; line-height: 22px; } @@ -2309,6 +2393,73 @@ span.textaccor { } } +@media (max-width:767px){ + .wrapper { + gap: 15px; + justify-content: flex-start; /* Align to left on mobile too */ + } + + .outer_box { + width: calc(50% - 8px); /* 2 cards per row */ + padding: 20px 15px; + max-width: none; + } + + .inner_box { + height: auto; + gap: 12px; + } + + .inner_box img { + width: 32px; + height: 32px; + } + + .inner_box h2 { + font-size: 12px; + line-height: 1.2; + margin-bottom: 0px; + } + + .inner_box p { + font-size: 10px; + } + + .inner_box .paragraph-container { + line-height: 1.2; + margin-top: -4px; + } +} + +@media (min-width:768px) and (max-width:1200px){ + .wrapper { + gap: 15px; + justify-content: flex-start; /* Align to left on mobile too */ + margin-left: 25px; + } + + .outer_box { + width: calc(48% - 15px); /* 2 cards per row */ + padding: 30px 30px; + max-width: none; + } + + + .inner_box h2 { + margin-bottom: 5px; + font-size: 21px; + } + + .paragraph-container p{ + font-size: 20px; + } + + .inner_box .paragraph-container { + line-height: 1.2; + margin-top: -10px; + } +} + @media (max-width: 991px) { .topbar { display: none; @@ -2476,3 +2627,11 @@ span.textaccor { padding: 60px 25px 0 25px !important; } } + +/* Small Mobile Styles - 1 card per row (max 319px) */ +@media (max-width: 319px) { + .outer_box { + width: 100%; + max-width: 300px; + } +} diff --git a/css/testing.css b/css/testing.css index 16af31d..c925aba 100644 --- a/css/testing.css +++ b/css/testing.css @@ -8,10 +8,6 @@ /* for headings or special text */ } -section.ask-advantage-scroll { - padding: 60px 0 0 0; -} - .ask-advantage-scroll h2 { font-family: var(--font-secondary); font-weight: 400; @@ -37,7 +33,7 @@ section.ask-advantage-scroll { gap: 20px; flex-wrap: wrap; justify-content: center; - margin-top: 60px; + /* margin-top: 60px; */ } .card-scroll { @@ -175,14 +171,14 @@ section.ask-advantage-scroll { line-height: 36px; } .ask-advantage-scroll p.lead { - font-size: 14px; + font-size: 15px; line-height: 22px; } } .cards-wrapper { position: relative; - height: 530px; /* ya jitna aapko chahiye ho */ + height: 530px; overflow: hidden; } diff --git a/js/main.js b/js/main.js index da90ade..05c61af 100644 --- a/js/main.js +++ b/js/main.js @@ -334,7 +334,7 @@ let scrollTrigger; let allowNormalScroll = false; // =============================== -// ✅ GSAP Stack Scroll with Section Pinning +// ✅ GSAP Stack Scroll with Section Pinning (Fixed Scroll Lock Only) // =============================== function initGsapStackScroll() { const section = document.querySelector(".ask-advantage-scroll"); @@ -346,22 +346,22 @@ function initGsapStackScroll() { cards = Array.from(cardsWrapper.querySelectorAll(".card-scroll")); if (!cards.length) return; - // Initial setup - Using your simple stacking logic + // Initial setup gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 }); gsap.set(cards[0], { opacity: 1, y: "60px", zIndex: 5 }); currentIndex = 0; allowNormalScroll = false; - //Calculate exact pinning distance + // Calculate exact pinning distance const cardHeight = cardsWrapper.offsetHeight; const totalCards = cards.length; - const pinningDistance = cardHeight * totalCards * 1.5; // Adjust multiplier as needed + const pinningDistance = cardHeight * totalCards * 2; - // Scroll pinning logic from updated code + // Scroll pinning logic scrollTrigger = ScrollTrigger.create({ trigger: cardsWrapper, start: "top top", - end:`+=${pinningDistance}`, + end: `+=${pinningDistance}`, pin: true, anticipatePin: 1, pinSpacing: true, @@ -375,7 +375,6 @@ function initGsapStackScroll() { onLeave: () => { isSectionPinned = false; allowNormalScroll = true; - console.log("Left pinned section"); }, onEnterBack: () => { isSectionPinned = true; @@ -384,21 +383,32 @@ function initGsapStackScroll() { onLeaveBack: () => { isSectionPinned = false; allowNormalScroll = true; - } + }, }); - // Global wheel handler that checks if section is pinned + // ✅ Wheel handler with scroll block fix window._gsapStackHandler = function (e) { - if (!isSectionPinned || animating) return; - - // Allow normal scrolling when at boundaries - if (allowNormalScroll || - (e.deltaY > 0 && currentIndex >= cards.length - 1) || - (e.deltaY < 0 && currentIndex <= 0)) { + if (!isSectionPinned) return; + + // Completely block scroll while animating + if (animating) { + e.preventDefault(); + e.stopPropagation(); return; } - + + // Boundaries check + if ( + (e.deltaY > 0 && currentIndex >= cards.length - 1) || + (e.deltaY < 0 && currentIndex <= 0) + ) { + allowNormalScroll = true; + return; + } + + // Start animation & block scroll during it e.preventDefault(); + e.stopPropagation(); if (e.deltaY > 0) { showNextGsapCard(); @@ -407,56 +417,60 @@ function initGsapStackScroll() { } }; + // ✅ Keyboard handler + window._gsapKeyHandler = function (e) { + if (!isSectionPinned || animating) return; + + if ( + (e.key === "ArrowDown" && currentIndex >= cards.length - 1) || + (e.key === "ArrowUp" && currentIndex <= 0) + ) { + return; // Allow normal scroll at boundaries + } + + if (e.key === "ArrowDown") { + e.preventDefault(); + showNextGsapCard(); + } else if (e.key === "ArrowUp") { + e.preventDefault(); + showPrevGsapCard(); + } + }; + window.addEventListener("wheel", window._gsapStackHandler, { passive: false, }); + window.addEventListener("keydown", window._gsapKeyHandler); } -// Reset to first card function +// ✅ Reset to first card function resetToFirstCard() { animating = true; - - // Hide all cards + allowNormalScroll = false; + gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 }); - - // Show first card - gsap.set(cards[0], { - opacity: 1, - y: "60px", + + gsap.set(cards[0], { + opacity: 1, + y: "60px", zIndex: 5, onComplete: () => { currentIndex = 0; animating = false; - allowNormalScroll = false; - } + }, }); } -// ✅ Show next card - Using your simple stacking logic +// ✅ Show next card function showNextGsapCard() { - if (currentIndex >= cards.length - 1) { - // Enable normal scrolling when reaching last card - allowNormalScroll = true; - - // Add a small visual indicator that normal scrolling is available - const lastCard = cards[currentIndex]; - gsap.to(lastCard, { - y: "50px", - duration: 0.3, - ease: "power2.out", - yoyo: true, - repeat: 1 - }); - - return; - } - + if (currentIndex >= cards.length - 1 || animating) return; + animating = true; + allowNormalScroll = false; const current = cards[currentIndex]; const next = cards[currentIndex + 1]; - // Animate current slightly up/back gsap.to(current, { y: "40px", scale: 0.95, @@ -465,7 +479,6 @@ function showNextGsapCard() { ease: "power2.inOut", }); - // Animate next card into view gsap.set(next, { zIndex: 5 }); gsap.fromTo( next, @@ -480,30 +493,28 @@ function showNextGsapCard() { currentIndex++; adjustVisibleCards(); animating = false; - - // Enable normal scrolling when reaching last card + + // ✅ Allow normal scroll only after last card animation completes if (currentIndex >= cards.length - 1) { allowNormalScroll = true; + ScrollTrigger.refresh(true); + } else { + allowNormalScroll = false; } }, } ); } -// ✅ Show previous card - Using your simple stacking logic +// ✅ Show previous card function showPrevGsapCard() { - if (currentIndex <= 0) { - // Enable normal scrolling when at first card - allowNormalScroll = true; - return; - } - + if (currentIndex <= 0 || animating) return; + animating = true; + allowNormalScroll = false; const current = cards[currentIndex]; const prev = cards[currentIndex - 1]; - - // Hide current card (slide down) gsap.to(current, { y: "100%", opacity: 0, @@ -511,7 +522,6 @@ function showPrevGsapCard() { ease: "power2.inOut", }); - // Bring previous card back as active gsap.set(prev, { zIndex: 5 }); gsap.to(prev, { y: "60px", @@ -523,18 +533,16 @@ function showPrevGsapCard() { currentIndex--; adjustVisibleCards(); animating = false; - - // Disable normal scrolling if not at first card - if (currentIndex > 0) { + + if (currentIndex <= 0) { allowNormalScroll = false; } }, }); } -// ✅ Maintain only 3 visible cards in stack - Using your simple stacking logic +// ✅ Adjust visible cards stack function adjustVisibleCards() { - // Reset all first gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 }); // Active card @@ -547,12 +555,12 @@ function adjustVisibleCards() { }); } - // Show only 2 previous cards (total 3 visible) + // Show only 2 previous cards for (let i = 1; i <= 2; i++) { const prevIndex = currentIndex - i; if (prevIndex >= 0) { - const yOffset = 60 - i * 25; // e.g., 60px, 35px - const scale = 1 - i * 0.05; // e.g., 1, 0.95, 0.9 + const yOffset = 60 - i * 25; + const scale = 1 - i * 0.05; const zIndex = 5 - i; gsap.set(cards[prevIndex], { @@ -564,7 +572,7 @@ function adjustVisibleCards() { } } - // Hide any card older than the last 3 visible + // Hide older cards const hideIndex = currentIndex - 3; if (hideIndex >= 0 && cards[hideIndex]) { gsap.to(cards[hideIndex], { @@ -576,8 +584,23 @@ function adjustVisibleCards() { } } +// ✅ Cleanup function +function cleanupGsapStackScroll() { + if (window._gsapStackHandler) { + window.removeEventListener("wheel", window._gsapStackHandler); + } + if (window._gsapKeyHandler) { + window.removeEventListener("keydown", window._gsapKeyHandler); + } + if (scrollTrigger) { + scrollTrigger.kill(); + } +} + // Initialize after DOM load document.addEventListener("DOMContentLoaded", initGsapStackScroll); +window.addEventListener("beforeunload", cleanupGsapStackScroll); + // =============================== // ✅ Load Page Content Dynamically diff --git a/pages/home.html b/pages/home.html index 322b69b..69690fa 100644 --- a/pages/home.html +++ b/pages/home.html @@ -201,7 +201,7 @@ -
    +
    As of July 2025
    @@ -339,105 +339,122 @@
    -

    Life Moments You Can Plan For

    +

    Life Moments You Can Plan For

    Choose a Goal and we’ll help you invest for it, step by step

    -
    -
    - icon -
    Buying My Dream Home
    -

    Save up for the perfect place at your pace

    -
    -
    - icon -
    Kids' Big
    Dreams
    -

    Because tuition shouldn’t be a worry

    -
    -
    - icon -
    Early
    Retirement Goals
    -

    Plan your work-free years ahead

    -
    -
    - icon -
    Saving Taxes the Right Way
    -

    Optimize your tax savings legally

    -
    -
    +
    +
    +
    + Dream Home +
    +

    Buying My

    +

    Dream Home

    +
    +
    +

    Save up for the perfect

    +

    place at your pace

    +
    +
    +
    -
    - -
    - icon -
    Dream Vacation
    -

    Turn your dream getaway into reality

    -
    -
    - icon -
    Emergency Corpus
    -

    Stay prepared for life’s unexpected turns

    -
    -
    - icon -
    Regular Income
    -

    Secure a steady flow of income

    -
    -
    - icon -
    Wealth Creation
    -

    Grow your money steadily over time

    -
    -
    +
    +
    + Kid's Dream +
    +

    Kid's Big

    +

    Dream

    +
    +
    +

    Because Tution

    +

    shoudln't be worry

    +
    +
    +
    -
    -
    - icon -
    Buying My Dream Home
    -

    Save up for the perfect place at your pace

    -
    -
    - icon -
    Kids' Big Dreams
    -

    Because tuition shouldn’t be a worry

    -
    -
    - icon -
    Early Retirement Goals
    -

    Plan your work-free years ahead

    -
    -
    - icon -
    Saving Taxes the Right Way
    -

    Optimize your tax savings legally

    -
    +
    +
    + Retirement +
    +

    Early

    +

    Retirement Goals

    +
    +
    +

    Plan your work-

    +

    free years ahead

    +
    +
    +
    - - -
    +
    +
    + Tax Savings +
    +

    Saving Taxes The

    +

    Right Way

    +
    +
    +

    Optimize your tax

    +

    savings legally

    +
    +
    +
    -
    - -
    - icon -
    Dream Vacation
    -

    Turn your dream getaway into reality

    +
    +
    + Vacation +
    +

    Dream

    +

    Vacation

    +
    +
    +

    Turn your dream

    +

    getaway into reality

    +
    +
    +
    + +
    +
    + Emergency Fund +
    +

    Emergency

    +

    Corpus

    +
    +
    +

    Stay prepared for life's

    +

    unexpected turns

    +
    +
    +
    + +
    +
    + Regular Income +
    +

    Regular

    +

    Income

    +
    +
    +

    Secure a steady

    +

    flow of income

    +
    +
    +
    + +
    +
    + Wealth Creation +
    +

    Wealth

    +

    Creation

    +
    +
    +

    Grow your money

    +

    steadily over time

    +
    +
    +
    -
    - icon -
    Emergency Corpus
    -

    Stay prepared for life’s unexpected turns

    -
    -
    - icon -
    Regular Income
    -

    Secure a steady flow of income

    -
    -
    - icon -
    Wealth Creation
    -

    Grow your money steadily over time

    -
    -
    @@ -478,7 +495,7 @@
    Understanding SIPs -
    Understanding SIPs: Building Wealth One Step at a Time
    +
    Understanding SIPs: Building Wealth One Step at a Time

    7 min read

    Small monthly investments can lead to big financial milestones. Explore how SIPs work, why they matter, and @@ -492,7 +509,7 @@

    Goals First -
    Goals First: Planning for Retirement, Children & More
    +
    Goals First: Planning for Retirement, Children & More

    7 min read

    Whether it’s your dream home or your child’s future, financial goals need clarity and discipline. Learn how @@ -506,7 +523,7 @@

    Market Cycles -
    How Market Cycles Affect Mutual Fund Returns
    +
    How Market Cycles Affect Mutual Fund Returns

    7 min read

    Markets rise and fall — but how does that impact your mutual fund investments? Learn how long-term compounding