Site-Web/src/pages/index.astro

---
import MainLayout from '../layouts/MainLayout.astro';
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
---

<MainLayout title="Club Conjure - Laboratoire de médias interactifs">
  <Navigation />

  <main>
    <!-- Splash Screen Section -->
    <section class="section full-height" id="splashscreen">
      <div class="bg-img full-height full-width"></div>
      <div class="splashscreen-text-container full-width">
        <h1>Laboratoire de médias interactifs</h1>
        <div class="border-seperator"></div>
        <h2>
          <span class="year-animated" data-endvalue="2009">0000</span>
          {' - '}
          <span class="year-animated" data-delay="750">0000</span>
        </h2>
      </div>
    </section>

    <!-- About Section -->
    <section class="section" id="apropos">
      <h2>Qui sommes-nous ?</h2>
      <div class="columns is-centered">
        <div class="column is-three-quarters-desktop is-full-tablet">
          <div class="columns is-centered">
            <div class="column is-one-third-tablet is-full-mobile">
              <img class="is-quarter" src="/img/learn.png" alt="Apprendre" />
              <h3>Apprendre</h3>
              <p>
                En plus d'avoir des membres avec de l'expérience dans l'industrie, nous offrons à nos membres une
                multitude de formations sous différents langages et disciplines, dont une formation intégrale pour
                Unreal Engine et les conférences au MIGS.
              </p>
            </div>
            <div class="column is-one-third-tablet is-full-mobile">
              <img class="is-quarter" src="/img/remote.png" alt="Équipement" />
              <h3>Équipement</h3>
              <p>
                Le club offre aux membres tout l'équipement nécessaire pour produire vos jeux. Cela inclut une
                installation complète de réalité virtuelle.
              </p>
            </div>
            <div class="column is-one-third-tablet is-full-mobile">
              <img class="is-quarter" src="/img/medal.png" alt="Compétitions" />
              <h3>Compétitions</h3>
              <p>
                En tant que membres, vous serez accommodés pour les divers compétitions et événement que le club
                permet d'assister. Cela donne accès à diverses opportunités de réseautage.
              </p>
            </div>
          </div>
          <div class="columns is-centered">
            <div class="column is-half-tablet is-hidden-mobile sub-section-contact">
              <h3>Contactez-nous</h3>
              <iframe
                width="500"
                height="600"
                src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJB5eDqmAayUwR9kVcpBmnMrc&key=AIzaSyDa73RDd5rn0c6jqn8nAXKh01L8NfrQGQM"
                allowfullscreen></iframe>
              <address>
                1219 William, Montreal<br />
                Local D-2020<br />
                <a href="mailto:conjure@ens.etsmtl.ca">conjure@ens.etsmtl.ca</a><br />
              </address>
            </div>
            <div class="column is-half-tablet is-full-mobile sub-section-members">
              <h3>Membres</h3>
              <p>
                Vous êtes étudiant ou étudiante à l'ÉTS et vous êtes intéressé au développement de médias
                interactifs / jeux vidéos ? Venez au local pour nous parler. On vous donnera un laboratoire de
                bienvenue qui vous donnera les outils nécessaires pour vous débrouiller dans le domaine.
                N'hésitez pas à nous poser des questions. Une fois le laboratoire remis, vous aurez une formation
                nécessaire fournie par l'école et vous serez membres à part entière. Vous aurez finalement accès à
                tous les avantages d'être dans notre club.
              </p>
              <p>
                Les membres ont accès à des formations en ligne et d'autres fournies par nos commanditaires. De
                plus, ils ont accès à notre équipement pour faire leurs différents projets. Une fois par année, on
                organise un événement servant à mettre en valeur le travail fourni par les membres où on invite les
                recruteurs des compagnies en jeux vidéos pour qu'ils puissent vous connaitre ainsi que vous donner
                une chance de faire des contactes dans l'industrie et de trouver des stages plus facilement.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Activities Section -->
    <section class="section" id="activites">
      <div class="full-height full-width columns is-full sub-section">
        <div class="bg-img gala-img full-height full-width"></div>
        <div class="headline">
          <h2>Gala Conjure</h2>
          <p>
            Le gala est une activité annuelle permettant aux membres du club de présenter sur quoi ils ont
            travaillé durant l'année aux différentes compagnies du domaine. L'événement se présente sous forme de
            5 à 8 dans les alentours du début du mois d'octobre. Tous les gens du domaine du jeu vidéo sont
            invités à venir voir les efforts mis par la relève.
          </p>
          <a href="mailto:conjure@ens.etsmtl.ca"
            ><button class="button is-gala-btn is-info is-outlined is-medium"
              >En savoir plus, contactez-nous</button
            ></a
          >
        </div>
      </div>
      <div class="full-height full-width is-full columns animation-inversed sub-section">
        <div class="column full-height no-spacing">
          <div class="bg-img mtlgj-img full-height full-width"></div>
          <div class="headline is-headline-inversed">
            <h2>Montréal Game Jam</h2>
            <p>
              Le Montréal Game Jam est le chapitre montréalais pour le Global Game Jam. Cet événement
              international donne comme défi aux participants de réaliser un prototype de jeu basé sur une
              thématique spécifique pendant une période de 48 heures.
            </p>
            <button class="button is-mtlgj-btn is-info is-hidden-mobile is-outlined is-medium"
              >En savoir plus</button
            >
          </div>
        </div>
        <div class="content column is-one-quarter-fullhd is-two-fifths-desktop is-half-tablet is-three-quarters-mobile full-height">
          <img alt="Montreal Game Jam Logo" src="/img/MTLGJ-Logo.jpg" />
          <p>
            L'organisation du Montreal Game Jam est constituée de l'union de multiples universités et
            professionnels de Montréal dont le mandat commun est de promouvoir l'industrie du jeu vidéo.
          </p>
          <p>
            Nous rassemblons étudiants et professionnels pour stimuler la création et l'expérimentation de
            nouvelles idées et concepts. Nous voulons renforcer la collaboration avec la communauté du jeu et
            ainsi offrir la possibilité de créer de nouveaux liens à travers cet événement. C'est en supportant
            le développement de cette communauté que nous pourrons renforcer l'expertise générale. Considérant la
            forte présence médiatique, nos partenaires pourront ainsi démontrer leur intérêt à promouvoir la
            culture du jeu. C'est le temps de découvrir de nouveaux talents, de cultiver de nouvelles idées et de
            former de nouveaux liens.
          </p>
          <p>
            Que les participants soient à l'université ou de l'industrie, l'événement offre la possibilité de
            briser cette barrière et ainsi collaborer. Nous voulons surtout que vous ayez du plaisir à accomplir
            ce défi et réaliser ce qui vous passionne!
          </p>
          <p>
            Plus d'information sur le site du <a href="http://mtlgj.org/lang/fr/index.html">Montreal Game Jam</a>
          </p>
          <div>
            <button class="button is-mtlgj-btn is-info is-hidden-mobile is-outlined is-medium">Fermer</button>
          </div>
        </div>
      </div>
    </section>

    <!-- Competitions Section -->
    <section class="section" id="competitions">
      <h2>Compétitions</h2>
      <div class="border-seperator"></div>
      <div class="columns is-centered">
        <div class="slider column is-three-fifths-tablet is-four-fifths-mobile">
          <div class="slider-item">
            <img src="/img/competitions/CreativeJam.png" alt="Logo Creative Jam" />
          </div>
          <div class="slider-item">
            <img src="/img/competitions/GamelabUbisoft.png" alt="Logo Concours Universitaire Ubisoft" />
          </div>
          <div class="slider-item">
            <img src="/img/competitions/LudumDare.png" alt="Logo Ludum Dare" />
          </div>
          <div class="slider-item">
            <img src="/img/competitions/McGameJam.png" alt="Logo McGill Game Jam" />
          </div>
          <div class="slider-item">
            <img src="/img/competitions/PixelChallenge.png" alt="Logo Pixel Challenge Québec" />
          </div>
          <div class="slider-item">
            <img src="/img/competitions/GameJamBattle.png" alt="Logo Creative Jam" />
          </div>
        </div>
      </div>
    </section>

    <!-- Partners Section -->
    <section class="section" id="partenaires">
      <h2>Partenaires</h2>
      <div class="border-seperator"></div>
      <div class="columns is-full full-width sub-section is-centered">
        <div class="imq-section column is-two-fifths is-8-tablet is-full-mobile">
          <div class="grid columns is-multiline">
            <a
              class="column is-one-third-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
              target="_blank"
              href="https://www.etsmtl.ca"
              ><img class="" src="/img/sponsors/ETS-color.png" alt="Logo École de technologie supérieure"
              /></a
            >
            <a
              class="column is-one-third-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
              target="_blank"
              href="https://lanets.ca"
              ><img class="" src="/img/sponsors/LanETS-black.png" alt="Logo LanETS"
              /></a
            >
            <a
              class="column is-one-third-widescreen is-one-third-desktop is-one-third-tablet is-half-mobile"
              target="_blank"
              href="https://www.aeets.com/"
              ><img class="" src="/img/sponsors/AEETS-color.png" alt="Logo AEETS-color"
              /></a
            >
          </div>
        </div>
      </div>
    </section>
  </main>

  <Footer />
</MainLayout>

<script>
  import { initCarousel, animateNumbers, setupActivityButtons } from '../scripts/app';

  // Initialize carousel
  initCarousel();

  // Animate year numbers
  document.querySelectorAll('.year-animated').forEach((item) => {
    animateNumbers(item);
  });

  // Setup activity buttons
  setupActivityButtons();
</script>