546 lines
27 KiB
HTML
546 lines
27 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>超威半导体AMD - AI芯片第二极的崛起之路</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||
|
||
* {
|
||
font-family: 'Inter', sans-serif;
|
||
}
|
||
|
||
.gradient-bg {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.card-hover {
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.card-hover:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
padding-left: 40px;
|
||
}
|
||
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 8px;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: #818cf8;
|
||
border: 2px solid #e0e7ff;
|
||
}
|
||
|
||
.timeline-line {
|
||
position: absolute;
|
||
left: 5px;
|
||
top: 20px;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: #e0e7ff;
|
||
}
|
||
|
||
.stats-card {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
}
|
||
|
||
.risk-badge {
|
||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: .8;
|
||
}
|
||
}
|
||
|
||
.table-responsive-custom {
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.table-responsive-custom {
|
||
font-size: 0.75rem;
|
||
}
|
||
}
|
||
|
||
.glow-effect {
|
||
box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
|
||
}
|
||
|
||
.progress-bar {
|
||
animation: progress 1.5s ease-in-out;
|
||
}
|
||
|
||
@keyframes progress {
|
||
from {
|
||
width: 0;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50">
|
||
<!-- Header -->
|
||
<div class="gradient-bg text-white">
|
||
<div class="container mx-auto px-4 py-8">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h1 class="text-4xl font-bold mb-2">超威半导体 AMD</h1>
|
||
<p class="text-xl opacity-90">AI芯片第二极的崛起之路</p>
|
||
</div>
|
||
<div class="hidden md:block">
|
||
<div class="flex items-center space-x-2">
|
||
<i class="ri-cpu-line text-3xl"></i>
|
||
<span class="text-2xl font-semibold">NASDAQ: AMD</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Content -->
|
||
<div class="container mx-auto px-4 py-8">
|
||
<!-- Key Stats -->
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
||
<div class="stats-card rounded-xl p-6 text-center card-hover">
|
||
<i class="ri-line-chart-line text-3xl mb-2"></i>
|
||
<div class="text-3xl font-bold">120%</div>
|
||
<div class="text-sm opacity-90">数据中心业务同比增长</div>
|
||
</div>
|
||
<div class="stats-card rounded-xl p-6 text-center card-hover">
|
||
<i class="ri-money-dollar-circle-line text-3xl mb-2"></i>
|
||
<div class="text-3xl font-bold">$50亿+</div>
|
||
<div class="text-sm opacity-90">MI300系列年收入预期</div>
|
||
</div>
|
||
<div class="stats-card rounded-xl p-6 text-center card-hover">
|
||
<i class="ri-server-line text-3xl mb-2"></i>
|
||
<div class="text-3xl font-bold">52%</div>
|
||
<div class="text-sm opacity-90">数据中心业务占比</div>
|
||
</div>
|
||
<div class="stats-card rounded-xl p-6 text-center card-hover">
|
||
<i class="ri-microchip-line text-3xl mb-2"></i>
|
||
<div class="text-3xl font-bold">1530亿</div>
|
||
<div class="text-sm opacity-90">MI300X晶体管数量</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Timeline Section -->
|
||
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
|
||
<h2 class="text-2xl font-bold mb-6 flex items-center">
|
||
<i class="ri-time-line mr-2 text-purple-600"></i>
|
||
关键事件时间轴
|
||
</h2>
|
||
<div class="relative">
|
||
<div class="timeline-line"></div>
|
||
<div class="space-y-6">
|
||
<div class="timeline-item">
|
||
<div class="flex flex-col sm:flex-row sm:items-center">
|
||
<span class="text-purple-600 font-semibold mr-4">2023.12</span>
|
||
<div>
|
||
<h3 class="font-semibold">"Advancing AI"发布会</h3>
|
||
<p class="text-gray-600 text-sm">推出MI300系列，纸面性能对标英伟达H100/H200</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="flex flex-col sm:flex-row sm:items-center">
|
||
<span class="text-purple-600 font-semibold mr-4">2024.08</span>
|
||
<div>
|
||
<h3 class="font-semibold">49亿美元收购ZT Systems</h3>
|
||
<p class="text-gray-600 text-sm">增强AI系统和集群级解决方案能力</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="flex flex-col sm:flex-row sm:items-center">
|
||
<span class="text-purple-600 font-semibold mr-4">2024.Q3</span>
|
||
<div>
|
||
<h3 class="font-semibold">超强财报发布</h3>
|
||
<p class="text-gray-600 text-sm">数据中心业务收入同比暴涨120%，上调MI300预期至50亿美元</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="flex flex-col sm:flex-row sm:items-center">
|
||
<span class="text-red-600 font-semibold mr-4">2025.04</span>
|
||
<div>
|
||
<h3 class="font-semibold">地缘政治风险显性化</h3>
|
||
<p class="text-gray-600 text-sm">盘前大跌7.2%，预计承担8亿美元损失</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="flex flex-col sm:flex-row sm:items-center">
|
||
<span class="text-red-600 font-semibold mr-4">2025.08</span>
|
||
<div>
|
||
<h3 class="font-semibold">地缘政治风险落地</h3>
|
||
<p class="text-gray-600 text-sm">同意将中国芯片销售收入的15%上缴美国政府</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Core Logic -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
|
||
<div class="bg-white rounded-xl shadow-lg p-6">
|
||
<h2 class="text-2xl font-bold mb-4 flex items-center">
|
||
<i class="ri-lightbulb-line mr-2 text-yellow-500"></i>
|
||
核心驱动力
|
||
</h2>
|
||
<div class="space-y-4">
|
||
<div class="flex items-start">
|
||
<div class="bg-purple-100 rounded-lg p-3 mr-3">
|
||
<i class="ri-cpu-line text-purple-600"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-semibold">技术突破与产品力</h3>
|
||
<p class="text-gray-600 text-sm">Chiplet设计和台积电3D SoIC先进封装，打造1530亿晶体管的MI300X</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<div class="bg-blue-100 rounded-lg p-3 mr-3">
|
||
<i class="ri-stack-line text-blue-600"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-semibold">"全栈式"战略布局</h3>
|
||
<p class="text-gray-600 text-sm">CPU+GPU+FPGA+DPU完整版图，打造开放AI生态</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<div class="bg-green-100 rounded-lg p-3 mr-3">
|
||
<i class="ri-global-line text-green-600"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-semibold">AI浪潮市场窗口期</h3>
|
||
<p class="text-gray-600 text-sm">抓住头部客户替代需求，实现指数级增长</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-xl shadow-lg p-6">
|
||
<h2 class="text-2xl font-bold mb-4 flex items-center">
|
||
<i class="ri-bar-chart-2-line mr-2 text-blue-500"></i>
|
||
市场情绪与预期差
|
||
</h2>
|
||
<div class="mb-4">
|
||
<div class="flex justify-between items-center mb-2">
|
||
<span class="text-sm font-medium">乐观程度</span>
|
||
<span class="text-sm text-gray-600">75%</span>
|
||
</div>
|
||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||
<div class="bg-gradient-to-r from-green-400 to-green-600 h-2 rounded-full progress-bar" style="width: 75%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-3">
|
||
<div class="alert alert-success">
|
||
<i class="ri-thumb-up-line"></i>
|
||
<span>财报数据持续超预期，市场份额快速提升</span>
|
||
</div>
|
||
<div class="alert alert-warning">
|
||
<i class="ri-alert-line"></i>
|
||
<span>ROCm软件生态与CUDA存在差距</span>
|
||
</div>
|
||
<div class="alert alert-error risk-badge">
|
||
<i class="ri-error-warning-line"></i>
|
||
<span>15%收入上缴，地缘政治成本常态化</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Industry Chain -->
|
||
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
|
||
<h2 class="text-2xl font-bold mb-6 flex items-center">
|
||
<i class="ri-link mr-2 text-indigo-600"></i>
|
||
A股产业链图谱
|
||
</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div class="border-2 border-indigo-200 rounded-lg p-4 hover:shadow-lg transition-shadow">
|
||
<h3 class="font-bold text-indigo-600 mb-3">上游：设计/制造支撑</h3>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span class="badge badge-info">EDA/IP: 芯原股份</span>
|
||
</div>
|
||
</div>
|
||
<div class="border-2 border-purple-200 rounded-lg p-4 hover:shadow-lg transition-shadow">
|
||
<h3 class="font-bold text-purple-600 mb-3">中游：核心制造</h3>
|
||
<div class="grid grid-cols-2 gap-2">
|
||
<div class="text-sm">
|
||
<span class="font-semibold">封测:</span>
|
||
<div class="mt-1">
|
||
<span class="badge badge-secondary">通富微电</span>
|
||
<span class="badge badge-secondary">华天科技</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-sm">
|
||
<span class="font-semibold">PCB:</span>
|
||
<div class="mt-1">
|
||
<span class="badge badge-secondary">世运电路</span>
|
||
<span class="badge badge-secondary">深南电路</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="border-2 border-green-200 rounded-lg p-4 hover:shadow-lg transition-shadow">
|
||
<h3 class="font-bold text-green-600 mb-3">下游：应用与集成</h3>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span class="badge badge-success">服务器: 工业富联</span>
|
||
<span class="badge badge-success">AI应用: 岩山科技</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stock Table -->
|
||
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
|
||
<h2 class="text-2xl font-bold mb-6 flex items-center">
|
||
<i class="ri-table-line mr-2 text-teal-600"></i>
|
||
核心关联股票一览
|
||
</h2>
|
||
<div class="table-responsive-custom">
|
||
<table class="table table-zebra w-full">
|
||
<thead>
|
||
<tr class="bg-gradient-to-r from-teal-500 to-cyan-600 text-white">
|
||
<th class="text-left">股票名称</th>
|
||
<th class="text-left">分类</th>
|
||
<th class="text-left">合作项目</th>
|
||
<th class="text-center">绑定强度</th>
|
||
<th class="text-left">信息来源</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="hover:bg-gray-50">
|
||
<td class="font-semibold text-purple-600">通富微电</td>
|
||
<td><span class="badge badge-error">封测</span></td>
|
||
<td>AMD最大封测供应商，订单占比80%+</td>
|
||
<td class="text-center">
|
||
<div class="rating">
|
||
<input type="radio" name="rating-1" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-1" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-1" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-1" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-1" class="mask mask-star bg-orange-400" checked />
|
||
</div>
|
||
</td>
|
||
<td><span class="badge badge-info">互动</span></td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50">
|
||
<td class="font-semibold">领益智造</td>
|
||
<td><span class="badge badge-warning">散热</span></td>
|
||
<td>AMD核心供应商，批量出货散热模组</td>
|
||
<td class="text-center">
|
||
<div class="rating">
|
||
<input type="radio" name="rating-2" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-2" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-2" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-2" class="mask mask-star bg-orange-400" />
|
||
<input type="radio" name="rating-2" class="mask mask-star bg-orange-400" />
|
||
</div>
|
||
</td>
|
||
<td><span class="badge badge-info">互动</span></td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50">
|
||
<td class="font-semibold">世运电路</td>
|
||
<td><span class="badge badge-success">PCB</span></td>
|
||
<td>完成AMD全系列产品认证，实现量产交付</td>
|
||
<td class="text-center">
|
||
<div class="rating">
|
||
<input type="radio" name="rating-3" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-3" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-3" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-3" class="mask mask-star bg-orange-400" />
|
||
<input type="radio" name="rating-3" class="mask mask-star bg-orange-400" />
|
||
</div>
|
||
</td>
|
||
<td><span class="badge badge-primary">调研</span></td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50">
|
||
<td class="font-semibold">深南电路</td>
|
||
<td><span class="badge badge-success">PCB</span></td>
|
||
<td>AMD国内PCB核心供应商之一</td>
|
||
<td class="text-center">
|
||
<div class="rating">
|
||
<input type="radio" name="rating-4" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-4" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-4" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-4" class="mask mask-star bg-orange-400" />
|
||
<input type="radio" name="rating-4" class="mask mask-star bg-orange-400" />
|
||
</div>
|
||
</td>
|
||
<td><span class="badge badge-secondary">券商纪要</span></td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50">
|
||
<td class="font-semibold">中电港</td>
|
||
<td><span class="badge badge-outline">代理</span></td>
|
||
<td>国内第一大电子元器件分销商，授权分销AMD</td>
|
||
<td class="text-center">
|
||
<div class="rating">
|
||
<input type="radio" name="rating-5" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-5" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-5" class="mask mask-star bg-orange-400" />
|
||
<input type="radio" name="rating-5" class="mask mask-star bg-orange-400" />
|
||
<input type="radio" name="rating-5" class="mask mask-star bg-orange-400" />
|
||
</div>
|
||
</td>
|
||
<td><span class="badge badge-info">互动</span></td>
|
||
</tr>
|
||
<tr class="hover:bg-gray-50">
|
||
<td class="font-semibold">宏昌电子</td>
|
||
<td><span class="badge badge-warning">覆铜板</span></td>
|
||
<td>高频高速覆铜板已获AMD评估认证</td>
|
||
<td class="text-center">
|
||
<div class="rating">
|
||
<input type="radio" name="rating-6" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-6" class="mask mask-star bg-orange-400" checked />
|
||
<input type="radio" name="rating-6" class="mask mask-star bg-orange-400" />
|
||
<input type="radio" name="rating-6" class="mask mask-star bg-orange-400" />
|
||
<input type="radio" name="rating-6" class="mask mask-star bg-orange-400" />
|
||
</div>
|
||
</td>
|
||
<td><span class="badge badge-primary">年报</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Risk Analysis -->
|
||
<div class="bg-gradient-to-br from-red-50 to-orange-50 rounded-xl shadow-lg p-6 mb-8">
|
||
<h2 class="text-2xl font-bold mb-6 flex items-center">
|
||
<i class="ri-error-warning-line mr-2 text-red-600"></i>
|
||
潜在风险与挑战
|
||
</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
<div class="bg-white rounded-lg p-4 border-l-4 border-red-500">
|
||
<div class="flex items-center mb-2">
|
||
<i class="ri-code-box-line text-red-500 mr-2"></i>
|
||
<h3 class="font-semibold">技术风险</h3>
|
||
</div>
|
||
<p class="text-sm text-gray-600">ROCm软件生态是最大瓶颈，与CUDA仍有差距</p>
|
||
</div>
|
||
<div class="bg-white rounded-lg p-4 border-l-4 border-orange-500">
|
||
<div class="flex items-center mb-2">
|
||
<i class="ri-exchange-dollar-line text-orange-500 mr-2"></i>
|
||
<h3 class="font-semibold">商业化风险</h3>
|
||
</div>
|
||
<p class="text-sm text-gray-600">市场份额拓展不及预期，地缘政治成本常态化</p>
|
||
</div>
|
||
<div class="bg-white rounded-lg p-4 border-l-4 border-yellow-500">
|
||
<div class="flex items-center mb-2">
|
||
<i class="ri-shield-line text-yellow-500 mr-2"></i>
|
||
<h3 class="font-semibold">政策风险</h3>
|
||
</div>
|
||
<p class="text-sm text-gray-600">贸易摩擦加剧，竞争环境日趋严峻</p>
|
||
</div>
|
||
<div class="bg-white rounded-lg p-4 border-l-4 border-amber-500">
|
||
<div class="flex items-center mb-2">
|
||
<i class="ri-git-branch-line text-amber-500 mr-2"></i>
|
||
<h3 class="font-semibold">信息交叉验证风险</h3>
|
||
</div>
|
||
<p class="text-sm text-gray-600">增长预期与地缘政治风险并存</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Investment Insight -->
|
||
<div class="bg-gradient-to-br from-purple-600 to-indigo-600 rounded-xl shadow-lg p-8 text-white">
|
||
<h2 class="text-3xl font-bold mb-6 text-center">投资启示</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-3 flex items-center">
|
||
<i class="ri-megaphone-line mr-2"></i>
|
||
概念阶段判断
|
||
</h3>
|
||
<p class="text-white/90">
|
||
AMD概念正从"主题炒作"向"基本面驱动"转变。业绩验证增长真实性，但地缘政治与软件生态挑战并存。
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-3 flex items-center">
|
||
<i class="ri-star-line mr-2"></i>
|
||
最具投资价值环节
|
||
</h3>
|
||
<p class="text-white/90">
|
||
<span class="font-bold text-yellow-300">封测环节-通富微电</span>是逻辑最纯粹标的，深度绑定AMD，业绩直接受益。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="mt-6 p-4 bg-white/10 rounded-lg backdrop-blur-sm">
|
||
<h3 class="text-lg font-semibold mb-2">关键跟踪指标</h3>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span class="badge badge-info badge-lg">MI300出货额</span>
|
||
<span class="badge badge-info badge-lg">数据中心占比</span>
|
||
<span class="badge badge-info badge-lg">ROCm进展</span>
|
||
<span class="badge badge-info badge-lg">通富微电AMD收入增速</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-gray-800 text-white py-8 mt-12">
|
||
<div class="container mx-auto px-4 text-center">
|
||
<p class="text-gray-400">© 2024 AI芯片分析报告 | 数据仅供参考，投资需谨慎</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Add smooth scrolling
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
});
|
||
|
||
// Add intersection observer for animations
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.querySelectorAll('.card-hover').forEach(card => {
|
||
card.style.opacity = '0';
|
||
card.style.transform = 'translateY(20px)';
|
||
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||
observer.observe(card);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|