tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-13 10:26:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

prettier

Browse Source
This commit is contained in:
ryan
2026-07-13 15:08:40 +08:00
parent 08e8eea932
commit 1eff7878a1
441 changed files with 26491 additions and 18405 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/home/footer-section.tsx
+101 -49
View File
@@ -1,7 +1,7 @@
import * as React from "react";
import {cn} from "@/lib/utils";
import Link from "next/link";
import {Github, LucideIcon} from "lucide-react";
import * as React from 'react';
import {cn} from '@/lib/utils';
import Link from 'next/link';
import {Github, LucideIcon} from 'lucide-react';
export interface FooterSectionProps {
className?: string;
@@ -10,65 +10,105 @@ export interface FooterSectionProps {
/**
* Footer Section - 页脚
*/
export const FooterSection = React.memo(function FooterSection({ className }: FooterSectionProps) {
export const FooterSection = React.memo(function FooterSection({
className,
}: FooterSectionProps) {
return (
<footer className={cn("relative z-10 w-full bg-transparent border-t border-white/10 mt-0 backdrop-blur-sm", className)}>
<div className="container mx-auto max-w-7xl px-6 py-20 lg:py-32">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 lg:gap-8 mb-20">
<div className="lg:col-span-2 space-y-6">
<Link href="/" className="flex items-center gap-2">
<div className="w-10 h-10 p-2 rounded bg-primary text-sm text-primary-foreground flex items-center justify-center font-bold">
<footer
className={cn(
'relative z-10 w-full bg-transparent border-t border-white/10 mt-0 backdrop-blur-sm',
className,
)}
>
<div className='container mx-auto max-w-7xl px-6 py-20 lg:py-32'>
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 lg:gap-8 mb-20'>
<div className='lg:col-span-2 space-y-6'>
<Link href='/' className='flex items-center gap-2'>
<div className='w-10 h-10 p-2 rounded bg-primary text-sm text-primary-foreground flex items-center justify-center font-bold'>
OF
</div>
<span className="text-2xl font-bold tracking-tight text-foreground">OpenFlare</span>
<span className='text-2xl font-bold tracking-tight text-foreground'>
OpenFlare
</span>
</Link>
<p className="text-muted-foreground text-base leading-relaxed max-w-sm">
开源边缘节点与反向代理管理平台。基于 Go + React 构建，统一管理 OpenResty 节点、网站规则与 WAF 配置。
<p className='text-muted-foreground text-base leading-relaxed max-w-sm'>
开源边缘节点与反向代理管理平台。基于 Go + React 构建，统一管理
OpenResty 节点、网站规则与 WAF 配置。
</p>
<div className="flex gap-4 pt-2">
<SocialLink icon={Github} href="https://github.com/Rain-kl/OpenFlare/" />
<div className='flex gap-4 pt-2'>
<SocialLink
icon={Github}
href='https://github.com/Rain-kl/OpenFlare/'
/>
</div>
</div>
<div className="lg:col-span-1">
<h3 className="font-semibold text-foreground mb-6">产品</h3>
<ul className="space-y-4 text-sm text-muted-foreground">
<li><FooterLink href="/">仪表盘</FooterLink></li>
<li><FooterLink href="/settings">个人设置</FooterLink></li>
<div className='lg:col-span-1'>
<h3 className='font-semibold text-foreground mb-6'>产品</h3>
<ul className='space-y-4 text-sm text-muted-foreground'>
<li>
<FooterLink href='/'>仪表盘</FooterLink>
</li>
<li>
<FooterLink href='/settings'>个人设置</FooterLink>
</li>
</ul>
</div>
<div className="lg:col-span-1">
<h3 className="font-semibold text-foreground mb-6">开发</h3>
<ul className="space-y-4 text-sm text-muted-foreground">
<li><FooterLink href="https://open-flare.pages.dev/">使用文档</FooterLink></li>
<li><FooterLink href="https://github.com/Rain-kl/OpenFlare">源代码</FooterLink></li>
<div className='lg:col-span-1'>
<h3 className='font-semibold text-foreground mb-6'>开发</h3>
<ul className='space-y-4 text-sm text-muted-foreground'>
<li>
<FooterLink href='https://open-flare.pages.dev/'>
使用文档
</FooterLink>
</li>
<li>
<FooterLink href='https://github.com/Rain-kl/OpenFlare'>
源代码
</FooterLink>
</li>
</ul>
</div>
<div className="lg:col-span-1">
<h3 className="font-semibold text-foreground mb-6">社区</h3>
<ul className="space-y-4 text-sm text-muted-foreground">
<li><FooterLink href="https://github.com/Rain-kl/OpenFlare/issues">GitHub Issues</FooterLink></li>
<li><FooterLink href="https://github.com/Rain-kl/OpenFlare/discussions">讨论</FooterLink></li>
<div className='lg:col-span-1'>
<h3 className='font-semibold text-foreground mb-6'>社区</h3>
<ul className='space-y-4 text-sm text-muted-foreground'>
<li>
<FooterLink href='https://github.com/Rain-kl/OpenFlare/issues'>
GitHub Issues
</FooterLink>
</li>
<li>
<FooterLink href='https://github.com/Rain-kl/OpenFlare/discussions'>
讨论
</FooterLink>
</li>
</ul>
</div>
</div>
<div className="pt-8 border-t border-border flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
<div className='pt-8 border-t border-border flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted-foreground'>
<p>© 2026 Modern Platform. All rights reserved.</p>
<div className="flex gap-8">
<Link href="/docs/privacy-policy" className="hover:text-foreground transition-colors">隐私政策</Link>
<Link href="/docs/terms-of-service" className="hover:text-foreground transition-colors">服务条款</Link>
<div className='flex gap-8'>
<Link
href='/docs/privacy-policy'
className='hover:text-foreground transition-colors'
>
隐私政策
</Link>
<Link
href='/docs/terms-of-service'
className='hover:text-foreground transition-colors'
>
服务条款
</Link>
</div>
</div>
</div>
<div className="absolute bottom-0 left-0 w-full overflow-hidden pointer-events-none opacity-[0.02]">
<div className="text-[12vw] 2xl:text-[180px] font-black leading-none text-foreground whitespace-nowrap select-none text-center transform translate-y-1/3 transition-all duration-700">
<div className='absolute bottom-0 left-0 w-full overflow-hidden pointer-events-none opacity-[0.02]'>
<div className='text-[12vw] 2xl:text-[180px] font-black leading-none text-foreground whitespace-nowrap select-none text-center transform translate-y-1/3 transition-all duration-700'>
Modern Platform
</div>
</div>
@@ -76,21 +116,33 @@ export const FooterSection = React.memo(function FooterSection({ className }: Fo
);
});
function SocialLink({ icon: Icon, href }: { icon: LucideIcon, href: string }) {
function SocialLink({ icon: Icon, href }: { icon: LucideIcon; href: string }) {
return (
<Link href={href} className="w-10 h-10 rounded-full bg-muted/50 flex items-center justify-center text-muted-foreground hover:bg-primary hover:text-primary-foreground transition-all duration-300">
<Icon className="w-5 h-5" />
<Link
href={href}
className='w-10 h-10 rounded-full bg-muted/50 flex items-center justify-center text-muted-foreground hover:bg-primary hover:text-primary-foreground transition-all duration-300'
>
<Icon className='w-5 h-5' />
</Link>
)
);
}
function FooterLink({ href, children }: { href: string, children: React.ReactNode }) {
function FooterLink({
href,
children,
}: {
href: string;
children: React.ReactNode;
}) {
return (
<Link href={href} className="hover:text-foreground transition-colors flex items-center group">
<span className="relative">
<Link
href={href}
className='hover:text-foreground transition-colors flex items-center group'
>
<span className='relative'>
{children}
<span className="absolute left-0 -bottom-0.5 w-0 h-px bg-foreground transition-all duration-300 group-hover:w-full" />
<span className='absolute left-0 -bottom-0.5 w-0 h-px bg-foreground transition-all duration-300 group-hover:w-full' />
</span>
</Link>
)
);
}