From 3f96ef802e1a63ab9399a879c3978bdcad34e4e0 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Wed, 13 Aug 2025 07:11:15 +0000 Subject: [PATCH] Create landing page for Aurora Finance with responsive design Co-authored-by: 694462396 <694462396@qq.com> --- index.html | 340 +++++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 36 ++++++ styles.css | 255 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 631 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..1c32424 --- /dev/null +++ b/index.html @@ -0,0 +1,340 @@ + + + + + + + Aurora Finance — 现代金融服务 + + + + + + + + + + + + + + +
+
+ + + AuroraFinance + + +
+ 预约咨询 +
+
+
+ +
+ +
+
+
+
+ + 企业级 · 数字金融解决方案 +
+

+ 以科技驱动的下一代金融服务 +

+

+ 资产管理、风险控制、支付清结算与合规风控的一体化平台。更快响应、更高安全、更优体验。 +

+
+ 立即开始 + 了解更多 +
+
+
+
$12B+
+
管理资产规模
+
+
+
99.99%
+
系统可用性
+
+
+
120ms
+
交易响应延迟
+
+
+
+
+
+
+ 实时资金流 + LIVE +
+
+ + + + + + + + + + + + + + + +
+
+
+ 今日净流入 + $8.7M +
+
+ 风控拦截 + 1,284 +
+
+
+
+
+
+ + +
+
+

关键数据

+

以数据为依据，验证可靠与高效

+
+
+
+
日交易额
+
$1.2B
+
+8.3%
+
+
+
合规通过率
+
98.7%
+
稳健
+
+
+
客户满意度
+
4.9/5
+
NPS 76
+
+
+
覆盖市场
+
32+
+
全球
+
+
+
+ + +
+
+

核心服务

+

覆盖机构与企业级金融业务的全链条能力

+
+
+
+
+ +
+

资产管理

+

多策略资产配置引擎，支持自动再平衡、风险预算与绩效归因。

+ 了解详情 +
+
+
+ +
+

风险控制

+

实时风控规则、异常检测与自动化处置，保障业务稳健运行。

+ 了解详情 +
+
+
+ +
+

支付清结算

+

高吞吐、低延迟支付通道，覆盖多币种、多渠道清结算。

+ 了解详情 +
+
+
+ +
+

合规模块

+

KYC/AML、审计追踪与数据留痕，满足各地合规要求。

+ 了解详情 +
+
+
+ +
+

量化引擎

+

低代码策略回测与执行框架，毫秒级下单与风控协同。

+ 了解详情 +
+
+
+ +
+

数据洞察

+

跨域数据融合、可视化洞察与AI驱动的预测分析。

+ 了解详情 +
+
+
+ + +
+
+

交付流程

+

标准化流程，快速落地业务价值

+
+
+
+ 01 +

需求梳理

+

厘清目标与约束，制定里程碑与评估指标。

+
+
+ 02 +

方案设计

+

架构与合规双评审，确保安全与扩展性。

+
+
+ 03 +

实施交付

+

灰度上线、A/B 验证与性能调优。

+
+
+ 04 +

持续运营

+

SLA 保障与监管跟进，持续价值创造。

+
+
+
+ + +
+
+

为什么选择我们

+

专业与科技的平衡，成就可靠与高效

+
+
+
+
+ +
+

安全为先

+

零信任安全架构、密钥托管与加密审计，全面守护资产。

+
+
+
+ +
+

高性能

+

分布式计算与内存队列，极致吞吐与低抖动延迟。

+
+
+
+ +
+

可扩展

+

模块化能力中心与开放 API，灵活适配业务增长。

+
+
+
+ + +
+
+

联系咨询

+

留下您的需求，我们将在 24 小时内与您沟通

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +

提交即表示同意《隐私政策》

