diff --git a/static/css/styles.css b/static/css/styles.css index e0e50ce..0e2e7fc 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -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; diff --git a/static/js/scripts.js b/static/js/scripts.js index 9dd877a..a948dff 100644 --- a/static/js/scripts.js +++ b/static/js/scripts.js @@ -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, diff --git a/templates/home.html b/templates/home.html index 6f7c475..9d1329d 100644 --- a/templates/home.html +++ b/templates/home.html @@ -66,10 +66,46 @@ toward STEM and skill-building opportunities in robotics and technology. Through this unifying goal, we want to empower young students to learn, grow, and join FTC in the future.

-
- - +
+
+
+ +
+

STEM Outreach

+

Through workshops, global initiatives, demonstrations, and more, we introduce younger students to robotics and spark curiosity in engineering and technology.

+
+
+
+ +
+

Mentorship

+

We guide rookie teams by sharing our knowledge and experiences, helping them grow with confidence and resilience in competition.

+
+
+
+ +
+

Education

+

Our team actively pursues all opportunities to teaches programming, CAD, and other engineering skills, nurturing unique problem-solving abilities for future careers in STEM.

+
+
+
+ +
+

Community

+

From school events to local partnerships, we bring people together, showing how robotics can inspire collaboration and problem-solving.

+
+
+ +
+
+

👥 Meet Our Team

+

Our diverse team brings together passionate students from different backgrounds, all united by our love for robotics and innovation. Each member contributes unique skills and perspectives that make Technical Turbulence stronger.

+ +
+
+ +