feat(websit): mobile page style optimization

website/src/components/NavBar.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { AppBar, Drawer, Grid, Toolbar, Typography, Button, Box, Container, Link, List, ListItem, ListItemText, Stack } from '@mui/material';
+import { AppBar, Drawer, Grid, Toolbar, Typography, Button, Box, Container, Link, List, ListItem, ListItemText, Stack, IconButton } from '@mui/material';
 import Image from 'next/image';
 import dynamic from 'next/dynamic';
 import Icon from "@/components/Icon";
+import CloseIcon from '@mui/icons-material/Close';
 import usePopupState, { bindPopover, bindHover } from '@/components/Popover/usePopupState'
 
 const navs = [
@@ -56,32 +57,7 @@ export default function NavBar() {
             <Grid container justifyContent="space-around">
               <Grid item xs={10} md={6} display="flex">
                 <Box display="flex" alignItems="center">
-                  <Link href="/">
-                    <Grid container flexDirection="row" display="flex" spacing={2} sx={{ marginTop: '0px', minWidth: "192px" }}>
-                      <Box width={{ xs: "40px", md: "24px" }} height={{ xs: "43px", md: "26px" }} position="relative">
-                        <Image
-                          src="/images/safeline.svg"
-                          alt="SafeLine Logo"
-                          layout="responsive"
-                          width={40}
-                          height={43}
-                        />
-                      </Box>
-                      <Typography
-                        variant="h6"
-                        sx={{
-                          ml: { xs: 2, md: 1 },
-                          mr: { xs: 0, md: 7 },
-                          fontSize: { xs: "24px", md: "16px" },
-                          display: 'flex',
-                          alignItems: 'center',
-                          fontFamily: "AlimamaShuHeiTi-Bold",
-                        }}
-                      >
-                        雷池 SafeLine
-                      </Typography>
-                    </Grid>
-                  </Link>
+                  <SafelineTitle />
                   <Box display={{ xs: 'none', md: 'flex' }} alignItems="center">
                     {navs.map((nav, index) => (
                       <Box component="span" key={index} mr={3.5}>
@@ -172,16 +148,24 @@ export default function NavBar() {
       </AppBar>
       <Drawer
         anchor='right'
-        sx={{ width: 200 }}
+        sx={{ width: "100%" }}
         variant="temporary"
         open={open}
         PaperProps={{
           style: {
-            width: '260px',
+            width: '100%',
           },
         }}
         onClose={() => setOpen(false)}
       >
+        <Stack direction="row" justifyContent="space-between" pl={4} pr={0.5} py={1} sx={{ boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 2px 0px" }}>
+          <Box>
+            <SafelineTitle />
+          </Box>
+          <IconButton onClick={() => setOpen(false)}>
+            <CloseIcon />
+          </IconButton>
+        </Stack>
         <List>
           {menus.map((menu) => (
             <Link key={menu.label} href={menu.to} target={menu.target}>
@@ -191,7 +175,7 @@ export default function NavBar() {
             </Link>
           ))}
         </List>
-        <Box textAlign="center">
+        <Box ml={2}>
           <Image
             src="/images/wechat-230825.png"
             alt="wechat"
@@ -203,3 +187,34 @@ export default function NavBar() {
     </>
   );
 }
+
+export const SafelineTitle: React.FC = () => {
+  return (
+    <Link href="/">
+      <Grid container flexDirection="row" display="flex" spacing={2} sx={{ marginTop: '0px', minWidth: "192px" }}>
+        <Box width={{ xs: "40px", md: "24px" }} height={{ xs: "43px", md: "26px" }} position="relative">
+          <Image
+            src="/images/safeline.svg"
+            alt="SafeLine Logo"
+            layout="responsive"
+            width={40}
+            height={43}
+          />
+        </Box>
+        <Typography
+          variant="h6"
+          sx={{
+            ml: { xs: 2, md: 1 },
+            mr: { xs: 0, md: 7 },
+            fontSize: { xs: "24px", md: "16px" },
+            display: 'flex',
+            alignItems: 'center',
+            fontFamily: "AlimamaShuHeiTi-Bold",
+          }}
+        >
+          雷池 SafeLine
+        </Typography>
+      </Grid>
+    </Link>
+  );
+};

website/src/components/home/Abilities.tsx

@@ -69,7 +69,7 @@ const Abilities = () => {
       <Container maxWidth="lg">
         <Grid container alignItems="center">
           <Grid item xs={12} md={6}>
-            <Typography variant="h2" mb={4.5} textAlign={{ xs: "center", md: "left" }} fontSize={{ sx: "32px", md: "48px" }}>
+            <Typography variant="h2" mb={4.5} textAlign={{ xs: "center", md: "left" }} fontSize={{ xs: "32px", md: "48px" }}>
               多维能力拓展
             </Typography>
             <Grid container spacing={2}>

website/src/components/home/Features.tsx

@@ -158,10 +158,7 @@ const FEATURE_LIST = [
           </List>
         </Grid>
         <Grid item xs={12} md={6} mt={7}>
-          <Box
-            position={'relative'}
-            width={{ xs: "80%", md: "100%" }}
-          >
+          <Box position={'relative'}>
             <Image
               src="/images/feature3-bg.png"
               alt=""

website/src/components/home/Version.tsx

@@ -32,7 +32,7 @@ const Version = () => {
           <Button
             variant="outlined"
             sx={{
-              width: { xs: "384px", md: "146px" },
+              width: { xs: "100%", sm: "384px", md: "146px" },
               height: { xs: "72px", md: "50px" },
               mt: 4,
               backgroundColor: "common.white",