feat: en home page

website/en/public/images/feature1.svg

@@ -8,8 +8,8 @@
             <feGaussianBlur stdDeviation="20" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.568627451   0 0 0 0 0.619607843   0 0 0 0 0.670588235  0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <rect id="path-3" x="17" y="174" width="159" height="51" rx="25.5"></rect>
-        <filter x="-44.0%" y="-98.0%" width="188.1%" height="374.5%" filterUnits="objectBoundingBox" id="filter-4">
+        <rect id="path-3" x="17" y="174" width="195" height="51" rx="25.5"></rect>
+        <filter x="-35.9%" y="-98.0%" width="171.8%" height="374.5%" filterUnits="objectBoundingBox" id="filter-4">
             <feOffset dx="0" dy="20" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="20" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.352941176   0 0 0 0 0.368627451  0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
@@ -21,16 +21,16 @@
             <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
             <feColorMatrix values="0 0 0 0 0.568627451   0 0 0 0 0.619607843   0 0 0 0 0.670588235  0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
-        <rect id="path-7" x="329" y="255" width="214" height="114" rx="12"></rect>
-        <filter x="-32.7%" y="-43.9%" width="165.4%" height="222.8%" filterUnits="objectBoundingBox" id="filter-8">
+        <rect id="path-7" x="329" y="234" width="214" height="135" rx="12"></rect>
+        <filter x="-32.7%" y="-37.0%" width="165.4%" height="203.7%" filterUnits="objectBoundingBox" id="filter-8">
             <feOffset dx="0" dy="20" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="20" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
             <feColorMatrix values="0 0 0 0 0.568627451   0 0 0 0 0.619607843   0 0 0 0 0.670588235  0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
     <g id="官网设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="白色版本3" transform="translate(-977.000000, -1250.000000)">
-            <g id="语义分析" transform="translate(1000.000000, 1250.000000)">
+        <g id="官网英文版" transform="translate(-977.000000, -1114.000000)">
+            <g id="语义分析" transform="translate(1000.000000, 1114.000000)">
                 <rect id="矩形" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="560" height="400"></rect>
                 <g id="矩形">
                     <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
@@ -47,8 +47,8 @@
                     <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
                     <use fill-opacity="0.89767264" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-5"></use>
                 </g>
-                <text id="0day-攻击" font-family="PingFangSC-Medium, PingFang SC" font-size="24" font-weight="400" line-spacing="36" fill="#FFFFFF">
-                    <tspan x="41" y="206">0day 攻击</tspan>
+                <text id="0day-attacks" font-family="Gilroy-Medium, Gilroy" font-size="24" font-weight="400" line-spacing="36" fill="#FFFFFF">
+                    <tspan x="41" y="204">0day attacks</tspan>
                 </text>
                 <circle id="椭圆形" fill-opacity="0.8" fill="#FF7777" cx="93" cy="67" r="3"></circle>
                 <circle id="椭圆形备份" fill="#FFC641" cx="103" cy="67" r="3"></circle>
@@ -64,23 +64,24 @@
                 <rect id="矩形备份-33" fill="#F7F8FA" x="306" y="128" width="176" height="7" rx="3.5"></rect>
                 <rect id="矩形备份-32" fill="#F7F8FA" x="98" y="151" width="176" height="7" rx="3.5"></rect>
                 <rect id="矩形备份-38" fill="#F7F8FA" x="306" y="151" width="176" height="7" rx="3.5"></rect>
-                <text id="多维-Web-应用防护" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" line-spacing="20" fill="#000000" fill-opacity="0.5">
-                    <tspan x="345" y="284">多维 Web 应用防护</tspan>
+                <text id="Multidimensional-Web" font-family="Gilroy-Regular, Gilroy" font-size="12" font-weight="normal" line-spacing="20" fill="#000000" fill-opacity="0.5">
+                    <tspan x="345" y="261">Multidimensional Web </tspan>
+                    <tspan x="345" y="281">Application Protection</tspan>
                 </text>
-                <text id="SQL-注入" font-family="PingFangSC-Regular, PingFang SC" font-size="10" font-weight="normal" line-spacing="10" fill="#52C41A">
-                    <tspan x="361" y="309">SQL 注入</tspan>
+                <text id="SQL-injection" font-family="Gilroy-Regular, Gilroy" font-size="10" font-weight="normal" line-spacing="10" fill="#52C41A">
+                    <tspan x="361" y="308">SQL injection</tspan>
                 </text>
-                <text id="XSS" font-family="PingFangSC-Regular, PingFang SC" font-size="10" font-weight="normal" line-spacing="10" fill="#FFC641">
-                    <tspan x="361" y="331">XSS</tspan>
+                <text id="XSS" font-family="Gilroy-Regular, Gilroy" font-size="10" font-weight="normal" line-spacing="10" fill="#FFC641">
+                    <tspan x="361" y="330">XSS</tspan>
                 </text>
-                <text id="SSRF" font-family="PingFangSC-Regular, PingFang SC" font-size="10" font-weight="normal" line-spacing="10" fill="#FFC641">
-                    <tspan x="454" y="331">SSRF</tspan>
+                <text id="SSRF" font-family="Gilroy-Regular, Gilroy" font-size="10" font-weight="normal" line-spacing="10" fill="#FFC641">
+                    <tspan x="454" y="330">SSRF</tspan>
                 </text>
-                <text id="CSRF" font-family="PingFangSC-Regular, PingFang SC" font-size="10" font-weight="normal" line-spacing="10" fill="#52C41A">
-                    <tspan x="454" y="309">CSRF</tspan>
+                <text id="CSRF" font-family="Gilroy-Regular, Gilroy" font-size="10" font-weight="normal" line-spacing="10" fill="#52C41A">
+                    <tspan x="454" y="308">CSRF</tspan>
                 </text>
