apply.html

---
layout: default
title: Join Us
permalink: /apply/
header-title: Join Us
header-desc: "Ready to learn and grow to the next level? We are driven by a relentless pursuit of excellence and a forward-thinking mindset. Our team is dedicated to exceeding expectations and achieving greatness in all aspects of our work, from technological advancements to our quest for exploration and discovery."
header-image: /assets/images/join_us.jpeg
header-image-height: 885
header-image-width: 1179
scroll-link: "#values"
first-button: "<a href='#hubspot' class='btn btn--primary smoothscroll'>Apply</a>"
second-button: "<a href='/team/' class='btn btn--stroke'>Our team</a>"
---

<!-- services
    ================================================== -->
<section id="values" class="s-services">
    <div class="row section-header has-bottom-sep" data-aos="fade-up">
        <div class="col-full">
            <h3 class="subhead">Elara Aerospace</h3>
            <h1 class="display-2">Our Values</h1>
        </div>
    </div>
    <!-- end section-header -->

    <div class="row services-list block-1-2 block-tab-full">
        <div class="col-block service-item" data-aos="fade-up">
            <div class="service-icon">
                <i class="icon-earth"></i>
            </div>
            <div class="service-text">
                <h3 class="h2">Exploration</h3>
                <p>At Elara Aerospace, we thrive on the spirit of exploration, driven by curiosity and a thirst for discovery.</p>
            </div>
        </div>

        <div class="col-block service-item" data-aos="fade-up">
            <div class="service-icon">
                <i class="icon-lego-block"></i>
            </div>
            <div class="service-text">
                <h3 class="h2">Aspiration</h3>
                <p>
                    We are driven by a relentless pursuit of excellence and a forward-thinking mindset. Our team is dedicated to exceeding expectations and achieving greatness in all aspects of our work, from technological advancements to
                    our quest for exploration and discovery.
                </p>
            </div>
        </div>
    </div>
</section>


<style>
    .main-quote-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 40px 0;
    }
    .main-quote-wrapper {
        max-width: 1000px;
        text-align: center;
        position: relative;
        padding: 30px;
        background: rgba(115, 14, 162, 0.1);
        border-radius: 15px;
        border-left: 5px solid #730ea2;
    }
    .quote-icon {
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 100px;
        opacity: 0.2;
    }
    .main-quote {
        font-size: 1.4em;
        font-style: italic;
        color: #ddd;
        position: relative;
        z-index: 1;
    }
    .quote-author {
        margin-top: 15px;
        color: #999;
        font-size: 1em;
    }
    .quote {
        font-style: italic;
        margin-top: 20px;
        color: #aaa;
    }
</style>

<br /><br />
<section id="challenge">
    <div class="row section-header has-bottom-sep" data-aos="fade-up">
        <div class="col-full">
            <h1 class="display-1 display-1--light"><div class="tektur">Looking for the<br /> <span style="color: #7f02fc; font-weight: bold; text-decoration: underline;">next</span> challenge?</div></h1>
        </div>
    </div>
    <!-- end section-header -->
<div class="main-quote-container">
        <div class="main-quote-wrapper">
            <svg class="quote-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 75">
                <text x="50%" y="50%" text-anchor="middle" fill="#730ea2" font-size="100">"</text>
            </svg>
            <p class="main-quote">
                "Since the start, we’ve been trying to build our dream rocket with our own hands: a unique mission we can discover and double-down on our talents and dare greatly alongside people just as obsessive as us. Put bluntly,
                        Elara Aerospace isn't a place for spectators. This is a place you go all-in, and get even more in return."
            </p>
            <div class="quote-author">- <b>Elara Aerospace</b>, your young team of rocket-obsessed entrepreneurs, technologists and creatives redefining how to build and launch rockets</div>
        </div>
    </div>
    <br /><br />
</section>
    
<!-- team
    ================================================== -->
<section id="team" class="s-about">
    <div class="row section-header has-bottom-sep" data-aos="fade-up">
        <div class="col-full">
            <h3 class="subhead subhead--dark">Learn, growth and inspire the next generation of rocket engineers</h3>
            <h1 class="display-1 display-1--light"><div class="tektur">Join Us</div></h1>
        </div>
    </div>
    <!-- end section-header -->


    <div class="row about-desc" data-aos="fade-up">
        <div class="col-full">
            <a href="/team/"><img src="/assets/images/join-the-team.webp" height="300" alt="Elara Aerospace Founding Team" /></a>
        </div>
    </div>
