520 lines
26 KiB
HTML
520 lines
26 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="{{LANG}}">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>{{TITLE}}</title>
|
|||
|
|
<meta name="description" content="{{META_DESC}}">
|
|||
|
|
<link rel="canonical" href="https://quixzoom.asia/{{LANG_CODE}}/">
|
|||
|
|
<!-- hreflang tags -->
|
|||
|
|
<link rel="alternate" hreflang="zh-CN" href="https://quixzoom.asia/zh-cn/">
|
|||
|
|
<link rel="alternate" hreflang="zh-TW" href="https://quixzoom.asia/zh-tw/">
|
|||
|
|
<link rel="alternate" hreflang="ja" href="https://quixzoom.asia/ja/">
|
|||
|
|
<link rel="alternate" hreflang="ko" href="https://quixzoom.asia/ko/">
|
|||
|
|
<link rel="alternate" hreflang="th" href="https://quixzoom.asia/th/">
|
|||
|
|
<link rel="alternate" hreflang="vi" href="https://quixzoom.asia/vi/">
|
|||
|
|
<link rel="alternate" hreflang="id" href="https://quixzoom.asia/id/">
|
|||
|
|
<link rel="alternate" hreflang="ms" href="https://quixzoom.asia/ms/">
|
|||
|
|
<link rel="alternate" hreflang="hi" href="https://quixzoom.asia/hi/">
|
|||
|
|
<link rel="alternate" hreflang="en" href="https://www.quixzoom.com/">
|
|||
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--bg: #FFFFFF;
|
|||
|
|
--bg-off: #F7F7F5;
|
|||
|
|
--text: #1a1a1a;
|
|||
|
|
--text-body: #3a3a3a;
|
|||
|
|
--text-muted: #6B6B6B;
|
|||
|
|
--blue: #0066FF;
|
|||
|
|
--blue-dark: #0052CC;
|
|||
|
|
--blue-pale: rgba(0,102,255,.07);
|
|||
|
|
--green: #00C853;
|
|||
|
|
--radius: 16px;
|
|||
|
|
--radius-lg: 24px;
|
|||
|
|
--shadow: 0 16px 48px rgba(0,0,0,.14);
|
|||
|
|
}
|
|||
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|||
|
|
html { scroll-behavior: smooth; }
|
|||
|
|
body {
|
|||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|||
|
|
font-size: 1rem; line-height: 1.65; color: var(--text-body);
|
|||
|
|
background: var(--bg); -webkit-font-smoothing: antialiased;
|
|||
|
|
}
|
|||
|
|
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
|
|||
|
|
h1 { font-size: clamp(2.75rem, 6vw, 5rem); font-weight: 900; letter-spacing: -.05em; line-height: 1; color: var(--text); }
|
|||
|
|
h2 { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; color: var(--text); }
|
|||
|
|
h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: var(--text); }
|
|||
|
|
|
|||
|
|
/* Nav */
|
|||
|
|
nav { position: sticky; top: 0; z-index: 300; background: var(--bg-off); border-bottom: 1px solid rgba(58,58,58,.06); }
|
|||
|
|
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 32px; }
|
|||
|
|
.nav-logo { font-size: 1.375rem; font-weight: 900; color: var(--text); letter-spacing: -.04em; text-decoration: none; }
|
|||
|
|
.nav-logo .x { color: var(--blue); }
|
|||
|
|
.nav-links { display: flex; align-items: center; gap: 32px; flex: 1; justify-content: center; }
|
|||
|
|
.nav-links a { color: rgba(58,58,58,.75); font-size: 1rem; font-weight: 500; transition: color .15s; text-decoration: none; }
|
|||
|
|
.nav-links a:hover { color: var(--text); }
|
|||
|
|
.btn-nav { background: var(--blue); color: #fff; border: none; border-radius: var(--radius-lg); padding: 10px 24px; font-size: 1rem; font-weight: 700; transition: background .15s; white-space: nowrap; cursor: pointer; }
|
|||
|
|
.btn-nav:hover { background: var(--blue-dark); }
|
|||
|
|
|
|||
|
|
/* Hero */
|
|||
|
|
#hero { background: var(--bg-off); min-height: calc(100vh - 68px); display: flex; align-items: center; padding: 80px 0 96px; }
|
|||
|
|
.hero-layout { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center; }
|
|||
|
|
.hero-inner { max-width: 560px; }
|
|||
|
|
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(58,58,58,.07); border: 1px solid rgba(58,58,58,.12); border-radius: 100px; padding: 8px 18px; font-size: .875rem; font-weight: 600; color: rgba(58,58,58,.88); margin-bottom: 36px; }
|
|||
|
|
.hero-h1 { color: var(--text); margin-bottom: 28px; }
|
|||
|
|
.hero-h1 em { font-style: normal; color: var(--blue); }
|
|||
|
|
.hero-sub { font-size: clamp(1.0625rem, 2vw, 1.25rem); color: rgba(58,58,58,.82); max-width: 640px; line-height: 1.6; margin-bottom: 44px; }
|
|||
|
|
.wl-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
|
|||
|
|
.wl-input { flex: 1; min-width: 280px; background: #fff; color: var(--text); border: 2.5px solid #fff; border-radius: var(--radius-lg); padding: 18px 28px; font-size: 1rem; outline: none; transition: border-color .15s, box-shadow .15s; }
|
|||
|
|
.wl-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,102,255,.18); }
|
|||
|
|
.wl-submit { background: var(--blue); color: #fff; border: none; border-radius: var(--radius-lg); padding: 18px 36px; font-size: 1rem; font-weight: 800; cursor: pointer; transition: background .15s; white-space: nowrap; }
|
|||
|
|
.wl-submit:hover { background: var(--blue-dark); }
|
|||
|
|
.wl-trust { font-size: .875rem; color: rgba(58,58,58,.65); margin-bottom: 20px; }
|
|||
|
|
.hero-stats-pill { display: flex; gap: 24px; margin-top: 32px; flex-wrap: wrap; }
|
|||
|
|
.hstat { text-align: left; }
|
|||
|
|
.hstat-num { font-size: 1.5rem; font-weight: 900; color: var(--text); letter-spacing: -.04em; line-height: 1; }
|
|||
|
|
.hstat-lbl { font-size: .75rem; color: rgba(58,58,58,.75); margin-top: 2px; }
|
|||
|
|
|
|||
|
|
/* Stats */
|
|||
|
|
#stats { background: var(--blue); padding: 56px 0; }
|
|||
|
|
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
|
|||
|
|
.stat-item { text-align: center; padding: 20px 16px; position: relative; }
|
|||
|
|
.stat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: rgba(255,255,255,.25); }
|
|||
|
|
.stat-value { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: #fff; letter-spacing: -.04em; line-height: 1; display: block; margin-bottom: 8px; }
|
|||
|
|
.stat-label { font-size: .9rem; color: rgba(255,255,255,.82); font-weight: 500; }
|
|||
|
|
|
|||
|
|
/* Sections */
|
|||
|
|
.section-pad { padding: 96px 0; }
|
|||
|
|
.section-header { text-align: center; margin-bottom: 64px; }
|
|||
|
|
.section-header h2 { color: var(--text); margin-bottom: 16px; }
|
|||
|
|
.section-header p { font-size: 1.125rem; color: var(--text-muted); max-width: 580px; margin: 0 auto; }
|
|||
|
|
|
|||
|
|
/* How it works */
|
|||
|
|
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
|
|||
|
|
.step-card { background: var(--bg-off); border-radius: var(--radius); padding: 40px 36px; }
|
|||
|
|
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--blue); color: #fff; border-radius: 50%; font-size: 1.375rem; font-weight: 900; margin-bottom: 24px; }
|
|||
|
|
.step-card h3 { color: var(--text); margin-bottom: 12px; }
|
|||
|
|
.step-card p { color: var(--text-muted); font-size: .9625rem; line-height: 1.6; }
|
|||
|
|
|
|||
|
|
/* Missions */
|
|||
|
|
.missions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
|||
|
|
.mission-card { background: var(--bg); border: 1.5px solid #E8E8E8; border-radius: var(--radius); padding: 32px 28px; }
|
|||
|
|
.mission-card:hover { border-color: rgba(0,102,255,.25); }
|
|||
|
|
.mission-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--bg-off); border-radius: 14px; margin-bottom: 20px; color: var(--blue); }
|
|||
|
|
.mission-card h3 { color: var(--text); margin-bottom: 10px; font-size: 1.125rem; }
|
|||
|
|
.mission-card p { color: var(--text-muted); font-size: .9rem; line-height: 1.55; margin-bottom: 18px; }
|
|||
|
|
.mission-chip { display: inline-block; background: var(--blue-pale); color: var(--blue); border-radius: 100px; padding: 5px 14px; font-size: .875rem; font-weight: 700; }
|
|||
|
|
|
|||
|
|
/* Earnings */
|
|||
|
|
.earnings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }
|
|||
|
|
.tier-card { background: var(--bg-off); border: 2px solid #E8E8E8; border-radius: var(--radius); padding: 36px 28px; text-align: center; }
|
|||
|
|
.tier-card.featured { background: var(--bg-off); border-color: var(--blue); transform: scale(1.03); }
|
|||
|
|
.tier-card h3 { font-size: 1.5rem; font-weight: 900; margin-bottom: 4px; }
|
|||
|
|
.tier-missions { font-size: .9rem; color: var(--text-muted); margin-bottom: 20px; font-weight: 500; }
|
|||
|
|
.tier-features { text-align: left; list-style: none; }
|
|||
|
|
.tier-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 1rem; color: var(--text-body); padding: 6px 0; }
|
|||
|
|
.tier-features li::before { content: '✓'; display: block; width: 18px; height: 18px; min-width: 18px; background: var(--green); color: #fff; border-radius: 50%; text-align: center; line-height: 18px; font-size: .75rem; margin-top: 2px; }
|
|||
|
|
|
|||
|
|
/* Landvex Authorization */
|
|||
|
|
#landvex { background: var(--bg-off); }
|
|||
|
|
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
|
|||
|
|
.auth-visual { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%); border-radius: var(--radius); padding: 48px; color: #fff; }
|
|||
|
|
.auth-visual h3 { color: #fff; margin-bottom: 16px; }
|
|||
|
|
.auth-visual p { color: rgba(255,255,255,.85); line-height: 1.6; margin-bottom: 24px; }
|
|||
|
|
.auth-benefits { list-style: none; }
|
|||
|
|
.auth-benefits li { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: rgba(255,255,255,.9); }
|
|||
|
|
.auth-benefits li::before { content: '★'; color: #FFD700; }
|
|||
|
|
.auth-steps { display: flex; flex-direction: column; gap: 20px; }
|
|||
|
|
.auth-step { display: flex; gap: 16px; align-items: flex-start; }
|
|||
|
|
.auth-step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
|
|||
|
|
.auth-step h4 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
|
|||
|
|
.auth-step p { font-size: .875rem; color: var(--text-muted); line-height: 1.5; }
|
|||
|
|
|
|||
|
|
/* FAQ */
|
|||
|
|
.faq-list { max-width: 760px; margin: 0 auto; }
|
|||
|
|
.faq-item { border: 1.5px solid #E8E8E8; border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
|
|||
|
|
.faq-item summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; font-size: 1rem; font-weight: 700; color: var(--text); list-style: none; gap: 16px; }
|
|||
|
|
.faq-item summary::-webkit-details-marker { display: none; }
|
|||
|
|
.faq-item summary::after { content: '+'; font-size: 1.5rem; color: var(--blue); transition: transform .15s; }
|
|||
|
|
.faq-item[open] summary::after { content: '−'; }
|
|||
|
|
.faq-answer { padding: 0 28px 24px; font-size: .9625rem; color: var(--text-body); line-height: 1.7; }
|
|||
|
|
|
|||
|
|
/* Footer */
|
|||
|
|
footer { background: var(--bg-off); border-top: 1px solid rgba(58,58,58,.07); padding: 64px 0 40px; }
|
|||
|
|
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
|
|||
|
|
.footer-brand .nav-logo { display: block; margin-bottom: 14px; font-size: 1.5rem; }
|
|||
|
|
.footer-tagline { color: rgba(58,58,58,.75); font-size: .9rem; line-height: 1.55; margin-bottom: 20px; }
|
|||
|
|
.footer-col h4 { color: var(--text); font-size: .875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; }
|
|||
|
|
.footer-col ul { list-style: none; }
|
|||
|
|
.footer-col ul li { margin-bottom: 10px; }
|
|||
|
|
.footer-col ul li a { color: rgba(58,58,58,.75); font-size: .9rem; text-decoration: none; transition: color .15s; }
|
|||
|
|
.footer-col ul li a:hover { color: var(--text); }
|
|||
|
|
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid rgba(58,58,58,.07); }
|
|||
|
|
.footer-copyright { color: rgba(58,58,58,.6); font-size: .875rem; }
|
|||
|
|
.lang-switcher { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
|
|||
|
|
.lang-switcher a { color: rgba(58,58,58,.75); font-size: .875rem; font-weight: 600; padding: 4px 8px; border-radius: 8px; text-decoration: none; transition: color .15s, background .15s; }
|
|||
|
|
.lang-switcher a:hover { color: var(--text); background: rgba(58,58,58,.07); }
|
|||
|
|
.lang-switcher a.active { color: var(--text); background: rgba(0,102,255,.25); }
|
|||
|
|
|
|||
|
|
/* Responsive */
|
|||
|
|
@media(max-width: 960px) {
|
|||
|
|
.hero-layout { grid-template-columns: 1fr; gap: 40px; }
|
|||
|
|
.auth-grid { grid-template-columns: 1fr; }
|
|||
|
|
.footer-inner { grid-template-columns: 1fr 1fr; }
|
|||
|
|
}
|
|||
|
|
@media(max-width: 768px) {
|
|||
|
|
.steps-grid, .missions-grid, .earnings-grid { grid-template-columns: 1fr; }
|
|||
|
|
.stats-grid { grid-template-columns: repeat(2, 1fr); }
|
|||
|
|
.nav-links { display: none; }
|
|||
|
|
.footer-inner { grid-template-columns: 1fr; }
|
|||
|
|
.footer-bottom { flex-direction: column; align-items: flex-start; }
|
|||
|
|
}
|
|||
|
|
@media(max-width: 600px) {
|
|||
|
|
.wl-row { flex-direction: column; align-items: stretch; }
|
|||
|
|
.wl-input { min-width: 0; }
|
|||
|
|
.hero-stats-pill { flex-wrap: wrap; gap: 16px 24px; }
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<a href="#main-content" style="position:absolute;top:-100px;left:16px;background:var(--blue);color:#fff;padding:10px 20px;border-radius:0 0 8px 8px;font-weight:700;font-size:.9rem;z-index:9999;" onfocus="this.style.top='0'" onblur="this.style.top='-100px'">Skip to main content</a>
|
|||
|
|
|
|||
|
|
<nav>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="nav-inner">
|
|||
|
|
<a href="/" class="nav-logo">qui<span class="x">X</span>zoom</a>
|
|||
|
|
<div class="nav-links">
|
|||
|
|
<a href="#how">{{NAV_HOW}}</a>
|
|||
|
|
<a href="#missions">{{NAV_MISSIONS}}</a>
|
|||
|
|
<a href="#earnings">{{NAV_EARNINGS}}</a>
|
|||
|
|
<a href="#landvex">{{NAV_LANDVEX}}</a>
|
|||
|
|
<a href="#faq">{{NAV_FAQ}}</a>
|
|||
|
|
</div>
|
|||
|
|
<div style="display:flex;align-items:center;gap:10px;flex-shrink:0">
|
|||
|
|
<button class="btn-nav" onclick="document.getElementById('wl-email').focus();document.getElementById('wl-email').scrollIntoView({behavior:'smooth'})">{{CTA_START}}</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<main id="main-content">
|
|||
|
|
<!-- HERO -->
|
|||
|
|
<section id="hero">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="hero-layout">
|
|||
|
|
<div class="hero-inner">
|
|||
|
|
<div class="hero-badge">{{HERO_BADGE}}</div>
|
|||
|
|
<h1 class="hero-h1">{{HERO_H1}}<br><em>{{HERO_H1_EMPH}}</em></h1>
|
|||
|
|
<p class="hero-sub">{{HERO_SUB}}</p>
|
|||
|
|
<form onsubmit="event.preventDefault();" novalidate>
|
|||
|
|
<div class="wl-row">
|
|||
|
|
<input type="email" id="wl-email" class="wl-input" placeholder="{{EMAIL_PLACEHOLDER}}" required autocomplete="email">
|
|||
|
|
<button type="submit" class="wl-submit">{{CTA_START}} →</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
<p class="wl-trust">{{TRUST_LINE}}</p>
|
|||
|
|
<div class="hero-stats-pill">
|
|||
|
|
<div class="hstat">
|
|||
|
|
<div class="hstat-num">{{STAT1_NUM}}</div>
|
|||
|
|
<div class="hstat-lbl">{{STAT1_LBL}}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="hstat">
|
|||
|
|
<div class="hstat-num">{{STAT2_NUM}}</div>
|
|||
|
|
<div class="hstat-lbl">{{STAT2_LBL}}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="hstat">
|
|||
|
|
<div class="hstat-num">{{STAT3_NUM}}</div>
|
|||
|
|
<div class="hstat-lbl">{{STAT3_LBL}}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="hero-visual" style="display:flex;justify-content:center;align-items:center;">
|
|||
|
|
<div style="width:240px;height:480px;background:var(--bg-off);border-radius:36px;border:2px solid rgba(58,58,58,.12);box-shadow:0 40px 80px rgba(0,0,0,.6);position:relative;overflow:hidden;">
|
|||
|
|
<div style="position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:24px;background:var(--bg-off);border-radius:0 0 16px 16px;z-index:10;"></div>
|
|||
|
|
<div style="position:absolute;inset:0;background:linear-gradient(160deg,#1a2535 0%,#1e3a2f 40%,#162030 100%);border-radius:34px;overflow:hidden;display:flex;flex-direction:column;">
|
|||
|
|
<div style="height:40px;background:#f5f5f5;display:flex;align-items:flex-end;justify-content:space-between;padding:0 16px 6px;">
|
|||
|
|
<span style="color:rgba(58,58,58,.9);font-size:.65rem;font-weight:700;">09:41</span>
|
|||
|
|
</div>
|
|||
|
|
<div style="flex:1;position:relative;overflow:hidden;">
|
|||
|
|
<div style="position:absolute;bottom:0;left:0;right:0;background:#fff;border-radius:20px 20px 0 0;padding:16px;box-shadow:0 -4px 24px rgba(0,0,0,.3);">
|
|||
|
|
<div style="font-size:.7rem;font-weight:800;color:var(--text);margin-bottom:2px;">{{PHONE_MISSION}}</div>
|
|||
|
|
<div style="font-size:.6rem;color:#3d3d3d;margin-bottom:8px;">{{PHONE_ADDR}}</div>
|
|||
|
|
<div style="display:flex;justify-content:space-between;align-items:center;">
|
|||
|
|
<div>
|
|||
|
|
<div style="font-size:.85rem;font-weight:900;color:#0066FF;">{{PHONE_REWARD}}</div>
|
|||
|
|
<div style="font-size:.58rem;color:#4a4a4a;margin-top:4px;">{{PHONE_META}}</div>
|
|||
|
|
</div>
|
|||
|
|
<button style="background:#0066FF;color:#fff;border:none;border-radius:12px;padding:6px 12px;font-size:.6rem;font-weight:700;">Claim →</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- STATS -->
|
|||
|
|
<section id="stats">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="stats-grid">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-value">{{STATS_1_VAL}}</span>
|
|||
|
|
<span class="stat-label">{{STATS_1_LBL}}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-value">{{STATS_2_VAL}}</span>
|
|||
|
|
<span class="stat-label">{{STATS_2_LBL}}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-value">{{STATS_3_VAL}}</span>
|
|||
|
|
<span class="stat-label">{{STATS_3_LBL}}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-value">{{STATS_4_VAL}}</span>
|
|||
|
|
<span class="stat-label">{{STATS_4_LBL}}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- HOW IT WORKS -->
|
|||
|
|
<section id="how" class="section-pad">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h2>{{HOW_TITLE}}</h2>
|
|||
|
|
<p>{{HOW_SUB}}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="steps-grid">
|
|||
|
|
<div class="step-card">
|
|||
|
|
<div class="step-number">1</div>
|
|||
|
|
<h3>{{STEP1_TITLE}}</h3>
|
|||
|
|
<p>{{STEP1_DESC}}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="step-card">
|
|||
|
|
<div class="step-number">2</div>
|
|||
|
|
<h3>{{STEP2_TITLE}}</h3>
|
|||
|
|
<p>{{STEP2_DESC}}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="step-card">
|
|||
|
|
<div class="step-number">3</div>
|
|||
|
|
<h3>{{STEP3_TITLE}}</h3>
|
|||
|
|
<p>{{STEP3_DESC}}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- MISSIONS -->
|
|||
|
|
<section id="missions" class="section-pad" style="background:var(--bg-off);">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h2>{{MISSIONS_TITLE}}</h2>
|
|||
|
|
<p>{{MISSIONS_SUB}}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="missions-grid">
|
|||
|
|
<div class="mission-card">
|
|||
|
|
<div class="mission-icon">📷</div>
|
|||
|
|
<h3>{{M1_TITLE}}</h3>
|
|||
|
|
<p>{{M1_DESC}}</p>
|
|||
|
|
<span class="mission-chip">{{M1_CHIP}}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="mission-card">
|
|||
|
|
<div class="mission-icon">🏢</div>
|
|||
|
|
<h3>{{M2_TITLE}}</h3>
|
|||
|
|
<p>{{M2_DESC}}</p>
|
|||
|
|
<span class="mission-chip">{{M2_CHIP}}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="mission-card">
|
|||
|
|
<div class="mission-icon">🛣️</div>
|
|||
|
|
<h3>{{M3_TITLE}}</h3>
|
|||
|
|
<p>{{M3_DESC}}</p>
|
|||
|
|
<span class="mission-chip">{{M3_CHIP}}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- EARNINGS -->
|
|||
|
|
<section id="earnings" class="section-pad">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h2>{{EARNINGS_TITLE}}</h2>
|
|||
|
|
<p>{{EARNINGS_SUB}}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="earnings-grid">
|
|||
|
|
<div class="tier-card">
|
|||
|
|
<h3>{{TIER1_NAME}}</h3>
|
|||
|
|
<div class="tier-missions">{{TIER1_MISSIONS}}</div>
|
|||
|
|
<ul class="tier-features">
|
|||
|
|
<li>{{TIER1_F1}}</li>
|
|||
|
|
<li>{{TIER1_F2}}</li>
|
|||
|
|
<li>{{TIER1_F3}}</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="tier-card featured">
|
|||
|
|
<h3>{{TIER2_NAME}}</h3>
|
|||
|
|
<div class="tier-missions">{{TIER2_MISSIONS}}</div>
|
|||
|
|
<ul class="tier-features">
|
|||
|
|
<li>{{TIER2_F1}}</li>
|
|||
|
|
<li>{{TIER2_F2}}</li>
|
|||
|
|
<li>{{TIER2_F3}}</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="tier-card">
|
|||
|
|
<h3>{{TIER3_NAME}}</h3>
|
|||
|
|
<div class="tier-missions">{{TIER3_MISSIONS}}</div>
|
|||
|
|
<ul class="tier-features">
|
|||
|
|
<li>{{TIER3_F1}}</li>
|
|||
|
|
<li>{{TIER3_F2}}</li>
|
|||
|
|
<li>{{TIER3_F3}}</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- LANDVEX AUTHORIZATION -->
|
|||
|
|
<section id="landvex" class="section-pad">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h2>{{AUTH_TITLE}}</h2>
|
|||
|
|
<p>{{AUTH_SUB}}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="auth-grid">
|
|||
|
|
<div class="auth-visual">
|
|||
|
|
<h3>{{AUTH_VISUAL_TITLE}}</h3>
|
|||
|
|
<p>{{AUTH_VISUAL_DESC}}</p>
|
|||
|
|
<ul class="auth-benefits">
|
|||
|
|
<li>{{AUTH_B1}}</li>
|
|||
|
|
<li>{{AUTH_B2}}</li>
|
|||
|
|
<li>{{AUTH_B3}}</li>
|
|||
|
|
<li>{{AUTH_B4}}</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="auth-steps">
|
|||
|
|
<div class="auth-step">
|
|||
|
|
<div class="auth-step-num">1</div>
|
|||
|
|
<div>
|
|||
|
|
<h4>{{AUTH_S1_TITLE}}</h4>
|
|||
|
|
<p>{{AUTH_S1_DESC}}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="auth-step">
|
|||
|
|
<div class="auth-step-num">2</div>
|
|||
|
|
<div>
|
|||
|
|
<h4>{{AUTH_S2_TITLE}}</h4>
|
|||
|
|
<p>{{AUTH_S2_DESC}}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="auth-step">
|
|||
|
|
<div class="auth-step-num">3</div>
|
|||
|
|
<div>
|
|||
|
|
<h4>{{AUTH_S3_TITLE}}</h4>
|
|||
|
|
<p>{{AUTH_S3_DESC}}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="auth-step">
|
|||
|
|
<div class="auth-step-num">4</div>
|
|||
|
|
<div>
|
|||
|
|
<h4>{{AUTH_S4_TITLE}}</h4>
|
|||
|
|
<p>{{AUTH_S4_DESC}}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top:8px;">
|
|||
|
|
<a href="https://www.quixzoom.com/authorization" class="btn-nav" style="display:inline-block;text-decoration:none;">{{AUTH_CTA}}</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- FAQ -->
|
|||
|
|
<section id="faq" class="section-pad" style="background:var(--bg);">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<h2>{{FAQ_TITLE}}</h2>
|
|||
|
|
<p>{{FAQ_SUB}}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="faq-list">
|
|||
|
|
<details class="faq-item">
|
|||
|
|
<summary>{{FAQ_Q1}}</summary>
|
|||
|
|
<div class="faq-answer">{{FAQ_A1}}</div>
|
|||
|
|
</details>
|
|||
|
|
<details class="faq-item">
|
|||
|
|
<summary>{{FAQ_Q2}}</summary>
|
|||
|
|
<div class="faq-answer">{{FAQ_A2}}</div>
|
|||
|
|
</details>
|
|||
|
|
<details class="faq-item">
|
|||
|
|
<summary>{{FAQ_Q3}}</summary>
|
|||
|
|
<div class="faq-answer">{{FAQ_A3}}</div>
|
|||
|
|
</details>
|
|||
|
|
<details class="faq-item">
|
|||
|
|
<summary>{{FAQ_Q4}}</summary>
|
|||
|
|
<div class="faq-answer">{{FAQ_A4}}</div>
|
|||
|
|
</details>
|
|||
|
|
<details class="faq-item">
|
|||
|
|
<summary>{{FAQ_Q5}}</summary>
|
|||
|
|
<div class="faq-answer">{{FAQ_A5}}</div>
|
|||
|
|
</details>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<!-- FOOTER -->
|
|||
|
|
<footer>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="footer-inner">
|
|||
|
|
<div class="footer-brand">
|
|||
|
|
<a href="/" class="nav-logo">qui<span class="x">X</span>zoom</a>
|
|||
|
|
<p class="footer-tagline">{{FOOTER_TAGLINE}}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer-col">
|
|||
|
|
<h4>{{FOOTER_COL1_TITLE}}</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="#how">{{FOOTER_COL1_L1}}</a></li>
|
|||
|
|
<li><a href="#missions">{{FOOTER_COL1_L2}}</a></li>
|
|||
|
|
<li><a href="#earnings">{{FOOTER_COL1_L3}}</a></li>
|
|||
|
|
<li><a href="#landvex">{{FOOTER_COL1_L4}}</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer-col">
|
|||
|
|
<h4>{{FOOTER_COL2_TITLE}}</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="https://www.quixzoom.com/for-organisations">{{FOOTER_COL2_L1}}</a></li>
|
|||
|
|
<li><a href="https://www.quixzoom.com/pricing">{{FOOTER_COL2_L2}}</a></li>
|
|||
|
|
<li><a href="https://www.quixzoom.com/developer">{{FOOTER_COL2_L3}}</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer-col">
|
|||
|
|
<h4>{{FOOTER_COL3_TITLE}}</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="https://www.quixzoom.com/support">{{FOOTER_COL3_L1}}</a></li>
|
|||
|
|
<li><a href="https://www.quixzoom.com/privacy">{{FOOTER_COL3_L2}}</a></li>
|
|||
|
|
<li><a href="https://www.quixzoom.com/terms">{{FOOTER_COL3_L3}}</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer-bottom">
|
|||
|
|
<div class="footer-copyright">{{COPYRIGHT}}</div>
|
|||
|
|
<div class="lang-switcher">
|
|||
|
|
<span style="color:rgba(58,58,58,.75);font-size:.875rem;margin-right:4px;">{{LANG_LABEL}}</span>
|
|||
|
|
<a href="/zh-cn/">中文</a>
|
|||
|
|
<a href="/zh-tw/">繁中</a>
|
|||
|
|
<a href="/ja/">日本語</a>
|
|||
|
|
<a href="/ko/">한국어</a>
|
|||
|
|
<a href="/th/">ไทย</a>
|
|||
|
|
<a href="/vi/">Tiếng Việt</a>
|
|||
|
|
<a href="/id/">Bahasa</a>
|
|||
|
|
<a href="/ms/">Melayu</a>
|
|||
|
|
<a href="/hi/">हिन्दी</a>
|
|||
|
|
<a href="/en/">EN</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
</body>
|
|||
|
|
</html>
|