-                <text id="……" font-family="PingFangSC-Regular, PingFang SC" font-size="10" font-weight="normal" line-spacing="20" fill="#FFC641">
-                    <tspan x="360" y="344">……</tspan>
+                <text id="……" font-family="Gilroy-Regular, Gilroy" font-size="10" font-weight="normal" line-spacing="20" fill="#FFC641">
+                    <tspan x="361" y="343">……</tspan>
                 </text>
                 <circle id="椭圆形" stroke="#52C41A" stroke-width="2" cx="349" cy="303" r="3"></circle>
                 <circle id="椭圆形备份-2885" stroke="#FFC641" stroke-width="2" cx="349" cy="325" r="3"></circle>

website/en/public/images/logo/discord.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>discord</title>
+    <g id="官网设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="官网英文版" transform="translate(-1464.000000, -4443.000000)" fill-rule="nonzero">
+            <g id="discord" transform="translate(1464.000000, 4443.000000)">
+                <path d="M2.8,0 C1.2536027,0 0,1.2536027 0,2.8 L0,11.2 C0,12.7463973 1.2536027,14 2.8,14 L11.2,14 C11.9426062,14 12.6547971,13.7050008 13.179899,13.179899 C13.7050008,12.6547971 14,11.9426062 14,11.2 L14,2.8 C14,1.2536027 12.7463973,0 11.2,0 L2.8,0 Z" id="路径" fill="#FFFFFF"></path>
+                <path d="M5.88,3.928 L5.955,4.018 C4.61499999,4.397 4.005,4.985 4.005,4.985 C4.005,4.985 4.16800001,4.895 4.443,4.77700001 C5.23999999,4.427 5.873,4.33700001 6.133,4.307 L6.14999999,4.305 C6.188,4.298 6.221,4.293 6.26,4.293 C6.75893557,4.22795855 7.26386644,4.22292267 7.764,4.278 C8.54929044,4.36841425 9.30999521,4.60840455 10.005,4.985 C10.005,4.985 9.417,4.427 8.15100001,4.047 L8.255,3.927 L8.282,3.928 C8.45,3.93100001 9.37700001,3.981 10.34,4.702 C10.34,4.702 11.412,6.63099999 11.412,9.00599999 L11.407,9.01299999 C11.344,9.10799999 10.7,10.073 9.141,10.123 C9.141,10.123 8.87299999,9.80300001 8.651,9.527 C9.625,9.25099999 9.998,8.64800001 9.998,8.64800001 C9.72988915,8.826599 9.44238463,8.97420925 9.141,9.088 C8.19124454,9.48709561 7.14457538,9.59600766 6.133,9.401 C5.75850712,9.33136488 5.39198761,9.22415625 5.039,9.081 C4.85239064,9.00888276 4.67096251,8.92401582 4.496,8.827 L4.479,8.81699999 L4.46200001,8.808 C4.45029801,8.80272385 4.43894194,8.79671181 4.42799999,8.79 L4.41399999,8.78199999 C4.408,8.778 4.40399999,8.77499999 4.39900001,8.77499999 C4.265,8.7 4.19000001,8.64799999 4.18999999,8.64800001 C4.18999998,8.64800002 4.548,9.23600001 5.493,9.519 C5.27,9.802 4.99399999,10.129 4.99400001,10.129 C3.57400001,10.085 2.913,9.27899999 2.759,9.06 L2.72699999,9.01200001 L2.723,9.00599999 C2.723,6.63099999 3.796,4.702 3.796,4.702 C4.766,3.982 5.68700001,3.932 5.854,3.928 L5.88,3.928 L5.88,3.928 Z M8.39699999,6.67499999 C7.973,6.67499999 7.637,7.04 7.637,7.495 C7.637,7.94799999 7.98,8.31299999 8.39699999,8.31299999 C8.82199999,8.31299999 9.157,7.94799999 9.157,7.49399999 C9.157,7.04 8.814,6.67499999 8.39699999,6.67499999 Z M5.68000001,6.67499999 C5.25500001,6.67499999 4.92,7.04 4.92,7.495 C4.92,7.94799999 5.263,8.31299999 5.68000001,8.31299999 C6.104,8.31299999 6.43900001,7.94799999 6.439,7.49399999 C6.446,7.04 6.104,6.67499999 5.679,6.67499999 L5.68000001,6.67499999 Z" id="形状" fill="#000000"></path>
+            </g>
+        </g>
+    </g>
+</svg>

website/en/src/components/Footer.tsx

