添加首页广告组件

- 创建竖向广告弹窗组件（5:3比例，右上角可关闭）
- 创建横向Banner广告组件（7:1比例，顶部展示）
- 在首页集成两个广告组件
- 竖向广告延迟1秒后显示，避免影响首屏加载

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

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

app/page.tsx

@@ -1,9 +1,20 @@
 import Calculator from '@/components/calculator';
+import VerticalAd from '@/components/VerticalAd';
+import HorizontalBanner from '@/components/HorizontalBanner';
 
 export default function Home() {
   return (
-    <main className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      <Calculator />
-    </main>
+    <>
+      {/* 竖向广告弹窗 */}
+      <VerticalAd />
+      
+      <main className="min-h-screen bg-gray-50 dark:bg-gray-900">
+        {/* 顶部横向 Banner */}
+        <HorizontalBanner />
+        
+        {/* 主要内容 */}
+        <Calculator />
+      </main>
+    </>
   );
 }

components/HorizontalBanner.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+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"
+        style={{
+          aspectRatio: '7/1'
+        }}
+      >
+        {/* 占位内容 */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <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>
+          </div>
+        </div>
+        
+        {/* 实际广告图片占位 */}
+        <img 
+          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 100'%3E%3Crect fill='%23e5e7eb' width='700' height='100'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-family='Arial' font-size='20' fill='%236b7280'%3E横幅广告占位图%3C/text%3E%3C/svg%3E"
+          alt="横幅广告"
+          className="w-full h-full object-cover"
+        />
+      </div>
+    </div>
+  );
+}

components/VerticalAd.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+
+export default function VerticalAd() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // 延迟显示广告，避免影响首屏加载
+    const timer = setTimeout(() => {
+      setIsVisible(true);
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
+      <div className="relative">
+        {/* 关闭按钮 */}
+        <button
+          onClick={handleClose}
+          className="absolute -top-2 -right-2 z-10 rounded-full bg-white p-1 shadow-lg hover:bg-gray-100 transition-colors"
+          aria-label="关闭广告"
+        >
+          <X className="h-5 w-5 text-gray-700" />
+        </button>
+
+        {/* 广告内容 - 5:3 比例 */}
+        <div 
+          className="relative bg-gray-200 rounded-lg overflow-hidden shadow-xl"
+          style={{
+            width: 'min(500px, 90vw)',
+            aspectRatio: '5/3'
+          }}
+        >
+          {/* 占位内容 */}
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="text-center">
+              <div className="text-gray-500 text-lg mb-2">广告位</div>
+              <div className="text-gray-400 text-sm">5:3 竖向广告</div>
+            </div>
+          </div>
+          
+          {/* 实际广告图片占位 */}
+          <img 
+            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 300'%3E%3Crect fill='%23e5e7eb' width='500' height='300'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-family='Arial' font-size='24' fill='%236b7280'%3E广告占位图%3C/text%3E%3C/svg%3E"
+            alt="广告"
+            className="w-full h-full object-cover"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}