mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-07 08:06:37 +08:00
wavelet init
This commit is contained in:
ryan
@@ -0,0 +1,142 @@
|
||||
import * as React from "react";
|
||||
import Link from "next/link";
|
||||
import {cn} from "@/lib/utils";
|
||||
import {motion} from "motion/react";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {Book, Check, Copy, Terminal} from "lucide-react";
|
||||
|
||||
export interface DeveloperSectionProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Developer Section - 开发者体验展示
|
||||
*/
|
||||
export const DeveloperSection = React.memo(function DeveloperSection({ className }: DeveloperSectionProps) {
|
||||
const [copied, setCopied] = React.useState(false);
|
||||
|
||||
const codeContent = `# 注册用户
|
||||
curl -X POST https://api.example.com/api/v1/auth/register \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{
|
||||
"username": "developer",
|
||||
"email": "dev@example.com",
|
||||
"password": "secure_password"
|
||||
}'`;
|
||||
|
||||
const onCopy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(codeContent);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch {
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = codeContent;
|
||||
textArea.style.position = "fixed";
|
||||
textArea.style.left = "-9999px";
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(textArea);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={cn("relative z-10 w-full min-h-screen flex items-center justify-center px-6 overflow-hidden", className)}>
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_20%,black_80%,transparent)]">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] max-w-[90vw] max-h-[90vh] bg-purple-500/10 rounded-full blur-[120px] animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="container mx-auto max-w-7xl grid lg:grid-cols-2 gap-12 lg:gap-20 items-center relative z-10">
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="order-2 lg:order-1 relative"
|
||||
>
|
||||
<div className="relative overflow-hidden rounded-xl border border-white/20 bg-black backdrop-blur-xl shadow-2xl max-w-full">
|
||||
<div className="flex items-center px-4 py-3 border-b border-white/20 w-full">
|
||||
<div className="flex-1 flex gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-[#ff5f56]" />
|
||||
<div className="w-3 h-3 rounded-full bg-[#ffbd2e]" />
|
||||
<div className="w-3 h-3 rounded-full bg-[#27c93f]" />
|
||||
</div>
|
||||
<div className="flex-none text-xs text-muted-foreground font-mono flex items-center gap-1">
|
||||
<Terminal className="w-3 h-3" />
|
||||
bash
|
||||
</div>
|
||||
<div className="flex-1" />
|
||||
</div>
|
||||
|
||||
<div className="p-6 overflow-x-auto relative group">
|
||||
<div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-neutral-400 hover:text-white" onClick={onCopy}>
|
||||
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
<pre className="text-xs sm:text-sm font-mono text-neutral-300 leading-relaxed whitespace-pre-wrap break-all sm:whitespace-pre sm:break-normal overflow-x-auto">
|
||||
<code className="block">
|
||||
<span className="text-green-400"># 快速开始</span>{'\n'}
|
||||
<span className="text-purple-400">curl</span> -X <span className="text-yellow-400">POST</span> <span className="text-green-400">https://api.example.com/api/v1/auth/register</span> \{'\n'}
|
||||
{' '}-H <span className="text-blue-400">"Content-Type: application/json"</span> \{'\n'}
|
||||
{' '}-d <span className="text-orange-400">"username=dev&password=***"</span>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute -z-10 -bottom-10 -right-10 w-40 h-40 bg-blue-500/20 rounded-full blur-3xl animate-pulse" />
|
||||
</motion.div>
|
||||
|
||||
<div className="flex flex-col justify-center space-y-8 order-1 lg:order-2">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<h2 className="text-3xl md:text-5xl font-bold tracking-tight text-foreground leading-[1.1] mb-6">
|
||||
开发者友好，<br />
|
||||
极速集成上手
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-lg leading-relaxed mb-8">
|
||||
标准化的 RESTful API 接口，完整的 TypeScript 类型定义，详细的文档和 Swagger UI。无论使用什么编程语言，只需几行代码，即可快速集成。
|
||||
</p>
|
||||
|
||||
<ul className="space-y-4 mb-8">
|
||||
{[
|
||||
"RESTful API，语义清晰，易于理解",
|
||||
"OpenAPI / Swagger 接口文档",
|
||||
"TypeScript 类型定义，开发友好",
|
||||
"丰富的代码示例和集成指南"
|
||||
].map((item, i) => (
|
||||
<li key={i} className="flex items-center gap-3 text-sm text-foreground/80">
|
||||
<div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<Link href="/docs/api">
|
||||
<Button variant="secondary" className="rounded-full text-xs hover:bg-muted-foreground/10">
|
||||
<Book className="w-3 h-3" />
|
||||
API 文档
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,97 @@
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* Footer Section - 页脚
|
||||
*/
|
||||
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">
|
||||
MP
|
||||
</div>
|
||||
<span className="text-2xl font-bold tracking-tight text-foreground">Modern Platform</span>
|
||||
</Link>
|
||||
<p className="text-muted-foreground text-base leading-relaxed max-w-sm">
|
||||
通用的、现代化的后台管理系统脚手架。基于 Go + React 构建，开箱即用、完整基建、极易扩展。
|
||||
</p>
|
||||
<div className="flex gap-4 pt-2">
|
||||
<SocialLink icon={Github} href="https://github.com/Rain-kl/Wavelet/" />
|
||||
</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="/home">仪表盘</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="/docs/how-to-use">快速开始</FooterLink></li>
|
||||
<li><FooterLink href="/docs/api">API 文档</FooterLink></li>
|
||||
<li><FooterLink href="https://github.com/Rain-kl/Wavelet">源代码</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/Wavelet/issues">GitHub Issues</FooterLink></li>
|
||||
<li><FooterLink href="https://github.com/Rain-kl/Wavelet/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">
|
||||
<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>
|
||||
</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">
|
||||
Modern Platform
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
});
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
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">
|
||||
{children}
|
||||
<span className="absolute left-0 -bottom-0.5 w-0 h-px bg-foreground transition-all duration-300 group-hover:w-full" />
|
||||
</span>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
import * as React from "react";
|
||||
import Link from "next/link";
|
||||
import {motion} from "motion/react";
|
||||
import {ArrowRight, CreditCard, Globe, Shield, Zap} from "lucide-react";
|
||||
import {cn} from "@/lib/utils";
|
||||
import {Button} from "@/components/ui/button";
|
||||
|
||||
export interface HeroSectionProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hero Section - 首页 Hero 展示
|
||||
*/
|
||||
export const HeroSection = React.memo(function HeroSection({ className }: HeroSectionProps) {
|
||||
|
||||
return (
|
||||
<section className={cn("w-full", className)}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
delay: 0.3,
|
||||
duration: 0.8,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="relative z-10 w-full h-screen flex flex-col justify-center px-6"
|
||||
>
|
||||
<div className="container mx-auto max-w-7xl grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
|
||||
<div className="max-w-5xl pt-20 lg:pt-0">
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.1, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight leading-[1.1] mb-6 text-foreground"
|
||||
>
|
||||
Modern Platform <br />
|
||||
<span className="bg-clip-text text-primary">
|
||||
为二次开发而生
|
||||
</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="text-sm md:text-base text-muted-foreground max-w-xl leading-relaxed mb-10"
|
||||
>
|
||||
通用的、现代化的后台管理系统脚手架
|
||||
<br className="hidden md:block" />
|
||||
开箱即用、完整基建、极易扩展，助您快速构建企业级应用。
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="flex flex-col sm:flex-row items-center gap-4"
|
||||
>
|
||||
<Link href="/home" className="w-full sm:w-auto">
|
||||
<Button
|
||||
size="lg"
|
||||
className="w-full rounded-full bg-primary hover:bg-primary/90 font-medium transition-all active:scale-95"
|
||||
>
|
||||
立即开始
|
||||
<ArrowRight className="size-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Link href="/docs/how-to-use" className="w-full sm:w-auto">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
className="w-full rounded-full font-medium active:scale-95"
|
||||
>
|
||||
了解更多
|
||||
</Button>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, delay: 0.5 }}
|
||||
className="mt-16 flex flex-wrap gap-8 text-sm font-medium text-muted-foreground border-t border-border/50 pt-8"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Zap className="w-5 h-5 text-yellow-500" />
|
||||
<span>开箱即用</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Globe className="w-5 h-5 text-blue-500" />
|
||||
<span>高度可扩展</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="w-5 h-5 text-green-500" />
|
||||
<span>工业级基建</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="hidden lg:block relative h-full min-h-[500px] w-full">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 50, rotate: -5 }}
|
||||
whileInView={{ opacity: 1, x: 0, rotate: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 1, delay: 0.2, ease: "easeOut" }}
|
||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md aspect-square"
|
||||
>
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-purple-500/30 rounded-full blur-3xl animate-pulse" />
|
||||
<div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-500/30 rounded-full blur-3xl animate-pulse delay-75" />
|
||||
|
||||
<div className="relative z-10 w-full h-64 bg-background/40 backdrop-blur-2xl border border-white/10 rounded-3xl shadow-2xl p-6 flex flex-col justify-between transform transition-transform hover:scale-[1.02] duration-500">
|
||||
<div className="flex gap-4 items-center">
|
||||
<CreditCard className="size-6" />
|
||||
<span>Modern Platform</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs text-muted-foreground mb-2">Stack</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="inline-block px-2 py-1 bg-blue-500/10 text-blue-500 rounded text-xs font-medium">Go • Gin</span>
|
||||
<span className="inline-block px-2 py-1 bg-purple-500/10 text-purple-500 rounded text-xs font-medium">React • Next.js</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-end">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-1">Ready for</p>
|
||||
<div className="text-lg font-bold tracking-tight text-foreground flex items-center gap-1">
|
||||
<span>Develop</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-8 w-8 rounded-full bg-primary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
animate={{ y: [0, -20, 0] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
|
||||
className="absolute -top-6 -right-6 z-20 bg-background/60 backdrop-blur-xl border border-white/20 p-4 rounded-2xl shadow-xl"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full flex items-center justify-center bg-emerald-500/20 text-emerald-500">
|
||||
<Zap className="size-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Features</p>
|
||||
<div className="text-sm font-bold">
|
||||
<span>Modern</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user