feat: 添加定价页面组件和图标库迁移

refactor: 替换lucide-react为react-icons
feat(定价): 实现定价页面、卡片和切换组件
feat(页脚): 添加页脚链接组件
feat(文档): 新增使用条款、隐私政策和联系页面
style: 更新Toast组件样式和动画
chore: 更新项目元数据和favicon

web/src/components/BillingToggle.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+interface BillingToggleProps {
+  billingPeriod: 'monthly' | 'annually';
+  onToggle: (period: 'monthly' | 'annually') => void;
+}
+
+const BillingToggle: React.FC<BillingToggleProps> = ({ billingPeriod, onToggle }) => {
+  return (
+    <div className="relative flex items-center justify-center p-1 bg-neutral-100 rounded-full shadow-inner-sm">
+      <button
+        type="button"
+        onClick={() => onToggle('monthly')}
+        className={`
+          relative z-10 px-6 py-2 rounded-full text-sm font-semibold transition-all duration-300 ease-in-out
+          ${billingPeriod === 'monthly' ? 'bg-white text-neutral-900 shadow-medium' : 'text-neutral-500'}
+        `}
+      >
+        连续包月
+      </button>
+      <button
+        type="button"
+        onClick={() => onToggle('annually')}
+        className={`
+          relative z-10 px-6 py-2 rounded-full text-sm font-semibold transition-all duration-300 ease-in-out
+          ${billingPeriod === 'annually' ? 'bg-white text-neutral-900 shadow-medium' : 'text-neutral-500'}
+        `}
+      >
+        连续包年
+      </button>
+      {billingPeriod === 'annually' && (
+        <span className="absolute right-0 mr-4 ml-2 -translate-y-1/2 top-1/2 px-3 py-1 bg-[#FCE7F3] text-[#F381AA] rounded-full text-xs font-semibold whitespace-nowrap hidden sm:inline-block">
+          节省 20%
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default BillingToggle;