index.hbs

{{!--
This template is used for the index page.
It can be used also as the home page or the default page.
--}}

{{!-- This block preloads specific assets for the index page --}}
{{!-- This template is used for the index page. --}}
{{!-- This block preloads specific assets for the index page --}}
{{#contentFor "preload"}}

  <link rel="preload" href="{{asset "css/home.css"}}" as="style" />
  <link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
  <link rel="preload" href="{{asset "js/home.js"}}" as="script" />
 <link rel="preload" href="{{asset "js/lumina.js"}}" as="script" />
  <link rel="preload" href="{{asset "js/slideshow.js"}}" as="script" />
  <link rel="preload" href="{{asset "js/mousemove.js"}}" as="script" />


 <link rel="preload" href="{{asset "js/lumina.js"}}" as="script" />

  <link rel="preload" href="{{asset "js/lumina.js"}}" as="script" />


 <link rel="preload" href="{{asset "js/lumina.js"}}" as="script" />

  <link rel="preload" href="{{asset "js/slideshow.js"}}" as="script" />
  <link rel="preload" href="{{asset "js/mousemove.js"}}" as="script" />
  <link rel="preload" href="{{asset "js/modal.js"}}" as="script" />
  <link rel="preload" href="{{asset "js/echipa.css"}}" as="script" />
  <link rel="preload" href="{{asset "js/page.js"}}" as="script" />

    <link rel="preload" href="{{asset "css/home.css"}}" as="style" />
  <link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
  <link rel="preload" href="{{asset "js/home.js"}}" as="script" />



  <link rel="preload" href="{{asset "css/home.css"}}" as="style" />
  <link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
  <link rel="preload" href="{{asset "js/home.js"}}" as="script" />


    <link rel="preload" href="{{asset "css/home.css"}}" as="style" />
  <link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
  <link rel="preload" href="{{asset "js/home.js"}}" as="script" />

{{/contentFor}}

{{!-- This block loads specific styles for the index page --}}
{{#contentFor "styles"}}
  <link rel="stylesheet" type="text/css" href="{{asset "css/home.css"}}" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
  <link rel="stylesheet" href="{{asset "css/bootstrap-landing.css"}}" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{asset "css/sponsori.css"}}" media="screen" />



  <link rel="stylesheet" type="text/css" href="{{asset "css/sponsori2024.css"}}" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{asset "css/echipa.css"}}" media="screen" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

 


{{/contentFor}}

{{!-- This block contains scripts for the index page --}}
{{#contentFor "scripts"}}
  <script defer src="{{asset "js/home.js"}}"></script>

{{/contentFor}}  


{{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!< default}}

{{!-- Special header.hbs partial to generate the <header> tag --}}
{{> header background=@site.cover_image}}


<style>
  .container{
    margin-top:0;
    padding:0;
  }
</style>

<main class="main-wrap">
  

<br>
  <br>
<div>
  <div>
   <div class="container">

       {{!-- <img src="/assets/images/InfoTech1.0.png" alt="LOGO 1" class="image"> --}}

        <img src="/assets/images/InfoTech1.0.png" alt="LOGO 1" class="image logo-infotech">

        <div class="light"></div>
      </div>
  <script src="/assets/js/lumina.js"></script>
  </div>


  {{!--
 <div class="flex-container">
      <div class="container1">
        <!-- Conținutul pentru container1 -->
      </div>
      <div class="container2">
        <!-- Conținutul pentru container2 -->
      </div>
  </div>
   <div class="flex-container">
      <div class="container2">
        <!-- Conținutul pentru container1 -->
      </div>
      <div class="container1">
        <!-- Conținutul pentru container2 -->
      </div>
  </div>
  <div class="container1">
    <h2>hsdhjdsbhj</h2>
  </div>
</div>
--}}

<script src="/assets/js/mousemove.js"></script>



<br>
<br>
<hr>
<br>
<br>
<a id="About"></a>
<div style="text-align: center;">
                    <h1 class="title">About Us</h1>
</div>

<div style="text-align: justify; margin-left: 5vw; margin-right: 5vw; font-size: 20px;">
<p>Welcome to InfoTech, your gateway to career growth and practical learning in the engineering world! Powered by OSUT Cluj (Organizația Studenților din Universitatea Tehnică), InfoTech is dedicated to empowering students at UTCN with the knowledge, skills, and connections needed to thrive in the IT industry.
</p>
<br>
<p>At InfoTech, we create a supportive and engaging environment for students, with hands-on activities, career-oriented training sessions, and events like ContestNight, InfoNight, and Open Days at top companies. We host workshops led by industry professionals, offering guidance on essential skills like building resumes, acing interviews, and navigating career opportunities.
</p>
<br>
<p>Whether you're here to build technical skills, grow your network, or just explore what's possible, InfoTech is here to support you every step of the way. Join us and take the next step toward achieving your career aspirations!
</p>
</div>


<br>
<br>
<br>
<hr>
<br>
<br>

<a id="Activities"></a>
<div style="text-align: center;">
                    <h1 class="title">Events</h1>
               </div>

<div class="submenu">
        <button id="btn1" class="active" onclick="showContent('content1')">Trainings</button>
        <button id="btn2" onclick="showContent('content2')">Contest Night</button>
        {{!--<button id="btn3" onclick="showContent('content3')">InfoNight</button>--}}
    </div>

    <!-- Content area -->
    <div id="content" class="content">
        <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <h2 class="modal-content" id="img01" style="width:50%;" ></h2>
        <h1 id="modalTitle" style="text-align: center; margin-top:2vh; "></h1>
       <h2 id="modalSubtitle" style="display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto;"></h2>
       <div id="caption"></div>
      </div>

<div style="text-align: center;">
    <h2 class="register">
        <a target="_blank" href="https://forms.gle/XMmjDFFcTVvtXX8a8" style="text-decoration: none; color: inherit;">Register for "How to Interview"</a>
    </h2>
    
    </div>
  
 <div class="flex-container">
      <div class="container2" style="background-image: url('./assets/images/interview.png'); background-size: cover; background-blend-mode: lighten; text-align: center;">
    
    <h2 class="myImg" style="width: 100%; max-width: 300px;" 
        data-title="How to Interview" 
        data-subtitle="Date: November 21st, 20:00 
                       Location: OA5 - CFDP 
                       Trainer: Cristina Gogozan"
                       
        data-caption="A successful job interview can make all the difference when it comes to securing your ideal position. In this workshop, Cristina Gogozan will help you master the art of the job interview. You'll learn how to effectively prepare for interviews, including researching the company, anticipating common questions, and developing thoughtful responses. Cristina will also share strategies for building rapport with interviewers, communicating your strengths confidently, and handling tricky or unexpected questions. This interactive session will give you the practical skills and confidence needed to make a positive impression and stand out in any interview setting.">
        Read More
    </h2>
    
</div>

      <div class="container1" style="background-image: url('./assets/images/start_UP.jpg'); background-size:cover; ">
        
          <h2 class="myImg" style="width:100%;max-width:300px" data-title="How to Start a Startup" data-subtitle=
          "Date: November 7th, 18:00
          Location: OA5 - CFDP
          Trainer: Georgina Lupu (Gina) "

          data-caption="Starting your own business can be both exciting and daunting. This workshop, led by Georgina Lupu, will take you through the fundamentals of launching a startup. You’ll learn about identifying viable business ideas, developing a business plan, securing funding, and the key challenges faced by new entrepreneurs. Whether you're already working on a startup or just exploring the idea of entrepreneurship, this session will provide you with the tools and mindset needed to succeed. ">Read More</h2>
             </div>
      </div>
   <div class="flex-container">
      <div class="container1" style="background-image: url('./assets/images/CV.jpg'); background-size:cover; ">
          <h2 class="myImg" style="width:100%;max-width:300px" data-title="How to CV " data-subtitle=
          "Date: October 30th, 18:00 
          Location: A3 - CFDP 
          Trainer: Mariana Irimia " 
          data-caption="A well-crafted CV is often your first point of contact with potential employers, making it a crucial part of your job application process. In this workshop, led by Mariana Irimia, you'll learn how to structure and present your CV to highlight your most important skills and experiences. The session will cover common mistakes to avoid, tips for tailoring your CV to different industries, and how to stand out in a competitive job market. Mariana's expertise will help ensure that your CV leaves a strong impression and effectively communicates your qualifications to employers. "> Read More</h2>       
     
      </div>
      </div>
  </div>

<br>
<br>
<br>
<hr>
<br>
<br>

<a id="Echipa"></a>
               <div style="text-align: center;">
                    <h1 class="title">Meet the Team</h1>
                </div>
                
<div class="card-grid">
              <div class="container_echipa">
                        <img src="/assets/echipa/gio.png">
                        <div class="card-body">
                            <h2 class="h2">Spătăcean Giorgiana</h2>
                            <p class="role">Responsabil BC</p>
                            <div>
                                <a class="icon" href="mailto:sgiorgiana02@gmail.com"><i class="fa fa-envelope"></i></a>
                            </div>
                        </div>
                    </div>
            <div class="container_echipa">
                         <img src="/assets/echipa/tefi.png">
                        <div class="card-body">
                            <h2 class="h2">Mozacu Ștefania</h2>
                            <p class="role">Coordonator</p>
                            <div>
                               <a class="icon overlay" href="mailto:mailto:stefaniamozacu1@gmail.com">
                                    <i class="fa fa-envelope"></i></a>
                            </div>
                        </div>
                    </div>
              
               <div class="container_echipa">
                        <img src="/assets/echipa/diana.png">
                        <div class="card-body">
                            <h2 class="h2">Clim  Diana</h2>
                            <p class="role">Secretară</p>
                            <div>
                                <a class="icon" href="mailto:clim.diana2017@gmail.com "><i class="fa fa-envelope"></i></a>
                            </div>
                        </div>
                    </div>

            <div class="container_echipa">
                       <img src="/assets/echipa/sarah.png">
                        <div class="card-body">
                             <h2 class="h2">Hlușcu Sarah</h2>
                            <p class="role">Co-Coordonator</p>
                            <div>
                                <a class="icon" href="mailto:sarahcristianaa@gmail.com"><i class="fa fa-envelope"></i></a>
                            </div>
                        </div>
                    </div>

            <div class="container_echipa">
                        <img src="/assets/echipa/cata.png">
                        <div class="card-body">
                            <h2 class="h2">Livinschi Cătălina</h2>
                            <p class="role">Co-Coordonator</p>
                            <div>
                                <a class="icon" href="mailto:catalinalivinschi97@gmail.com"><i class="fa fa-envelope"></i></a>
                            </div>
                        </div>
                    </div>


           
            <div class="container_echipa">
                        <img src="/assets/echipa/daria.png">
                        <div class="card-body">
                            <h2 class="h2">Mureșan Daria</h2>
                            <p class="role">Co-Coordonator</p>
                            <div>
                                <a class="icon" href="mailto:dariamuresan100@gmail.com"><i class="fa fa-envelope"></i></a>
                            </div>
                        </div>
                    </div>

            <div class="container_echipa">
                        <img src="/assets/echipa/dutu.png">
                        <div class="card-body">
                            <h2 class="h2">Ormindean Vlad</h2>
                            <p class="role">Responsabil Tehnic</p>
                            <div>
                                <a class="icon overlay" href="mailto:ormindeanvlad@gmail.com"><i class="fa fa-envelope"></i></a>
                            </div>
                        </div>
                    </div>
         
            <div class="container_echipa">
                        <img src="/assets/echipa/ale.png">
                        <div class="card-body">
                            <h2 class="h2">Homiuc Alexandra</h2>
                            <p class="role">Responsabil PR</p>
                            <div>
                                <a class="icon overlay" href="mailto:alexandrahomiuc@gmail.com"><i class="fa fa-envelope"></i></a>
                            </div>
                        </div>
                    </div>
        
          
                    
                         
           
     
                </div>

        </div>

<br>
<br>
<br>

<hr>

<br>
<br>

<a id="Sponsors"></a>
               <div style="text-align: center;">
                    <h1 class="title">Sponsors</h1>
               </div>
    

<!-- Scrolling container -->
<div class="scroll-container">
    <div class="scroll-content" id="scrollContent">
        <img src="/assets/images/sponsori2024/arobs.png" alt="Arobs">
        <img src="/assets/images/sponsori2024/autonet.png" alt="Autonet">
        <img src="/assets/images/sponsori2024/cona.png" alt="Cona">
        <img src="/assets/images/sponsori2024/conti.png" alt="Conti">
        <img src="/assets/images/sponsori2024/emerson.png" alt="Emerson">
        <img src="/assets/images/sponsori2024/holcim.png" alt="Holcim">
        <img src="/assets/images/sponsori2024/irsap.jpg" alt="Irsap">
        <img src="/assets/images/sponsori2024/kesz.png" alt="Kesz">
        <img src="/assets/images/sponsori2024/sas.png" alt="Sas">
        <img src="/assets/images/sponsori2024/synopsys.png" alt="Synopsys">
        <img src="/assets/images/sponsori2024/yonder.png" alt="Yonder">
     <div class="scroll-spacer"></div>

    </div>
</div>

<br>
<br>
<br>
<hr>
<br>
<br>


    
  

<br>
<br>
<br>

</article>
</main> 
<script src="/assets/js/mousemove.js"></script>
<script>
    const scrollContainer = document.querySelector('.scroll-container');
    const scrollContent = document.getElementById('scrollContent');

    // Clone the content for seamless infinite scrolling
    const cloneContent = scrollContent.cloneNode(true);
    scrollContainer.appendChild(cloneContent);

    let scrollSpeed = 2.5; // Adjust the speed as needed

    function scroll() {
        // Move the scroll content to the left
        scrollContainer.scrollLeft += scrollSpeed;

        // Reset scroll position if the first set of images is completely out of view
        if (scrollContainer.scrollLeft >= scrollContent.scrollWidth) {
            scrollContainer.scrollLeft = 0;
        }

        // Continue the scrolling animation
        requestAnimationFrame(scroll);
    }

    // Start the scrolling animation
    scroll();
</script>
<script>
    // Function to update content based on the clicked submenu item
    function showContent(section) {
        const content = document.getElementById('content');
        const buttons = document.querySelectorAll('.submenu button');

        // Remove 'active' class from all buttons
        buttons.forEach(button => button.classList.remove('active'));

        // Set content based on the selected section
        if (section === 'content1') {
            content.innerHTML = `
                <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <h2 class="modal-content" id="img01" style="width:50%;" ></h2>
        <h1 id="modalTitle" style="text-align: center; margin-top:2vh; "></h1>
       <h2 id="modalSubtitle" style="display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto;"></h2>
       <div id="caption"></div>
    </div>

  
 <div class="flex-container">
      <div class="container2" style="background-image: url('./assets/images/interview.png'); background-size:cover; background-blend-mode: lighten;">
          <h2 class="myImg" style="width:100%;max-width:300px" data-title="How to Interview " data-subtitle=
          "Date: November 21st, 20:00 
           Location: OA4 - CFDP 
           Trainer: Cristina Gogozan" 
          data-caption="A successful job interview can make all the difference when it comes to securing your ideal position. In this workshop, Cristina Gogozan will help you master the art of the job interview. You'll learn how to effectively prepare for interviews, including researching the company, anticipating common questions, and developing thoughtful responses. Cristina will also share strategies for building rapport with interviewers, communicating your strengths confidently, and handling tricky or unexpected questions. This interactive session will give you the practical skills and confidence needed to make a positive impression and stand out in any interview setting. "> Read More</h2>       
     
      </div>
      <div class="container1" style="background-image: url('./assets/images/start_UP.jpg'); background-size:cover; ">
        
          <h2 class="myImg" style="width:100%;max-width:300px" data-title="How to Start a Startup" data-subtitle=
          "Date: November 7th, 18:00
          Location: OA5 - CFDP
          Trainer: Georgina Lupu (Gina) "

          data-caption="Starting your own business can be both exciting and daunting. This workshop, led by Georgina Lupu, will take you through the fundamentals of launching a startup. You’ll learn about identifying viable business ideas, developing a business plan, securing funding, and the key challenges faced by new entrepreneurs. Whether you're already working on a startup or just exploring the idea of entrepreneurship, this session will provide you with the tools and mindset needed to succeed. ">Read More</h2>
             </div>
      </div>
  </div>
   <div class="flex-container">
      <div class="container1" style="background-image: url('./assets/images/CV.jpg'); background-size:cover; ">
          <h2 class="myImg" style="width:100%;max-width:300px" data-title="How to CV " data-subtitle=
          "Date: October 30th, 18:00 
          Location: A3 - CFDP 
          Trainer: Mariana Irimia " 
          data-caption="A well-crafted CV is often your first point of contact with potential employers, making it a crucial part of your job application process. In this workshop, led by Mariana Irimia, you'll learn how to structure and present your CV to highlight your most important skills and experiences. The session will cover common mistakes to avoid, tips for tailoring your CV to different industries, and how to stand out in a competitive job market. Mariana's expertise will help ensure that your CV leaves a strong impression and effectively communicates your qualifications to employers. "> Read More</h2>       
     
      </div>
      
      </div>
  </div>
            `;
            document.getElementById('btn1').classList.add('active');
        } else if (section === 'content2') {
            content.innerHTML = `
                
             <div class="flex-container">
          <div class="container2" style="background-image: url('./assets/images/ContestNight.png'); background-size:cover; ">
        <h2 style="width:100%;max-width:300px"><a href="http://localhost:2368/contestnight/">Read More</a></h2>
             </div>
      </div>
            `;
            document.getElementById('btn2').classList.add('active');
        } else if (section === 'content3') {
            content.innerHTML = `
                <h2>InfoNight</h2>
                <p>If you're looking to grow your network or discover what your future might hold, InfoNight is a great place to start! </p>
<p>During this evening, students have the chance to engage directly with industry professionals, ask questions about internships, job openings, and company cultures, whilst expanding their knowledge on future opportunities in their fields of interest. In addition to the networking opportunities, the event will feature surprise activities designed to enrich the experience, as well as a bingo game, that will embrace the lively and interactive atmosphere during the evening, therefore encouraging students to engage with one another and win some fantastic prizes along the way.  </p>
<p>Whether you’re a freshman or close to graduation, InfoNight is your chance to discover new perspectives, meet great people, and explore exciting opportunities for your future. </p>
<h3>Why InfoNight?</h3>
<ul> 
<li><b>Make Connections:</b> Chat with industry pros and get insider tips on internships and job openings. </li>
<li><b>Expand Your Horizons:</b> Discover exciting opportunities in your field and get a glimpse of what the future holds. </li>
<li><b>Fun & Games:</b> Participate in surprise activities and a bingo game with amazing prizes waiting to be won! </li>
<li><b>Vibe & Chill:</b> Enjoy the lively atmosphere, meet new people, and build your network in a relaxed, fun setting! </li>
</ul> 
We’re here for you. Are you ready to show up for your future self? 
</p>
            `;
            document.getElementById('btn3').classList.add('active');
        }
    }
</script>
<script>
// Select modal elements
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("img01");
var modalTitle = document.getElementById("modalTitle");
var modalSubtitle = document.getElementById("modalSubtitle");
var captionText = document.getElementById("caption");

// Select all images with the class myImg
var images = document.querySelectorAll(".myImg");

// Add event listener for each image
images.forEach(function(img) {
    img.onclick = function() {
        modal.style.display = "block";
        modalImg.src = this.src;
        modalTitle.textContent = this.getAttribute("data-title");

        // Split the subtitle by newline and join as separate lines
        var subtitleText = this.getAttribute("data-subtitle").split('\n').join('<br>');
        modalSubtitle.innerHTML = subtitleText;

        captionText.textContent = this.getAttribute("data-caption");
    }
});

// Close modal when clicking the close button
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
    modal.style.display = "none";
}

// Close modal when clicking outside of it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

window.addEventListener('unload', function () {
  const modal = document.getElementById('myModal');
  if (modal.style.display === 'block') {
    // Close the modal if it's open
    modal.style.display = 'none';
    // Reset any form inside the modal
    document.getElementById('modalForm').reset();
  }
});


</script>




  
          


{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
  <script defer src="{{asset "js/home.js"}}"></script>
  {{!--<script>
  function labsFunction() {
  document.getElementById("oferts").style.display = "none";
  document.getElementById("labs").style.display = "inline";
  document.getElementById("stands").style.display = "none";
}
  function standsFunction() {
  document.getElementById("oferts").style.display = "none";
  document.getElementById("labs").style.display = "none";
  document.getElementById("stands").style.display = "inline";
}
  function ofertsFunction() {
  document.getElementById("oferts").style.display = "inline";
  document.getElementById("labs").style.display = "none";
  document.getElementById("stands").style.display = "none";
}
  </script>--}}
{{/contentFor}}