KeshavAnandCode/FTCWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add feature cards and update team section layout

Browse Source 
Refactors the home page to include a new values grid with four cards and restructures the "Meet Our Team" section to display text alongside an image, with responsive adjustments for mobile. Updates JavaScript to trigger animations for the new cards and adjusts parallax scrolling trigger for the team image. Modifies CSS to implement the new grid and section layouts, including hover effects and media queries.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: 6f97b00a-bb59-41e0-873f-8825c7854d1f
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/MFdA8rN
This commit is contained in:
abhiramtx
2025-11-08 22:32:03 +00:00
parent 922ede1a5c
commit 09a0787374
3 changed files with 212 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
static/js/scripts.js
View File

@@ -133,7 +133,7 @@ function initParallaxEffects() {
yPercent: 15,
ease: "none",
scrollTrigger: {
trigger: '.meet-our-team-container',
trigger: '.team-image-wrapper',
start: "top bottom",
end: "bottom top",
scrub: 1
@@ -157,7 +157,7 @@ function initParallaxEffects() {
}
function initScrollAnimations() {
const fadeUpElements = document.querySelectorAll('.home-info, .stats-container, .sub-header, .sub-content, .sponsors-container, .hero-image-section, .card, .member-card, .robo-card, .competition-card');
const fadeUpElements = document.querySelectorAll('.home-info, .stats-container, .sub-header, .sub-content, .sponsors-container, .hero-image-section, .card, .member-card, .robo-card, .competition-card, .team-section');
fadeUpElements.forEach((element, index) => {
gsap.fromTo(element,
@@ -180,6 +180,30 @@ function initScrollAnimations() {
);
});
const valueCards = document.querySelectorAll('.value-card');
valueCards.forEach((card, index) => {
gsap.fromTo(card,
{
opacity: 0,
scale: 0.9,
y: 40
},
{
opacity: 1,
scale: 1,
y: 0,
duration: 0.8,
delay: index * 0.15,
ease: "back.out(1.2)",
scrollTrigger: {
trigger: card,
start: "top 85%",
toggleActions: "play none none reverse"
}
}
);
});
const statsCards = document.querySelectorAll('.stats-card');
statsCards.forEach((card, index) => {
gsap.fromTo(card,