feat: 实现 Mini Game AI 工具平台

基于 Next.js 15、React 19 和 TypeScript 构建面向小游戏开发者的 AI 赋能工具平台。主要功能： - 首页：包含 Hero、功能展示、优势介绍、定价和 CTA 区域 - 三大核心工具：视频转序列帧、图片压缩、音频压缩 - 响应式布局：包含顶部导航、页脚和侧边栏 - 文件上传：支持拖拽上传，使用 react-dropzone - 进度追踪：实时显示上传和处理进度 - 可配置工具：每个工具都支持自定义参数配置 - 结果预览：支持下载处理后的文件 - 4K 优化：针对大屏幕优化的响应式设计 - API 路由：文件上传和处理的模拟实现技术栈： - Next.js 15 (App Router) - React 19 - TypeScript (严格模式) - Tailwind CSS（自定义 4K 断点） - shadcn/ui 组件库 - Framer Motion 动画 - Zustand 状态管理 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-20 22:26:55 +08:00
parent 9529a684a1
commit a7449bf49b
40 changed files with 10963 additions and 0 deletions
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -0,0 +1,391 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import {
+  ArrowRight,
+  Video,
+  Image,
+  Music,
+  Sparkles,
+  Zap,
+  Shield,
+  Users,
+  Check,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+const features = [
+  {
+    icon: Video,
+    title: "Video to Frames",
+    description: "Extract frames from videos with customizable frame rates and formats. Perfect for sprite animations.",
+    href: "/tools/video-frames",
+  },
+  {
+    icon: Image,
+    title: "Image Compression",
+    description: "Optimize images for web and mobile without quality loss. Support for batch processing.",
+    href: "/tools/image-compress",
+  },
+  {
+    icon: Music,
+    title: "Audio Compression",
+    description: "Compress and convert audio files to various formats. Adjust bitrate and sample rate.",
+    href: "/tools/audio-compress",
+  },
+  {
+    icon: Sparkles,
+    title: "AI-Powered Tools",
+    description: "Enhance your assets with AI. Upscale images, remove backgrounds, and more.",
+    href: "/tools/ai-tools",
+  },
+];
+
+const benefits = [
+  {
+    icon: Zap,
+    title: "Lightning Fast",
+    description: "Process files in seconds with our optimized infrastructure.",
+  },
+  {
+    icon: Shield,
+    title: "Secure & Private",
+    description: "Your files are encrypted and automatically deleted after processing.",
+  },
+  {
+    icon: Users,
+    title: "Built for Developers",
+    description: "API access, batch processing, and tools designed for game development workflows.",
+  },
+];
+
+const pricingPlans = [
+  {
+    name: "Free",
+    price: "$0",
+    description: "Perfect for trying out",
+    features: [
+      "10 processes per day",
+      "50MB max file size",
+      "Basic tools",
+      "Community support",
+    ],
+    cta: "Get Started",
+    href: "/register",
+  },
+  {
+    name: "Pro",
+    price: "$19",
+    period: "/month",
+    description: "For serious developers",
+    features: [
+      "Unlimited processes",
+      "500MB max file size",
+      "All tools including AI",
+      "Priority support",
+      "API access",
+    ],
+    cta: "Start Free Trial",
+    href: "/pricing",
+    popular: true,
+  },
+  {
+    name: "Enterprise",
+    price: "Custom",
+    description: "For teams and businesses",
+    features: [
+      "Everything in Pro",
+      "Unlimited file size",
+      "Custom integrations",
+      "Dedicated support",
+      "SLA guarantee",
+    ],
+    cta: "Contact Sales",
+    href: "/contact",
+  },
+];
+
+function HeroSection() {
+  return (
+    <section className="relative overflow-hidden">
+      {/* Background gradient */}
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-background to-background" />
+        <div className="absolute inset-0 bg-[url(/grid.svg)] bg-cover opacity-10" />
+      </div>
+
+      <div className="container py-24 md:py-32 xl:py-40 2xl:py-48">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="mx-auto max-w-5xl text-center 2xl:max-w-6xl 3xl:max-w-7xl"
+        >
+          <Badge className="mb-4" variant="secondary">
+            <Sparkles className="mr-1 h-3 w-3" />
+            AI-Powered Tools
+          </Badge>
+          <h1 className="mb-6 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl">
+            Build Games{" "}
+            <span className="bg-gradient-to-r from-purple-400 via-pink-500 to-blue-500 bg-clip-text text-transparent">
+              Faster
+            </span>
+          </h1>
+          <p className="mb-8 text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
+            Transform your game development workflow with powerful AI tools. Video to frames,
+            image compression, audio processing, and more.
+          </p>
+          <div className="flex flex-col items-center justify-center gap-4 sm:flex-row xl:gap-6">
+            <Button size="lg" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
+              <Link href="/tools">
+                Start Building <ArrowRight className="ml-2 h-4 w-4" />
+              </Link>
+            </Button>
+            <Button size="lg" variant="outline" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
+              <Link href="/pricing">View Pricing</Link>
+            </Button>
+          </div>
+
+          {/* Stats */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="mt-16 grid grid-cols-3 gap-8 md:gap-16 xl:gap-24 2xl:gap-32"
+          >
+            <div>
+              <div className="text-3xl font-bold md:text-4xl xl:text-5xl 2xl:text-6xl">10K+</div>
+              <div className="text-sm text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">Developers</div>
+            </div>
+            <div>
+              <div className="text-3xl font-bold md:text-4xl xl:text-5xl 2xl:text-6xl">1M+</div>
+              <div className="text-sm text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">Files Processed</div>
+            </div>
+            <div>
+              <div className="text-3xl font-bold md:text-4xl xl:text-5xl 2xl:text-6xl">99.9%</div>
+              <div className="text-sm text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">Uptime</div>
+            </div>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
+
+function FeaturesSection() {
+  return (
+    <section className="border-t border-border/40 bg-background/50 py-24 xl:py-32 2xl:py-40">
+      <div className="container">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+          className="mb-16 text-center xl:mb-20 2xl:mb-24"
+        >
+          <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl xl:text-5xl 2xl:text-6xl">
+            Everything You Need
+          </h2>
+          <p className="text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
+            Powerful tools designed specifically for game developers
+          </p>
+        </motion.div>
+
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 xl:gap-8 2xl:gap-10">
+          {features.map((feature, index) => (
+            <motion.div
+              key={feature.title}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+            >
+              <Link href={feature.href}>
+                <Card className="h-full transition-all hover:border-primary/50 hover:shadow-lg hover:shadow-primary/5 xl:p-8 2xl:p-10">
+                  <CardHeader>
+                    <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 xl:h-14 xl:w-14 2xl:h-16 2xl:w-16">
+                      <feature.icon className="h-6 w-6 text-primary xl:h-7 xl:w-7 2xl:h-8 2xl:w-8" />
+                    </div>
+                    <CardTitle className="text-xl xl:text-2xl 2xl:text-3xl">{feature.title}</CardTitle>
+                    <CardDescription className="text-base xl:text-lg 2xl:text-xl">{feature.description}</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <Button variant="ghost" size="sm" className="w-full xl:text-base 2xl:text-lg">
+                      Try it now <ArrowRight className="ml-2 h-4 w-4" />
+                    </Button>
+                  </CardContent>
+                </Card>
+              </Link>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function BenefitsSection() {
+  return (
+    <section className="py-24 xl:py-32 2xl:py-40">
+      <div className="container">
+        <div className="grid gap-12 lg:grid-cols-2 xl:gap-16 2xl:gap-20">
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+          >
+            <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl xl:text-5xl 2xl:text-6xl">
+              Why Choose Mini Game AI?
+            </h2>
+            <p className="mb-8 text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
+              We understand the unique challenges of game development. Our tools are built to help
+              you work faster and smarter.
+            </p>
+            <Button size="lg" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
+              <Link href="/about">Learn More About Us</Link>
+            </Button>
+          </motion.div>
+
+          <div className="space-y-6 xl:space-y-8">
+            {benefits.map((benefit, index) => (
+              <motion.div
+                key={benefit.title}
+                initial={{ opacity: 0, x: 20 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+              >
+                <Card className="xl:p-8 2xl:p-10">
+                  <CardContent className="flex gap-4 p-6 xl:gap-6 2xl:gap-8">
+                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10 xl:h-14 xl:w-14 2xl:h-16 2xl:w-16">
+                      <benefit.icon className="h-6 w-6 text-primary xl:h-7 xl:w-7 2xl:h-8 2xl:w-8" />
+                    </div>
+                    <div>
+                      <h3 className="mb-2 text-lg font-semibold xl:text-xl 2xl:text-2xl">{benefit.title}</h3>
+                      <p className="text-muted-foreground text-sm md:text-base xl:text-lg 2xl:text-xl">{benefit.description}</p>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function PricingSection() {
+  return (
+    <section className="border-t border-border/40 bg-background/50 py-24 xl:py-32 2xl:py-40">
+      <div className="container">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+          className="mb-16 text-center xl:mb-20 2xl:mb-24"
+        >
+          <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl xl:text-5xl 2xl:text-6xl">
+            Simple, Transparent Pricing
+          </h2>
+          <p className="text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
+            Start free, scale as you grow. No hidden fees.
+          </p>
+        </motion.div>
+
+        <div className="grid gap-8 md:grid-cols-3 xl:gap-10 2xl:gap-12">
+          {pricingPlans.map((plan, index) => (
+            <motion.div
+              key={plan.name}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+            >
+              <Card className={`relative h-full ${plan.popular ? "border-primary" : ""} xl:p-8 2xl:p-10`}>
+                {plan.popular && (
+                  <Badge className="absolute -top-3 left-1/2 -translate-x-1/2 xl:text-base 2xl:text-lg">
+                    Most Popular
+                  </Badge>
+                )}
+                <CardHeader>
+                  <CardTitle className="text-xl xl:text-2xl 2xl:text-3xl">{plan.name}</CardTitle>
+                  <CardDescription className="text-base xl:text-lg 2xl:text-xl">{plan.description}</CardDescription>
+                  <div className="mt-4">
+                    <span className="text-4xl font-bold xl:text-5xl 2xl:text-6xl">{plan.price}</span>
+                    {plan.period && (
+                      <span className="text-muted-foreground md:text-base xl:text-lg 2xl:text-xl">{plan.period}</span>
+                    )}
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <ul className="space-y-3">
+                    {plan.features.map((feature) => (
+                      <li key={feature} className="flex items-start gap-2">
+                        <Check className="h-5 w-5 shrink-0 text-primary xl:h-6 xl:w-6 2xl:h-7 2xl:w-7" />
+                        <span className="text-sm md:text-base xl:text-lg 2xl:text-xl">{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+                  <Button className="w-full xl:text-lg xl:py-6 2xl:text-xl 2xl:py-7" variant={plan.popular ? "default" : "outline"} asChild>
+                    <Link href={plan.href}>{plan.cta}</Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function CTASection() {
+  return (
+    <section className="py-24 xl:py-32 2xl:py-40">
+      <div className="container">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+          className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-primary/20 via-primary/10 to-background p-12 text-center md:p-20 xl:p-24 2xl:p-32"
+        >
+          <div className="relative z-10">
+            <h2 className="mb-4 text-3xl font-bold tracking-tight md:text-4xl xl:text-5xl 2xl:text-6xl">
+              Ready to Level Up?
+            </h2>
+            <p className="mb-8 text-lg text-muted-foreground md:text-xl xl:text-2xl 2xl:text-3xl">
+              Join thousands of game developers building amazing games with our tools.
+            </p>
+            <div className="flex flex-col items-center justify-center gap-4 sm:flex-row xl:gap-6">
+              <Button size="lg" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
+                <Link href="/register">Get Started for Free</Link>
+              </Button>
+              <Button size="lg" variant="outline" asChild className="xl:text-lg xl:px-8 xl:py-6 2xl:text-xl 2xl:px-10 2xl:py-7">
+                <Link href="/contact">Contact Sales</Link>
+              </Button>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
+
+export default function HomePage() {
+  return (
+    <>
+      <HeroSection />
+      <FeaturesSection />
+      <BenefitsSection />
+      <PricingSection />
+      <CTASection />
+    </>
+  );
+}