+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..1fc8c3b --- /dev/null +++ b/script.js @@ -0,0 +1,36 @@ +document.addEventListener('DOMContentLoaded', () => { + // Animate.css on-scroll, play once + const observer = new IntersectionObserver((entries, obs) => { + entries.forEach(entry => { + if (!entry.isIntersecting) return; + const el = entry.target; + if (el.dataset.animated === 'true') { + obs.unobserve(el); + return; + } + const anim = el.dataset.animate || 'fadeInUp'; + const delay = el.dataset.delay || '0s'; + el.style.setProperty('--animate-delay', delay); + el.classList.add('animate__animated', `animate__${anim}`); + el.dataset.animated = 'true'; + // ensure it only plays once + obs.unobserve(el); + }); + }, { root: null, threshold: 0.15 }); + + document.querySelectorAll('[data-animate]').forEach(el => observer.observe(el)); + + // Navbar scrolled shadow state + const navbar = document.querySelector('.navbar'); + const updateNav = () => { + if (!navbar) return; + if (window.scrollY > 10) navbar.classList.add('scrolled'); + else navbar.classList.remove('scrolled'); + }; + window.addEventListener('scroll', updateNav, { passive: true }); + updateNav(); + + // Footer dynamic year + const year = document.getElementById('year'); + if (year) year.textContent = new Date().getFullYear(); +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..6a5352e --- /dev/null +++ b/styles.css @@ -0,0 +1,255 @@ +:root { + --bg: #0f172a; /* slate-900 */ + --text: #e5e7eb; /* gray-200 */ + --muted: #94a3b8; /* slate-400 */ + --panel: rgba(255, 255, 255, 0.06); + --panel-strong: rgba(255, 255, 255, 0.1); + --border: rgba(255, 255, 255, 0.12); + --accent-indigo: #6366f1; + --accent-cyan: #22d3ee; + --accent-pink: #f472b6; + --accent-emerald: #22c55e; + --glow: 0 10px 30px rgba(99, 102, 241, 0.35), 0 2px 10px rgba(34, 211, 238, 0.25); +} + +* { box-sizing: border-box; } +html, body { height: 100%; } +body { + margin: 0; + font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; + color: var(--text); + background: var(--bg); + overflow-x: hidden; +} + +.container { + width: min(1200px, 92%); + margin-inline: auto; +} + +/* Background accents: layered radial-gradients */ +.bg-accents { + position: fixed; + inset: 0; + pointer-events: none; + z-index: 0; + background: radial-gradient(1000px 600px at -10% -20%, rgba(99, 102, 241, 0.08), rgba(0,0,0,0) 60%), + radial-gradient(900px 600px at 110% -10%, rgba(34, 211, 238, 0.08), rgba(0,0,0,0) 55%), + radial-gradient(800px 500px at -10% 110%, rgba(244, 114, 182, 0.07), rgba(0,0,0,0) 55%), + radial-gradient(900px 600px at 110% 110%, rgba(34, 197, 94, 0.06), rgba(0,0,0,0) 55%); + filter: saturate(120%); +} + +/* Floating orbs */ +.orbs { position: fixed; inset: 0; pointer-events: none; z-index: 1; } +.orb { + position: absolute; + width: 280px; height: 280px; + border-radius: 50%; + background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0.0) 60%), + radial-gradient(circle at 70% 70%, rgba(255,255,255,0.15), rgba(255,255,255,0.0) 60%), + radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.35), rgba(34, 211, 238, 0.25) 40%, rgba(0,0,0,0) 70%); + filter: blur(10px); + opacity: 0.28; + animation: drift 28s ease-in-out infinite alternate, floaty 18s ease-in-out infinite; +} +.orb-1 { top: 10%; left: 5%; transform: translateZ(0); } +.orb-2 { top: 65%; left: 8%; width: 220px; height: 220px; animation-duration: 24s, 16s; } +.orb-3 { top: 20%; right: 8%; width: 240px; height: 240px; animation-duration: 26s, 14s; } +.orb-4 { bottom: 12%; right: 6%; width: 300px; height: 300px; animation-duration: 32s, 20s; } +.orb-5 { top: 45%; left: 45%; width: 180px; height: 180px; opacity: 0.22; } +.orb-6 { bottom: 35%; left: 60%; width: 230px; height: 230px; opacity: 0.24; } + +@keyframes drift { from { transform: translate(-20px, -10px) scale(0.98); } to { transform: translate(20px, 10px) scale(1.03); } } +@keyframes floaty { 0% { filter: blur(8px); } 50% { filter: blur(14px); } 100% { filter: blur(8px); } } + +/* Glassmorphism base */ +.glass { + background: var(--panel); + border: 1px solid var(--border); + border-top-color: rgba(255, 255, 255, 0.18); + border-left-color: rgba(255, 255, 255, 0.12); + box-shadow: 0 10px 20px rgba(0,0,0,0.35); + backdrop-filter: blur(16px) saturate(120%); + -webkit-backdrop-filter: blur(16px) saturate(120%); +} + +/* Interactive hover effects */ +.interactive { transition: transform 320ms cubic-bezier(.2,.6,.2,1), box-shadow 320ms, filter 320ms; will-change: transform, filter; } +.interactive:hover { transform: translateY(-4px) scale(1.01); filter: brightness(1.05); box-shadow: var(--glow); } +.interactive:active { transform: translateY(-1px) scale(0.99); filter: brightness(0.98); } + +/* Navbar */ +.navbar { + position: sticky; top: 0; z-index: 50; + backdrop-filter: blur(10px) saturate(120%); + -webkit-backdrop-filter: blur(10px) saturate(120%); +} +.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; } +.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } +.brand-mark { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--accent-cyan), var(--accent-indigo)); box-shadow: 0 0 20px rgba(34, 211, 238, 0.55), 0 0 32px rgba(99, 102, 241, 0.45); } +.brand-name { font-weight: 700; letter-spacing: 0.2px; } +.brand-accent { color: var(--accent-indigo); margin-left: 2px; } + +.nav-links { display: none; gap: 18px; } +.nav-link { color: var(--muted); text-decoration: none; position: relative; } +.nav-link::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0%; height: 2px; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-indigo)); transition: width 320ms; border-radius: 999px; } +.nav-link:hover { color: var(--text); } +.nav-link:hover::after { width: 100%; } + +.nav-cta .btn { padding: 10px 16px; } + +.navbar.scrolled { box-shadow: 0 6px 16px rgba(0,0,0,0.35); } + +@media (min-width: 860px) { + .nav-links { display: flex; } +} + +/* Sections */ +.section { position: relative; z-index: 2; padding: 80px 0; } +.section-header { text-align: center; margin-bottom: 28px; } +.section-title { font-size: clamp(24px, 3vw, 34px); margin: 0 0 8px; } +.section-subtitle { color: var(--muted); margin: 0; } + +/* Hero */ +.hero { padding-top: 110px; padding-bottom: 80px; } +.hero-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; } +.hero-title { font-size: clamp(32px, 6vw, 54px); line-height: 1.1; margin: 10px 0 16px; } +.gradient-text { background: linear-gradient(90deg, #e2e8f0, #c7d2fe 40%, #5eead4 70%, #f0abfc 100%); + -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 20px rgba(99,102,241,0.25)); } +.hero-subtitle { color: var(--muted); font-size: 16px; max-width: 58ch; } +.hero-actions { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; } + +.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; font-size: 12px; color: #dbeafe; border: 1px solid rgba(99, 102, 241, 0.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); } +.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--accent-cyan), var(--accent-indigo)); box-shadow: 0 0 10px rgba(34,211,238,0.8); } + +.hero-visual { display: grid; place-items: center; } +.hero-card { width: min(560px, 100%); padding: 18px; border-radius: 16px; } +.chart-header { display: flex; align-items: center; justify-content: space-between; color: #c7d2fe; margin-bottom: 10px; } +.status-pill { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: rgba(34,211,238,0.12); color: #a5f3fc; border: 1px solid rgba(34,211,238,0.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); } +.chart-area { background: radial-gradient(80% 120% at 50% -20%, rgba(99,102,241,0.18), rgba(0,0,0,0)); border-radius: 12px; padding: 8px; } +.mini-chart { width: 100%; height: auto; display: block; } +.metric-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } +.metric { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: 10px 12px; border-radius: 12px; } +.metric-label { color: var(--muted); font-size: 12px; } +.metric-value { font-weight: 600; } + +.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } +.stat { padding: 14px; border-radius: 12px; text-align: center; } +.stat-value { font-size: 22px; font-weight: 700; } +.stat-label { color: var(--muted); font-size: 12px; margin-top: 4px; } + +@media (min-width: 960px) { + .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 36px; } +} + +/* Stats Section */ +.stats-grid { display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 16px; margin-top: 14px; } +.stat-card { position: relative; padding: 20px; border-radius: 16px; overflow: hidden; } +.stat-card::after { content: ""; position: absolute; inset: -1px; border-radius: 16px; pointer-events: none; background: radial-gradient(60% 60% at 15% 10%, rgba(34,211,238,0.15), rgba(0,0,0,0)), radial-gradient(70% 70% at 85% 90%, rgba(99,102,241,0.15), rgba(0,0,0,0)); opacity: 0; transition: opacity 320ms; } +.stat-card:hover::after { opacity: 1; } +.stat-card-label { color: var(--muted); font-size: 12px; } +.stat-card-value { font-size: clamp(24px, 4vw, 36px); font-weight: 700; margin-top: 6px; } +.stat-card-trend { margin-top: 6px; font-size: 12px; color: #d1fae5; } +.stat-card-trend.positive { color: #bbf7d0; text-shadow: 0 0 10px rgba(34,197,94,0.5); } + +@media (min-width: 760px) { + .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } +} +@media (min-width: 1080px) { + .stats-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } +} + +/* Buttons */ +.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 12px 18px; text-decoration: none; border: 1px solid rgba(255,255,255,0.12); cursor: pointer; color: var(--text); background: rgba(255,255,255,0.06); } +.btn:hover { box-shadow: var(--glow); } +.btn-primary { background: linear-gradient(180deg, rgba(99,102,241,0.28), rgba(99,102,241,0.18)); border-color: rgba(99,102,241,0.45); } +.btn-ghost { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: #d1d5db; } + +/* Cards grid */ +.cards-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px; margin-top: 20px; } +.card { padding: 18px; border-radius: 16px; position: relative; overflow: hidden; } +.card-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; margin-bottom: 10px; color: white; } +.icon-indigo { background: linear-gradient(135deg, rgba(99,102,241,0.6), rgba(99,102,241,0.3)); } +.icon-cyan { background: linear-gradient(135deg, rgba(34,211,238,0.6), rgba(34,211,238,0.3)); } +.icon-pink { background: linear-gradient(135deg, rgba(244,114,182,0.6), rgba(244,114,182,0.3)); } +.icon-emerald { background: linear-gradient(135deg, rgba(34,197,94,0.6), rgba(34,197,94,0.3)); } +.card-title { margin: 4px 0 6px; font-size: 18px; } +.card-desc { margin: 0 0 12px; color: var(--muted); } +.card-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: #c7d2fe; } +.card-link:hover { text-shadow: 0 0 10px rgba(99,102,241,0.6); } + +@media (min-width: 760px) { + .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} +@media (min-width: 1080px) { + .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } +} + +/* Steps */ +.steps { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px; margin-top: 14px; } +.step { padding: 18px; border-radius: 16px; position: relative; } +.step::before { content: ""; position: absolute; inset: -1px; border-radius: 16px; pointer-events: none; background: radial-gradient(60% 60% at 10% 10%, rgba(99,102,241,0.12), rgba(0,0,0,0)); opacity: 0; transition: opacity 320ms; } +.step:hover::before { opacity: 1; } +.step-index { font-weight: 700; color: #c7d2fe; letter-spacing: 1px; } +.step-title { margin: 6px 0; font-size: 18px; } +.step-desc { margin: 0; color: var(--muted); } + +@media (min-width: 860px) { + .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } +} + +/* Features */ +.features-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px; margin-top: 14px; } +.feature { padding: 18px; border-radius: 16px; } +.feature-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; margin-bottom: 8px; color: white; background: linear-gradient(135deg, rgba(99,102,241,0.35), rgba(34,211,238,0.28)); box-shadow: 0 10px 30px rgba(99,102,241,0.28); } +.feature-title { margin: 6px 0; font-size: 18px; } +.feature-desc { margin: 0; color: var(--muted); } + +@media (min-width: 860px) { + .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } +} + +/* Contact */ +.contact-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 14px; align-items: start; } +.contact-form { padding: 18px; border-radius: 16px; } +.contact-aside { } +.aside-card { padding: 18px; border-radius: 16px; } +.contact-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; color: var(--muted); } +.dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 8px; } +.dot-indigo { background: var(--accent-indigo); box-shadow: 0 0 12px rgba(99,102,241,0.7); } +.dot-cyan { background: var(--accent-cyan); box-shadow: 0 0 12px rgba(34,211,238,0.7); } +.dot-emerald { background: var(--accent-emerald); box-shadow: 0 0 12px rgba(34,197,94,0.6); } + +.form-row { display: grid; gap: 8px; margin-bottom: 12px; } +.form-row.full { grid-column: 1 / -1; } +label { font-size: 12px; color: #c7d2fe; } +input, select, textarea { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: var(--text); padding: 12px 12px; border-radius: 10px; outline: none; transition: border-color 240ms, box-shadow 240ms; } +input::placeholder, textarea::placeholder { color: #64748b; } +input:focus, select:focus, textarea:focus { border-color: rgba(99,102,241,0.55); box-shadow: 0 0 0 4px rgba(99,102,241,0.18); } +.form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } +.form-note { color: var(--muted); font-size: 12px; margin: 0; } + +@media (min-width: 980px) { + .contact-grid { grid-template-columns: 1.1fr 0.9fr; } +} + +/* Footer */ +.footer { margin-top: 40px; } +.footer-inner { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; padding: 18px 0; } +.footer-brand { display: inline-flex; align-items: center; gap: 10px; } +.footer-links { display: flex; gap: 16px; flex-wrap: wrap; } +.footer-links a { color: var(--muted); text-decoration: none; } +.footer-links a:hover { color: var(--text); text-shadow: 0 0 12px rgba(99,102,241,0.45); } + +@media (min-width: 760px) { + .footer-inner { grid-template-columns: auto 1fr auto; } +} + +/* One-time animation helper */ +.animate-once { --animate-duration: 900ms; } + +/* Accessibility: reduced motion */ +@media (prefers-reduced-motion: reduce) { + .interactive, .orb { transition: none !important; animation: none !important; } +} \ No newline at end of file