-
-
Terms ·
Schisandra
+
);
-};
-
-export default Footer;
+}
diff --git a/src/components/Home/footer/footer.less b/src/components/Home/footer/footer.less
new file mode 100644
index 0000000..6d16ed8
--- /dev/null
+++ b/src/components/Home/footer/footer.less
@@ -0,0 +1,115 @@
+footer {
+ background-color: #f5f6f8;
+ padding: 2.7em 0;
+}
+
+footer .container a {
+ color: var(--Dark-Grayish-Blue);
+ font-size: 1.1rem;
+}
+
+footer .container {
+ display: flex;
+ align-items: center;
+}
+
+.footer-logo {
+ text-align: center;
+ flex: 0 0 18%;
+}
+
+.social-icons {
+ flex: 0 0 14%;
+}
+
+.footer-logo img {
+ width: 60px;
+}
+
+.footer-menu {
+ flex: 1;
+ display: flex;
+}
+
+.f-menu {
+ width: 25%;
+}
+
+.f-menu a {
+ display: block;
+ line-height: 2em;
+ color: #000;
+ transition: color 0.2s;
+}
+
+.social-icons {
+ display: flex;
+ align-items: center;
+ margin-right: 50px;
+ gap: 25px;
+}
+
+.social-icons a {
+ text-align: center;
+}
+
+.social-icons a img {
+ width: 26px;
+}
+
+.f-menu a:hover {
+ color: var(--Strong-Cyan);
+}
+
+.attribution {
+ width: 80%;
+ text-align: center;
+ margin: auto;
+ display: block;
+ font-size: 12px;
+}
+
+@media screen and (max-width: 900px) {
+ footer {
+ text-align: center;
+ justify-content: center;
+ }
+
+ footer .container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .footer-logo {
+ text-align: center;
+ flex: 0;
+ margin-bottom: 30px;
+ }
+
+ .footer-menu {
+ flex: 0;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .f-menu {
+ width: 100%;
+ }
+
+ .f-menu a {
+ margin-bottom: 10px;
+ }
+
+ .social-icons {
+ flex: 0;
+ }
+
+ .social-icons {
+ margin-top: 30px;
+ display: flex;
+ align-items: center;
+ margin-right: 0;
+ gap: 25px;
+ }
+}
diff --git a/src/components/Home/footer/footer.module.less b/src/components/Home/footer/footer.module.less
deleted file mode 100644
index 00565e7..0000000
--- a/src/components/Home/footer/footer.module.less
+++ /dev/null
@@ -1,54 +0,0 @@
-.footer {
- width: var(--max-width);
- margin: 0 auto;
- padding: 3rem 0;
- font-size: 0.875rem;
- display: grid;
- grid-template-columns: 1fr;
- row-gap: 2rem;
-}
-
-@media screen and (min-width: 640px) {
- .footer {
- grid-template-columns: 1fr 1fr;
- }
-
- footer div:first-child {
- grid-column: 1 / -1;
- }
-}
-
-@media screen and (min-width: 768px) {
- .footer {
- grid-template-columns: repeat(4, 1fr);
- }
-}
-
-@media screen and (min-width: 1024px) {
- .footer {
- grid-template-columns: 2fr repeat(4, 1fr);
- }
- footer div:first-child {
- grid-column: 1;
- }
-}
-
-.logo {
- width: 2rem;
- margin-bottom: 1rem;
-}
-
-footer a:hover {
- color: var(--accent);
-}
-
-.liTitle {
- text-transform: uppercase;
- font-size: 0.75rem;
- color: var(--almost-white);
- margin: 0 0 0.7rem;
-}
-
-.liItem {
- margin: 0 0 0.7rem;
-}
diff --git a/src/components/Home/get-started/GetStarted.tsx b/src/components/Home/get-started/GetStarted.tsx
deleted file mode 100644
index e5efed4..0000000
--- a/src/components/Home/get-started/GetStarted.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/** @format */
-
-import Button from "../button/Button.js";
-import style from "./get-started.module.less";
-
-const GetStarted = () => {
- return (
-
-
-
开始使用五味子云存储
-
- It only takes a few minutes to get started with Neon. Understand your users,
- start free, today.
-
-
- );
-};
-
-export default GetStarted;
diff --git a/src/components/Home/get-started/get-started.module.less b/src/components/Home/get-started/get-started.module.less
deleted file mode 100644
index 594c9ba..0000000
--- a/src/components/Home/get-started/get-started.module.less
+++ /dev/null
@@ -1,48 +0,0 @@
-.container {
- width: var(--max-width);
- margin: 0 auto;
- padding: 4rem 3rem;
- background-image: url('@/assets/images/cta-illustration.svg'),
- linear-gradient(var(--secondary), var(--accent));
- background-position: right center;
- background-repeat: no-repeat;
- display: flex;
- gap: 1rem;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
- border-radius: 0.25rem;
-}
-
-.container > *:last-child {
- flex-shrink: 0;
-}
-
-.title {
- margin: 0 0 0.7rem;
- text-align: center;
- font-size: 2.25rem;
- font-weight: 700;
- color: var(--almost-white);
-}
-
-.text {
- margin: 0 0 2rem;
- text-align: center;
- color: var(--almost-white);
-}
-
-@media screen and (min-width: 768px) {
- .container {
- flex-direction: row;
- }
-
- .title {
- text-align: left;
- }
-
- .text {
- margin: 0;
- text-align: left;
- }
-}
diff --git a/src/components/Home/header/Header.tsx b/src/components/Home/header/Header.tsx
index c4ca982..d39cd08 100644
--- a/src/components/Home/header/Header.tsx
+++ b/src/components/Home/header/Header.tsx
@@ -1,27 +1,28 @@
/** @format */
-// import Button from "../button/Button";
-import style from "./header.module.less";
-import schisandra from "@/assets/icons/schisandra.svg";
+import "./header.less";
+import logo from "@/assets/images/logo.png";
+import { Button } from "antd";
+import { useNavigate } from "react-router-dom";
-const Header = () => {
+export function Header() {
+ const navigation = useNavigate();
return (
-
- 
- 
-
- -->
-