</section>

<br />
<br />

<style>
    .hubspot {
        width: 60%; /* Set a specific width */
        margin-left: auto;
        margin-right: auto;
        float: center;
        background-color: white;
    }
</style>

<!-- hubspot
    ================================================== -->
<section id="hubspot" class="hubspot">
    <div class="hubspot">
        <center>
            <img height="200px" width="200px" src="/assets/images/logo/IA Logo Final Black Framed.png" />
            <p><b>Please fill application form below to apply for a job position at Elara Aerospace</b></p>
        </center>

        <script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
        <script>
            hbspt.forms.create({
                region: "eu1",
                portalId: "143597793",
                formId: "54e8a780-8c8e-4fe8-9e42-c97ea1380f74",
            });
        </script>
    </div>
</section>

<br />
<br />

<!-- available jobs
    ================================================== -->
<section id="careers" class="s-services">
    <div class="row section-header has-bottom-sep" data-aos="fade-up">
        <div class="col-full">
            <h3 class="subhead">Choose your mission at Elara Aerospace</h3>
            <h1 class="display-2">Open Job Positions</h1>
        </div>
    </div>
    <!-- end section-header -->

    <div class="row about-desc" data-aos="fade-up">
        <div class="col-full">
            We've always got missions for the curious and daring. Tell us what you want to build with us, and we'll find you a seat.
            <br />
            <br />
        </div>
    </div>

    <hr />

    <style>
        #jobAccordion {
            width: 60%;
            margin-left: auto;
            margin-right: auto;
            font-family: Arial, sans-serif;
        }

        #jobAccordion h3 {
            position: relative; /* Ensure proper positioning for child elements */
            background-color: black;
            color: white;
            padding: 15px;
            margin: 0;
            cursor: pointer;
            border-bottom: 1px solid #333;
            transition: background-color 0.3s;
        }

        #jobAccordion h3:hover {
            background-color: #333;
        }

        #jobAccordion div {
            background-color: white;
            color: black;
            padding: 15px;
            display: none;
            border: 1px solid #ddd;
            border-top: none;
        }

        #jobAccordion p {
            margin: 10px 0;
        }

        /* Style for the category label */
        .category-label {
            float: right; /* Align it to the right */
            font-size: 0.9em; /* Adjust the font size */
            color: #555; /* Optional: Change text color */
            background-color: #f1f1f1; /* Optional: Add a background color */
            padding: 2px 8px; /* Add some padding */
            border-radius: 4px; /* Round the corners */
        }

        /* Style for filter button */
        #categoryFilter {
            margin-bottom: 20px;
            padding: 15px;
            text-align: center;
        }

        #categoryFilter label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: white;
        }

        #categorySelect {
            width: 60%;
            margin-left: auto;
            margin-right: auto;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: transparent;
            color: white;
            font-size: 16px;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
            background-repeat: no-repeat;
            background-position: right 10px top 50%;
            background-size: 12px auto;
            display: block;
        }

        #categorySelect option {
            background-color: #333;
            color: white;
        }

        #categorySelect:hover {
            border-color: #999;
        }

        #categorySelect:focus {
            outline: none;
            border-color: white;
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
        }

        @media (max-width: 768px) {
            #categorySelect {
                width: 90%;
            }
        }
    </style>

    <div id="categoryFilter">
        <label for="categorySelect">Filter by Department:</label>
        <select id="categorySelect">
            <option value="">All Departments</option>
            {% assign categories = site.data.jobs | map: "category" | uniq %} {% for category in categories %}
            <option value="{{ category }}">{{ category }}</option>
            {% endfor %}
        </select>
    </div>

    <div id="jobAccordion">
        {% if site.data.jobs %} {% for job in site.data.jobs %}
        <h3>
            {{ job.title }}
            <span class="category-label">{{ job.category }}</span>
        </h3>
        <div>
            <p><strong>Role Description:</strong> {{ job.description }}</p>
            <p><strong>Location:</strong> {{ job.location }}</p>
            <p><strong>Qualifications:</strong></p>
            <ul>
                {% for qualification in job.qualifications %}
                <li>{{ qualification }}</li>
                {% endfor %}
            </ul>
            <p><strong>Key Responsibilities:</strong></p>
            <ul>
                {% for responsibility in job.key_responsibilities %}
                <li>{{ responsibility }}</li>
                {% endfor %}
            </ul>
            <a href="https://share-eu1.hsforms.com/1VOingIyOT-ieQsl-oTgPdA2dhsrl" class="btn btn--primary">Submit your application</a>
        </div>
        {% endfor %} {% else %}
        <p>No job openings available at this time.</p>
        {% endif %}
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            $("#jobAccordion h3").click(function () {
                $(this).next("div").slideToggle("fast").siblings("div:visible").slideUp("fast");
                $(this).toggleClass("active");
                $(this).siblings("h3").removeClass("active");
            });

            $("#categorySelect").change(function () {
                var selectedCategory = $(this).val();
                if (selectedCategory === "") {
                    $("#jobAccordion h3").show();
                } else {
                    $("#jobAccordion h3").each(function () {
                        var jobCategory = $(this).find(".category-label").text();
                        if (jobCategory === selectedCategory) {
                            $(this).show();
                        } else {
                            $(this).hide();
                            $(this).next("div").hide();
                        }
                    });
                }
            });
        });
    </script>

    <br />
    <br />

    <center>
        <h3>Nothing found that fits you?</h3>
        <br />
        <a href="https://share-eu1.hsforms.com/1VOingIyOT-ieQsl-oTgPdA2dhsrl" class="btn btn--primary">Submit an unsolicited application</a>
    </center>
