correction logiciels artist

components/About/Agenda.vue

@@ -0,0 +1,301 @@
+<template>
+  <LayoutContainer :overflow="false">
+    <v-row>
+      <v-col cols="4">
+        <h2 class="title">L'agenda Opentalent</h2>
+      </v-col>
+
+      <v-col cols="4">
+        <div class="d-flex justify-center align-center">
+          <div class="carousel-button" @click="goPrevious">
+            <i class="fas fa-chevron-left"></i>
+          </div>
+          <div class="carousel-button" @click="goNext">
+            <i class="fas fa-chevron-right"></i>
+          </div>
+        </div>
+      </v-col>
+
+      <v-col cols="4">
+        <v-btn class="btn-news" text>VOIR TOUTES LES ACTUALITÉS</v-btn>
+      </v-col>
+    </v-row>
+
+    <p class="agenda-details">
+      Retrouvez tous les évènements culturels autour de chez vous.
+    </p>
+
+    <v-row>
+      <v-col cols="12">
+        <Carousel
+          :itemsToShow="3"
+          :itemsToScroll="2"
+          v-slot="{ carousel: _carousel }"
+          ref="carousel"
+        >
+          <Slide
+            class="slide-card"
+            v-for="(event, index) in events"
+            :key="index"
+          >
+            <div class="card">
+              <img class="card-img-top" :src="event.img" alt="Card image cap" />
+              <div class="card-body">
+                <small class="card-rdv">{{ event.rdv }}</small>
+                <h5 class="card-title">{{ event.title }}</h5>
+                <p class="card-localisation">{{ event.localisation }}</p>
+              </div>
+
+              <div class="card-footer">
+                <v-chip-group active-class="primary--text" column>
+                  <v-chip
+                    v-for="(tag, index) in event.tags"
+                    :key="index"
+                    class="ma-2 chip-custom"
+                    :color="tagColor(tag)"
+                    label
+                  >
+                    <span :class="tagTextColor(tag)">{{ tag }}</span>
+                  </v-chip>
+                </v-chip-group>
+              </div>
+            </div>
+          </Slide>
+        </Carousel>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { Carousel, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
+const tagColor = (tag) => {
+  switch (tag) {
+    case "Payant":
+      return "red";
+    case "Gratuit":
+      return "green";
+    default:
+      return "primary";
+  }
+};
+
+const tagTextColor = (tag) => {
+  switch (tag) {
+    case "Payant":
+      return "red--text";
+    case "Gratuit":
+      return "green--text";
+    default:
+      return "black--text";
+  }
+};
+const events = ref([
+  {
+    rdv: "20h00",
+    title: "LA NUIT DES RÊVES  ",
+    localisation: "FESTIVALDE musique - LONGCHAMP",
+    date: "21/06/2023",
+    img: "/images/agenda/agenda2.jpg",
+    tags: ["Festival", "Musique", "Tout public", "Payant"],
+  },
+  {
+    rdv: "20h00",
+    title: "LE LAC DES CYGNES",
+    localisation: "SPECTACLE DE DANSE - PARIS 1",
+    date: "22/06/2023",
+    img: "/images/agenda/agenda3.jpg",
+    tags: ["Festival", "Musique", "Tout public", "Gratuit"],
+  },
+  {
+    rdv: "20h00",
+    title: "SOLIDAYS 2023  : 23 > 25 juin",
+    localisation: "ORCHESTRE DE PARIS - PARIS 12",
+    date: "23/06/2023",
+    img: "/images/agenda/agenda4.jpg",
+    tags: ["Festival", "Musique", "Tout public", "Payant"],
+  },
+  {
+    rdv: "20h00",
+    title: "LE LAC DES CYGNES",
+    localisation: "FESTIVALDE musique - LONGCHAMP",
+    date: "24/06/2023",
+    img: "/images/agenda/agenda5.jpg",
+    tags: ["Festival", "Musique", "Tout public", "Payant"],
+  },
+  {
+    rdv: "20h00",
+    title: "SOLIDAYS 2023  : 23 > 25 juin ",
+    localisation: "SPECTACLE DE DANSE - PARIS 1",
+    date: "20/06/2023",
+    img: "/images/agenda/agenda1.jpg",
+    tags: ["Festival", "Musique", "Tout public", "Payant"],
+  },
+]);
+
+let carousel;
+
+const goPrevious = () => carousel.prev();
+const goNext = () => carousel.next();
+</script>
+
+<style scoped>
+.green--text {
+  color: green;
+}
+
+.red--text {
+  color: red;
+}
+.black--text {
+  color: black;
+}
+.btn-news {
+  color: #9edbdd;
+  border-radius: 2rem;
+  font-family: "Barlow";
+  background: transparent;
+  border: 1px solid #9edbdd;
+  border-radius: 6px;
+  font-style: normal;
+  font-weight: 600;
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 25px;
+  font-size: 10px;
+  line-height: 15px;
+}
+.chip-detail {
+  color: #000000;
+}
+.chip-custom {
+  color: white;
+  border: 1px solid #0e2d32;
+  border-radius: 3rem;
+  text-transform: uppercase;
+  font-family: "Barlow";
+  font-style: normal;
+  display: flex;
+  align-items: center;
+  text-align: center;
+}
+
+.card-localisation {
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  font-size: 10px;
+  color: #112528;
+}
+.card {
+  border-radius: 15px 15px 0 0;
+  margin-bottom: 2rem;
+  width: 90%;
+}
+
+.icon-title {
+  color: #64afb7;
+  margin-top: 4.5rem;
+}
+.container-title {
+  display: flex;
+  align-items: center;
+  margin-left: 2rem;
+  margin-top: 4.5rem;
+}
+
+.carousel-button i {
+  color: #000000;
+}
+.card-text {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 18px;
+  margin-bottom: 1rem;
+  color: #091d20;
+}
+.card-title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+.card-date {
+  font-size: 0.8em;
+  color: #888;
+  margin-left: 1rem;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-body {
+  text-align: left;
+  margin-bottom: 1rem;
+  margin-left: 1rem;
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  color: #112528;
+}
+
+.card-img-top {
+  border-radius: 9px 9px 0 0;
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.title,
+.carousel-button,
+.btn-news {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+.agenda-details {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 20px;
+  margin-left: 2rem;
+  color: #091d20;
+  margin-bottom: 3rem;
+  width: 15rem;
+}
+.title {
+  font-family: "Barlow";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 42px;
+  line-height: 42px;
+  margin-left: 2rem;
+  color: #071b1f;
+}
+
+.carousel-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  background-color: transparent;
+  border: 2px solid #000000;
+  cursor: pointer;
+  margin-right: 1rem;
+}
+</style>

components/Logiciels/Artist/MenuScroll.vue

@@ -0,0 +1,70 @@
+<template>
+  <LayoutContainer>
+    <v-row>
+      <v-col cols="12" class="menu-container">
+        <div v-for="menu in menus" :key="menu.label" @click="navigate(menu)">
+          <v-chip v-if="activeMenu === menu.label" class="active-menu">{{
+            menu.label
+          }}</v-chip>
+          <span v-else>{{ menu.label }}</span>
+        </div>
+      </v-col>
+    </v-row>
+  </LayoutContainer>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const menus = [
+  { label: 'Presentation' },
+  { label: 'Avantages' },
+  { label: 'Fonctionnalites' },
+  { label: 'Comparatif' },
+  { label: 'Contact' },
+  { label: 'Accompagnement' },
+  { label: 'Temoignages' },
+  { label: 'Aide' }
+];
+
+const activeMenu = ref(menus[0].label);
+
+const navigate = (menu) => {
+  activeMenu.value = menu.label;
+  const element = document.getElementById(menu.label);
+  if (element) {
+    element.scrollIntoView({ behavior: "smooth" });
+  }
+};
+</script>
+
+<style scoped>
+.menu-container {
+  display: flex;
+  justify-content: space-around;
+  padding: 1rem 10rem;
+  background: white;
+  color: #bbb8b8;
+  font-family: "Barlow";
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  border-bottom: 0.1rem solid #eaeaea;
+}
+
+.v-chip.active-menu {
+  background: black;
+  color: white;
+}
+
+.menu-container div:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+
+</style>