Add feature cards and update team section layout
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
@@ -555,6 +555,152 @@ hr {
|
||||
transform: translateX(-50%) translateY(-2px);
|
||||
}
|
||||
|
||||
.values-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
margin: 48px 0 64px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.value-card {
|
||||
background: rgba(26, 26, 26, 0.4);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.value-card:hover {
|
||||
transform: translateY(-4px);
|
||||
background: rgba(26, 26, 26, 0.6);
|
||||
box-shadow: 0 12px 24px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.value-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.value-icon svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.value-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--white);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.value-description {
|
||||
font-family: var(--font-body);
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: var(--gray-300);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.team-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 48px;
|
||||
margin: 64px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.team-text {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.team-text .sub-header {
|
||||
text-align: left;
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
|
||||
.team-text .sub-content {
|
||||
text-align: left;
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
|
||||
.team-image-wrapper {
|
||||
flex: 1;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.team-image-wrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: brightness(0.7);
|
||||
transition: transform 3s ease;
|
||||
}
|
||||
|
||||
.team-image-wrapper:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.team-cta-button {
|
||||
font-size: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
border-radius: 12px;
|
||||
color: var(--white);
|
||||
padding: 16px 32px;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.team-cta-button:hover {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.values-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
.value-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.team-section {
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.team-text .sub-header,
|
||||
.team-text .sub-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.team-image-wrapper {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.sponsors-container {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user