Initial commit

2025-10-11 11:55:25 +08:00
parent 467dad8449
commit 8107dee8d3
2879 changed files with 610575 additions and 0 deletions
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -0,0 +1,125 @@
+import { useState } from "react";
+import { useLocation } from "react-router-dom";
+// import { disablePageScroll, enablePageScroll } from "scroll-lock";
+import Button from "../Button/index.tsx";
+import Logo from "../Logo/index.js";
+import Image from "../Image/index.tsx";
+
+// 简化版导航数据
+const navigation = [
+    { id: "0", title: "Features", url: "/features" },
+    { id: "1", title: "Pricing", url: "/pricing" },
+    { id: "2", title: "How to use", url: "/how-to-use" },
+    { id: "3", title: "Roadmap", url: "/roadmap" },
+];
+
+const Header = () => {
+    const [openNavigation, setOpenNavigation] = useState(false);
+    const location = useLocation();
+
+    const toggleNavigation = () => {
+        setOpenNavigation(!openNavigation);
+        // if (openNavigation) {
+        //     enablePageScroll();
+        // } else {
+        //     disablePageScroll();
+        // }
+    };
+
+    const handleClick = () => {
+        setOpenNavigation(false);
+    };
+
+    return (
+        <div
+            className={`fixed top-0 left-0 z-50 w-full ${
+                openNavigation ? "bg-n-8" : " bg-n-8/90 backdrop-blur-sm"
+            } border-b border-n-6 lg:bg-n-8/90 lg:backdrop-blur-sm`}
+        >
+            <div className="flex items-center h-[4.75rem] px-5 lg:h-[5.25rem] lg:px-7.5 xl:px-10">
+                <Logo className="xl:mr-8" />
+                <nav
+                    className={`${
+                        openNavigation ? "flex" : "hidden"
+                    } fixed top-[4.8125rem] left-0 right-0 bottom-0 bg-n-8 lg:static lg:flex lg:mx-auto lg:bg-transparent`}
+                >
+                    <div className="relative z-2 flex flex-col items-center justify-center m-auto lg:flex-row">
+                        {navigation.map((item) => (
+                            <a
+                                className={`block relative font-code text-2xl uppercase text-n-1 transition-colors hover:text-color-1 px-6 py-6 md:py-8 lg:-mr-0.25 lg:text-xs lg:font-semibold ${
+                                    item.url === location.pathname
+                                        ? "z-2 lg:text-n-1"
+                                        : "lg:text-n-1/50"
+                                } lg:leading-5 lg:hover:text-n-1 xl:px-12`}
+                                href={item.url}
+                                onClick={handleClick}
+                                key={item.id}
+                            >
+                                {item.title}
+                                <div
+                                    className={`hidden absolute left-0 bottom-0 w-0.25 h-1.5 bg-n-6 lg:block ${
+                                        location.pathname === item.url
+                                            ? "lg:h-3 lg:bg-n-1"
+                                            : ""
+                                    }`}
+                                ></div>
+                                <div
+                                    className={`hidden absolute right-0 bottom-0 w-0.25 h-1.5 bg-n-6 lg:block ${
+                                        location.pathname === item.url
+                                            ? "lg:h-3 lg:bg-n-1"
+                                            : ""
+                                    }`}
+                                ></div>
+                            </a>
+                        ))}
+                    </div>
+                </nav>
+                
+                <a
+                    className="button hidden mr-8 text-n-1/50 transition-colors hover:text-n-1 lg:block"
+                    href="/login"
+                >
+                    注册账号
+                </a>
+                <Button className="hidden lg:flex" href="/login">
+                    登录
+                </Button>
+                <Button
+                    className="ml-auto lg:hidden"
+                    onClick={toggleNavigation}
+                    px="px-3"
+                >
+                    <svg
+                        className="overflow-visible"
+                        width="20"
+                        height="12"
+                        viewBox="0 0 20 12"
+                    >
+                        <rect
+                            className="transition-all origin-center"
+                            y={openNavigation ? "5" : "0"}
+                            width="20"
+                            height="2"
+                            rx="1"
+                            fill="white"
+                            transform={`rotate(${openNavigation ? "45" : "0"})`}
+                        />
+                        <rect
+                            className="transition-all origin-center"
+                            y={openNavigation ? "5" : "10"}
+                            width="20"
+                            height="2"
+                            rx="1"
+                            fill="white"
+                            transform={`rotate(${
+                                openNavigation ? "-45" : "0"
+                            })`}
+                        />
+                    </svg>
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default Header;