|
|
@@ -3,7 +3,7 @@
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
|
|
<title>AI金融科技</title>
|
|
|
<!-- 引入Tailwind CSS -->
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
@@ -11,11 +11,11 @@
|
|
|
<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(135deg, #0f172a 0%, #1e293b 100%);
|
|
|
+ background: linear-gradient(180deg, #0a0f25 0%, #1a1f3d 100%);
|
|
|
}
|
|
|
|
|
|
.gradient-text {
|
|
|
- background: linear-gradient(90deg, #6366f1, #ec4899);
|
|
|
+ background: linear-gradient(90deg, #ffffff, #d4d4d4);
|
|
|
-webkit-background-clip: text;
|
|
|
background-clip: text;
|
|
|
color: transparent;
|
|
|
@@ -24,212 +24,232 @@
|
|
|
.card {
|
|
|
background: rgba(30, 41, 59, 0.8);
|
|
|
backdrop-filter: blur(8px);
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ /* 卡片悬浮交互（全尺寸适配） */
|
|
|
}
|
|
|
|
|
|
.icon-bg {
|
|
|
background: rgba(99, 102, 241, 0.1);
|
|
|
}
|
|
|
+
|
|
|
+ .nav-link {
|
|
|
+ color: #ffffff;
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-link:hover {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 移动端导航菜单动画 */
|
|
|
+ .mobile-menu {
|
|
|
+ max-height: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: max-height 0.3s ease-out;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mobile-menu.active {
|
|
|
+ max-height: 300px;
|
|
|
+ /* 足够容纳导航项的高度 */
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
-<body class="bg-gray-900 text-white">
|
|
|
- <!-- 导航栏 -->
|
|
|
- <nav class="bg-gray-800/80 backdrop-filter-blur-md px-6 py-4">
|
|
|
+<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（响应式尺寸） -->
|
|
|
<div class="flex items-center">
|
|
|
- <<i class="fas fa-crown text-purple-500 text-2xl mr-2">
|
|
|
- </< /i>
|
|
|
- <span class="text-xl font-bold">Meta Origin</span>
|
|
|
+ <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>
|
|
|
</div>
|
|
|
- <div class="hidden md:flex space-x-6">
|
|
|
- <a href=" " class="hover:text-purple-400 transition">首页</a>
|
|
|
- <a href="#" class="hover:text-purple-400 transition">公司介绍</a>
|
|
|
- <a href="#" class="hover:text-purple-400 transition">核心技术</a>
|
|
|
- <a href="#" class="hover:text-purple-400 transition">关于未来</a>
|
|
|
+
|
|
|
+ <!-- 桌面端导航（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>
|
|
|
- <button class="md:hidden text-2xl">
|
|
|
- <<i class="fas fa-bars">
|
|
|
- </< /i>
|
|
|
+
|
|
|
+ <!-- 移动端菜单按钮（md以下显示） -->
|
|
|
+ <button id="menuBtn" class="md:hidden text-2xl text-white focus:outline-none">
|
|
|
+ <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 py-16">
|
|
|
- <div class="container mx-auto px-6">
|
|
|
- <div class="flex flex-col md:flex-row items-center">
|
|
|
- <div class="md:w-1/2 mb-10 md:mb-0">
|
|
|
- <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4">
|
|
|
+ <!-- 英雄区域（响应式居中+图片适配） -->
|
|
|
+ <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">
|
|
|
AI金融科技: <br>
|
|
|
<span class="gradient-text">解密BTC短线交易的90%胜率</span>
|
|
|
</h1>
|
|
|
- <p class="text-gray-300 mb-8 max-w-md">
|
|
|
- 利用先进AI技术，结合金融科技，为您揭开BTC短线交易高胜率的秘密，助力把握数字资产交易机会。
|
|
|
+ <p class="text-gray-300 mb-6 sm:mb-8 text-sm sm:text-base max-w-md mx-auto">
|
|
|
+ AI Financial Technology: Decrypting the 90% Winning Rate of BTC Short term Trading
|
|
|
</p>
|
|
|
- <div class="flex flex-wrap gap-4">
|
|
|
- <button class="bg-pink-500 hover:bg-pink-600 text-white px-6 py-3 rounded-full transition">
|
|
|
- Download App
|
|
|
- </button>
|
|
|
- <button
|
|
|
- class="bg-transparent border border-purple-500 hover:bg-purple-500/10 text-purple-400 px-6 py-3 rounded-full transition">
|
|
|
- 了解更多
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div class="flex space-x-4 mt-8">
|
|
|
- < img src="https://picsum.photos/40/40" alt="ChatGPT" class="h-8 w-8 rounded">
|
|
|
- < img src="https://picsum.photos/41/41" alt="deepseek" class="h-8 w-8 rounded">
|
|
|
- < img src="https://picsum.photos/42/42" alt="GROK" class="h-8 w-8 rounded">
|
|
|
- < img src="https://picsum.photos/43/43" alt="NVIDIA" class="h-8 w-8 rounded">
|
|
|
+ <!-- 按钮（响应式尺寸+间距） -->
|
|
|
+ <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">
|
|
|
+ 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>
|
|
|
</div>
|
|
|
- <div class="md:w-1/2 relative">
|
|
|
- <div class="absolute -top-6 -right-6 w-32 h-32 bg-purple-500/20 rounded-full blur-2xl"></div>
|
|
|
- <div class="absolute top-10 -left-10 w-24 h-24 bg-pink-500/20 rounded-full blur-2xl"></div>
|
|
|
- <div class="relative z-10">
|
|
|
- < img src="https://picsum.photos/400/300" alt="BTC" class="rounded-lg shadow-2xl">
|
|
|
- <div class="absolute -top-4 -right-4 bg-purple-600 p-3 rounded-lg">
|
|
|
- <<i class="fas fa-bitcoin text-3xl">
|
|
|
- </< /i>
|
|
|
- </div>
|
|
|
- <div class="absolute -bottom-4 -left-4 bg-green-600 p-3 rounded-lg">
|
|
|
- <<i class="fas fa-dollar-sign text-2xl">
|
|
|
- </< /i>
|
|
|
- </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>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
- <!-- 公司背景与核心竞争力 -->
|
|
|
- <section class="py-16 bg-gray-900">
|
|
|
- <div class="container mx-auto px-6">
|
|
|
- <h2 class="text-3xl font-bold mb-12 text-center">Meta Origin LLC</h2>
|
|
|
- <div class="flex flex-col md:flex-row items-center gap-10">
|
|
|
- <div class="md:w-1/3">
|
|
|
- <div class="icon-bg p-6 rounded-xl">
|
|
|
- < img src="https://picsum.photos/200/150" alt="AI芯片" class="rounded-lg">
|
|
|
+ <!-- 公司背景与核心竞争力（响应式布局切换） -->
|
|
|
+ <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>
|
|
|
</div>
|
|
|
- <div class="md:w-2/3">
|
|
|
- <h3 class="text-2xl font-bold mb-4">公司背景与核心竞争力</h3>
|
|
|
- <p class="mb-4">
|
|
|
- 硅谷基因与科技金融融合，总部位于硅谷的金融科技公司，专注AI+加密货币领域，全球首批把OpenAI模型应用于BTC交易场景的先行者，利用该模型为用户提供专业AI预测模型。</p>
|
|
|
- <h4 class="text-xl font-bold mb-2">90%预测准确率的技术突破</h4>
|
|
|
- <p>创新性地将海量ITCS数据纳入模型，通过历史数据深度学习实现预测能力进阶，经长期实测验证形成独家技术保障体系。</p>
|
|
|
+ <!-- 右侧文字（响应式字号+间距） -->
|
|
|
+ <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>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
- <!-- 核心价值体系 -->
|
|
|
- <section class="py-16 bg-gray-800">
|
|
|
- <div class="container mx-auto px-6">
|
|
|
- <h2 class="text-3xl font-bold mb-12 text-center">核心价值体系</h2>
|
|
|
- <p class="text-center mb-10 max-w-2xl mx-auto">
|
|
|
- 三方共赢的利润分配机制，客户只需支付10%利润分成，这种资产合作模式让平台、参与者与公司形成利益共赢体，创造全新数字经济范式。</p>
|
|
|
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
|
- <div class="card p-6 rounded-xl">
|
|
|
- <h3 class="text-xl font-bold mb-3">平等：无差别的财富机会</h3>
|
|
|
- <p>服务不分层级的标准化AI交易输入方案，客户收益完全与个人交易努力正相关，致力于缩小数字时代的财富鸿沟。</p>
|
|
|
+ <!-- 核心价值体系（响应式网格布局） -->
|
|
|
+ <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%利润分成的轻资产合作模式，平台手续费与公司收益形成良性商业循环，创造远程就业机会的新型数字经济范式
|
|
|
+ </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交易，输入方案客户收益完全与个人交易努力正相关，致力于缩小数字时代的财富鸿沟
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- <div class="card p-6 rounded-xl">
|
|
|
- <h3 class="text-xl font-bold mb-3">平等：无差别的财富机会</h3>
|
|
|
- <p>服务不分层级的标准化AI交易输入方案，客户收益完全与个人交易努力正相关，致力于缩小数字时代的财富鸿沟。</p>
|
|
|
+ <!-- 卡片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">
|
|
|
+ 每日仅需几分钟操作的自动化交易系统，不影响主业的被动收入创造模式，真正实现时间与财务的双重自由
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- <div class="card p-6 rounded-xl">
|
|
|
- <h3 class="text-xl font-bold mb-3">平等：无差别的财富机会</h3>
|
|
|
- <p>服务不分层级的标准化AI交易输入方案，客户收益完全与个人交易努力正相关，致力于缩小数字时代的财富鸿沟。</p>
|
|
|
+ <!-- 卡片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">
|
|
|
+ 年度慈善预算占净利润固定比例的承诺，聚焦教育扶贫与社区发展的定向捐助，构建商业价值与社会价值并重的企业生态
|
|
|
+ </p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="text-center mt-10">
|
|
|
- <button class="bg-pink-500 hover:bg-pink-600 text-white px-8 py-3 rounded-full transition">
|
|
|
+
|
|
|
+ <!-- 按钮（响应式尺寸） -->
|
|
|
+ <div class="text-center mt-8 sm:mt-10">
|
|
|
+ <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">
|
|
|
Trade Now
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
- <!-- 区块链行业前瞻 -->
|
|
|
- <section class="py-16 bg-gray-900">
|
|
|
- <div class="container mx-auto px-6">
|
|
|
- <h2 class="text-3xl font-bold mb-12 text-center">区块链行业前瞻</h2>
|
|
|
- <p class="text-center mb-10 max-w-3xl mx-auto">
|
|
|
- 区块链未来趋势涵盖DeFi（去中心化金融）、数字身份、供应链透明、智能合约、NFT（非同质化代币）浪潮、跨链互操作、政府应用、隐私保护、跨境交易以及版权创新等诸多方面，智能合约在其中广泛应用。</p>
|
|
|
- <div class="flex flex-wrap justify-center gap-4">
|
|
|
- <span class="bg-gray-800 px-4 py-2 rounded-full text-sm">智能合约</span>
|
|
|
- <span class="bg-gray-800 px-4 py-2 rounded-full text-sm">智能合约</span>
|
|
|
- <span class="bg-gray-800 px-4 py-2 rounded-full text-sm">智能合约</span>
|
|
|
- <span class="bg-gray-800 px-4 py-2 rounded-full text-sm">智能合约</span>
|
|
|
- <span class="bg-gray-800 px-4 py-2 rounded-full text-sm">智能合约</span>
|
|
|
- <span class="bg-gray-800 px-4 py-2 rounded-full text-sm">智能合约</span>
|
|
|
- <span class="bg-gray-800 px-4 py-2 rounded-full text-sm">智能合约</span>
|
|
|
- <span class="bg-gray-800 px-4 py-2 rounded-full text-sm">智能合约</span>
|
|
|
- </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>
|
|
|
|
|
|
- <!-- 关于未来 -->
|
|
|
- <section class="py-16 bg-gradient-to-b from-gray-800 to-gray-900">
|
|
|
- <div class="container mx-auto px-6">
|
|
|
- <h2 class="text-3xl font-bold mb-12 text-center">关于未来</h2>
|
|
|
- <div class="text-center">
|
|
|
- <h3 class="text-4xl font-bold mb-6">10,000,000</h3>
|
|
|
- <p class="max-w-2xl mx-auto mb-8">
|
|
|
- 我们的目标是在全球范围内创造1000万个远程工作岗位，推动加密货币普及，同时为更多人提供应对通胀和信息差的机会，秉持目标在任何地方都清晰无差别的理念，以热忱和尊重对待每一位客户，陪伴客户成长，期待与客户共同见证集团成功。
|
|
|
- </p>
|
|
|
- <button class="bg-purple-500 hover:bg-purple-600 text-white px-8 py-3 rounded-full transition">
|
|
|
- Join us
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
+ <!-- 描述文字（响应式宽度+字号） -->
|
|
|
+ <p class="text-center mb-8 sm:mb-10 max-w-3xl mx-auto text-sm sm:text-base px-2 sm:px-0">
|
|
|
+ 区块链未来趋势涵盖DeFi普及、数字身份、供应链透明、智能合约、NFT拓展、跨链互操作、政府应用、隐私保护、能源交易及法规标准制定。
|
|
|
+ </p>
|
|
|
|
|
|
- <!-- 页脚 -->
|
|
|
- <footer class="bg-gray-800 py-10">
|
|
|
- <div class="container mx-auto px-6">
|
|
|
- <div class="flex flex-col md:flex-row justify-between items-center">
|
|
|
- <div class="flex items-center mb-6 md:mb-0">
|
|
|
- <<i class="fas fa-crown text-purple-500 text-2xl mr-2">
|
|
|
- </< /i>
|
|
|
- <span class="text-xl font-bold">Meta Origin</span>
|
|
|
- </div>
|
|
|
- <div class="flex space-x-6 mb-6 md:mb-0">
|
|
|
- <a href="#" class="text-gray-400 hover:text-purple-400 transition">
|
|
|
- <<i class="fab fa-facebook-f">
|
|
|
- </< /i>
|
|
|
- </a>
|
|
|
- <a href="#" class="text-gray-400 hover:text-purple-400 transition">
|
|
|
- <<i class="fab fa-twitter">
|
|
|
- </< /i>
|
|
|
- </a>
|
|
|
- <a href="#" class="text-gray-400 hover:text-purple-400 transition">
|
|
|
- <<i class="fab fa-instagram">
|
|
|
- </< /i>
|
|
|
- </a>
|
|
|
- <a href="#" class="text-gray-400 hover:text-purple-400 transition">
|
|
|
- <<i class="fab fa-telegram">
|
|
|
- </< /i>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class="text-center md:text-right">
|
|
|
- <p class="text-gray-400 mb-2">联系我们</p>
|
|
|
- <p class="text-gray-400">MO@mail.com</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="flex flex-col md:flex-row justify-between items-center mt-8 pt-8 border-t border-gray-700">
|
|
|
- <div class="text-gray-400 text-sm mb-4 md:mb-0">
|
|
|
- © 2025 Meta Origin LLC. 保留所有权利。
|
|
|
- </div>
|
|
|
- <div class="flex space-x-6 text-sm">
|
|
|
- <a href="#" class="text-gray-400 hover:text-purple-400 transition">关于我们</a>
|
|
|
- <a href="#" class="text-gray-400 hover:text-purple-400 transition">服务条款</a>
|
|
|
- <a href="#" class="text-gray-400 hover:text-purple-400 transition">免责声明</a>
|
|
|
- <a href="#" class="text-gray-400 hover:text-purple-400 transition">职业机会</a>
|
|
|
- </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>
|
|
|
</div>
|
|
|
- </footer>
|
|
|
-</body>
|
|
|
+ </section>
|
|
|
|
|
|
-</html>
|
|
|
+ <!-- 关于未来（响应式文字+按钮） -->
|
|
|
+ <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
|
