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

prettier

Browse Source
This commit is contained in:
ryan
2026-07-13 15:17:45 +08:00
parent 08e61ce833
commit e0eb4e5975
334 changed files with 17212 additions and 12321 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/home/developer-section.tsx
+92 -56
View File
@@ -1,9 +1,9 @@
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";
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;
@@ -12,7 +12,9 @@ export interface DeveloperSectionProps {
/**
* Developer Section - 开发者体验展示
*/
export const DeveloperSection = React.memo(function DeveloperSection({ className }: DeveloperSectionProps) {
export const DeveloperSection = React.memo(function DeveloperSection({
className,
}: DeveloperSectionProps) {
const [copied, setCopied] = React.useState(false);
const codeContent = `# 注册用户
@@ -31,13 +33,13 @@ curl -X POST https://api.example.com/api/v1/auth/register \\
setTimeout(() => setCopied(false), 2000);
} catch {
// Fallback for older browsers
const textArea = document.createElement("textarea");
const textArea = document.createElement('textarea');
textArea.value = codeContent;
textArea.style.position = "fixed";
textArea.style.left = "-9999px";
textArea.style.position = 'fixed';
textArea.style.left = '-9999px';
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
document.execCommand('copy');
document.body.removeChild(textArea);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
@@ -45,97 +47,131 @@ curl -X POST https://api.example.com/api/v1/auth/register \\
};
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" />
<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">
<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"
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 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" />
<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 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" />}
<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">&quot;Content-Type: application/json&quot;</span> \{'\n'}
{' '}-d <span className="text-orange-400">&quot;username=dev&amp;password=***&quot;</span>
<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'>
&quot;Content-Type: application/json&quot;
</span>{' '}
\{'\n'}
{' '}-d{' '}
<span className='text-orange-400'>
&quot;username=dev&amp;password=***&quot;
</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" />
<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">
<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 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 className='text-muted-foreground text-lg leading-relaxed mb-8'>
标准化的 RESTful API 接口，完整的 TypeScript
类型定义，详细的文档和 Swagger
UI。无论使用什么编程语言，只需几行代码，即可快速集成。
</p>
<ul className="space-y-4 mb-8">
<ul className='space-y-4 mb-8'>
{[
"RESTful API，语义清晰，易于理解",
"OpenAPI / Swagger 接口文档",
"TypeScript 类型定义，开发友好",
"丰富的代码示例和集成指南"
'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" />
<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" />
<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>
);
frontend/components/home/footer-section.tsx
+103 -51
View File
@@ -1,7 +1,7 @@
import * as React from "react";
import {cn} from "@/lib/utils";
import Link from "next/link";
import {Github, LucideIcon, WavesIcon} from "lucide-react";
import * as React from 'react';
import { cn } from '@/lib/utils';
import Link from 'next/link';
import { Github, LucideIcon, WavesIcon } from 'lucide-react';
export interface FooterSectionProps {
className?: string;
@@ -10,66 +10,106 @@ 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">
<span className="flex size-9 items-center justify-center rounded-full bg-foreground text-background [@media(max-height:700px)]:size-8">
<WavesIcon aria-hidden="true" />
<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'>
<span className='flex size-9 items-center justify-center rounded-full bg-foreground text-background [@media(max-height:700px)]:size-8'>
<WavesIcon aria-hidden='true' />
</span>
<span className='text-2xl font-bold tracking-tight text-foreground'>
Wavelet
</span>
<span className="text-2xl font-bold tracking-tight text-foreground">Wavelet</span>
</Link>
<p className="text-muted-foreground text-base leading-relaxed max-w-sm">
通用的、现代化的后台管理系统脚手架。基于 Go + React 构建，开箱即用、完整基建、极易扩展。
<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 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>
<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>
<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>
<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">
<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>
@@ -77,21 +117,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>
)
);
}
frontend/components/home/hero-section.tsx
+88 -66
View File
@@ -1,9 +1,9 @@
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";
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;
@@ -12,10 +12,11 @@ export interface HeroSectionProps {
/**
* Hero Section - 首页 Hero 展示
*/
export const HeroSection = React.memo(function HeroSection({ className }: HeroSectionProps) {
export const HeroSection = React.memo(function HeroSection({
className,
}: HeroSectionProps) {
return (
<section className={cn("w-full", className)}>
<section className={cn('w-full', className)}>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -23,35 +24,41 @@ export const HeroSection = React.memo(function HeroSection({ className }: HeroSe
transition={{
delay: 0.3,
duration: 0.8,
ease: "easeInOut",
ease: 'easeInOut',
}}
className="relative z-10 w-full h-screen flex flex-col justify-center px-6"
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">
<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"
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'
>
Wavelet<br />
<span className="bg-clip-text text-primary">
Modern Platform
</span>
Wavelet
<br />
<span className='bg-clip-text text-primary'>Modern Platform</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"
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" />
<br className='hidden md:block' />
开箱即用、完整基建、极易扩展，助您快速构建应用。
</motion.p>
@@ -59,24 +66,28 @@ export const HeroSection = React.memo(function HeroSection({ className }: HeroSe
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"
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">
<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"
size='lg'
className='w-full rounded-full bg-primary hover:bg-primary/90 font-medium transition-all active:scale-95'
>
立即开始
<ArrowRight className="size-4" />
<ArrowRight className='size-4' />
</Button>
</Link>
<Link href="/docs/how-to-use" className="w-full sm:w-auto">
<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"
variant='secondary'
size='lg'
className='w-full rounded-full font-medium active:scale-95'
>
了解更多
</Button>
@@ -88,78 +99,89 @@ export const HeroSection = React.memo(function HeroSection({ className }: HeroSe
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"
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" />
<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" />
<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" />
<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">
<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"
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='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" />
<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 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 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">
<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 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"
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 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">
<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>