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="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>

        </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 %}