style: 统一调整页面内图标尺寸与布局样式

调整多处SVG图标从w-8 h-8改为w-6 h-6，优化Works页面空状态图标大小，重构Home页面右侧展示区域布局并新增品牌图片，统一页面内图标容器尺寸，整体优化界面视觉一致性与美观度

src/components/ProcessAnimation.tsx

@@ -8,7 +8,7 @@ const steps = [
     desc: '深入瞭解您的品牌、目標受衆和傳播目標',
     detail: '我們會安排專屬項目經理與您進行1對1溝通，瞭解視頻用途、風格偏好、核心賣點等關鍵信息，並輸出詳細的需求文檔。',
     icon: (
-      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18 6.3a5 5 0 00-12 0C6 6.3 3 10.5 3 14c0 2 1.2 3.7 3 4.6V21l3.3-2c.9.3 1.8.4 2.7.4s1.8-.1 2.7-.4L18 21v-2.4c1.8-.9 3-2.6 3-4.6 0-3.5-3-7.7-3-7.7z" />
         <path strokeLinecap="round" strokeWidth={2} d="M9 11h.03M12 11h.03M15 11h.03" />
       </svg>
@@ -21,7 +21,7 @@ const steps = [
     desc: 'AI輔助生成創意方案，快速產出多版腳本',
     detail: '基於需求文檔，我們使用AI快速生成多個創意方案和腳本草稿。您可以從中選擇最喜歡的方案，或融合多個方案的優點。',
     icon: (
-      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M10 21v-1a4 4 0 01-4-4v-1" />
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M14 21v-1a4 4 0 004-4v-1" />
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M10 17.5h4" />
@@ -41,7 +41,7 @@ const steps = [
     desc: '使用前沿AI技術，高效生成視頻素材',
     detail: '根據確認的腳本，我們使用Midjourney、Runway、Stable Diffusion等AI工具生成視頻素材，包括畫面、配音、字幕等。',
     icon: (
-      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <rect x="2" y="3" width="20" height="14" rx="2" strokeWidth={1.8} />
         <path strokeLinecap="round" strokeWidth={1.8} d="M8 21h8" />
         <path strokeLinecap="round" strokeWidth={1.8} d="M12 17v4" />
@@ -56,7 +56,7 @@ const steps = [
     desc: '專業團隊優化細節，確保品質達標',
     detail: 'AI生成的初稿會由專業後期團隊進行精修，包括畫面調色、節奏調整、特效添加等，確保最終效果達到商用標準。',
     icon: (
-      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M13.7 3.3a2.4 2.4 0 013.4 3.4l-9 9L4 17l1.3-4.1 8.4-8.4z" />
         <path strokeLinecap="round" strokeWidth={1.8} d="M14.5 4l4.5 4.5" />
       </svg>
@@ -69,7 +69,7 @@ const steps = [
     desc: '多輪修改直至滿意，提供完整源文件',
     detail: '我們提供2-3輪免費修改，直至您完全滿意。交付內容包括：成品視頻、源文件、字體版權證明等，方便您後續二次編輯。',
     icon: (
-      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <circle cx="12" cy="12" r="9" strokeWidth={1.8} />
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12.5l2.5 2.5 5-5" />
       </svg>

src/components/ServiceScenes.tsx

@@ -5,7 +5,7 @@ const scenes = [
   {
     id: 'social',
     icon: (
-      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <rect x="5" y="2" width="14" height="20" rx="3" strokeWidth={1.8} />
         <path strokeLinecap="round" strokeWidth={1.8} d="M12 18h.01" />
         <path strokeLinecap="round" strokeWidth={1.5} d="M9 6h6" />
@@ -19,7 +19,7 @@ const scenes = [
   {
     id: 'ecommerce',
     icon: (
-      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M6 2h12a4 4 0 014 4v8a4 4 0 01-4 4H6a4 4 0 01-4-4V6a4 4 0 014-4z" />
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M9 9l-2 2 2 2" />
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M15 9l2 2-2 2" />
@@ -33,7 +33,7 @@ const scenes = [
   {
     id: 'education',
     icon: (
-      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M4 6a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2V6z" />
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M8 10h8M8 14h6" />
       </svg>
@@ -46,7 +46,7 @@ const scenes = [
   {
     id: 'brand',
     icon: (
-      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M3 21h18" />
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M5 21V7l3-4h8l3 4v14" />
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M9 21v-6h6v6" />
@@ -123,7 +123,7 @@ export default function ServiceScenes() {
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
                 {activeScene.features.map((feature, index) => (
                   <div key={index} className="flex items-center gap-3 p-4 rounded-xl bg-white/5">
-                    <div className={`w-8 h-8 rounded-lg bg-gradient-to-br ${activeScene.gradient} flex items-center justify-center flex-shrink-0`}>
+                    <div className={`w-6 h-6 rounded-lg bg-gradient-to-br ${activeScene.gradient} flex items-center justify-center flex-shrink-0`}>
                       <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                       </svg>

src/pages/About.tsx

@@ -189,7 +189,7 @@ export default function About() {
               {
                 icon: (
                   <svg
-                    className="w-8 h-8"
+                    className="w-6 h-6"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -207,7 +207,7 @@ export default function About() {
               {
                 icon: (
                   <svg
-                    className="w-8 h-8"
+                    className="w-6 h-6"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -223,7 +223,7 @@ export default function About() {
               {
                 icon: (
                   <svg
-                    className="w-8 h-8"
+                    className="w-6 h-6"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"

src/pages/Home.tsx

@@ -121,14 +121,17 @@ export default function Home() {
             </div>
 
             {/* Right - Image Showcase */}
-            <div className="hidden lg:block relative">
+            <div className="hidden lg:flex lg:justify-end relative">
-              <div className="relative">
+              <div className="relative max-w-sm xl:max-w-md">
                 {/* Main Image Card */}
-                <div className="glass-card rounded-3xl overflow-hidden transform rotate-2 hover:rotate-0 transition-transform duration-500">
+                <div className="glass-card rounded-2xl overflow-hidden transform rotate-1 hover:rotate-0 transition-transform duration-500">
-                  <div className="aspect-video bg-gradient-to-br from-purple-900/50 to-blue-900/50 flex items-center justify-center">
+                  <div className="aspect-video relative">
-                    <div className="text-center">
+                    <img
-                      <p className="text-gray-400">AI生成的品牌图片</p>
+                      src="/images/hero-brand.png"
-                    </div>
+                      alt="AI短劇品牌視覺"
+                      className="w-full h-full object-cover"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-[#0a0a1a]/40 to-transparent" />
                   </div>
                 </div>
 
@@ -138,9 +141,9 @@ export default function Home() {
                   style={{ animationDelay: "1s" }}
                 >
                   <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
+                    <div className="w-8 h-8 rounded-lg bg-green-500/20 flex items-center justify-center">
                       <svg
-                        className="w-5 h-5 text-green-400"
+                        className="w-4 h-4 text-green-400"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24"
@@ -167,9 +170,9 @@ export default function Home() {
                   style={{ animationDelay: "2s" }}
                 >
                   <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
+                    <div className="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center">
                       <svg
-                        className="w-5 h-5 text-purple-400"
+                        className="w-4 h-4 text-purple-400"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24"
@@ -244,7 +247,7 @@ export default function Home() {
               {
                 icon: (
                   <svg
-                    className="w-8 h-8"
+                    className="w-6 h-6"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -264,7 +267,7 @@ export default function Home() {
               {
                 icon: (
                   <svg
-                    className="w-8 h-8"
+                    className="w-6 h-6"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -284,7 +287,7 @@ export default function Home() {
               {
                 icon: (
                   <svg
-                    className="w-8 h-8"
+                    className="w-6 h-6"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"

src/pages/Works.tsx

@@ -69,7 +69,7 @@ export default function Works() {
           {filteredVideos.length === 0 && (
             <div className="text-center py-20">
               <div className="w-20 h-20 mx-auto mb-4 rounded-full glass-card flex items-center justify-center">
-                <svg className="w-10 h-10 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg className="w-8 h-8 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <rect x="2" y="4" width="20" height="16" rx="2" strokeWidth={1.8} />
                   <path strokeLinecap="round" strokeWidth={1.8} d="M7 4V2m10 0v2" />
                   <path strokeLinecap="round" strokeWidth={1.8} d="M7 13h10M7 17h6" />