为广告组件添加点击跳转功能

- 竖向广告和横向Banner都添加了链接包装
- 点击广告将在新标签页打开Google主页
- 添加了hover效果提升交互体验
- 使用了安全的链接属性（target="_blank" rel="noopener noreferrer"）

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

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

components/HorizontalBanner.tsx

@@ -4,14 +4,17 @@ export default function HorizontalBanner() {
   return (
     <div className="w-full bg-gray-100">
       {/* 横向 Banner - 7:1 比例 */}
-      <div 
-        className="relative w-full bg-gray-200 overflow-hidden"
+      <a 
+        href="https://www.google.com"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="block relative w-full bg-gray-200 overflow-hidden hover:opacity-90 transition-opacity duration-300 cursor-pointer"
         style={{
           aspectRatio: '7/1'
         }}
       >
         {/* 占位内容 */}
-        <div className="absolute inset-0 flex items-center justify-center">
+        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
           <div className="text-center">
             <div className="text-gray-500 text-base sm:text-lg">广告横幅</div>
             <div className="text-gray-400 text-xs sm:text-sm">7:1 横向广告</div>
@@ -24,7 +27,7 @@ export default function HorizontalBanner() {
           alt="横幅广告"
           className="w-full h-full object-cover"
         />
-      </div>
+      </a>
     </div>
   );
 }

components/VerticalAd.tsx

@@ -34,15 +34,18 @@ export default function VerticalAd() {
         </button>
 
         {/* 广告内容 - 3:5 比例（宽:高） */}
-        <div 
-          className="relative bg-gray-200 rounded-lg overflow-hidden shadow-xl"
+        <a 
+          href="https://www.google.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block relative bg-gray-200 rounded-lg overflow-hidden shadow-xl hover:shadow-2xl transition-shadow duration-300 cursor-pointer"
           style={{
             width: 'min(300px, 60vw)',
             aspectRatio: '3/5'
           }}
         >
           {/* 占位内容 */}
-          <div className="absolute inset-0 flex items-center justify-center">
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
             <div className="text-center">
               <div className="text-gray-500 text-lg mb-2">广告位</div>
               <div className="text-gray-400 text-sm">3:5 竖向广告</div>
@@ -55,7 +58,7 @@ export default function VerticalAd() {
             alt="广告"
             className="w-full h-full object-cover"
           />
-        </div>
+        </a>
       </div>
     </div>
   );