<script setup>
import LinkButton from "../LinkButton.vue";
import RedirectLogo from "../../assets/icons/redirect.svg";
</script>

<template>
  <div class="flex flex-col h-[75vh] w-full bg-black overflow-hidden relative items-center justify-center sm:px-20 md:px-50 lg:px-60 xl:px-96 px-10">
    <p class="text-6xl font-extrabold text-white pb-8 z-10">JustMusic</p>
    <p class="md:text-xl text-md font-light text-white text-center z-10">
      Avec un ami, j'ai développé l'application justMusic, un réseau social captivant qui combine musique et vie
      quotidienne. Sur cette application, vous êtes invité à poster une "capsule" par jour, composée d'une musique et
      d'un selfie de vous.
    </p>
    <div class="flex scale-90 sm:scale-100 flex-row gap-3 pt-12 flex-wrap items-center justify-center z-10">
      <LinkButton class="text-sm" url="https://www.figma.com/design/DNjFgso8otcul2ApCEHPvm/justMusic?node-id=410-269&t=MLIwBBtJOY57pGE1-1">
        Figma
        <RedirectLogo/>
      </LinkButton>
      <LinkButton class="text-sm" url="https://github.com/WINK3R/justMusic">
        GitHub
        <RedirectLogo/>
      </LinkButton>
    </div>
    <router-link to="/">
      <img src="/images/back-button.png" class="absolute z-10 top-0 left-0 p-10 scale-25 hover:scale-35 ease-in-out transition-all"/>
    </router-link>
    <img src="/images/projects/justmusic/justmusic-banner.png" class="opacity-10 absolute z-0 pointer-events-none h-[75vh] w-full object-cover"/>
  </div>
  <div class="bg-white w-full sm:px-20 md:px-50 lg:px-60 xl:px-80 px-10 py-20 transition-all flex flex-col gap-20 pb-36 items-center relative">
    <img src="/images/projects/justmusic/logo.png" class=" absolute z-0 pointer-events-none w-20 -top-12 left-20 border-white border-2 rounded-lg"/>
    <img src="/images/projects/justmusic/justmusic-banner.png" class="pointer-events-none rounded-md"/>
    <p class="text-xl font-normal text-black">
      JustMusic est un projet passionnant qui m'a beaucoup appris en matière de design et de développement. J'ai conçu
      les maquettes de JustMusic sur Figma, disponibles ci-dessus. Nous avons imaginé un réseau social axé sur la
      musique, permettant de partager avec ses amis et son groupe des morceaux qui nous tiennent à cœur. Accompagné
      d'un selfie pris sur le vif, vous pouvez partager à tout moment de la journée votre moment favori et interagir
      avec les autres utilisateurs.
    </p>
    <div class="flex flox-row w-full justify-between overflow-scroll overflow-y-hidden">
      <img src="/images/projects/justmusic/justmusic-1.png" class="pointer-events-none w-52 object-contain"/>
      <img src="/images/projects/justmusic/justmusic-4.png" class="pointer-events-none w-52 object-contain"/>
      <img src="/images/projects/justmusic/justmusic-2.png" class="pointer-events-none w-52 object-contain"/>
      <img src="/images/projects/justmusic/justmusic-3.png" class="pointer-events-none w-52 object-contain"/>
    </div>
    <p class="text-xl font-normal text-black">
      D'un point de vue technique, nous avons utilisé le framework Flutter pour développer deux applications, une
      pour iOS et une pour Android, à partir d'un seul code source. Nous avons également utilisé Firebase pour la
      gestion des utilisateurs et des données. Enfin, pour trouver les titres musicaux, obtenir leurs informations
      et les lire directement dans l'application, nous avons intégré l'API de Spotify.
      <br/><br/>
      Nous avons publié cette application sur le Google Play Store et espérons, un jour, reprendre le projet pour le
      faire connaître au plus grand nombre.
    </p>
    <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FDNjFgso8otcul2ApCEHPvm%2FjustMusic%3Fnode-id%3D410-269%26t%3DMLIwBBtJOY57pGE1-1" allowfullscreen></iframe>  </div>
</template>

<style scoped>

</style>