Crée un article en vuejs avec le format vuejs suivant : 


<!-- voici d'autres instructions à prendre en compte : 
- Prend un style plus engageant et direct pourrait rendre le message plus percutant
- explique les termes pour clarifier les propos techniques.
- pour chaque partie rajoute une image percutante pour faciliter la compréhension du sujet
- remplace les titre et sous titre, débuté, le contenu du tableau "Comparison Table" et les différentes step pour traiter le script / texte_1. Les step doivent contenir aux moins 400 mots et doivent avoir un style de copywiter, saute des lignes pour que l'article soit agréable à lire.
- tu peux ajouter des informations pertinente et des références à des articles de lois 
- remplace le contenu de la partie "Circular Diagram Section" pour correspondre au sujet principal du scripter / texte_1
- change également dans la partie meta: la date pour mettre celle du jour et le label pour reprendre un titre accrocheur et optimiser pour le SEO
- introduit la vidéo en expliquant brièvement ce qu'elle apporte (il s'agit d'élement de l'article) qui a pour class : video-viewer-->  
<template>
  <div>
    <!-- Header Section -->
    <header>
      <div class="container">
        <div class="row">
          <div class="col-8" style="text-align: left;">
            <RouterLink to="/">
              <h1 style="color:green;font-weight: bold;">TARGET <span style="color:red;font-weight: bold;">MANIA</span></h1>
            </RouterLink>
          </div>
        </div>
      </div>
    </header>

    <!-- Main Content Section -->
    <div class="container">
      <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
          <br><br><br>
          <h1> TITRE </h1><br><br>
          <h2> SOUS TIRRE</h2>
          <p>
            début
          </p>
          <br><br><br><br>

          <!-- Circular Diagram Section -->
          <div class="circle-container">
            <!-- Step1 -->
            <div class="box fees">
              <h3>💸 Step1</h3>
              <ul>
                <li>Step1 titre 1</li>
                <li>Step1 titre 2</li>
                <li>Step1 titre 3</li>
              </ul>
            </div>

            <!-- Step2 -->
            <div class="box accessibility">
              <h3>🌍 Step2</h3>
              <ul>
                <li>Step2 titre 1</li>
                <li>Step2 titre 2</li>
                <li>Step2 titre 3</li>
              </ul>
            </div>

            <!-- Step3 -->
            <div class="box security">
              <h3>🔒 Step3</h3>
              <ul>
                <li>Step3 titre 1</li>
                <li>Step3 titre 2</li>
                <li>Step3 titre 3</li>
              </ul>
            </div>

            <!-- Step4 -->
            <div class="box flexibility">
              <h3>🔧 Step4</h3>
              <ul>
                <li>Step4 titre 1</li>
                <li>Step4 titre 2</li>
                <li>Step4 titre 3</li>
              </ul>
            </div>

            <!-- Cercle englobant -->
            <div class="circle-outline"></div>

          </div>

          <br><br>
          
          <section>
		  <h2>1. Step1</h2>
           content 1
          </section>

          
          <section>
		  <h2>2.Step2 </h2>
            content 2
          </section>

		  <!-- ne retire pas cette partie-->
          <div class="video-viewer">
            <div ref="player"></div>
          </div>
<br><br>
<br><br>

          
          <section>
		  <h2>3. step3</h2>
            content 3
          </section>


<br><br>
          Si vous débutez dans l’investissement et préférez des options régulées, éprouvées depuis des années, jetez un coup d'œil à ce tableau comparatif.<br><br>
          <!-- Comparison Table -->
          <DisclaimerComponent />

          
          <section>
		  <h2>4.Step4</h2>
            content 4
          </section>


          
          <section>
		  <h2>5.Step5</h2>
            content 5
          </section>
		  
		
          <section>
		  <h2>6.Step6</h2>
            content 6
          </section>

		
          <section>
		  <h2>7.Step7</h2>
            content 7
          </section>

			<!-- Comparison Table -->
          <!--InvestmentComparison /-->

          <h2>Conclusion</h2>
          <p>
            conclusion content
          </p>

          <!--p>Si vous avez des questions, n’hésitez pas à nous rejoindre sur notre <a href="https://t.me/targetmania">canal Telegram TargetMania</a> pour échanger avec la communauté.</p-->
          <JoinCommunity/><br><br><br><br><br>

        </div>
        <div class="col-md-1"></div>
      </div>
    </div>
  </div>
</template>

<script>
import DisclaimerComponent from '@/components/disclaimer.vue';
import JoinCommunity from '@/components/JoinCommunity.vue';
import InvestmentComparison from '@/components/InvestmentComparison.vue';

export default {
  name: 'choisirCTO',
  components: {
    DisclaimerComponent,JoinCommunity
  }
  ,data() {
    return {
      date: '2024-09-30', //met à jour cette date avec la date actuel sans utiliser un script
      routePath: '/choisir-cto', //met à jour le route path en optimisant le SEO
	  theme:'', //en fonction de la thématique classe dans realT / ETF / or / btc-crypto
      player: null, // Pour stocker l'instance du lecteur YouTube
      videoId: "MuIIHnyGly8", // ID de la vidéo YouTube à afficher MuIIHnyGly8
    };
  },
  meta: {
    date: '2024-09-30', //met à jour cette date avec la date actuel sans utiliser un script
    label: 'Choisir le bon CTO pour l’indépendance financière', //met à jour ce titre en optimisant le SEO
  }
  ,methods: {
    loadYouTubePlayer() {
      if (window.YT) {
        this.createPlayer();
      } else {
        window.onYouTubeIframeAPIReady = () => {
          this.createPlayer();
        };
        const tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        const firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      }
    },
    createPlayer() {
      this.player = new YT.Player(this.$refs.player, {
        videoId: this.videoId,
        width: "560",
        height: "315",
        events: {
          onReady: this.onPlayerReady,
          onError: this.onPlayerError,
        },
      });
    },
    onPlayerReady(event) {
      console.log("Player is ready", event);
    },
    onPlayerError(event) {
      console.error("Error occurred", event);
    },
  } 
  ,mounted() {
    this.loadYouTubePlayer(); // Charger le lecteur vidéo après le montage du composant
  },
};
</script>

<style scoped lang="scss" src="@/assets/scss/article.scss"></style>
<style scoped>
.regulation { top: 10%; left: 50%; transform: translate(-50%, -50%); }
.accessibility { top: 50%; right: 10%; transform: translate(50%, -50%); }
.complexity { bottom: 50%; left: 10%; transform: translate(-50%, 50%); }
.volatility { top: 50%; right: 10%; transform: translate(50%, -50%); }
.security {  bottom: 10%;  left: 50%;  transform: translate(-50%, 50%);}
</style>