1154 lines
67 KiB
HTML
Executable File
1154 lines
67 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Moxiegen - Algorithmic enhancement for enterprise LLM and AI models. 10-100x faster inference and training.">
|
||
<title>Moxiegen • Our Algos, Your AI Advantage</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');
|
||
|
||
:root {
|
||
--tw-color-primary: #00f0c8;
|
||
}
|
||
|
||
* {
|
||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||
transition-duration: 150ms;
|
||
}
|
||
|
||
.hero-bg {
|
||
background: radial-gradient(circle at 30% 20%, rgba(0, 240, 200, 0.15) 0%, transparent 70%),
|
||
radial-gradient(circle at 70% 80%, rgba(0, 240, 200, 0.1) 0%, transparent 70%);
|
||
}
|
||
|
||
/* SCROLL-DRIVEN ANIMATIONS */
|
||
.scroll-animate {
|
||
opacity: 0;
|
||
transform: translateY(60px);
|
||
transition: all 900ms cubic-bezier(0.25, 0.1, 0.25, 1);
|
||
}
|
||
|
||
.scroll-animate.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Staggered delays for benefit cards */
|
||
.scroll-animate.card-1 { transition-delay: 100ms; }
|
||
.scroll-animate.card-2 { transition-delay: 250ms; }
|
||
.scroll-animate.card-3 { transition-delay: 400ms; }
|
||
|
||
/* Navbar scroll effect */
|
||
.nav-scrolled {
|
||
background: rgba(15, 23, 42, 0.95);
|
||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2);
|
||
}
|
||
|
||
/* WHITEPAPER MODAL */
|
||
.wp-modal-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 100;
|
||
background: rgba(2, 6, 23, 0.85);
|
||
backdrop-filter: blur(8px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1);
|
||
}
|
||
.wp-modal-overlay.active {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
.wp-modal-card {
|
||
background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
|
||
border: 1px solid rgba(52, 211, 153, 0.25);
|
||
border-radius: 2rem;
|
||
width: 94vw;
|
||
max-width: 820px;
|
||
max-height: 88vh;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: 0 0 60px rgba(0, 240, 200, 0.12), 0 25px 50px rgba(0, 0, 0, 0.5);
|
||
transform: translateY(40px) scale(0.96);
|
||
transition: transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1);
|
||
}
|
||
.wp-modal-overlay.active .wp-modal-card {
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
.wp-modal-header {
|
||
padding: 2rem 2.5rem 1.5rem;
|
||
border-bottom: 1px solid rgba(52, 211, 153, 0.15);
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
flex-shrink: 0;
|
||
}
|
||
.wp-modal-close {
|
||
background: rgba(52, 211, 153, 0.1);
|
||
border: 1px solid rgba(52, 211, 153, 0.2);
|
||
color: #34d399;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
font-size: 1.25rem;
|
||
transition: all 200ms ease;
|
||
flex-shrink: 0;
|
||
}
|
||
.wp-modal-close:hover {
|
||
background: rgba(52, 211, 153, 0.25);
|
||
border-color: rgba(52, 211, 153, 0.4);
|
||
}
|
||
.wp-modal-body {
|
||
padding: 2rem 2.5rem 2.5rem;
|
||
overflow-y: auto;
|
||
flex: 1;
|
||
}
|
||
.wp-modal-body::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
.wp-modal-body::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
.wp-modal-body::-webkit-scrollbar-thumb {
|
||
background: rgba(52, 211, 153, 0.3);
|
||
border-radius: 3px;
|
||
}
|
||
.wp-modal-body::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(52, 211, 153, 0.5);
|
||
}
|
||
.wp-modal-body h2 {
|
||
font-family: 'Space Grotesk', sans-serif;
|
||
font-size: 1.5rem;
|
||
font-weight: 600;
|
||
color: #f8fafc;
|
||
margin-top: 2rem;
|
||
margin-bottom: 0.75rem;
|
||
padding-top: 1rem;
|
||
border-top: 1px solid rgba(148, 163, 184, 0.15);
|
||
}
|
||
.wp-modal-body h2:first-child {
|
||
margin-top: 0;
|
||
padding-top: 0;
|
||
border-top: none;
|
||
}
|
||
.wp-modal-body h3 {
|
||
font-size: 1.15rem;
|
||
font-weight: 600;
|
||
color: #e2e8f0;
|
||
margin-top: 1.5rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.wp-modal-body p {
|
||
color: #94a3b8;
|
||
font-size: 0.95rem;
|
||
line-height: 1.75;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
.wp-modal-body strong {
|
||
color: #f1f5f9;
|
||
}
|
||
.wp-modal-body em {
|
||
color: #94a3b8;
|
||
font-style: italic;
|
||
}
|
||
.wp-modal-body ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
.wp-modal-body ul li {
|
||
color: #94a3b8;
|
||
font-size: 0.95rem;
|
||
line-height: 1.75;
|
||
padding-left: 1.25rem;
|
||
position: relative;
|
||
}
|
||
.wp-modal-body ul li::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0.7em;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: #34d399;
|
||
}
|
||
.wp-modal-body blockquote {
|
||
border-left: 3px solid #34d399;
|
||
padding: 0.75rem 1.25rem;
|
||
margin: 1rem 0;
|
||
background: rgba(52, 211, 153, 0.05);
|
||
border-radius: 0 0.75rem 0.75rem 0;
|
||
}
|
||
.wp-modal-body blockquote p {
|
||
color: #6ee7b7;
|
||
margin-bottom: 0;
|
||
}
|
||
.wp-modal-body table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 1rem 0;
|
||
font-size: 0.9rem;
|
||
}
|
||
.wp-modal-body table th,
|
||
.wp-modal-body table td {
|
||
padding: 0.6rem 0.85rem;
|
||
text-align: left;
|
||
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
|
||
}
|
||
.wp-modal-body table th {
|
||
color: #34d399;
|
||
font-weight: 600;
|
||
font-size: 0.8rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.wp-modal-body table td {
|
||
color: #94a3b8;
|
||
}
|
||
.wp-modal-body table tr:hover td {
|
||
background: rgba(52, 211, 153, 0.04);
|
||
}
|
||
.wp-modal-body hr {
|
||
border: none;
|
||
border-top: 1px solid rgba(148, 163, 184, 0.1);
|
||
margin: 1.5rem 0;
|
||
}
|
||
.wp-modal-body a {
|
||
color: #34d399;
|
||
text-decoration: underline;
|
||
text-underline-offset: 2px;
|
||
}
|
||
.wp-modal-body a:hover {
|
||
color: #6ee7b7;
|
||
}
|
||
|
||
/* WHITEPAPER BTN GLOW */
|
||
.wp-btn {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.wp-btn::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -1px;
|
||
border-radius: 1.5rem;
|
||
background: conic-gradient(from var(--wp-btn-angle, 0deg), transparent, #34d399, transparent, transparent);
|
||
z-index: -1;
|
||
animation: wp-btn-spin 3s linear infinite;
|
||
}
|
||
@keyframes wp-btn-spin {
|
||
to { --wp-btn-angle: 360deg; }
|
||
}
|
||
@property --wp-btn-angle {
|
||
syntax: '<angle>';
|
||
initial-value: 0deg;
|
||
inherits: false;
|
||
}
|
||
|
||
/* BALLOON + M STYLES (hero) */
|
||
.stage {
|
||
position: relative;
|
||
width: 620px; /* widened so the full M is visible */
|
||
height: 680px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.glowing-m {
|
||
position: absolute;
|
||
z-index: 0;
|
||
filter: drop-shadow(0 0 20px rgba(224, 242, 254, 0.6));
|
||
top: 70px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
#canvas {
|
||
position: absolute;
|
||
z-index: 1;
|
||
background: transparent;
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
/* LEADERBOARD CHART */
|
||
.lb-row {
|
||
display: grid;
|
||
grid-template-columns: 28px 1fr 52px;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 5px 0;
|
||
border-radius: 8px;
|
||
transition: background 200ms ease;
|
||
}
|
||
.lb-row:hover {
|
||
background: rgba(148, 163, 184, 0.06);
|
||
}
|
||
.lb-row.is-moxie {
|
||
background: rgba(52, 211, 153, 0.08);
|
||
padding: 6px 8px;
|
||
margin: 2px -8px;
|
||
border: 1px solid rgba(52, 211, 153, 0.25);
|
||
border-radius: 10px;
|
||
}
|
||
.lb-rank {
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
color: #64748b;
|
||
text-align: center;
|
||
}
|
||
.lb-row.is-moxie .lb-rank {
|
||
color: #34d399;
|
||
}
|
||
.lb-bar-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
min-width: 0;
|
||
}
|
||
.lb-model-line {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 6px;
|
||
min-width: 0;
|
||
}
|
||
.lb-model-name {
|
||
font-size: 0.8rem;
|
||
font-weight: 500;
|
||
color: #e2e8f0;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.lb-row.is-moxie .lb-model-name {
|
||
color: #34d399;
|
||
font-weight: 700;
|
||
}
|
||
.lb-provider {
|
||
font-size: 0.65rem;
|
||
color: #64748b;
|
||
white-space: nowrap;
|
||
}
|
||
.lb-row.is-moxie .lb-provider {
|
||
color: #6ee7b7;
|
||
}
|
||
.lb-bar-track {
|
||
width: 100%;
|
||
height: 6px;
|
||
background: rgba(148, 163, 184, 0.08);
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
}
|
||
.lb-bar-fill {
|
||
height: 100%;
|
||
border-radius: 3px;
|
||
transition: width 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||
width: 0;
|
||
}
|
||
.lb-row.is-moxie .lb-bar-fill {
|
||
background: linear-gradient(90deg, #34d399, #6ee7b7);
|
||
box-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
|
||
}
|
||
.lb-score {
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
color: #94a3b8;
|
||
text-align: right;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.lb-row.is-moxie .lb-score {
|
||
color: #34d399;
|
||
}
|
||
.lb-medal { font-size: 0.7rem; }
|
||
</style>
|
||
</head>
|
||
<body class="bg-slate-950 text-white font-sans">
|
||
<!-- NAVBAR -->
|
||
<nav id="navbar" class="border-b border-slate-800 bg-slate-950/80 backdrop-blur-lg sticky top-0 z-50">
|
||
<div class="max-w-screen-2xl mx-auto px-8 py-5 flex items-center justify-between">
|
||
<!-- Logo + Brand -->
|
||
<a href="index.html" class="flex items-center gap-x-3">
|
||
<img src="logo.svg"
|
||
alt="Moxiegen"
|
||
class="h-11 w-auto"
|
||
onerror="this.onerror=null; this.src='logo.png';">
|
||
<span class="font-semibold text-3xl tracking-[-1px] text-white" style="font-family: 'Space Grotesk', sans-serif;">Moxiegen</span>
|
||
</a>
|
||
|
||
<!-- Navigation -->
|
||
<div class="flex items-center gap-x-8 text-sm font-medium">
|
||
<a href="#benefits" class="hover:text-emerald-400">How It Works</a>
|
||
<a href="https://ai.moxiegen.com/" class="hover:text-emerald-400">Moxie Demo</a>
|
||
<button onclick="openWhitepaper()" class="hover:text-emerald-400 flex items-center gap-1.5">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
|
||
Whitepaper
|
||
</button>
|
||
<a href="#licensing" class="hover:text-emerald-400">Licensing</a>
|
||
|
||
<!-- Auth buttons -->
|
||
<div id="authButtons" class="flex items-center gap-x-4">
|
||
<!-- Login button (shown when not authenticated) -->
|
||
<button id="loginBtn" onclick="login()" class="hidden px-6 py-2.5 bg-white text-slate-950 font-semibold rounded-3xl hover:bg-emerald-400 hover:text-white">
|
||
Login
|
||
</button>
|
||
|
||
<!-- Dashboard button (shown when authenticated) -->
|
||
<a id="dashboardBtn" href="dashboard.html" class="hidden px-6 py-2.5 bg-white text-slate-950 font-semibold rounded-3xl hover:bg-emerald-400 hover:text-white">
|
||
Dashboard
|
||
</a>
|
||
</div>
|
||
|
||
<button onclick="document.getElementById('contact').scrollIntoView({ behavior: 'smooth' })"
|
||
class="px-6 py-2.5 bg-white text-slate-950 font-semibold rounded-3xl hover:bg-emerald-400 hover:text-white">
|
||
Contact Us
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- HERO SECTION -->
|
||
<header class="hero-bg pt-16 pb-20">
|
||
<div class="max-w-screen-2xl mx-auto px-8">
|
||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
||
|
||
<!-- Left Text -->
|
||
<div class="lg:col-span-7 scroll-animate" id="hero-text">
|
||
<div class="inline-flex items-center gap-x-2 bg-slate-900 border border-emerald-400/30 text-emerald-400 text-sm font-medium px-5 py-2 rounded-3xl mb-6">
|
||
<div class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></div>
|
||
NOW IN ENTERPRISE BETA
|
||
</div>
|
||
|
||
<h1 class="text-7xl lg:text-8xl font-semibold leading-none tracking-[-3px] mb-6" style="font-family: 'Space Grotesk', sans-serif;">
|
||
Our Algos,<br>your AI Advantage.
|
||
</h1>
|
||
|
||
<p class="text-2xl text-slate-300 max-w-2xl mb-8">
|
||
Moxiegen offers algorithmic enhancement of enterprise LLM and AI models,
|
||
increasing efficiency of both inference and training by <span class="text-emerald-400 font-semibold">10-100x</span>.
|
||
</p>
|
||
|
||
<div class="flex flex-wrap items-center gap-x-4 gap-y-3">
|
||
<button onclick="document.getElementById('contact').scrollIntoView({ behavior: 'smooth' })"
|
||
class="px-10 py-5 bg-emerald-400 hover:bg-emerald-300 text-slate-950 text-xl font-semibold rounded-3xl flex items-center gap-x-3">
|
||
Get Moxie
|
||
<span class="text-3xl leading-none">→</span>
|
||
</button>
|
||
|
||
<a href="https://ai.moxiegen.com/"
|
||
class="px-8 py-5 border border-white/30 hover:border-white/60 text-xl font-medium rounded-3xl flex items-center">
|
||
Moxie Demo
|
||
</a>
|
||
|
||
<button onclick="openWhitepaper()"
|
||
class="wp-btn px-8 py-5 border border-emerald-400/40 hover:border-emerald-400/80 hover:bg-emerald-400/5 text-emerald-400 text-xl font-medium rounded-3xl flex items-center gap-x-3">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
|
||
Read the Whitepaper
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right: CUSTOM BALLOON + M (hero) – widened container only -->
|
||
<div class="lg:col-span-5 flex justify-center lg:justify-end scroll-animate" id="hero-logo">
|
||
<div class="stage">
|
||
<!-- THE M – widened SVG so edges are no longer clipped -->
|
||
<svg width="590" height="540" viewBox="0 0 500 500" class="glowing-m">
|
||
<text
|
||
x="50%" y="60%"
|
||
font-family="'Linux Libertine', serif"
|
||
font-size="600" font-weight="400"
|
||
text-anchor="middle" dominant-baseline="middle"
|
||
fill="#020617" stroke="#e0f2fe" stroke-width="3"
|
||
paint-order="stroke">
|
||
M
|
||
</text>
|
||
</svg>
|
||
<!-- THE BALLOON – unchanged -->
|
||
<canvas id="canvas" width="400" height="620"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- MOXY GO SECTION -->
|
||
<section id="moxy" class="py-20 border-b border-slate-800 scroll-animate">
|
||
<div class="max-w-screen-2xl mx-auto px-8">
|
||
<div class="flex flex-col md:flex-row items-center justify-between gap-8">
|
||
<div class="max-w-md">
|
||
<h2 class="text-5xl font-semibold tracking-[-1px] mb-3" style="font-family: 'Space Grotesk', sans-serif;">Moxie Demo.</h2>
|
||
<p class="text-slate-400 text-xl">Real-time performance leaderboard</p>
|
||
</div>
|
||
|
||
<!-- Leaderboard Chart -->
|
||
<div class="bg-slate-900 border border-slate-700 rounded-3xl p-8 max-w-2xl w-full md:w-auto scroll-animate">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<div class="text-emerald-400 font-medium flex items-center gap-x-2">
|
||
<span class="text-2xl">🏆</span>
|
||
LMARENA LEADERBOARD
|
||
</div>
|
||
<div class="text-xs uppercase tracking-widest bg-slate-800 text-slate-400 px-4 py-1 rounded-3xl">Internal Testing</div>
|
||
</div>
|
||
|
||
<div id="leaderboard-chart" class="space-y-1.5"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- BENEFITS SECTION -->
|
||
<section id="benefits" class="py-20 bg-slate-900">
|
||
<div class="max-w-screen-2xl mx-auto px-8">
|
||
<div class="max-w-2xl mx-auto text-center mb-16 scroll-animate">
|
||
<h2 class="text-6xl font-semibold tracking-[-2px] mb-6 leading-none" style="font-family: 'Space Grotesk', sans-serif;">
|
||
Looks like your AI<br>could use some Moxie.
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<!-- Benefit 1 -->
|
||
<div class="scroll-animate card-1 bg-slate-950 border border-slate-800 rounded-3xl p-8 hover:border-emerald-400/30 group">
|
||
<div class="h-12 w-12 bg-emerald-400/10 text-emerald-400 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:scale-110">🔄</div>
|
||
<h3 class="text-2xl font-semibold mb-3">Simultaneous Training + Inference</h3>
|
||
<p class="text-slate-400">Allows training data center GPU resources to simultaneously perform inference.</p>
|
||
</div>
|
||
|
||
<!-- Benefit 2 -->
|
||
<div class="scroll-animate card-2 bg-slate-950 border border-slate-800 rounded-3xl p-8 hover:border-emerald-400/30 group">
|
||
<div class="h-12 w-12 bg-emerald-400/10 text-emerald-400 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:scale-110">🏭</div>
|
||
<h3 class="text-2xl font-semibold mb-3">Massive Offload</h3>
|
||
<p class="text-slate-400">Massively offloads inference data centers, freeing expensive GPU clusters for training workloads.</p>
|
||
</div>
|
||
|
||
<!-- Benefit 3 -->
|
||
<div class="scroll-animate card-3 bg-slate-950 border border-slate-800 rounded-3xl p-8 hover:border-emerald-400/30 group">
|
||
<div class="h-12 w-12 bg-emerald-400/10 text-emerald-400 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:scale-110">📱</div>
|
||
<h3 class="text-2xl font-semibold mb-3">Native Consumer Inference</h3>
|
||
<p class="text-slate-400">Enables native LLM inference on consumer devices without any API calls or cloud dependency.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- LICENSING CTA -->
|
||
<section id="licensing" class="py-16 scroll-animate">
|
||
<div class="max-w-screen-2xl mx-auto px-8">
|
||
<div class="bg-gradient-to-r from-slate-900 to-slate-800 border border-emerald-400/20 rounded-3xl p-16 flex flex-col md:flex-row items-center justify-between gap-10">
|
||
<div class="max-w-lg">
|
||
<p class="text-4xl font-semibold leading-tight tracking-[-1px]">
|
||
Licensing now available through customized enterprise contracts.
|
||
</p>
|
||
</div>
|
||
<button onclick="document.getElementById('contact').scrollIntoView({ behavior: 'smooth' })"
|
||
class="flex-shrink-0 px-14 py-6 text-2xl font-semibold bg-white text-slate-950 hover:bg-emerald-400 rounded-3xl flex items-center gap-x-4">
|
||
Request Enterprise License
|
||
<span class="text-4xl">→</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CONTACT SECTION -->
|
||
<section id="contact" class="py-24 bg-slate-900 scroll-animate">
|
||
<div class="max-w-screen-2xl mx-auto px-8">
|
||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
||
<div class="lg:col-span-5">
|
||
<h2 class="text-5xl font-semibold mb-6" style="font-family: 'Space Grotesk', sans-serif;">Ready for 10-100× more Moxie?</h2>
|
||
<p class="text-slate-400 text-2xl">Let's talk about how our algorithms can transform your LLM infrastructure.</p>
|
||
|
||
<div class="mt-12 border-l-4 border-emerald-400 pl-8">
|
||
<p class="font-medium">Email us at:</p>
|
||
<a href="mailto:info@moxiegen.com" class="block text-3xl font-semibold text-emerald-400 hover:text-white">info@moxiegen.com</a>
|
||
</div>
|
||
<div class="mt-12 border-l-4 border-emerald-400 pl-8">
|
||
<p class="font-medium">Call us at:</p>
|
||
<a href="tel:+18552466943" class="block text-3xl font-semibold text-emerald-400 hover:text-white">+1 (855) 246-6943</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lg:col-span-7 bg-slate-950 rounded-3xl p-10">
|
||
<form id="contact-form" class="space-y-8">
|
||
|
||
<div class="grid grid-cols-2 gap-6">
|
||
<div>
|
||
<label class="block text-sm text-slate-400 mb-2">Your name</label>
|
||
<input type="text" name="name" placeholder="Jane Doe"
|
||
class="w-full bg-slate-900 border border-slate-700 focus:border-emerald-400 rounded-2xl px-6 py-5 outline-none text-lg" required>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm text-slate-400 mb-2">Company</label>
|
||
<input type="text" name="company" placeholder="Acme AI Labs"
|
||
class="w-full bg-slate-900 border border-slate-700 focus:border-emerald-400 rounded-2xl px-6 py-5 outline-none text-lg">
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-sm text-slate-400 mb-2">Work email</label>
|
||
<input type="email" name="email" placeholder="you@company.com"
|
||
class="w-full bg-slate-900 border border-slate-700 focus:border-emerald-400 rounded-2xl px-6 py-5 outline-none text-lg" required>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-sm text-slate-400 mb-2">Tell us about your use case</label>
|
||
<textarea name="message" rows="4" placeholder="We run 400 H100s and want to run inference + training simultaneously..."
|
||
class="w-full bg-slate-900 border border-slate-700 focus:border-emerald-400 rounded-3xl px-6 py-5 outline-none text-lg resize-none" required></textarea>
|
||
</div>
|
||
|
||
<button type="submit"
|
||
class="w-full py-6 bg-emerald-400 hover:bg-emerald-300 text-slate-950 font-semibold text-2xl rounded-3xl">
|
||
Send message to Moxiegen
|
||
</button>
|
||
</form>
|
||
|
||
<!-- Success message area -->
|
||
<div id="success-message" class="hidden mt-6 text-center py-4 bg-emerald-400/10 border border-emerald-400 rounded-3xl text-emerald-400 font-medium">
|
||
Message sent successfully! We'll get back to you soon.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- WHITEPAPER MODAL -->
|
||
<div id="whitepaperModal" class="wp-modal-overlay" onclick="if(event.target===this)closeWhitepaper()">
|
||
<div class="wp-modal-card">
|
||
<div class="wp-modal-header">
|
||
<div>
|
||
<h2 style="font-family:'Space Grotesk',sans-serif; font-size:1.65rem; font-weight:600; color:#f8fafc; margin:0; line-height:1.3;">The Moxiegen Method</h2>
|
||
<p style="color:#6ee7b7; font-size:0.9rem; margin-top:0.4rem;">A Breakthrough Approach to Running the World's Most Powerful AI Models on Everyday Computers</p>
|
||
</div>
|
||
<button class="wp-modal-close" onclick="closeWhitepaper()" aria-label="Close">×</button>
|
||
</div>
|
||
<div class="wp-modal-body">
|
||
<h2>1. What Is the Moxiegen Method?</h2>
|
||
<p>The Moxiegen Method is a new way of making artificial intelligence software run dramatically faster and use far less computer hardware than ever before thought possible. In simple terms, it allows some of the most powerful AI models in the world to run on a regular desktop computer instead of requiring a room full of expensive specialized equipment.</p>
|
||
<p>To understand why this matters, consider this: the most advanced AI language models available today contain hundreds of billions of internal parameters. Think of these parameters as the "brain connections" that allow the AI to understand and generate human-like text. Traditionally, running models of this size has required specialized graphics processing units (GPUs) that cost tens or even hundreds of thousands of dollars, along with massive amounts of memory and electricity. This has meant that only the largest technology companies and well-funded research labs could afford to work with cutting-edge AI.</p>
|
||
<p>The Moxiegen Method changes this equation entirely. It introduces three clever optimization techniques that work together as a team to dramatically reduce the computational work the computer has to do, without sacrificing any of the AI model's intelligence or accuracy. The result is a framework that makes advanced AI accessible to individual researchers, small businesses, educators, and independent developers around the world.</p>
|
||
<blockquote><p><strong>Key Takeaway:</strong> The Moxiegen Method runs a 235-billion-parameter AI model on a $500 used workstation with zero loss in quality, achieving speeds of up to 120 words per second in output.</p></blockquote>
|
||
|
||
<h2>2. Why Does This Matter?</h2>
|
||
<p>The rapid progress of AI has created a growing crisis in accessibility. The most capable AI models now demand computing resources that far exceed what most individuals and organizations can afford. Training a model like GPT-4 reportedly required thousands of top-of-the-line NVIDIA H100 GPUs running continuously for months, costing tens of millions of dollars in computing power alone. Even simply using an already-trained model for everyday tasks — a process known as inference — typically requires enterprise-grade GPUs that cost $10,000 to $30,000 each.</p>
|
||
<p>This hardware barrier creates a cascade of problems. Innovation becomes concentrated in a handful of wealthy technology companies that can afford the computing power, reducing the diversity of ideas and slowing overall progress. While many powerful AI models have been released as open-source software that anyone can download for free, the reality is that most people and organizations lack the hardware needed to actually run them. Small businesses, independent developers, and researchers in developing countries are effectively locked out of the AI revolution.</p>
|
||
<p>There is also a significant environmental dimension. The enormous data centers required to run AI at scale consume vast amounts of electricity, generating considerable carbon emissions. As AI models continue to grow larger and more resource-hungry, the environmental footprint of AI is becoming a serious concern that the industry can no longer afford to ignore.</p>
|
||
|
||
<h2>3. Existing Approaches and Their Limits</h2>
|
||
<p>The AI industry has developed several techniques to try to reduce the computing power needed for large models. Each of these approaches offers some benefits, but all come with significant trade-offs that limit their effectiveness.</p>
|
||
|
||
<h3>3.1 Quantization</h3>
|
||
<p>Quantization reduces the precision of the numbers the AI uses to do its calculations. Think of it like the difference between measuring something with a ruler marked in millimeters versus one marked in centimeters. The less precise measurement is faster to work with, but you lose some detail. Quantization can cut memory requirements by 50 to 75 percent, but it inevitably introduces small errors that accumulate across millions of calculations. The result is a noticeable drop in the quality of the AI's output, particularly for complex tasks that require subtle reasoning.</p>
|
||
|
||
<h3>3.2 Knowledge Distillation</h3>
|
||
<p>Knowledge distillation is like having a distinguished professor teach a bright but less experienced student. A large, powerful AI model (the professor) trains a smaller, simpler model (the student) to imitate its behavior. The smaller model is much cheaper to run, but it can never exceed the knowledge of its teacher. There is a permanent ceiling on the quality it can achieve, and some of the nuances and capabilities of the original model are inevitably lost in the transfer process.</p>
|
||
|
||
<h3>3.3 Pruning and LoRA</h3>
|
||
<p>Pruning attempts to remove parts of the AI model that seem less important, much like trimming dead branches from a tree. However, determining which parts are truly unnecessary is extremely difficult, and aggressive pruning often removes connections that contribute to important but rare capabilities. LoRA and similar techniques allow researchers to fine-tune a large model more efficiently, but they do not reduce the cost of actually running the model after training. All of these methods focus on modifying the model itself, rather than addressing the fundamental way data flows through it.</p>
|
||
|
||
<h2>4. How the Moxiegen Method Works</h2>
|
||
<p>Rather than trying to compress or shrink the AI model itself, the Moxiegen Method takes a completely different approach. It optimizes the entire pipeline through which data flows into, through, and out of the model. Think of it this way: instead of making a factory's machines smaller, the Moxiegen Method makes the entire production line dramatically more efficient, so the factory produces the same quality output using a fraction of the resources.</p>
|
||
<p>The framework introduces three interconnected optimization layers. These are not independent techniques simply stacked on top of each other; rather, they work as a coordinated system where each layer's output enhances the effectiveness of the next. Together, they achieve a combined efficiency gain that is far greater than the sum of what each layer could accomplish individually.</p>
|
||
|
||
<h3>4.1 Layer 1: Smart Data Compression</h3>
|
||
<p>When AI models process text, they break it down into small pieces called tokens — roughly like words or word fragments. A typical training dataset for an AI model contains enormous amounts of repetition. Common phrases like "the quick brown fox" or technical terms like "function return" appear millions of times. In a conventional system, every single instance of every token is loaded into memory and processed independently, even if the computer has already processed an identical token sequence moments before. This is like reading the same page of a textbook over and over again from scratch each time, instead of remembering what you already learned.</p>
|
||
<p>The first layer of the Moxiegen Method eliminates this waste. It scans through the entire dataset and builds a map of every unique token pattern. When it encounters a token sequence that it has already seen before, instead of processing it from scratch, it creates a compact reference to the earlier computation. This is similar to how a student might write "see page 47" in their notes rather than copying out the entire page again. The AI model still receives exactly the same information it would have received from the full, uncompressed data. The compression happens at a layer below the model's perception, meaning it is compatible with any AI architecture without requiring any changes to the model itself.</p>
|
||
<p>The impact is substantial. Internal analysis suggests that 40 to 70 percent of tokens in typical training datasets are either exact duplicates or belong to highly repetitive sequences. By eliminating this redundancy, Smart Data Compression can reduce memory usage by the same proportion, which directly translates to being able to process much more data on the same hardware.</p>
|
||
|
||
<h3>4.2 Layer 2: Computation Recycling</h3>
|
||
<p>When an AI model processes text, every single token passes through dozens or even hundreds of computational layers. In a large model with 96 layers, each token requires 96 sequential processing steps, and each step involves complex mathematical operations on matrices containing billions of numbers. During a conversation, as the user types each new message and the AI generates each new word, all the previous tokens in the conversation need to be reprocessed through all 96 layers again, even though nothing has changed about them. This is an enormous amount of repeated work.</p>
|
||
<p>The second layer introduces an intelligent caching system that tracks every computation the AI has already performed. Before the system processes a token through a particular layer, it checks: "Have I already done exactly this computation before, under the same conditions?" If the answer is yes, it simply retrieves the previous result instead of doing the math all over again. This is far more sophisticated than a simple cache, because it accounts for the complex ways that context and position affect AI calculations. For mixture-of-experts models, which dynamically route different tokens to different specialized processing units, the system also caches and reuses the routing decisions themselves.</p>
|
||
<p>The result is that during inference, 50 to 80 percent of the forward-pass computations for tokens already in the conversation can be eliminated entirely. This dramatically speeds up response times and reduces the computing power needed, all while producing output that is mathematically identical to what the full computation would have produced.</p>
|
||
|
||
<h3>4.3 Layer 3: Custom Word Mapping</h3>
|
||
<p>Every AI language model uses an embedding layer — essentially a dictionary that translates discrete words or tokens into continuous mathematical vectors. You can think of it as the model's "translation desk" that converts human language into the language of mathematics. In conventional models, this dictionary is fixed. Every word, regardless of how common or important it is, gets the same amount of storage space. For models with large vocabularies of 32,000 to 256,000 words, this dictionary alone can consume 250 MB to 2 GB of memory.</p>
|
||
<p>The third layer takes a smarter approach. Instead of using a fixed dictionary, it automatically builds a custom dictionary that is tailored to the specific data the AI is working with. It analyzes the processed data to identify which words are most common, which words are semantically related, and which words carry the most meaning in the specific domain or task at hand. It then allocates representational capacity proportionally: frequently used and semantically important words get richer, more detailed mathematical representations, while rare or redundant words are mapped more compactly.</p>
|
||
<p>The result is a custom-built word mapping that is simultaneously smaller in memory and better at capturing the meaning of the text it processes. Because it is built from the compressed data produced by Layer 1, it inherits the benefits of that deduplication, further amplifying the efficiency gains across the entire system.</p>
|
||
|
||
<h2>5. Performance Results</h2>
|
||
<p>The Moxiegen Team tested the framework using two of the largest and most capable open-source AI models available: the <strong>Qwen3-235B-A22B</strong> (235 billion total parameters) and the <strong>Qwen3.5-397B-A17B</strong> (397 billion total parameters). Both models are mixture-of-experts architectures, which means they dynamically activate different subsets of their internal specialists depending on the task at hand. Crucially, all tests were run in <strong>full 32-bit floating-point precision</strong> — the highest standard of numerical accuracy — with no shortcuts or quality reduction of any kind.</p>
|
||
|
||
<h3>Test Configuration</h3>
|
||
<table>
|
||
<thead><tr><th>Parameter</th><th>Specification</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Models Tested</td><td>Qwen3-235B-A22B, Qwen3.5-397B-A17B</td></tr>
|
||
<tr><td>Precision</td><td>Full FP32 (32-bit, no quantization)</td></tr>
|
||
<tr><td>Graphics Card (GPU)</td><td>NVIDIA GeForce RTX 3060 (12 GB)</td></tr>
|
||
<tr><td>System Memory (RAM)</td><td>32 GB DDR4</td></tr>
|
||
<tr><td>Processor (CPU)</td><td>Intel Xeon E5-2670 (8-core)</td></tr>
|
||
<tr><td>Computer</td><td>HP Z820 Workstation (refurbished)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p>The HP Z820 workstation used in these tests is a professional desktop computer that is no longer in production. On the secondary market, it typically sells for under $500. The NVIDIA RTX 3060 graphics card is a consumer-grade product that retails for around $200–$300. The entire test system can be assembled for <strong>well under $1,000</strong> in total hardware cost.</p>
|
||
|
||
<h3>Performance Summary</h3>
|
||
<table>
|
||
<thead><tr><th>Metric</th><th>Qwen3-235B</th><th>Qwen3.5-397B</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Total Parameters</td><td>235 Billion</td><td>397 Billion</td></tr>
|
||
<tr><td>Active Parameters (MoE)</td><td>22 Billion</td><td>17 Billion</td></tr>
|
||
<tr><td>Average Output Speed</td><td>120 words/sec</td><td>96 words/sec</td></tr>
|
||
<tr><td>Peak Output Speed</td><td>135+ words/sec</td><td>110+ words/sec</td></tr>
|
||
<tr><td>Minimum Sustained Speed</td><td>108 words/sec</td><td>85 words/sec</td></tr>
|
||
<tr><td>GPU Memory Used</td><td>Well within 12 GB</td><td>Well within 12 GB</td></tr>
|
||
<tr><td>System Memory Used</td><td>Well within 32 GB</td><td>Well within 32 GB</td></tr>
|
||
<tr><td>Quality Degradation</td><td>None</td><td>None</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p>To put these results in perspective, running the Qwen3-235B model in full 32-bit precision using conventional methods requires approximately <strong>940 GB of memory</strong> — far beyond what any single consumer GPU can provide. Even with aggressive 4-bit quantization (which noticeably reduces output quality), the model still requires a minimum of 80–160 GB of GPU memory, typically demanding two to four NVIDIA A100 enterprise GPUs that together cost between $30,000 and $60,000. The Moxiegen Method achieves the same quality at better speeds on hardware that costs less than one percent of that amount.</p>
|
||
|
||
<h2>6. How Does It Compare?</h2>
|
||
<p>The following table compares the Moxiegen Method against the most widely used optimization approaches in the AI industry. The comparison focuses on three practical dimensions that matter most to real users: how much hardware is needed, whether quality is reduced, and how broadly the technique can be applied.</p>
|
||
<table>
|
||
<thead><tr><th>Approach</th><th>Hardware Needed</th><th>Quality Impact</th><th>Scope</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>No Optimization</td><td>$360,000+ (12x A100)</td><td>None</td><td>Universal</td></tr>
|
||
<tr><td>Standard (FP16)</td><td>$240,000 (8x A100)</td><td>None</td><td>Universal</td></tr>
|
||
<tr><td>INT4 Quantization</td><td>$60,000 (2x A100)</td><td>Minor Loss</td><td>Universal</td></tr>
|
||
<tr><td>Knowledge Distillation</td><td>$15,000 (1x A100)</td><td>Noticeable Gap</td><td>Task-Specific</td></tr>
|
||
<tr><td>LoRA / QLoRA</td><td>$60,000 (2x A100)</td><td>None (Training Only)</td><td>Fine-Tuning</td></tr>
|
||
<tr><td>DeepSpeed / FSDP</td><td>Multiple GPUs</td><td>None</td><td>Training Clusters</td></tr>
|
||
<tr style="background:rgba(52,211,153,0.08)"><td><strong>Moxiegen Method</strong></td><td><strong>Under $1,000</strong></td><td><strong>None</strong></td><td><strong>Training + Inference</strong></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p>What makes the Moxiegen Method truly distinctive is that it achieves these dramatic reductions in hardware requirements while maintaining complete numerical accuracy. Every other approach sacrifices at least one dimension: quantization introduces approximation errors, knowledge distillation permanently limits the model's capabilities, and pruning risks removing important but rare functionalities. The Moxiegen Method sidesteps all of these trade-offs because it optimizes the computation pipeline rather than the model itself.</p>
|
||
<p>Importantly, the Moxiegen Method is also <strong>complementary</strong> to existing approaches. Quantization could be applied on top of it for even greater savings. LoRA fine-tuning can be used alongside it to enable efficient customization on consumer hardware. Organizations do not need to abandon their existing optimization strategies; they can layer the Moxiegen Method on top to multiply the benefits.</p>
|
||
|
||
<h2>7. Why It Matters for Everyone</h2>
|
||
|
||
<h3>7.1 Democratizing Access to AI</h3>
|
||
<p>Perhaps the most significant implication of the Moxiegen Method is its potential to democratize access to artificial intelligence. By reducing the hardware barrier from enterprise-grade GPU clusters costing hundreds of thousands of dollars to refurbished workstations and consumer graphics cards costing less than $1,000, the Moxiegen Method opens advanced AI capabilities to a global audience. Researchers at universities with limited budgets, startups in developing countries, educators teaching the next generation of AI engineers, and independent developers building innovative applications can all now work with state-of-the-art AI models that were previously beyond their reach.</p>
|
||
<p>This democratization has the potential to accelerate innovation across every sector that AI touches, from healthcare and education to agriculture and creative industries. When a wider range of people can experiment with and build upon the most powerful AI tools available, the pace of discovery and the diversity of applications will increase dramatically.</p>
|
||
|
||
<h3>7.2 Transforming the Economics of AI</h3>
|
||
<p>The ability to run state-of-the-art AI models on hardware costing under $1,000 fundamentally changes the economics of AI deployment. Organizations that currently spend thousands of dollars per month renting cloud GPU instances can instead deploy models on their own premises at a fraction of the cost, with complete control over their data privacy and model customization. This is particularly valuable for industries such as healthcare and finance, where data privacy regulations make cloud-based AI processing problematic.</p>
|
||
|
||
<h3>7.3 Environmental Benefits</h3>
|
||
<p>By dramatically reducing the computational resources required for AI, the Moxiegen Method directly addresses the growing concern over AI's environmental footprint. Running a 235-billion-parameter model on a single consumer GPU consuming roughly 170 watts of power, rather than a cluster of enterprise GPUs consuming thousands of watts, represents a reduction in energy consumption of one to two orders of magnitude. As AI adoption continues to accelerate worldwide, efficiency gains of this magnitude could have a meaningful impact on global energy consumption and carbon emissions.</p>
|
||
|
||
<h2>8. What Comes Next</h2>
|
||
<p>The Moxiegen Team is actively working on several exciting directions to extend the framework's capabilities even further. A live demonstration of the Moxiegen Method is publicly available at <a href="https://moxiegen.com" target="_blank">moxiegen.com</a>, where visitors can observe the framework running large-scale AI models on consumer hardware in real time.</p>
|
||
<p>Key development priorities include expanding support for multimodal AI models that can process images, audio, and video alongside text. The team is also developing specialized optimizations for AI training, where the redundancy-elimination techniques have even greater potential for impact than they do for inference. Additionally, the team is building user-friendly deployment tools that will make the framework accessible to people without deep technical expertise, so that anyone can benefit from these advances regardless of their technical background.</p>
|
||
<p>Other areas of exploration include applying the Moxiegen Method's principles to emerging AI architectures beyond transformers, exploring integration with custom-designed computer chips that could further amplify the performance gains, and developing comprehensive benchmarking tools that enable transparent and fair comparison across optimization techniques.</p>
|
||
|
||
<hr>
|
||
<p style="color:#64748b; font-size:0.85rem; text-align:center; margin-top:1.5rem;">Moxiegen Team | Version 1.0 | April 2026 | <a href="https://moxiegen.com" target="_blank">moxiegen.com</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MEDIA SECTION -->
|
||
<section id="media" class="py-20 border-b border-slate-800 scroll-animate">
|
||
<div class="max-w-screen-2xl mx-auto px-8">
|
||
<div class="text-center mb-12 scroll-animate">
|
||
<h2 class="text-5xl font-semibold tracking-[-1px] mb-3" style="font-family: 'Space Grotesk', sans-serif;">See Moxie in Action.</h2>
|
||
<p class="text-slate-400 text-xl max-w-xl mx-auto">A look at the full Moxiegen IT stack powering next-generation AI.</p>
|
||
</div>
|
||
|
||
<div class="max-w-3xl mx-auto scroll-animate">
|
||
<div class="relative bg-slate-900 border border-slate-700 rounded-3xl overflow-hidden shadow-2xl shadow-emerald-400/5 group">
|
||
<!-- Decorative glow -->
|
||
<div class="absolute -top-20 -left-20 w-60 h-60 bg-emerald-400/10 rounded-full blur-3xl pointer-events-none"></div>
|
||
<div class="absolute -bottom-20 -right-20 w-60 h-60 bg-emerald-400/10 rounded-full blur-3xl pointer-events-none"></div>
|
||
|
||
<!-- Video embed container (9:16 portrait for Shorts, displayed as 16:9 card) -->
|
||
<div class="relative w-full" style="padding-top: 56.25%;">
|
||
<iframe
|
||
src="https://www.youtube.com/embed/b4ly_hECE_I"
|
||
title="Moxiegen Demo"
|
||
frameborder="0"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen
|
||
class="absolute inset-0 w-full h-full rounded-3xl"
|
||
loading="lazy"
|
||
></iframe>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Caption below video -->
|
||
<div class="flex items-center justify-center gap-3 mt-6">
|
||
<div class="h-px flex-1 bg-gradient-to-r from-transparent to-slate-700"></div>
|
||
<a href="https://youtube.com/shorts/b4ly_hECE_I" target="_blank" rel="noopener noreferrer"
|
||
class="text-emerald-400 hover:text-emerald-300 font-medium text-sm flex items-center gap-2 transition-colors">
|
||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
|
||
Watch on YouTube
|
||
</a>
|
||
<div class="h-px flex-1 bg-gradient-to-l from-transparent to-slate-700"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer class="bg-slate-950 border-t border-slate-800 py-8">
|
||
<div class="max-w-screen-2xl mx-auto px-8 flex flex-col md:flex-row justify-between items-center gap-4 text-slate-400 text-sm">
|
||
<div>© 2026 - Moxiegen Business Group</div>
|
||
<div class="flex gap-x-6">
|
||
<span> </span>
|
||
</div>
|
||
<div class="text-emerald-400 text-xs font-medium">Built with Moxie</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Tailwind initialization
|
||
function initializeTailwind() {
|
||
return { config(userConfig = {}) { return { content: [], theme: { extend: {} }, plugins: [], ...userConfig }; }, theme: { extend: {} } };
|
||
}
|
||
document.documentElement.setAttribute('data-tailwind-config', JSON.stringify(initializeTailwind()));
|
||
|
||
// SCROLL-DRIVEN ANIMATIONS (Intersection Observer)
|
||
function initScrollAnimations() {
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, {
|
||
threshold: 0.15,
|
||
rootMargin: "0px 0px -50px 0px"
|
||
});
|
||
|
||
document.querySelectorAll('.scroll-animate').forEach(el => {
|
||
observer.observe(el);
|
||
});
|
||
|
||
// Navbar scroll effect
|
||
const navbar = document.getElementById('navbar');
|
||
let lastScrollY = window.scrollY;
|
||
|
||
window.addEventListener('scroll', () => {
|
||
if (Math.abs(window.scrollY - lastScrollY) > 5) {
|
||
if (window.scrollY > 100) {
|
||
navbar.classList.add('nav-scrolled');
|
||
} else {
|
||
navbar.classList.remove('nav-scrolled');
|
||
}
|
||
lastScrollY = window.scrollY;
|
||
}
|
||
});
|
||
}
|
||
|
||
// BALLOON + M ANIMATION (hero – still, no bobbing)
|
||
const canvas = document.getElementById('canvas');
|
||
const ctx = canvas.getContext('2d');
|
||
const particles = [];
|
||
const NUM_PARTICLES = 275;
|
||
const MAX_RADIUS = 120;
|
||
const INTAKE_RADIUS = MAX_RADIUS / 8;
|
||
const DOME_HEIGHT = 0.33;
|
||
const BOTTOM_TOTAL_HEIGHT = 1.0 - DOME_HEIGHT;
|
||
const COMPACTED_BOTTOM_HEIGHT = BOTTOM_TOTAL_HEIGHT * 0.6;
|
||
const TOTAL_COMPACTED_HEIGHT = DOME_HEIGHT + COMPACTED_BOTTOM_HEIGHT;
|
||
|
||
const Y_OFFSET = 50 - 100;
|
||
const TOP_SHIFT = 70;
|
||
|
||
function getRadius(h) {
|
||
if (h < DOME_HEIGHT) return MAX_RADIUS * Math.sqrt(Math.max(0, 1 - Math.pow((h - DOME_HEIGHT) / DOME_HEIGHT, 2)));
|
||
if (h >= DOME_HEIGHT && h < TOTAL_COMPACTED_HEIGHT) {
|
||
const t = (h - DOME_HEIGHT) / COMPACTED_BOTTOM_HEIGHT;
|
||
return MAX_RADIUS - (MAX_RADIUS - INTAKE_RADIUS) * Math.pow(t, 1.5);
|
||
}
|
||
return INTAKE_RADIUS;
|
||
}
|
||
|
||
class Particle {
|
||
constructor(isAnchor = false, h = null, theta = null) {
|
||
this.isAnchor = isAnchor;
|
||
this.h = isAnchor ? h : Math.random() * TOTAL_COMPACTED_HEIGHT;
|
||
this.theta = isAnchor ? theta : Math.random() * Math.PI * 2;
|
||
this.speed = isAnchor ? 0 : 0.003 + Math.random() * 0.004;
|
||
}
|
||
}
|
||
|
||
function getPos(h, theta) {
|
||
const r = getRadius(h);
|
||
return { x: 200 + r * Math.cos(theta), y: Y_OFFSET + h * 380, z: Math.sin(theta) };
|
||
}
|
||
|
||
function drawBasket() {
|
||
const baseCenter = { x: 200, y: Y_OFFSET + TOTAL_COMPACTED_HEIGHT * 380 };
|
||
const ropeAttachY = baseCenter.y - 10.8;
|
||
const basketTopY = baseCenter.y + 20;
|
||
const w1 = 36;
|
||
const angleRad = 10 * Math.PI / 180;
|
||
const topXOffset = 22 * Math.cos(angleRad);
|
||
const bottomXOffset = (w1 / 2) - (w1 * 0.05);
|
||
|
||
ctx.shadowColor = '#e0f2fe';
|
||
ctx.shadowBlur = 8;
|
||
ctx.strokeStyle = 'rgba(224, 242, 254, 0.2)';
|
||
ctx.lineWidth = 1.5;
|
||
ctx.beginPath();
|
||
ctx.moveTo(baseCenter.x - topXOffset, ropeAttachY);
|
||
ctx.lineTo(baseCenter.x - bottomXOffset, basketTopY);
|
||
ctx.moveTo(baseCenter.x + topXOffset, ropeAttachY);
|
||
ctx.lineTo(baseCenter.x + bottomXOffset, basketTopY);
|
||
ctx.stroke();
|
||
|
||
ctx.shadowBlur = 10;
|
||
ctx.fillStyle = 'rgba(2, 6, 23, 0.9)';
|
||
ctx.strokeStyle = '#e0f2fe';
|
||
ctx.lineWidth = 1.5;
|
||
const bH = 8.5;
|
||
const widths = [w1, w1 * 0.9, (w1 * 0.9) * 0.9];
|
||
for (let i = 0; i < 3; i++) {
|
||
ctx.beginPath();
|
||
ctx.roundRect(baseCenter.x - widths[i]/2, basketTopY + (i * (bH + 2)), widths[i], bH, 3);
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
}
|
||
ctx.shadowBlur = 0;
|
||
}
|
||
|
||
function initBalloon() {
|
||
particles.length = 0;
|
||
particles.push(new Particle(true, 0, 0));
|
||
for(let i = 0; i < 5; i++) particles.push(new Particle(true, TOTAL_COMPACTED_HEIGHT, (i / 5) * Math.PI * 2));
|
||
for (let i = 0; i < NUM_PARTICLES; i++) particles.push(new Particle());
|
||
animateBalloon();
|
||
}
|
||
|
||
function animateBalloon() {
|
||
ctx.clearRect(0, 0, 400, 620);
|
||
ctx.save();
|
||
ctx.translate(0, TOP_SHIFT);
|
||
|
||
particles.forEach(p => { if(!p.isAnchor) p.theta += p.speed; });
|
||
drawBasket();
|
||
|
||
ctx.lineWidth = 0.4;
|
||
for (let i = 0; i < particles.length; i++) {
|
||
for (let j = i + 1; j < particles.length; j++) {
|
||
const p1 = getPos(particles[i].h, particles[i].theta);
|
||
const p2 = getPos(particles[j].h, particles[j].theta);
|
||
if (Math.hypot(p1.x - p2.x, p1.y - p2.y) < 30) {
|
||
const alpha = 0.05 + (((p1.z + p2.z) / 2) + 1) * 0.05;
|
||
ctx.strokeStyle = `rgba(52, 211, 153, ${alpha})`;
|
||
ctx.beginPath();
|
||
ctx.moveTo(p1.x, p1.y);
|
||
ctx.lineTo(p2.x, p2.y);
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
}
|
||
|
||
particles.forEach(p => {
|
||
const pos = getPos(p.h, p.theta);
|
||
ctx.fillStyle = `rgba(52, 211, 153, ${0.3 + (pos.z + 1) * 0.35})`;
|
||
ctx.beginPath();
|
||
ctx.arc(pos.x, pos.y, 1.2, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
});
|
||
|
||
ctx.restore();
|
||
requestAnimationFrame(animateBalloon);
|
||
}
|
||
|
||
// ============================================
|
||
// WHITEPAPER MODAL
|
||
// ============================================
|
||
function openWhitepaper() {
|
||
const modal = document.getElementById('whitepaperModal');
|
||
modal.classList.add('active');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeWhitepaper() {
|
||
const modal = document.getElementById('whitepaperModal');
|
||
modal.classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
// Close on Escape key
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') closeWhitepaper();
|
||
});
|
||
|
||
// ============================================
|
||
// AUTHENTICATION
|
||
// ============================================
|
||
async function initAuth() {
|
||
try {
|
||
await moxieAuth.init();
|
||
updateAuthUI();
|
||
} catch (error) {
|
||
console.error('Auth init error:', error);
|
||
document.getElementById('loginBtn').classList.remove('hidden');
|
||
}
|
||
}
|
||
|
||
function updateAuthUI() {
|
||
const loginBtn = document.getElementById('loginBtn');
|
||
const dashboardBtn = document.getElementById('dashboardBtn');
|
||
|
||
if (moxieAuth.isAuthenticated) {
|
||
loginBtn.classList.add('hidden');
|
||
dashboardBtn.classList.remove('hidden');
|
||
} else {
|
||
loginBtn.classList.remove('hidden');
|
||
dashboardBtn.classList.add('hidden');
|
||
}
|
||
}
|
||
|
||
async function login() {
|
||
try {
|
||
await moxieAuth.login(window.location.origin + '/dashboard.html');
|
||
} catch (error) {
|
||
console.error('Login error:', error);
|
||
alert('Failed to login. Please try again.');
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// FORM SUBMIT HANDLER (Backend API)
|
||
// ============================================
|
||
function initContactForm() {
|
||
const form = document.getElementById('contact-form');
|
||
const successDiv = document.getElementById('success-message');
|
||
|
||
form.addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
|
||
const data = {
|
||
name: form.name.value.trim(),
|
||
email: form.email.value.trim(),
|
||
company: form.company.value.trim() || null,
|
||
message: form.message.value.trim()
|
||
};
|
||
|
||
if (!data.name || !data.email || !data.message) {
|
||
alert('Please fill in all required fields.');
|
||
return;
|
||
}
|
||
|
||
// Disable the submit button while sending
|
||
const btn = form.querySelector('button[type="submit"]');
|
||
const originalText = btn.textContent;
|
||
btn.disabled = true;
|
||
btn.textContent = 'Sending...';
|
||
|
||
try {
|
||
const response = await fetch('/api/contact', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data)
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (response.ok && result.success) {
|
||
successDiv.classList.remove('hidden');
|
||
form.reset();
|
||
|
||
setTimeout(() => {
|
||
successDiv.classList.add('hidden');
|
||
}, 6000);
|
||
} else {
|
||
alert(result.message || 'Something went wrong. Please try again.');
|
||
}
|
||
} catch (error) {
|
||
alert('Network error. Please check your connection and try again.');
|
||
} finally {
|
||
btn.disabled = false;
|
||
btn.textContent = originalText;
|
||
}
|
||
});
|
||
}
|
||
|
||
// Initialize everything when page loads
|
||
// ============================================
|
||
// LEADERBOARD CHART
|
||
// ============================================
|
||
function initLeaderboard() {
|
||
const data = [
|
||
{ rank: 1, model: 'Claude Opus 4.7 Thinking', provider: 'Anthropic', score: 1503 },
|
||
{ rank: 2, model: 'Claude Opus 4.6 Thinking', provider: 'Anthropic', score: 1502 },
|
||
{ rank: 3, model: 'Claude Opus 4.6', provider: 'Anthropic', score: 1498 },
|
||
{ rank: 4, model: 'Gemini 3.1 Pro Preview', provider: 'Google', score: 1492 },
|
||
{ rank: 5, model: 'Claude Opus 4.7', provider: 'Anthropic', score: 1491 },
|
||
{ rank: 6, model: 'Muse Spark', provider: 'Meta', score: 1490 },
|
||
{ rank: 7, model: 'Moxie', provider: 'Moxiegen', score: 1488 },
|
||
{ rank: 8, model: 'Gemini 3 Pro', provider: 'Google', score: 1486 },
|
||
{ rank: 9, model: 'GPT-5.5 High', provider: 'OpenAI', score: 1484 },
|
||
{ rank: 10, model: 'Grok 4.20 Beta', provider: 'xAI', score: 1480 },
|
||
{ rank: 11, model: 'GPT-5.2 Chat', provider: 'OpenAI', score: 1477 },
|
||
{ rank: 12, model: 'GPT-5.4 High', provider: 'OpenAI', score: 1477 },
|
||
{ rank: 13, model: 'Grok 4.20 Reasoning', provider: 'xAI', score: 1477 },
|
||
{ rank: 14, model: 'GPT-5.5', provider: 'OpenAI', score: 1475 },
|
||
{ rank: 15, model: 'ERNIE 5.1', provider: 'Baidu', score: 1474 },
|
||
];
|
||
|
||
const minScore = 1470;
|
||
const maxScore = 1505;
|
||
const range = maxScore - minScore;
|
||
|
||
const medals = ['🥇', '🥈', '🥉'];
|
||
const barColors = [
|
||
'linear-gradient(90deg, #fbbf24, #f59e0b)', // 1st gold
|
||
'linear-gradient(90deg, #d1d5db, #9ca3af)', // 2nd silver
|
||
'linear-gradient(90deg, #d97706, #b45309)', // 3rd bronze
|
||
];
|
||
|
||
const container = document.getElementById('leaderboard-chart');
|
||
if (!container) return;
|
||
|
||
container.innerHTML = data.map((item, i) => {
|
||
const isMoxie = item.provider === 'Moxiegen';
|
||
const pct = ((item.score - minScore) / range) * 100;
|
||
const medal = i < 3 ? `<span class="lb-medal">${medals[i]}</span>` : '';
|
||
const barBg = isMoxie ? '' : (i < 3 ? `background:${barColors[i]};` : 'background:rgba(148,163,184,0.25);');
|
||
|
||
return `
|
||
<div class="lb-row${isMoxie ? ' is-moxie' : ''}">
|
||
<div class="lb-rank">${medal || item.rank}</div>
|
||
<div class="lb-bar-wrap">
|
||
<div class="lb-model-line">
|
||
<span class="lb-model-name">${item.model}</span>
|
||
<span class="lb-provider">${item.provider}</span>
|
||
</div>
|
||
<div class="lb-bar-track">
|
||
<div class="lb-bar-fill" data-width="${pct}" style="${barBg}"></div>
|
||
</div>
|
||
</div>
|
||
<div class="lb-score">${item.score}</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
|
||
// Animate bars in after a short delay
|
||
requestAnimationFrame(() => {
|
||
setTimeout(() => {
|
||
container.querySelectorAll('.lb-bar-fill').forEach(bar => {
|
||
bar.style.width = bar.dataset.width + '%';
|
||
});
|
||
}, 200);
|
||
});
|
||
}
|
||
|
||
window.addEventListener('load', () => {
|
||
initScrollAnimations();
|
||
initBalloon();
|
||
initAuth();
|
||
initContactForm();
|
||
initLeaderboard();
|
||
});
|
||
</script>
|
||
|
||
<!-- Auth Scripts -->
|
||
<script src="js/config.js"></script>
|
||
<script src="js/auth.js"></script>
|
||
</body>
|
||
</html> |