styling changes

package.json

@@ -89,6 +89,11 @@
     "source-map-explorer": "^2.5.3",
     "styled-components": "^5.3.6"
   },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.15.0"
+  },
   "resolutions": {
     "@polkadot/api": "^9.7.1",
     "@polkadot/api-augment": "^9.7.1",

packages/apps/src/index.tsx

@@ -1,28 +1,47 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { Container, Typography, Box, Link, List, ListItem } from '@mui/material';
 
 const App = () => (
-  <div style={{ textAlign: 'center', marginTop: '50px' }}>
-    <img src='/dock-mainnet.png' />
-    <h1 style={{ textAlign: 'center' }}>Dock Blockchain Closure Announcement</h1>
-
-    <div style={{ display: 'flex', justifyContent: 'center' }}>
-      <div style={{ textAlign: 'left', maxWidth: '600px' }}>
-        <p style={{ fontSize: '18px' }}>Thank you for your interest in the Dock blockchain. The Dock network has migrated its functionality and all tokens to the cheqd blockchain. The official migration window ended on March 15, 2025. This strategic move allows us to leverage enhanced capabilities and continue delivering innovative blockchain solutions.</p>
-        <p style={{ fontSize: '18px' }}>For more information on the merger please read our detailed <a href='https://www.dock.io/post/dock-and-cheqd-form-alliance-to-accelerate-global-adoption-of-decentralized-id' target='_blank'>blog post</a>.</p>
-        <h1 style={{ textAlign: 'center' }}>Get in Touch with cheqd</h1>
-        <p style={{ fontSize: '18px' }}>We encourage you to stay connected with the cheqd community:</p>
-        <ul style={{ fontSize: '18px' }}>
-          <li>Website: <a href='https://cheqd.io' target='_blank'>https://cheqd.io</a></li>
-          <li>Telegram: <a href='https://t.me/cheqd' target='_blank'>https://t.me/cheqd</a></li>
-        </ul>
-        <p style={{ fontSize: '18px' }}>Thank you for your understanding and continued support.<br />
-          <br />
-          The Dock Team
-        </p>
-      </div>
-    </div>
-  </div>
+  <Container maxWidth="md" style={{ marginTop: '50px' }}>
+    <Box>
+      <img src='/dock-mainnet.png' alt="Dock Mainnet" style={{ maxWidth: '100%' }} />
+    </Box>
+    <Typography variant="h4" component="h1" gutterBottom>
+      Dock Blockchain Closure Announcement
+    </Typography>
+    <Box textAlign="left" mt={4}>
+      <Typography variant="body1" paragraph>
+        Thank you for your interest in the Dock blockchain. The Dock network has migrated its functionality and all tokens to the cheqd blockchain. The official migration window ended on March 15, 2025. This strategic move allows us to leverage enhanced capabilities and continue delivering innovative blockchain solutions.
+      </Typography>
+      <Typography variant="body1" paragraph>
+        For more information on the merger please read our detailed{' '}
+        <Link href='https://www.dock.io/post/dock-and-cheqd-form-alliance-to-accelerate-global-adoption-of-decentralized-id' target='_blank'>
+          blog post
+        </Link>.
+      </Typography>
+      <Typography variant="h4" component="h1" gutterBottom>
+        Get in Touch with cheqd
+      </Typography>
+      <Typography variant="body1" paragraph>
+        We encourage you to stay connected with the cheqd community:
+        <List>
+          <ListItem>
+            Website: <Link href='https://cheqd.io' target='_blank'>https://cheqd.io</Link>
+          </ListItem>
+          <ListItem>
+            Telegram: <Link href='https://t.me/cheqd' target='_blank'>https://t.me/cheqd</Link>
+          </ListItem>
+        </List>
+      </Typography>
+      <Typography variant="body1" paragraph>
+        Thank you for your understanding and continued support.
+        <br />
+        <br />
+        The Dock Team
+      </Typography>
+    </Box>
+  </Container>
 );
 
 const rootId = 'root';