ajout de strapi

app/components/button_link.vue

@@ -0,0 +1,30 @@
+<template>
+    <NuxtLink :to="to" :class="['btn', variantClass]">
+        <slot />
+    </NuxtLink>
+</template>
+
+<script setup>
+    // defineProps() sert à déclarer les propriétés (props) que ton composant peut recevoir depuis l’extérieur.
+    // “Ce composant attend certains paramètres qu’on lui passera.”
+    const props = defineProps({
+        to: {
+            type: String,
+            required: true
+        },
+        variant: {
+            type: String,
+            default: 'primary'
+        }
+    })
+
+    // la fonction computed sert a se synchroniser chaque fois que la props variant change, ce rend dynamique la mise à jour de la variable, cela s'appelle une propriété calculée
+
+    const variantClass = computed(() => {
+      return `btn--${props.variant}`
+    })
+</script>
+
+<style>
+
+</style>

app/components/header_content.vue

@@ -0,0 +1,77 @@
+<script setup>
+  defineProps({
+    logoSrc: {
+      type: String,
+      required: true
+    },
+    logoAlt: {
+      type: String,
+      required: true
+    },
+    imgAgendaSrc: {
+      type: String,
+      required: true
+    }
+  })
+</script>
+
+<template>
+  <div class="header_navigation">
+
+    <div class="height_10"></div>
+
+    <nav class="header_navigation_topbar">
+      <div class="header_nav_item">Professionnels</div>
+      <div class="header_nav_item header_nav_lang">
+        <div class="header_nav_lang_item">FR</div>
+        <div class="header_nav_lang_item">/</div>
+        <div class="header_nav_lang_item">EN</div>
+      </div>
+    </nav>
+
+    <div class="height_20"></div>
+
+    <div class="header_navigation_main">
+      <div class="header_nav_logo">
+        <NuxtImg
+          :src="logoSrc"
+          :alt="logoAlt"
+          class="logo-img"
+        />
+      </div>
+      <nav class="header_nav_cont">
+
+        <div class="header_nav">
+          <div class="header_nav_item brandontext_bold">
+            <NuxtLink to="/">L'Orchestre</NuxtLink>
+          </div>
+          <div class="header_nav_item">
+            <NuxtLink to="/agenda">Concerts</NuxtLink>
+          </div>
+          <div class="header_nav_item brandontext_bold">
+            <NuxtLink to="/agenda">Éducation et médiation</NuxtLink>
+          </div>
+          <div class="header_nav_item">
+            <NuxtLink to="/agenda">Mécénat</NuxtLink>
+          </div>
+          <div class="header_nav_item">
+            <NuxtLink to="/agenda">
+              <div class="nav_icone">
+                <div class="nav_icone_img"><img :src="imgAgendaSrc" alt="icone agenda"></div>
+                <div>Agenda</div>
+              </div>
+            </NuxtLink>
+          </div>
+        </div>
+
+      </nav>
+    </div>
+
+    <div class="height_25"></div>
+
+  </div>
+</template>
+
+<style>
+
+</style>

app/components/header_full.vue

@@ -0,0 +1,36 @@
+<script setup>
+    import agenda from '@/assets/img/icones/agenda_rouge_fonce_blanc.svg'
+</script>
+
+<template>
+
+    <div class="header_full">
+
+        
+        <header_content 
+            logo-src="/img/logos/logo_blanc_rouge.png"
+            logo-alt="Logo de l'orchestre National d'Île-de-france en concert"
+            :img-agenda-src="agenda"
+        />
+        
+        <div class="obscur"></div>
+
+        <div class="header-img_cont">
+            <NuxtImg
+                src="/img/photos/zaho.jpg"
+                placeholder
+                preset="full"
+                alt="L'orchestre National d'Île-de-france en concert - vue d'ensemble"
+                class="header-img"
+            />
+        </div>
+
+        <div class="header-img_text">
+            <div class="header-img_titre">ZAHO DE SAGAZAN</div>
+            <div class="header-img_description">Accompagnée par l’Orchestre national d’Île-de-France dirigé par Dylan Corlay, Zaho de Sagazan revisite les chansons de son premier album pour les plonger dans une toute nouvelle dimension !</div>
+            <div class="decouvrir"><div class="decouvrir_icone"><img src="@/assets/img/icones/fleche_gris_blanc.svg" alt="icone flèche"></div><div class="decouvrir_texte">Découvrir</div></div>
+        </div>
+
+
+    </div>
+</template>

app/components/test.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <p>Premier component</p>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>

app/components/testcomponentpage.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <p>
+      mon premier component de page
+    </p>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>