From dc5ccbb11801c997fd91b427341e4ea79f95b084 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期一, 07 四月 2025 13:46:10 +0800
Subject: [PATCH] 主页面优化
---
src/app/page.tsx | 265 +++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 199 insertions(+), 66 deletions(-)
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f7bbfb0..a5f9c3e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,77 +1,210 @@
"use client";
-import { useState } from 'react';
-import Sidebar from '@/components/layout/Sidebar';
-import Card from '@/components/Card';
-import ChatDialog from '@/components/ChatDialog';
-
-const services = [
- {
- title: '琛ユ枡',
- description: '鏅鸿兘鍔ㄦ�佸垎鏋愪骇绾匡紝宸ヤ綅鐨勭己鏂欐儏鍐碉紝闄嶄綆鍋滅嚎椋庨櫓',
- imageUrl: '/images/kanban.jpg',
- chatbotId: 'JELkWpPLHQfRNhEH'
- },
- {
- title: '鎻掑崟',
- description: '鏅鸿兘璇勪及闇�姹傛彃鍗曞浜ц兘锛屽師鏉愭枡鍜屼氦浠樻湇鍔＄殑褰卞搷锛屾彁鍗囧鎴锋弧鎰忓害',
- imageUrl: '/images/xuqiu.jpg',
- chatbotId: 'DfH4cIzujVGvn5iR'
- },
- {
- title: '绉戞矁鏂攢鍞帹鑽愬皬鍔╂墜',
- description: '鏅鸿兘鍖栦骇鍝佹帹鑽愭彁鍗囧璐晥鐜�',
- imageUrl: '/images/robot.jpg',
- chatbotId: 'sUAviPXvcEIw3oQC'
- },
- {
- title: '搴撳瓨绠＄悊鐭ヨ瘑搴撻棶绛�',
- description: '搴撳瓨鐭ヨ瘑锛屾彁渚涗笓涓氱殑渚涘簲閾惧簱瀛樼煡璇嗛棶绛�',
- imageUrl: '/images/know.jpg',
- chatbotId: 'pDDfkU9HyBl2gzXx'
- },
-];
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
export default function Home() {
- const [isChatOpen, setIsChatOpen] = useState(false);
- const [currentChatbot, setCurrentChatbot] = useState('');
-
- const handleCardClick = (title: string, chatbotId?: string) => {
- if (chatbotId) {
- setCurrentChatbot(chatbotId);
- setIsChatOpen(true);
- }
+ const [mounted, setMounted] = useState(false);
+ const [isClient, setIsClient] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ setIsClient(true);
+ }, []);
+
+ // 瀹氫箟鍔ㄧ敾鍙樹綋
+ const fadeInUp = {
+ hidden: { opacity: 0, y: 50 },
+ visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
+ };
+
+ const fadeInLeft = {
+ hidden: { opacity: 0, x: -50 },
+ visible: { opacity: 1, x: 0, transition: { duration: 0.7, ease: "easeOut" } }
+ };
+
+ const fadeInRight = {
+ hidden: { opacity: 0, x: 50 },
+ visible: { opacity: 1, x: 0, transition: { duration: 0.7, ease: "easeOut" } }
+ };
+
+ const fadeInScale = {
+ hidden: { opacity: 0, scale: 0.95 },
+ visible: { opacity: 1, scale: 1, transition: { duration: 0.8, ease: "easeOut" } }
};
return (
- <div className="flex">
- <Sidebar />
- <div className="flex-1 p-6 md:p-8 bg-gradient-to-b from-[var(--ai-surface)] to-white">
- <div className="max-w-7xl mx-auto">
- <div className="mb-8">
- <h1 className="text-3xl font-bold text-[var(--ai-primary)] mb-2">
- AI鍦烘櫙妯℃嫙
- <span className="ml-2 inline-block w-2 h-2 rounded-full bg-[var(--ai-secondary)] animate-pulse"></span>
- </h1>
- <p className="text-gray-600">閫夋嫨浠ヤ笅鍦烘櫙锛屼綋楠屼汉宸ユ櫤鑳藉浣曡В鍐冲疄闄呬笟鍔￠棶棰�</p>
- <div className="h-1 w-24 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-accent)] mt-4"></div>
- </div>
- <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
- {services.map((service, index) => (
- <Card
- key={index}
- {...service}
- onClick={() => handleCardClick(service.title, service.chatbotId)}
- />
- ))}
- </div>
+ <main className="relative w-full min-h-screen bg-[#0A1033] text-white overflow-hidden px-4 -mt-[1px]">
+ {/* 椤堕儴瀵艰埅鑳屾櫙寤朵几灞� */}
+ <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-[#1E2B63] to-[#0A1033] z-0"></div>
+
+ <div className="max-w-7xl mx-auto py-0">
+ {/* 椤甸潰鍐呭 */}
+
+ {/* 涓昏鍐呭閮ㄥ垎 */}
+ <div className="relative z-10 min-h-screen pt-32 pb-24">
+ {/* 鎶�鏈紭鍔块儴鍒� */}
+ <section className="w-full py-6 relative">
+ {/* 鏍囬 */}
+ <motion.div
+ initial="hidden"
+ whileInView="visible"
+ viewport={{ once: false, margin: "-100px" }}
+ variants={fadeInUp}
+ className="text-center mb-16"
+ >
+ <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
+ <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB]">
+ AI璧嬭兘APS
+ </span> 鏍稿績鎶�鏈紭鍔�
+ </h2>
+ <div className="h-1 w-24 mx-auto bg-gradient-to-r from-[#6ADBFF] to-[#FF6A88]"></div>
+ </motion.div>
+
+ {/* 鎶�鏈崱鐗� */}
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+ {/* 宸︿晶锛氶噺瀛愬惎鍙戠畻娉� */}
+ <motion.div
+ initial="hidden"
+ whileInView="visible"
+ viewport={{ once: false, margin: "-100px" }}
+ variants={fadeInLeft}
+ className="relative"
+ >
+ <div className="absolute -left-3 top-0 h-full w-1 bg-gradient-to-b from-[#6ADBFF] via-[#5E72EB] to-transparent"></div>
+ <div className="backdrop-blur-sm bg-white/5 rounded-xl p-8 border border-[#6ADBFF]/20 h-full">
+ <h3 className="text-2xl font-semibold text-white mb-4">閲忓瓙鍚彂绠楁硶</h3>
+ <p className="text-gray-300 leading-relaxed mb-6">
+ 鍩轰簬閲忓瓙璁＄畻鍘熺悊璁捐鐨勪紭鍖栫畻娉曪紝鑳藉鍦ㄦ寚鏁扮骇澶嶆潅搴︾殑鎺掔▼闂涓揩閫熷鎵捐繎浼兼渶浼樿В銆�
+ </p>
+ </div>
+ </motion.div>
+
+ {/* 鍙充晶锛氭繁搴﹀涔犻娴� */}
+ <motion.div
+ initial="hidden"
+ whileInView="visible"
+ viewport={{ once: false, margin: "-100px" }}
+ variants={fadeInRight}
+ className="relative"
+ >
+ <div className="absolute -left-3 top-0 h-full w-1 bg-gradient-to-b from-[#FF6A88] via-[#5E72EB] to-transparent"></div>
+ <div className="backdrop-blur-sm bg-white/5 rounded-xl p-8 border border-[#FF6A88]/20 h-full">
+ <h3 className="text-2xl font-semibold text-white mb-4">娣卞害瀛︿範棰勬祴</h3>
+ <p className="text-gray-300 leading-relaxed mb-6">
+ 閲囩敤鑷爺鐨勬椂闂村簭鍒楁繁搴﹀涔犳灦鏋勶紝瀵圭敓浜х幆澧冧腑鐨勫叧閿寚鏍囪繘琛岀簿鍑嗛娴嬨��
+ </p>
+ </div>
+ </motion.div>
+ </div>
+
+ {/* 鏁板瓧鎸囨爣鍖哄煙 */}
+ <motion.div
+ initial={{ opacity: 0, y: 20 }}
+ whileInView={{ opacity: 1, y: 0 }}
+ viewport={{ once: false, margin: "-100px" }}
+ transition={{ duration: 0.8, ease: "easeOut" }}
+ className="mt-20 w-full grid grid-cols-2 md:grid-cols-4 gap-8 mb-20"
+ >
+ <div className="text-center">
+ <div className="text-4xl font-bold text-[#6ADBFF] mb-2">98%</div>
+ <p className="text-gray-300">璁″垝鍑嗙‘鐜�</p>
+ </div>
+ <div className="text-center">
+ <div className="text-4xl font-bold text-[#5E72EB] mb-2">45%</div>
+ <p className="text-gray-300">鏁堢巼鎻愬崌</p>
+ </div>
+ <div className="text-center">
+ <div className="text-4xl font-bold text-[#FF6A88] mb-2">30%</div>
+ <p className="text-gray-300">鎴愭湰闄嶄綆</p>
+ </div>
+ <div className="text-center">
+ <div className="text-4xl font-bold text-white mb-2">500+</div>
+ <p className="text-gray-300">浼佷笟妗堜緥</p>
+ </div>
+ </motion.div>
+ </section>
+
+ {/* 搴旂敤鍦烘櫙鍖哄煙 */}
+ <section className="w-full py-10 relative">
+ <motion.div
+ initial="hidden"
+ whileInView="visible"
+ viewport={{ once: false, margin: "-100px" }}
+ variants={fadeInUp}
+ className="text-center mb-16"
+ >
+ <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
+ <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#FF6A88] to-[#6ADBFF]">
+ 搴旂敤鍦烘櫙
+ </span>
+ </h2>
+ <div className="h-1 w-24 mx-auto bg-gradient-to-r from-[#FF6A88] to-[#6ADBFF]"></div>
+ </motion.div>
+
+ {/* 搴旂敤鍦烘櫙鍗＄墖 */}
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+ {/* 搴旂敤鍦烘櫙鍗＄墖鍐呭 */}
+ <motion.div
+ initial="hidden"
+ whileInView="visible"
+ viewport={{ once: false, margin: "-100px" }}
+ variants={fadeInUp}
+ transition={{ delay: 0.1 }}
+ className="bg-[#131C41]/70 p-6 rounded-xl border border-[#6ADBFF]/20"
+ >
+ <h3 className="text-xl font-semibold text-white mb-4">绂绘暎鍒堕��</h3>
+ <p className="text-gray-300">
+ 鍦ㄩ浂閮ㄤ欢澶氥�佸伐鑹哄鏉傜殑绂绘暎鍒堕�犵幆澧冧腑锛屾垜浠殑瑙ｅ喅鏂规鑳藉鍚屾椂鑰冭檻璁惧鍒╃敤鐜囥�佷氦鏈熴�佸湪鍒跺搧搴撳瓨绛夊缁寸洰鏍囷紝鐢熸垚鏈�浼樻帓绋嬫柟妗堛��
+ </p>
+ </motion.div>
+
+ <motion.div
+ initial="hidden"
+ whileInView="visible"
+ viewport={{ once: false, margin: "-100px" }}
+ variants={fadeInUp}
+ transition={{ delay: 0.2 }}
+ className="bg-[#131C41]/70 p-6 rounded-xl border border-[#6ADBFF]/20"
+ >
+ <h3 className="text-xl font-semibold text-white mb-4">娴佺▼宸ヤ笟</h3>
+ <p className="text-gray-300">
+ 閽堝杩炵画鐢熶骇鐗规�э紝鎴戜滑鐨勮В鍐虫柟妗堝疄鐜颁簡鍘熸枡閲囪喘銆佺敓浜ц鍒掍笌鎺掔▼鐨勪竴浣撳寲浼樺寲锛屾渶灏忓寲鍒囨崲鎹熻�楀拰鑳芥簮娑堣�楋紝鎻愰珮浜х嚎鍒╃敤鐜囥��
+ </p>
+ </motion.div>
+
+ <motion.div
+ initial="hidden"
+ whileInView="visible"
+ viewport={{ once: false, margin: "-100px" }}
+ variants={fadeInUp}
+ transition={{ delay: 0.3 }}
+ className="bg-[#131C41]/70 p-6 rounded-xl border border-[#6ADBFF]/20"
+ >
+ <h3 className="text-xl font-semibold text-white mb-4">鐗╂祦浠撳偍</h3>
+ <p className="text-gray-300">
+ 浼樺寲浠撳偍甯冨眬涓庢嫞閫夎矾寰勶紝缁撳悎鏈哄櫒浜鸿皟搴︾郴缁燂紝瀹炵幇楂樻晥鐜囥�佷綆宸敊鐨勬櫤鑳界墿娴佺鐞嗭紝鎻愬崌浠撳偍涓績鏁翠綋杩愯惀鏁堢巼銆�
+ </p>
+ </motion.div>
+ </div>
+ </section>
+ </div>
+
+ {/* 鍔ㄦ�佹尝褰㈠浘 - 鏀惧湪椤甸潰搴曢儴 */}
+ <div className="relative w-full h-20 opacity-20 mt-auto">
+ <svg className="w-full h-full" viewBox="0 0 1200 120" preserveAspectRatio="none">
+ <path d="M0,36c200,0,200,84,400,84c200,0,200-84,400-84c200,0,200,84,400,84c200,0,200-84,400-84v84H0V36z" fill="url(#blueGradient)"></path>
+ <defs>
+ <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+ <stop offset="0%" stopColor="#6ADBFF" stopOpacity="0.5" />
+ <stop offset="50%" stopColor="#5E72EB" stopOpacity="0.5" />
+ <stop offset="100%" stopColor="#6ADBFF" stopOpacity="0.5" />
+ </linearGradient>
+ </defs>
+ </svg>
</div>
</div>
- <ChatDialog
- isOpen={isChatOpen}
- onClose={() => setIsChatOpen(false)}
- chatbotId={currentChatbot}
- />
- </div>
+ </main>
);
}
--
Gitblit v1.9.3