feat: add live demo infomation

libs/components/layout/src/header/Logo/ModalContent.tsx

@@ -12,11 +12,14 @@ export const ModalContent = () => {
     return (
         <Container>
             <LeftContainer>
-                <LeftButtonContainer>
+                <LeftButtonContainer href="https://affine.pro" target="_blank">
                     <LeftLogoIcon />
                     <LeftButtonText>Official Website AFFiNE.pro</LeftButtonText>
                 </LeftButtonContainer>
-                <LeftButtonContainer>
+                <LeftButtonContainer
+                    href="https://github.com/toeverything/AFFiNE"
+                    target="_blank"
+                >
                     <LeftGithubIcon />
                     <LeftButtonText>Check Our Docs Open Source</LeftButtonText>
                 </LeftButtonContainer>
@@ -27,23 +30,29 @@ export const ModalContent = () => {
                     <div>Join our community.</div>
                 </RightTitle>
 
-                <Button>
+                <Button
+                    href="https://github.com/toeverything/AFFiNE"
+                    target="_blank"
+                >
                     <GitHubIcon />
                     <ButtonText>Github</ButtonText>
                 </Button>
-                <Button>
+                <Button href="https://www.reddit.com/r/Affine/" target="_blank">
                     <RedditIcon />
                     <ButtonText>Reddit</ButtonText>
                 </Button>
-                <Button>
+                <Button
+                    href="https://twitter.com/AffineOfficial"
+                    target="_blank"
+                >
                     <TwitterIcon />
                     <ButtonText>Twitter</ButtonText>
                 </Button>
-                <Button>
+                <Button href="https://t.me/affineworkos" target="_blank">
                     <TelegramIcon />
                     <ButtonText>Telegram</ButtonText>
                 </Button>
-                <Button>
+                <Button href="https://discord.gg/Arn7TqJBvG" target="_blank">
                     <DiscordIcon />
                     <ButtonText>Discord</ButtonText>
                 </Button>
@@ -64,11 +73,12 @@ const RightContainer = styled('div')({
 });
 
 const LeftContainer = styled('div')`
-    padding-left: 132px;
+    padding-left: 120px;
 
     &::before {
         content: '';
         position: absolute;
+        z-index: -1;
         left: 158px;
         display: block;
         width: 122px;
@@ -81,6 +91,7 @@ const LeftContainer = styled('div')`
     &::after {
         content: '';
         position: absolute;
+        z-index: -1;
         top: 330px;
         left: 280px;
         display: block;
@@ -105,12 +116,16 @@ const LeftContainer = styled('div')`
 //     },
 // });
 
-const LeftButtonContainer = styled('div')(({ theme }) => ({
+const LeftButtonContainer = styled('a')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     color: theme.affine.palette.primary,
     height: '110px',
+    cursor: 'pointer',
+    padding: '6px 12px',
+    borderRadius: '10px',
+    textDecoration: 'none',
 
     '& + &': {
         marginTop: '50px',
@@ -119,10 +134,12 @@ const LeftButtonContainer = styled('div')(({ theme }) => ({
 
 const LeftGithubIcon = styled(GitHubIcon)({
     fontSize: '50px !important',
+    cursor: 'pointer',
 });
 
 const LeftLogoIcon = styled(LogoIcon)({
     fontSize: '50px !important',
+    cursor: 'pointer',
 });
 
 const LeftButtonText = styled('span')({
@@ -131,6 +148,7 @@ const LeftButtonText = styled('span')({
     lineHeight: '36px',
     width: '200px',
     marginLeft: '40px',
+    cursor: 'pointer',
 });
 
 const RightTitle = styled('div')({
@@ -141,7 +159,7 @@ const RightTitle = styled('div')({
     color: '#000',
 });
 
-const Button = styled('div')(({ theme }) => ({
+const Button = styled('a')(({ theme }) => ({
     cursor: 'pointer',
     padding: '6px 24px',
     fontSize: '18px',
@@ -150,6 +168,7 @@ const Button = styled('div')(({ theme }) => ({
     alignItems: 'center',
     borderRadius: '10px',
     color: theme.affine.palette.primary,
+    textDecoration: 'none',
 
     '&:hover': {
         backgroundColor: '#EDF3FF',