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">
                    {% for stat in stats %}
                    <div class="stats-card">
                        <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">

            <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, 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>


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

        <div class="home-info">
            <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>

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

{% endblock %}