1333 lines
60 KiB
HTML
1333 lines
60 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Lumerel — Marketing</title>
|
||
|
||
<!-- General Sans (Fontshare) -->
|
||
<link rel="preconnect" href="https://api.fontshare.com" />
|
||
<link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap" />
|
||
|
||
<!-- Bootstrap 5 CDN -->
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
||
<style>
|
||
:root{
|
||
color-scheme: dark;
|
||
--bg: #000000;
|
||
--w10: rgba(255,255,255,.10);
|
||
--w12: rgba(255,255,255,.12);
|
||
--w15: rgba(255,255,255,.15);
|
||
--w20: rgba(255,255,255,.20);
|
||
--w35: rgba(255,255,255,.35);
|
||
--w50: rgba(255,255,255,.50);
|
||
--w60: rgba(255,255,255,.60);
|
||
--w70: rgba(255,255,255,.70);
|
||
}
|
||
|
||
html, body { height: 100%; }
|
||
body{
|
||
background: var(--bg);
|
||
font-family: "General Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
|
||
letter-spacing: .01em;
|
||
}
|
||
|
||
/* ---------------- Hero ---------------- */
|
||
.hero{
|
||
position: relative;
|
||
min-height: 100svh;
|
||
overflow: hidden;
|
||
background: #000;
|
||
}
|
||
|
||
.hero video{
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.hero::before{
|
||
content:"";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(0,0,0,.5);
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-atmo{
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 2;
|
||
pointer-events: none;
|
||
}
|
||
.hero-atmo .blob{
|
||
position: absolute;
|
||
border-radius: 999px;
|
||
filter: blur(100px);
|
||
opacity: .55;
|
||
background: rgba(255,255,255,.14);
|
||
}
|
||
.hero-atmo .b1{ width: 820px; height: 520px; top: -180px; left: 50%; transform: translateX(-50%); opacity: .55; }
|
||
.hero-atmo .b2{ width: 560px; height: 560px; bottom: -320px; left: 12%; opacity: .35; }
|
||
.hero-atmo .b3{ width: 640px; height: 640px; bottom: -360px; right: 12%; opacity: .30; }
|
||
|
||
/* Navbar spacing per spec */
|
||
.nav-wrap{
|
||
position: relative;
|
||
z-index: 3;
|
||
padding: 20px 24px;
|
||
}
|
||
@media (min-width: 768px){
|
||
.nav-wrap{ padding: 20px 120px; }
|
||
}
|
||
|
||
.brand-logo{
|
||
width: 187px;
|
||
height: 25px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nav-links{
|
||
gap: 30px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.nav-linkish{
|
||
color: rgba(255,255,255,1);
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
opacity: .95;
|
||
}
|
||
.nav-linkish:hover{ opacity: 1; }
|
||
|
||
.chev{
|
||
width: 14px; height: 14px;
|
||
display: inline-block;
|
||
}
|
||
|
||
/* Join pill button (double border + streak) */
|
||
.pill-outer{
|
||
border: 0.6px solid rgba(255,255,255,.85);
|
||
border-radius: 999px;
|
||
padding: .6px;
|
||
}
|
||
.pill-inner{
|
||
position: relative;
|
||
border-radius: 999px;
|
||
background: #000;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
padding: 11px 29px;
|
||
border: 1px solid rgba(255,255,255,.10);
|
||
overflow: hidden;
|
||
}
|
||
.pill-inner .streak{
|
||
position: absolute;
|
||
top: -26px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 160px;
|
||
height: 48px;
|
||
border-radius: 999px;
|
||
filter: blur(16px);
|
||
background: linear-gradient(to bottom, rgba(255,255,255,.50), rgba(255,255,255,0));
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Hero content spacing per spec */
|
||
.hero-content{
|
||
position: relative;
|
||
z-index: 3;
|
||
padding: 200px 24px 102px;
|
||
text-align: center;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
@media (min-width: 768px){
|
||
.hero-content{ padding-top: 280px; padding-left: 24px; padding-right: 24px; }
|
||
}
|
||
|
||
.hero-stack{ gap: 40px; }
|
||
|
||
.badge{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
border-radius: 20px;
|
||
padding: 8px 16px;
|
||
background: rgba(255,255,255,.10);
|
||
border: 1px solid rgba(255,255,255,.20);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
}
|
||
.badge .dot{
|
||
width: 4px; height: 4px;
|
||
border-radius: 999px;
|
||
background: #fff;
|
||
display: inline-block;
|
||
}
|
||
.badge .muted{ color: rgba(255,255,255,.60); }
|
||
|
||
.hero-h1{
|
||
max-width: 613px;
|
||
margin: 0 auto;
|
||
font-weight: 500;
|
||
line-height: 1.28;
|
||
font-size: 36px;
|
||
background-image: linear-gradient(144.5deg, rgba(255,255,255,1) 28%, rgba(0,0,0,0) 115%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
@media (min-width: 768px){
|
||
.hero-h1{ font-size: 56px; }
|
||
}
|
||
|
||
.hero-sub{
|
||
max-width: 680px;
|
||
margin: 0 auto;
|
||
font-size: 15px;
|
||
color: rgba(255,255,255,.70);
|
||
}
|
||
|
||
.cta-primary{
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(255,255,255,.20);
|
||
background: rgba(255,255,255,.10);
|
||
color: #fff;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
padding: 12px 22px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.cta-primary::after{
|
||
content:"";
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 999px;
|
||
background: linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,0));
|
||
pointer-events: none;
|
||
}
|
||
.cta-primary:hover{ background: rgba(255,255,255,.14); color:#fff; }
|
||
|
||
.cta-ghost{
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(255,255,255,.15);
|
||
background: rgba(0,0,0,.35);
|
||
color: rgba(255,255,255,.85);
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
padding: 12px 22px;
|
||
}
|
||
.cta-ghost:hover{ background: rgba(0,0,0,.55); color:#fff; }
|
||
|
||
/* Hero cards / panels */
|
||
.glass{
|
||
border-radius: 24px;
|
||
border: 1px solid rgba(255,255,255,.10);
|
||
background: rgba(255,255,255,.03);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.glass::before{
|
||
content:"";
|
||
position: absolute;
|
||
width: 240px; height: 240px;
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,.10);
|
||
filter: blur(60px);
|
||
top: -140px;
|
||
left: 30%;
|
||
opacity: .6;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.panel-head{
|
||
border-bottom: 1px solid rgba(255,255,255,.10);
|
||
padding: 14px 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 12px;
|
||
color: rgba(255,255,255,.55);
|
||
}
|
||
.panel-body{ padding: 18px; }
|
||
|
||
/* 3D placeholder container (Spline-ready) */
|
||
.spline-slot{
|
||
height: 340px;
|
||
border-radius: 24px;
|
||
border: 1px solid rgba(255,255,255,.10);
|
||
background: rgba(0,0,0,.35);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
@media (min-width: 768px){
|
||
.spline-slot{ height: 420px; }
|
||
}
|
||
.spline-slot .radials{
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 55%),
|
||
radial-gradient(circle at 70% 70%, rgba(255,255,255,.08), transparent 55%);
|
||
}
|
||
.spline-slot .center{
|
||
position: absolute;
|
||
inset: 0;
|
||
display: grid;
|
||
place-items: center;
|
||
text-align: center;
|
||
padding: 24px;
|
||
}
|
||
.spline-slot .icon{
|
||
width: 48px; height: 48px;
|
||
border-radius: 16px;
|
||
border: 1px solid rgba(255,255,255,.15);
|
||
background: rgba(255,255,255,.06);
|
||
margin: 0 auto 10px;
|
||
}
|
||
.spline-slot .t1{ font-size: 13px; color: rgba(255,255,255,.70); }
|
||
.spline-slot .t2{ font-size: 12px; color: rgba(255,255,255,.45); }
|
||
|
||
.orbit-svg{
|
||
position: absolute;
|
||
inset: 0;
|
||
opacity: .7;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.mini-stat{
|
||
border-radius: 18px;
|
||
border: 1px solid rgba(255,255,255,.10);
|
||
background: rgba(255,255,255,.03);
|
||
padding: 12px 14px;
|
||
}
|
||
.mini-stat .lbl{ font-size: 11px; color: rgba(255,255,255,.55); }
|
||
.mini-stat .val{ font-size: 18px; font-weight: 500; margin-top: 2px; }
|
||
|
||
/* Sections */
|
||
.section{
|
||
padding: 80px 0;
|
||
}
|
||
.kicker{
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
letter-spacing: .16em;
|
||
color: rgba(255,255,255,.55);
|
||
}
|
||
.h2{
|
||
font-size: 30px;
|
||
font-weight: 500;
|
||
line-height: 1.15;
|
||
margin-top: 14px;
|
||
}
|
||
@media (min-width: 768px){
|
||
.h2{ font-size: 40px; }
|
||
}
|
||
.section-p{
|
||
margin-top: 12px;
|
||
font-size: 14px;
|
||
color: rgba(255,255,255,.70);
|
||
max-width: 72ch;
|
||
}
|
||
|
||
.feature-card{
|
||
border-radius: 24px;
|
||
border: 1px solid rgba(255,255,255,.10);
|
||
background: rgba(255,255,255,.03);
|
||
padding: 22px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
height: 100%;
|
||
}
|
||
.feature-card::before{
|
||
content:"";
|
||
position:absolute;
|
||
width: 220px; height: 220px;
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,.08);
|
||
filter: blur(60px);
|
||
top: -150px;
|
||
left: 24px;
|
||
opacity: .55;
|
||
pointer-events: none;
|
||
}
|
||
.feature-top{
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
.feature-title{ font-size: 16px; font-weight: 500; }
|
||
.tag{
|
||
font-size: 11px;
|
||
padding: 6px 10px;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(255,255,255,.10);
|
||
background: rgba(0,0,0,.30);
|
||
color: rgba(255,255,255,.60);
|
||
white-space: nowrap;
|
||
}
|
||
.feature-body{
|
||
margin-top: 10px;
|
||
font-size: 14px;
|
||
color: rgba(255,255,255,.70);
|
||
}
|
||
.thumb{
|
||
margin-top: 16px;
|
||
height: 92px;
|
||
border-radius: 18px;
|
||
border: 1px solid rgba(255,255,255,.10);
|
||
background:
|
||
radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), transparent 55%),
|
||
radial-gradient(circle at 70% 80%, rgba(255,255,255,.07), transparent 55%);
|
||
}
|
||
|
||
/* Pricing */
|
||
.price-card{
|
||
border-radius: 24px;
|
||
border: 1px solid rgba(255,255,255,.10);
|
||
background: rgba(255,255,255,.03);
|
||
padding: 26px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
height: 100%;
|
||
}
|
||
.price-card.popular{
|
||
border-color: rgba(255,255,255,.20);
|
||
}
|
||
.price-card.popular::before{
|
||
content:"";
|
||
position:absolute;
|
||
inset: 0;
|
||
border-radius: 24px;
|
||
box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
|
||
pointer-events: none;
|
||
}
|
||
.popular-badge{
|
||
font-size: 11px;
|
||
padding: 6px 10px;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(255,255,255,.15);
|
||
background: rgba(255,255,255,.10);
|
||
color: rgba(255,255,255,.70);
|
||
}
|
||
.tier{ font-size: 18px; font-weight: 500; }
|
||
.tier-tag{ margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.65); }
|
||
.price{
|
||
margin-top: 18px;
|
||
display:flex;
|
||
align-items: flex-end;
|
||
gap: 8px;
|
||
}
|
||
.price .num{ font-size: 40px; font-weight: 500; }
|
||
.price .cad{ font-size: 13px; color: rgba(255,255,255,.55); padding-bottom: 6px; }
|
||
.bul{ margin-top: 14px; color: rgba(255,255,255,.70); font-size: 14px; }
|
||
.bul .row{
|
||
--bs-gutter-x: .75rem;
|
||
margin-top: 8px;
|
||
}
|
||
.bul .dot{
|
||
width: 6px; height: 6px;
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,.50);
|
||
margin-top: 8px;
|
||
}
|
||
.choose{
|
||
margin-top: 18px;
|
||
width: 100%;
|
||
border-radius: 18px;
|
||
border: 1px solid rgba(255,255,255,.12);
|
||
background: rgba(0,0,0,.40);
|
||
color: #fff;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
padding: 12px 14px;
|
||
}
|
||
.choose:hover{ background: rgba(0,0,0,.55); }
|
||
|
||
/* Footer */
|
||
.footer{
|
||
border-top: 1px solid rgba(255,255,255,.10);
|
||
padding: 48px 0 34px;
|
||
color: rgba(255,255,255,.60);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.fine{
|
||
border-top: 1px solid rgba(255,255,255,.10);
|
||
margin-top: 28px;
|
||
padding-top: 18px;
|
||
font-size: 12px;
|
||
color: rgba(255,255,255,.45);
|
||
}
|
||
|
||
/* Anchor offsets */
|
||
.anchor{
|
||
scroll-margin-top: 96px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<video
|
||
src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260217_030345_246c0224-10a4-422c-b324-070b7c0eceda.mp4"
|
||
autoplay muted loop playsinline
|
||
></video>
|
||
|
||
<div class="hero-atmo">
|
||
<div class="blob b1"></div>
|
||
<div class="blob b2"></div>
|
||
<div class="blob b3"></div>
|
||
</div>
|
||
|
||
<!-- NAV -->
|
||
<div class="nav-wrap">
|
||
<div class="d-flex align-items-center justify-content-between">
|
||
<div class="d-flex align-items-center gap-4">
|
||
<a class="brand-logo" href="#">Lumerel</a>
|
||
|
||
<div class="d-none d-md-flex nav-links align-items-center">
|
||
<a class="nav-linkish" href="#get-started">
|
||
<span>Get Started</span>
|
||
<span class="chev">
|
||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</span>
|
||
</a>
|
||
<a class="nav-linkish" href="#developers">
|
||
<span>Developers</span>
|
||
<span class="chev">
|
||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</span>
|
||
</a>
|
||
<a class="nav-linkish" href="#features">
|
||
<span>Features</span>
|
||
<span class="chev">
|
||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</span>
|
||
</a>
|
||
<a class="nav-linkish" href="#resources">
|
||
<span>Resources</span>
|
||
<span class="chev">
|
||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pill-outer">
|
||
<button class="pill-inner" type="button" data-bs-toggle="modal" data-bs-target="#waitlistModal">
|
||
<span class="streak"></span>
|
||
Join Waitlist
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HERO CONTENT -->
|
||
<div class="hero-content">
|
||
<div class="d-flex flex-column align-items-center hero-stack">
|
||
<div class="badge">
|
||
<span class="dot"></span>
|
||
<span class="muted">Access available now</span>
|
||
<span>Get Started Today</span>
|
||
</div>
|
||
|
||
<h1 class="hero-h1">
|
||
Keep your work coherent—while your universe scales.
|
||
</h1>
|
||
|
||
<p class="hero-sub">
|
||
Lumerel turns clients into planets, work into orbits, and scattered details into a system you can see.
|
||
Projects, tasks, notes, time, and invoices align into a living dashboard that stays readable as you move faster.
|
||
</p>
|
||
|
||
<div class="d-flex flex-column flex-sm-row gap-2">
|
||
<a href="#get-started" class="btn cta-primary">Get Started</a>
|
||
<button class="btn cta-ghost" type="button" data-bs-toggle="modal" data-bs-target="#videoModal">
|
||
Watch the Overview
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Hero media row -->
|
||
<div class="container px-0 mt-4">
|
||
<div class="row g-3">
|
||
<!-- 3D placeholder -->
|
||
<div class="col-12 col-md-7">
|
||
<div class="glass">
|
||
<div class="panel-head">
|
||
<div class="d-flex align-items-center gap-2">
|
||
<span style="width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35);display:inline-block;"></span>
|
||
<span>Solar System Dashboard</span>
|
||
</div>
|
||
<span style="color:rgba(255,255,255,.40);">3D placeholder</span>
|
||
</div>
|
||
|
||
<div class="panel-body">
|
||
<!-- Spline mount target -->
|
||
<div class="spline-slot" id="splineMount">
|
||
<div class="radials"></div>
|
||
<svg class="orbit-svg" viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="220" cy="250" r="10" fill="rgba(255,255,255,0.45)" />
|
||
<circle cx="220" cy="250" r="110" fill="none" stroke="rgba(255,255,255,0.10)" stroke-width="1.2" />
|
||
<circle cx="220" cy="250" r="170" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="1.2" />
|
||
<circle cx="220" cy="250" r="230" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1.2" />
|
||
<circle cx="520" cy="210" r="8" fill="rgba(255,255,255,0.35)" />
|
||
<ellipse cx="520" cy="210" rx="170" ry="95" fill="none" stroke="rgba(255,255,255,0.07)" stroke-width="1.2" />
|
||
<ellipse cx="520" cy="210" rx="220" ry="125" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1.2" />
|
||
</svg>
|
||
|
||
<div class="center">
|
||
<div>
|
||
<div class="icon"></div>
|
||
<div class="t1">Drop your Spline scene here</div>
|
||
<div class="t2">(Replace this container with your embed/canvas)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-2 mt-3">
|
||
<div class="col-4">
|
||
<div class="mini-stat">
|
||
<div class="lbl">Active Clients</div>
|
||
<div class="val">12</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-4">
|
||
<div class="mini-stat">
|
||
<div class="lbl">Open Missions</div>
|
||
<div class="val">38</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-4">
|
||
<div class="mini-stat">
|
||
<div class="lbl">This Month</div>
|
||
<div class="val">$14.2k</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right cards -->
|
||
<div class="col-12 col-md-5">
|
||
<div class="d-flex flex-column gap-3 h-100">
|
||
<div class="glass p-4">
|
||
<div style="font-size:12px;color:rgba(255,255,255,.55);">Narratives</div>
|
||
<div class="mt-2" style="font-size:18px;font-weight:500;">A timeline that doesn’t lose the plot.</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);">
|
||
Attach decisions, drafts, clips, and context to a single evolving thread—so your next step is obvious, even weeks later.
|
||
</div>
|
||
<div class="thumb mt-4"></div>
|
||
</div>
|
||
|
||
<div class="glass p-4">
|
||
<div style="font-size:12px;color:rgba(255,255,255,.55);">Automations</div>
|
||
<div class="mt-2" style="font-size:18px;font-weight:500;">Workflows, quietly running in orbit.</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);">
|
||
Trigger follow-ups, status shifts, invoice nudges, and reminders the moment reality changes—without turning your day into a checklist.
|
||
</div>
|
||
<div class="thumb mt-4"></div>
|
||
</div>
|
||
|
||
<div class="glass p-4">
|
||
<div style="font-size:12px;color:rgba(255,255,255,.55);">AI Assistant</div>
|
||
<div class="mt-2" style="font-size:18px;font-weight:500;">Clarity on demand—without busywork.</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);">
|
||
Ask what’s stuck, what’s risky, what’s next. Lumerel reads your universe and answers with actionable context.
|
||
</div>
|
||
<div class="thumb mt-4"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Audience strip -->
|
||
<div class="glass mt-3 p-4">
|
||
<div class="d-flex flex-column flex-md-row align-items-md-center justify-content-md-between gap-3">
|
||
<div style="font-size:13px;color:rgba(255,255,255,.60);">
|
||
Built for freelancers, studios, and small teams who ship real work:
|
||
</div>
|
||
<div class="d-flex flex-wrap gap-2" style="font-size:12px;color:rgba(255,255,255,.50);">
|
||
<span class="tag">Design</span>
|
||
<span class="tag">Development</span>
|
||
<span class="tag">Video & Motion</span>
|
||
<span class="tag">Music</span>
|
||
<span class="tag">Writing</span>
|
||
<span class="tag">Production</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- bottom fade -->
|
||
<div style="position:absolute;left:0;right:0;bottom:0;height:96px;background:linear-gradient(to bottom, transparent, #000);z-index:2;"></div>
|
||
</section>
|
||
|
||
<!-- MAIN -->
|
||
<main>
|
||
<!-- VALUE -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="kicker">SEE THE WHOLE SYSTEM</div>
|
||
<div class="h2">Project management, reimagined as a universe you can navigate.</div>
|
||
<div class="section-p">
|
||
Most tools list work. Lumerel shows relationships—so priorities, blockers, and outcomes are visible instead of implied.
|
||
</div>
|
||
|
||
<div class="row g-3 mt-4">
|
||
<div class="col-12 col-md-7">
|
||
<div class="glass p-4 h-100">
|
||
<div style="font-size:20px;font-weight:500;">Clients become planets.</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);max-width:74ch;">
|
||
Each client becomes a center of gravity. Projects, tasks, notes, time entries, and invoices gather in orbit—organized by how work actually connects.
|
||
</div>
|
||
|
||
<div class="mt-4" style="height:220px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.35);overflow:hidden;">
|
||
<div class="panel-head" style="border-bottom:1px solid rgba(255,255,255,.10);">
|
||
<span>Dashboard preview placeholder</span>
|
||
<span style="color:rgba(255,255,255,.40);">image/video placeholder</span>
|
||
</div>
|
||
<div style="position:relative;height:100%;background:
|
||
radial-gradient(circle at 20% 30%, rgba(255,255,255,.10), transparent 60%),
|
||
radial-gradient(circle at 80% 70%, rgba(255,255,255,.08), transparent 60%);">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-md-5">
|
||
<div class="glass p-4 h-100">
|
||
<div style="font-size:20px;font-weight:500;">Work becomes a story.</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);">
|
||
Create Narratives for anything with a plot: a game build, a marketing campaign, a book draft, a launch, a film. Every artifact stays attached to the thread that created it.
|
||
</div>
|
||
|
||
<div class="mt-4" style="height:320px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.35);overflow:hidden;">
|
||
<div class="panel-head">
|
||
<span>Narrative timeline placeholder</span>
|
||
<span style="color:rgba(255,255,255,.40);">image/video placeholder</span>
|
||
</div>
|
||
<div style="position:relative;height:100%;background:
|
||
radial-gradient(circle at 25% 35%, rgba(255,255,255,.10), transparent 60%),
|
||
radial-gradient(circle at 70% 80%, rgba(255,255,255,.07), transparent 60%);">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FEATURES -->
|
||
<section class="section anchor" id="features">
|
||
<div class="container">
|
||
<div class="kicker">FEATURES</div>
|
||
<div class="h2">Everything you need to plan, ship, bill, and stay coherent.</div>
|
||
<div class="section-p">
|
||
A single place for your work, your clients, and the decisions that keep everything moving.
|
||
</div>
|
||
|
||
<div class="row g-3 mt-4">
|
||
<div class="col-12 col-md-6 col-lg-4">
|
||
<div class="feature-card">
|
||
<div class="feature-top">
|
||
<div class="feature-title">Solar System Dashboard</div>
|
||
<div class="tag">Visual</div>
|
||
</div>
|
||
<div class="feature-body">A high-signal overview that shows motion, not noise—so you know what’s advancing and what’s drifting.</div>
|
||
<div class="thumb"></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg-4">
|
||
<div class="feature-card">
|
||
<div class="feature-top">
|
||
<div class="feature-title">Tasks with Gravity</div>
|
||
<div class="tag">Execution</div>
|
||
</div>
|
||
<div class="feature-body">Tasks cluster by client, project, and narrative context. The most important work pulls forward naturally.</div>
|
||
<div class="thumb"></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg-4">
|
||
<div class="feature-card">
|
||
<div class="feature-top">
|
||
<div class="feature-title">Notes that Stay Attached</div>
|
||
<div class="tag">Context</div>
|
||
</div>
|
||
<div class="feature-body">Decisions, meeting summaries, snippets, and links live where they belong—inside the orbit they affect.</div>
|
||
<div class="thumb"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-md-6 col-lg-4">
|
||
<div class="feature-card">
|
||
<div class="feature-top">
|
||
<div class="feature-title">Time Tracking That Doesn’t Break Flow</div>
|
||
<div class="tag">Billing</div>
|
||
</div>
|
||
<div class="feature-body">Capture time in moments, not rituals—then link it to deliverables for clean, honest invoicing.</div>
|
||
<div class="thumb"></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg-4">
|
||
<div class="feature-card">
|
||
<div class="feature-top">
|
||
<div class="feature-title">Invoicing + Client Portal</div>
|
||
<div class="tag">Client</div>
|
||
</div>
|
||
<div class="feature-body">Invoices become legible: what shipped, what’s next, what’s due—presented clearly to your client.</div>
|
||
<div class="thumb"></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg-4">
|
||
<div class="feature-card">
|
||
<div class="feature-top">
|
||
<div class="feature-title">Automations</div>
|
||
<div class="tag">Workflow</div>
|
||
</div>
|
||
<div class="feature-body">When status changes, Lumerel moves with it: reminders, handoffs, nudges, and follow-ups—hands-free.</div>
|
||
<div class="thumb"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-md-6 col-lg-4">
|
||
<div class="feature-card">
|
||
<div class="feature-top">
|
||
<div class="feature-title">AI Copilot</div>
|
||
<div class="tag">AI</div>
|
||
</div>
|
||
<div class="feature-body">Ask: “What’s at risk?” “What’s next?” “Summarize the week.” Answers grounded in your universe.</div>
|
||
<div class="thumb"></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg-4">
|
||
<div class="feature-card">
|
||
<div class="feature-top">
|
||
<div class="feature-title">Narratives</div>
|
||
<div class="tag">Story</div>
|
||
</div>
|
||
<div class="feature-body">A structured thread for projects with chapters: drafts, assets, decisions, milestones, and momentum.</div>
|
||
<div class="thumb"></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-6 col-lg-4">
|
||
<div class="feature-card">
|
||
<div class="feature-top">
|
||
<div class="feature-title">Instant Search</div>
|
||
<div class="tag">Speed</div>
|
||
</div>
|
||
<div class="feature-body">Jump to any client, project, file, note, or invoice. Fast retrieval is a superpower in mid-flight.</div>
|
||
<div class="thumb"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- WORKFLOWS -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="kicker">WORKFLOWS</div>
|
||
<div class="h2">From intake to invoice, everything stays coherent.</div>
|
||
<div class="section-p">
|
||
Lumerel follows the real arc of work—discovery, production, delivery, follow-through—without scattering the narrative across tools.
|
||
</div>
|
||
|
||
<div class="row g-3 mt-4">
|
||
<div class="col-12 col-md-6">
|
||
<div class="glass p-4 h-100">
|
||
<div class="d-flex justify-content-between align-items-baseline">
|
||
<div class="kicker" style="letter-spacing:.14em;">STEP 01</div>
|
||
<div style="font-size:12px;color:rgba(255,255,255,.40);">workflow</div>
|
||
</div>
|
||
<div class="mt-2" style="font-size:18px;font-weight:500;">Intake that becomes structure.</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);">
|
||
Capture goals, constraints, and assets once—then Lumerel turns that into projects, tasks, and a narrative baseline you can trust.
|
||
</div>
|
||
<div class="thumb mt-4" style="height:120px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-md-6">
|
||
<div class="glass p-4 h-100">
|
||
<div class="d-flex justify-content-between align-items-baseline">
|
||
<div class="kicker" style="letter-spacing:.14em;">STEP 02</div>
|
||
<div style="font-size:12px;color:rgba(255,255,255,.40);">workflow</div>
|
||
</div>
|
||
<div class="mt-2" style="font-size:18px;font-weight:500;">Execution that stays connected.</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);">
|
||
Track tasks, decisions, notes, and time without scattering context across apps that don’t speak to each other.
|
||
</div>
|
||
<div class="thumb mt-4" style="height:120px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-md-6">
|
||
<div class="glass p-4 h-100">
|
||
<div class="d-flex justify-content-between align-items-baseline">
|
||
<div class="kicker" style="letter-spacing:.14em;">STEP 03</div>
|
||
<div style="font-size:12px;color:rgba(255,255,255,.40);">workflow</div>
|
||
</div>
|
||
<div class="mt-2" style="font-size:18px;font-weight:500;">Delivery with a clean handoff.</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);">
|
||
Share progress through a client portal that makes your work legible—what’s done, what’s next, what needs approval.
|
||
</div>
|
||
<div class="thumb mt-4" style="height:120px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-md-6">
|
||
<div class="glass p-4 h-100">
|
||
<div class="d-flex justify-content-between align-items-baseline">
|
||
<div class="kicker" style="letter-spacing:.14em;">STEP 04</div>
|
||
<div style="font-size:12px;color:rgba(255,255,255,.40);">workflow</div>
|
||
</div>
|
||
<div class="mt-2" style="font-size:18px;font-weight:500;">Billing that tells the truth.</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);">
|
||
Turn shipped work into invoices with receipts: time entries, deliverables, and narrative milestones—aligned and easy to approve.
|
||
</div>
|
||
<div class="thumb mt-4" style="height:120px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- DEVELOPERS -->
|
||
<section class="section anchor" id="developers">
|
||
<div class="container">
|
||
<div class="kicker">DEVELOPERS</div>
|
||
<div class="h2">Built to extend. Designed to stay out of your way.</div>
|
||
<div class="section-p">
|
||
If you want a tool that respects systems thinking, you’re in the right orbit.
|
||
</div>
|
||
|
||
<div class="row g-3 mt-4">
|
||
<div class="col-12 col-md-7">
|
||
<div class="glass p-4">
|
||
<div style="font-size:12px;color:rgba(255,255,255,.50);">API & Integrations (placeholder)</div>
|
||
<div class="mt-2" style="font-size:22px;font-weight:500;">Connect Lumerel to the rest of your stack.</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);max-width:70ch;">
|
||
Webhooks, events, and automation triggers let you sync with your tools—without duct tape. Bring your workflows, keep your source of truth.
|
||
</div>
|
||
|
||
<div class="mt-4" style="border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.50);overflow:hidden;">
|
||
<div class="panel-head">
|
||
<span>Example payload</span>
|
||
<span style="color:rgba(255,255,255,.40);">placeholder</span>
|
||
</div>
|
||
<pre class="m-0 p-3" style="font-size:12px;line-height:1.55;color:rgba(255,255,255,.70);background:transparent;">{
|
||
"event": "task.updated",
|
||
"client": { "id": "cl_8f2c", "name": "Astra Studio" },
|
||
"project": { "id": "pr_19ad", "name": "Launch Orbit" },
|
||
"task": {
|
||
"id": "ts_77b1",
|
||
"title": "Finalize onboarding flow",
|
||
"status": "in_review",
|
||
"risk": "medium"
|
||
},
|
||
"timestamp": "2026-02-20T20:12:04Z"
|
||
}</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-md-5">
|
||
<div class="d-flex flex-column gap-3 h-100">
|
||
<div class="glass p-4">
|
||
<div style="font-size:12px;color:rgba(255,255,255,.55);">CLI (placeholder)</div>
|
||
<div class="mt-2" style="font-size:18px;font-weight:500;">Move faster with terminal-level control.</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);">
|
||
Script repetitive setup. Spin up templates. Pull reports. Keep speed where it belongs.
|
||
</div>
|
||
<div class="thumb mt-4"></div>
|
||
</div>
|
||
<div class="glass p-4">
|
||
<div style="font-size:12px;color:rgba(255,255,255,.55);">Security</div>
|
||
<div class="mt-2" style="font-size:18px;font-weight:500;">Built for trust.</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);">
|
||
Clear permissions and clean access boundaries—because client data is sacred.
|
||
</div>
|
||
<div class="thumb mt-4"></div>
|
||
</div>
|
||
<div class="glass p-4">
|
||
<div style="font-size:12px;color:rgba(255,255,255,.55);">Performance</div>
|
||
<div class="mt-2" style="font-size:18px;font-weight:500;">Fast enough to feel invisible.</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);">
|
||
Navigation and search built for momentum—because flow is the point.
|
||
</div>
|
||
<div class="thumb mt-4"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRICING -->
|
||
<section class="section anchor" id="get-started">
|
||
<div class="container">
|
||
<div class="kicker">PRICING</div>
|
||
<div class="h2">Choose the orbit that matches your velocity.</div>
|
||
<div class="section-p">
|
||
Start small, scale into systems. Your universe expands when you do.
|
||
</div>
|
||
|
||
<div class="row g-3 mt-4">
|
||
<div class="col-12 col-lg-4">
|
||
<div class="price-card h-100">
|
||
<div class="d-flex align-items-center justify-content-between">
|
||
<div class="tier">Focus</div>
|
||
</div>
|
||
<div class="tier-tag">
|
||
The seed of a star. Where ideas take shape, and your first world begins to spin.
|
||
</div>
|
||
|
||
<div class="price">
|
||
<div class="num">$19</div>
|
||
<div class="cad">/mo</div>
|
||
</div>
|
||
|
||
<div class="bul">
|
||
<div class="row">
|
||
<div class="col-auto"><div class="dot"></div></div>
|
||
<div class="col">Clients, Projects, Tasks, Notes</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-auto"><div class="dot"></div></div>
|
||
<div class="col">Time tracking + basic invoicing</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-auto"><div class="dot"></div></div>
|
||
<div class="col">Solar dashboard + fast search</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-auto"><div class="dot"></div></div>
|
||
<div class="col">Lightweight client portal</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="choose" type="button">Choose Focus</button>
|
||
<div class="mt-2 text-center" style="font-size:12px;color:rgba(255,255,255,.45);">
|
||
Placeholder checkout — connect Stripe/Cashier when ready.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-lg-4">
|
||
<div class="price-card popular h-100">
|
||
<div class="d-flex align-items-center justify-content-between">
|
||
<div class="tier">Orbit</div>
|
||
<div class="popular-badge">Most Popular</div>
|
||
</div>
|
||
<div class="tier-tag">
|
||
Many worlds. One rhythm. Expand your cosmos and bring harmony to your growing constellation.
|
||
</div>
|
||
|
||
<div class="price">
|
||
<div class="num">$49</div>
|
||
<div class="cad">/mo</div>
|
||
</div>
|
||
|
||
<div class="bul">
|
||
<div class="row">
|
||
<div class="col-auto"><div class="dot"></div></div>
|
||
<div class="col">Everything in Focus</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-auto"><div class="dot"></div></div>
|
||
<div class="col">Automations + advanced workflows</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-auto"><div class="dot"></div></div>
|
||
<div class="col">Narratives (story threads)</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-auto"><div class="dot"></div></div>
|
||
<div class="col">Team collaboration + roles</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="choose" type="button">Choose Orbit</button>
|
||
<div class="mt-2 text-center" style="font-size:12px;color:rgba(255,255,255,.45);">
|
||
Placeholder checkout — connect Stripe/Cashier when ready.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-lg-4">
|
||
<div class="price-card h-100">
|
||
<div class="d-flex align-items-center justify-content-between">
|
||
<div class="tier">Eos</div>
|
||
</div>
|
||
<div class="tier-tag">
|
||
Light that thinks. An intelligence born of stars, guiding your universe forward.
|
||
</div>
|
||
|
||
<div class="price">
|
||
<div class="num">$99</div>
|
||
<div class="cad">/mo</div>
|
||
</div>
|
||
|
||
<div class="bul">
|
||
<div class="row">
|
||
<div class="col-auto"><div class="dot"></div></div>
|
||
<div class="col">Everything in Orbit</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-auto"><div class="dot"></div></div>
|
||
<div class="col">AI assistant + insights</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-auto"><div class="dot"></div></div>
|
||
<div class="col">Priority support + early features</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-auto"><div class="dot"></div></div>
|
||
<div class="col">Advanced reporting + forecasts</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="choose" type="button">Choose Eos</button>
|
||
<div class="mt-2 text-center" style="font-size:12px;color:rgba(255,255,255,.45);">
|
||
Placeholder checkout — connect Stripe/Cashier when ready.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- RESOURCES + CTA -->
|
||
<section class="section anchor" id="resources">
|
||
<div class="container">
|
||
<div class="kicker">RESOURCES</div>
|
||
<div class="h2">Learn the system. Then make it yours.</div>
|
||
<div class="section-p">
|
||
Guides, templates, and patterns that help you build a universe that stays coherent under pressure.
|
||
</div>
|
||
|
||
<div class="row g-3 mt-4">
|
||
<div class="col-12 col-md-4">
|
||
<div class="glass p-4 h-100">
|
||
<div style="font-size:16px;font-weight:500;">Universe Setup Guide</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);">
|
||
A clean starting structure for clients, projects, and narratives.
|
||
</div>
|
||
<div class="thumb mt-4" style="height:120px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-md-4">
|
||
<div class="glass p-4 h-100">
|
||
<div style="font-size:16px;font-weight:500;">Workflow Templates</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);">
|
||
Common arcs for studios, freelancers, and small teams.
|
||
</div>
|
||
<div class="thumb mt-4" style="height:120px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-md-4">
|
||
<div class="glass p-4 h-100">
|
||
<div style="font-size:16px;font-weight:500;">Automation Playbook</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);">
|
||
High-impact triggers that save hours every week.
|
||
</div>
|
||
<div class="thumb mt-4" style="height:120px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass mt-4 p-4">
|
||
<div class="row g-3 align-items-center">
|
||
<div class="col-12 col-md-8">
|
||
<div style="font-size:12px;color:rgba(255,255,255,.50);">Early access</div>
|
||
<div class="mt-2" style="font-size:22px;font-weight:500;">Get into Lumerel while it’s still becoming.</div>
|
||
<div class="mt-2" style="font-size:14px;color:rgba(255,255,255,.70);max-width:70ch;">
|
||
If you’re building ambitious work—and you want a system that keeps the narrative intact—join the waitlist.
|
||
You’ll get early access, updates, and a direct line to the roadmap.
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
<div style="border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.50);padding:12px;">
|
||
<div class="d-flex gap-2">
|
||
<input class="form-control"
|
||
style="background:rgba(0,0,0,.60);border:1px solid rgba(255,255,255,.10);color:#fff;border-radius:14px;padding:12px 14px;"
|
||
placeholder="Email address" />
|
||
<button class="btn"
|
||
style="border-radius:14px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.10);color:#fff;font-weight:500;">
|
||
Join
|
||
</button>
|
||
</div>
|
||
<div class="mt-2" style="font-size:12px;color:rgba(255,255,255,.45);">
|
||
Placeholder form — wire it to your provider.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- FOOTER -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="row g-4">
|
||
<div class="col-12 col-md-4">
|
||
<div style="font-size:18px;font-weight:600;color:#fff;">Lumerel</div>
|
||
<div class="mt-2" style="max-width:48ch;">
|
||
Lumerel keeps your story coherent while you build it.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 col-md-8">
|
||
<div class="row g-3">
|
||
<div class="col-6 col-md-4">
|
||
<div class="kicker">PRODUCT</div>
|
||
<div class="mt-3 d-flex flex-column gap-2">
|
||
<a href="#features" class="nav-linkish">Features</a>
|
||
<a href="#get-started" class="nav-linkish">Pricing</a>
|
||
<a href="#" class="nav-linkish">Security</a>
|
||
<a href="#" class="nav-linkish">Changelog</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-6 col-md-4">
|
||
<div class="kicker">DEVELOPERS</div>
|
||
<div class="mt-3 d-flex flex-column gap-2">
|
||
<a href="#developers" class="nav-linkish">API (soon)</a>
|
||
<a href="#developers" class="nav-linkish">Webhooks (soon)</a>
|
||
<a href="#developers" class="nav-linkish">CLI (soon)</a>
|
||
<a href="#" class="nav-linkish">Status</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-6 col-md-4">
|
||
<div class="kicker">RESOURCES</div>
|
||
<div class="mt-3 d-flex flex-column gap-2">
|
||
<a href="#resources" class="nav-linkish">Guides</a>
|
||
<a href="#resources" class="nav-linkish">Templates</a>
|
||
<a href="#resources" class="nav-linkish">Community</a>
|
||
<a href="#resources" class="nav-linkish">Support</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fine d-flex flex-column flex-md-row align-items-md-center justify-content-md-between gap-2">
|
||
<div>© <span id="year"></span> Lumerel. All rights reserved.</div>
|
||
<div class="d-flex gap-3">
|
||
<span style="cursor:pointer;" class="text-white-50 hover">Privacy</span>
|
||
<span style="cursor:pointer;" class="text-white-50 hover">Terms</span>
|
||
<span style="cursor:pointer;" class="text-white-50 hover">Contact</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- WAITLIST MODAL -->
|
||
<div class="modal fade" id="waitlistModal" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content" style="background:#070707;border:1px solid rgba(255,255,255,.10);border-radius:18px;">
|
||
<div class="modal-header" style="border-bottom:1px solid rgba(255,255,255,.10);">
|
||
<h5 class="modal-title" style="font-weight:600;">Join the Waitlist</h5>
|
||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p style="color:rgba(255,255,255,.70);font-size:14px;">
|
||
Get early access and product updates. (Placeholder modal.)
|
||
</p>
|
||
<div class="d-flex gap-2">
|
||
<input class="form-control"
|
||
style="background:rgba(0,0,0,.60);border:1px solid rgba(255,255,255,.10);color:#fff;border-radius:14px;padding:12px 14px;"
|
||
placeholder="Email address" />
|
||
<button class="btn"
|
||
style="border-radius:14px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.10);color:#fff;font-weight:500;">
|
||
Join
|
||
</button>
|
||
</div>
|
||
<div class="mt-2" style="font-size:12px;color:rgba(255,255,255,.45);">
|
||
Wire this to your waitlist provider.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VIDEO MODAL -->
|
||
<div class="modal fade" id="videoModal" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||
<div class="modal-content" style="background:#070707;border:1px solid rgba(255,255,255,.10);border-radius:18px;overflow:hidden;">
|
||
<div class="modal-header" style="border-bottom:1px solid rgba(255,255,255,.10);">
|
||
<h5 class="modal-title" style="font-weight:600;">Overview</h5>
|
||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body p-0">
|
||
<div style="position:relative;padding-top:56.25%;background:#000;">
|
||
<div style="position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.60);font-size:14px;">
|
||
Drop your video embed here.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bootstrap 5 JS -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<script>
|
||
// year
|
||
document.getElementById("year").textContent = new Date().getFullYear();
|
||
|
||
// Optional: smooth scroll for in-page anchors (native-ish feel)
|
||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||
a.addEventListener("click", (e) => {
|
||
const href = a.getAttribute("href");
|
||
if (!href || href === "#") return;
|
||
const el = document.querySelector(href);
|
||
if (!el) return;
|
||
e.preventDefault();
|
||
el.scrollIntoView({ behavior: "smooth", block: "start" });
|
||
});
|
||
});
|
||
|
||
// Spline integration hint (placeholder)
|
||
// If you embed Spline, mount it inside #splineMount and remove the SVG + center placeholder.
|
||
// Example (if using Spline viewer script):
|
||
// <script type="module" src="https://unpkg.com/@splinetool/viewer@1.9.64/build/spline-viewer.js"></script>
|
||
// then inside #splineMount:
|
||
// <spline-viewer url="YOUR_SPLINE_URL"></spline-viewer>
|
||
</script>
|
||
</body>
|
||
</html> |