app/page.tsx

'use client';

import Link from 'next/link';

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      <div className="relative">
        <div 
          className="absolute inset-0 bg-cover bg-center opacity-10"
          style={{
            backgroundImage: `url('https://readdy.ai/api/search-image?query=Modern%20AI%20technology%20workspace%20with%20holographic%20displays%2C%20futuristic%20interface%20elements%2C%20clean%20minimalist%20design%2C%20soft%20blue%20and%20purple%20lighting%2C%20high-tech%20environment%2C%20digital%20screens%20showing%20data%20visualizations%2C%20sleek%20modern%20architecture%2C%20professional%20technology%20atmosphere%2C%20ultra-modern%20setting&width=1920&height=1080&seq=hero-bg&orientation=landscape')`
          }}
        />
        
        <div className="relative z-10">
          <header className="px-6 py-8">
            <div className="max-w-7xl mx-auto">
              <div className="flex items-center justify-between">
                <div className="text-3xl font-bold text-blue-600" style={{ fontFamily: 'Pacifico, serif' }}>
                  AI Agent Studio
                </div>
                <div className="flex items-center space-x-6">
                  <Link href="/dashboard" className="text-gray-700 hover:text-blue-600 transition-colors">
                    产品介绍
                  </Link>
                  <Link href="/templates" className="text-gray-700 hover:text-blue-600 transition-colors">
                    模板市场
                  </Link>
                  <Link href="/dashboard" className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap">
                    立即体验
                  </Link>
                </div>
              </div>
            </div>
          </header>
          
          <section className="px-6 py-20">
            <div className="max-w-7xl mx-auto">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div>
                  <h1 className="text-5xl font-bold text-gray-900 mb-6">
                    构建智能Agent
                    <br />
                    <span className="text-blue-600">无需编程</span>
                  </h1>
                  <p className="text-xl text-gray-600 mb-8 leading-relaxed">
                    通过可视化界面快速创建、部署和管理AI Agent应用。支持多种Agent类型，丰富的模板库，让人工智能触手可及。
                  </p>
                  <div className="flex items-center space-x-4">
                    <Link href="/dashboard" className="bg-blue-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap">
                      开始创建
                    </Link>
                    <Link href="/templates" className="border border-gray-300 text-gray-700 px-8 py-4 rounded-lg text-lg font-semibold hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap">
                      浏览模板
                    </Link>
                  </div>
                </div>
                
                <div className="relative">
                  <img 
                    src="https://readdy.ai/api/search-image?query=Professional%20AI%20dashboard%20interface%20mockup%20showing%20agent%20management%20panels%2C%20workflow%20diagrams%2C%20data%20analytics%20charts%2C%20modern%20UI%20design%20with%20blue%20accent%20colors%2C%20clean%20interface%20elements%2C%20desktop%20application%20screenshot%2C%20sophisticated%20technology%20platform%2C%20user-friendly%20design%2C%20comprehensive%20control%20panel%20layout&width=600&height=400&seq=hero-image&orientation=landscape"
                    alt="AI Agent Studio Platform"
                    className="rounded-xl shadow-2xl object-cover w-full h-96"
                  />
                </div>
              </div>
            </div>
          </section>
          
          <section className="px-6 py-20 bg-white/80 backdrop-blur-sm">
            <div className="max-w-7xl mx-auto">
              <div className="text-center mb-16">
                <h2 className="text-3xl font-bold text-gray-900 mb-4">强大的功能特性</h2>
                <p className="text-xl text-gray-600">一站式AI Agent开发平台</p>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
                  <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
                    <i className="ri-robot-line text-2xl text-blue-600"></i>
                  </div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-4">可视化Agent构建</h3>
                  <p className="text-gray-600">拖拽式界面设计，无需编程知识即可创建复杂的AI Agent应用</p>
                </div>
                
                <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
                  <div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-6">
                    <i className="ri-flow-chart text-2xl text-green-600"></i>
                  </div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-4">智能工作流</h3>
                  <p className="text-gray-600">设计复杂的自动化工作流，实现多Agent协同工作</p>
                </div>
                
                <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
                  <div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-6">
                    <i className="ri-database-line text-2xl text-purple-600"></i>
                  </div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-4">知识库管理</h3>
                  <p className="text-gray-600">上传文档、数据源，构建专业的知识库为Agent提供支持</p>
                </div>
                
                <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
                  <div className="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center mb-6">
                    <i className="ri-store-line text-2xl text-orange-600"></i>
                  </div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-4">模板市场</h3>
                  <p className="text-gray-600">丰富的预设模板库，快速启动各种场景的Agent应用</p>
                </div>
                
                <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
                  <div className="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center mb-6">
                    <i className="ri-bar-chart-line text-2xl text-red-600"></i>
                  </div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-4">数据分析</h3>
                  <p className="text-gray-600">实时监控Agent性能，深入分析使用数据和效果指标</p>
                </div>
                
                <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
                  <div className="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center mb-6">
                    <i className="ri-cloud-line text-2xl text-indigo-600"></i>
                  </div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-4">云端部署</h3>
                  <p className="text-gray-600">一键部署到云端，支持高并发访问和弹性扩展</p>
                </div>
              </div>
            </div>
          </section>
          
          <section className="px-6 py-20">
            <div className="max-w-4xl mx-auto text-center">
              <h2 className="text-3xl font-bold text-gray-900 mb-8">准备开始您的AI之旅？</h2>
              <p className="text-xl text-gray-600 mb-8">
                立即体验AI Agent Studio，无需编程经验即可构建强大的智能应用
              </p>
              <Link href="/dashboard" className="bg-blue-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap">
                免费开始使用
              </Link>
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}