From 758a1a9fdd368825d4eb62abdadf3fec506df48f Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Tue, 13 Aug 2024 19:48:39 -0400
Subject: [PATCH] Improve Explorer template concept

---
 src/views/explorer/explorer.vue | 229 +++++++++++++----
 src/views/explorer/videos.json  | 428 +++++++++++++++++++++++++-------
 2 files changed, 518 insertions(+), 139 deletions(-)

diff --git a/src/views/explorer/explorer.vue b/src/views/explorer/explorer.vue
index d8707c8..966e507 100644
--- a/src/views/explorer/explorer.vue
+++ b/src/views/explorer/explorer.vue
@@ -1,83 +1,204 @@
 <script setup>
-import { ref } from 'vue';
-import { onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import videosData from './videos.json';
-import ExplorerCard from '@/views/explorer/ExplorerCard.vue'; 
+import ExplorerCard from '@/views/explorer/ExplorerCard.vue';
 
-// Data
-const mostLikedVideos = videosData.mostLikedVideos;
-const mostBoughtVideos = videosData.mostBoughtVideos;
-const mostSharedVideos = videosData.mostSharedVideos;
+// Données
 const mostViewedVideos = videosData.mostViewedVideos;
+const mostBoughtVideos = videosData.mostBoughtVideos;
 
-// State to control the current range of videos displayed
-const currentRangeLiked = ref(0);
-const currentRangeBought = ref(0);
-const currentRangeShared = ref(0);
+// État pour contrôler la plage actuelle des vidéos affichées
 const currentRangeViewed = ref(0);
-const videosPerRow = 4;
-const animationDirection = ref('');
+const currentRangeBought = ref(0);
 
-// Function to move to the next set of videos
-const nextRow = (currentRange, videosList) => {
-  if (currentRange.value + videosPerRow < videosList.length) {
-    animationDirection.value = 'down';
-    setTimeout(() => {
-      currentRange.value += videosPerRow;
-    }, 300);
+const videosPerRowViewed = ref(4); // Nombre initial de vidéos par ligne pour Most Viewed
+const videosPerRowBought = ref(4); // Nombre initial de vidéos par ligne pour Most Bought
+
+const selectedTimeRangeViewed = ref('24h'); // Plage de temps sélectionnée pour Most Viewed
+const selectedTimeRangeBought = ref('24h'); // Plage de temps sélectionnée pour Most Bought
+
+// Fonction pour passer à l'ensemble suivant de vidéos (Most Viewed)
+const nextRowViewed = () => {
+  if (currentRangeViewed.value + videosPerRowViewed.value < mostViewedVideos.length) {
+    currentRangeViewed.value += videosPerRowViewed.value;
   }
 };
 
-// Function to move to the previous set of videos
-const previousRow = (currentRange) => {
-  if (currentRange.value - videosPerRow >= 0) {
-    animationDirection.value = 'up';
-    setTimeout(() => {
-      currentRange.value -= videosPerRow;
-    }, 300);
+// Fonction pour revenir à l'ensemble précédent de vidéos (Most Viewed)
+const previousRowViewed = () => {
+  if (currentRangeViewed.value - videosPerRowViewed.value >= 0) {
+    currentRangeViewed.value -= videosPerRowViewed.value;
   }
 };
 
-// Function to animate the transition
-const animationClass = () => {
-  if (animationDirection.value === 'down') {
-    return 'transition-transform transform translate-y-full opacity-0';
-  } else if (animationDirection.value === 'up') {
-    return 'transition-transform transform -translate-y-full opacity-0';
+// Fonction pour passer à l'ensemble suivant de vidéos (Most Bought)
+const nextRowBought = () => {
+  if (currentRangeBought.value + videosPerRowBought.value < mostBoughtVideos.length) {
+    currentRangeBought.value += videosPerRowBought.value;
   }
-  return '';
 };
 
-onMounted(() => {
-  animationDirection.value = '';
+// Fonction pour revenir à l'ensemble précédent de vidéos (Most Bought)
+const previousRowBought = () => {
+  if (currentRangeBought.value - videosPerRowBought.value >= 0) {
+    currentRangeBought.value -= videosPerRowBought.value;
+  }
+};
+
+// Fonction pour basculer entre l'affichage de 4 et 8 vidéos (Most Viewed)
+const toggleVideoDisplayViewed = () => {
+  if (videosPerRowViewed.value === 4) {
+    if (currentRangeViewed.value + videosPerRowViewed.value >= mostViewedVideos.length) {
+      currentRangeViewed.value = Math.max(mostViewedVideos.length - 8, 0);
+    }
+    videosPerRowViewed.value = 8;
+  } else {
+    videosPerRowViewed.value = 4;
+  }
+};
+
+// Fonction pour basculer entre l'affichage de 4 et 8 vidéos (Most Bought)
+const toggleVideoDisplayBought = () => {
+  if (videosPerRowBought.value === 4) {
+    if (currentRangeBought.value + videosPerRowBought.value >= mostBoughtVideos.length) {
+      currentRangeBought.value = Math.max(mostBoughtVideos.length - 8, 0);
+    }
+    videosPerRowBought.value = 8;
+  } else {
+    videosPerRowBought.value = 4;
+  }
+};
+
+// Fonction pour changer la plage de temps sélectionnée pour Most Viewed
+const changeTimeRangeViewed = (range) => {
+  selectedTimeRangeViewed.value = range;
+  currentRangeViewed.value = 0; // Réinitialiser la plage de vidéos affichées (Most Viewed)
+  // Logique pour filtrer les vidéos en fonction de la plage de temps sélectionnée
+  // À implémenter si nécessaire
+};
+
+// Fonction pour changer la plage de temps sélectionnée pour Most Bought
+const changeTimeRangeBought = (range) => {
+  selectedTimeRangeBought.value = range;
+  currentRangeBought.value = 0; // Réinitialiser la plage de vidéos affichées (Most Bought)
+  // Logique pour filtrer les vidéos en fonction de la plage de temps sélectionnée
+  // À implémenter si nécessaire
+};
+
+// Computed property pour le changement d'icône du chevron (Most Viewed)
+const chevronIconViewed = computed(() => {
+  return videosPerRowViewed.value === 4 ? 'mdi-chevron-down' : 'mdi-chevron-up';
 });
+
+// Computed property pour le changement d'icône du chevron (Most Bought)
+const chevronIconBought = computed(() => {
+  return videosPerRowBought.value === 4 ? 'mdi-chevron-down' : 'mdi-chevron-up';
+});
+
 </script>
 
 <template>
   <div class="container mx-auto py-4">
+    <!-- Section Most Viewed avec boutons de sélection de la plage de temps -->
+    <div class="flex justify-between items-center mb-4">
+      <h2 class="text-2xl font-bold">Most Viewed</h2>
+      <div class="flex space-x-4">
+        <v-btn variant="outlined" small @click="changeTimeRangeViewed('24h')" :class="{'v-btn--active': selectedTimeRangeViewed === '24h'}">
+          <v-icon left>mdi-timer</v-icon> 24h
+        </v-btn>
+        <v-btn variant="outlined"  small @click="changeTimeRangeViewed('72h')" :class="{'v-btn--active': selectedTimeRangeViewed === '72h'}">
+          <v-icon left>mdi-timer-sand</v-icon> 72h
+        </v-btn>
+        <v-btn variant="outlined"  small @click="changeTimeRangeViewed('week')" :class="{'v-btn--active': selectedTimeRangeViewed === 'week'}">
+          <v-icon left>mdi-calendar-week</v-icon> Semaine
+        </v-btn>
+        <v-btn variant="outlined"  small @click="changeTimeRangeViewed('month')" :class="{'v-btn--active': selectedTimeRangeViewed === 'month'}">
+          <v-icon left>mdi-calendar-month</v-icon> Mois
+        </v-btn>
+      </div>
+    </div>
 
-    <!-- Section Most Viewed -->
-    <h2 class="text-2xl font-bold mb-2">Most Viewed</h2>
+    <!-- Liste des vidéos les plus vues -->
     <div class="flex flex-row">
       <div class="relative overflow-hidden">
-        <div :class="`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-8 ${animationClass()}`">
-          <ExplorerCard v-for="(video, index) in mostViewedVideos.slice(currentRangeViewed, currentRangeViewed + videosPerRow)" :key="video.id" :video="video" />
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-8">
+          <ExplorerCard
+              v-for="(video, index) in mostViewedVideos.slice(currentRangeViewed, currentRangeViewed + videosPerRowViewed)"
+              :key="video.id"
+              :video="video"
+          />
         </div>
       </div>
       <div class="flex flex-col justify-center px-2">
-        <v-btn @click="previousRow(currentRangeViewed)" :disabled="currentRangeViewed === 0" class="mb-2">
+        <!-- Bouton pour naviguer vers l'ensemble précédent de vidéos (Most Viewed) -->
+        <v-btn @click="previousRowViewed" :disabled="currentRangeViewed === 0" class="mb-2">
           <v-icon>mdi-arrow-up-circle-outline</v-icon>
         </v-btn>
-        <v-btn @click="nextRow(currentRangeViewed, mostViewedVideos)" :disabled="currentRangeViewed + videosPerRow >= mostViewedVideos.length">
+        <!-- Bouton pour naviguer vers l'ensemble suivant de vidéos (Most Viewed) -->
+        <v-btn @click="nextRowViewed" :disabled="currentRangeViewed + videosPerRowViewed.value >= mostViewedVideos.length">
           <v-icon>mdi-arrow-down-circle-outline</v-icon>
         </v-btn>
       </div>
     </div>
 
-    <!-- Horizontal Line -->
-    <hr class="my-3">
+    <!-- Chevron pour basculer entre l'affichage de 4 et 8 vidéos (Most Viewed) -->
+    <div class="flex justify-center mt-4">
+      <v-btn icon @click="toggleVideoDisplayViewed">
+        <v-icon>{{ chevronIconViewed }}</v-icon>
+      </v-btn>
+    </div>
 
-    <!-- Repeat similar blocks for Most Liked, Most Bought, Most Shared -->
+    <!-- Ligne de séparation -->
+    <hr class="my-8"/>
+
+    <!-- Section Most Bought avec boutons de sélection de la plage de temps -->
+    <div class="flex justify-between items-center mb-4">
+      <h2 class="text-2xl font-bold">Most Bought</h2>
+      <div class="flex space-x-4">
+        <v-btn variant="outlined" small @click="changeTimeRangeBought('24h')" :class="{'v-btn--active': selectedTimeRangeBought === '24h'}">
+          <v-icon left>mdi-timer</v-icon> 24h
+        </v-btn>
+        <v-btn variant="outlined"  small @click="changeTimeRangeBought('72h')" :class="{'v-btn--active': selectedTimeRangeBought === '72h'}">
+          <v-icon left>mdi-timer-sand</v-icon> 72h
+        </v-btn>
+        <v-btn variant="outlined"  small @click="changeTimeRangeBought('week')" :class="{'v-btn--active': selectedTimeRangeBought === 'week'}">
+          <v-icon left>mdi-calendar-week</v-icon> Semaine
+        </v-btn>
+        <v-btn variant="outlined"  small @click="changeTimeRangeBought('month')" :class="{'v-btn--active': selectedTimeRangeBought === 'month'}">
+          <v-icon left>mdi-calendar-month</v-icon> Mois
+        </v-btn>
+      </div>
+    </div>
+
+    <!-- Liste des vidéos les plus achetées -->
+    <div class="flex flex-row">
+      <div class="relative overflow-hidden">
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-8">
+          <ExplorerCard
+              v-for="(video, index) in mostBoughtVideos.slice(currentRangeBought, currentRangeBought + videosPerRowBought)"
+              :key="video.id"
+              :video="video"
+          />
+        </div>
+      </div>
+      <div class="flex flex-col justify-center px-2">
+        <!-- Bouton pour naviguer vers l'ensemble précédent de vidéos (Most Bought) -->
+        <v-btn @click="previousRowBought" :disabled="currentRangeBought === 0" class="mb-2">
+          <v-icon>mdi-arrow-up-circle-outline</v-icon>
+        </v-btn>
+        <!-- Bouton pour naviguer vers l'ensemble suivant de vidéos (Most Bought) -->
+        <v-btn @click="nextRowBought" :disabled="currentRangeBought + videosPerRowBought.value >= mostBoughtVideos.length">
+          <v-icon>mdi-arrow-down-circle-outline</v-icon>
+        </v-btn>
+      </div>
+    </div>
+
+    <!-- Chevron pour basculer entre l'affichage de 4 et 8 vidéos (Most Bought) -->
+    <div class="flex justify-center mt-4">
+      <v-btn icon @click="toggleVideoDisplayBought">
+        <v-icon>{{ chevronIconBought }}</v-icon>
+      </v-btn>
+    </div>
   </div>
 </template>
 
@@ -85,4 +206,22 @@ onMounted(() => {
 .container {
   max-width: 1200px;
 }
+
+.v-btn--active {
+  background-color: #1976d2;
+  color: white;
+}
+
+.v-btn--active.v-btn--text {
+  background-color: #1976d2;
+  color: white;
+}
+
+.v-btn--text:hover {
+  background-color: rgba(25, 118, 210, 0.1);
+}
+
+hr {
+  border: 1px solid #ddd;
+}
 </style>
diff --git a/src/views/explorer/videos.json b/src/views/explorer/videos.json
index ee47335..cda23f4 100644
--- a/src/views/explorer/videos.json
+++ b/src/views/explorer/videos.json
@@ -1,170 +1,410 @@
 {
   "mostLikedVideos": [
     {
-      "id": 37,
-      "title": "Amazing Video Title",
+      "id": 1,
+      "title": "Top 10 Football Goals",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "description": "This is a brief description of the video content.",
+      "description": "A compilation of the best goals in football history.",
       "profileImage": "src/views/explorer/ThumbnailImage.png",
-      "name": "John Doe",
-      "vues": 1200,
-      "timeAgo": "2 hours"
+      "name": "Alex Martin",
+      "vues": 5000,
+      "timeAgo": "3 hours"
     },
     {
-      "id": 38,
-      "title": "Amazing Video Title",
+      "id": 2,
+      "title": "Basketball Dunk Contest Highlights",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "description": "This is a brief description of the video content.",
+      "description": "Watch the best dunks from the latest dunk contest.",
       "profileImage": "src/views/explorer/ThumbnailImage.png",
-      "name": "John Doe",
-      "vues": 1200,
-      "timeAgo": "2 hours"
+      "name": "Jordan Lee",
+      "vues": 4500,
+      "timeAgo": "5 hours"
     },
     {
-      "id": 39,
-      "title": "Amazing Video Title",
+      "id": 3,
+      "title": "Epic Tennis Rallies",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "description": "This is a brief description of the video content.",
+      "description": "A look at some of the most intense rallies in tennis.",
       "profileImage": "src/views/explorer/ThumbnailImage.png",
-      "name": "John Doe",
-      "vues": 1200,
-      "timeAgo": "2 hours"
+      "name": "Serena West",
+      "vues": 4700,
+      "timeAgo": "1 day"
     },
     {
-      "id": 40,
-      "title": "Amazing Video Title",
+      "id": 4,
+      "title": "Marathon Motivation",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "description": "This is a brief description of the video content.",
+      "description": "Get inspired by these marathon runners.",
       "profileImage": "src/views/explorer/ThumbnailImage.png",
-      "name": "John Doe",
-      "vues": 1200,
-      "timeAgo": "2 hours"
+      "name": "Eliud Kip",
+      "vues": 3800,
+      "timeAgo": "2 days"
+    },
+    {
+      "id": 5,
+      "title": "Best Volleyball Spikes",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Watch these powerful volleyball spikes in action.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Misty May",
+      "vues": 4200,
+      "timeAgo": "3 days"
+    },
+    {
+      "id": 6,
+      "title": "Cycling Through The Alps",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Experience the thrill of cycling in the Alps.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Lance Ryder",
+      "vues": 3900,
+      "timeAgo": "4 days"
+    },
+    {
+      "id": 7,
+      "title": "Cricket's Greatest Hits",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "A look at some of the most memorable moments in cricket.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Sachin Kumar",
+      "vues": 4400,
+      "timeAgo": "5 days"
+    },
+    {
+      "id": 8,
+      "title": "Top MMA Knockouts",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "The most shocking knockouts in MMA history.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Conor Mac",
+      "vues": 5000,
+      "timeAgo": "6 days"
+    },
+    {
+      "id": 9,
+      "title": "F1 Racing Highlights",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "A thrilling recap of the latest Formula 1 races.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Lewis Ham",
+      "vues": 4800,
+      "timeAgo": "1 week"
+    },
+    {
+      "id": 10,
+      "title": "Golf's Most Amazing Shots",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Witness the most incredible shots in golf.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Tiger Woods",
+      "vues": 5300,
+      "timeAgo": "1 week"
     }
   ],
   "mostBoughtVideos": [
     {
-      "id": 41,
-      "title": "Amazing Video Title",
+      "id": 11,
+      "title": "Football Training Drills",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "description": "This is a brief description of the video content.",
+      "description": "Master the best football drills for every position.",
       "profileImage": "src/views/explorer/ThumbnailImage.png",
-      "name": "John Doe",
-      "vues": 1200,
+      "name": "Pep Guardiola",
+      "vues": 6000,
       "timeAgo": "2 hours"
     },
     {
-      "id": 42,
-      "title": "Amazing Video Title",
+      "id": 12,
+      "title": "Advanced Basketball Techniques",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "description": "This is a brief description of the video content.",
+      "description": "Learn advanced techniques to improve your game.",
       "profileImage": "src/views/explorer/ThumbnailImage.png",
-      "name": "John Doe",
-      "vues": 1200,
-      "timeAgo": "2 hours"
+      "name": "Kobe Bryant",
+      "vues": 5500,
+      "timeAgo": "4 hours"
     },
     {
-      "id": 43,
-      "title": "Amazing Video Title",
+      "id": 13,
+      "title": "Perfecting Your Tennis Serve",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "description": "This is a brief description of the video content.",
+      "description": "Tips and tricks to perfect your tennis serve.",
       "profileImage": "src/views/explorer/ThumbnailImage.png",
-      "name": "John Doe",
-      "vues": 1200,
-      "timeAgo": "2 hours"
+      "name": "Roger Federer",
+      "vues": 5100,
+      "timeAgo": "6 hours"
     },
     {
-      "id": 44,
-      "title": "Amazing Video Title",
+      "id": 14,
+      "title": "Marathon Nutrition Guide",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "description": "This is a brief description of the video content.",
+      "description": "Essential nutrition tips for marathon runners.",
       "profileImage": "src/views/explorer/ThumbnailImage.png",
-      "name": "John Doe",
-      "vues": 1200,
-      "timeAgo": "2 hours"
+      "name": "Meb Keflezighi",
+      "vues": 4800,
+      "timeAgo": "1 day"
+    },
+    {
+      "id": 15,
+      "title": "Volleyball Defense Mastery",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Become a defensive powerhouse in volleyball.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Kerri Walsh",
+      "vues": 4700,
+      "timeAgo": "2 days"
+    },
+    {
+      "id": 16,
+      "title": "Ultimate Cycling Techniques",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Improve your cycling skills with these techniques.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Chris Froome",
+      "vues": 4600,
+      "timeAgo": "3 days"
+    },
+    {
+      "id": 17,
+      "title": "Mastering Spin Bowling",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Learn the art of spin bowling in cricket.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Shane Warne",
+      "vues": 5200,
+      "timeAgo": "4 days"
+    },
+    {
+      "id": 18,
+      "title": "MMA Grappling Techniques",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Dominate the ground game with these techniques.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Khabib Nur",
+      "vues": 5300,
+      "timeAgo": "5 days"
+    },
+    {
+      "id": 19,
+      "title": "F1 Pit Stop Secrets",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Learn the strategies behind a perfect F1 pit stop.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Sebastian Vettel",
+      "vues": 5400,
+      "timeAgo": "6 days"
+    },
+    {
+      "id": 20,
+      "title": "Golf Putting Techniques",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Improve your putting with these expert tips.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Phil Mickelson",
+      "vues": 5500,
+      "timeAgo": "1 week"
     }
   ],
   "mostSharedVideos": [
     {
-      "id": 45,
-      "title": "Amazing Video Title",
+      "id": 21,
+      "title": "Soccer Match Replays",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "description": "This is a brief description of the video content.",
+      "description": "Watch full replays of the latest soccer matches.",
       "profileImage": "src/views/explorer/ThumbnailImage.png",
-      "name": "John Doe",
-      "vues": 1200,
-      "timeAgo": "2 hours"
+      "name": "Cristiano Ronaldo",
+      "vues": 6000,
+      "timeAgo": "1 hour"
     },
     {
-      "id": 46,
-      "title": "Amazing Video Title",
+      "id": 22,
+      "title": "Basketball Trick Shots",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "description": "This is a brief description of the video content.",
+      "description": "The most incredible trick shots in basketball.",
       "profileImage": "src/views/explorer/ThumbnailImage.png",
-      "name": "John Doe",
-      "vues": 1200,
-      "timeAgo": "2 hours"
+      "name": "Steph Curry",
+      "vues": 5900,
+      "timeAgo": "3 hours"
     },
     {
-      "id": 47,
-      "title": "Amazing Video Title",
+      "id": 23,
+      "title": "Tennis Grand Slam Finals",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "description": "This is a brief description of the video content.",
+      "description": "Relive the excitement of Grand Slam tennis finals.",
       "profileImage": "src/views/explorer/ThumbnailImage.png",
-      "name": "John Doe",
-      "vues": 1200,
-      "timeAgo": "2 hours"
+      "name": "Novak Djokovic",
+      "vues": 5800,
+      "timeAgo": "5 hours"
     },
     {
-      "id": 48,
-      "title": "Amazing Video Title",
+      "id": 24,
+      "title": "Running Tips for Beginners",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "description": "This is a brief description of the video content.",
+      "description": "Get started with running with these beginner tips.",
       "profileImage": "src/views/explorer/ThumbnailImage.png",
-      "name": "John Doe",
-      "vues": 1200,
-      "timeAgo": "2 hours"
+      "name": "Usain Bolt",
+      "vues": 5700,
+      "timeAgo": "1 day"
+    },
+    {
+      "id": 25,
+      "title": "Beach Volleyball Highlights",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Catch the best moments from beach volleyball matches.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "April Ross",
+      "vues": 5600,
+      "timeAgo": "2 days"
+    },
+    {
+      "id": 26,
+      "title": "Mountain Biking Adventures",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Experience the thrill of mountain biking.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Danny MacAskill",
+      "vues": 5500,
+      "timeAgo": "3 days"
+    },
+    {
+      "id": 27,
+      "title": "Cricket World Cup Highlights",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "The most thrilling moments from the Cricket World Cup.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Virat Kohli",
+      "vues": 5400,
+      "timeAgo": "4 days"
+    },
+    {
+      "id": 28,
+      "title": "MMA Fight Replays",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Watch full replays of the most intense MMA fights.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Anderson Silva",
+      "vues": 5300,
+      "timeAgo": "5 days"
+    },
+    {
+      "id": 29,
+      "title": "F1 Crash Compilation",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "A compilation of the most shocking F1 crashes.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Michael Schumacher",
+      "vues": 5200,
+      "timeAgo": "6 days"
+    },
+    {
+      "id": 30,
+      "title": "Golf Tips for Beginners",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Essential tips for those new to golf.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Jack Nicklaus",
+      "vues": 5100,
+      "timeAgo": "1 week"
     }
   ],
   "mostViewedVideos": [
     {
-      "id": 49,
-      "title": "Amazing Video Title",
+      "id": 31,
+      "title": "Soccer's Greatest Goals",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "description": "This is a brief description of the video content.",
+      "description": "A look at the greatest goals ever scored in soccer.",
       "profileImage": "src/views/explorer/ThumbnailImage.png",
-      "name": "John Doe",
-      "vues": 1200,
+      "name": "Lionel Messi",
+      "vues": 7000,
+      "timeAgo": "30 minutes"
+    },
+    {
+      "id": 32,
+      "title": "Best of Basketball Finals",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Relive the best moments from recent basketball finals.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "LeBron James",
+      "vues": 6900,
+      "timeAgo": "1 hour"
+    },
+    {
+      "id": 33,
+      "title": "Tennis Serve Speed Records",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Check out the fastest serves ever recorded in tennis.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Andy Roddick",
+      "vues": 6800,
       "timeAgo": "2 hours"
     },
     {
-      "id": 50,
-      "title": "Amazing Video Title",
+      "id": 34,
+      "title": "Running in Extreme Weather",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "description": "This is a brief description of the video content.",
+      "description": "Tips for running in various weather conditions.",
       "profileImage": "src/views/explorer/ThumbnailImage.png",
-      "name": "John Doe",
-      "vues": 1200,
-      "timeAgo": "2 hours"
+      "name": "Mo Farah",
+      "vues": 6700,
+      "timeAgo": "3 hours"
     },
     {
-      "id": 51,
-      "title": "Amazing Video Title",
+      "id": 35,
+      "title": "Volleyball Team Strategies",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "description": "This is a brief description of the video content.",
+      "description": "Learn advanced team strategies for volleyball.",
       "profileImage": "src/views/explorer/ThumbnailImage.png",
-      "name": "John Doe",
-      "vues": 1200,
-      "timeAgo": "2 hours"
+      "name": "Giba Godoy",
+      "vues": 6600,
+      "timeAgo": "4 hours"
     },
     {
-      "id": 52,
-      "title": "Amazing Video Title",
+      "id": 36,
+      "title": "Cycling Gear Tips",
       "thumbnail": "src/views/explorer/ThumbnailImage.png",
-      "description": "This is a brief description of the video content.",
+      "description": "A guide to choosing the best cycling gear.",
       "profileImage": "src/views/explorer/ThumbnailImage.png",
-      "name": "John Doe",
-      "vues": 1200,
-      "timeAgo": "2 hours"
+      "name": "Peter Sagan",
+      "vues": 6500,
+      "timeAgo": "1 day"
+    },
+    {
+      "id": 37,
+      "title": "Cricket Batting Techniques",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Improve your batting with these cricket techniques.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Brian Lara",
+      "vues": 6400,
+      "timeAgo": "2 days"
+    },
+    {
+      "id": 38,
+      "title": "MMA Striking Combinations",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Learn effective striking combinations in MMA.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Georges St-Pierre",
+      "vues": 6300,
+      "timeAgo": "3 days"
+    },
+    {
+      "id": 39,
+      "title": "F1 Overtakes Compilation",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "The most exciting overtakes in F1 history.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Ayrton Senna",
+      "vues": 6200,
+      "timeAgo": "4 days"
+    },
+    {
+      "id": 40,
+      "title": "Golf Swing Analysis",
+      "thumbnail": "src/views/explorer/ThumbnailImage.png",
+      "description": "Breakdown of the best golf swings.",
+      "profileImage": "src/views/explorer/ThumbnailImage.png",
+      "name": "Rory McIlroy",
+      "vues": 6100,
+      "timeAgo": "5 days"
     }
   ]
 }