Files
aifo-portal-web/pages/new-user-promotion.html
T
2026-07-30 18:38:39 +08:00

717 lines
22 KiB
HTML

<!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">
<title>New User Promotion</title>
<link type="text/css" href="../assets/vendor/icon/iconfont.css" rel="stylesheet">
<link href="../assets/css/style.css" rel="stylesheet">
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
<link type="text/css" href="../assets/css/index.css" rel="stylesheet">
<style>
#new-user-promo {
--primary: #f08d1b;
--text-main: #f8f8f8;
--text-muted: rgba(255, 255, 255, 0.7);
--line: rgba(255, 255, 255, 0.12);
color: var(--text-main);
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
#new-user-promo::before {
content: "";
position: absolute;
top: 90px;
left: -2vw;
width: min(60vw, 555px);
height: min(60vw, 555px);
max-height: min(52vh, 485px);
z-index: 0;
pointer-events: none;
background: url("../assets/images/backgrounds/new-user-promo-corner-glow.png") no-repeat
left top / cover;
}
#new-user-promo .promo-main {
position: relative;
z-index: 1;
max-width: 1140px;
margin: 0 auto;
padding: 106px 18px 70px;
}
#new-user-promo .promo-hero {
position: relative;
/* min-height: calc(100vh - 130px); */
/* max-height: 900px; */
background: transparent;
/* overflow: hidden; */
padding: 80px 0px 100px;
margin-bottom: 46px;
display: flex;
align-items: flex-start;
}
#new-user-promo .hero-content {
position: relative;
z-index: 3;
max-width: 60%;
}
#new-user-promo .hero-title {
margin: 0;
font-size: 48px;
line-height: 1.5;
font-weight: 700;
}
/* 移动端:标题下方居中金币图(桌面隐藏) */
#new-user-promo .hero-coin-mobile {
display: none;
}
#new-user-promo .hero-markets {
margin: 0 0 10px;
color: rgba(240, 141, 27, 0.9);
font-size: 16px;
line-height: 1.2;
}
#new-user-promo .hero-sub {
margin: 14px 0 20px;
color: #f2f2f2;
font-size: 22px;
line-height: 1.55;
max-width: 476px;
}
#new-user-promo .hero-sub .hero-highlight {
color: #f98715;
font-weight: 700;
}
#new-user-promo .hero-visual {
position: absolute;
top: 0;
right: -110px;
width: 71%;
height: 100%;
z-index: 2;
pointer-events: none;
}
#new-user-promo .hero-coin {
position: absolute;
right: -2%;
top: -24%;
width: 100%;
aspect-ratio: 1;
background: url("../assets/images/backgrounds/new-user-hero-badge.png") no-repeat center / contain;
}
#new-user-promo .hero-note {
margin: 18px 0 0;
width: 100%;
max-width: 636px;
font-size: 12px;
line-height: 1.9;
color: #999999;
}
#new-user-promo .hero-badge {
display: none;
}
#new-user-promo .btn-promo {
border: none;
border-radius: 17px;
padding: 10px 30px;
font-weight: 700;
color: #fff;
background: #f98715;
}
#new-user-promo .btn-promo:hover {
background-color: #F9A215;
box-shadow: inset 0 5px 10px 0 rgba(249, 135, 21, 0.6), 0 5px 10px 0 rgba(249, 135, 21, 0.6);
text-decoration: none;
}
@keyframes promoFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
#new-user-promo .promo-section {
margin-bottom: 48px;
position: relative;
z-index: 4;
}
#new-user-promo .promo-section--welcome {
overflow: visible;
}
/* 右侧竖条:约一屏高、垂直居中;左侧易与 PNG 黑底叠盖住 hero,用 mask + 混合模式透出下层 */
#new-user-promo .promo-welcome-side-glow {
position: absolute;
top: 50%;
right: calc((100% - 100vw) / 2);
left: auto;
bottom: auto;
transform: translateY(-50%);
width: min(82vw, 720px);
height: 100vh;
height: 100dvh;
max-height: 100svh;
z-index: 0;
pointer-events: none;
background-color: transparent;
background-image: url("../assets/images/backgrounds/new-user-promo-welcome-side-glow.png");
background-repeat: no-repeat;
background-position: right center;
background-size: auto 100%;
mix-blend-mode: screen;
}
#new-user-promo .promo-section--welcome > h2,
#new-user-promo .promo-section--welcome > p,
#new-user-promo .promo-section--welcome > .offer {
position: relative;
z-index: 1;
}
#new-user-promo .promo-title {
text-align: center;
font-size: 48px;
line-height: 1.08;
margin-bottom: 26px;
}
#new-user-promo .promo-title span {
color: #f98715;
}
#new-user-promo .promo-desc {
max-width: 760px;
margin: 0 auto;
text-align: center;
line-height: 1.55;
font-size: 22px;
}
#new-user-promo .promo-note {
margin: 70px auto 0;
max-width: 813px;
text-align: center;
font-size: 12px;
line-height: 1.9;
color: #777777;
}
#new-user-promo .offer {
margin: 70px auto 0;
max-width: 780px;
border-radius: 14px;
background-image: url("../assets/images/backgrounds/new-user-offer-bg.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 50px 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
#new-user-promo .offer h3 {
margin: 0;
font-size: 45px;
font-weight: 700;
margin-bottom: 22px;
}
#new-user-promo .offer p {
margin: 0;
color: #ffe1bc;
}
#new-user-promo .claim-grid {
margin: 20px auto 0;
max-width: 800px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 80px;
}
#new-user-promo .claim-item {
position: relative;
border-radius: 12px;
border: 1px solid rgba(240, 141, 27, 0.3);
min-height: 190px;
padding: 18px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
}
#new-user-promo .claim-item:nth-child(1) {
background-image: url("../assets/images/backgrounds/new-user-claim-01.png");
}
#new-user-promo .claim-item:nth-child(2) {
background-image: url("../assets/images/backgrounds/new-user-claim-02.png");
}
#new-user-promo .claim-item:nth-child(3) {
background-image: url("../assets/images/backgrounds/new-user-claim-03.png");
}
#new-user-promo .claim-item:not(:last-child)::after {
content: "";
position: absolute;
right: -50px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 50px;
background: url("../assets/images/backgrounds/new-user-claim-arrow.png") no-repeat center / contain;
}
#new-user-promo .claim-text {
margin: 0;
padding-top: 70px;
font-size: 16px;
line-height: 1.45;
color: #bc9467;
}
/* 步骤序号图:仅移动端在 clain-section 中展示,桌面用背景图内嵌数字 */
#new-user-promo .claim-step-mark {
display: none;
}
#new-user-promo .btn-center {
text-align: center;
margin-top: 80px;
}
#new-user-promo .tier-tabs {
max-width: 420px;
margin: 20px auto 18px;
padding: 4px;
border-radius: 999px;
background: #1a1a1a;
border: 1px solid var(--line);
display: flex;
gap: 4px;
}
#new-user-promo .tier-btn {
border: none;
flex: 1;
border-radius: 999px;
background: transparent;
color: var(--text-muted);
padding: 8px 0;
font-weight: 600;
}
#new-user-promo .tier-btn.is-active {
background: var(--primary);
color: #111;
}
#new-user-promo .table-wrap {
max-width: 900px;
margin: 0 auto;
border-radius: 12px;
border: 1px solid var(--line);
background: #111;
overflow: hidden;
}
#new-user-promo table {
width: 100%;
border-collapse: collapse;
}
#new-user-promo th,
#new-user-promo td {
white-space: nowrap;
text-align: center;
padding: 11px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
font-size: 13px;
}
#new-user-promo th:first-child,
#new-user-promo td:first-child {
text-align: left;
padding-left: 14px;
}
#new-user-promo thead th {
background: #1d1d1d;
color: #ffc67f;
font-weight: 700;
}
#new-user-promo .faq-grid {
max-width: 880px;
margin: 18px auto 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#new-user-promo .faq-question {
border: 1px solid var(--line);
border-radius: 10px;
background: #131313;
padding: 11px 14px;
color: var(--text-muted);
}
#new-user-promo .clain-section{
margin-top:130px;
}
#new-user-promo .clain-section .promo-title{
margin-bottom: 82px;
}
@media (max-width: 992px) {
#new-user-promo .hero-content {
max-width: 90%;
}
#new-user-promo .hero-title {
font-size: 46px;
max-width: 100%;
}
#new-user-promo .hero-sub {
font-size: 31px;
}
#new-user-promo .hero-visual {
width: 52%;
}
#new-user-promo .hero-coin {
width: 100%;
right: 20%;
top: 0;
}
#new-user-promo .hero-reflection {
width: 74%;
right: 0;
}
#new-user-promo::before {
top: 94px;
}
}
@media (max-width: 768px) {
#new-user-promo::before {
left: -3vw;
width: min(71vw, 415px);
height: min(71vw, 415px);
max-height: min(48vh, 345px);
}
#new-user-promo::before {
/* top: 72px; */
display: none;
}
#new-user-promo .promo-main {
padding-top: 72px;
}
#new-user-promo .promo-hero {
padding: 26px 18px 32px;
min-height: 0;
display: block;
}
#new-user-promo .hero-content {
max-width: 100%;
text-align: center;
}
#new-user-promo .hero-title {
max-width: 100%;
font-size: 30px;
text-align: center;
}
#new-user-promo .hero-coin-mobile {
display: block;
width: 100%;
max-width: min(78vw, 300px);
margin: 14px auto 4px;
line-height: 0;
}
#new-user-promo .hero-coin-mobile img {
display: block;
width: 100%;
max-height: min(36vh, 240px);
height: auto;
margin: 0 auto;
object-fit: contain;
}
#new-user-promo .hero-markets {
font-size: 15px;
margin-bottom: 8px;
}
#new-user-promo .hero-sub {
font-size: 18px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#new-user-promo .hero-note {
margin-top: 10px;
max-width: 100%;
font-size: 10px;
line-height: 1.4;
}
/* 移动端用标题下居中图,隐藏侧/底绝对定位金币,避免重复与遮挡 */
#new-user-promo .hero-visual {
display: none;
}
#new-user-promo .promo-title {
font-size: 36px;
}
#new-user-promo .promo-welcome-side-glow {
width: min(88vw, 540px);
opacity: 0.95;
}
#new-user-promo .offer {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
#new-user-promo .offer h3 {
font-size: 28px;
}
#new-user-promo .claim-grid,
#new-user-promo .faq-grid {
grid-template-columns: 1fr;
}
/* 单列时默认去掉步骤间横向箭头;How to claim 在下方单独还原为向下箭头 */
#new-user-promo .claim-item:not(:last-child)::after {
display: none;
}
#new-user-promo .clain-section {
margin-top: 56px;
padding-left: 16px;
padding-right: 16px;
}
#new-user-promo .clain-section .promo-title {
margin-bottom: 28px;
text-align: center;
}
#new-user-promo .clain-section .claim-grid {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
max-width: min(360px, 92vw);
margin: 8px auto 0;
}
#new-user-promo .clain-section .claim-item:nth-child(1),
#new-user-promo .clain-section .claim-item:nth-child(2),
#new-user-promo .clain-section .claim-item:nth-child(3) {
background-image: url("../assets/images/backgrounds/new-user-claim-card-bg-mobile.png");
}
#new-user-promo .clain-section .claim-item {
width: 100%;
min-height: 152px;
padding: 20px 18px 22px 22px;
border-radius: 16px;
border: 1px solid rgba(180, 110, 45, 0.28);
box-shadow:
inset 0 2px 0 rgba(249, 135, 21, 0.55),
inset 2px 0 0 rgba(249, 135, 21, 0.42),
0 10px 28px rgba(0, 0, 0, 0.35);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
background-size: cover;
background-position: center;
}
#new-user-promo .clain-section .claim-step-mark {
display: block;
width: clamp(76px, 22vw, 112px);
height: auto;
margin: 0 0 10px;
align-self: flex-start;
object-fit: contain;
}
#new-user-promo .clain-section .claim-text {
padding-top: 0;
font-size: 15px;
line-height: 1.5;
color: #d4a574;
text-align: left;
}
#new-user-promo .clain-section .claim-item:not(:last-child)::after {
display: block;
left: 50%;
right: auto;
top: auto;
bottom: -28px;
transform: translateX(-50%);
width: 28px;
height: 22px;
background: url("../assets/images/backgrounds/new-user-claim-arrow-down.png") no-repeat center / contain;
}
#new-user-promo .clain-section .btn-center {
margin-top: 40px;
}
#new-user-promo .table-wrap {
overflow-x: auto;
}
#new-user-promo .offer {
margin: 40px auto 0;
}
#new-user-promo .promo-desc {
font-size: 12px;
}
#new-user-promo .promo-note {
margin: 60px auto 0;
}
}
</style>
</head>
<body class="aifo-bg-primary" id="new-user-promo">
<div id="nav-container"></div>
<main class="promo-main">
<section class="promo-hero">
<div class="hero-content">
<p class="hero-markets">Prop trading · Forex · Crypto · XAU</p>
<h1 class="hero-title">The AIFO New User<br>Promotion</h1>
<div class="hero-coin-mobile" aria-hidden="true">
<img src="../assets/images/backgrounds/new-user-hero-coin-mobile.png" alt="" width="720" height="720" decoding="async">
</div>
<p class="hero-sub">
Join AIFO today and receive an exclusive, one-time <span class="hero-highlight">$50 USDT</span> bonus*
</p>
<a type="button" class="btn-promo">Claim Now</a>
<p class="hero-note">
*$50 USDT may be rewarded to eligible new users only after completing the tasks listed by AIFO via its website.
This is a one-time offer and is not available to existing, returning, or duplicate users. All rewards are subject to review,
verification, and approval by AIFO, and no payment is guaranteed.
</p>
</div>
<div class="hero-visual" aria-hidden="true">
<div class="hero-coin"></div>
</div>
</section>
<section class="promo-section promo-section--welcome">
<div class="promo-welcome-side-glow" aria-hidden="true"></div>
<h2 class="promo-title">Welcome <span>rewards</span></h2>
<p class="promo-desc">By becoming an AIFO trader, you will receive a one-time exclusive
payment of $50 USDT* paid directly to your account**</p>
<div class="offer">
<div>
<h3>Limited-time offer</h3>
<p>This offer is only available to the first <span class="hero-highlight">$50 USDT</span></p>
</div>
<a type="button" class="btn-promo">Claim now</a>
</div>
<p class="promo-note">
*$50 USDT may be rewarded to eligible newupleting the tasks listed by AIFO via itsoffer and is
not available to existing, returning, or **All rewards are subject to review, veriproval by AIFO, and no payment is
guaranteed. Selected users may also receipriority features, and additional incentito develop.
</p>
</section>
<section class="promo-section clain-section">
<h2 class="promo-title">How to <span>claim</span></h2>
<div class="claim-grid">
<article class="claim-item">
<img class="claim-step-mark" src="../assets/images/backgrounds/new-user-claim-step-01.png" width="120" height="120" alt="" decoding="async">
<p class="claim-text">Register an account with AIFO</p>
</article>
<article class="claim-item">
<img class="claim-step-mark" src="../assets/images/backgrounds/new-user-claim-step-02.png" width="120" height="120" alt="" decoding="async">
<p class="claim-text">Purchase any challenge</p>
</article>
<article class="claim-item">
<img class="claim-step-mark" src="../assets/images/backgrounds/new-user-claim-step-03.png" width="120" height="120" alt="" decoding="async">
<p class="claim-text">Claim the $50 USDT
reward within the
AIFO rewards panel</p>
</article>
</div>
<div class="btn-center"><button type="button" class="btn-promo">Join now</button></div>
</section>
<section class="promo-section">
<h2 class="promo-title">Choose your <span>challenge</span></h2>
<p class="promo-desc">Compare account sizes and core requirements before purchasing your evaluation.</p>
<div class="tier-tabs">
<button type="button" class="tier-btn is-active">1-step</button>
<button type="button" class="tier-btn">2-step</button>
<button type="button" class="tier-btn">Instant</button>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Account</th>
<th>$10K</th>
<th>$25K</th>
<th>$50K</th>
<th>$100K</th>
<th>$200K</th>
</tr>
</thead>
<tbody>
<tr><td>Entry Fee</td><td>$79</td><td>$149</td><td>$239</td><td>$429</td><td>$849</td></tr>
<tr><td>Profit Target</td><td>8%</td><td>8%</td><td>8%</td><td>8%</td><td>8%</td></tr>
<tr><td>Daily Loss</td><td>5%</td><td>5%</td><td>5%</td><td>5%</td><td>5%</td></tr>
<tr><td>Max Loss</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td><td>10%</td></tr>
<tr><td>Leverage</td><td>1:50</td><td>1:50</td><td>1:50</td><td>1:50</td><td>1:50</td></tr>
</tbody>
</table>
</div>
</section>
<section class="promo-section">
<h2 class="promo-title">Frequently asked <span>questions</span></h2>
<div class="faq-grid">
<div class="faq-question">How long does this event remain active?</div>
<div class="faq-question">Can existing users join new-user promotion?</div>
<div class="faq-question">When are rewards activated after purchase?</div>
<div class="faq-question">Can I upgrade challenge size during campaign?</div>
<div class="faq-question">Is payout split changed in this period?</div>
<div class="faq-question">Where can I check reward progress?</div>
</div>
</section>
</main>
<div id="footer-container"></div>
<script src="../assets/vendor/jquery/jquery-3.7.1.min.js"></script>
<script src="../assets/vendor/popper/popper.min.js"></script>
<script src="../assets/js/bootstrap/bootstrap.min.js"></script>
<script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
<script src="../assets/js/theme.js"></script>
<script src="/js/layout.js"></script>
</body>
</html>