feat(web-hosting): update video center acces on dashboard

packages/manager/apps/web-hosting/public/translations/videoManagerCenter/Messages_de_DE.json

@@ -27,5 +27,11 @@
   "video_manager_service_free": "Video Center Free",
   "video_manager_service_video_free_count": "1 Video",
   "video_manager_service_video_free_duration": "10 Minuten",
-  "video_manager_service_video_free_included": "Inklusive"
+  "video_manager_service_video_free_included": "Inklusive",
+  "title": "Veröffentlichen Sie Ihr Video in wenigen Sekunden",
+  "step1": "Öffnen Sie das Videozentrum",
+  "step2": "Importieren Sie Ihr Video",
+  "step3": "Veröffentlichen Sie!",
+  "hint": "Weniger als 2 Minuten · Keine technischen Fähigkeiten erforderlich",
+  "firstVideoButton": "Laden Sie mein erstes Video hoch"
 }

packages/manager/apps/web-hosting/public/translations/videoManagerCenter/Messages_en_GB.json

@@ -27,5 +27,11 @@
   "video_manager_service_free": "Free Video Center",
   "video_manager_service_video_free_count": "1 video",
   "video_manager_service_video_free_duration": "10 min",
-  "video_manager_service_video_free_included": "Included"
+  "video_manager_service_video_free_included": "Included",
+  "title": "Publish your video in a few seconds",
+  "step1": "Open the Video Centre",
+  "step2": "Import your video",
+  "step3": "Publish!",
+  "hint": "Less than 2 minutes · No technical skills required",
+  "firstVideoButton": "Upload my first video"
 }

packages/manager/apps/web-hosting/public/translations/videoManagerCenter/Messages_es_ES.json

@@ -27,5 +27,11 @@
   "video_manager_service_free": "Video Center Free",
   "video_manager_service_video_free_count": "1 vídeo",
   "video_manager_service_video_free_duration": "10 min",
-  "video_manager_service_video_free_included": "Incluido"
+  "video_manager_service_video_free_included": "Incluido",
+  "title": "Publica tu vídeo en unos segundos",
+  "step1": "Abre el Centro de Vídeos",
+  "step2": "Importa tu vídeo",
+  "step3": "¡Publica!",
+  "hint": "Menos de 2 minutos · Ninguna habilidad técnica requerida",
+  "firstVideoButton": "Sube mi primer vídeo"
 }

packages/manager/apps/web-hosting/public/translations/videoManagerCenter/Messages_fr_CA.json

@@ -27,5 +27,11 @@
   "video_manager_service_free": "Video Center Free",
   "video_manager_service_video_free_count": "1 video",
   "video_manager_service_video_free_duration": "10 min",
-  "video_manager_service_video_free_included": "Inclus"
+  "video_manager_service_video_free_included": "Inclus",
+  "title": "Publiez votre vidéo en quelques secondes",
+  "step1": "Ouvrez le Video Center",
+  "step2": "Importez votre vidéo",
+  "step3": "Publiez !",
+  "hint": "Moins de 2 minutes · Aucune compétence technique requise",
+  "firstVideoButton": "Déposer ma première vidéo"
 }

packages/manager/apps/web-hosting/public/translations/videoManagerCenter/Messages_fr_FR.json

@@ -27,5 +27,11 @@
   "video_manager_service_free": "Video Center Free",
   "video_manager_service_video_free_count": "1 video",
   "video_manager_service_video_free_duration": "10 min",
-  "video_manager_service_video_free_included": "Inclus"
+  "video_manager_service_video_free_included": "Inclus",
+  "title": "Publiez votre vidéo en quelques secondes",
+  "step1": "Ouvrez le Video Center",
+  "step2": "Importez votre vidéo",
+  "step3": "Publiez !",
+  "hint": "Moins de 2 minutes · Aucune compétence technique requise",
+  "firstVideoButton": "Déposer ma première vidéo"
 }

packages/manager/apps/web-hosting/public/translations/videoManagerCenter/Messages_it_IT.json

@@ -27,5 +27,11 @@
   "video_manager_service_free": "Video Center Free",
   "video_manager_service_video_free_count": "1 video",
   "video_manager_service_video_free_duration": "10 min.",
-  "video_manager_service_video_free_included": "Incluso"
+  "video_manager_service_video_free_included": "Incluso",
+  "title": "Pubblica il tuo video in pochi secondi",
+  "step1": "Apri il Centro Video",
+  "step2": "Importa il tuo video",
+  "step3": "Pubblica!",
+  "hint": "Meno di 2 minuti · Nessuna competenza tecnica richiesta",
+  "firstVideoButton": "Carica il mio primo video"
 }

packages/manager/apps/web-hosting/public/translations/videoManagerCenter/Messages_pl_PL.json

