From d0c9d7d10f846a831228663885e015120cdf950c Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期二, 08 四月 2025 10:08:50 +0800
Subject: [PATCH] 主页优化
---
src/app/page.tsx | 127 ++++++++++++++++++++++++++++++++---------
1 files changed, 98 insertions(+), 29 deletions(-)
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 712166e..f7a615a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -35,6 +35,20 @@
visible: { opacity: 1, scale: 1, transition: { duration: 0.8, ease: "easeOut" } }
};
+ // 鎸夐挳鍑哄満鍔ㄧ敾
+ const buttonVariants = {
+ hidden: { opacity: 0, y: 20 },
+ visible: (i: number) => ({
+ opacity: 1,
+ y: 0,
+ transition: {
+ delay: i * 0.2,
+ duration: 0.6,
+ ease: [0.25, 0.1, 0.25, 1],
+ },
+ }),
+ };
+
return (
<main className="relative w-full min-h-screen bg-[#0A1033] text-white overflow-hidden px-4 -mt-[1px]">
{/* 椤堕儴瀵艰埅鑳屾櫙寤朵几灞� */}
@@ -44,36 +58,91 @@
{/* 涓昏鍐呭閮ㄥ垎 */}
<div className="relative z-10 min-h-screen pt-32 pb-24">
{/* 浜や簰鎸夐挳缁� - 椤堕儴 */}
- <div className="flex justify-center gap-8 mb-20">
- <motion.button
- initial="hidden"
- whileInView="visible"
- viewport={{ once: false, margin: "-150px" }}
- variants={fadeInLeft}
- whileHover={{ scale: 1.03 }}
- whileTap={{ scale: 0.97 }}
- className="relative px-12 py-3 rounded-lg overflow-hidden group backdrop-blur-sm bg-white/5 border border-[#6ADBFF]/30 hover:border-[#6ADBFF]/50 transition-all duration-300"
- >
- <div className="absolute inset-0 bg-gradient-to-r from-[#6ADBFF]/5 to-[#5E72EB]/5 group-hover:from-[#6ADBFF]/10 group-hover:to-[#5E72EB]/10 transition-all duration-300"></div>
- <div className="relative">
- <span className="text-white font-semibold">AI鍦烘櫙妯℃嫙</span>
- </div>
- </motion.button>
+ <div className="flex flex-col sm:flex-row justify-center items-center gap-6 sm:gap-8 mb-20">
+ <Link href="/ai-scene">
+ <motion.div
+ custom={0}
+ initial="hidden"
+ whileInView="visible"
+ viewport={{ once: false, margin: "-150px" }}
+ variants={buttonVariants}
+ whileTap={{ scale: 0.97, transition: { duration: 0.1 } }}
+ className="group relative"
+ >
+ <div className="absolute -inset-0.5 rounded-xl bg-gradient-to-r from-[#6ADBFF] to-[#5E72EB] opacity-30 blur group-hover:opacity-100 group-hover:blur-md transition-all duration-500 group-hover:duration-200 group-active:opacity-70"></div>
+ <div className="relative flex items-center gap-2 px-8 py-4 rounded-lg backdrop-blur-sm bg-[#131C41]/90 border border-[#6ADBFF]/30 transition-all duration-300 shadow-[0_0_15px_rgba(106,219,255,0.15)] group-hover:shadow-[0_0_25px_rgba(106,219,255,0.25)] group-active:shadow-[0_0_10px_rgba(106,219,255,0.3)]">
+ <span className="text-[#6ADBFF] text-xl mr-2">鈿�</span>
+ <span className="text-white font-medium">AI鍦烘櫙妯℃嫙</span>
+
+ {/* 绮掑瓙鏁堟灉 */}
+ <div className="absolute inset-0 overflow-hidden rounded-lg">
+ {[...Array(6)].map((_, i) => (
+ <motion.div
+ key={i}
+ className="absolute w-1 h-1 rounded-full bg-[#6ADBFF]"
+ initial={{ x: "100%", y: "100%", opacity: 0 }}
+ animate={{
+ x: ["100%", `${Math.random() * 100}%`, "0%"],
+ y: ["100%", `${Math.random() * 100}%`, "0%"],
+ opacity: [0, 1, 0]
+ }}
+ transition={{
+ duration: 2 + Math.random() * 3,
+ repeat: Infinity,
+ repeatType: "loop",
+ ease: "easeInOut",
+ delay: i * 0.2
+ }}
+ />
+ ))}
+ </div>
+ </div>
+ </motion.div>
+ </Link>
- <motion.button
- initial="hidden"
- whileInView="visible"
- viewport={{ once: false, margin: "-150px" }}
- variants={fadeInRight}
- whileHover={{ scale: 1.03 }}
- whileTap={{ scale: 0.97 }}
- className="relative px-12 py-3 rounded-lg overflow-hidden group backdrop-blur-sm bg-white/5 border border-[#FF6A88]/30 hover:border-[#FF6A88]/50 transition-all duration-300"
- >
- <div className="absolute inset-0 bg-gradient-to-r from-[#FF6A88]/5 to-[#5E72EB]/5 group-hover:from-[#FF6A88]/10 group-hover:to-[#5E72EB]/10 transition-all duration-300"></div>
- <div className="relative">
- <span className="text-white font-semibold">寮�濮嬭亰澶�</span>
- </div>
- </motion.button>
+ <Link href="/chat">
+ <motion.div
+ custom={1}
+ initial="hidden"
+ whileInView="visible"
+ viewport={{ once: false, margin: "-150px" }}
+ variants={buttonVariants}
+ whileTap={{ scale: 0.97, transition: { duration: 0.1 } }}
+ className="group relative"
+ >
+ <div className="absolute -inset-0.5 rounded-xl bg-gradient-to-r from-[#FF6A88] to-[#5E72EB] opacity-30 blur group-hover:opacity-100 group-hover:blur-md transition-all duration-500 group-hover:duration-200 group-active:opacity-70"></div>
+ <div className="relative flex items-center gap-2 px-8 py-4 rounded-lg backdrop-blur-sm bg-[#131C41]/90 border border-[#FF6A88]/30 transition-all duration-300 shadow-[0_0_15px_rgba(255,106,136,0.15)] group-hover:shadow-[0_0_25px_rgba(255,106,136,0.25)] group-active:shadow-[0_0_10px_rgba(255,106,136,0.3)]">
+ <span className="text-[#FF6A88] text-xl mr-2">馃挰</span>
+ <span className="text-white font-medium">寮�濮嬭亰澶�</span>
+
+ {/* 娉㈢汗鏁堟灉 */}
+ <div className="absolute inset-0 overflow-hidden rounded-lg">
+ {[...Array(3)].map((_, i) => (
+ <motion.div
+ key={i}
+ className="absolute rounded-full border border-[#FF6A88]/20"
+ style={{
+ left: "50%",
+ top: "50%",
+ width: "10px",
+ height: "10px",
+ }}
+ initial={{ scale: 0, x: "-50%", y: "-50%", opacity: 0.5 }}
+ animate={{
+ scale: [0, 8],
+ opacity: [0.5, 0]
+ }}
+ transition={{
+ duration: 2,
+ repeat: Infinity,
+ delay: i * 0.6
+ }}
+ />
+ ))}
+ </div>
+ </div>
+ </motion.div>
+ </Link>
</div>
{/* AI璧嬭兘APS浼樺娍鍏ㄦ櫙 - 鐙珛鍖哄潡 */}
--
Gitblit v1.9.3