feat: 添加轮播图点击查看功能和应用策略说明

- 在课程首页添加应用策略的三点详细说明
- 添加Prompt提示词的定义和示例内容
- 缩小AI工具logo图片尺寸为75%宽度
- 在课程页面为轮播图添加点击查看大图功能

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/pages/CoursePage.tsx

@@ -216,7 +216,7 @@ const CoursePage: React.FC = () => {
             <motion.div variants={fadeInUp} className="relative">
               <div className="relative overflow-hidden rounded-2xl border-2 border-neon-cyan-500/30 shadow-neon-cyan bg-cyber-dark-900/50">
                 {/* 轮播图片 */}
-                <div className="relative aspect-video">
+                <div className="relative aspect-video cursor-pointer" onClick={() => setViewingImage(carouselImages[currentSlide])}>
                   {carouselImages.map((image, index) => (
                     <motion.img
                       key={index}
@@ -667,23 +667,23 @@ const CoursePage: React.FC = () => {
 
         【English Prompt】
 
-        Keep the subject unchanged: a tall clear glass of iced fruit tea floating weightlessly, rim covered with spiky frost crystals, dense condensation on the glass; inside the glass are orange slices, ruby-grapefruit, lime slices and ice cubes; golden-orange liquid; hard cool rim light, shallow depth of field, commercial food photography, ultra-high detail, vertical poster composition.
-
-        The background may vary to: {write your desired background scene here}.
-
-        Notes: Do not alter the subject's appearance or composition (glass shape, frost, condensation, fruit types/quantity, glass size and position remain the same). No text/logo/watermark. Foreground mango and wooden bowl of limes are optional; keep the frame clean.
-
-         English, copy-ready single-line prompts (subject locked, background varies). Paste any one into Doubao or seedream.
-        — Cyberpunk neon night market, rain reflections, distant neon signs and light mist
-        — Sunrise over snowy mountains and a sea of clouds, clean high-altitude cool ambient light
-        — Tropical rainforest waterfall spray, humid air with backlit foliage scattering
-        — Mediterranean coast, white hillside town and deep-blue sea under noon sunlight
-        — Vintage French kitchen, cream-colored tiles and reflections on copper pots
-        — Modern minimal photo studio, seamless backdrop and large softbox diffuse lighting
-        — Desert with golden sand dunes and shimmering heat haze
-        — Deep-ocean blue background with soft volumetric light (submerged/water feel)
-        — City riverside in full cherry blossom, soft pink bokeh of flowers
-        — Lunar surface with low-angle sunlight, Earth hanging in the distant sky
+        Prompt (for image generation):
+      A tall transparent glass of iced fruit tea floating in zero gravity, rim covered with sharp frost crystals, condensation droplets on glass surface. Inside are orange slices, red grapefruit slices, lime slices, and ice cubes, with a golden-orange tea color. Hard rim light on glass edges, shallow depth of field, ultra-detailed commercial food photography, vertical poster composition.
+      Keep the main subject unchanged — the glass shape, frosted rim, condensation, ingredients, and composition ratio must remain exactly the same. No changes to the number or position of fruits or ice cubes. No logos, watermarks, or foreign objects overlaying the glass. Foreground elements (like mango or lime bowl) are optional but minimal. Clean and balanced composition.
+      Background can freely change to: {your background}.
+      Add elegant typography design:
+      White, high-end modern sans-serif or serif font (e.g., Didot, Bodoni, Playfair Display, or Helvetica Neue Light).
+      Text layout should avoid the glass area and float gracefully around it (left, right, or top).
+      The typography should enhance luxury and freshness, not dominate the visual.
+      Text content examples:
+      "Weightless Refreshment"
+      "Taste the Chill of the Cosmos"
+      "Frozen Elegance. Infinite Flavor."
+      "Zero Gravity. Pure Clarity."
+      "A new dimension of iced fruit tea."
+      Keep the text minimal yet poetic, maintaining visual hierarchy and airiness.
+      Letter spacing slightly expanded for a refined editorial style.
+      Lighting and tone: cinematic glow, soft highlights, clean contrast, elegant color grading, ultra high resolution, professional product advertisement aesthetic.
         `}
                       </pre>
                     </div>

src/pages/HomePage.tsx

@@ -991,11 +991,53 @@ const HomePage: React.FC = () => {
                     <p className="text-lg text-cyber-dark-200">• 同一个问题，不同问法，结果天差地别</p>
                     <p className="text-lg text-cyber-dark-200">• AI听不懂人话，不是它笨，而是你没说清楚</p>
                   </div>
-                  <div className="p-4 bg-gradient-to-r from-cyber-pink-500/20 to-neon-purple-500/20 rounded-lg border border-cyber-pink-500/50">
+                  <div className="p-6 bg-gradient-to-r from-cyber-pink-500/20 to-neon-purple-500/20 rounded-lg border border-cyber-pink-500/50">
                     <p className="text-2xl font-black text-center glitch-text" data-text="Prompt（提示词）">
                       Prompt（提示词）
                     </p>
-                    <p className="text-lg text-center text-cyber-dark-200 mt-2">才是用好AI的关键</p>
+                    <p className="text-lg text-center text-cyber-dark-200 mt-2 mb-6">才是用好AI的关键</p>
+                    
+                    {/* 左右并列内容 */}
+                    <div className="grid md:grid-cols-2 gap-6 mt-6">
+                      {/* 左侧：提示词定义 */}
+                      <div className="bg-cyber-dark-900/50 p-5 rounded-lg border border-cyber-pink-500/30">
+                        <h5 className="text-xl font-bold text-cyber-pink-400 mb-3">提示词的定义</h5>
+                        <p className="text-base text-cyber-dark-200 leading-relaxed">
+                          相当于一种指令，用于"指挥"AI<span className="font-bold text-cyber-pink-400">按照我们预设的思路去思考问题、按照预设的格式去输出内容</span>。
+                        </p>
+                      </div>
+                      
+                      {/* 右侧：提示词举例 */}
+                      <div className="bg-cyber-dark-900/50 p-5 rounded-lg border border-neon-purple-500/30">
+                        <h5 className="text-xl font-bold text-neon-purple-400 mb-3">提示词举例</h5>
+                        <div className="text-xs text-cyber-dark-200 font-mono leading-relaxed overflow-auto max-h-80">
+                          <pre className="whitespace-pre-wrap">
+{`# Role: SeedDream Prompt Generator
+
+## Profile
+- author: LangGPT 
+- version: 1.0
+- language: 中文
+- description: 用于在 SeedDream 中生成男性写实风格肖像，突出冷峻神秘气质与光影对比。
+
+## Skills
+- 深暗背景构图
+- 侧上方光源造型
+- 轮廓与结构明暗过渡
+- 写实男性肖像风格
+- 突出立体感与氛围张力
+
+## Rules
+1. 保持提示词清晰、图像构图完整。
+2. 强调光线、阴影、服饰材质与人物神情的艺术感。
+3. 输出高清、原比例图像。
+
+## Prompt（用于 SeedDream 输入）:
+"正面半身自拍，男性，深暗背景，侧上方光线洒落，清晰勾勒发丝、脸颊轮廓与黑色圆领上衣，蓬松发梢泛出细腻光泽；另一侧面容融入阴影，仅有微妙明暗过渡显现五官结构，写实风格，传递冷峻神秘气质，画面具有强烈立体感与戏剧光影张力，高清，原图比例，艺术肖像风格"`}
+                          </pre>
+                        </div>
+                      </div>
+                    </div>
                   </div>
                 </div>