made homepage feedback changes
All checks were successful
ask-mutual-fund Actions Workflow / test (push) Successful in 21s
All checks were successful
ask-mutual-fund Actions Workflow / test (push) Successful in 21s
This commit is contained in:
unknown
@@ -17,10 +17,10 @@
|
||||
<a href="#" class="me-3"><img src="./assests/images/facebook.svg" alt=""></a>
|
||||
<a href="#"><img src="./assests/images/lin.svg" alt=""></a>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<!-- <div class="d-flex gap-2">
|
||||
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" height="40" alt="Google Play"></a>
|
||||
<a href="#"><img src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" height="40" alt="App Store"></a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- Quick Links -->
|
||||
|
||||
@@ -42,8 +42,8 @@
|
||||
<li class="nav-item me-3">
|
||||
<a href="#" class="invest-btn px-3 py-2">Invest Now</a>
|
||||
</li>
|
||||
<li class="nav-item d-flex align-items-center">
|
||||
<span class="text-white">Login</span>
|
||||
<li class="nav-item d-flex align-items-center login-btn">
|
||||
<span class="">Login</span>
|
||||
<i class="bi bi-chevron-down" style="font-size: 13px; color: #B18C4A; margin-left: 8px; display: none;"></i>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
203
css/style.css
203
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
135
js/main.js
135
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;
|
||||
if (!isSectionPinned) return;
|
||||
|
||||
// Allow normal scrolling when at boundaries
|
||||
if (allowNormalScroll ||
|
||||
(e.deltaY > 0 && currentIndex >= cards.length - 1) ||
|
||||
(e.deltaY < 0 && currentIndex <= 0)) {
|
||||
// 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,19 +417,39 @@ 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;
|
||||
allowNormalScroll = false;
|
||||
|
||||
// Hide all cards
|
||||
gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
|
||||
|
||||
// Show first card
|
||||
gsap.set(cards[0], {
|
||||
opacity: 1,
|
||||
y: "60px",
|
||||
@@ -427,36 +457,20 @@ function resetToFirstCard() {
|
||||
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,
|
||||
@@ -481,29 +494,27 @@ function showNextGsapCard() {
|
||||
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",
|
||||
@@ -524,17 +534,15 @@ function showPrevGsapCard() {
|
||||
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
|
||||
|
||||
203
pages/home.html
203
pages/home.html
@@ -201,7 +201,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="mt-4 date-container">
|
||||
<span class="as-of-date ">As of July 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -339,105 +339,122 @@
|
||||
|
||||
|
||||
<section class="ask-advantage container">
|
||||
<h2>Life Moments You Can Plan For</h2>
|
||||
<h2 class="ask-advantage-heading">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>
|
||||
|
||||
<div class="row descktop descktop-marging-new mobile-left">
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon">
|
||||
<img src="./assests/images/life1.svg" alt="icon" class="mb-4 icon1">
|
||||
<h6 class=" text-primary">Buying My Dream Home</h6>
|
||||
<p class="text-muted small">Save up for the perfect place at your pace</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon">
|
||||
<img src="./assests/images/life2.svg" alt="icon" class="mb-4 icon2">
|
||||
<h6 class=" text-primary">Kids' Big<br> Dreams</h6>
|
||||
<p class="text-muted small">Because tuition shouldn’t be a worry</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon1">
|
||||
<img src="./assests/images/life3.svg" alt="icon" class="mb-4 icon3">
|
||||
<h6 class=" text-primary">Early <br>Retirement Goals</h6>
|
||||
<p class="text-muted small">Plan your work-free years ahead</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon">
|
||||
<img src="./assests/images/life4.svg" alt="icon" class="mb-4 icon4">
|
||||
<h6 class=" text-primary">Saving Taxes the Right Way</h6>
|
||||
<p class="text-muted small">Optimize your tax savings legally</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="outer_box">
|
||||
<div class="inner_box">
|
||||
<img src="./assests/images/life1.svg" alt="Dream Home" />
|
||||
<div class="heading-container">
|
||||
<h2 class="h1">Buying My</h2>
|
||||
<h2 class="h1">Dream Home</h2>
|
||||
</div>
|
||||
<div class="paragraph-container">
|
||||
<p>Save up for the perfect</p>
|
||||
<p>place at your pace</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row descktop descktop-marging-new mobile-left">
|
||||
<div class="outer_box">
|
||||
<div class="inner_box">
|
||||
<img src="./assests/images/life2.svg" alt="Kid's Dream" />
|
||||
<div class="heading-container">
|
||||
<h2 class="h2">Kid's Big</h2>
|
||||
<h2 class="h2">Dream</h2>
|
||||
</div>
|
||||
<div class="paragraph-container">
|
||||
<p>Because Tution</p>
|
||||
<p>shoudln't be worry</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon2">
|
||||
<img src="./assests/images/life5.svg" alt="icon" class="mb-4 icon5">
|
||||
<h6 class=" text-primary">Dream Vacation</h6>
|
||||
<p class="text-muted small">Turn your dream getaway into reality</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon">
|
||||
<img src="./assests/images/life6.svg" alt="icon" class="mb-4 icon6">
|
||||
<h6 class=" text-primary">Emergency Corpus</h6>
|
||||
<p class="text-muted small">Stay prepared for life’s unexpected turns</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon3">
|
||||
<img src="./assests/images/life7.svg" alt="icon" class="mb-4 icon7">
|
||||
<h6 class=" text-primary">Regular Income</h6>
|
||||
<p class="text-muted small">Secure a steady flow of income</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon4">
|
||||
<img src="./assests/images/life8.svg" alt="icon" class="mb-4 icon8">
|
||||
<h6 class=" text-primary">Wealth Creation</h6>
|
||||
<p class="text-muted small">Grow your money steadily over time</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer_box">
|
||||
<div class="inner_box">
|
||||
<img src="./assests/images/life3.svg" alt="Retirement" />
|
||||
<div class="heading-container">
|
||||
<h2 class="h3">Early</h2>
|
||||
<h2 class="h3">Retirement Goals</h2>
|
||||
</div>
|
||||
<div class="paragraph-container">
|
||||
<p>Plan your work-</p>
|
||||
<p>free years ahead</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mobile mobile-left">
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon">
|
||||
<img src="./assests/images/life1.svg" alt="icon" class="mb-4 icon1">
|
||||
<h6 class=" text-primary">Buying My Dream Home</h6>
|
||||
<p class="text-muted small">Save up for the perfect place at your pace</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon1">
|
||||
<img src="./assests/images/life2.svg" alt="icon" class="mb-4 icon2">
|
||||
<h6 class=" text-primary">Kids' Big Dreams</h6>
|
||||
<p class="text-muted small">Because tuition shouldn’t be a worry</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon2">
|
||||
<img src="./assests/images/life3.svg" alt="icon" class="mb-4 icon3">
|
||||
<h6 class=" text-primary">Early Retirement Goals</h6>
|
||||
<p class="text-muted small">Plan your work-free years ahead</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon3">
|
||||
<img src="./assests/images/life4.svg" alt="icon" class="mb-4 icon4">
|
||||
<h6 class=" text-primary">Saving Taxes the Right Way</h6>
|
||||
<p class="text-muted small">Optimize your tax savings legally</p>
|
||||
</div>
|
||||
<div class="outer_box">
|
||||
<div class="inner_box">
|
||||
<img src="./assests/images/life4.png" alt="Tax Savings" />
|
||||
<div class="heading-container">
|
||||
<h2 class="h4">Saving Taxes The</h2>
|
||||
<h2 class="h4">Right Way</h2>
|
||||
</div>
|
||||
<div class="paragraph-container">
|
||||
<p>Optimize your tax</p>
|
||||
<p>savings legally</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outer_box">
|
||||
<div class="inner_box">
|
||||
<img src="./assests/images/life5.svg" alt="Vacation" />
|
||||
<div class="heading-container">
|
||||
<h2 class="h5">Dream</h2>
|
||||
<h2 class="h5">Vacation</h2>
|
||||
</div>
|
||||
<div class="paragraph-container">
|
||||
<p>Turn your dream</p>
|
||||
<p>getaway into reality</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outer_box">
|
||||
<div class="inner_box">
|
||||
<img src="./assests/images/life6.svg" alt="Emergency Fund" />
|
||||
<div class="heading-container">
|
||||
<h2 class="h6">Emergency</h2>
|
||||
<h2 class="h6">Corpus</h2>
|
||||
</div>
|
||||
<div class="paragraph-container">
|
||||
<p>Stay prepared for life's</p>
|
||||
<p>unexpected turns</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="outer_box">
|
||||
<div class="inner_box">
|
||||
<img src="./assests/images/life7.svg" alt="Regular Income" />
|
||||
<div class="heading-container">
|
||||
<h2 class="h7">Regular</h2>
|
||||
<h2 class="h7">Income</h2>
|
||||
</div>
|
||||
<div class="paragraph-container">
|
||||
<p>Secure a steady</p>
|
||||
<p>flow of income</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mobile mobile-left">
|
||||
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon4">
|
||||
<img src="./assests/images/life5.svg" alt="icon" class="mb-4 icon5">
|
||||
<h6 class=" text-primary">Dream Vacation</h6>
|
||||
<p class="text-muted small">Turn your dream getaway into reality</p>
|
||||
<div class="outer_box">
|
||||
<div class="inner_box">
|
||||
<img src="./assests/images/life8.svg" alt="Wealth Creation" />
|
||||
<div class="heading-container">
|
||||
<h2 class="h8">Wealth</h2>
|
||||
<h2 class="h8">Creation</h2>
|
||||
</div>
|
||||
<div class="paragraph-container">
|
||||
<p>Grow your money</p>
|
||||
<p>steadily over time</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon5">
|
||||
<img src="./assests/images/life6.svg" alt="icon" class="mb-4 icon6">
|
||||
<h6 class=" text-primary">Emergency Corpus</h6>
|
||||
<p class="text-muted small">Stay prepared for life’s unexpected turns</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon6">
|
||||
<img src="./assests/images/life7.svg" alt="icon" class="mb-4 icon7">
|
||||
<h6 class=" text-primary">Regular Income</h6>
|
||||
<p class="text-muted small">Secure a steady flow of income</p>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3 padding-icon7">
|
||||
<img src="./assests/images/life8.svg" alt="icon" class="mb-4 icon8">
|
||||
<h6 class=" text-primary">Wealth Creation</h6>
|
||||
<p class="text-muted small">Grow your money steadily over time</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -478,7 +495,7 @@
|
||||
<div class="col-md-4">
|
||||
<div class="blog-card">
|
||||
<img src="./assests/images/blog1.svg" alt="Understanding SIPs" class="img-fluid rounded-3 mb-3">
|
||||
<h5 class="tittle-blog">Understanding SIPs: Building Wealth One Step at a Time</h5>
|
||||
<h5 class="home-tittle-blog">Understanding SIPs: Building Wealth One Step at a Time</h5>
|
||||
<p class="time">7 min read</p>
|
||||
<p class="desc-blog">
|
||||
Small monthly investments can lead to big financial milestones. Explore how SIPs work, why they matter, and
|
||||
@@ -492,7 +509,7 @@
|
||||
<div class="col-md-4">
|
||||
<div class="blog-card">
|
||||
<img src="./assests/images/blog2.svg" alt="Goals First" class="img-fluid rounded-3 mb-3">
|
||||
<h5 class="tittle-blog">Goals First: Planning for Retirement, Children & More</h5>
|
||||
<h5 class="home-tittle-blog">Goals First: Planning for Retirement, Children & More</h5>
|
||||
<p class="time">7 min read</p>
|
||||
<p class="desc-blog">
|
||||
Whether it’s your dream home or your child’s future, financial goals need clarity and discipline. Learn how
|
||||
@@ -506,7 +523,7 @@
|
||||
<div class="col-md-4">
|
||||
<div class="blog-card">
|
||||
<img src="./assests/images/blog3.svg" alt="Market Cycles" class="img-fluid rounded-3 mb-3">
|
||||
<h5 class="tittle-blog">How Market Cycles Affect Mutual Fund Returns</h5>
|
||||
<h5 class="home-tittle-blog">How Market Cycles Affect Mutual Fund Returns</h5>
|
||||
<p class="time">7 min read</p>
|
||||
<p class="desc-blog">
|
||||
Markets rise and fall — but how does that impact your mutual fund investments? Learn how long-term compounding
|
||||
|
||||
Reference in New Issue
Block a user