Merge branch 'dev' into 'dev'

feat: Home page

See merge request !1

222100414_222100415/src/page/App/App.tsx

+import Home from '../Home/Home';
+
 const App = () => {
     return (<>
-
+        <Home/>
     </>);
 };
 

222100414_222100415/src/page/Home/Home.css

+.home {
+  background-color: #1f1f1f;
+  width: 100vw;
+  height: 100vh;
+
+}
+
+.top {
+  height: 30%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+}
+
+.top div {
+
+}
+
+.navbar {
+  height: 30%;
+  width: 100%;
+  display: flex;
+  font-size: x-large;
+
+}
+
+.navbar div{
+  width: 10%;
+}
+
+.navLinks {
+  width: 80%;
+  display: flex;
+  background-color: #393939;
+
+  justify-content: space-around;
+  align-items: center;
+  color: #fdfdfd;
+  font-weight: bold;
+  border-radius: 10px;
+}
+
+.navLink  li{
+
+
+}
+
+
+.center {
+  height: 40%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fdfdfd;
+}
+
+.left {
+  width: 70%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.picture {
+  width: 15%;
+}
+
+.title {
+
+  font-size: xxx-large;
+  font-weight: bold;
+}
+
+.line {
+  display: block;
+  height: 2px;
+  background: #fdfdfd;
+  border: none;
+  margin: 20px 0;
+}
+
+.right {
+  width: 30%;
+
+}
+
+.bottom {
+  height: 30%;
+}
\ No newline at end of file

222100414_222100415/src/page/Home/Home.jsx

+import React from 'react';
+import './Home.css';
+
+const Navbar = () => {
+    return (
+        <nav className="navbar">
+            <div></div>
+            <ul className="navLinks">
+                <li>
+                    <a ref={((input) => {
+
+                    })}>Rank List</a>
+                </li>
+                <li>
+                    <a ref={((input) => {
+
+                    })}>Daily Schedule</a>
+                </li>
+                <li>
+                    <a ref={((input) => {
+
+                    })}>Learn More</a>
+                </li>
+            </ul>
+            <div></div>
+        </nav>
+    );
+};
+
+const Home = () => {
+    return (<>
+        <div className="home">
+            <div className="top">
+                <div></div>
+                {Navbar()}
+                <div></div>
+            </div>
+            <div className="center">
+                <div className="left">
+                    <div className="picture">这里会有一个图片</div>
+                    <div className="title">
+                        World Aquatics 2024
+                        <hr className="line"/>
+                    </div>
+                </div>
+                <div className="right">
+                    <div>这里也有一个图片</div>
+                </div>
+            </div>
+            <div className="bottom"></div>
+        </div>
+    </>);
+};
+
+export default Home;