feat: 10.10线上最新代码提交

This commit is contained in:
zdl
2025-10-11 16:16:02 +08:00
parent 4d0dc109bc
commit 495ad758ea
3338 changed files with 460147 additions and 152745 deletions

View File

@@ -0,0 +1,465 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/png" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧩</text></svg>">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/1d2b6c4f81.js" crossorigin="anonymous"></script>
<!-- Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.min.css" rel="stylesheet" type="text/css" />
<style>
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
}
.timeline-dot {
position: relative;
}
.timeline-dot::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: #4F46E5;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.timeline-line {
position: absolute;
width: 2px;
background: #E5E7EB;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.gradient-text {
background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.table-container {
overflow-x: auto;
}
@media (max-width: 768px) {
.timeline-line {
left: 20px;
}
.timeline-dot::before {
left: 20px;
}
}
</style>
</head>
<body class="bg-gray-50">
<div class="container mx-auto px-4 py-8 max-w-7xl">
<!-- 标题部分 -->
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold gradient-text mb-4">布鲁可拼搭玩具龙头</h1>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">从单一IP驱动到"IP矩阵+渠道下沉+全球化"的基本面驱动阶段</p>
</div>
<!-- 概念事件时间轴 -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8 card-hover">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fas fa-history text-indigo-600 mr-3"></i>概念事件时间轴
</h2>
<div class="relative">
<div class="timeline-line hidden md:block"></div>
<!-- 时间轴事件 -->
<div class="space-y-8">
<div class="flex flex-col md:flex-row items-center">
<div class="timeline-dot hidden md:block"></div>
<div class="md:w-1/2 md:pr-8 md:text-right mb-4 md:mb-0">
<h3 class="text-lg font-semibold text-indigo-600">2024年5月</h3>
<p class="text-gray-600">布鲁可首次向港交所递交招股书</p>
</div>
<div class="md:w-1/2 md:pl-8 bg-indigo-50 p-4 rounded-lg">
<p class="text-gray-700">计划募资用于IP矩阵扩张、自建工厂及渠道下沉</p>
</div>
</div>
<div class="flex flex-col md:flex-row items-center">
<div class="timeline-dot hidden md:block"></div>
<div class="md:w-1/2 md:pr-8 md:text-right mb-4 md:mb-0 order-2 md:order-1">
<h3 class="text-lg font-semibold text-indigo-600">2025年1月9日</h3>
<p class="text-gray-600">港股上市</p>
</div>
<div class="md:w-1/2 md:pl-8 bg-purple-50 p-4 rounded-lg order-1 md:order-2">
<p class="text-gray-700">发行价60.35港元暗盘市值飙升至254亿港元超发售价70%),成为"谷子经济"核心标的</p>
</div>
</div>
<div class="flex flex-col md:flex-row items-center">
<div class="timeline-dot hidden md:block"></div>
<div class="md:w-1/2 md:pr-8 md:text-right mb-4 md:mb-0">
<h3 class="text-lg font-semibold text-indigo-600">2025年3月</h3>
<p class="text-gray-600">发布2024年报</p>
</div>
<div class="md:w-1/2 md:pl-8 bg-green-50 p-4 rounded-lg">
<p class="text-gray-700">收入<strong>22.4亿元(+156%</strong>,经调整净利润<strong>5.8亿元(+702%</strong>奥特曼IP收入占比降至<strong>49%</strong>2023年为63%验证IP多元化成效</p>
</div>
</div>
<div class="flex flex-col md:flex-row items-center">
<div class="timeline-dot hidden md:block"></div>
<div class="md:w-1/2 md:pr-8 md:text-right mb-4 md:mb-0 order-2 md:order-1">
<h3 class="text-lg font-semibold text-indigo-600">2025年Q2</h3>
<p class="text-gray-600">推出9.9元下沉产品</p>
</div>
<div class="md:w-1/2 md:pl-8 bg-yellow-50 p-4 rounded-lg order-1 md:order-2">
<p class="text-gray-700">变形金刚/奥特曼系列,东南亚沃尔玛渠道首月售罄,海外收入目标<strong>5亿元</strong>2024年仅0.6亿元)</p>
</div>
</div>
</div>
</div>
</div>
<!-- 核心观点摘要 -->
<div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl shadow-lg p-6 mb-8 text-white">
<h2 class="text-2xl font-bold mb-4 flex items-center">
<i class="fas fa-lightbulb mr-3"></i>核心观点摘要
</h2>
<div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-lg p-4">
<p class="text-lg mb-3">布鲁可已从<strong class="text-yellow-300">单一IP驱动的主题炒作阶段</strong>进入<strong class="text-yellow-300">"IP矩阵+渠道下沉+全球化"的基本面驱动阶段</strong>,其核心逻辑是通过<strong class="text-yellow-300">高性价比+高频迭代</strong>抢占乐高/万代未覆盖的下沉市场,同时以<strong class="text-yellow-300">轻资产IP运营</strong>快速复制爆款。未来3年最大预期差在于<strong class="text-yellow-300">海外授权变现</strong><strong class="text-yellow-300">自有IP"英雄无限"的货币化能力</strong></p>
</div>
</div>
<!-- 核心驱动力分析 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="text-indigo-600 text-3xl mb-4">
<i class="fas fa-chart-line"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">需求端</h3>
<ul class="space-y-2 text-gray-600">
<li>• 中国0-14岁人均玩具消费仅<strong>25元</strong>日本185元</li>
<li>• 下沉市场渗透率不足10%</li>
<li>• 拼搭角色类玩具<strong>41%的CAGR</strong>2023-2028远超行业9.5%</li>
</ul>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="text-purple-600 text-3xl mb-4">
<i class="fas fa-cogs"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">供给端</h3>
<ul class="space-y-2 text-gray-600">
<li>• "骨肉皮"技术体系(标准件复用率&gt;50%</li>
<li>• 模具精度0.004mm</li>
<li>• 实现<strong>39元价格带</strong>的乐高级体验</li>
<li>• 成本仅为万代的1/3</li>
</ul>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 card-hover">
<div class="text-green-600 text-3xl mb-4">
<i class="fas fa-copyright"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">IP端</h3>
<ul class="space-y-2 text-gray-600">
<li>• 50+授权IP奥特曼/变形金刚)</li>
<li>• 2个自有IP英雄无限播放量152亿次</li>
<li>• 形成<strong>"授权现金流+自有IP估值溢价"</strong>的双轮驱动</li>
</ul>
</div>
</div>
<!-- 产业链分析表格 -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fas fa-sitemap text-indigo-600 mr-3"></i>产业链分析
</h2>
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-700 mb-3">布鲁可IP衍生品产业链</h3>
<div class="table-container">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">公司名称</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">产业链位置</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">米哈游(2230.HK)</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">上游</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">IP版权方</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">完美世界(002624.SZ)</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">上游</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">IP版权方</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">羚邦集团(9626.HK)</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">上游</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">IP授权代理商</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">阿里巴巴(9626.HK)</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">中游</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">IP运营商</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">泡泡玛特(9992.HK)</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">中游</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">IP运营商</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">晨光股份(603899.SH)</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">下游</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">产品</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">永辉超市(601933.SH)</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">下游</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">渠道</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-700 mb-3">布鲁可谷子经济相关公司</h3>
<div class="table-container">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">公司名称</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分类</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">相关性</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">元隆雅图</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">布鲁可</td>
<td class="px-4 py-3 text-sm text-gray-500">谦玛网络公司持股60%2020年第四大客户为布鲁可</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">孩子王</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">布鲁可</td>
<td class="px-4 py-3 text-sm text-gray-500">布鲁可是公司重要的战略合作伙伴</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">实丰文化</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">谷子经济</td>
<td class="px-4 py-3 text-sm text-gray-500">玩具制造龙头宝可梦等IP授权</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">泡泡玛特(港)</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">谷子经济</td>
<td class="px-4 py-3 text-sm text-gray-500">潮玩龙头</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-700 mb-3">积木玩具行业十大公司</h3>
<div class="table-container">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">公司名称</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分类</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">产业链</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">乐高商业(上海)有限公司</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">LEGO乐高</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">上海市</td>
<td class="px-4 py-3 text-sm text-gray-500">积木玩具研发与销售</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">上海布鲁可科技集团有限公司</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">布鲁可</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">上海市</td>
<td class="px-4 py-3 text-sm text-gray-500">积木玩具研发与销售</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">奥飞娱乐股份有限公司</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">奥迪双钻AULDEY</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">广东省</td>
<td class="px-4 py-3 text-sm text-gray-500">积木玩具研发与销售</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 关键催化剂与未来路径 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-rocket text-indigo-600 mr-3"></i>近期催化剂3-6个月
</h2>
<div class="space-y-4">
<div class="bg-blue-50 p-4 rounded-lg">
<h3 class="font-semibold text-blue-700 mb-2">Q2新品发布</h3>
<p class="text-gray-600">哈利·波特/柯南系列女性向IP上线预计贡献<strong>2亿元</strong>增量收入</p>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<h3 class="font-semibold text-green-700 mb-2">东南亚渠道验证</h3>
<p class="text-gray-600">印尼便利店<strong>5万终端</strong>铺货完成Q2销售数据将决定<strong>2025年海外5亿元目标</strong>的可行性</p>
</div>
<div class="bg-purple-50 p-4 rounded-lg">
<h3 class="font-semibold text-purple-700 mb-2">自建工厂投产</h3>
<p class="text-gray-600">2025年底月产能<strong>900万件</strong>落地,毛利率有望提升<strong>3-5pct</strong>当前52.9%</p>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fas fa-route text-purple-600 mr-3"></i>长期路径2025-2027
</h2>
<div class="space-y-4">
<div class="border-l-4 border-indigo-500 pl-4 py-1">
<h3 class="font-semibold text-gray-800 mb-1">阶段12025</h3>
<p class="text-gray-600">下沉市场渗透9.9元产品占比提升至30%),国内市占率冲<strong>45%</strong></p>
</div>
<div class="border-l-4 border-purple-500 pl-4 py-1">
<h3 class="font-semibold text-gray-800 mb-1">阶段22026</h3>
<p class="text-gray-600">海外授权爆发(变形金刚/宝可梦全球授权),海外收入占比达<strong>20%</strong></p>
</div>
<div class="border-l-4 border-green-500 pl-4 py-1">
<h3 class="font-semibold text-gray-800 mb-1">阶段32027</h3>
<p class="text-gray-600">自有IP"英雄无限"影视化(动画电影计划),估值切换至<strong>内容公司逻辑</strong>PE从25倍→35倍</p>
</div>
</div>
</div>
</div>
<!-- 风险与挑战 -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
<i class="fas fa-exclamation-triangle text-red-500 mr-3"></i>潜在风险与挑战
</h2>
<div class="table-container">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险类型</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">具体表现</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">应对策略</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">技术风险</td>
<td class="px-4 py-3 text-sm text-gray-500">0.004mm模具精度依赖代工厂</td>
<td class="px-4 py-3 text-sm text-gray-500">2026年自建工厂降低依赖</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">商业化风险</td>
<td class="px-4 py-3 text-sm text-gray-500">9.9元产品毛利率仅<strong>35%</strong></td>
<td class="px-4 py-3 text-sm text-gray-500">通过规模效应摊薄模具成本</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">政策风险</td>
<td class="px-4 py-3 text-sm text-gray-500">盲盒监管趋严(概率公示要求)</td>
<td class="px-4 py-3 text-sm text-gray-500">已调整包装标注概率</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">信息矛盾</td>
<td class="px-4 py-3 text-sm text-gray-500">路演称"海外收入5亿"但2024年仅0.6亿</td>
<td class="px-4 py-3 text-sm text-gray-500">需验证东南亚渠道实际动销数据</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 综合结论与投资启示 -->
<div class="bg-gradient-to-r from-gray-800 to-gray-900 rounded-xl shadow-lg p-6 text-white">
<h2 class="text-2xl font-bold mb-6 flex items-center">
<i class="fas fa-chart-pie mr-3"></i>综合结论与投资启示
</h2>
<div class="mb-6">
<h3 class="text-xl font-semibold mb-3 text-yellow-300">阶段判断</h3>
<p class="text-gray-200">处于<strong>"IP矩阵兑现+渠道杠杆"</strong>的基本面加速期,非主题炒作</p>
</div>
<div class="mb-6">
<h3 class="text-xl font-semibold mb-3 text-yellow-300">投资方向</h3>
<div class="space-y-3">
<div class="bg-gray-700 bg-opacity-50 p-3 rounded-lg">
<p><span class="font-semibold text-green-300">短期:</span>跟踪<strong>Q2东南亚沃尔玛渠道数据</strong>决定2025年海外5亿目标</p>
</div>
<div class="bg-gray-700 bg-opacity-50 p-3 rounded-lg">
<p><span class="font-semibold text-blue-300">长期:</span>关注<strong>英雄无限IP影视化进度</strong>(估值切换关键)</p>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-3 text-yellow-300">关键指标</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gray-700 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-semibold text-purple-300 mb-2">单SKU收入</h4>
<p class="text-sm text-gray-200">2024年<strong>奥特曼群星版</strong>单系列收入<strong>1.1亿元</strong>需观察新IP能否复制</p>
</div>
<div class="bg-gray-700 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-semibold text-purple-300 mb-2">下沉市场渗透率</h4>
<p class="text-sm text-gray-200">三线以下城市网点占比<strong>80%</strong>,但单店产出仅为一线城市的<strong>30%</strong></p>
</div>
<div class="bg-gray-700 bg-opacity-50 p-4 rounded-lg">
<h4 class="font-semibold text-purple-300 mb-2">授权费占比</h4>
<p class="text-sm text-gray-200">若超过<strong>12%</strong>将侵蚀利润当前8.7%</p>
</div>
</div>
</div>
<div class="mt-6 p-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg">
<p class="text-lg font-semibold text-center"><strong>结论</strong>:布鲁可是<strong>"谷子经济"中唯一具备全球化IP运营能力的标的</strong>当前估值2025年PE 20倍未充分反映海外授权和自有IP溢价建议<strong>逢回调布局</strong></p>
</div>
</div>
</div>
<script>
// 添加滚动动画效果
document.addEventListener('DOMContentLoaded', function() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.card-hover').forEach(card => {
observer.observe(card);
});
});
</script>
</body>
</html>
```