|
|
@@ -3,253 +3,321 @@
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>AI金融科技</title>
|
|
|
- <!-- 引入Tailwind CSS -->
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
- <!-- 引入Font Awesome图标 -->
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
- <style>
|
|
|
- .hero-bg {
|
|
|
- background: linear-gradient(180deg, #0a0f25 0%, #1a1f3d 100%);
|
|
|
+ <script>
|
|
|
+ tailwind.config = {
|
|
|
+ theme: {
|
|
|
+ extend: {
|
|
|
+ colors: {
|
|
|
+ darkBg: '#0a0f25',
|
|
|
+ cardBg: '#1a1f3d',
|
|
|
+ gradientStart: '#ff9a9e',
|
|
|
+ gradientEnd: '#fad0c4',
|
|
|
+ textLight: '#e0e0e0',
|
|
|
+ },
|
|
|
+ fontFamily: {
|
|
|
+ sans: ['Inter', 'sans-serif'],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
}
|
|
|
+ </script>
|
|
|
+ <style type="text/tailwindcss">
|
|
|
+ @layer utilities {
|
|
|
+ .content-auto {
|
|
|
+ content-visibility: auto;
|
|
|
+ }
|
|
|
|
|
|
- .gradient-text {
|
|
|
- background: linear-gradient(90deg, #ffffff, #d4d4d4);
|
|
|
- -webkit-background-clip: text;
|
|
|
- background-clip: text;
|
|
|
- color: transparent;
|
|
|
- }
|
|
|
+ .hero-gradient {
|
|
|
+ background: linear-gradient(180deg, #0a0f25 0%, #1a1f3d 100%);
|
|
|
+ }
|
|
|
|
|
|
- .card {
|
|
|
- background: rgba(30, 41, 59, 0.8);
|
|
|
- backdrop-filter: blur(8px);
|
|
|
- transition: transform 0.3s ease;
|
|
|
- }
|
|
|
+ .nav-link {
|
|
|
+ @apply text-white opacity-70 hover:opacity-100 transition-opacity duration-300;
|
|
|
+ }
|
|
|
|
|
|
- .card:hover {
|
|
|
- transform: translateY(-5px);
|
|
|
- /* 卡片悬浮交互（全尺寸适配） */
|
|
|
- }
|
|
|
+ .download-btn-bg {
|
|
|
+ background-image: url('images/assets/web/anniu-2.png');
|
|
|
+ background-blend-mode: overlay;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ }
|
|
|
|
|
|
- .icon-bg {
|
|
|
- background: rgba(99, 102, 241, 0.1);
|
|
|
- }
|
|
|
+ .bg-gradient-to-r {
|
|
|
+ background-image: url('images/assets/web/anniu-2.png');
|
|
|
+ background-blend-mode: overlay;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ }
|
|
|
|
|
|
- .nav-link {
|
|
|
- color: #ffffff;
|
|
|
- opacity: 0.7;
|
|
|
- }
|
|
|
+ .line-img {
|
|
|
+ background-image: url('images/assets/web/xian.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
|
|
|
- .nav-link:hover {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ .value-card-bg {
|
|
|
+ background-image: url('images/assets/web/kuang.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
|
|
|
- /* 移动端导航菜单动画 */
|
|
|
- .mobile-menu {
|
|
|
- max-height: 0;
|
|
|
- overflow: hidden;
|
|
|
- transition: max-height 0.3s ease-out;
|
|
|
- }
|
|
|
-
|
|
|
- .mobile-menu.active {
|
|
|
- max-height: 300px;
|
|
|
- /* 足够容纳导航项的高度 */
|
|
|
+ .tag-bg {
|
|
|
+ background-image: url('images/assets/web/kuang_x.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
-<body class="bg-gray-900 text-white overflow-x-hidden">
|
|
|
- <!-- 导航栏（响应式折叠） -->
|
|
|
- <nav class="bg-transparent px-4 sm:px-6 py-4 fixed w-full z-50">
|
|
|
- <div class="container mx-auto flex justify-between items-center">
|
|
|
- <!-- 品牌Logo（响应式尺寸） -->
|
|
|
+<body class="bg-darkBg text-white font-sans">
|
|
|
+ <!-- 导航栏 -->
|
|
|
+ <nav class="fixed w-full z-50 transition-all duration-300 bg-darkBg/80 backdrop-blur-md">
|
|
|
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
|
|
<div class="flex items-center">
|
|
|
- <i class="fas fa-crown text-purple-500 text-xl sm:text-2xl mr-2"></i>
|
|
|
- <span class="text-lg sm:text-xl font-bold">Meta Origin</span>
|
|
|
+ <img src="images/assets/web/MO团队logo.png" alt="Logo" class="h-8 w-auto" />
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 桌面端导航（md及以上显示） -->
|
|
|
- <div class="hidden md:flex space-x-4 sm:space-x-6">
|
|
|
- <a href="#company" class="nav-link hover:text-white transition text-sm sm:text-base">公司背景</a>
|
|
|
- <a href="#value" class="nav-link hover:text-white transition text-sm sm:text-base">核心价值</a>
|
|
|
- <a href="#outlook" class="nav-link hover:text-white transition text-sm sm:text-base">行业前瞻</a>
|
|
|
- <a href="#future" class="nav-link hover:text-white transition text-sm sm:text-base">关于未来</a>
|
|
|
+ <div class="hidden md:flex space-x-8">
|
|
|
+ <a href="#company" class="nav-link">公司背景</a>
|
|
|
+ <a href="#value" class="nav-link">核心价值</a>
|
|
|
+ <a href="#outlook" class="nav-link">行业前瞻</a>
|
|
|
+ <a href="#future" class="nav-link">关于未来</a>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 移动端菜单按钮（md以下显示） -->
|
|
|
- <button id="menuBtn" class="md:hidden text-2xl text-white focus:outline-none">
|
|
|
+ <button class="md:hidden text-xl">
|
|
|
<i class="fas fa-bars"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 移动端折叠菜单（默认隐藏，点击按钮展开） -->
|
|
|
- <div id="mobileMenu" class="mobile-menu md:hidden bg-gray-800/95 backdrop-blur-md mt-4 px-4 py-3 rounded-lg">
|
|
|
- <a href="#company" class="block nav-link hover:text-white transition py-2 text-sm">公司背景</a>
|
|
|
- <a href="#value" class="block nav-link hover:text-white transition py-2 text-sm">核心价值</a>
|
|
|
- <a href="#outlook" class="block nav-link hover:text-white transition py-2 text-sm">行业前瞻</a>
|
|
|
- <a href="#future" class="block nav-link hover:text-white transition py-2 text-sm">关于未来</a>
|
|
|
- </div>
|
|
|
</nav>
|
|
|
|
|
|
- <!-- 英雄区域（响应式居中+图片适配） -->
|
|
|
- <section class="hero-bg pt-28 pb-16 sm:pt-32 sm:pb-20">
|
|
|
- <div class="container mx-auto px-4 sm:px-6">
|
|
|
- <div class="flex flex-col items-center">
|
|
|
- <!-- 文字内容（响应式字号+间距） -->
|
|
|
- <div class="mb-8 sm:mb-10 text-center max-w-2xl">
|
|
|
- <h1 class="text-[clamp(1.5rem,5vw,3rem)] font-bold mb-3 sm:mb-4 leading-tight">
|
|
|
+ <!-- 英雄区域 -->
|
|
|
+ <section class="hero-gradient pt-24 pb-16 md:pt-32 md:pb-20">
|
|
|
+ <div class="container mx-auto px-4">
|
|
|
+ <div class="flex flex-col md:flex-row items-center justify-between">
|
|
|
+ <div class="mb-8 md:mb-0 max-w-xl">
|
|
|
+ <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">
|
|
|
AI金融科技: <br>
|
|
|
- <span class="gradient-text">解密BTC短线交易的90%胜率</span>
|
|
|
+ 解密BTC短线交易的90%胜率
|
|
|
</h1>
|
|
|
- <p class="text-gray-300 mb-6 sm:mb-8 text-sm sm:text-base max-w-md mx-auto">
|
|
|
+ <p class="text-sm text-gray-400 mb-6">
|
|
|
AI Financial Technology: Decrypting the 90% Winning Rate of BTC Short term Trading
|
|
|
</p>
|
|
|
- <!-- 按钮（响应式尺寸+间距） -->
|
|
|
<button
|
|
|
- class="bg-gradient-to-r from-orange-400 to-pink-500 text-white px-6 sm:px-8 py-2.5 sm:py-3 rounded-full transition text-sm sm:text-base">
|
|
|
+ class="download-btn-bg text-black px-6 py-2.5 rounded-full font-medium transition transform hover:scale-105">
|
|
|
Download App
|
|
|
</button>
|
|
|
- <!-- 合作品牌图标（小屏缩小间距） -->
|
|
|
- <div class="flex justify-center space-x-3 sm:space-x-4 mt-6 sm:mt-8">
|
|
|
- <img src="./images/assets/web/ChatGPT.jpg" alt="ChatGPT"
|
|
|
- class="h-6 sm:h-8 w-6 sm:w-8 rounded-full object-cover" />
|
|
|
- <img src="./images/assets/web/deepseek.jpg" alt="deepseek"
|
|
|
- class="h-6 sm:h-8 w-6 sm:w-8 rounded-full object-cover" />
|
|
|
- <img src="./images/assets/web/GROK.jpg" alt="GROK"
|
|
|
- class="h-6 sm:h-8 w-6 sm:w-8 rounded-full object-cover" />
|
|
|
- <img src="./images/assets/web/NVIDIA.jpg" alt="NVIDIA"
|
|
|
- class="h-6 sm:h-8 w-6 sm:w-8 rounded-full object-cover" />
|
|
|
+ <div class="flex items-center justify-center mt-6">
|
|
|
+ <div class="line-img w-24 h-1 mr-4"></div>
|
|
|
+ <div class="flex items-center space-x-6">
|
|
|
+ <div class="flex items-center space-x-2">
|
|
|
+ <img src="images/assets/web/ChatGPT.png" alt="ChatGPT" class="h-6 w-6" />
|
|
|
+ <span class="text-xs">ChatGPT</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center space-x-2">
|
|
|
+ <img src="images/assets/web/deepseek.png" alt="deepseek" class="h-6 w-6" />
|
|
|
+ <span class="text-xs">deepseek</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center space-x-2">
|
|
|
+ <img src="images/assets/web/GROK.png" alt="GROK" class="h-6 w-6" />
|
|
|
+ <span class="text-xs">GROK</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center space-x-2">
|
|
|
+ <img src="images/assets/web/NVIDIA.png" alt="NVIDIA" class="h-6 w-6" />
|
|
|
+ <span class="text-xs">NVIDIA</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="line-img w-24 h-1 ml-4"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 主图（响应式尺寸+自适应宽度） -->
|
|
|
- <div class="relative w-full max-w-3xl">
|
|
|
- <img src="https://picsum.photos/800/400" alt="BTC"
|
|
|
- class="rounded-lg shadow-2xl w-full h-auto object-cover" />
|
|
|
- <!-- 背景模糊球（响应式大小+位置） -->
|
|
|
- <div
|
|
|
- class="absolute -top-4 -right-4 w-20 sm:w-32 h-20 sm:h-32 bg-purple-500/20 rounded-full blur-xl sm:blur-2xl">
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="absolute top-6 -left-4 w-16 sm:w-24 h-16 sm:h-24 bg-pink-500/20 rounded-full blur-xl sm:blur-2xl">
|
|
|
- </div>
|
|
|
+ <div class="relative">
|
|
|
+ <img src="images/assets/web/btc.png" alt="BTC" class="w-[280px] h-auto md:w-[350px]" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
- <!-- 公司背景与核心竞争力（响应式布局切换） -->
|
|
|
- <section id="company" class="py-12 sm:py-16 bg-gray-900">
|
|
|
- <div class="container mx-auto px-4 sm:px-6">
|
|
|
- <h2 class="text-2xl sm:text-3xl font-bold mb-8 sm:mb-12 text-center gradient-text">Meta Origin LLC</h2>
|
|
|
-
|
|
|
- <!-- 布局：移动端上下堆叠，平板及以上左右排列 -->
|
|
|
- <div class="flex flex-col md:flex-row items-center gap-6 sm:gap-10">
|
|
|
- <!-- 左侧图片（移动端居中，平板及以上左对齐） -->
|
|
|
- <div class="md:w-1/3 w-full max-w-xs sm:max-w-sm mx-auto md:mx-0">
|
|
|
- <div class="icon-bg p-4 sm:p-6 rounded-xl">
|
|
|
- <img src="https://picsum.photos/300/225" alt="AI芯片" class="rounded-lg w-full h-auto" />
|
|
|
- </div>
|
|
|
+ <!-- 公司背景 -->
|
|
|
+ <section id="company" class="py-12 md:py-16 bg-darkBg">
|
|
|
+ <div class="container mx-auto px-4">
|
|
|
+ <div class="flex flex-col md:flex-row items-center gap-8 md:gap-12">
|
|
|
+ <div class="md:w-1/3">
|
|
|
+ <img src="images/assets/web/AI芯片.png" alt="AI芯片" class="w-full h-auto rounded-lg" />
|
|
|
</div>
|
|
|
- <!-- 右侧文字（响应式字号+间距） -->
|
|
|
- <div class="md:w-2/3 w-full max-w-2xl">
|
|
|
- <h3 class="text-xl sm:text-2xl font-bold mb-3 sm:mb-4">公司背景与核心竞争力：</h3>
|
|
|
- <h4 class="text-lg sm:text-xl font-bold mb-2 text-purple-400">硅谷基因与科技金融融合</h4>
|
|
|
- <p class="mb-3 sm:mb-4 text-sm sm:text-base">
|
|
|
- 总部位于硅谷的金融科技公司，专注AI+加密货币领域，全球首批将OpenAI模型应用于BTC交易预测的先行者，采用英伟达顶级算力芯片训练专属AI预测模型
|
|
|
- </p>
|
|
|
- <h4 class="text-lg sm:text-xl font-bold mb-2 text-purple-400">90%预测准确率的技术突破</h4>
|
|
|
- <p class="text-sm sm:text-base">
|
|
|
- 创新性地利用海量BTC交易数据训练AI模型，通过历史数据深度学习，实现预测能力持续进化，经长期实测验证的稳定盈利技术保障体系
|
|
|
- </p>
|
|
|
+ <div class="md:w-2/3">
|
|
|
+ <h2 class="text-2xl font-bold text-gradientStart mb-4">Meta Origin LLC</h2>
|
|
|
+ <h3 class="text-lg font-bold mb-3">公司背景与核心竞争力：</h3>
|
|
|
+ <div class="space-y-4">
|
|
|
+ <div>
|
|
|
+ <h4 class="text-base font-bold mb-2">硅谷基因与科技金融融合</h4>
|
|
|
+ <p class="text-sm text-gray-400">
|
|
|
+ 总部位于硅谷的金融科技公司，专注AI+加密货币领域，全球首批将OpenAI模型应用于BTC交易预测的先行者，采用英伟达顶级算力芯片训练专属AI预测模型
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h4 class="text-base font-bold mb-2">90%预测准确率的技术突破</h4>
|
|
|
+ <p class="text-sm text-gray-400">
|
|
|
+ 创新性地利用海量BTC交易数据训练AI模型，通过历史数据深度学习，实现预测能力持续进化，经长期实测验证的稳定盈利技术保障体系
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
- <!-- 核心价值体系（响应式网格布局） -->
|
|
|
- <section id="value" class="py-12 sm:py-16 bg-gray-800">
|
|
|
- <div class="container mx-auto px-4 sm:px-6">
|
|
|
- <h2 class="text-2xl sm:text-3xl font-bold mb-4 sm:mb-6 text-center">核心价值体系：</h2>
|
|
|
- <p class="text-center mb-6 sm:mb-8 max-w-2xl mx-auto text-sm sm:text-base">
|
|
|
- 三方共赢的利润分配机制
|
|
|
- </p>
|
|
|
- <p class="text-center mb-8 sm:mb-10 max-w-2xl mx-auto text-sm sm:text-base">
|
|
|
- 客户只需支付10%利润分成的轻资产合作模式，平台手续费与公司收益形成良性商业循环，创造远程就业机会的新型数字经济范式
|
|
|
+ <!-- 核心价值 -->
|
|
|
+ <section id="value" class="py-12 md:py-16 bg-cardBg">
|
|
|
+ <div class="container mx-auto px-4">
|
|
|
+ <h2 class="text-2xl font-bold text-center mb-4">核心价值体系：</h2>
|
|
|
+ <p class="text-center text-sm text-gray-400 mb-8 max-w-2xl mx-auto">
|
|
|
+ 三方共赢的利润分配机制，客户只需支付10%利润分成的轻资产合作模式，平台手续费与公司收益形成良性商业循环，创造远程就业机会的新型数字经济范式
|
|
|
</p>
|
|
|
-
|
|
|
- <!-- 网格布局：移动端1列，平板2列，电脑3列 -->
|
|
|
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-8">
|
|
|
- <!-- 卡片1（响应式内边距） -->
|
|
|
- <div class="card p-5 sm:p-6 rounded-xl">
|
|
|
- <h3 class="text-lg sm:text-xl font-bold mb-3 text-pink-400">平等：无差别的财富机会</h3>
|
|
|
- <p class="text-sm sm:text-base">
|
|
|
- 服务不分层级的标准化AI交易，输入方案客户收益完全与个人交易努力正相关，致力于缩小数字时代的财富鸿沟
|
|
|
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
+ <div class="value-card-bg p-6">
|
|
|
+ <h3 class="text-xl font-bold mb-3">平等：</h3>
|
|
|
+ <h4 class="text-base font-bold mb-2">无差别的财富机会</h4>
|
|
|
+ <p class="text-sm text-gray-400">
|
|
|
+ 服务不分层级的标准化AI交易接入方案，客户收益完全与个人交易努力正相关，致力于缩小数字时代的财富鸿沟
|
|
|
</p>
|
|
|
</div>
|
|
|
- <!-- 卡片2 -->
|
|
|
- <div class="card p-5 sm:p-6 rounded-xl">
|
|
|
- <h3 class="text-lg sm:text-xl font-bold mb-3 text-pink-400">自由：分钟级的财富管理</h3>
|
|
|
- <p class="text-sm sm:text-base">
|
|
|
+ <div class="value-card-bg p-6">
|
|
|
+ <h3 class="text-xl font-bold mb-3">自由：</h3>
|
|
|
+ <h4 class="text-base font-bold mb-2">分钟级的财富管理</h4>
|
|
|
+ <p class="text-sm text-gray-400">
|
|
|
每日仅需几分钟操作的自动化交易系统，不影响主业的被动收入创造模式，真正实现时间与财务的双重自由
|
|
|
</p>
|
|
|
</div>
|
|
|
- <!-- 卡片3（移动端单独一行，平板及以上正常排列） -->
|
|
|
- <div class="card p-5 sm:p-6 rounded-xl sm:col-span-1 lg:col-span-1">
|
|
|
- <h3 class="text-lg sm:text-xl font-bold mb-3 text-pink-400">慈善：可持续的社会回馈</h3>
|
|
|
- <p class="text-sm sm:text-base">
|
|
|
+ <div class="value-card-bg p-6">
|
|
|
+ <h3 class="text-xl font-bold mb-3">慈善：</h3>
|
|
|
+ <h4 class="text-base font-bold mb-2">可持续的社会回馈</h4>
|
|
|
+ <p class="text-sm text-gray-400">
|
|
|
年度慈善预算占净利润固定比例的承诺，聚焦教育扶贫与社区发展的定向捐助，构建商业价值与社会价值并重的企业生态
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 按钮（响应式尺寸） -->
|
|
|
- <div class="text-center mt-8 sm:mt-10">
|
|
|
+ <div class="text-center mt-8">
|
|
|
<button
|
|
|
- class="bg-gradient-to-r from-orange-400 to-pink-500 text-white px-6 sm:px-8 py-2.5 sm:py-3 rounded-full transition text-sm sm:text-base">
|
|
|
+ class="bg-gradient-to-r from-gradientStart to-gradientEnd text-black px-6 py-2.5 rounded-full font-medium transition transform hover:scale-105">
|
|
|
Trade Now
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
- <!-- 区块链行业前瞻（响应式标签+文字） -->
|
|
|
- <section id="outlook" class="py-12 sm:py-16 bg-gray-900">
|
|
|
- <div class="container mx-auto px-4 sm:px-6">
|
|
|
- <h2 class="text-2xl sm:text-3xl font-bold mb-8 sm:mb-12 text-center">区块链行业前瞻：</h2>
|
|
|
-
|
|
|
- <!-- 描述文字（响应式宽度+字号） -->
|
|
|
- <p class="text-center mb-8 sm:mb-10 max-w-3xl mx-auto text-sm sm:text-base px-2 sm:px-0">
|
|
|
+ <!-- 行业前瞻 -->
|
|
|
+ <section id="outlook" class="py-12 md:py-16 bg-darkBg">
|
|
|
+ <div class="container mx-auto px-4">
|
|
|
+ <h2 class="text-2xl font-bold text-center mb-8">区块链行业前瞻：</h2>
|
|
|
+ <p class="text-center text-sm text-gray-400 mb-10 max-w-3xl mx-auto">
|
|
|
区块链未来趋势涵盖DeFi普及、数字身份、供应链透明、智能合约、NFT拓展、跨链互操作、政府应用、隐私保护、能源交易及法规标准制定。
|
|
|
</p>
|
|
|
+ <div class="flex flex-wrap justify-center gap-4">
|
|
|
+ <span class="tag-bg px-4 py-2 rounded-full text-xs">智能合约</span>
|
|
|
+ <span class="tag-bg px-4 py-2 rounded-full text-xs">DeFi普及</span>
|
|
|
+ <span class="tag-bg px-4 py-2 rounded-full text-xs">数字身份</span>
|
|
|
+ <span class="tag-bg px-4 py-2 rounded-full text-xs">供应链透明</span>
|
|
|
+ <span class="tag-bg px-4 py-2 rounded-full text-xs">NFT拓展</span>
|
|
|
+ <span class="tag-bg px-4 py-2 rounded-full text-xs">跨链互操作</span>
|
|
|
+ <span class="tag-bg px-4 py-2 rounded-full text-xs">政府应用</span>
|
|
|
+ <span class="tag-bg px-4 py-2 rounded-full text-xs">隐私保护</span>
|
|
|
+ <span class="tag-bg px-4 py-2 rounded-full text-xs">能源交易</span>
|
|
|
+ <span class="tag-bg px-4 py-2 rounded-full text-xs">法规标准</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 关于未来 -->
|
|
|
+ <section id="future" class="py-12 md:py-16 relative overflow-hidden">
|
|
|
+ <div>
|
|
|
+ <!-- 背景图片带渐变叠加 -->
|
|
|
+ <div class="absolute inset-0 z-0">
|
|
|
+ <img src="images/assets/web/light2.png" alt="light" class="w-full h-full object-cover" />
|
|
|
+ <img src="images/assets/web/qiu.png" alt="qiu" class="w-full h-full object-cover" />
|
|
|
+ <!-- 渐变遮罩，确保文字清晰可见 -->
|
|
|
+ <div class="absolute inset-0 bg-gradient-to-b from-cardBg/90 via-darkBg/85 to-darkBg/95"></div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 标签容器（自适应换行+响应式间距） -->
|
|
|
- <div class="flex flex-wrap justify-center gap-3 sm:gap-4 px-4 sm:px-0">
|
|
|
- <span class="bg-purple-800 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm">DeFi普及</span>
|
|
|
- <span class="bg-purple-800 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm">数字身份管理</span>
|
|
|
- <span class="bg-purple-800 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm">供应链管理</span>
|
|
|
- <span class="bg-purple-800 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm">跨链技术</span>
|
|
|
- <span class="bg-purple-800 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm">政府应用</span>
|
|
|
- <span class="bg-purple-800 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm">隐私保护</span>
|
|
|
- <span class="bg-purple-800 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm">法规标准</span>
|
|
|
- <span class="bg-purple-800 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm">能源管理</span>
|
|
|
+ <div class="container mx-auto px-4 relative z-10">
|
|
|
+ <h2 class="text-2xl font-bold text-center mb-2">关于未来：</h2>
|
|
|
+ <div class="text-center mb-8">
|
|
|
+ <h3
|
|
|
+ class="text-3xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500">
|
|
|
+ 10,000,000</h3>
|
|
|
+ <p class="text-sm text-gray-300 max-w-xl mx-auto mb-4">
|
|
|
+ 我们的目标是在全球范围内创造1000万个远程工作岗位，推动加密货币的普及，同时为更多人提供应对通货膨胀和信息差所带来的财富不平等的机会。
|
|
|
+ </p>
|
|
|
+ <p class="text-sm text-gray-300 max-w-xl mx-auto">
|
|
|
+ 每家科技公司的终极目标都是在纳斯达克敲钟，集团亦不例外。我们始终以友善的态度对待每一位客户，陪伴客户成长，期待与客户共同见证集团的成功。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="text-center">
|
|
|
+ <button
|
|
|
+ class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-8 py-3 rounded-full font-medium transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-purple-500/20">
|
|
|
+ Join us
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
</section>
|
|
|
|
|
|
- <!-- 关于未来（响应式文字+按钮） -->
|
|
|
- <section id="future" class="py-12 sm:py-16 bg-gradient-to-b from-gray-800 to-gray-900">
|
|
|
- <div class="container mx-auto px-4 sm:px-6">
|
|
|
- <h2 class="text-2xl sm:text-3xl font-bold mb-8 sm:mb-12 text-center">关于未来：</h2>
|
|
|
- <div class="text-center max-w-2xl mx-auto">
|
|
|
- <!-- 数字（响应式字号） -->
|
|
|
- <h3 class="text-3xl sm:text-4xl font-bold mb-5 sm:mb-6 text-purple-400">10,000,000</h3>
|
|
|
- <!-- 描述文字（响应式行高+间距） -->
|
|
|
- <p class="mb-6 sm:mb-8 text-sm sm:text-base leading-relaxed px-2 sm:px-0">
|
|
|
- 我们的目标是在全球范围内创造1000万个远程工作岗位，推动加密货币的普及，同时为更多人提供应对通货膨胀和信息差所带来的财富不平等的机会。<br><br>
|
|
|
- 每家科技公司的终极目标都是在纳斯达克敲钟，集团亦不例外。<br><br>
|
|
|
- 我们始终以友善的态度对待每一位客户，陪伴客户成长，期待与客户共同见证集团的成功。
|
|
|
- </p>
|
|
|
- <!-- 按钮（响应式尺寸） -->
|
|
|
- <button class="bg-gradient-to
|
|
|
+ <!-- 页脚 -->
|
|
|
+ <footer class="bg-darkBg py-8 border-t border-gray-800">
|
|
|
+ <div class="container mx-auto px-4">
|
|
|
+ <div class="flex flex-col md:flex-row justify-between items-center gap-6">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <img src="images/footer-logo.png" alt="Logo" class="h-10 w-auto mr-3" />
|
|
|
+ <div>
|
|
|
+ <p class="text-sm">联系我们</p>
|
|
|
+ <p class="text-xs text-gray-400">MO@emailxx.vip</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex space-x-4">
|
|
|
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
|
|
|
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
|
|
|
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
|
|
|
+ </div>
|
|
|
+ <div class="text-sm text-gray-400">
|
|
|
+ <p>关于我们</p>
|
|
|
+ <p>服务条款</p>
|
|
|
+ <p>免责声明</p>
|
|
|
+ <p>职业机会</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ // 平滑滚动
|
|
|
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
|
+ anchor.addEventListener('click', function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+ const targetId = this.getAttribute('href');
|
|
|
+ const targetElement = document.querySelector(targetId);
|
|
|
+ if (targetElement) {
|
|
|
+ window.scrollTo({
|
|
|
+ top: targetElement.offsetTop - 80,
|
|
|
+ behavior: 'smooth'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 导航栏滚动效果
|
|
|
+ window.addEventListener('scroll', function () {
|
|
|
+ const nav = document.querySelector('nav');
|
|
|
+ if (window.scrollY > 100) {
|
|
|
+ nav.classList.add('py-2', 'shadow-lg');
|
|
|
+ nav.classList.remove('py-3');
|
|
|
+ } else {
|
|
|
+ nav.classList.add('py-3');
|
|
|
+ nav.classList.remove('py-2', 'shadow-lg');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
