update home page content

Author: wqcstrong

Diff for: logo.svg

@@ -6,7 +6,7 @@ export const Footer = () => {
       <div className="text-center">
         <p>Open-source MIT Licensed.</p>
         <p>
-          Copyright &copy; 2023-present <a href="#">Huolala-Tech</a>
+          Copyright &copy; 2023 <a href="#">Huolala-Tech</a>
         </p>
       </div>
     </div>

Diff for: src/assets/image/debugger.png

@@ -1,13 +1,13 @@
 import { Row, Col, Typography } from 'antd';
-import debugImg from '@/assets/image/debugger.png';
+import debugImg from '@/assets/image/inspect.png';
 
 const { Title } = Typography;
 
 export const IntroBlock1 = () => {
   return (
-    <Row gutter={60}>
+    <Row gutter={80} justify="center">
       <Col>
-        <img width="500" src={debugImg} alt="" />
+        <img width="400" src={debugImg} alt="" />
       </Col>
       <Col style={{ textAlign: 'right' }}>
         <p className="small-title">What PageSpy do</p>

Diff for: src/assets/image/inspect.png

@@ -63,7 +63,7 @@ const SDKPanel = () => {
 const ClientPanel = () => {
   return (
     <div className="client-panle">
-      <img width={500} src={debugImg} alt="" />
+      <img width={400} src={debugImg} alt="" />
     </div>
   );
 };
@@ -73,7 +73,7 @@ export const IntroBlock2 = () => {
   const [activeKey, setActiveKey] = useState('sdk');
 
   return (
-    <Row gutter={120} justify="center">
+    <Row justify="center" gutter={80}>
       <Col>
         <p className="small-title">What we provide</p>
         <Title level={1} className="big-title">
@@ -101,7 +101,7 @@ export const IntroBlock2 = () => {
             classNames="fade"
             timeout={300}
           >
-            <div ref={nodeRef} style={{ width: 500, height: 500 }}>
+            <div ref={nodeRef} style={{ width: 400, height: 400 }}>
               {activeKey === 'sdk' ? <SDKPanel /> : <ClientPanel />}
             </div>
           </CSSTransition>

Diff for: src/pages/Home/components/Footer/index.tsx

@@ -0,0 +1,8 @@
+.welcome-use {
+  display: flex;
+  gap: 12px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(@primary-color, 0.06);
+}

Diff for: src/pages/Home/components/Introduction/components/Block-1/index.tsx

@@ -0,0 +1,15 @@
+import { Row, Col, Button, Typography } from 'antd';
+import logoImg from '@/assets/image/logo.svg';
+import './index.less';
+
+export const IntroBlock3 = () => {
+  return (
+    <div className="welcome-use">
+      <img src={logoImg} width="70" alt="LOGO" />
+      <Typography.Title level={2}>Welcome to use PageSpy</Typography.Title>
+      <Button type="primary" shape="round" size="large">
+        Get Started
+      </Button>
+    </div>
+  );
+};

Diff for: src/pages/Home/components/Introduction/components/Block-2/index.tsx

@@ -1,9 +1,8 @@
 .introduction {
-  padding-inline: 12vw;
+  // padding-inline: 12vw;
   background-color: #fff;
   > div {
     padding-block: 80px;
-    // margin-block: 12px;
   }
   .small-title {
     margin-top: 100px;

Diff for: src/pages/Home/components/Introduction/components/Block-3/index.less

@@ -1,12 +1,14 @@
 import { IntroBlock1 } from './components/Block-1';
 import { IntroBlock2 } from './components/Block-2';
+import { IntroBlock3 } from './components/Block-3';
 import './index.less';
 
 export const Introduction = () => {
   return (
     <div className="introduction">
       <IntroBlock1 />
       <IntroBlock2 />
+      <IntroBlock3 />
     </div>
   );
 };