@@ -27,5 +27,11 @@
   "video_manager_service_free": "Video Center Free",
   "video_manager_service_video_free_count": "1 film",
   "video_manager_service_video_free_duration": "10 minut",
-  "video_manager_service_video_free_included": "Zawarte w cenie"
+  "video_manager_service_video_free_included": "Zawarte w cenie",
+  "title": "Opublikuj swoje wideo w kilka sekund",
+  "step1": "Otwórz Centrum Wideo",
+  "step2": "Importuj swoje wideo",
+  "step3": "Opublikuj!",
+  "hint": "Mniej niż 2 minuty · Żadne umiejętności techniczne nie są wymagane",
+  "firstVideoButton": "Złóż moje pierwsze wideo"
 }

packages/manager/apps/web-hosting/public/translations/videoManagerCenter/Messages_pt_PT.json

@@ -27,5 +27,11 @@
   "video_manager_service_free": "Video Center Free",
   "video_manager_service_video_free_count": "1 vídeo",
   "video_manager_service_video_free_duration": "10 min",
-  "video_manager_service_video_free_included": "Incluído"
+  "video_manager_service_video_free_included": "Incluído",
+  "title": "Publique o seu vídeo em poucos segundos",
+  "step1": "Abra o Centro de Vídeo",
+  "step2": "Importe o seu vídeo",
+  "step3": "Publique!",
+  "hint": "Menos de 2 minutos · Nenhuma competência técnica necessária",
+  "firstVideoButton": "Depositar o meu primeiro vídeo"
 }

packages/manager/apps/web-hosting/src/pages/videoCenter/dashboard/videoCenterDashboard.page.tsx

@@ -5,7 +5,6 @@ import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import {
-  BUTTON_COLOR,
   BUTTON_VARIANT,
   Button,
   Card,
@@ -44,6 +43,7 @@ export default function VideoCenterDashboardPage() {
   const vodDurationThresholds = computeThresholdsFromMax(
     data?.currentState?.vodDurationMinutes?.hostable || 0,
   );
+  const hasVideos = data?.currentState?.vodCount?.allocated > 0;
   const { generateVideoCenterTokenAsync } = useGenerateVideoCenterToken(serviceId);
   const onAccessVideoCenter = async () => {
     const popup = window.open('', '_blank');
@@ -102,16 +102,41 @@ export default function VideoCenterDashboardPage() {
           </Text>
         </Card>
       </div>
-      <div className="mt-8 flex flex-wrap">
-        <Button
-          color={BUTTON_COLOR.primary}
-          className="w-full"
-          onClick={() => void onAccessVideoCenter()}
-        >
-          {t('video_manager_service_access_video_center')}
-          <Icon name={ICON_NAME.externalLink}></Icon>
-        </Button>
-      </div>
+      <Card className="mt-6 flex flex-col gap-4 bg-gradient-to-br from-[#2d3e5f] via-[#3b5998] to-[#4a6fa5] p-8 text-white">
+        <Text preset={TEXT_PRESET.heading3} className="!m-0 pb-5 !text-white">
+          {t('title')}
+        </Text>
+        <div className="flex flex-wrap items-center justify-between gap-4 rounded-lg bg-white/10 p-8">
+          <div className="flex flex-1 flex-col gap-1">
+            <div className="flex flex-wrap items-center gap-4 [&_span]:text-white">
+              <span className="inline-flex size-6 shrink-0 items-center justify-center rounded-full bg-white/20 text-xs font-bold text-white">
+                1
+              </span>
+              <Text preset={TEXT_PRESET.span}>{t('step1')}</Text>
+              <span className="text-white/50">→</span>
+              <span className="inline-flex size-6 shrink-0 items-center justify-center rounded-full bg-white/20 text-xs font-bold text-white">
+                2
+              </span>
+              <Text preset={TEXT_PRESET.span}>{t('step2')}</Text>
+              <span className="text-white/50">→</span>
+              <span className="inline-flex size-6 shrink-0 items-center justify-center rounded-full bg-white/20 text-xs font-bold text-white">
+                3
+              </span>
+              <Text preset={TEXT_PRESET.span}>{t('step3')}</Text>
+            </div>
+            <Text preset={TEXT_PRESET.small} className="!text-white/60">
+              {t('hint')}
+            </Text>
+          </div>
+          <Button
+            onClick={() => void onAccessVideoCenter()}
+            className="shrink-0 whitespace-nowrap !border-white !bg-white !text-[#294576] hover:!bg-gray-100"
+          >
+            {hasVideos ? t('video_manager_service_access_video_center') : t('firstVideoButton')}
+            <Icon name="external-link" />
+          </Button>
+        </div>
+      </Card>
       <div className="mt-8 flex flex-row space-x-4">
         <Card className="w-1/2 p-6">
           <Text preset={TEXT_PRESET.heading5}>{t(`${NAMESPACES.BILLING}:subscription`)}</Text>