-
- 
-
-
-
-
-
-
-
-
+
+ Koring Team
+ 创意无限
要不来尝尝鲜？试试这个...
@@ -90,7 +80,7 @@ export default function HomePage() {
散射系列
@@ -104,7 +94,7 @@ export default function HomePage() {
科灵启动器
@@ -120,7 +110,7 @@ export default function HomePage() {
-
+
绘皮编辑器
@@ -135,7 +125,7 @@ export default function HomePage() {
-
+
绘皮编辑器
@@ -150,7 +140,7 @@ export default function HomePage() {
-
+
创汇基金
@@ -168,7 +158,7 @@ export default function HomePage() {
木柴.空间
diff --git a/app/providers.tsx b/app/providers.tsx
new file mode 100644
index 0000000..1ccb7db
--- /dev/null
+++ b/app/providers.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/components/card-nav/CardNav.css b/components/card-nav/CardNav.css
new file mode 100644
index 0000000..61bf961
--- /dev/null
+++ b/components/card-nav/CardNav.css
@@ -0,0 +1,268 @@
+.card-nav-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ justify-content: center;
+ padding: 1rem;
+ z-index: 99;
+ box-sizing: border-box;
+ pointer-events: none;
+}
+
+.card-nav {
+ display: block;
+ width: 100%;
+ max-width: 800px;
+ height: 60px;
+ padding: 0;
+ background: rgba(255, 255, 255, 0.7);
+ backdrop-filter: blur(20px) saturate(1.4);
+ -webkit-backdrop-filter: blur(20px) saturate(1.4);
+ border: 0.5px solid rgba(0, 0, 0, 0.06);
+ border-radius: 0.75rem;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ position: relative;
+ pointer-events: auto;
+}
+
+.card-nav-top {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.5rem 0.45rem 0.55rem 1.1rem;
+ z-index: 2;
+}
+
+.card-nav-left {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ height: 100%;
+}
+
+.theme-toggle {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ border: none;
+ border-radius: 6px;
+ background: transparent;
+ cursor: pointer;
+ color: #000;
+ transition: background-color 0.2s;
+}
+
+.theme-toggle:hover {
+ background-color: rgba(0, 0, 0, 0.06);
+}
+
+.hamburger-menu {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ gap: 6px;
+}
+
+.hamburger-menu:hover .hamburger-line {
+ opacity: 0.75;
+}
+
+.hamburger-line {
+ width: 30px;
+ height: 2px;
+ background-color: currentColor;
+ transition:
+ transform 0.25s ease,
+ opacity 0.2s ease,
+ margin 0.3s ease;
+ transform-origin: 50% 50%;
+}
+
+.hamburger-menu.open .hamburger-line:first-child {
+ transform: translateY(4px) rotate(45deg);
+}
+
+.hamburger-menu.open .hamburger-line:last-child {
+ transform: translateY(-4px) rotate(-45deg);
+}
+
+.logo-container {
+ display: flex;
+ align-items: center;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.logo {
+ height: 28px;
+}
+
+.logo-text {
+ font-size: 18px;
+ font-weight: 700;
+ color: #000;
+}
+
+.card-nav-cta-button {
+ background-color: #111;
+ color: white;
+ border: none;
+ border-radius: calc(0.75rem - 0.35rem);
+ padding: 0 1rem;
+ height: 100%;
+ font-weight: 500;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ align-items: center;
+}
+
+.card-nav-cta-button:hover {
+ background-color: #333;
+}
+
+.card-nav-content {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 60px;
+ bottom: 0;
+ padding: 0.5rem;
+ display: flex;
+ align-items: flex-end;
+ gap: 12px;
+ visibility: hidden;
+ pointer-events: none;
+ z-index: 1;
+}
+
+.card-nav.open .card-nav-content {
+ visibility: visible;
+ pointer-events: auto;
+}
+
+.nav-card {
+ height: 100%;
+ flex: 1 1 0;
+ min-width: 0;
+ border-radius: calc(0.75rem - 0.2rem);
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ padding: 12px 16px;
+ gap: 8px;
+ user-select: none;
+}
+
+.nav-card-label {
+ font-weight: 400;
+ font-size: 22px;
+ letter-spacing: -0.5px;
+}
+
+.nav-card-links {
+ margin-top: auto;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.nav-card-link {
+ font-size: 16px;
+ cursor: pointer;
+ text-decoration: none;
+ transition: opacity 0.3s ease;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.nav-card-link:hover {
+ opacity: 0.75;
+}
+
+.dark .card-nav {
+ background: rgba(26, 26, 26, 0.7);
+ backdrop-filter: blur(20px) saturate(1.4);
+ -webkit-backdrop-filter: blur(20px) saturate(1.4);
+ border-color: rgba(255, 255, 255, 0.08);
+}
+
+.dark .logo-text {
+ color: #fff;
+}
+
+.dark .hamburger-menu {
+ color: #fff !important;
+}
+
+.dark .theme-toggle {
+ color: #fff;
+}
+
+.dark .theme-toggle:hover {
+ background-color: rgba(255, 255, 255, 0.08);
+}
+
+@media (max-width: 768px) {
+ .card-nav-container {
+ padding: 0.6rem 0.75rem;
+ }
+
+ .card-nav-top {
+ padding: 0.5rem 1rem;
+ justify-content: space-between;
+ }
+
+ .hamburger-menu {
+ order: 2;
+ }
+
+ .logo-container {
+ position: static;
+ transform: none;
+ order: 1;
+ }
+
+ .card-nav-cta-button {
+ display: none;
+ }
+
+ .card-nav-content {
+ flex-direction: column;
+ align-items: stretch;
+ gap: 8px;
+ padding: 0.5rem;
+ bottom: 0;
+ justify-content: flex-start;
+ }
+
+ .nav-card {
+ height: auto;
+ min-height: 60px;
+ flex: 1 1 auto;
+ max-height: none;
+ }
+
+ .nav-card-label {
+ font-size: 18px;
+ }
+
+ .nav-card-link {
+ font-size: 15px;
+ }
+}
diff --git a/components/card-nav/CardNav.tsx b/components/card-nav/CardNav.tsx
new file mode 100644
index 0000000..9572ca6
--- /dev/null
+++ b/components/card-nav/CardNav.tsx
@@ -0,0 +1,267 @@
+"use client";
+
+import { useLayoutEffect, useRef, useState } from "react";
+import { gsap } from "gsap";
+import { GoArrowUpRight } from "react-icons/go";
+import { useTheme } from "next-themes";
+import "./CardNav.css";
+
+interface CardNavLink {
+ label: string;
+ href?: string;
+ ariaLabel: string;
+}
+
+interface CardNavItem {
+ label: string;
+ bgColor: string;
+ textColor: string;
+ links: CardNavLink[];
+}
+
+interface CardNavProps {
+ logo?: string;
+ logoAlt?: string;
+ items: CardNavItem[];
+ className?: string;
+ ease?: string;
+ baseColor?: string;
+ menuColor?: string;
+ buttonBgColor?: string;
+ buttonTextColor?: string;
+}
+
+const CardNav: React.FC = ({
+ logo,
+ logoAlt = "Logo",
+ items,
+ className = "",
+ ease = "power3.out",
+ baseColor = "#fff",
+ menuColor,
+ buttonBgColor,
+ buttonTextColor,
+}) => {
+ const [isHamburgerOpen, setIsHamburgerOpen] = useState(false);
+ const [isExpanded, setIsExpanded] = useState(false);
+ const navRef = useRef(null);
+ const cardsRef = useRef([]);
+ const tlRef = useRef(null);
+ const { theme, setTheme } = useTheme();
+
+ const calculateHeight = () => {
+ const navEl = navRef.current;
+ if (!navEl) return 260;
+
+ const isMobile = window.matchMedia("(max-width: 768px)").matches;
+ if (isMobile) {
+ const contentEl = navEl.querySelector(".card-nav-content");
+ if (contentEl) {
+ const wasVisible = contentEl.style.visibility;
+ const wasPointerEvents = contentEl.style.pointerEvents;
+ const wasPosition = contentEl.style.position;
+ const wasHeight = contentEl.style.height;
+
+ contentEl.style.visibility = "visible";
+ contentEl.style.pointerEvents = "auto";
+ contentEl.style.position = "static";
+ contentEl.style.height = "auto";
+
+ contentEl.offsetHeight;
+
+ const topBar = 60;
+ const padding = 16;
+ const contentHeight = contentEl.scrollHeight;
+
+ contentEl.style.visibility = wasVisible;
+ contentEl.style.pointerEvents = wasPointerEvents;
+ contentEl.style.position = wasPosition;
+ contentEl.style.height = wasHeight;
+
+ return topBar + contentHeight + padding;
+ }
+ }
+ return 260;
+ };
+
+ const createTimeline = () => {
+ const navEl = navRef.current;
+ if (!navEl) return null;
+
+ gsap.set(navEl, { height: 60 });
+ gsap.set(cardsRef.current, { y: 50, opacity: 0 });
+
+ const tl = gsap.timeline({ paused: true });
+
+ tl.to(navEl, {
+ height: calculateHeight,
+ duration: 0.4,
+ ease,
+ });
+
+ tl.to(
+ cardsRef.current,
+ { y: 0, opacity: 1, duration: 0.4, ease, stagger: 0.08 },
+ "-=0.1"
+ );
+
+ return tl;
+ };
+
+ useLayoutEffect(() => {
+ const tl = createTimeline();
+ tlRef.current = tl;
+
+ return () => {
+ tl?.kill();
+ tlRef.current = null;
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [ease, items]);
+
+ useLayoutEffect(() => {
+ const handleResize = () => {
+ if (!tlRef.current) return;
+
+ if (isExpanded) {
+ const newHeight = calculateHeight();
+ gsap.set(navRef.current, { height: newHeight });
+
+ tlRef.current.kill();
+ const newTl = createTimeline();
+ if (newTl) {
+ newTl.progress(1);
+ tlRef.current = newTl;
+ }
+ } else {
+ tlRef.current.kill();
+ const newTl = createTimeline();
+ if (newTl) {
+ tlRef.current = newTl;
+ }
+ }
+ };
+
+ window.addEventListener("resize", handleResize);
+ return () => window.removeEventListener("resize", handleResize);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isExpanded]);
+
+ const toggleMenu = () => {
+ const tl = tlRef.current;
+ if (!tl) return;
+ if (!isExpanded) {
+ setIsHamburgerOpen(true);
+ setIsExpanded(true);
+ tl.play(0);
+ } else {
+ setIsHamburgerOpen(false);
+ tl.eventCallback("onReverseComplete", () => setIsExpanded(false));
+ tl.reverse();
+ }
+ };
+
+ const setCardRef =
+ (i: number) =>
+ (el: HTMLDivElement | null) => {
+ if (el) cardsRef.current[i] = el;
+ };
+
+ return (
+ ) {
+ return (
+
+
+ )
+}
diff --git a/layout/footer.tsx b/layout/footer.tsx
index 9837bfc..4d977ec 100644
--- a/layout/footer.tsx
+++ b/layout/footer.tsx
@@ -3,34 +3,48 @@ import Link from "next/link";
function Footer() {
return (
-
+
+
+ );
+};
+
+export default CardNav;
diff --git a/components/koring-logo.tsx b/components/koring-logo.tsx
new file mode 100644
index 0000000..e13c17b
--- /dev/null
+++ b/components/koring-logo.tsx
@@ -0,0 +1,34 @@
+import type { SVGProps } from "react"
+
+export function KoringLogo(props: SVGProps
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ <>
+
- );
+
+ © {new Date().getFullYear()} Koring Team. All rights reserved. | 棱镜视界，创造超越想象的视界
-
+ Koring Launcher 是一个非官方的 Minecraft 启动器，与 Mojang Studios、Microsoft 或他们位于中国大陆的代理公司之间并无任何从属或关联。
+
+
+ "Minecraft" 以及 "我的世界" 为美国微软公司的商标。Koring Launcher 和本网站与美国微软公司之间没有从属关系。
+
+
+ Koring Team 是 Lingke Network 旗下 Prism Horizon 独立运营的创意化工作室
+
+
+
+
+ );
}
export { Footer };
diff --git a/layout/header.tsx b/layout/header.tsx
index b46ea3a..5973d4f 100644
--- a/layout/header.tsx
+++ b/layout/header.tsx
@@ -1,23 +1,51 @@
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
+"use client";
+
+import dynamic from "next/dynamic";
+
+const CardNav = dynamic(() => import("@/components/card-nav/CardNav"), {
+ ssr: false,
+});
+
+const navItems = [
+ {
+ label: "产品",
+ bgColor: "#1B1722",
+ textColor: "#fff",
+ links: [
+ { label: "Koring Launcher", href: "/launcher", ariaLabel: "Koring Launcher" },
+ { label: "Sanshe Play", href: "https://docs.play.lenjing.work", ariaLabel: "Sanshe Play" },
+ ],
+ },
+ {
+ label: "资源",
+ bgColor: "#2F293A",
+ textColor: "#fff",
+ links: [
+ { label: "Github", href: "https://github.com/lingke-net", ariaLabel: "Github" },
+ { label: "支持", href: "https://support.lingke.ink", ariaLabel: "支持" },
+ ],
+ },
+ {
+ label: "关于",
+ bgColor: "#2F293A",
+ textColor: "#fff",
+ links: [
+ { label: "MChine Space", href: "https://mchine.space", ariaLabel: "MChine Space" },
+ ],
+ },
+];
function Header() {
return (
-
+