mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-11 01:36:37 +08:00
压缩历史至 95081aff
This commit is contained in:
ryan
@@ -0,0 +1,146 @@
|
||||
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, Key, 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 https://credit.linux.do/epay/submit.php \\
|
||||
-u sk_live_...: \\
|
||||
-d amount=1000 \\
|
||||
-d currency="cny" \\
|
||||
-d description="Pro Plan"`;
|
||||
|
||||
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-purple-400">curl</span> <span className="text-green-400">https://credit.linux.do/epay/submit.php</span> \{'\n'}
|
||||
{' '}-u <span className="text-yellow-400">sk_live_...:</span> \{'\n'}
|
||||
{' '}-d <span className="text-blue-400">amount</span>=<span className="text-orange-400">1000</span> \{'\n'}
|
||||
{' '}-d <span className="text-blue-400">currency</span>=<span className="text-green-400">"cny"</span> \{'\n'}
|
||||
{' '}-d <span className="text-blue-400">description</span>=<span className="text-green-400">"Pro Plan"</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 接口，清晰的错误提示，完善的调试工具。无论您使用什么编程语言，只需几行代码，即可完成积分服务功能接入。
|
||||
</p>
|
||||
|
||||
<ul className="space-y-4 mb-8">
|
||||
{[
|
||||
"RESTful API 接口，语义清晰",
|
||||
"完善的 Webhook 回调通知",
|
||||
"简单调试，开发测试零成本",
|
||||
"完善的文档和示例代码"
|
||||
].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>
|
||||
<Link href="/merchant">
|
||||
<Button variant="default" className="rounded-full text-xs hover:bg-primary/70">
|
||||
<Key className="w-3 h-3" />
|
||||
获取 API Key
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,99 @@
|
||||
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">
|
||||
LDC
|
||||
</div>
|
||||
<span className="text-2xl font-bold tracking-tight text-foreground">LINUX DO Credit</span>
|
||||
</Link>
|
||||
<p className="text-muted-foreground text-base leading-relaxed max-w-sm">
|
||||
专为 LINUX DO 社区打造的积分服务基础服务设施，快速集成、全球覆盖、安全可靠，致力于打造积分生态，助您轻松流通积分。
|
||||
</p>
|
||||
<div className="flex gap-4 pt-2">
|
||||
<SocialLink icon={Github} href="https://github.com/linux-do/credit/" />
|
||||
</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="https://github.com/linux-do/credit/commits/master/">更新日志</FooterLink></li>
|
||||
<li><FooterLink href="https://github.com/linux-do/credit/graphs/contributors">开源贡献</FooterLink></li>
|
||||
<li><FooterLink href="http://github.com/linux-do/credit/releases">发行版本</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://linux.do/t/topic/1365853">积分脚本</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://linux.do/">LINUX DO</FooterLink></li>
|
||||
<li><FooterLink href="https://wiki.linux.do/">LINUX DO Wiki</FooterLink></li>
|
||||
<li><FooterLink href="https://cdk.linux.do/">LINUX DO CDK</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 LINUX DO Credit. 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">
|
||||
LINUX DO Credit
|
||||
</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,193 @@
|
||||
import * as React from "react";
|
||||
import Link from "next/link";
|
||||
import { motion } from "motion/react";
|
||||
import { ArrowRight, Zap, Shield, Globe, CreditCard, Wallet } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CountingNumber } from "@/components/animate-ui/primitives/texts/counting-number";
|
||||
|
||||
export interface HeroSectionProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hero Section - 首页 Hero 展示
|
||||
*/
|
||||
export const HeroSection = React.memo(function HeroSection({ className }: HeroSectionProps) {
|
||||
const [balance, setBalance] = React.useState(12450.0);
|
||||
const [income, setIncome] = React.useState(240.0);
|
||||
|
||||
React.useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setBalance(Math.random() * (65123.45 - (-65)) + (-65));
|
||||
setIncome(Math.random() * (656.56 - (-65.65)) + (-65.65));
|
||||
}, 6565);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
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"
|
||||
>
|
||||
LINUX DO Credit <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"
|
||||
>
|
||||
专为 LINUX DO 社区打造的积分流通基础设施
|
||||
<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>LINUX DO Credit</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="h-2 w-24 bg-white/10 rounded-full" />
|
||||
<div className="h-2 w-16 bg-white/10 rounded-full" />
|
||||
</div>
|
||||
<div className="flex justify-between items-end">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground mb-1">Total Balance</p>
|
||||
<div className="text-3xl font-bold tracking-tight text-foreground flex items-center gap-1">
|
||||
<span>LDC</span>
|
||||
<CountingNumber
|
||||
number={balance}
|
||||
decimalPlaces={2}
|
||||
thousandSeparator=","
|
||||
initiallyStable={true}
|
||||
/>
|
||||
</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={cn(
|
||||
"w-10 h-10 rounded-full flex items-center justify-center transition-colors duration-500",
|
||||
income < 0 ? "bg-red-500/20 text-red-500" : "bg-green-500/20 text-green-500"
|
||||
)}>
|
||||
<Wallet className="size-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Income</p>
|
||||
<div className="text-sm font-bold flex items-center gap-1">
|
||||
<span>{income < 0 ? "-" : "+"} LDC</span>
|
||||
<CountingNumber
|
||||
number={Math.abs(income)}
|
||||
decimalPlaces={2}
|
||||
thousandSeparator=","
|
||||
initiallyStable={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user