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:
@@ -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.</p>
|
||||
|
||||
<div class="meet-our-team-container">
|
||||
<img id="meet-our-team" src="{{ url_for('static', filename='images/team.png') }}">
|
||||
<button class="bottom-center-button"
|
||||
onclick="window.location.href = '{{ url_for('contributors') }}' ; ">Meet Our Team</button>
|
||||
<div class="values-grid">
|
||||
<div class="value-card">
|
||||
<div class="value-icon">
|
||||
<i data-feather="cpu"></i>
|
||||
</div>
|
||||
<h3 class="value-title">STEM Outreach</h3>
|
||||
<p class="value-description">Through workshops, global initiatives, demonstrations, and more, we introduce younger students to robotics and spark curiosity in engineering and technology.</p>
|
||||
</div>
|
||||
<div class="value-card">
|
||||
<div class="value-icon">
|
||||
<i data-feather="users"></i>
|
||||
</div>
|
||||
<h3 class="value-title">Mentorship</h3>
|
||||
<p class="value-description">We guide rookie teams by sharing our knowledge and experiences, helping them grow with confidence and resilience in competition.</p>
|
||||
</div>
|
||||
<div class="value-card">
|
||||
<div class="value-icon">
|
||||
<i data-feather="book-open"></i>
|
||||
</div>
|
||||
<h3 class="value-title">Education</h3>
|
||||
<p class="value-description">Our team actively pursues all opportunities to teaches programming, CAD, and other engineering skills, nurturing unique problem-solving abilities for future careers in STEM.</p>
|
||||
</div>
|
||||
<div class="value-card">
|
||||
<div class="value-icon">
|
||||
<i data-feather="globe"></i>
|
||||
</div>
|
||||
<h3 class="value-title">Community</h3>
|
||||
<p class="value-description">From school events to local partnerships, we bring people together, showing how robotics can inspire collaboration and problem-solving.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="team-section">
|
||||
<div class="team-text">
|
||||
<h1 class="sub-header">👥 Meet Our Team</h1>
|
||||
<p class="sub-content">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.</p>
|
||||
<button class="team-cta-button" onclick="window.location.href = '{{ url_for('contributors') }}' ; ">View Team Members</button>
|
||||
</div>
|
||||
<div class="team-image-wrapper">
|
||||
<img id="meet-our-team" src="{{ url_for('static', filename='images/team.png') }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user