Feature/extra videos and fixes

package.json

@@ -41,7 +41,7 @@
     "vite-svg-loader": "^5.1.0",
     "vue-tsc": "^2.0.6"
   },
-  "packageManager": "pnpm@9.0.5+sha256.61bd66913b52012107ec25a6ee4d6a161021ab99e04f6acee3aa50d0e34b4af9",
+  "packageManager": "pnpm@9.6.0+sha512.38dc6fba8dba35b39340b9700112c2fe1e12f10b17134715a4aa98ccf7bb035e76fd981cf0bb384dfa98f8d6af5481c2bef2f4266a24bfa20c34eb7147ce0b5e",
   "lint-staged": {
     "*.{vue,js,jsx,cjs,mjs,ts,tsx,cts,mts}": "eslint --cache --fix",
     "*.{vue,js,jsx,cjs,mjs,ts,tsx,cts,mts,html,css}": "prettier --write"

src/assets/base.css

@@ -35,7 +35,7 @@
 
 body {
   color: var(--color-text);
-  background: #050611 url('backgrounds/background-mobile.svg');
+  background: var(--color-background) url('backgrounds/background-mobile.svg');
   background-size: cover;
   font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
     'Helvetica Neue', sans-serif;
@@ -50,7 +50,7 @@ body {
   }
 
   @media (--breakpoint-desktop) {
-    background: url('backgrounds/background.svg');
+    background: var(--color-background) url('backgrounds/background.svg');
     background-size: cover;
   }
 }

src/assets/main.css

@@ -10,6 +10,5 @@
 
 a {
   text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;
 }

src/constants/agriculture-page/agriculture-page.ts

@@ -1,6 +1,8 @@
 import { cubeParts } from '@/constants/cube-parts';
 import { type Edge, type Node, Position } from '@vue-flow/core';
 
+import { agricultureVideos } from '@/constants/agriculture-page/agriculture-videos';
+
 export const agricultureCards = [
   {
     title: 'Edge Cloud Services',
@@ -53,26 +55,65 @@ export const agricultureGraph = {
   nodes: <Node[]>[
     {
       id: '1',
-      position: { x: 5, y: 5 },
+      position: { x: 5, y: -50 },
       class: 'vue-flow__node--ecs-ds',
     },
     {
       id: '2',
-      position: { x: 10, y: 150 },
+      position: { x: 10, y: 200 },
       class: 'vue-flow__node--ecs-ds-cog-gov',
     },
     {
       id: '3',
-      position: { x: 150, y: 75 },
-      targetPosition: Position.Left,
+      position: { x: 160, y: 25 },
+      targetPosition: Position.Bottom,
       class: 'vue-flow__node--ecs-gov',
     },
     {
       id: '4',
-      position: { x: 150, y: 200 },
+      position: { x: 170, y: 220 },
       targetPosition: Position.Bottom,
       class: 'vue-flow__node--ecs-ds-cog',
     },
+    {
+      id: '5',
+      position: { x: -130, y: 10 },
+      type: 'video',
+      data: {
+        videoFullFileUrl: agricultureVideos.agriculture1.videoFullFileUrl,
+        videoFile: agricultureVideos.agriculture1.videoFile,
+        width: 150,
+      },
+    },
+    {
+      id: '6',
+      position: { x: -120, y: 260 },
+      type: 'video',
+      data: {
+        videoFullFileUrl: agricultureVideos.agriculture2.videoFullFileUrl,
+        videoFile: agricultureVideos.agriculture2.videoFile,
+        width: 140,
+      },
+    },
+    {
+      id: '7',
+      position: { x: 180, y: 100 },
+      type: 'video',
+      data: {
+        videoFullFileUrl: agricultureVideos.agriculture3.videoFullFileUrl,
+        videoFile: agricultureVideos.agriculture3.videoFile,
+        width: 200,
+      },
+    },
+    {
+      id: '8',
+      position: { x: 210, y: -20 },
+      type: 'video',
+      data: {
+        videoFullFileUrl: agricultureVideos.agriculture4.videoFullFileUrl,
+        videoFile: agricultureVideos.agriculture4.videoFile,
+      },
+    },
   ],
   edges: <Edge[]>[
     {

src/constants/city-page/city-page.ts

@@ -2,6 +2,8 @@ import { cubeParts } from '@/constants/cube-parts';
 import type { Edge, Node } from '@vue-flow/core';
 import { Position } from '@vue-flow/core';
 
+import { cityVideos } from '@/constants/city-page/city-videos';
+
 export const cityCards = [
   {
     title: 'Data Spaces',
@@ -83,6 +85,54 @@ export const cityGraph = {
       targetPosition: Position.Bottom,
       class: 'vue-flow__node--ecs-ds-cog',
     },
+    {
+      id: '6',
+      position: { x: -120, y: 0 },
+      type: 'video',
+      data: {
+        videoFile: cityVideos.city1.videoFile,
+        videoFullFileUrl: cityVideos.city1.videoFullFileUrl,
+      },
+    },
+    {
+      id: '7',
+      position: { x: -140, y: 140 },
+      type: 'video',
+      data: {
+        videoFile: cityVideos.city2.videoFile,
+        videoFullFileUrl: cityVideos.city2.videoFullFileUrl,
+        width: 140,
+      },
+    },
+    {
+      id: '8',
+      position: { x: -120, y: 280 },
+      type: 'video',
+      data: {
+        videoFile: cityVideos.city3.videoFile,
+        videoFullFileUrl: cityVideos.city3.videoFullFileUrl,
+      },
+    },
+    {
+      id: '9',
+      position: { x: 120, y: 270 },
+      type: 'video',
+      data: {
+        videoFile: cityVideos.city4.videoFile,
+        videoFullFileUrl: cityVideos.city4.videoFullFileUrl,
+        width: 150,
+      },
+    },
+    {
+      id: '10',
+      position: { x: 150, y: 0 },
+      type: 'video',
+      data: {
+        videoFile: cityVideos.city5.videoFile,
+        videoFullFileUrl: cityVideos.city5.videoFullFileUrl,
+        width: 130,
+      },
+    },
   ],
   edges: <Edge[]>[
     {

src/constants/energy-grid-page/energy-grid-page.ts

@@ -2,6 +2,8 @@ import { cubeParts } from '@/constants/cube-parts';
 import type { Edge, Node } from '@vue-flow/core';
 import { Position } from '@vue-flow/core';
 
+import { energyGridVideos } from '@/constants/energy-grid-page/energy-grid-videos';
+
 export const energyGridCards = [
   {
     title: 'Edge Cloud Services',
@@ -58,26 +60,84 @@ export const energyGridGraph = {
   nodes: <Node[]>[
     {
       id: '1',
-      position: { x: 5, y: 5 },
+      position: { x: 25, y: 5 },
+      targetPosition: Position.Bottom,
       class: 'vue-flow__node--ecs-ds',
     },
     {
       id: '2',
-      position: { x: 10, y: 150 },
+      position: { x: 10, y: 200 },
       class: 'vue-flow__node--ecs-ds-cog-gov',
     },
     {
       id: '3',
-      position: { x: 15, y: 300 },
-      sourcePosition: Position.Right,
+      position: { x: 200, y: 250 },
+      sourcePosition: Position.Bottom,
+      targetPosition: Position.Left,
       class: 'vue-flow__node--ecs',
     },
     {
       id: '4',
-      position: { x: 150, y: 75 },
+      position: { x: 200, y: 75 },
       targetPosition: Position.Left,
       class: 'vue-flow__node--ecs-gov',
     },
+    {
+      id: '5',
+      position: { x: 80, y: 0 },
+      type: 'video',
+      data: {
+        videoFile: energyGridVideos.energyGrid1.videoFile,
+        videoFullFileUrl: energyGridVideos.energyGrid1.videoFullFileUrl,
+      },
+    },
+    {
+      id: '6',
+      position: { x: 80, y: 140 },
+      type: 'video',
+      data: {
+        videoFile: energyGridVideos.energyGrid2.videoFile,
+        videoFullFileUrl: energyGridVideos.energyGrid2.videoFullFileUrl,
+        width: 150,
+      },
+    },
+    {
+      id: '7',
+      position: { x: 0, y: 280 },
+      type: 'video',
+      data: {
+        videoFile: energyGridVideos.energyGrid3.videoFile,
+        videoFullFileUrl: energyGridVideos.energyGrid3.videoFullFileUrl,
+      },
+    },
+    {
+      id: '8',
+      position: { x: 250, y: 200 },
+      type: 'video',
+      data: {
+        videoFile: energyGridVideos.energyGrid4.videoFile,
+        videoFullFileUrl: energyGridVideos.energyGrid4.videoFullFileUrl,
+        width: 100,
+      },
+    },
+    {
+      id: '9',
+      position: { x: 260, y: 40 },
+      type: 'video',
+      data: {
+        videoFile: energyGridVideos.energyGrid5.videoFile,
+        videoFullFileUrl: energyGridVideos.energyGrid5.videoFullFileUrl,
+      },
+    },
+    {
+      id: '10',
+      position: { x: -85, y: 100 },
+      type: 'video',
+      data: {
+        videoFile: energyGridVideos.energyGrid6.videoFile,
+        videoFullFileUrl: energyGridVideos.energyGrid6.videoFullFileUrl,
+      },
+    },
   ],
   edges: <Edge[]>[
     {
@@ -108,5 +168,12 @@ export const energyGridGraph = {
       animated: true,
       type: 'straight',
     },
+    {
+      id: 'e3->1',
+      source: '3',
+      target: '1',
+      animated: true,
+      type: 'straight',
+    },
   ],
 };

src/constants/energy-grid-page/energy-grid-videos.ts

@@ -1,9 +1,9 @@
-import energyGrid1 from '@/assets/videos/energy-grid/energy-grid-1.mp4';
-import energyGrid2 from '@/assets/videos/energy-grid/energy-grid-2.mp4';
-import energyGrid3 from '@/assets/videos/energy-grid/energy-grid-3.mp4';
-import energyGrid4 from '@/assets/videos/energy-grid/energy-grid-4.mp4';
-import energyGrid5 from '@/assets/videos/energy-grid/energy-grid-5.mp4';
-import energyGrid6 from '@/assets/videos/energy-grid/energy-grid-6.mp4';
+import energyGrid1 from '@/assets/videos/energy-grid/energy-grid_1.mp4';
+import energyGrid2 from '@/assets/videos/energy-grid/energy-grid_2.mp4';
+import energyGrid3 from '@/assets/videos/energy-grid/energy-grid_3.mp4';
+import energyGrid4 from '@/assets/videos/energy-grid/energy-grid_4.mp4';
+import energyGrid5 from '@/assets/videos/energy-grid/energy-grid_5.mp4';
+import energyGrid6 from '@/assets/videos/energy-grid/energy-grid_6.mp4';
 
 export const energyGridVideos = {
   energyGrid1: {