partners.html

---
layout: default
title: Our Partners
permalink: /partners/
header-title: Our Partners
header-desc: "We are backed by a large network of academic institutions and our industrial partners. Especially, we receive strong support from the Technical University of Munich (TUM), whose president, Prof. Dr. Thomas F. Hofmann, is our project patron, and the Munich University of Applied Sciences (HM) with its highly practice-orientated programs."
header-image: /assets/images/robert-stump-bwpgwJesFhw-unsplash.jpg
header-image-height: 2000
header-image-width: 3000
scroll-link: "#list"
first-button: "<a href='/pitch/' class='btn btn--primary'>Become Partner</a>"
second-button: "<a href='#list' class='smoothscroll btn btn--stroke'>Learn More</a>"
---

<!-- clients
    ================================================== -->
<section id="list" class="s-clients">
    <div class="row section-header" data-aos="fade-up">
        <div class="col-full">
            <h3 class="subhead">Our Partners</h3>
            <h1 class="display-2">Elara Aerospace has been honored to partner up with these partners</h1>
        </div>
    </div>
    <!-- end section-header -->

    <style>
        /* Popup CSS */
        .popup {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1000; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0, 0, 0); /* Fallback color */
            background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
        }

        .popup-title {
            color: black;
        }

        .popup-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* Additional styling for gallery */
        .gallery img {
            cursor: pointer;
            margin: 10px;
            width: 100px; /* Adjust size as needed */
            width: 300px; /* Set width to 300px */
            height: 300px; /* Set height to 300px */
        }
    </style>

    <!-- Gallery Section -->
    <div class="row clients-outer" data-aos="fade-up">
        <div class="col-full">
            {% assign grouped_companies = site.data.companies | group_by: "category" %} {% for category in grouped_companies %}
            <h2>{{ category.name }}</h2>
            <div class="responsive">
                <div class="gallery">
                    {% for company in category.items %}
                    <img src="{{ company.logo }}" alt="{{ company.name }}" data-company="{{ company.name }}" data-info="{{ company.info }}" data-url="{{ company.url }}" class="company-logo" /> {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Popup Section -->
    <div id="popup" class="popup">
        <div class="popup-content">
            <span class="close">&times;</span>
            <h2 class="popup-title" id="companyName"></h2>
            <p id="companyInfo"></p>
            <a id="companyLink" href="#" target="_blank" class="btn btn--primary">Visit Website</a>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const popup = document.getElementById("popup");
            const closeBtn = document.querySelector(".close");

            // Function to sanitize URL
            function sanitizeUrl(url) {
                const urlPattern = /^(?:https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,63})([\/\w .-]*)\/?$/;
                return urlPattern.test(url) ? url : "#";
            }

            // Function to sanitize text content
            function sanitizeText(text) {
                const div = document.createElement("div");
                div.textContent = text;
                return div.innerHTML;
            }

            document.querySelectorAll(".company-logo").forEach((item) => {
                item.addEventListener("click", function () {
                    const companyName = sanitizeText(this.getAttribute("data-company"));
                    const companyInfo = sanitizeText(this.getAttribute("data-info"));
                    const companyUrl = sanitizeUrl(this.getAttribute("data-url"));

                    document.getElementById("companyName").textContent = companyName;
                    document.getElementById("companyInfo").textContent = companyInfo;
                    document.getElementById("companyLink").href = companyUrl;

                    popup.style.display = "block";
                });
            });

            closeBtn.onclick = function () {
                popup.style.display = "none";
            };

            window.onclick = function (event) {
                if (event.target == popup) {
                    popup.style.display = "none";
                }
            };
        });
    </script>
</section>
<!-- end s-clients -->

<!-- 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">Interested in becoming a Partner?</h1>
        </div>
    </div>

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

        <div class="contact-section">
            <div class="contact-header">
                <h2>Sponsor Management</h2>
            </div>

            <div class="contact-people">
                <!-- Contact Person #1 -->
                <div class="contact-person">
                    <div class="contact-image">
                        <img src="/assets/images/team/tom-reinhardt.png" alt="Tom Luca Reinhardt">
                    </div>

                    <div class="contact-info">
                        <h3>Tom Luca Reinhardt</h3>
                        <p><a href="mailto:tomluca.reinhardt@elara-aerospace.com">tomluca.reinhardt@elara-aerospace.com</a></p>
                    </div>
                </div>

                <!-- Contact Person #2 -->
                <div class="contact-person">
                    <div class="contact-image">
                        <img src="/assets/images/team/tobias-jäger.png" alt="Tobias Jäger">
                    </div>

                    <div class="contact-info">
                        <h3>Tobias Jäger</h3>
                        <p><a href="mailto:tobias.jager@elara-aerospace.com">tobias.jager@elara-aerospace.com</a></p>
                    </div>
                </div>

            </div>
        </div>

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

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

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