@@ -1,38 +1,47 @@
-import React from 'react';
-import Image from 'next/image'
-import { Box, Grid, Typography, Stack, SxProps, Container, Link } from '@mui/material';
+import React from "react";
+import Image from "next/image";
+import {
+  Box,
+  Grid,
+  Typography,
+  Stack,
+  SxProps,
+  Container,
+  Link,
+} from "@mui/material";
+import Icon from "@/components/Icon";
 
 const LINKS = [
   {
-    title: "资源",
+    title: "Resource",
     items: [
       {
-        label: "技术文档",
+        label: "Technical documentation",
         to: "/docs",
       },
       {
-        label: "教学视频",
+        label: "Teaching videos",
         to: "https://www.bilibili.com/medialist/detail/ml2342694989",
       },
       {
-        label: "学习资料",
+        label: "Learning materials",
         to: "/docs",
       },
       {
-        label: "更新日志",
+        label: "Update logs",
         to: "/docs/about/changelog",
       },
     ],
   },
   {
-    title: "关于我们",
+    title: "About Us",
     items: [
       {
-        label: "长亭科技",
+        label: "Chaitin",
         to: "https://www.chaitin.cn/zh/",
       },
       {
-        label: "CT Stack 安全社区",
+        label: "CT Stack Safe Community",
         to: "https://stack.chaitin.cn/",
       },
     ],
@@ -40,8 +49,12 @@ const LINKS = [
 ];
 
 export const items = [
-  { to: "/community", label: "开发计划", target: "_self" },
-  { to: "https://github.com/chaitin/SafeLine/blob/main/LICENSE.md", label: "用户协议", target: "_blank" },
+  { to: "/community", label: "Developer", target: "_self" },
+  {
+    to: "https://github.com/chaitin/SafeLine/blob/main/LICENSE.md",
+    label: "User Agreement",
+    target: "_blank",
+  },
 ];
 
 export default function Footer() {
@@ -49,19 +62,27 @@ export default function Footer() {
     <Box
       component="footer"
       sx={{
-        backgroundColor: '#121426',
+        backgroundColor: "#121426",
       }}
     >
       <Container maxWidth="lg">
-        <Grid container justifyContent="space-around" columns={24} sx={{ pb: 5, pt: 6 }} mt={0}>
+        <Grid
+          container
+          justifyContent="space-around"
+          columns={24}
+          sx={{ pb: 5, pt: 6 }}
+          mt={0}
+        >
           <Grid item xs={24} md={10}>
-            <Stack
-              id="groupchat"
-              spacing={4}
-              alignItems="flex-start"
-            >
+            <Stack id="groupchat" spacing={4} alignItems="flex-start">
               <Link href="/">
-                <Grid container flexDirection="row" display="flex" alignItems="center" sx={{ marginTop: 0 }}>
+                <Grid
+                  container
+                  flexDirection="row"
+                  display="flex"
+                  alignItems="center"
+                  sx={{ marginTop: 0 }}
+                >
                   <Image
                     src="/images/safeline.svg"
                     alt="SafeLine Logo"
@@ -72,14 +93,14 @@ export default function Footer() {
                     variant="h4"
                     sx={{
                       color: "common.white",
-                      fontFamily: "AlimamaShuHeiTi-Bold",
-                      marginLeft: '16px',
+                      fontFamily: "GilroyBold",
+                      marginLeft: "16px",
                       fontSize: { xs: "40px", md: "28px" },
                       position: "relative",
                       bottom: 5,
-                     }}
+                    }}
                   >
-                    雷池 SafeLine
+                    SafeLine WAF
                   </Typography>
                 </Grid>
               </Link>
@@ -87,11 +108,27 @@ export default function Footer() {
                 {items.map((item, index) => (
                   <Box key={index} component="span" mr={5}>
                     {item.to ? (
-                      <Link sx={{ fontSize: '16px', fontWeight: 600, color: "common.white" }} href={item.to} rel={item.label} target={item.target}>
+                      <Link
+                        sx={{
+                          fontSize: "16px",
+                          fontWeight: 600,
+                          color: "common.white",
+                        }}
+                        href={item.to}
+                        rel={item.label}
+                        target={item.target}
+                      >
                         {item.label}
                       </Link>
                     ) : (
-                      <Typography component="span" sx={{ fontSize: '16px', fontWeight: 600, color: "common.white" }}>
+                      <Typography
+                        component="span"
+                        sx={{
+                          fontSize: "16px",
+                          fontWeight: 600,
+                          color: "common.white",
+                        }}
+                      >
                         {item.label}
                       </Typography>
                     )}
@@ -102,16 +139,23 @@ export default function Footer() {
           </Grid>
           {LINKS.map((link) => (
             <Grid item xs={8} md={5} my={{ xs: 4, md: 0 }} key={link.title}>
-              <Stack
-                id="groupchat"
-                spacing={1}
-                alignItems="flex-start"
-              >
+              <Stack id="groupchat" spacing={1} alignItems="flex-start">
                 <Title title={link.title} />
                 <Grid container>
                   {link.items.map((item, index) => (
                     <Grid key={index} item xs={12}>
-                      <Link sx={{ fontSize: '14px', color: "common.white", opacity: 0.5, fontWeight: 400, lineHeight: "38px" }} href={item.to} target="_blank" rel={item.label}>
+                      <Link
+                        sx={{
+                          fontSize: "14px",
+                          color: "common.white",
+                          opacity: 0.5,
+                          fontWeight: 400,
+                          lineHeight: "38px",
+                        }}
+                        href={item.to}
+                        target="_blank"
+                        rel={item.label}
+                      >
                         {item.label}
                       </Link>
                     </Grid>
@@ -120,13 +164,46 @@ export default function Footer() {
               </Stack>
             </Grid>
           ))}
+          <Grid item xs={8} md={2} my={{ xs: 4, md: 0 }}>
+            <Stack
+              id="groupchat"
+              spacing={1}
+              alignItems="center"
+              direction="row"
+            >
+              <Link
+                href="https://discord.gg/wyshSVuvxC"
+                target="_blank"
+                sx={{
+                  color: "common.white",
+                  display: "flex",
+                  "&:hover": {
+                    color: "primary.main",
+                  },
+                }}
+                mr={3.5}
+              >
+                <Box component='img' src='/images/logo/discord.svg' sx={{mr: 1}}></Box>
+                Discord
+              </Link>
+            </Stack>
+          </Grid>
         </Grid>
-        <Grid container sx={{ pb: 1.5 }} justifyContent={{ xs: "center", md: "flex-start" }}>
+        <Grid
+          container
+          sx={{ pb: 1.5 }}
+          justifyContent={{ xs: "center", md: "flex-start" }}
+        >
           <Typography
             variant="inherit"
-            sx={{ fontSize: "12px", color: "rgba(255,255,255,0.26)", fontWeight: 400 }}
+            sx={{
+              fontSize: "12px",
+              color: "rgba(255,255,255,0.26)",
+              fontWeight: 400,
+            }}
           >
-            Copyright © 2023 北京长亭科技有限公司. All rights reserved.
+            Copyright © 2024 Beijing Chaitin Future Technology.All rights
+            reserved.
           </Typography>
         </Grid>
       </Container>

website/en/src/components/NavBar.tsx

@@ -25,8 +25,12 @@ import usePopupState, {
 } from "@/components/Popover/usePopupState";
 
 const navs = [
-  { to: "https://docs.waf.chaitin.com/", label: "帮助文档", target: "_blank" },
-  { to: "/community", label: "开发计划", target: "_self" },
+  {
+    to: "https://docs.waf.chaitin.com/",
+    label: "Help document",
+    target: "_blank",
+  },
+  { to: "/community", label: "Developer", target: "_self" },
 ];
 
 const menus = [
@@ -89,6 +93,7 @@ export default function NavBar() {
               }
             : {}),
           alignItems: "center",
+          fontFamily: "Gilroy",
         }}
       >
         <Container maxWidth="lg" sx={{ mx: 0 }}>
@@ -159,15 +164,18 @@ export default function NavBar() {
                     mr={3.5}
                     target="_blank"
                   >
-                    演示 Demo
+                    Demo
                   </Link>
                   <Button
                     variant="contained"
                     target="_blank"
-                    sx={{ width: { xs: "100%", sm: "auto" } }}
+                    sx={{
+                      width: { xs: "100%", sm: "auto" },
+                      fontFamily: "Gilroy",
+                    }}
                     href="/docs/guide/install"
                   >
-                    立即安装
+                    Start
                   </Button>
                 </Box>
                 <Stack justifyContent="center">
@@ -266,11 +274,11 @@ export const SafelineTitle: React.FC = () => {
             fontSize: { xs: "24px", md: "16px" },
             display: "flex",
             alignItems: "center",
-            fontFamily: "AlimamaShuHeiTi-Bold",
+            fontFamily: "GilroyBold",
             fontWeight: 500,
           }}
         >
-          雷池 SafeLine
+          SafeLine WAF
         </Typography>
       </Grid>
     </Link>

website/en/src/components/home/Abilities.tsx

@@ -5,44 +5,44 @@ import Icon from "@/components/Icon";
 
 const ABILITY_LIST = [
   {
-    title: "人机验证",
+    title: "Human machine verification",
     href: "/docs/about/challenge",
     img: "/images/ability/ability_verification.png",
   },
   {
-    title: "百川网站监控联动",
+    title: "Rivers website monitoring linkage",
     href: "/docs/practice/monitor",
     img: "/images/ability/ability_rivers.png",
   },
   {
-    title: "APISIX 插件集成",
+    title: "APISIX plugin integration",
     href: "/docs/practice/apisix",
-    img: "/images/ability/ability_apisix.svg",
+    img: "/images/ability/ability_apisix.png",
   },
   {
-    title: "长亭社区恶意 IP 情报",
+    title: "Malicious IP Intelligence",
     href: "/docs/practice/IpIntelligence",
-    img: "/images/ability/ability_maliciousip.svg",
+    img: "/images/ability/ability_maliciousip.png",
   },
   {
-    title: "申请免费证书",
+    title: "Apply for a free certificate",
     href: "",
-    img: "/images/ability/ability_cert.svg",
+    img: "/images/ability/ability_cert.png",
   },
   {
-    title: "站点资源一览",
+    title: "Overview of Site Resources",
     href: "",
     img: "/images/ability/ability_asset.png",
   },
   {
-    title: "CC 攻击防护",
+    title: "CC attack protection",
     href: "",
-    img: "/images/ability/ability_CC.svg",
+    img: "/images/ability/ability_CC.png",
   },
   {
-    title: "一键强制 HTTPS",
+    title: "One click force HTTPS",
     href: "",
-    img: "/images/ability/ability_HTTPS.svg",
+    img: "/images/ability/ability_HTTPS.png",
   },
 ];
 
@@ -64,13 +64,19 @@ const Abilities = () => {
         pt: { xs: 8, md: 18 },
         pb: { xs: 8, md: 27 },
         px: 2,
+        fontFamily: 'Gilroy'
       }}
     >
       <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={{ xs: "32px", md: "48px" }}>
-              多维能力拓展
+          <Grid item xs={12} md={6} sx={{overflow: 'visible', whiteSpace: 'nowrap'}}>
+            <Typography
+              variant="h2"
+              mb={4.5}
+              textAlign={{ xs: "center", md: "left" }}
+              fontSize={{ xs: "32px", md: "48px" }}
+            >
+              Multidimensional capability expansion
             </Typography>
             <Grid container spacing={2}>
               {ABILITY_LIST.map((ability) => (
@@ -106,7 +112,7 @@ const Abilities = () => {
 export default Abilities;
 
 interface ItemProps {
-  ability: any
+  ability: any;
   hoveredUrl?: string;
   handleIconHover: Function;
 }
@@ -126,7 +132,7 @@ const AbilityItem: React.FC<ItemProps> = ({
           width: { xs: "100%", lg: "274px" },
         }}
         onMouseEnter={() => handleIconHover(ability.img)}
-        onMouseLeave={() => { }}
+        onMouseLeave={() => {}}
         onClick={() => handleIconHover(ability.img)}
       >
         {ability.href ? (
@@ -134,13 +140,14 @@ const AbilityItem: React.FC<ItemProps> = ({
             <Typography
               variant="h6"
               px={3}
-              py={3}
+              py={1}
               sx={{
                 fontSize: "20px",
                 display: "flex",
                 justifyContent: "space-between",
                 alignItems: "center",
                 color: "common.white",
+                whiteSpace: 'normal',
                 "&:hover": {
                   backgroundColor: "primary.main",
                   boxShadow: "0px 4px 10px 0px rgba(3,13,23,0.6)",

website/en/src/components/home/Features.tsx

@@ -1,15 +1,40 @@
-import React from 'react'
-import { Grid, Box, Typography, List, ListItem, ListItemText, Button, alpha } from "@mui/material";
-import Image from 'next/image'
+import React from "react";
+import {
+  Grid,
+  Box,
+  Typography,
+  List,
+  ListItem,
+  ListItemText,
+  Button,
+  alpha,
+} from "@mui/material";
+import Image from "next/image";
 
 const FEATURE_LIST = [
   {
-    title: "语义分析算法，有效保卫网站安全",
-    desc: "首创语义分析算法，突破传统规则算法的极限，精准检测、低误报、难绕过",
+    title:
+      "Semantic analysis algorithms effectively safeguard website security",
+    desc: "Pioneering semantic analysis algorithm, breaking through the limits of traditional rule algorithms, precise detection, low false positives, and difficult to bypass",
     icon: "/images/feature1-icon.png",
     content: (
-      <Grid container display={'flex'} justifyContent={'flex-end'} position={'relative'} sx={{ mb: 5 }}>
-        <Grid item xs={0} md={2} sx={{ display: { xs: 'none', md: 'block' }, position: 'absolute', left: 0 }}>
+      <Grid
+        container
+        display={"flex"}
+        justifyContent={"flex-end"}
+        position={"relative"}
+        sx={{ mb: 5 }}
+      >
+        <Grid
+          item
+          xs={0}
+          md={2}
+          sx={{
+            display: { xs: "none", md: "block" },
+            position: "absolute",
+            left: 0,
+          }}
+        >
           <Box>
             <Image
               src="/images/feature1-left.png"
@@ -22,13 +47,22 @@ const FEATURE_LIST = [
         <Grid item xs={12} md={4} ml={2} mt={{ xs: 3, md: 14 }}>
           <List>
             <ListItem sx={{ mb: 1 }}>
-              <ListItemText sx={{ textIndent: '-0.75rem' }} primary="· 国内首创、业内领先的智能语义分析算法" />
+              <ListItemText
+                sx={{ textIndent: "-0.75rem" }}
+                primary="· &nbsp;The first and industry-leading intelligent semantic analysis algorithm in China"
+              />
             </ListItem>
             <ListItem sx={{ mb: 1 }}>
-              <ListItemText sx={{ textIndent: '-0.75rem' }} primary="· 基于代码的理解，防御 0day 攻击" />
+              <ListItemText
+                sx={{ textIndent: "-0.75rem" }}
+                primary="· &nbsp;Based on code understanding, defend against 0day attacks"
+              />
             </ListItem>
             <ListItem sx={{ mb: 1 }}>
-              <ListItemText sx={{ textIndent: '-0.75rem' }} primary="· 多维度 Web 应用防护" />
+              <ListItemText
+                sx={{ textIndent: "-0.75rem" }}
+                primary="· &nbsp;Multidimensional Web Application Protection"
+              />
             </ListItem>
           </List>
           <Box>
@@ -40,25 +74,24 @@ const FEATURE_LIST = [
                 height: { xs: "72px", sm: "50px" },
                 ml: { xs: 0, sm: 2 },
                 mb: { xs: 2, sm: 0 },
+                fontFamily: 'GilroyBold',
                 fontSize: { xs: "24px", sm: "14px" },
               }}
               href="/docs/about/syntaxanalysis"
             >
-              了解详情
+              Learn more
             </Button>
           </Box>
         </Grid>
         <Grid item xs={12} md={6} mt={7}>
-          <Box
-            position={'relative'}
-          >
+          <Box position={"relative"}>
             <Image
               src="/images/feature1-bg.png"
               alt=""
               layout="responsive"
               width={100}
               height={100}
-              className='absolute left-1/2 top-0'
+              className="absolute left-1/2 top-0"
             />
             <Image
               src="/images/feature1.svg"
@@ -66,7 +99,7 @@ const FEATURE_LIST = [
               layout="responsive"
               width={100}
               height={100}
-              className='relative'
+              className="relative"
             />
           </Box>
         </Grid>
@@ -74,51 +107,73 @@ const FEATURE_LIST = [
     ),
   },
   {
-    title: "化繁为简，智能安全",
-    desc: "轻松上手，实现躺平式管理",
+    title: "Simplify complexity, intelligent security",
+    desc: "Easy to get started with, achieving flat management",
     icon: "/images/feature2-icon.png",
     content: (
       <Grid container position="relative" sx={{ mb: 5 }} ml={{ xs: 3, md: 0 }}>
         <Grid container>
           <Grid item xs={12} md={6} mt={7} order={{ xs: 2, md: 1 }}>
-            <Box
-              position="relative"
-            >
+            <Box position="relative">
               <Image
                 src="/images/feature2-bg.png"
                 alt=""
                 layout="responsive"
                 width={100}
                 height={100}
-                className='absolute right-1/3'
+                className="absolute right-1/3"
                 style={{ bottom: "10%" }}
               />
               <Image
                 src="/images/feature2.svg"
-                alt="开箱即用，轻松上手，适配多种运行环境" 
+                alt="开箱即用，轻松上手，适配多种运行环境"
                 layout="responsive"
                 width={100}
                 height={100}
-                className='relative'
+                className="relative"
                 style={{ right: "43px" }}
               />
             </Box>
           </Grid>
-          <Grid item xs={12} md={4} mt={{ xs: 3, md: 14 }} order={{ xs: 1, md: 2 }}>
+          <Grid
+            item
+            xs={12}
+            md={4}
+            mt={{ xs: 3, md: 14 }}
+            order={{ xs: 1, md: 2 }}
+          >
             <List>
               <ListItem sx={{ mb: 1 }}>
-                <ListItemText sx={{ textIndent: '-0.75rem' }} primary="· 一键安装，容器式管理，适配多种运行环境" />
+                <ListItemText
+                  sx={{ textIndent: "-0.75rem" }}
+                  primary="· &nbsp;One click installation, containerized management, adaptable to multiple operating environments"
+                />
               </ListItem>
               <ListItem sx={{ mb: 1 }}>
-                <ListItemText sx={{ textIndent: '-0.75rem' }} primary="· 配置开箱即用，无需大量调整繁琐规则" />
+                <ListItemText
+                  sx={{ textIndent: "-0.75rem" }}
+                  primary="· &nbsp;Ready to use configuration out of the box, without the need for extensive adjustments to cumbersome rules"
+                />
               </ListItem>
               <ListItem sx={{ mb: 1 }}>
-                <ListItemText sx={{ textIndent: '-0.75rem' }} primary="· 简洁操作，专为社区设计" />
+                <ListItemText
+                  sx={{ textIndent: "-0.75rem" }}
+                  primary="· &nbsp;Simple operation, designed specifically for the community"
+                />
               </ListItem>
             </List>
           </Grid>
         </Grid>
-        <Grid item xs={0} md={2} sx={{ display: { xs: 'none', md: 'block' }, position: 'absolute', right: 0 }}>
+        <Grid
+          item
+          xs={0}
+          md={2}
+          sx={{
+            display: { xs: "none", md: "block" },
+            position: "absolute",
+            right: 0,
+          }}
+        >
           <Box>
             <Image
               src="/images/feature2-right.png"
@@ -132,12 +187,28 @@ const FEATURE_LIST = [
     ),
   },
   {
-    title: "高性能、高并发、高可用性",
-    desc: "无规则引擎，线性安全检测算法",
+    title: "High performance, high concurrency, and high availability",
+    desc: "Irregular engine, linear security detection algorithm",
     icon: "/images/feature3-icon.png",
     content: (
-      <Grid container display="flex" justifyContent="flex-end" position="relative" sx={{ mb: 10 }} ml={{ xs: 3, md: 0 }}>
-        <Grid item xs={0} md={2} sx={{ display: { xs: 'none', md: 'block' }, position: 'absolute', left: 0 }}>
+      <Grid
+        container
+        display="flex"
+        justifyContent="flex-end"
+        position="relative"
+        sx={{ mb: 10 }}
+        ml={{ xs: 3, md: 0 }}
+      >
+        <Grid
+          item
+          xs={0}
+          md={2}
+          sx={{
+            display: { xs: "none", md: "block" },
+            position: "absolute",
+            left: 0,
+          }}
+        >
           <Box>
             <Image
               src="/images/feature3-left.png"
@@ -150,29 +221,35 @@ const FEATURE_LIST = [
         <Grid item xs={12} md={4} mt={{ xs: 3, md: 14 }}>
           <List>
             <ListItem>
-              <ListItemText sx={{ textIndent: '-0.75rem' }} primary="· 平均检测延迟 < 1 毫秒，单核轻松检测 2000+ TPS 并发" />
+              <ListItemText
+                sx={{ textIndent: "-0.75rem" }}
+                primary="· &nbsp;Average detection delay <1 millisecond, single core easily detects 2000+TPS concurrency"
+              />
             </ListItem>
             <ListItem>
-              <ListItemText sx={{ textIndent: '-0.75rem' }} primary="· 基于 Nginx 开发，完善的健康检查机制" />
+              <ListItemText
+                sx={{ textIndent: "-0.75rem" }}
+                primary="· &nbsp;Developing a comprehensive health check mechanism based on Nginx"
+              />
             </ListItem>
           </List>
         </Grid>
         <Grid item xs={12} md={6} mt={7}>
-          <Box position={'relative'}>
+          <Box position={"relative"}>
             <Image
               src="/images/feature3-bg.png"
               alt=""
               width={1225}
               height={1310}
-              className='absolute -left-1/2 -top-2/3'
+              className="absolute -left-1/2 -top-2/3"
             />
             <Image
-              src="/images/feature3.svg"
+              src="/images/ability/2000tps.png"
               alt="性能,服务可用性99.99%"
               layout="responsive"
               width={100}
               height={100}
-              className='relative'
+              className="relative"
             />
           </Box>
         </Grid>
@@ -193,9 +270,9 @@ const Features = () => {
         {FEATURE_LIST.map((feature, index) => (
           <Grid item xs={12} key={feature.title}>
             <Box
-              display={{ xs: "block",  md: index % 2 == 1 ? 'flex' : ''}}
+              display={{ xs: "block", md: index % 2 == 1 ? "flex" : "" }}
               alignItems="flex-end"
-              flexDirection={index % 2 == 1 ? 'column' : 'row'}
+              flexDirection={index % 2 == 1 ? "column" : "row"}
             >
               <Box>
                 <Image
@@ -207,26 +284,23 @@ const Features = () => {
               </Box>
               <Box ml={3}>
                 <Typography variant="h4">
-                  <Box component="span" sx={{ mt: "5px" }}>
+                  <Box
+                    component="span"
+                    sx={{ mt: "5px", fontFamily: "GilroyBold" }}
+                  >
                     {feature.title}
                   </Box>
                 </Typography>
                 <Typography
                   variant="subtitle1"
-                  sx={{ color: alpha("#000", 0.7), fontWeight: 100 }}
+                  sx={{ color: alpha("#000", 0.7), fontWeight: 100, fontFamily: 'GilroyThin' }}
                   mt={2}
                 >
-                  <Box component="span">
-                    {feature.desc}
-                  </Box>
+                  <Box component="span">{feature.desc}</Box>
                 </Typography>
               </Box>
             </Box>
-            <Box
-              sx={{ whiteSpace: "pre-line" }}
-            >
-              {feature.content}
-            </Box>
+            <Box sx={{ whiteSpace: "pre-line" }}>{feature.content}</Box>
           </Grid>
         ))}
       </Grid>

website/en/src/components/home/Version.tsx

@@ -8,7 +8,6 @@ const Version = () => {
       sx={{
         width: "100%",
         height: { xs: "205px", md: "343px" },
-        mt: 19,
         backgroundImage: "url(/images/enterprise-bg.svg)",
         backgroundSize: "cover",
         backgroundPosition: "center center",
@@ -23,11 +22,11 @@ const Version = () => {
               fontWeight: 400,
               color: "common.white",
               fontSize: { xs: "24px", md: "28px" },
-              fontFamily: "AlimamaShuHeiTi-Bold",
+              fontFamily: "GilroyBold",
               letterSpacing: "2px",
             }}
           >
-            欢迎使用雷池其他版本
+            Welcome to other versions of Safeline WAF
           </Typography>
           <Button
             variant="outlined"
@@ -37,6 +36,7 @@ const Version = () => {
               mt: 4,
               backgroundColor: "common.white",
               fontSize: { xs: "24px", md: "16px" },
+              fontFamily: 'GilroyBold',
               "&:hover": {
                 color: "#0A8A87",
                 backgroundColor: "common.white",
@@ -44,7 +44,7 @@ const Version = () => {
             }}
             href="/version"
           >
-            付费版本
+            Version
           </Button>
         </Stack>
         <Box

website/en/src/pages/index.tsx

@@ -17,12 +17,36 @@ import {
 import Image from "next/image";
 
 const ARTICLES = [
-  { title: '《阮一峰·科技爱好者周刊》', href: "https://www.ruanyifeng.com/blog/2023/11/weekly-issue-276.html", width: 250 },
-  { title: '《Hello Github 月刊》', href: "https://hellogithub.com/repository/0d07cfe266af4c25ba3eadf2c3d06f50", width: 206 },
-  { title: '《Apache APISIX》', href: "https://zhuanlan.zhihu.com/p/655041825", width: 186 },
-  { title: '《科技 lion》', href: "https://blog.kejilion.pro/leichi-waf/", width: 250 },
-  { title: '《Github 爱好者》', href: "https://mp.weixin.qq.com/s/CO-k2nv-PK0Ij-V5lTbUEQ", width: 206 },
-  { title: '《GitHub Daily》', href: "https://zhuanlan.zhihu.com/p/656047298", width: 186 },
+  {
+    title: "《阮一峰·科技爱好者周刊》",
+    href: "https://www.ruanyifeng.com/blog/2023/11/weekly-issue-276.html",
+    width: 250,
+  },
+  {
+    title: "《Hello Github 月刊》",
+    href: "https://hellogithub.com/repository/0d07cfe266af4c25ba3eadf2c3d06f50",
+    width: 206,
+  },
+  {
+    title: "《Apache APISIX》",
+    href: "https://zhuanlan.zhihu.com/p/655041825",
+    width: 186,
+  },
+  {
+    title: "《科技 lion》",
+    href: "https://blog.kejilion.pro/leichi-waf/",
+    width: 250,
+  },
+  {
+    title: "《Github 爱好者》",
+    href: "https://mp.weixin.qq.com/s/CO-k2nv-PK0Ij-V5lTbUEQ",
+    width: 206,
+  },
+  {
+    title: "《GitHub Daily》",
+    href: "https://zhuanlan.zhihu.com/p/656047298",
+    width: 186,
+  },
 ];
 
 const totalSx = {
@@ -41,11 +65,13 @@ export async function getServerSideProps() {
   let total = 48750;
   let starCount = 6.5;
   const promises = [
-    getSetupCount().then((result) => total = result.total),
-    getReposInfo().then((result) => starCount = formatStarNumber(result.star_count)),
+    getSetupCount().then((result) => (total = result.total)),
+    getReposInfo().then(
+      (result) => (starCount = formatStarNumber(result.star_count))
+    ),
   ];
   try {
-    await Promise.allSettled(promises)
+    await Promise.allSettled(promises);
   } finally {
     return {
       props: {
@@ -56,7 +82,13 @@ export async function getServerSideProps() {
   }
 }
 
-export default function Home({ total, starCount }: { total: number, starCount: number }) {
+export default function Home({
+  total,
+  starCount,
+}: {
+  total: number;
+  starCount: number;
+}) {
   const totalRef = useRef(null);
   const startRef = useRef(null);
 
@@ -89,6 +121,7 @@ export default function Home({ total, starCount }: { total: number, starCount: n
             width: "100%",
             height: "866px",
             position: "relative",
+            fontFamily: "Gilroy",
           }}
         >
           <Image
@@ -100,13 +133,17 @@ export default function Home({ total, starCount }: { total: number, starCount: n
             quality={100}
             // unoptimized={true}
           />
-          <Box pt={{ xs: 21, md: 26.5 }} className="relative" display={{ xs: "none", sm: "block" }}>
+          <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: 4, md: 8 },
+                  letterSpacing: { xs: 3, md: 3 },
                 }}
                 justifyContent="center"
               >
@@ -116,18 +153,20 @@ export default function Home({ total, starCount }: { total: number, starCount: n
                     mr: { xs: 22, md: 36.5 },
                     fontWeight: 400,
                     fontSize: { xs: "16px", md: "24px" },
+                    fontFamily: "GilroyThin",
                   }}
                 >
-                  基于智能语义分析的
+                  Developed based on Nginx
                 </Typography>
                 <Typography
                   variant="h5"
                   sx={{
                     fontWeight: 400,
                     fontSize: { xs: "16px", md: "24px" },
+                    fontFamily: "GilroyThin",
                   }}
                 >
-                  下一代 Web 应用防火墙
+                  and Connected as a reverse proxy
                 </Typography>
               </Stack>
               <Stack
@@ -135,9 +174,10 @@ export default function Home({ total, starCount }: { total: number, starCount: n
                 mt={2}
                 justifyContent="center"
                 sx={{
-                  fontFamily: "AlimamaShuHeiTi-Bold",
-                  letterSpacing: { xs: 5, md: 10 },
-                  background: "linear-gradient(90deg, #160847 0%, #0A7977 100%)",
+                  fontFamily: "GilroyBold",
+                  letterSpacing: { xs: 5, lg: 5 },
+                  background:
+                    "linear-gradient(90deg, #160847 0%, #0A7977 100%)",
                   "-webkit-background-clip": "text",
                   "-webkit-text-fill-color": "transparent",
                 }}
@@ -145,19 +185,28 @@ export default function Home({ total, starCount }: { total: number, starCount: n
                 <Typography
                   variant="h1"
                   sx={{
-                    mr: { xs: 13.5, md: 15.5 },
-                    fontSize: { xs: "48px", md: "80px" },
+                    mr: { xs: 13.5, lg: 22.5 },
+                    fontSize: { xs: "28px", lg: "51px", xl: "70px" },
                   }}
                 >
-                  不让黑客
+                  Simple,Secure
                 </Typography>
-                <Typography variant="h1" sx={{ fontSize: { xs: "48px", md: "80px" }, }}>
-                  越雷池一步
+                <Typography
+                  variant="h1"
+                  sx={{
+                    fontSize: { xs: "28px", lg: "50px", xl: "70px" },
+                  }}
+                >
+                  lightweight WAF
                 </Typography>
               </Stack>
             </Box>
           </Box>
-          <Box pt={{ xs: 16 }} className="relative" display={{ xs: "block", sm: "none" }}>
+          <Box
+            pt={{ xs: 16 }}
+            className="relative"
+            display={{ xs: "block", sm: "none" }}
+          >
             <Stack alignItems="center">
               <Typography
                 variant="h1"
@@ -165,7 +214,7 @@ export default function Home({ total, starCount }: { total: number, starCount: n
                   fontSize: "32px",
                 }}
               >
-                不让黑客，越雷池一步
+                Simple,Secure lightweight WAF
               </Typography>
               <Typography
                 variant="h5"
@@ -176,7 +225,7 @@ export default function Home({ total, starCount }: { total: number, starCount: n
                   color: "#86909C",
                 }}
               >
-                基于智能语义分析的，下一代 Web 应用防火墙
+                Developed based on Nginx and Connected as a reverse proxy
               </Typography>
             </Stack>
           </Box>
@@ -219,7 +268,7 @@ export default function Home({ total, starCount }: { total: number, starCount: n
                 }}
                 href="/docs/guide/install"
               >
-                立即安装
+                Start
               </Button>
             </Box>
           </Container>
@@ -237,7 +286,7 @@ export default function Home({ total, starCount }: { total: number, starCount: n
                     >
                       -
                     </Typography>
-                    <Typography variant="h5">装机量</Typography>
+                    <Typography variant="h5">Installed capacity</Typography>
                   </Stack>
                 </Grid>
                 <Grid
@@ -255,10 +304,16 @@ export default function Home({ total, starCount }: { total: number, starCount: n
                     <Stack direction="row" justifyContent="center">
                       <Stack spacing={2} alignItems="center">
                         <Stack direction="row" sx={{ ...totalSx }}>
-                          <Typography variant="h1" ref={startRef} fontSize="70px">
+                          <Typography
+                            variant="h1"
+                            ref={startRef}
+                            fontSize="70px"
+                          >
                             -
                           </Typography>
-                          <Typography variant="h1" fontSize="70px">k</Typography>
+                          <Typography variant="h1" fontSize="70px">
+                            k
+                          </Typography>
                         </Stack>
                         <Typography variant="h5">GitHub Star</Typography>
                       </Stack>
@@ -275,54 +330,12 @@ export default function Home({ total, starCount }: { total: number, starCount: n
               </Grid>
             </Box>
           </Container>
-          <Container>
-            <Box mt={7}>
-              <Grid container spacing={2}>
-                {ARTICLES.map((article, index) => (
-                  <Grid
-                    key={article.title}
-                    item
-                    xs={6}
-                    sm={4}
-                    display="flex"
-                    justifyContent={{ xs: 'flex-start', sm: justifyContents[index % 3] }}
-                  >
-                    <Typography
-                      variant="h5"
-                      sx={{
-                        width: article.width + "px",
-                        textAlign: "left",
-                      }}
-                    >
-                      <Link
-                        sx={{ color: "#86909C", fontFamily: "AlimamaShuHeiTi-Bold", fontSize: { xs: "14px", sm: "20px" }}}
-                        target="_blank"
-                        href={article.href}
-                      >
-                        {article.title}
-                      </Link>
-                    </Typography>
-                  </Grid>
-                ))}
-              </Grid>
-            </Box>
-          </Container>
-          <Container sx={{ pb: 3, mb: 3, mt: { xs: 10, md: 18 }}}>
+          <Container
+            sx={{ pb: 3, mb: 3, mt: { xs: 10, md: 18 }, fontFamily: "Gilroy" }}
+          >
             <Features />
           </Container>
           <Abilities />
-          <Box
-            sx={{ position: "relative" }}
-          >
-            <Image
-              src="/images/partner-bg.png"
-              alt="partner bg"
-              layout="fill"
-              objectFit="cover"
-              objectPosition="center"
-            />
-            <Partner />
-          </Box>
           <Version />
         </Box>
       </Box>

website/en/styles/globals.css

@@ -2,6 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: Gilroy;
+  src: url('/fonts/gilroy-regular-3.otf');
+}
+
+@font-face {
+  font-family: GilroyBold;
+  src: url('/fonts/gilroy-bold-4.otf');
+}
+
+@font-face {
+  font-family: GilroyThin;
+  src: url('/fonts/Gilroy-Thin-13-4.otf');
+}
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -62,7 +77,7 @@ table {
 
 body {
   color: rgb(var(--foreground-rgb));
-	font-family: PingFang SC, Microsoft YaHei, Hiragino Sans GB, Helvetica Nene, Helvetica, Arial;
+	font-family: Gilroy PingFang SC, Microsoft YaHei, Hiragino Sans GB, Helvetica Nene, Helvetica, Arial;
 }
 
 a:-webkit-any-link {