add vanta, link, getstart

package.json

@@ -16,6 +16,7 @@
     "react-google-maps": "^9.4.5",
     "react-router-dom": "5.2.0",
     "react-scripts": "4.0.3",
+    "vanta": "^0.5.21",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

public/index.html

@@ -12,6 +12,12 @@
  
 
   <script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
+  <!-- import vanta -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
+
+ 
+  
   <title>Repair Center</title>
   <style>
     .da-contact-card .ant-table-tbody>tr>td:first-child {

public/manifest.json

 {
   "short_name": "React App",
   "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
   "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "display": "standalone"
 }

src/App.jsx

 import Routers from './router/Routers';
 
-import './assets/less/theme.less';
+
 
 function App() {
   return <Routers />

src/Layouts/FullLayout.jsx

+export default function FullLayout({ children }) {
+  return <>{children}</>;
+}

src/Layouts/VerticalLayout.jsx

+import React from 'react'
+
+import { Layout } from 'antd'
+
+import HeaderTap from "./tabHeader";
+import MenuList from "./menulist";
+
+//import
+// import Login from "../view/Login";
+// import RegistionPage from "../view/Registion";
+
+
+
+const { Content, Footer } = Layout
+
+export default function VerticalLayout(props) {
+  const { children } = props
+
+
+  return (
+      <>
+        <HeaderTap
+          className="site-layout-background"
+          style={{
+            padding: 0,
+            position: "fixed",
+            zIndex: 1,
+            width: "100%",
+          }}
+        />
+
+        <Layout
+          style={{ minHeight: "93vh", maxHeight: "90vh", paddingTop: "0.5vh" }}
+        >
+          <MenuList />
+
+          <Layout className="site-layout">
+            <Content style={{ margin: "1vh 1vh" }}>
+              <div
+                className="site-layout-background"
+                style={{ mixHeight: 360, overflowY: "scroll" }}
+              >
+                {children}
+              </div>
+            </Content>
+            <Footer className="footer">
+              <p>Final Project ©2021 Developed by Chaiwat Singkibut</p>
+            </Footer>
+          </Layout>
+        </Layout>
+      </>
+    );
+}
\ No newline at end of file

src/Layouts/menulist.jsx

@@ -10,11 +10,13 @@ import {
   CommentOutlined,
 } from "@ant-design/icons";
 
+import { Link } from "react-router-dom";
+
 const { Sider } = Layout;
 const { SubMenu } = Menu;
 
 export default function App() {
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState(true);
 
   const onCollapse = (collapsed) => {
     setCollapsed(collapsed);
@@ -23,37 +25,34 @@ export default function App() {
   return (
     <>
       <Sider
-        theme="light"
+        theme="dark"
         collapsible
         collapsed={collapsed}
         onCollapse={onCollapse}
       >
-        <div className="logo" />
         <Menu
-          theme="light"
+          theme="dark"
           defaultSelectedKeys={["1"]}
-          defaultOpenKeys={["sub1"]}
+          // defaultOpenKeys={["sub1"]}
           mode="inline"
         >
           <Menu.Item key="1" icon={<PieChartOutlined />}>
-            เริ่มต้นใช้งาน
+            <Link to={"/"}>เริ่มต้นใช้งาน</Link>
           </Menu.Item>
           <Menu.Item key="2" icon={<DesktopOutlined />}>
-            ลงทะเบียนร้านซ่อม
+            <Link to={"/registion"}>ลงทะเบียนร้านซ่อม</Link>
           </Menu.Item>
           <SubMenu key="sub1" icon={<TeamOutlined />} title="บริการลูกค้า">
             <Menu.Item key="8" icon={<SearchOutlined />}>
-              ค้นหาร้านซ่อม
+              <Link to={"/search"}>ค้นหาร้านซ่อม</Link>
             </Menu.Item>
             <Menu.Item key="6" icon={<FileSearchOutlined />}>
-              เช็คสถานะการซ่อม
-            </Menu.Item>
-            <Menu.Item key="7" icon={<CommentOutlined />}>
-              แจ้งปัญหาการใช้งาน
+              <Link to={"/status"}>เช็คสถานะการซ่อม</Link>
             </Menu.Item>
           </SubMenu>
+
           <Menu.Item key="9" icon={<CommentOutlined />}>
-              แจ้งปัญหาการใช้งาน
+            <Link to={"/reported"}>แจ้งปัญหาการใช้งาน</Link>
           </Menu.Item>
         </Menu>
       </Sider>

src/ProtectdRoute/index.js

+import React, { Suspense } from "react";
+import { Route } from "react-router-dom";
+// import Cookies from 'js-cookie'
+
+const ProtectedRoute = ({ component: Component, ...rest }) => {
+  return (
+    <Route
+      {...rest}
+      render={(props) => (
+        <Suspense fallback={null}>
+          <Component {...props} />
+        </Suspense>
+      )}
+    />
+  );
+};
+
+export default ProtectedRoute;

src/assets/fonts/index.css

+@import url('https://fonts.googleapis.com/css2?family=Mitr&display=swap');
+
+body {
+    font-family: 'Mitr', sans-serif;
+}
+

src/assets/less/Home/index.less

 .header-home {
-  background-color: red;
+  color: aliceblue;
   position: "fixed";
   width: "100%";
   font-size: 20px;

src/assets/less/Layouts/header.less

@@ -3,7 +3,17 @@
   color: rgb(255, 255, 255);
   font-size: 100 px;
   font-weight: bold;
-  }
-  .site-layout .site-layout-background {
+}
+.site-layout .site-layout-background {
   background: #fff;
-  }
+}
\ No newline at end of file
+
+.footer {
+  background-color: #001529;
+
+  color: aliceblue;
+}
+
+.footer p {
+  text-align: center;
+}

src/assets/less/Registion/index.less

-
 .title {
-    text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: 25px;
   font-weight: bold;
-    padding: 10px 20px;
 }
 
 .map {
   height: 300px;
 }
 
-.div-time{
+.div-time {
   padding: 10px 15px;
 }

src/assets/less/index.less

 @import "Layouts/header.less";
 @import "Home/index.less";
 @import "Registion/index.less";
+@import "pages/getstartes.less";
\ No newline at end of file

src/assets/less/pages/getstartes.less

+.getstart-box {
+  height: 75vh;
+  justify-content: center;
+  align-items: center;
+}
+
+.div-box-title {
+  animation: fadeIn linear 1.5s;
+}
+
+.getstart-box .div-box-title .box-button {
+  margin-top: 100px;
+}
+
+.bt-register {
+  border: 1px solid #333;
+  padding: 10px;
+  font-weight: bold;
+}
+
+.bt-register .text-register {
+  color: #333;
+}
+
+.bt-register:hover .text-register:hover {
+  color: rgb(211, 0, 0);
+}
+
+.bt-register:hover {
+  cursor: pointer;
+}
+
+.bt-login {
+  padding: 10px;
+  border: 1px solid #333;
+  background-color: red;
+  font-weight: bold;
+}
+
+
+.bt-login:hover {
+  background-color: rgb(255, 255, 255);
+  cursor: pointer;
+}
+
+.bt-login .text-login {
+  color: rgb(204, 204, 204);
+}
+
+.bt-login:hover .text-login:hover {
+  color: rgb(17, 17, 17);
+}
+
+
+
+// Content css
+.content-box {
+  height: auto;
+  padding: 10px;
+}
+
+.box-text-title {
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: fadeIn linear 3s;
+}
+
+.Col-content {
+  padding: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.Col-content:hover {
+  animation: fadeIn2 linear 1s;
+  cursor: default;
+}
+
+// Footer
+.footer-content {
+  padding: 10px;
+  margin-top: 10px;
+  height: 20%;
+  width: 100%;
+  background-color: #780650;
+}
+
+.box1 {
+  padding: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.box2 {
+  padding: 20px 30px 20px 30px;
+}
+
+.box2-button {
+  border: 3px solid rgb(255, 255, 255);
+  padding: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.box2-button:hover {
+  cursor: pointer;
+  background-color: aliceblue;
+}
+
+.bt2-register {
+  color: rgb(189, 189, 189);
+  font-weight: bold;
+}
+
+.bt2-register:hover {
+  color: rgb(0, 14, 26);
+}
+
+// Animation
+@keyframes fadeIn {
+  from {
+    transform: translateY(10%);
+    opacity: 0%;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 100%;
+  }
+}
+
+@keyframes fadeIn2 {
+  from {
+    transform: translateY(5%);
+    opacity: 50%;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 100%;
+  }
+}
+
+// Phone Screen
+
+.h-100 {
+  height: 100%;
+}
+
+.h-auto {
+  height: auto;
+}
+

src/index.jsx

@@ -3,6 +3,8 @@ import ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
 
 import App from "./App";
+import './assets/less/theme.less';
+import './assets/fonts/index.css'
 
 ReactDOM.render(
   <Suspense fallback="loading">

src/router/Routers.jsx

+// Router
 import { BrowserRouter as AppRouter, Route, Switch } from "react-router-dom";
 
 // import Ecommerce from "../view/Dashboards/ecommerce";
 
-import HeaderTap from "../Layouts/tabHeader";
-import MenuList from "../Layouts/menulist";
+// import HeaderTap from "../Layouts/tabHeader";
+// import MenuList from "../Layouts/menulist";
 
 //import
-import Login from "../view/Login";
-// import Home from "../view/Homes/index";
-import Home from "../view/Homes/index";
-import RegistionPage from "../view/Registion";
+// import Login from "../view/Login";
+// import RegistionPage from "../view/Registion";
 
-import { Layout } from "antd";
+// Routes
+import { Routes } from "./routes";
 
-const { Content, Footer } = Layout;
+// Layouts
+import VerticalLayout from "../Layouts/VerticalLayout";
+import FullLayout from "../Layouts/FullLayout";
+
+// Components
+
+import ProtectedRoute from "../ProtectdRoute";
+
+// import { Layout } from "antd";
+
+// const { Content, Footer } = Layout;
 
 export default function Routers() {
-  return (
-    <>
-      <HeaderTap
-        className="site-layout-background"
-        style={{ padding: 0, position: "fixed", zIndex: 1, width: "100%" }}
-      />
-      <Layout style={{ minHeight: "100vh", paddingTop: "2vh" }}>
-        <MenuList />
+  // Default Layout
+  const DefaultLayout = null; // FullLayout or VerticalLayout
 
-        <Layout className="site-layout">
-          <Content style={{ margin: "0 16px" }}>
-            <div
-              className="site-layout-background"
-              style={{ padding: 24, mixHeight: 360 }}
-            >
-              <AppRouter>
-                <Switch>
-                  <Route
-                    exact
-                    path={"/login"}
-                    render={() => {
-                      return <Login />;
-                    }}
-                  />
+  // All of the available layouts
+  const Layouts = { VerticalLayout, FullLayout };
 
-                  <Route
-                    exact
-                    path={"/registion"}
-                    render={() => {
-                      return <RegistionPage />;
-                    }}
-                  />
-                  <Route
+  // Return Filtered Array of Routes & Paths
+  const LayoutRoutesAndPaths = (layout) => {
+    const LayoutRoutes = [];
+    const LayoutPaths = [];
+    if (Routes) {
+      // Checks if Route layout or Default layout matches current layout
+      Routes.filter(
+        (route) =>
+          (route.layout === layout || DefaultLayout === layout) &&
+          (LayoutRoutes.push(route), LayoutPaths.push(route.path))
+      );
+    }
+
+    return { LayoutRoutes, LayoutPaths };
+  };
+
+  // Return Route to Render
+  const ResolveRoutes = () => {
+    return Object.keys(Layouts).map((layout, index) => {
+      const { LayoutRoutes, LayoutPaths } = LayoutRoutesAndPaths(layout);
+      const LayoutTag = Layouts[layout];
+      return (
+        <Route path={LayoutPaths} key={index}>
+          <LayoutTag>
+            <Switch>
+              {LayoutRoutes.map((route) => {
+                return (
+                  <ProtectedRoute
+                    key={route.path}
+                    path={route.path}
                     exact
-                    path={"/"}
-                    render={() => {
-                      return <Home />;
-                    }}
+                    component={route.component}
                   />
+                );
+              })}
             </Switch>
-              </AppRouter>
-            </div>
-          </Content>
-          <Footer style={{ textAlign: "center" }}>
-            Ant Design ©2018 Created by Ant UED
-          </Footer>
-        </Layout>
-      </Layout>
+          </LayoutTag>
+        </Route>
+      );
+    });
+  };
 
-    </>
+  return (
+    <AppRouter>
+      <Switch>{ResolveRoutes()}</Switch>
+    </AppRouter>
   );
 }

src/router/routes/Pages.jsx

-import { lazy } from 'react'
+import { lazy } from "react";
 
 const PagesRoutes = [
   // Dashboard
+
+  // Get Start
+  {
+    path: "/",
+    component: lazy(() => import("../../view/Pages/GetStarted")),
+    layout: "VerticalLayout",
+  },
+
+  // Landing Register Page
   {
-      path: '/Dashboard',
-      component: lazy(() => import('../../view/Dashboards/ecommerce')),
-      layout: 'VerticalLayout',
-    }
+    path: "/registion",
+    component: lazy(() => import("../../view/Pages/Register")),
+    layout: "VerticalLayout",
+  },
 
-  ]
+  // Register 
+  {
+    path: "/register",
+    component: lazy(() => import("../../view/Registion/Registion")),
+    layout: "VerticalLayout",
+  },
 
-  export default PagesRoutes
+  // Login
+  {
+    path: "/login",
+    component: lazy(() => import("../../view/Login")),
+    layout: "VerticalLayout",
+  },
+
+  // Report
+  {
+    path: "/reported",
+    component: lazy(() => import("../../view/Pages/Report/index")),
+    layout: "VerticalLayout",
+  },
+
+  // Search Repair Shop
+  {
+    path: "/search",
+    component: lazy(() => import("../../view/Pages/CustomerService/RepairShop/index")),
+    layout: "VerticalLayout",
+  },
+
+  // Check Status
+  {
+    path: "/status",
+    component: lazy(() => import("../../view/Pages/CustomerService/RepairStatus/index")),
+    layout: "VerticalLayout",
+  },
+
+  // pages 404
+  {
+    path: '/pages/error-404',
+    component: lazy(() => import('../../view/Errors/404/index')),
+    layout: 'FullLayout',
+  },
+];
 
+export default PagesRoutes;

src/view/Errors/404/index.jsx

+import React from 'react';
+
+export default function App () {
+    return (
+        <>
+            error 404
+        </>
+    )
+}
\ No newline at end of file

src/view/Login/Login.jsx

 // import liff from "@line/liff";
-import { React, Fragment } from "react";
+import React, { useEffect, useState, useRef } from "react";
 
-import { Form, Input, Button, Checkbox, Row, Col, Divider } from "antd";
+import { Form, Input, Button, Row, Col, Divider } from "antd";
 
-import { sendLogin } from '../../services'
+import BIRDS from "vanta/dist/vanta.birds.min";
+
+import { sendLogin } from "../../services";
 
 function App() {
-  console.log(process.env.REACT_APP_SECRET_API);
+  const [vantaEffect, setVantaEffect] = useState(0);
+  const myRef = useRef(null);
+  useEffect(() => {
+    if (!vantaEffect) {
+      setVantaEffect(
+        BIRDS({
+          el: myRef.current,
+          mouseControls: true,
+          touchControls: true,
+          gyroControls: false,
+          minHeight: 200.0,
+          minWidth: 200.0,
+          scale: 1.0,
+          scaleMobile: 1.0,
+          backgroundColor: 0xffffff,
+        })
+      );
+    }
+    return () => {
+      if (vantaEffect) vantaEffect.destroy();
+    };
+  }, [vantaEffect]);
 
   const onFinish = (values) => {
     const data = {
-      garageID : values.garageID,
-      password : values.password
-    }
-    console.log(data)
-
-    sendLogin(data).then((response) => console.log('response', response))
+      garageID: values.garageID,
+      password: values.password,
     };
+    console.log(data);
 
-
+    sendLogin(data).then((response) => console.log("response", response));
+  };
 
   return (
-    <Fragment>
-      <Row>
+    <div className="h-100" ref={myRef}>
+      <Row >
         <Col
-          span={6}
+          span={4}
           xs={{ order: 1 }}
           sm={{ order: 2 }}
           md={{ order: 3 }}
@@ -82,17 +103,6 @@ function App() {
               <Input.Password />
             </Form.Item>
 
-            <Form.Item
-              name="remember"
-              valuePropName="checked"
-              wrapperCol={{
-                offset: 8,
-                span: 16,
-              }}
-            >
-              <Checkbox>Remember me</Checkbox>
-            </Form.Item>
-
             <Form.Item
               wrapperCol={{
                 offset: 8,
@@ -100,7 +110,7 @@ function App() {
               }}
             >
               <Button type="primary" htmlType="submit">
-                Submit
+                ยืนยัน
               </Button>
             </Form.Item>
           </Form>
@@ -113,7 +123,7 @@ function App() {
           lg={{ order: 4 }}
         ></Col>
       </Row>
-    </Fragment>
+    </div>
   );
 }
 

src/view/Pages/CustomerService/RepairShop/index.jsx

+import React from 'react';
+
+export default function App () {
+    return (
+        <>
+            Repairshop
+        </>
+    )
+}
\ No newline at end of file

src/view/Pages/CustomerService/RepairStatus/index.jsx

+import React from 'react';
+
+export default function App () {
+    return (
+        <>
+            Repair Status
+        </>
+    )
+}
\ No newline at end of file

src/view/Pages/GetStarted/ContentImage/index.jsx

+import React, { useState } from "react";
+
+import { Row, Col, Typography, Image } from "antd";
+
+// Import Images 264098267_614589809650713_7432399148669275975_n.png
+import reportImg from "../../../../assets/images/Example/263773393_1270118020174602_2666156037006331548_n.png";
+import userUseImg from "../../../../assets/images/Example/264098267_614589809650713_7432399148669275975_n.png";
+import detailImg from "../../../../assets/images/Example/266805480_2127046747444617_6752024179146129762_n.png";
+
+const { Title, Text } = Typography;
+
+function App() {
+  const [visible1, setVisible1] = useState(false);
+  const [visible2, setVisible2] = useState(false);
+  const [visible3, setVisible3] = useState(false);
+  const [visible4, setVisible4] = useState(false);
+
+  return (
+    <Row gutter={[16, 16]} className="content-box">
+      <Col span={24} className="box-text-title">
+        <Title level={4}>รูปตัวอย่างการใช้งาน</Title>
+      </Col>
+
+      <Col
+        xs={{ span: 12, offset: 6 }}
+        sm={{ span: 8, offset: 8 }}
+        md={{ span: 6, offset: 4 }}
+        lg={{ span: 5, offset: 1 }}
+        xl={{ span: 4, offset: 2 }}
+        className="Col-content"
+      >
+        <div>
+          <div></div>
+          <Image
+            preview={{ visible1: false }}
+            width={200}
+            src={reportImg}
+            onClick={() => setVisible1(true)}
+          />
+          <div style={{ display: "none" }}>
+            <Image.PreviewGroup
+              preview={{ visible1, onVisibleChange: (vis) => setVisible1(vis) }}
+            >
+              <Image src={reportImg} />
+            </Image.PreviewGroup>
+          </div>
+          <Text>รูปการเพิ่มรายละเอียดของการซ่อม</Text>
+        </div>
+      </Col>
+      <Col
+        xs={{ span: 12, offset: 6 }}
+        sm={{ span: 8, offset: 8 }}
+        md={{ span: 4, offset: 4 }}
+        lg={{ span: 5, offset: 1 }}
+        xl={{ span: 4, offset: 2 }}
+        span={8}
+        className="Col-content"
+      >
+        <div>
+          <Image
+            preview={{ visible2: false }}
+            width={200}
+            src={detailImg}
+            onClick={() => setVisible2(true)}
+          />
+          <div style={{ display: "none" }}>
+            <Image.PreviewGroup
+              preview={{ visible2, onVisibleChange: (vis) => setVisible2(vis) }}
+            >
+              <Image src={detailImg} />
+            </Image.PreviewGroup>
+          </div>
+          <Text>รูปแสดงหน้าหลักของระบบ</Text>
+        </div>
+      </Col>
+      <Col
+        xs={{ span: 12, offset: 6 }}
+        sm={{ span: 8, offset: 8 }}
+        md={{ span: 6, offset: 4 }}
+        lg={{ span: 5, offset: 1 }}
+        xl={{ span: 4, offset: 2 }}
+        span={8}
+        className="Col-content"
+      >
+        <div>
+          <Image
+            preview={{ visible3: false }}
+            width={200}
+            src={reportImg}
+            onClick={() => setVisible3(true)}
+          />
+          <div style={{ display: "none" }}>
+            <Image.PreviewGroup
+              preview={{ visible3, onVisibleChange: (vis) => setVisible3(vis) }}
+            >
+              <Image src={reportImg} />
+            </Image.PreviewGroup>
+          </div>
+          <Text>รูปแสดงรายละเอียดของร้าน</Text>
+        </div>
+      </Col>
+
+      <Col
+        xs={{ span: 12, offset: 6 }}
+        sm={{ span: 8, offset: 8 }}
+        md={{ span: 4, offset: 4 }}
+        lg={{ span: 5, offset: 1 }}
+        xl={{ span: 4, offset: 2 }}
+        className="Col-content"
+      >
+        <div>
+          <Image
+            preview={{ visible4: false }}
+            width={200}
+            src={userUseImg}
+            onClick={() => setVisible4(true)}
+          />
+          <div style={{ display: "none" }}>
+            <Image.PreviewGroup
+              preview={{ visible4, onVisibleChange: (vis) => setVisible4(vis) }}
+            >
+              <Image src={userUseImg} />
+            </Image.PreviewGroup>
+          </div>
+          <Text>รูปหน้าบริการลูกค้า</Text>
+        </div>
+      </Col>
+    </Row>
+  );
+}
+
+export default App;

src/view/Pages/GetStarted/Contents/index.jsx

+import React from "react";
+
+import { Row, Col, Typography } from "antd";
+
+// icon
+import {
+  SearchOutlined,
+  CloudServerOutlined,
+  ControlOutlined,
+  ToolOutlined,
+  PieChartOutlined,
+  SmileOutlined,
+  LikeOutlined,
+  PushpinOutlined,
+  CommentOutlined,
+} from "@ant-design/icons";
+
+const { Title, Text } = Typography;
+
+function App() {
+  return (
+    <Row gutter={[0, 16]} className="content-box">
+      <Col span={24} className="box-text-title">
+        <Title level={4}>คุณสมบัติของระบบ</Title>
+      </Col>
+
+      <Col
+        xs={{ span: 24 }}
+        lg={{ span: 7, offset: 1 }}
+        className="Col-content"
+      >
+        <div>
+          <CloudServerOutlined style={{ fontSize: "250%" }} />
+          <Title level={5}> จัดเก็บข้อมูเข้าสู่ระบบส่วนกลาง </Title>
+          <Text>
+            การจัดเก็บข้อมูลเข้าส่วนกลางทำให้สามารถแชร์ฐานข้อมูลให้กับร้านค้าที่มีอยู่ในระบบ
+          </Text>
+        </div>
+      </Col>
+      <Col
+        xs={{ span: 24 }}
+        lg={{ span: 7, offset: 1 }}
+        span={8}
+        className="Col-content"
+      >
+        <div>
+          <SearchOutlined style={{ fontSize: "250%" }} />
+          <Title level={5}> ติดตามสถานะการซ่อม </Title>
+          <Text>
+            การจัดเก็บข้อมูลเข้าส่วนกลางทำให้ลูกค้าสามารถรู้ถึงสถานะงานซ่อมแต่ละงานได้โดยไม่ต้องออกไปตามถึงหน้างาน
+          </Text>
+        </div>
+      </Col>
+      <Col
+        xs={{ span: 24 }}
+        lg={{ span: 7, offset: 1 }}
+        span={8}
+        className="Col-content"
+      >
+        <div>
+          <ControlOutlined style={{ fontSize: "250%" }} />
+          <Title level={5}> ลดขั้นตอนในการทำงาน </Title>
+          <Text>
+            ช่วยลดขั้นตอนของการทำงานลงเมื่อต้องตรวจเช็คสภาพอย่างละเอียดอีกครั้ง
+          </Text>
+        </div>
+      </Col>
+
+      <Col
+        xs={{ span: 24 }}
+        lg={{ span: 7, offset: 1 }}
+        className="Col-content"
+      >
+        <div>
+          <ToolOutlined style={{ fontSize: "250%" }} />
+          <Title level={5}> จัดการการซ่อม </Title>
+          <Text>
+            บันทึกข้อมูลของการซ่อมแต่ละครั้งเข้าระบบส่วนกลาง
+            เพื่อแชร์ฐานข้อมูลและง่ายต่อการซ่อมในครั้งถัดไป
+          </Text>
+        </div>
+      </Col>
+      <Col
+        xs={{ span: 24 }}
+        lg={{ span: 7, offset: 1 }}
+        className="Col-content"
+      >
+        <div>
+          <PieChartOutlined style={{ fontSize: "250%" }} />
+          <Title level={5}> ชุดรายงานที่ครอบคลุม </Title>
+          <Text>
+            มีชุดรายงานที่ครอบคลุมทุกด้าน จัดเป็นหมวดหมู่ แสดงผลสวยงาม
+            ตอบสนองทุกมุมมองของทางร้าน
+          </Text>
+        </div>
+      </Col>
+      <Col
+        xs={{ span: 24 }}
+        lg={{ span: 7, offset: 1 }}
+        className="Col-content"
+      >
+        <div>
+          <CommentOutlined style={{ fontSize: "250%" }} />
+          <Title level={5}> แจ้งปัญหากับผู้ดูแลระบบ </Title>
+          <Text>
+            หากพบปัญหาการใช้งาน สามารถแจ้งปัญหากับผู้ดูแลระบบได้โดยตรง
+          </Text>
+        </div>
+      </Col>
+
+      <Col
+        xs={{ span: 24 }}
+        lg={{ span: 7, offset: 1 }}
+        className="Col-content"
+      >
+        <div>
+          <PushpinOutlined style={{ fontSize: "250%" }} />
+          <Title level={5}> ค้นหาร้านซ่อม </Title>
+          <Text>
+            ลูกค้าสามารถค้นหาร้านซ่อมที่อยู่ในระบบ
+            ทำให้ดึงดูดลูกค้าให้มาใช้บริการร้านของท่าน
+          </Text>
+        </div>
+      </Col>
+      <Col
+        xs={{ span: 24 }}
+        lg={{ span: 7, offset: 1 }}
+        className="Col-content"
+      >
+        <div>
+          <LikeOutlined style={{ fontSize: "250%" }} />
+          <Title level={5}> ง่ายต่อการใช้งาน </Title>
+          <Text>
+            รูปแบบของระบบมีความเรียบง่าย สามารถได้ง่ายและเรียนรู้การทำงานได้ไว
+          </Text>
+        </div>
+      </Col>
+      <Col
+        xs={{ span: 24 }}
+        lg={{ span: 7, offset: 1 }}
+        className="Col-content"
+      >
+        <div>
+          <SmileOutlined style={{ fontSize: "250%" }} />
+          <Title level={5}> สามารถใช้งานได้ฟรี </Title>
+          <Text>
+            ผู้ใช้สามารถใช้งานระบบได้ฟรีโดยไม่มีค่าใช้จ่าย
+            และสามารถลงทะเบียนออนไลน์เริ่มใช้งานได้ทันที
+          </Text>
+        </div>
+      </Col>
+    </Row>
+  );
+}
+
+export default App;

src/view/Pages/GetStarted/Footers/index.jsx

+import React from "react";
+
+import { Link } from "react-router-dom";
+
+import { Row, Col, Typography } from "antd";
+
+const { Title, Text } = Typography;
+
+function App() {
+  return (
+    <Row className="footer-content">
+      <Col
+        xs={{ span: 11, offset: 1 }}
+        lg={{ span: 6, offset: 2 }}
+        className="Col-footer"
+      >
+        <div className="box1">
+          <Col span={24} className="box1-box-title">
+            <Title level={3} style={{ color: "rgb(189, 189, 189)" }}>
+              Repair Center
+            </Title>
+            <Text style={{ color: "rgb(189, 189, 189)" }}>
+              ระบบจัดการร้านซ่อมและศูนย์บริการ
+            </Text>
+          </Col>
+        </div>
+      </Col>
+
+      <Col
+        xs={{ span: 11, offset: 1 }}
+        lg={{ span: 12, offset: 4 }}
+        className="Col-footer"
+      >
+        <div className="box2">
+          <Row className="box2-button">
+            <Col span={24} className="bt2-register">
+            <Link to={"/register"}>เริ่มใช้งานทันที</Link>
+            </Col>
+          </Row>
+        </div>
+      </Col>
+    </Row>
+  );
+}
+
+export default App;

src/view/Pages/GetStarted/Title/index.jsx

+import React, { useState, useEffect, useRef } from "react";
+
+import { Link } from "react-router-dom";
+
+import { Row, Col, Typography } from "antd";
+import BIRDS from "vanta/dist/vanta.birds.min";
+
+const { Title } = Typography;
+
+function App() {
+  const [vantaEffect, setVantaEffect] = useState(0);
+  const myRef = useRef(null);
+  useEffect(() => {
+    if (!vantaEffect) {
+      setVantaEffect(
+        BIRDS({
+          el: myRef.current,
+          mouseControls: true,
+          touchControls: true,
+          gyroControls: false,
+          minHeight: 200.0,
+          minWidth: 200.0,
+          scale: 1.0,
+          scaleMobile: 1.0,
+          backgroundColor: 0xffffff,
+          color1: 0x87,
+          color2: 0x0,
+          birdSize: 0.8,
+          quantity: 4.2,
+        })
+      );
+    }
+    return () => {
+      if (vantaEffect) vantaEffect.destroy();
+    };
+  }, [vantaEffect]);
+
+  return (
+    <Row ref={myRef} className="getstart-box">
+      <div className="div-box-title">
+        <Col span={24} className="getstart-box-title">
+          <Title>Repair Center</Title>
+          <Title level={3}>ระบบจัดการร้านซ่อมและศูนย์บริการ</Title>
+          <Title level={5}>
+            เพิ่มประสิทธิภาพ ลดระยะเวลา ยกระดับร้านซ่อมไปกับเรา
+          </Title>
+          <Row className="box-button">
+            
+              <Col
+                xs={{ span: 11, offset: 1 }}
+                lg={{ span: 10, offset: 2 }}
+                className="bt-register"
+              >
+                <Link className="text-register" to={"/register"}>ลงทะเบียนใช้งานฟรี</Link>
+              </Col>
+            
+
+            <Col
+              xs={{ span: 11, offset: 1 }}
+              lg={{ span: 10, offset: 2 }}
+              className="bt-login"
+            >
+              <Link className="text-login" to={"/login"}>เข้าสู่ระบบ</Link>
+            </Col>
+          </Row>
+        </Col>
+      </div>
+    </Row>
+  );
+}
+
+export default App;

src/view/Pages/GetStarted/index.jsx

+import React from "react";
+
+import {  Divider } from "antd";
+
+// Import Component
+import Titles from "./Title";
+import Contents from "./Contents";
+import ContentImage from "./ContentImage";
+import Footers from './Footers'
+
+export default function App(props) {
+  return (
+    <>
+      <Titles />
+      <Divider />
+      <Contents />
+      <Divider />
+      <ContentImage />
+      <Footers />
+    </>
+  );
+}

src/view/Pages/Register/index.jsx

+import React from 'react';
+
+export default function App () {
+    return (
+        <>
+            register
+        </>
+    )
+}
\ No newline at end of file

src/view/Pages/Report/index.jsx

+import React from 'react';
+
+export default function App () {
+    return (
+        <>
+            Reported
+        </>
+    )
+}
\ No newline at end of file

src/view/Registion/Registion.jsx

-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 // import axios from "axios";
 import {
   Form,
@@ -19,7 +19,9 @@ import {
   Marker,
 } from "react-google-maps";
 
-import { sendToken } from '../../services'
+import BIRDS from "vanta/dist/vanta.birds.min";
+
+import { sendToken } from "../../services";
 
 let newLatLng = [{ lat: 15.118524429823255, lng: 104.9075726928711 }];
 
@@ -76,13 +78,36 @@ const tailFormItemLayout = {
 
 //Main Function
 export default function RegistrationForm() {
+  const [vantaEffect, setVantaEffect] = useState(0);
+  const myRef = useRef(null);
+  useEffect(() => {
+    if (!vantaEffect) {
+      setVantaEffect(
+        BIRDS({
+          el: myRef.current,
+          mouseControls: true,
+          touchControls: true,
+          gyroControls: false,
+          minHeight: 200.0,
+          minWidth: 200.0,
+          scale: 1.0,
+          scaleMobile: 1.0,
+          backgroundColor: 0xffffff,
+          quantity: 5.00,
+        })
+      );
+    }
+    return () => {
+      if (vantaEffect) vantaEffect.destroy();
+    };
+  }, [vantaEffect]);
+
   const [ontime, setOnTime] = useState();
   const [offtime, setOffTime] = useState();
 
   const [form] = Form.useForm();
 
   const onFinish = (values) => {
-   
     const data = {
       party: "garage",
       garageID: values.userID,
@@ -102,11 +127,10 @@ export default function RegistrationForm() {
       address_map: [newLatLng[0].lat, newLatLng[0].lng],
       on_time: ontime,
       off_time: offtime,
-      tel: values.phone
-    }
-
-    sendToken(data).then((response) => console.log('response', response))
+      tel: values.phone,
+    };
 
+    sendToken(data).then((response) => console.log("response", response));
   };
 
   const handleOnTime = (time, timeString) => {
@@ -118,9 +142,10 @@ export default function RegistrationForm() {
   };
 
   return (
-    <Row>
+    <div className="h-auto" ref={myRef}>
+      <Row >
         <Col
-        span={6}
+          span={4}
           xs={{ order: 1 }}
           sm={{ order: 2 }}
           md={{ order: 3 }}
@@ -134,7 +159,7 @@ export default function RegistrationForm() {
           md={{ order: 3 }}
           lg={{ order: 4 }}
         >
-        <div className="title"></div>
+          <div className="title">ลงทะเบียนร้านซ่อม</div>
           <Divider orientation="left">
             <b>รายละเอียดของร้าน</b>
           </Divider>
@@ -274,7 +299,9 @@ export default function RegistrationForm() {
                 <Option value="ศูนย์บริการรถจักรยานยนต์">
                   ศูนย์บริการรถจักรยานยนต์
                 </Option>
-              <Option value="อู่ซ่อมรถจักรยานยนต์">อู่ซ่อมรถจักรยานยนต์</Option>
+                <Option value="อู่ซ่อมรถจักรยานยนต์">
+                  อู่ซ่อมรถจักรยานยนต์
+                </Option>
                 <Option value="ร้านบริการซ่อมอุปกรณ์การเกษตร">
                   ร้านบริการซ่อมอุปกรณ์การเกษตร
                 </Option>
@@ -464,7 +491,11 @@ export default function RegistrationForm() {
             </Col>
 
             <Form.Item {...tailFormItemLayout}>
-            <Button type="primary" htmlType="submit" style={{marginTop: "30px"}}>
+              <Button
+                type="primary"
+                htmlType="submit"
+                style={{ marginTop: "30px" }}
+              >
                 ยืนยันการสมัคร
               </Button>
             </Form.Item>
@@ -478,5 +509,6 @@ export default function RegistrationForm() {
           lg={{ order: 4 }}
         ></Col>
       </Row>
+    </div>
   );
 }

src/view/Registion/googleMap.jsx

@@ -30,7 +30,7 @@ import {
       return (
         <Col md={24} span={24}>
         <MapWithAMarker
-          googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKBdBAnDzrOkcfHq9InQFfYM7Inig-Zeg&v=3.exp&libraries=geometry,drawing,places"
+          googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYQsoMGSxKVOe6vilIiEedgPhRDjcPbC8&libraries=geometry,drawing,places"
           loadingElement={<div style={{ height: '100%' }} />}
           containerElement={<div style={{ height: '400px' }} />}
           mapElement={<div style={{ height: '100%' }} />}