Improve MS Dashboard (#1346)

* Add Minimal Ms Redesign

* Add redesign V2

* clean-index

* polish integration with designer feedback

* Change banner

* fix robot api test

* fix dusa wave

* add translation

* review changes

api/test/robot_tests/front_ends/front_ends.robot

@@ -14,12 +14,12 @@ Suite Teardown      Close All Browsers
 *** Test Cases ***
 GET /
     Open Massa Station Page    ${API_URL}/
-    Wait Until Page Contains    Decentralization made easy    10
+    Wait Until Page Contains    Securely explore Massa's blockchain universe    10
 
 GET /web/
     Open Massa Station Page    ${API_URL}/web/
-    Wait Until Page Contains    Decentralization made easy    10
+    Wait Until Page Contains    Securely explore Massa's blockchain universe    10
 
 GET /web/index
     Open Massa Station Page    ${API_URL}/web/index
-    Wait Until Page Contains    Decentralization made easy    10
+    Wait Until Page Contains    Securely explore Massa's blockchain universe    10

web/massastation/package.json

@@ -21,6 +21,7 @@
     "axios": "^1.4.0",
     "dot-object": "^2.1.4",
     "esbuild": "0.17.19",
+    "framer-motion": "^11.1.5",
     "jszip": "^3.10.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

web/massastation/src/assets/dashboard/index.ts

@@ -0,0 +1,6 @@
+export * from './DusaWave.svg';
+export * from './FoundationBis.svg';
+export * from './BridgeOutline.svg';
+export * from './MassaLabs.svg';
+export * from './DusaWave.svg';
+export * from './Explorer.svg';

web/massastation/src/i18n/en_US.json

@@ -27,7 +27,7 @@
     "link": "Go back to the Welcome page!"
   },
   "index": {
-    "title-banner": "Decentralization made easy",
+    "title-banner": "Securely explore Massa's blockchain universe",
     "buttons": {
       "search": "Search Massa ecosystem",
       "explore": "Explore module store"
@@ -36,5 +36,21 @@
   "placeholder": {
     "teaser-banner": "A new way to use web is coming",
     "teaser-web-on-chain": "We are crafting a new era for our web on-chain feature..."
+  },
+  "dashboard": {
+    "bridge-desc": "Bridge ERC-20 tokens from EVM chains to Massa and vice versa!",
+    "explorer-desc": "Search through real-time and historical records on Massa blockchain.",
+    "foundation-desc": "Learn about Massa ecosystem and initiatives.",
+    "massalabs-desc": "Unique Lab supporting Massa ecosystem and creating innovative solutions.",
+    "purrfect-desc": "Create, buy & sell NFTs on the Massa blockchain.",
+    "dusa-desc": "Fully decentralized exchange protocol."
+  },
+  "modules": {
+    "bridge": "Massa Bridge",
+    "explorer": "Massa Explorer",
+    "foundation": "Massa Foundation",
+    "massalabs": "Massa Labs",
+    "purrfect": "Purrfect Universe",
+    "dusa": "Dusa"
   }
 }

web/massastation/src/pages/Index/Dashboard/Bridge.tsx

@@ -0,0 +1,26 @@
+import { RedirectTile } from '@massalabs/react-ui-kit';
+import bridgeOutline from '../../../assets/dashboard/BridgeOutline.svg';
+import { motion } from 'framer-motion';
+import Intl from '@/i18n/i18n';
+
+export function Bridge() {
+  return (
+    <motion.div className="h-full" whileHover={{ scale: 1.05 }}>
+      <RedirectTile
+        url="https://bridge.massa.net"
+        size="cs"
+        customSize="h-full"
+        style={{
+          backgroundImage: `url(${bridgeOutline})`,
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+        }}
+      >
+        <div className="relative top-10 pl-2 h-fit flex flex-col gap-4 justify-between">
+          <p className="mas-subtitle">{Intl.t('modules.bridge')}</p>
+          <p>{Intl.t('dashboard.bridge-desc')}</p>
+        </div>
+      </RedirectTile>
+    </motion.div>
+  );
+}