feat: 优化项目模块细节

Author: weizwz

app/components/BlogArticles.tsx

@@ -92,7 +92,7 @@ export function BlogArticles({ title = '我的文章', subtitle = '来自博客
   }
 
   return (
-    <section id='article' className='py-20 bg-gray-50 relative overflow-hidden'>
+    <section id='article' className='py-20 bg-white relative overflow-hidden'>
       <div className='max-w-7xl mx-auto px-4 relative z-10'>
         <h2 className='text-2xl sm:text-3xl md:text-4xl font-bold text-center mb-3 md:mb-4 px-4'>{title}</h2>
         <p className='text-gray-500 text-center mb-8 md:mb-12 text-sm md:text-base px-4'>{subtitle}</p>

app/components/NoteShowcase.tsx

@@ -34,27 +34,27 @@ export function NoteShowcase({
           {/* Left Column: Visual (Browser Frame) */}
           <div className='relative lg:col-span-7 order-last lg:order-first'>
             {/* Background Blob */}
-            <div className='absolute -inset-4 bg-blue-100/50 rounded-xl -z-10 blur-2xl'></div>
+            <div className='absolute -inset-4 bg-blue-200/50 rounded-3xl z-0 blur-2xl'></div>
 
             {/* Browser Window */}
-            <div className='bg-white rounded-3xl shadow-2xl overflow-hidden border border-gray-200/50'>
+            <div className='bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-200/50 relative z-1'>
               {/* Browser Header */}
               <div className='bg-gray-50 px-4 pt-4 flex items-center gap-2'>
                 <div className='w-3 h-3 rounded-full bg-red-400'></div>
                 <div className='w-3 h-3 rounded-full bg-yellow-400'></div>
                 <div className='w-3 h-3 rounded-full bg-green-400'></div>
                 {/* Address Bar Mockup */}
                 <div className='ml-2 pl-2 flex-1 bg-white h-6 rounded-xl border border-gray-200/50 text-gray-400 text-sm truncate'>
-                  https://note.weizwz.com/
+                  {primaryButtonLink}
                 </div>
               </div>
 
               {/* Browser Content (Image) */}
-              <div className='relative h-[400px] md:h-[500px] overflow-hidden bg-gray-50 group pt-2'>
+              <div className='relative h-[400px] md:h-[500px] overflow-hidden bg-white group pt-1'>
                 <img 
                   src="https://p.weizwz.com/siteshot_note.webp" 
                   alt="Blog Preview"
-                  className="w-full object-top transition-transform duration-700 group-hover:scale-[1.02]"
+                  className="w-full object-top transition-transform duration-800 group-hover:scale-[1.03]"
                 />
                 {/* Inner Shadow */}
                 <div className="absolute inset-0 pointer-events-none shadow-[inset_0_0_40px_rgba(0,0,0,0.05)]"></div>

app/components/ProjectShowcase.tsx

@@ -1,5 +1,5 @@
 import { Button } from 'antd'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, useMemo } from 'react'
 
 interface ProjectShowcaseProps {
   title?: string
@@ -116,13 +116,13 @@ export function ProjectShowcase({
   ];
 
   // Create 5 columns with randomized images and durations
-  const columns = Array.from({ length: 3 }).map((_, i) => {
+  const columns = useMemo(() => Array.from({ length: 3 }).map((_, i) => {
     // Shuffle images and pick 10 random ones
     const shuffled = [...images].sort(() => Math.random() - 0.5).slice(0, 10);
     // Random duration between 40s and 80s
     const duration = 40 + Math.random() * 40;
     return { images: shuffled, duration };
-  });
+  }), []);
 
   const techStack = ['Next.js', 'TailwindCSS', 'Iconify API', 'Unsplash API'];
 
@@ -133,7 +133,7 @@ export function ProjectShowcase({
         {/* Left Column: Content */}
         <div className='text-left space-y-8 lg:col-span-6'>
           {/* Tag */}
-          <div className='inline-flex items-center px-3 py-1 rounded-full bg-blue-50 text-blue-600 text-sm font-medium'>
+          <div className='inline-flex items-center px-3 py-1 rounded-full bg-indigo-50 text-indigo-700 text-sm font-medium'>
             {subTitle}
           </div>
 
@@ -183,10 +183,10 @@ export function ProjectShowcase({
         {/* Right Column: Browser Frame Visual */}
         <div className='relative lg:col-span-6'>
           {/* Background Blob */}
-          <div className='absolute -inset-4 bg-blue-100/50 rounded-xl -z-10 blur-2xl'></div>
+          <div className='absolute -inset-4 bg-indigo-200/50 rounded-3xl z-0 blur-2xl'></div>
 
           {/* Browser Window */}
-          <div className='bg-white rounded-3xl shadow-2xl overflow-hidden border border-gray-200/50'>
+          <div className='bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-200/50 relative z-1'>
             {/* Browser Header */}
             <div className='bg-gray-50 px-4 pt-4 flex items-center gap-2'>
               <div className='w-3 h-3 rounded-full bg-red-400'></div>