1203 lines
48 KiB
HTML
1203 lines
48 KiB
HTML
<!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');
|
||
|
||
/* ============================================
|
||
COLOR PALETTE - NEW SCHEME
|
||
============================================ */
|
||
:root {
|
||
/* Light Mode Colors */
|
||
--light-background: #F0F9FF;
|
||
--light-surface: #FFFFFF;
|
||
--light-primary-text: #1E293B;
|
||
--light-secondary-text: #64748B;
|
||
--light-accent-primary: #7DD3FC;
|
||
--light-accent-neural: #818CF8;
|
||
--light-border: #E2E8F0;
|
||
|
||
/* Dark Mode Colors */
|
||
--dark-background: #0F172A;
|
||
--dark-surface: #1E293B;
|
||
--dark-primary-text: #F8FAFC;
|
||
--dark-secondary-text: #94A3B8;
|
||
--dark-accent-primary: #38BDF8;
|
||
--dark-accent-neural: #A5B4FC;
|
||
--dark-border: #334155;
|
||
|
||
/* Active theme (dark by default) */
|
||
--background: var(--dark-background);
|
||
--surface: var(--dark-surface);
|
||
--primary-text: var(--dark-primary-text);
|
||
--secondary-text: var(--dark-secondary-text);
|
||
--accent-primary: var(--dark-accent-primary);
|
||
--accent-neural: var(--dark-accent-neural);
|
||
--border: var(--dark-border);
|
||
}
|
||
|
||
* {
|
||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, transform, opacity, box-shadow;
|
||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||
transition-duration: 300ms;
|
||
}
|
||
|
||
body {
|
||
background: var(--background);
|
||
color: var(--primary-text);
|
||
}
|
||
|
||
/* ============================================
|
||
HERO BACKGROUND WITH ANIMATED GRADIENTS
|
||
============================================ */
|
||
.hero-bg {
|
||
background:
|
||
radial-gradient(ellipse 80% 50% at 20% 40%, rgba(56, 189, 248, 0.15) 0%, transparent 50%),
|
||
radial-gradient(ellipse 60% 40% at 80% 20%, rgba(165, 180, 252, 0.12) 0%, transparent 50%),
|
||
radial-gradient(ellipse 50% 80% at 60% 80%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
|
||
var(--background);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-bg::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background:
|
||
radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
|
||
rgba(56, 189, 248, 0.1) 0%,
|
||
transparent 40%);
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* ============================================
|
||
ANIMATED GRADIENT BACKGROUND
|
||
============================================ */
|
||
.animated-gradient {
|
||
background: linear-gradient(
|
||
-45deg,
|
||
rgba(56, 189, 248, 0.1),
|
||
rgba(165, 180, 252, 0.1),
|
||
rgba(56, 189, 248, 0.05),
|
||
rgba(165, 180, 252, 0.15)
|
||
);
|
||
background-size: 400% 400%;
|
||
animation: gradientShift 15s ease infinite;
|
||
}
|
||
|
||
@keyframes gradientShift {
|
||
0% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
100% { background-position: 0% 50%; }
|
||
}
|
||
|
||
/* ============================================
|
||
PARTICLE SYSTEM
|
||
============================================ */
|
||
.particles-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.particle {
|
||
position: absolute;
|
||
width: 4px;
|
||
height: 4px;
|
||
background: var(--accent-primary);
|
||
border-radius: 50%;
|
||
opacity: 0;
|
||
animation: particleFloat 20s infinite;
|
||
}
|
||
|
||
.particle:nth-child(odd) {
|
||
background: var(--accent-neural);
|
||
}
|
||
|
||
@keyframes particleFloat {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(100vh) scale(0);
|
||
}
|
||
10% {
|
||
opacity: 0.6;
|
||
}
|
||
90% {
|
||
opacity: 0.6;
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
transform: translateY(-100vh) scale(1);
|
||
}
|
||
}
|
||
|
||
/* ============================================
|
||
FLOATING LOGO ANIMATION (ENHANCED)
|
||
============================================ */
|
||
.logo-float {
|
||
animation: floatBalloon 4s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes floatBalloon {
|
||
0%, 100% {
|
||
transform: translateY(0px) rotate(0deg) scale(1);
|
||
filter: drop-shadow(0 25px 50px rgba(56, 189, 248, 0.3));
|
||
}
|
||
25% {
|
||
transform: translateY(-15px) rotate(2deg) scale(1.02);
|
||
}
|
||
50% {
|
||
transform: translateY(-25px) rotate(3deg) scale(1.05);
|
||
filter: drop-shadow(0 35px 60px rgba(165, 180, 252, 0.4));
|
||
}
|
||
75% {
|
||
transform: translateY(-15px) rotate(1deg) scale(1.02);
|
||
}
|
||
}
|
||
|
||
.logo-glow {
|
||
animation: logoGlow 3s ease-in-out infinite alternate;
|
||
}
|
||
|
||
@keyframes logoGlow {
|
||
0% {
|
||
filter: brightness(0) invert(1) drop-shadow(0 0 20px rgba(56, 189, 248, 0.5));
|
||
}
|
||
100% {
|
||
filter: brightness(0) invert(1) drop-shadow(0 0 40px rgba(165, 180, 252, 0.8));
|
||
}
|
||
}
|
||
|
||
.logo-invert {
|
||
filter: brightness(0) invert(1);
|
||
}
|
||
|
||
/* ============================================
|
||
SCROLL-DRIVEN ANIMATIONS (ENHANCED)
|
||
============================================ */
|
||
.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; }
|
||
|
||
/* Slide from left */
|
||
.scroll-animate.slide-left {
|
||
transform: translateX(-80px);
|
||
}
|
||
.scroll-animate.slide-left.visible {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
/* Slide from right */
|
||
.scroll-animate.slide-right {
|
||
transform: translateX(80px);
|
||
}
|
||
.scroll-animate.slide-right.visible {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
/* Scale up animation */
|
||
.scroll-animate.scale-up {
|
||
transform: scale(0.8);
|
||
}
|
||
.scroll-animate.scale-up.visible {
|
||
transform: scale(1);
|
||
}
|
||
|
||
/* Hero logo combined animation */
|
||
.hero-logo {
|
||
animation: floatBalloon 4s ease-in-out infinite, heroEntrance 1.5s ease-out forwards;
|
||
}
|
||
|
||
@keyframes heroEntrance {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(100px) scale(0.5) rotate(-10deg);
|
||
}
|
||
60% {
|
||
transform: translateY(-20px) scale(1.1) rotate(5deg);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0px) scale(1) rotate(0deg);
|
||
}
|
||
}
|
||
|
||
/* ============================================
|
||
TEXT ANIMATIONS
|
||
============================================ */
|
||
.text-shimmer {
|
||
background: linear-gradient(
|
||
90deg,
|
||
var(--primary-text) 0%,
|
||
var(--accent-primary) 25%,
|
||
var(--accent-neural) 50%,
|
||
var(--accent-primary) 75%,
|
||
var(--primary-text) 100%
|
||
);
|
||
background-size: 200% auto;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
animation: textShimmer 4s linear infinite;
|
||
}
|
||
|
||
@keyframes textShimmer {
|
||
0% { background-position: 0% center; }
|
||
100% { background-position: 200% center; }
|
||
}
|
||
|
||
.text-gradient {
|
||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-neural));
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
/* Typewriter effect for hero subtitle */
|
||
.typewriter {
|
||
overflow: hidden;
|
||
border-right: 2px solid var(--accent-primary);
|
||
white-space: nowrap;
|
||
animation: typing 3.5s steps(80, end), blink-caret 0.75s step-end infinite;
|
||
}
|
||
|
||
@keyframes typing {
|
||
from { width: 0; }
|
||
to { width: 100%; }
|
||
}
|
||
|
||
@keyframes blink-caret {
|
||
from, to { border-color: transparent; }
|
||
50% { border-color: var(--accent-primary); }
|
||
}
|
||
|
||
/* ============================================
|
||
BUTTON ANIMATIONS
|
||
============================================ */
|
||
.btn-primary {
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-neural));
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-primary::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
rgba(255, 255, 255, 0.3),
|
||
transparent
|
||
);
|
||
transition: left 0.5s ease;
|
||
}
|
||
|
||
.btn-primary:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 20px 40px -10px rgba(56, 189, 248, 0.4);
|
||
}
|
||
|
||
.btn-secondary {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.btn-secondary::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 0;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, var(--accent-primary), var(--accent-neural));
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.btn-secondary:hover::after {
|
||
width: 100%;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
border-color: var(--accent-primary);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* ============================================
|
||
CARD ANIMATIONS
|
||
============================================ */
|
||
.benefit-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: var(--background);
|
||
border: 1px solid var(--border);
|
||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||
}
|
||
|
||
.benefit-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--accent-primary), var(--accent-neural));
|
||
transform: scaleX(0);
|
||
transition: transform 0.4s ease;
|
||
}
|
||
|
||
.benefit-card:hover::before {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
.benefit-card:hover {
|
||
transform: translateY(-8px);
|
||
border-color: var(--accent-primary);
|
||
box-shadow:
|
||
0 25px 50px -12px rgba(56, 189, 248, 0.25),
|
||
0 0 0 1px rgba(56, 189, 248, 0.1);
|
||
}
|
||
|
||
.benefit-card .icon-container {
|
||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||
}
|
||
|
||
.benefit-card:hover .icon-container {
|
||
transform: scale(1.15) rotate(5deg);
|
||
box-shadow: 0 10px 30px -5px rgba(56, 189, 248, 0.4);
|
||
}
|
||
|
||
/* ============================================
|
||
PULSE/ATTENTION ANIMATIONS
|
||
============================================ */
|
||
.pulse-ring {
|
||
animation: pulseRing 2s ease-out infinite;
|
||
}
|
||
|
||
@keyframes pulseRing {
|
||
0% {
|
||
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.6);
|
||
}
|
||
70% {
|
||
box-shadow: 0 0 0 20px rgba(56, 189, 248, 0);
|
||
}
|
||
100% {
|
||
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
|
||
}
|
||
}
|
||
|
||
.attention-bounce {
|
||
animation: attentionBounce 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes attentionBounce {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-5px); }
|
||
}
|
||
|
||
.live-indicator {
|
||
animation: livePulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes livePulse {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
opacity: 0.5;
|
||
transform: scale(1.2);
|
||
}
|
||
}
|
||
|
||
/* ============================================
|
||
NAVBAR ANIMATIONS
|
||
============================================ */
|
||
.nav-scrolled {
|
||
background: rgba(15, 23, 42, 0.95);
|
||
box-shadow: 0 10px 40px -10px rgba(56, 189, 248, 0.2);
|
||
border-bottom-color: var(--accent-primary) !important;
|
||
}
|
||
|
||
.nav-link {
|
||
position: relative;
|
||
padding-bottom: 4px;
|
||
}
|
||
|
||
.nav-link::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 0;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, var(--accent-primary), var(--accent-neural));
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.nav-link:hover::after {
|
||
width: 100%;
|
||
}
|
||
|
||
/* ============================================
|
||
FORM ANIMATIONS
|
||
============================================ */
|
||
.form-input {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
color: var(--primary-text);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.form-input:focus {
|
||
border-color: var(--accent-primary);
|
||
box-shadow:
|
||
0 0 0 3px rgba(56, 189, 248, 0.1),
|
||
0 10px 20px -5px rgba(56, 189, 248, 0.1);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.form-input::placeholder {
|
||
color: var(--secondary-text);
|
||
}
|
||
|
||
/* ============================================
|
||
FOOTER ANIMATIONS
|
||
============================================ */
|
||
.footer-link {
|
||
position: relative;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.footer-link::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -2px;
|
||
left: 50%;
|
||
width: 0;
|
||
height: 1px;
|
||
background: var(--accent-primary);
|
||
transition: all 0.3s ease;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.footer-link:hover::before {
|
||
width: 100%;
|
||
}
|
||
|
||
/* ============================================
|
||
RIPPLE EFFECT
|
||
============================================ */
|
||
.ripple {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.ripple-effect {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.4);
|
||
transform: scale(0);
|
||
animation: rippleAnimation 0.6s linear;
|
||
pointer-events: none;
|
||
}
|
||
|
||
@keyframes rippleAnimation {
|
||
to {
|
||
transform: scale(4);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
/* ============================================
|
||
MORPHING BACKGROUND BLOBS
|
||
============================================ */
|
||
.blob {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
filter: blur(60px);
|
||
opacity: 0.3;
|
||
animation: blobMorph 20s ease-in-out infinite;
|
||
}
|
||
|
||
.blob-1 {
|
||
width: 400px;
|
||
height: 400px;
|
||
background: var(--accent-primary);
|
||
top: 10%;
|
||
left: 10%;
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
.blob-2 {
|
||
width: 300px;
|
||
height: 300px;
|
||
background: var(--accent-neural);
|
||
top: 60%;
|
||
right: 10%;
|
||
animation-delay: -5s;
|
||
}
|
||
|
||
.blob-3 {
|
||
width: 350px;
|
||
height: 350px;
|
||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-neural));
|
||
bottom: 10%;
|
||
left: 30%;
|
||
animation-delay: -10s;
|
||
}
|
||
|
||
@keyframes blobMorph {
|
||
0%, 100% {
|
||
transform: translate(0, 0) scale(1);
|
||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||
}
|
||
25% {
|
||
transform: translate(30px, -50px) scale(1.1);
|
||
border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
|
||
}
|
||
50% {
|
||
transform: translate(-20px, 20px) scale(0.9);
|
||
border-radius: 30% 70% 70% 30% / 70% 30% 70% 30%;
|
||
}
|
||
75% {
|
||
transform: translate(50px, 30px) scale(1.05);
|
||
border-radius: 70% 30% 30% 70% / 30% 70% 70% 30%;
|
||
}
|
||
}
|
||
|
||
/* ============================================
|
||
SCROLL PROGRESS INDICATOR
|
||
============================================ */
|
||
.scroll-progress {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--accent-primary), var(--accent-neural));
|
||
z-index: 9999;
|
||
transform-origin: left;
|
||
transform: scaleX(0);
|
||
}
|
||
|
||
/* ============================================
|
||
NUMBER COUNTER ANIMATION
|
||
============================================ */
|
||
.counter {
|
||
display: inline-block;
|
||
animation: counterPop 0.5s ease-out;
|
||
}
|
||
|
||
@keyframes counterPop {
|
||
0% {
|
||
transform: scale(0.5);
|
||
opacity: 0;
|
||
}
|
||
50% {
|
||
transform: scale(1.1);
|
||
}
|
||
100% {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* ============================================
|
||
MARQUEE/TICKER ANIMATION
|
||
============================================ */
|
||
.marquee {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.marquee-content {
|
||
display: flex;
|
||
animation: marquee 30s linear infinite;
|
||
}
|
||
|
||
@keyframes marquee {
|
||
0% { transform: translateX(0); }
|
||
100% { transform: translateX(-50%); }
|
||
}
|
||
|
||
/* ============================================
|
||
3D TILT EFFECT (JS ENHANCED)
|
||
============================================ */
|
||
.tilt-card {
|
||
transform-style: preserve-3d;
|
||
perspective: 1000px;
|
||
}
|
||
|
||
.tilt-card:hover {
|
||
transform: perspective(1000px) rotateX(var(--rotateX, 0deg)) rotateY(var(--rotateY, 0deg));
|
||
}
|
||
|
||
/* ============================================
|
||
LOADING SKELETON
|
||
============================================ */
|
||
.skeleton {
|
||
background: linear-gradient(
|
||
90deg,
|
||
var(--surface) 0%,
|
||
var(--border) 50%,
|
||
var(--surface) 100%
|
||
);
|
||
background-size: 200% 100%;
|
||
animation: skeleton 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes skeleton {
|
||
0% { background-position: 200% 0; }
|
||
100% { background-position: -200% 0; }
|
||
}
|
||
|
||
/* ============================================
|
||
SECTION DIVIDER ANIMATION
|
||
============================================ */
|
||
.section-divider {
|
||
height: 1px;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
var(--accent-primary),
|
||
var(--accent-neural),
|
||
var(--accent-primary),
|
||
transparent
|
||
);
|
||
background-size: 200% 100%;
|
||
animation: dividerFlow 3s linear infinite;
|
||
}
|
||
|
||
@keyframes dividerFlow {
|
||
0% { background-position: 200% 0; }
|
||
100% { background-position: -200% 0; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-slate-950 text-white font-sans">
|
||
<!-- Scroll Progress Indicator -->
|
||
<div class="scroll-progress" id="scrollProgress"></div>
|
||
|
||
<!-- Particle System -->
|
||
<div class="particles-container" id="particles"></div>
|
||
|
||
<!-- Morphing Background Blobs -->
|
||
<div class="blob blob-1"></div>
|
||
<div class="blob blob-2"></div>
|
||
<div class="blob blob-3"></div>
|
||
|
||
<!-- 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 -->
|
||
<div class="flex items-center gap-x-3">
|
||
<img src="logo.svg"
|
||
alt="Moxiegen"
|
||
class="h-11 w-auto logo-glow"
|
||
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>
|
||
</div>
|
||
|
||
<!-- Navigation -->
|
||
<div class="flex items-center gap-x-8 text-sm font-medium">
|
||
<a href="#benefits" class="nav-link hover:text-[#38BDF8]">How It Works</a>
|
||
<a href="#moxy" class="nav-link hover:text-[#38BDF8]">See Moxy Go</a>
|
||
<a href="#licensing" class="nav-link hover:text-[#38BDF8]">Licensing</a>
|
||
<button onclick="document.getElementById('contact').scrollIntoView({ behavior: 'smooth' })"
|
||
class="ripple px-6 py-2.5 bg-white text-slate-950 font-semibold rounded-3xl hover:bg-[#38BDF8] hover:text-white btn-primary">
|
||
Contact Us
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- HERO SECTION -->
|
||
<header class="hero-bg pt-16 pb-20 relative">
|
||
<div class="max-w-screen-2xl mx-auto px-8 relative z-10">
|
||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
||
|
||
<!-- Left Text -->
|
||
<div class="lg:col-span-7 scroll-animate slide-left" id="hero-text">
|
||
<div class="inline-flex items-center gap-x-2 bg-slate-900 border border-[#38BDF8]/30 text-[#38BDF8] text-sm font-medium px-5 py-2 rounded-3xl mb-6 pulse-ring">
|
||
<div class="w-2 h-2 bg-[#38BDF8] rounded-full live-indicator"></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 <span class="text-gradient">Advantage</span>.
|
||
</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-[#A5B4FC] font-semibold text-shimmer">10-100x</span>.
|
||
</p>
|
||
|
||
<div class="flex items-center gap-x-4">
|
||
<button onclick="document.getElementById('contact').scrollIntoView({ behavior: 'smooth' })"
|
||
class="ripple btn-primary px-10 py-5 bg-gradient-to-r from-[#38BDF8] to-[#A5B4FC] text-slate-950 text-xl font-semibold rounded-3xl flex items-center gap-x-3">
|
||
Get Moxie
|
||
<span class="text-3xl leading-none attention-bounce">→</span>
|
||
</button>
|
||
|
||
<a href="#moxy"
|
||
class="btn-secondary px-8 py-5 border border-white/30 hover:border-[#38BDF8] text-xl font-medium rounded-3xl flex items-center">
|
||
See Moxy Go
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mt-12 flex items-center gap-x-8 text-sm text-slate-400">
|
||
<div class="flex -space-x-4">
|
||
<div class="w-6 h-6 bg-slate-700 rounded-2xl border-2 border-slate-950 flex items-center justify-center text-xs hover:scale-125 transition-transform cursor-pointer">🚀</div>
|
||
<div class="w-6 h-6 bg-slate-700 rounded-2xl border-2 border-slate-950 flex items-center justify-center text-xs hover:scale-125 transition-transform cursor-pointer">⚡</div>
|
||
<div class="w-6 h-6 bg-slate-700 rounded-2xl border-2 border-slate-950 flex items-center justify-center text-xs hover:scale-125 transition-transform cursor-pointer">📱</div>
|
||
</div>
|
||
<p class="max-w-xs">Trusted by leading AI labs and Fortune 500 data centers</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right: Real Logo (floating) -->
|
||
<div class="lg:col-span-5 flex justify-center lg:justify-end scroll-animate slide-right scale-up" id="hero-logo">
|
||
<div class="hero-logo">
|
||
<img src="logo.svg"
|
||
alt="Moxiegen Logo"
|
||
class="logo-glow max-w-[420px] w-full h-auto"
|
||
onerror="this.onerror=null; this.src='logo.png';">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Section Divider -->
|
||
<div class="section-divider"></div>
|
||
|
||
<!-- MOXY GO SECTION -->
|
||
<section id="moxy" class="py-20 relative 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 scroll-animate slide-left">
|
||
<h2 class="text-5xl font-semibold tracking-[-1px] mb-3" style="font-family: 'Space Grotesk', sans-serif;">See Moxy <span class="text-gradient">Go</span>.</h2>
|
||
<p class="text-slate-400 text-xl">Real-time performance leaderboard</p>
|
||
</div>
|
||
|
||
<!-- Leaderboard Placeholder -->
|
||
<div class="bg-slate-900 border border-slate-700 rounded-3xl p-8 max-w-2xl w-full md:w-auto scroll-animate slide-right tilt-card" id="leaderboard-card">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<div class="text-[#38BDF8] font-medium flex items-center gap-x-2">
|
||
<span class="text-2xl attention-bounce inline-block">🏆</span>
|
||
LIVE LEADERBOARD
|
||
</div>
|
||
<div class="text-xs uppercase tracking-widest bg-slate-800 text-slate-400 px-4 py-1 rounded-3xl flex items-center gap-x-2">
|
||
<span class="w-2 h-2 bg-green-400 rounded-full live-indicator"></span>
|
||
Updated 11 seconds ago
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center py-16 border border-dashed border-slate-600 rounded-3xl text-slate-400 relative overflow-hidden">
|
||
<div class="absolute inset-0 animated-gradient opacity-50"></div>
|
||
<p class="text-2xl mb-2 relative z-10">[Leaderboard Placement]</p>
|
||
<p class="text-sm relative z-10">Insert your Moxy Go leaderboard table, chart, or screenshot here.<br>Current top models show <span class="text-[#A5B4FC] font-semibold">87x</span> inference speedup.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section Divider -->
|
||
<div class="section-divider"></div>
|
||
|
||
<!-- BENEFITS SECTION -->
|
||
<section id="benefits" class="py-20 bg-slate-900/50 relative overflow-hidden">
|
||
<!-- Background animation -->
|
||
<div class="absolute inset-0 opacity-20">
|
||
<div class="absolute top-1/4 left-1/4 w-64 h-64 bg-[#38BDF8] rounded-full filter blur-[100px] animate-pulse"></div>
|
||
<div class="absolute bottom-1/4 right-1/4 w-64 h-64 bg-[#A5B4FC] rounded-full filter blur-[100px] animate-pulse" style="animation-delay: 1s;"></div>
|
||
</div>
|
||
|
||
<div class="max-w-screen-2xl mx-auto px-8 relative z-10">
|
||
<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 <span class="text-gradient">Moxie</span>.
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<!-- Benefit 1 -->
|
||
<div class="scroll-animate card-1 benefit-card rounded-3xl p-8 tilt-card" data-tilt>
|
||
<div class="icon-container h-12 w-12 bg-[#38BDF8]/10 text-[#38BDF8] rounded-2xl flex items-center justify-center text-3xl mb-6">🔄</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 benefit-card rounded-3xl p-8 tilt-card" data-tilt>
|
||
<div class="icon-container h-12 w-12 bg-[#A5B4FC]/10 text-[#A5B4FC] rounded-2xl flex items-center justify-center text-3xl mb-6">🏭</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 benefit-card rounded-3xl p-8 tilt-card" data-tilt>
|
||
<div class="icon-container h-12 w-12 bg-[#38BDF8]/10 text-[#38BDF8] rounded-2xl flex items-center justify-center text-3xl mb-6">📱</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>
|
||
|
||
<!-- Section Divider -->
|
||
<div class="section-divider"></div>
|
||
|
||
<!-- LICENSING CTA -->
|
||
<section id="licensing" class="py-16 scroll-animate">
|
||
<div class="max-w-screen-2xl mx-auto px-8">
|
||
<div class="animated-gradient bg-gradient-to-r from-slate-900 to-slate-800 border border-[#38BDF8]/20 rounded-3xl p-16 flex flex-col md:flex-row items-center justify-between gap-10 relative overflow-hidden">
|
||
<!-- Decorative elements -->
|
||
<div class="absolute top-0 right-0 w-64 h-64 bg-[#38BDF8] rounded-full filter blur-[80px] opacity-20"></div>
|
||
<div class="absolute bottom-0 left-0 w-64 h-64 bg-[#A5B4FC] rounded-full filter blur-[80px] opacity-20"></div>
|
||
|
||
<div class="max-w-lg relative z-10">
|
||
<p class="text-4xl font-semibold leading-tight tracking-[-1px]">
|
||
Licensing now available through customized <span class="text-gradient">enterprise contracts</span>.
|
||
</p>
|
||
</div>
|
||
<button onclick="document.getElementById('contact').scrollIntoView({ behavior: 'smooth' })"
|
||
class="ripple btn-primary flex-shrink-0 px-14 py-6 text-2xl font-semibold bg-white text-slate-950 hover:bg-[#38BDF8] rounded-3xl flex items-center gap-x-4 relative z-10">
|
||
Request Enterprise License
|
||
<span class="text-4xl attention-bounce inline-block">→</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section Divider -->
|
||
<div class="section-divider"></div>
|
||
|
||
<!-- CONTACT SECTION -->
|
||
<section id="contact" class="py-24 bg-slate-900/50 scroll-animate relative overflow-hidden">
|
||
<!-- Background decoration -->
|
||
<div class="absolute top-0 left-0 w-full h-full opacity-10">
|
||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-r from-[#38BDF8] to-[#A5B4FC] rounded-full filter blur-[150px]"></div>
|
||
</div>
|
||
|
||
<div class="max-w-screen-2xl mx-auto px-8 relative z-10">
|
||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
||
<div class="lg:col-span-5 scroll-animate slide-left">
|
||
<h2 class="text-5xl font-semibold mb-6" style="font-family: 'Space Grotesk', sans-serif;">Ready for <span class="text-gradient">10-100×</span> 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-[#38BDF8] pl-8 relative">
|
||
<div class="absolute -left-2 top-0 w-4 h-4 bg-[#38BDF8] rounded-full pulse-ring"></div>
|
||
<p class="font-medium">Email us at:</p>
|
||
<a href="mailto:hello@moxiegen.com" class="block text-3xl font-semibold text-[#A5B4FC] hover:text-[#38BDF8] transition-colors">hello@moxiegen.com</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lg:col-span-7 bg-slate-950 rounded-3xl p-10 scroll-animate slide-right border border-slate-800 hover:border-[#38BDF8]/30 transition-colors">
|
||
<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" placeholder="Jane Doe" class="form-input w-full rounded-2xl px-6 py-5 outline-none text-lg">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm text-slate-400 mb-2">Company</label>
|
||
<input type="text" placeholder="Acme AI Labs" class="form-input w-full 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" placeholder="you@company.com" class="form-input w-full rounded-2xl px-6 py-5 outline-none text-lg">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm text-slate-400 mb-2">Tell us about your use case</label>
|
||
<textarea rows="4" placeholder="We run 400 H100s and want to run inference + training simultaneously..." class="form-input w-full rounded-3xl px-6 py-5 outline-none text-lg resize-none"></textarea>
|
||
</div>
|
||
<button type="button" onclick="handleSubmit()" class="ripple btn-primary w-full py-6 bg-gradient-to-r from-[#38BDF8] to-[#A5B4FC] text-slate-950 font-semibold text-2xl rounded-3xl">
|
||
Send message to Moxiegen
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer class="bg-slate-950 border-t border-slate-800 py-8 relative overflow-hidden">
|
||
<!-- Subtle gradient line at top -->
|
||
<div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[#38BDF8] to-transparent opacity-50"></div>
|
||
|
||
<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>Copyright © 2025 NT Logstics LLC</div>
|
||
<div class="flex gap-x-6">
|
||
<a href="#" class="footer-link hover:text-[#38BDF8]">Privacy</a>
|
||
<a href="#" class="footer-link hover:text-[#38BDF8]">Terms</a>
|
||
<a href="#" class="footer-link hover:text-[#38BDF8]">Legal</a>
|
||
</div>
|
||
<div class="text-[#A5B4FC] text-xs font-medium flex items-center gap-x-2">
|
||
Built with <span class="text-[#38BDF8]">Moxie</span>
|
||
<span class="inline-block attention-bounce">✨</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// ============================================
|
||
// PARTICLE SYSTEM
|
||
// ============================================
|
||
function createParticles() {
|
||
const container = document.getElementById('particles');
|
||
const particleCount = 30;
|
||
|
||
for (let i = 0; i < particleCount; i++) {
|
||
const particle = document.createElement('div');
|
||
particle.className = 'particle';
|
||
particle.style.left = Math.random() * 100 + '%';
|
||
particle.style.animationDelay = Math.random() * 20 + 's';
|
||
particle.style.animationDuration = (15 + Math.random() * 15) + 's';
|
||
particle.style.width = (2 + Math.random() * 4) + 'px';
|
||
particle.style.height = particle.style.width;
|
||
container.appendChild(particle);
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// SCROLL PROGRESS INDICATOR
|
||
// ============================================
|
||
function updateScrollProgress() {
|
||
const scrollProgress = document.getElementById('scrollProgress');
|
||
const scrollTop = window.scrollY;
|
||
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
||
const scrollPercent = scrollTop / docHeight;
|
||
scrollProgress.style.transform = `scaleX(${scrollPercent})`;
|
||
}
|
||
|
||
// ============================================
|
||
// MOUSE TRACKING FOR HERO BACKGROUND
|
||
// ============================================
|
||
function initMouseTracking() {
|
||
const hero = document.querySelector('.hero-bg');
|
||
if (hero) {
|
||
hero.addEventListener('mousemove', (e) => {
|
||
const rect = hero.getBoundingClientRect();
|
||
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
||
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
||
hero.style.setProperty('--mouse-x', x + '%');
|
||
hero.style.setProperty('--mouse-y', y + '%');
|
||
});
|
||
}
|
||
}
|
||
|
||
// ============================================
|
||
// RIPPLE EFFECT
|
||
// ============================================
|
||
function initRippleEffect() {
|
||
document.querySelectorAll('.ripple').forEach(button => {
|
||
button.addEventListener('click', function(e) {
|
||
const rect = this.getBoundingClientRect();
|
||
const size = Math.max(rect.width, rect.height);
|
||
const x = e.clientX - rect.left - size / 2;
|
||
const y = e.clientY - rect.top - size / 2;
|
||
|
||
const ripple = document.createElement('span');
|
||
ripple.className = 'ripple-effect';
|
||
ripple.style.width = ripple.style.height = size + 'px';
|
||
ripple.style.left = x + 'px';
|
||
ripple.style.top = y + 'px';
|
||
|
||
this.appendChild(ripple);
|
||
|
||
setTimeout(() => ripple.remove(), 600);
|
||
});
|
||
});
|
||
}
|
||
|
||
// ============================================
|
||
// 3D TILT EFFECT FOR CARDS
|
||
// ============================================
|
||
function initTiltEffect() {
|
||
document.querySelectorAll('.tilt-card').forEach(card => {
|
||
card.addEventListener('mousemove', (e) => {
|
||
const rect = card.getBoundingClientRect();
|
||
const x = e.clientX - rect.left;
|
||
const y = e.clientY - rect.top;
|
||
const centerX = rect.width / 2;
|
||
const centerY = rect.height / 2;
|
||
const rotateX = (y - centerY) / 20;
|
||
const rotateY = (centerX - x) / 20;
|
||
|
||
card.style.setProperty('--rotateX', rotateX + 'deg');
|
||
card.style.setProperty('--rotateY', rotateY + 'deg');
|
||
});
|
||
|
||
card.addEventListener('mouseleave', () => {
|
||
card.style.setProperty('--rotateX', '0deg');
|
||
card.style.setProperty('--rotateY', '0deg');
|
||
});
|
||
});
|
||
}
|
||
|
||
// ============================================
|
||
// 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;
|
||
}
|
||
|
||
// Update scroll progress
|
||
updateScrollProgress();
|
||
});
|
||
}
|
||
|
||
// ============================================
|
||
// FORM SUBMIT HANDLER
|
||
// ============================================
|
||
function handleSubmit() {
|
||
const button = event.target;
|
||
const originalText = button.innerHTML;
|
||
|
||
// Loading state
|
||
button.innerHTML = '<span class="inline-block animate-spin mr-3">⟳</span> Sending...';
|
||
button.disabled = true;
|
||
|
||
setTimeout(() => {
|
||
button.innerHTML = '✓ Message Sent!';
|
||
button.classList.remove('from-[#38BDF8]', 'to-[#A5B4FC]');
|
||
button.style.background = '#22c55e';
|
||
|
||
setTimeout(() => {
|
||
button.innerHTML = originalText;
|
||
button.disabled = false;
|
||
button.style.background = '';
|
||
}, 2000);
|
||
}, 1500);
|
||
}
|
||
|
||
// ============================================
|
||
// SMOOTH ANCHOR SCROLL
|
||
// ============================================
|
||
function initSmoothScroll() {
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// ============================================
|
||
// COUNTER ANIMATION
|
||
// ============================================
|
||
function animateCounters() {
|
||
document.querySelectorAll('[data-count]').forEach(counter => {
|
||
const target = parseInt(counter.dataset.count);
|
||
const duration = 2000;
|
||
const step = target / (duration / 16);
|
||
let current = 0;
|
||
|
||
const updateCounter = () => {
|
||
current += step;
|
||
if (current < target) {
|
||
counter.textContent = Math.floor(current);
|
||
requestAnimationFrame(updateCounter);
|
||
} else {
|
||
counter.textContent = target;
|
||
}
|
||
};
|
||
|
||
// Start when visible
|
||
const observer = new IntersectionObserver((entries) => {
|
||
if (entries[0].isIntersecting) {
|
||
updateCounter();
|
||
observer.disconnect();
|
||
}
|
||
});
|
||
|
||
observer.observe(counter);
|
||
});
|
||
}
|
||
|
||
// ============================================
|
||
// INITIALIZE EVERYTHING
|
||
// ============================================
|
||
window.addEventListener('load', () => {
|
||
createParticles();
|
||
initScrollAnimations();
|
||
initMouseTracking();
|
||
initRippleEffect();
|
||
initTiltEffect();
|
||
initSmoothScroll();
|
||
animateCounters();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|