FTCWebsite/templates/home.html

{% extends "base.html" %}

{% block title %}Technical Turbulence - Home{% endblock %}

{% block content %}

<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<div class="home">
            <div class="bg">
                <div class="overlay-container">
                    <img class="base" src="{{ url_for('static', filename='images/michiana.png') }}">
                    <img class="overlay" src="{{ url_for('static', filename='images/techturb.gif') }}">
                </div>
                    <div class="footer-text">FTC #23344 <br><button class="home-but" onclick="window.open('https://www.instagram.com/technicalturbulence23344/', '_blank');"><i data-feather="instagram"></i>
                        </button> <button class="home-but"  onclick="window.open('mailto:technicalturbulence@gmail.com', '_blank');"> 
                        <i data-feather="mail"></i>
                    </button> <button class="home-but"  onclick="window.open('https://youtube.com/@TechnicalTurbulenceFTC', '_blank');"> 
                        <i data-feather="youtube"></i>
                    </button></div>
            <div class="border-triangle"></div>
        </div>
        <!-- <h1 class="heading"><span class="emoji about">About</span></h1>
        <hr> -->
        <div class="home-info">
            <div class="hero-image-section">
                <img src="{{ url_for('static', filename='images/teeaam.png') }}" class="hero-team-image">
                <div class="hero-overlay"></div>
                <div class="hero-text-container">
                    <h1 class="hero-title">👋 We are Technical Turbulence.</h1>
                    <p class="hero-description">Team 23344, Technical Turbulence, is a community-based returning team situated
                        around Plano and Frisco Texas, comprising nine members primarily consisting of sophomores from
                        different high schools. Our rookie year was 2023 and we hope to learn much more in the years to
                        come. We want to grow our numbers and increase our outreach towards different communities so we can
                        be the best that we can.</p>
                    <p class="hero-description">Since we are designated as veterans this year, our members bring substantial
                        experience from their involvement with FTC 12900 Quantum Claw and 22201 The Edge Robotics. Operating
                        from our dedicated garage workshop, we uphold the fundamental values of FIRST, integrating Gracious
                        Professionalism into our daily endeavors.</p>
                </div>
            </div>
            <div class="stats-container">
                <h1 class="heading"><span class="emoji stats">Our stats</span></h1>
                <hr>

                <div class="stats-cards">
                    {% set icons = ['award', 'target', 'users', 'calendar'] %}
                    {% for stat in stats %}
                    <div class="stats-card">
                        <div class="stats-icon">
                            <i data-feather="{{ icons[loop.index0] }}"></i>
                        </div>
                        <h1 class="stats-card-header">{{ stat.value }}</h1>
                        <p class="stats-card-info">{{ stat.label }}</p>
                    </div>
                    {% endfor %}
                </div>

                <button class="stats-button" onclick="window.location.href = '{{ url_for('competitions') }}' ; ">View
                    our log</button>
            </div>

        </div>
        <h1 class="heading"><span class="emoji gallary">Our mission</span></h1>
        <hr>
        <div class="home-info">
            <div class="content-container">
                <h1 class="sub-header">✊ One team, one goal.</h1>
                <p class="sub-content">We aim to show individuals that with teamwork, creativity, and persistence, anyone
                    can design, build, and code robots. Our mission is part of an outreach initiative to guide young minds
                    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="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, and hands-on demonstrations, we ignite passion in the next generation by introducing them to the transformative world of robotics, 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 empower rookie teams by sharing hard-earned knowledge and real-world experiences, transforming them into confident, resilient competitors who carry forward the spirit of gracious professionalism.</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 every opportunity to teach programming, CAD, and advanced engineering skills, equipping future innovators with the problem-solving abilities essential for thriving 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 strategic local partnerships, we build bridges that unite diverse groups, demonstrating how robotics can be a powerful catalyst for collaboration, innovation, and lasting change.</p>
                </div>
                </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>


        <h1 class="heading"><span class="emoji sponsors">Sponsors</span></h1>
        <hr>

        <div class="home-info">
            <div class="content-container">
                <h1 class="sub-header">❤️ We couldn't have done it without...</h1>
                
                <p class="sub-content">We, FTC team Technical Turbulence, want to inspire the next generation by sharing our
                    journey in robotics and the exciting world of FTC. By showcasing the
                    engineering behind our robot, and with the help of our sponsors, we hope to spark curiosity in young minds about STEM fields.
                </p>

                <div class="sponsors-container" id="sponnnnn">
                <img class="sponsors-card" src="{{ url_for('static', filename='images/ray.png') }}">
                <img class="sponsors-card" src="{{ url_for('static', filename='images/cen3.png') }}">
                <img class="sponsors-card" src="{{ url_for('static', filename='images/ti.png') }}">
                <img class="sponsors-card" src="{{ url_for('static', filename='images/twc.png') }}">
                <img class="sponsors-card" src="{{ url_for('static', filename='images/fw.png') }}">
                </div>

                <div class="sponsors-more-container">
                    <button type="button" id="sponsors-more-button"
                        onclick="window.location.href = '{{ url_for('sponsors') }}' ; ">See more</button>
                </div>
            </div>
        </div>

    </div>
    </div>

    <script>
        feather.replace({ width: "40", height: "40" });
    </script>

{% endblock %}