Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 mamamiyear
|
7fe3a0fc93 |
@@ -1,6 +1,7 @@
|
|||||||
build/bin
|
build/bin
|
||||||
node_modules
|
node_modules
|
||||||
frontend/dist
|
frontend/dist
|
||||||
|
landing/dist
|
||||||
|
|
||||||
# macOS release artifacts
|
# macOS release artifacts
|
||||||
*.dmg
|
*.dmg
|
||||||
|
|||||||
@@ -0,0 +1,2 @@
|
|||||||
|
VITE_BASE_PATH=/
|
||||||
|
VITE_DOWNLOAD_URL=https://github.com/mamamiyear/SnapGo/releases/latest/download/SnapGo-0.1.0-arm64.dmg
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
# SnapGo Landing
|
||||||
|
|
||||||
|
Vite + React landing page for SnapGo.
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Build
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Set `VITE_BASE_PATH` when deploying under a sub-path:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
VITE_BASE_PATH=/SnapGo/ npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Optional download URL override:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
VITE_DOWNLOAD_URL=https://example.com/SnapGo-arm64.dmg npm run build
|
||||||
|
```
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="SnapGo 是一款 macOS 截图工具，截图后自动上传到对象存储或远端服务器，并复制链接或路径。"
|
||||||
|
/>
|
||||||
|
<title>SnapGo - 截完图，链接已经在剪贴板</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Generated
+1781
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"name": "snapgo-landing",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc --noEmit && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lucide-react": "^0.468.0",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.3.12",
|
||||||
|
"@types/react-dom": "^18.3.1",
|
||||||
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
"typescript": "^5.6.3",
|
||||||
|
"vite": "^5.4.11"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,267 @@
|
|||||||
|
import {
|
||||||
|
Apple,
|
||||||
|
ArrowRight,
|
||||||
|
CheckCircle2,
|
||||||
|
ClipboardCheck,
|
||||||
|
Cloud,
|
||||||
|
Command,
|
||||||
|
Download,
|
||||||
|
FolderInput,
|
||||||
|
Gauge,
|
||||||
|
Globe2,
|
||||||
|
HardDriveUpload,
|
||||||
|
LockKeyhole,
|
||||||
|
MousePointer2,
|
||||||
|
Network,
|
||||||
|
Server,
|
||||||
|
Sparkles,
|
||||||
|
TerminalSquare,
|
||||||
|
UploadCloud,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import appIcon from '../../build/appicon.png';
|
||||||
|
|
||||||
|
const defaultDownloadUrl =
|
||||||
|
'https://github.com/mamamiyear/SnapGo/releases/latest/download/SnapGo-0.1.0-arm64.dmg';
|
||||||
|
|
||||||
|
const downloadUrl = import.meta.env.VITE_DOWNLOAD_URL || defaultDownloadUrl;
|
||||||
|
|
||||||
|
const providers = ['AWS S3', 'MinIO', 'Cloudflare R2', 'Backblaze B2'];
|
||||||
|
|
||||||
|
const workflow = [
|
||||||
|
{
|
||||||
|
title: '全局快捷键截图',
|
||||||
|
detail: '菜单栏常驻，按下 cmd+shift+a 后直接框选当前屏幕内容。',
|
||||||
|
icon: Command,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '选择上传目标',
|
||||||
|
detail: '对象存储得到公开 URL，远端服务器得到 SSH 家目录下的路径。',
|
||||||
|
icon: Network,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '自动复制结果',
|
||||||
|
detail: '上传完成后，URL 或 ~/snapgo/...png 已经在剪贴板里。',
|
||||||
|
icon: ClipboardCheck,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const featureCards = [
|
||||||
|
{
|
||||||
|
title: '截图直传对象存储',
|
||||||
|
copy: '接入 S3 兼容端点，支持路径前缀和自定义公开地址，适合自有图床和 CDN。',
|
||||||
|
icon: Cloud,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '远端服务器保存',
|
||||||
|
copy: '通过 SSH/SCP 写入远端主机，复制相对家目录路径，方便登录服务器后立刻定位。',
|
||||||
|
icon: Server,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '失败也有兜底',
|
||||||
|
copy: '上传失败时保住截图文件，避免截了一次图却丢了上下文。',
|
||||||
|
icon: FolderInput,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '为高频沟通而轻',
|
||||||
|
copy: '截图、上传、复制三步合一，发给聊天、工单、Issue、PR 都不打断手上的事。',
|
||||||
|
icon: Gauge,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const comparison = [
|
||||||
|
'不用打开图床网页',
|
||||||
|
'不用手动保存再拖拽',
|
||||||
|
'不用把图片交给陌生服务',
|
||||||
|
'不用给 CLI Agent 拼 base64',
|
||||||
|
];
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<div className="site-shell">
|
||||||
|
<header className="hero">
|
||||||
|
<nav className="top-nav" aria-label="主导航">
|
||||||
|
<a className="brand" href="#top" aria-label="SnapGo 首页">
|
||||||
|
<img src={appIcon} alt="" />
|
||||||
|
<span>SnapGo</span>
|
||||||
|
</a>
|
||||||
|
<div className="nav-actions">
|
||||||
|
<a href="#workflow">工作流</a>
|
||||||
|
<a href="#destinations">远端目标</a>
|
||||||
|
<a className="nav-download" href={downloadUrl}>
|
||||||
|
<Download size={16} aria-hidden="true" />
|
||||||
|
下载
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="hero-grid" id="top">
|
||||||
|
<div className="hero-copy">
|
||||||
|
<div className="eyebrow">
|
||||||
|
<Sparkles size={16} aria-hidden="true" />
|
||||||
|
macOS 截图直传工具
|
||||||
|
</div>
|
||||||
|
<h1>截完图，链接已经在剪贴板。</h1>
|
||||||
|
<p className="hero-lede">
|
||||||
|
SnapGo 把「框选截图 → 上传远端 → 复制链接或路径」压缩成一次动作。
|
||||||
|
图片进你的对象存储或远端服务器，分享结果立刻可粘贴。
|
||||||
|
</p>
|
||||||
|
<div className="hero-actions">
|
||||||
|
<a className="primary-cta" href={downloadUrl}>
|
||||||
|
<Apple size={19} aria-hidden="true" />
|
||||||
|
下载 macOS Apple silicon
|
||||||
|
</a>
|
||||||
|
<a className="secondary-cta" href="#destinations">
|
||||||
|
看远端目标
|
||||||
|
<ArrowRight size={17} aria-hidden="true" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="hero-proof" aria-label="核心能力">
|
||||||
|
<span>S3 兼容对象存储</span>
|
||||||
|
<span>SSH/SCP 远端服务器</span>
|
||||||
|
<span>自动复制 URL/路径</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hero-visual" aria-label="SnapGo 截图上传工作流示意">
|
||||||
|
<img className="hero-app-icon" src={appIcon} alt="SnapGo 应用图标" />
|
||||||
|
<div className="capture-scene">
|
||||||
|
<div className="desktop-bar">
|
||||||
|
<span />
|
||||||
|
<span />
|
||||||
|
<span />
|
||||||
|
</div>
|
||||||
|
<div className="selection-box">
|
||||||
|
<div className="selection-label">1280 x 720</div>
|
||||||
|
<div className="toolbar" aria-hidden="true">
|
||||||
|
<MousePointer2 size={16} />
|
||||||
|
<UploadCloud size={16} />
|
||||||
|
<HardDriveUpload size={16} />
|
||||||
|
<ClipboardCheck size={16} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="result-stack">
|
||||||
|
<div className="result-line">
|
||||||
|
<Globe2 size={15} aria-hidden="true" />
|
||||||
|
<span>https://cdn.example.com/snapgo/2026/06/shot.png</span>
|
||||||
|
</div>
|
||||||
|
<div className="result-line">
|
||||||
|
<TerminalSquare size={15} aria-hidden="true" />
|
||||||
|
<span>~/snapgo/2026/06/shot.png</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section className="quick-strip" aria-label="上传目标">
|
||||||
|
{providers.map((provider) => (
|
||||||
|
<span key={provider}>{provider}</span>
|
||||||
|
))}
|
||||||
|
<span>Custom CDN</span>
|
||||||
|
<span>SSH Host</span>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="section workflow-section" id="workflow">
|
||||||
|
<div className="section-heading">
|
||||||
|
<p>一次动作</p>
|
||||||
|
<h2>给截图分享装上直达通道</h2>
|
||||||
|
</div>
|
||||||
|
<div className="workflow-grid">
|
||||||
|
{workflow.map((item, index) => {
|
||||||
|
const Icon = item.icon;
|
||||||
|
return (
|
||||||
|
<article className="workflow-card" key={item.title}>
|
||||||
|
<div className="step-index">0{index + 1}</div>
|
||||||
|
<Icon size={25} aria-hidden="true" />
|
||||||
|
<h3>{item.title}</h3>
|
||||||
|
<p>{item.detail}</p>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="section split-section" id="destinations">
|
||||||
|
<div className="destination-copy">
|
||||||
|
<p className="section-kicker">远端优先</p>
|
||||||
|
<h2>对象存储给 URL，服务器给路径。</h2>
|
||||||
|
<p>
|
||||||
|
SnapGo 的吸引力不只是「能截图」，而是截图完成后直接抵达你真正要用的地方：
|
||||||
|
公开链接可以贴进文档和 PR，远端路径可以给脚本、服务器会话或 Agent 继续处理。
|
||||||
|
</p>
|
||||||
|
<ul className="check-list">
|
||||||
|
{comparison.map((item) => (
|
||||||
|
<li key={item}>
|
||||||
|
<CheckCircle2 size={18} aria-hidden="true" />
|
||||||
|
{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="destination-panel" aria-label="远端配置示意">
|
||||||
|
<div className="panel-head">
|
||||||
|
<span>Destination</span>
|
||||||
|
<strong>Ready</strong>
|
||||||
|
</div>
|
||||||
|
<div className="route-row active">
|
||||||
|
<Cloud size={20} aria-hidden="true" />
|
||||||
|
<div>
|
||||||
|
<strong>S3 compatible</strong>
|
||||||
|
<span>snapgo/2026/06/*.png → public URL</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="route-row">
|
||||||
|
<Server size={20} aria-hidden="true" />
|
||||||
|
<div>
|
||||||
|
<strong>SSH remote</strong>
|
||||||
|
<span>~/snapgo/2026/06/*.png → clipboard path</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="clipboard-preview">
|
||||||
|
<ClipboardCheck size={19} aria-hidden="true" />
|
||||||
|
<code>Copied: https://cdn.example.com/snapgo/shot.png</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="section feature-section">
|
||||||
|
<div className="section-heading">
|
||||||
|
<p>为什么值得用</p>
|
||||||
|
<h2>为每天反复发截图的人打磨</h2>
|
||||||
|
</div>
|
||||||
|
<div className="feature-grid">
|
||||||
|
{featureCards.map((feature) => {
|
||||||
|
const Icon = feature.icon;
|
||||||
|
return (
|
||||||
|
<article className="feature-card" key={feature.title}>
|
||||||
|
<Icon size={24} aria-hidden="true" />
|
||||||
|
<h3>{feature.title}</h3>
|
||||||
|
<p>{feature.copy}</p>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="final-cta" aria-labelledby="download-title">
|
||||||
|
<div>
|
||||||
|
<p className="section-kicker">SnapGo for macOS</p>
|
||||||
|
<h2 id="download-title">把截图分享流程缩短到一次粘贴。</h2>
|
||||||
|
<p>
|
||||||
|
当前主要围绕 macOS 体验打磨，推荐 Apple silicon 设备下载使用。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a className="primary-cta final-button" href={downloadUrl}>
|
||||||
|
<Download size={19} aria-hidden="true" />
|
||||||
|
下载 macOS Apple silicon
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import App from './App';
|
||||||
|
import './styles.css';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
);
|
||||||
@@ -0,0 +1,878 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Work+Sans:wght@400;500;600;700&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
color-scheme: dark;
|
||||||
|
font-family:
|
||||||
|
'Work Sans',
|
||||||
|
-apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
'Segoe UI',
|
||||||
|
sans-serif;
|
||||||
|
background: #070b14;
|
||||||
|
color: #f6fbff;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
font-synthesis: none;
|
||||||
|
--bg: #070b14;
|
||||||
|
--panel: rgba(11, 20, 36, 0.82);
|
||||||
|
--panel-strong: #101b30;
|
||||||
|
--line: rgba(139, 223, 255, 0.18);
|
||||||
|
--line-strong: rgba(121, 239, 231, 0.38);
|
||||||
|
--text: #f6fbff;
|
||||||
|
--muted: #a7bad1;
|
||||||
|
--cyan: #42edf2;
|
||||||
|
--blue: #3a9bff;
|
||||||
|
--purple: #8d63ff;
|
||||||
|
--mint: #5df0bd;
|
||||||
|
--orange: #ff7a2f;
|
||||||
|
--orange-deep: #e85f18;
|
||||||
|
--shadow-cyan: rgba(66, 237, 242, 0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-width: 320px;
|
||||||
|
background:
|
||||||
|
linear-gradient(120deg, rgba(66, 237, 242, 0.08), transparent 34%),
|
||||||
|
linear-gradient(220deg, rgba(141, 99, 255, 0.12), transparent 42%),
|
||||||
|
var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
a {
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-shell {
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
min-height: 88svh;
|
||||||
|
padding: 18px clamp(18px, 4vw, 64px) 56px;
|
||||||
|
background:
|
||||||
|
linear-gradient(90deg, rgba(66, 237, 242, 0.05) 1px, transparent 1px),
|
||||||
|
linear-gradient(0deg, rgba(66, 237, 242, 0.04) 1px, transparent 1px),
|
||||||
|
linear-gradient(135deg, #08111f 0%, #0c1223 42%, #070b14 100%);
|
||||||
|
background-size:
|
||||||
|
72px 72px,
|
||||||
|
72px 72px,
|
||||||
|
auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background:
|
||||||
|
linear-gradient(110deg, rgba(66, 237, 242, 0.16), transparent 28%),
|
||||||
|
linear-gradient(290deg, rgba(141, 99, 255, 0.18), transparent 30%);
|
||||||
|
mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-nav,
|
||||||
|
.hero-grid,
|
||||||
|
.quick-strip,
|
||||||
|
.section,
|
||||||
|
.final-cta {
|
||||||
|
width: min(1180px, calc(100vw - 36px));
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-nav {
|
||||||
|
position: relative;
|
||||||
|
z-index: 5;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 20px;
|
||||||
|
min-height: 58px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand,
|
||||||
|
.nav-actions,
|
||||||
|
.nav-download,
|
||||||
|
.hero-actions,
|
||||||
|
.hero-proof,
|
||||||
|
.eyebrow,
|
||||||
|
.quick-strip,
|
||||||
|
.check-list li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
gap: 10px;
|
||||||
|
font-family: Outfit, sans-serif;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 20px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand img {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 0 24px rgba(66, 237, 242, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-actions {
|
||||||
|
gap: 18px;
|
||||||
|
color: #c2d2e6;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-actions a {
|
||||||
|
transition: color 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-actions a:hover {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-download {
|
||||||
|
gap: 7px;
|
||||||
|
min-height: 36px;
|
||||||
|
padding: 0 13px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.13);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-download:hover {
|
||||||
|
border-color: rgba(66, 237, 242, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-grid {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
|
||||||
|
gap: clamp(26px, 6vw, 72px);
|
||||||
|
align-items: center;
|
||||||
|
min-height: calc(88svh - 88px);
|
||||||
|
padding: 42px 0 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-copy {
|
||||||
|
max-width: 690px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
width: fit-content;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
padding: 7px 11px;
|
||||||
|
border: 1px solid rgba(93, 240, 189, 0.24);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #c6fff0;
|
||||||
|
background: rgba(93, 240, 189, 0.08);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
font-family: Outfit, sans-serif;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
max-width: 780px;
|
||||||
|
font-size: clamp(46px, 7vw, 88px);
|
||||||
|
line-height: 0.95;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-lede {
|
||||||
|
margin: 24px 0 0;
|
||||||
|
max-width: 650px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: clamp(17px, 2vw, 21px);
|
||||||
|
line-height: 1.72;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 13px;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-cta,
|
||||||
|
.secondary-cta {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 9px;
|
||||||
|
min-height: 50px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 700;
|
||||||
|
transition:
|
||||||
|
transform 180ms ease,
|
||||||
|
border-color 180ms ease,
|
||||||
|
background 180ms ease,
|
||||||
|
color 180ms ease,
|
||||||
|
box-shadow 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-cta {
|
||||||
|
padding: 0 20px;
|
||||||
|
color: #190b04;
|
||||||
|
background: linear-gradient(180deg, #ff9c54 0%, var(--orange) 100%);
|
||||||
|
box-shadow: 0 16px 40px rgba(255, 122, 47, 0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-cta:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
background: linear-gradient(180deg, #ffac6e 0%, #ff812f 100%);
|
||||||
|
box-shadow: 0 18px 44px rgba(255, 122, 47, 0.38);
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-cta:focus-visible,
|
||||||
|
.secondary-cta:focus-visible,
|
||||||
|
.nav-actions a:focus-visible {
|
||||||
|
outline: 3px solid rgba(66, 237, 242, 0.72);
|
||||||
|
outline-offset: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-cta {
|
||||||
|
padding: 0 18px;
|
||||||
|
border: 1px solid rgba(151, 190, 232, 0.22);
|
||||||
|
color: #dbeeff;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-cta:hover {
|
||||||
|
border-color: rgba(66, 237, 242, 0.45);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-proof {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-proof span {
|
||||||
|
padding: 7px 10px;
|
||||||
|
border: 1px solid rgba(139, 223, 255, 0.16);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #c5d9ef;
|
||||||
|
background: rgba(255, 255, 255, 0.045);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-visual {
|
||||||
|
position: relative;
|
||||||
|
min-height: 530px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-app-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: -4%;
|
||||||
|
right: -8%;
|
||||||
|
width: min(420px, 88%);
|
||||||
|
border-radius: 30px;
|
||||||
|
opacity: 0.92;
|
||||||
|
filter: drop-shadow(0 28px 60px rgba(66, 237, 242, 0.18));
|
||||||
|
}
|
||||||
|
|
||||||
|
.capture-scene {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 4%;
|
||||||
|
width: min(510px, 100%);
|
||||||
|
min-height: 360px;
|
||||||
|
border: 1px solid rgba(139, 223, 255, 0.24);
|
||||||
|
border-radius: 8px;
|
||||||
|
background:
|
||||||
|
linear-gradient(120deg, rgba(13, 30, 54, 0.88), rgba(9, 15, 30, 0.94)),
|
||||||
|
repeating-linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent 0 46px,
|
||||||
|
rgba(66, 237, 242, 0.06) 47px 48px
|
||||||
|
);
|
||||||
|
box-shadow:
|
||||||
|
0 28px 80px rgba(0, 0, 0, 0.44),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-bar {
|
||||||
|
display: flex;
|
||||||
|
gap: 7px;
|
||||||
|
height: 38px;
|
||||||
|
padding: 14px 16px;
|
||||||
|
border-bottom: 1px solid rgba(139, 223, 255, 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-bar span {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #3b4860;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-bar span:nth-child(1) {
|
||||||
|
background: #ff7a2f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-bar span:nth-child(2) {
|
||||||
|
background: #f8c75d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-bar span:nth-child(3) {
|
||||||
|
background: #5df0bd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selection-box {
|
||||||
|
position: absolute;
|
||||||
|
left: 54px;
|
||||||
|
top: 76px;
|
||||||
|
width: 68%;
|
||||||
|
height: 150px;
|
||||||
|
border: 2px solid var(--cyan);
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(66, 237, 242, 0.1), rgba(141, 99, 255, 0.08)),
|
||||||
|
rgba(255, 255, 255, 0.03);
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 999px rgba(0, 0, 0, 0.26),
|
||||||
|
0 0 34px var(--shadow-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.selection-label {
|
||||||
|
position: absolute;
|
||||||
|
top: -34px;
|
||||||
|
left: -2px;
|
||||||
|
padding: 5px 8px;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: #07121f;
|
||||||
|
background: var(--cyan);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
position: absolute;
|
||||||
|
right: -1px;
|
||||||
|
bottom: -48px;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
border: 1px solid rgba(139, 223, 255, 0.18);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(6, 11, 21, 0.92);
|
||||||
|
color: #dff9ff;
|
||||||
|
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar svg {
|
||||||
|
padding: 7px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(255, 255, 255, 0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar svg:nth-child(2) {
|
||||||
|
color: var(--cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar svg:nth-child(3) {
|
||||||
|
color: var(--mint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar svg:nth-child(4) {
|
||||||
|
color: var(--orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-stack {
|
||||||
|
position: absolute;
|
||||||
|
left: 28px;
|
||||||
|
right: 28px;
|
||||||
|
bottom: 28px;
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-line {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 9px;
|
||||||
|
min-height: 38px;
|
||||||
|
padding: 0 12px;
|
||||||
|
border: 1px solid rgba(139, 223, 255, 0.16);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #cfe4f7;
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-line span {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-strip {
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: -26px;
|
||||||
|
padding: 18px;
|
||||||
|
border: 1px solid rgba(139, 223, 255, 0.15);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(9, 17, 31, 0.92);
|
||||||
|
box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-strip span {
|
||||||
|
min-height: 32px;
|
||||||
|
padding: 7px 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #bfd2e9;
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 100px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading {
|
||||||
|
max-width: 700px;
|
||||||
|
margin-bottom: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading p,
|
||||||
|
.section-kicker {
|
||||||
|
margin: 0 0 10px;
|
||||||
|
color: var(--mint);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading h2,
|
||||||
|
.split-section h2,
|
||||||
|
.final-cta h2 {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text);
|
||||||
|
font-size: clamp(32px, 4.2vw, 54px);
|
||||||
|
line-height: 1.04;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-grid,
|
||||||
|
.feature-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-card,
|
||||||
|
.feature-card {
|
||||||
|
min-height: 230px;
|
||||||
|
padding: 24px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: linear-gradient(180deg, rgba(16, 30, 53, 0.88), rgba(8, 15, 28, 0.88));
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-card {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-card::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 24px;
|
||||||
|
right: 24px;
|
||||||
|
bottom: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg, var(--cyan), var(--purple));
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-index {
|
||||||
|
margin-bottom: 26px;
|
||||||
|
color: rgba(255, 255, 255, 0.28);
|
||||||
|
font-family: Outfit, sans-serif;
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 0.82;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-card svg,
|
||||||
|
.feature-card svg {
|
||||||
|
color: var(--cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-card h3,
|
||||||
|
.feature-card h3 {
|
||||||
|
margin: 18px 0 10px;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-card p,
|
||||||
|
.feature-card p,
|
||||||
|
.destination-copy p,
|
||||||
|
.final-cta p {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--muted);
|
||||||
|
line-height: 1.72;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-section {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 0.9fr 1.1fr;
|
||||||
|
gap: clamp(28px, 6vw, 76px);
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.destination-copy p:not(.section-kicker) {
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
margin: 28px 0 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-list li {
|
||||||
|
gap: 10px;
|
||||||
|
color: #dcecff;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-list svg {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
color: var(--mint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.destination-panel {
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid var(--line-strong);
|
||||||
|
border-radius: 8px;
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(19, 36, 65, 0.86), rgba(7, 13, 24, 0.92)),
|
||||||
|
var(--panel-strong);
|
||||||
|
box-shadow:
|
||||||
|
0 28px 72px rgba(0, 0, 0, 0.36),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-head,
|
||||||
|
.route-row,
|
||||||
|
.clipboard-preview {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-head {
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
color: #8fa8c5;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-head strong {
|
||||||
|
color: var(--mint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-row {
|
||||||
|
gap: 14px;
|
||||||
|
min-height: 86px;
|
||||||
|
padding: 16px;
|
||||||
|
border: 1px solid rgba(139, 223, 255, 0.14);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-row + .route-row {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-row.active {
|
||||||
|
border-color: rgba(66, 237, 242, 0.5);
|
||||||
|
background: rgba(66, 237, 242, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-row svg {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
color: var(--cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-row strong,
|
||||||
|
.route-row span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-row strong {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-row span {
|
||||||
|
color: var(--muted);
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clipboard-preview {
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 14px;
|
||||||
|
padding: 14px;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #07121f;
|
||||||
|
background: linear-gradient(90deg, var(--cyan), var(--mint));
|
||||||
|
}
|
||||||
|
|
||||||
|
.clipboard-preview code {
|
||||||
|
color: inherit;
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-grid {
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
min-height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card p {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.final-cta {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) auto;
|
||||||
|
gap: 28px;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 110px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
padding: 34px;
|
||||||
|
border: 1px solid rgba(255, 122, 47, 0.32);
|
||||||
|
border-radius: 8px;
|
||||||
|
background:
|
||||||
|
linear-gradient(120deg, rgba(255, 122, 47, 0.12), transparent 40%),
|
||||||
|
linear-gradient(300deg, rgba(66, 237, 242, 0.13), transparent 42%),
|
||||||
|
#0b1424;
|
||||||
|
}
|
||||||
|
|
||||||
|
.final-cta p:not(.section-kicker) {
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.final-button {
|
||||||
|
min-width: 252px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
.hero {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-grid,
|
||||||
|
.split-section,
|
||||||
|
.final-cta {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-grid {
|
||||||
|
min-height: auto;
|
||||||
|
padding-top: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-visual {
|
||||||
|
min-height: 480px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-app-icon {
|
||||||
|
right: 3%;
|
||||||
|
width: min(360px, 78%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.capture-scene {
|
||||||
|
right: 4%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-grid,
|
||||||
|
.feature-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.final-button {
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 680px) {
|
||||||
|
.hero {
|
||||||
|
padding: 14px 18px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-nav,
|
||||||
|
.hero-grid,
|
||||||
|
.quick-strip,
|
||||||
|
.section,
|
||||||
|
.final-cta {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-grid {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
padding-top: 30px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-nav {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-actions a:not(.nav-download) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand img {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(39px, 13.5vw, 52px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-lede {
|
||||||
|
margin-top: 18px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.62;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
align-items: stretch;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-cta,
|
||||||
|
.secondary-cta {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-proof {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-visual {
|
||||||
|
position: absolute;
|
||||||
|
top: 72px;
|
||||||
|
right: -18px;
|
||||||
|
z-index: -1;
|
||||||
|
width: 180px;
|
||||||
|
min-height: 180px;
|
||||||
|
opacity: 0.24;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-app-icon {
|
||||||
|
position: static;
|
||||||
|
width: 180px;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.capture-scene {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-strip {
|
||||||
|
margin-top: 0;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding-top: 70px;
|
||||||
|
padding-right: 18px;
|
||||||
|
padding-left: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-section > *,
|
||||||
|
.final-cta > *,
|
||||||
|
.workflow-card,
|
||||||
|
.feature-card,
|
||||||
|
.destination-copy,
|
||||||
|
.destination-panel,
|
||||||
|
.route-row > div {
|
||||||
|
min-width: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-grid,
|
||||||
|
.feature-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-card,
|
||||||
|
.feature-card {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.destination-panel {
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clipboard-preview code {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.final-cta {
|
||||||
|
margin-top: 70px;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
scroll-behavior: auto !important;
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
Vendored
+9
@@ -0,0 +1,9 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
interface ImportMetaEnv {
|
||||||
|
readonly VITE_DOWNLOAD_URL?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportMeta {
|
||||||
|
readonly env: ImportMetaEnv;
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["DOM", "DOM.Iterable", "ES2020"],
|
||||||
|
"allowJs": false,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx"
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import { defineConfig, loadEnv } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
|
||||||
|
function normalizeBasePath(value: string | undefined) {
|
||||||
|
const raw = value?.trim();
|
||||||
|
if (!raw || raw === '/') return '/';
|
||||||
|
if (raw === './') return './';
|
||||||
|
if (/^https?:\/\//.test(raw)) {
|
||||||
|
return raw.endsWith('/') ? raw : `${raw}/`;
|
||||||
|
}
|
||||||
|
return `/${raw.replace(/^\/+|\/+$/g, '')}/`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineConfig(({ mode }) => {
|
||||||
|
const env = loadEnv(mode, process.cwd(), '');
|
||||||
|
|
||||||
|
return {
|
||||||
|
base: normalizeBasePath(env.VITE_BASE_PATH),
|
||||||
|
plugins: [react()],
|
||||||
|
};
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user