</section>

<!-- contact
    ================================================== -->
<style>
    .contact-section {
          background-color: #f9f9f9;
          padding: 20px;
          border: 1px solid #ddd;
          max-width: 800px;
          margin: 20px auto;
          border-radius: 8px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    
        .contact-header {
          text-align: center;
          margin-bottom: 20px;
        }
    
        .contact-header h2 {
          margin: 0;
          color: #333;
        }
    
        .contact-people {
          display: flex;
          justify-content: space-between;
          gap: 20px;
        }
    
        .contact-person {
          background-color: #fff;
          border-radius: 8px;
          padding: 15px;
          flex: 1;
          text-align: center; /* Center-align content */
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
    
        .contact-image img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          object-fit: cover;
        }
    
        .contact-info {
          margin-top: 10px; /* Space between image and text */
        }
    
        .contact-info h3 {
          margin: 5px 0;
          font-size: 1.2em;
          color: #444;
        }
    
        .contact-info a {
          color: #007BFF;
          text-decoration: none;
        }
    
        .contact-info a:hover {
          text-decoration: underline;
        }
        
        @media (max-width: 768px) {
          .contact-people {
            flex-direction: column; /* Stack contacts vertically on smaller screens */
            gap: 15px; 
          }
        }
</style>
<section id="contact" class="s-contact">

    <div class="overlay"></div>
    <div class="contact__line"></div>

    <div class="row section-header" data-aos="fade-up">
        <div class="col-full">
            <h3 class="subhead">Contact Us</h3>
            <h1 class="display-2 display-2--light">Recruiting Inquiries</h1>
        </div>
    </div>

    <div class="row contact-content" data-aos="fade-up">

        <div class="contact-section">
            <div class="contact-header">
                <h2>Human Resources Contact Persons</h2>
            </div>

            <div class="contact-people">
                <!-- Contact Person #1 -->
                <div class="contact-person">
                    <div class="contact-image">
                        <img src="/assets/images/team/uta-heldt.png" alt="Uta Heldt">
                    </div>

                    <div class="contact-info">
                        <h3>Uta Heldt</h3>
                        <p><a href="mailto:uta.heldt@elara-aerospace.com">uta.heldt@elara-aerospace.com</a></p>
                    </div>
                </div>

                <!-- Contact Person #2 -->
                <div class="contact-person">
                    <div class="contact-image">
                        <img src="/assets/images/team/adrian-leutner.png" alt="Adrian Leutner">
                    </div>

                    <div class="contact-info">
                        <h3>Adrian Leutner</h3>
                        <p><a href="mailto:adrian.leutner@elara-aerospace.com">adrian.leutner@elara-aerospace.com</a></p>
                    </div>
                </div>

            </div>
        </div>

    </div>
    <!-- end contact-primary -->

    </div>
    <!-- end contact-content -->

</section>
<!-- end s-contact -->