From 88bfec45cd8791361e38fda3cff0907ca96bcb83 Mon Sep 17 00:00:00 2001
From: lanlan <lan.lan@chaitin.com>
Date: Tue, 12 Dec 2023 17:20:50 +0800
Subject: [PATCH] feat(websit): mobile page style optimization

---
 documents/src/css/custom.css              |  7 ++-
 website/src/components/NavBar.tsx         | 75 ++++++++++++++---------
 website/src/components/home/Abilities.tsx |  2 +-
 website/src/components/home/Features.tsx  |  5 +-
 website/src/components/home/Version.tsx   |  2 +-
 website/src/pages/index.tsx               | 40 +++++++++---
 6 files changed, 84 insertions(+), 47 deletions(-)

diff --git a/documents/src/css/custom.css b/documents/src/css/custom.css
index cb253f5..9fff342 100644
--- a/documents/src/css/custom.css
+++ b/documents/src/css/custom.css
@@ -16,6 +16,7 @@ a:hover {
 :root {
   --ifm-color-primary: #0fc6c2;
   --ifm-breadcrumb-color-active: #0fc6c2;
+  --ifm-menu-color: #000;
   --ifm-menu-color-active: #0fc6c2;
   --ifm-link-hover-color: #0fc6c2;
   --ifm-footer-link-hover-color: #0fc6c2;
@@ -34,12 +35,12 @@ aside.theme-doc-sidebar-container {
   width: 240px !important;
 }
 
-.navbar__toggle.clean-btn svg {
+/* .navbar__toggle.clean-btn svg {
   color: white;
-}
+} */
 
 @media (max-width: 996px) {
   :root {
-    --ifm-menu-color: white;
+    --ifm-menu-color: #000;
   }
 }
diff --git a/website/src/components/NavBar.tsx b/website/src/components/NavBar.tsx
index a410180..ca733af 100644
--- a/website/src/components/NavBar.tsx
+++ b/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>
+  );
+};
diff --git a/website/src/components/home/Abilities.tsx b/website/src/components/home/Abilities.tsx
index 1857524..fdb21df 100644
--- a/website/src/components/home/Abilities.tsx
+++ b/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}>
diff --git a/website/src/components/home/Features.tsx b/website/src/components/home/Features.tsx
index 30d3704..bd5a89d 100644
--- a/website/src/components/home/Features.tsx
+++ b/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=""
diff --git a/website/src/components/home/Version.tsx b/website/src/components/home/Version.tsx
index 1c4550b..eee549a 100644
--- a/website/src/components/home/Version.tsx
+++ b/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",
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 1fe30c3..d228a03 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -100,20 +100,20 @@ export default function Home({ total, starCount }: { total: number, starCount: n
             quality={100}
             // unoptimized={true}
           />
-          <Box pt={{ xs: 21, md: 26.5 }} className="relative">
+          <Box pt={{ xs: 21, md: 26.5 }} className="relative" display={{ xs: "none", sm: "block" }}>
             <Box alignItems="center">
               <Stack
                 direction="row"
                 sx={{
                   color: "#86909C",
-                  letterSpacing: { xs: 0, sm: 4, md: 8 },
+                  letterSpacing: { xs: 4, md: 8 },
                 }}
                 justifyContent="center"
               >
                 <Typography
                   variant="h5"
                   sx={{
-                    mr: { xs: 12, sm: 22, md: 36.5 },
+                    mr: { xs: 22, md: 36.5 },
                     fontWeight: 400,
                     fontSize: { xs: "16px", md: "24px" },
                   }}
@@ -145,22 +145,45 @@ export default function Home({ total, starCount }: { total: number, starCount: n
                 <Typography
                   variant="h1"
                   sx={{
-                    mr: { xs: 9.5, sm: 13.5, md: 15.5 },
-                    fontSize: { xs: "32px", sm: "48px", md: "80px" },
+                    mr: { xs: 13.5, md: 15.5 },
+                    fontSize: { xs: "48px", md: "80px" },
                   }}
                 >
                   不让黑客
                 </Typography>
-                <Typography variant="h1" sx={{ fontSize: { xs: "32px", sm: "48px", md: "80px" }, }}>
+                <Typography variant="h1" sx={{ fontSize: { xs: "48px", md: "80px" }, }}>
                   越雷池一步
                 </Typography>
               </Stack>
             </Box>
           </Box>
+          <Box pt={{ xs: 16 }} className="relative" display={{ xs: "block", sm: "none" }}>
+            <Stack alignItems="center">
+              <Typography
+                variant="h1"
+                sx={{
+                  fontSize: "32px",
+                }}
+              >
+                不让黑客，越雷池一步
+              </Typography>
+              <Typography
+                variant="h5"
+                sx={{
+                  fontWeight: 400,
+                  mt: 2,
+                  fontSize: "16px",
+                  color: "#86909C",
+                }}
+              >
+                基于智能语义分析的，下一代 Web 应用防火墙
+              </Typography>
+            </Stack>
+          </Box>
           <Box
             sx={{
               position: "absolute",
-              bottom: { xs: 520, sm: 472, md: 351 },
+              bottom: { xs: 436, sm: 472, md: 351 },
               left: "50%",
               transform: "translateX(-50%)",
             }}
@@ -222,6 +245,7 @@ export default function Home({ total, starCount }: { total: number, starCount: n
                   xs={12}
                   sm={6}
                   mt={{ xs: 2, sm: 0 }}
+                  pl={{ xs: 10, sm: 0 }}
                   sx={{ display: "flex", justifyContent: "center" }}
                 >
                   <Link
@@ -258,7 +282,7 @@ export default function Home({ total, starCount }: { total: number, starCount: n
                   <Grid
                     key={article.title}
                     item
-                    xs={4}
+                    xs={6}
                     sm={4}
                     display="flex"
                     justifyContent={{ xs: 'flex-start', sm: justifyContents[index % 3] }}