1000 lines
35 KiB
HTML
1000 lines
35 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Moxiegen - Illuminate Your Ideas</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg-primary: #0a0f1a;
|
|
--bg-secondary: #0d1525;
|
|
--bg-card: #111827;
|
|
--text-primary: #e8eaed;
|
|
--text-secondary: #9ca3af;
|
|
--accent-blue: #80C4E9;
|
|
--accent-mint: #A8E6CF;
|
|
--accent-cream: #F5F5DC;
|
|
--glow-blue: rgba(128, 196, 233, 0.4);
|
|
--glow-mint: rgba(168, 230, 207, 0.3);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
overflow-x: hidden;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.font-display {
|
|
font-family: 'Syne', sans-serif;
|
|
}
|
|
|
|
.bg-mesh {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -2;
|
|
background: radial-gradient(ellipse 80% 50% at 20% 40%, rgba(128, 196, 233, 0.08) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 60%, rgba(168, 230, 207, 0.06) 0%, transparent 50%), linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
|
}
|
|
|
|
#particles-canvas {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.grid-pattern {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
background-image: linear-gradient(rgba(128, 196, 233, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(128, 196, 233, 0.03) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, black 0%, transparent 70%);
|
|
}
|
|
/* Navigation */
|
|
|
|
.nav-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
padding: 1rem 2rem;
|
|
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.nav-container.scrolled {
|
|
background: rgba(10, 15, 26, 0.85);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(128, 196, 233, 0.1);
|
|
}
|
|
|
|
.nav-link {
|
|
position: relative;
|
|
color: var(--text-secondary);
|
|
transition: color 0.3s ease;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.nav-link::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -4px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--accent-blue), var(--accent-mint));
|
|
transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-link:hover::after {
|
|
width: 100%;
|
|
}
|
|
/* Logo */
|
|
|
|
.logo-container {
|
|
position: relative;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, var(--accent-blue), var(--accent-mint));
|
|
padding: 2px;
|
|
}
|
|
|
|
.logo-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--bg-primary);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo-img {
|
|
width: 36px;
|
|
height: 36px;
|
|
object-fit: contain;
|
|
filter: brightness(1.1) contrast(1.1);
|
|
mix-blend-mode: screen;
|
|
}
|
|
/* Hero */
|
|
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
padding: 6rem 2rem;
|
|
}
|
|
|
|
.hero-content {
|
|
text-align: center;
|
|
max-width: 900px;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: rgba(128, 196, 233, 0.1);
|
|
border: 1px solid rgba(128, 196, 233, 0.2);
|
|
border-radius: 50px;
|
|
font-size: 0.875rem;
|
|
color: var(--accent-blue);
|
|
margin-bottom: 2rem;
|
|
animation: fadeSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: clamp(2.5rem, 8vw, 5rem);
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
margin-bottom: 1.5rem;
|
|
animation: fadeSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.hero-title .gradient-text {
|
|
background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-mint) 50%, var(--accent-cream) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: clamp(1rem, 2.5vw, 1.25rem);
|
|
color: var(--text-secondary);
|
|
max-width: 600px;
|
|
margin: 0 auto 3rem;
|
|
animation: fadeSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.hero-cta {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
animation: fadeSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
|
|
opacity: 0;
|
|
}
|
|
/* Buttons */
|
|
|
|
.btn-primary {
|
|
position: relative;
|
|
padding: 1rem 2rem;
|
|
background: linear-gradient(135deg, var(--accent-blue), var(--accent-mint));
|
|
color: var(--bg-primary);
|
|
font-weight: 600;
|
|
border-radius: 12px;
|
|
border: none;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
transition: transform 0.3s ease, box-shadow 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 {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 40px var(--glow-blue);
|
|
}
|
|
|
|
.btn-primary:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-secondary {
|
|
padding: 1rem 2rem;
|
|
background: transparent;
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(128, 196, 233, 0.3);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: rgba(128, 196, 233, 0.1);
|
|
border-color: var(--accent-blue);
|
|
}
|
|
/* Floating Elements */
|
|
|
|
.floating-element {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
.float-1 {
|
|
top: 20%;
|
|
left: 10%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.float-2 {
|
|
top: 30%;
|
|
right: 15%;
|
|
animation-delay: -2s;
|
|
}
|
|
|
|
.float-3 {
|
|
bottom: 25%;
|
|
left: 8%;
|
|
animation-delay: -4s;
|
|
}
|
|
|
|
.float-4 {
|
|
bottom: 20%;
|
|
right: 10%;
|
|
animation-delay: -1s;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0) rotate(0deg);
|
|
}
|
|
50% {
|
|
transform: translateY(-20px) rotate(5deg);
|
|
}
|
|
}
|
|
|
|
.glow-orb {
|
|
width: 300px;
|
|
height: 300px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, var(--glow-blue) 0%, transparent 70%);
|
|
filter: blur(60px);
|
|
animation: pulse-glow 4s ease-in-out infinite;
|
|
}
|
|
|
|
.glow-orb.mint {
|
|
background: radial-gradient(circle, var(--glow-mint) 0%, transparent 70%);
|
|
animation-delay: -2s;
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
0%,
|
|
100% {
|
|
opacity: 0.5;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
.scroll-indicator {
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
animation: bounce 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%,
|
|
100% {
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateX(-50%) translateY(10px);
|
|
}
|
|
}
|
|
/* Sections */
|
|
|
|
.section {
|
|
padding: 6rem 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 0.875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
color: var(--accent-blue);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: clamp(2rem, 5vw, 3rem);
|
|
font-weight: 700;
|
|
}
|
|
/* Features */
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.feature-card {
|
|
background: linear-gradient(135deg, rgba(17, 24, 39, 0.8), rgba(13, 21, 37, 0.9));
|
|
border: 1px solid rgba(128, 196, 233, 0.1);
|
|
border-radius: 20px;
|
|
padding: 2rem;
|
|
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
}
|
|
|
|
.feature-card.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-8px);
|
|
border-color: rgba(128, 196, 233, 0.3);
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px var(--glow-blue);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.5rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.feature-icon::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(135deg, var(--accent-blue), var(--accent-mint));
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.feature-icon svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.feature-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.feature-desc {
|
|
color: var(--text-secondary);
|
|
font-size: 0.95rem;
|
|
}
|
|
/* Stats */
|
|
|
|
.stats-section {
|
|
background: linear-gradient(180deg, transparent 0%, rgba(128, 196, 233, 0.03) 50%, transparent 100%);
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 3rem;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-item {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.stat-item.visible {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: clamp(2.5rem, 6vw, 4rem);
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, var(--accent-blue), var(--accent-mint));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.stat-label {
|
|
color: var(--text-secondary);
|
|
font-size: 1rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
/* Testimonials */
|
|
|
|
.testimonials-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
.testimonial-card {
|
|
background: linear-gradient(135deg, rgba(17, 24, 39, 0.9), rgba(13, 21, 37, 0.95));
|
|
border: 1px solid rgba(128, 196, 233, 0.15);
|
|
border-radius: 24px;
|
|
padding: 3rem;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.testimonial-card::before {
|
|
content: '"';
|
|
position: absolute;
|
|
top: 1rem;
|
|
left: 2rem;
|
|
font-size: 8rem;
|
|
font-family: Georgia, serif;
|
|
color: var(--accent-blue);
|
|
opacity: 0.1;
|
|
line-height: 1;
|
|
}
|
|
|
|
.testimonial-text {
|
|
font-size: 1.25rem;
|
|
line-height: 1.8;
|
|
margin-bottom: 2rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.testimonial-author {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.author-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--accent-blue), var(--accent-mint));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
.author-info {
|
|
text-align: left;
|
|
}
|
|
|
|
.author-name {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.author-role {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
/* CTA */
|
|
|
|
.cta-section {
|
|
text-align: center;
|
|
padding: 8rem 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
.cta-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 600px;
|
|
height: 600px;
|
|
background: radial-gradient(circle, var(--glow-mint) 0%, transparent 70%);
|
|
filter: blur(100px);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.cta-title {
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
font-weight: 800;
|
|
margin-bottom: 1.5rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cta-subtitle {
|
|
color: var(--text-secondary);
|
|
font-size: 1.125rem;
|
|
max-width: 500px;
|
|
margin: 0 auto 2rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
/* Footer */
|
|
|
|
.footer {
|
|
border-top: 1px solid rgba(128, 196, 233, 0.1);
|
|
padding: 3rem 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-text {
|
|
color: var(--text-secondary);
|
|
font-size: 0.875rem;
|
|
}
|
|
/* Animations */
|
|
|
|
@keyframes fadeSlideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
button:focus-visible,
|
|
a:focus-visible {
|
|
outline: 2px solid var(--accent-blue);
|
|
outline-offset: 4px;
|
|
}
|
|
/* Mobile Menu */
|
|
|
|
.mobile-menu-btn {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.mobile-menu-btn span {
|
|
display: block;
|
|
width: 24px;
|
|
height: 2px;
|
|
background: var(--text-primary);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.mobile-menu-btn {
|
|
display: flex;
|
|
}
|
|
.nav-links {
|
|
position: fixed;
|
|
top: 0;
|
|
right: -100%;
|
|
width: 280px;
|
|
height: 100vh;
|
|
background: rgba(10, 15, 26, 0.98);
|
|
backdrop-filter: blur(20px);
|
|
flex-direction: column;
|
|
padding: 5rem 2rem 2rem;
|
|
transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
border-left: 1px solid rgba(128, 196, 233, 0.1);
|
|
}
|
|
.nav-links.active {
|
|
right: 0;
|
|
}
|
|
.nav-links .nav-link {
|
|
padding: 1rem 0;
|
|
font-size: 1.125rem;
|
|
}
|
|
}
|
|
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.reveal-delay-1 {
|
|
transition-delay: 0.1s;
|
|
}
|
|
|
|
.reveal-delay-2 {
|
|
transition-delay: 0.2s;
|
|
}
|
|
|
|
.reveal-delay-3 {
|
|
transition-delay: 0.3s;
|
|
}
|
|
|
|
.reveal-delay-4 {
|
|
transition-delay: 0.4s;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="bg-mesh"></div>
|
|
<canvas id="particles-canvas"></canvas>
|
|
<div class="grid-pattern"></div>
|
|
|
|
<nav class="nav-container" id="navbar">
|
|
<div class="max-w-7xl mx-auto flex items-center justify-between">
|
|
<a href="#" class="flex items-center gap-3">
|
|
<div class="logo-container">
|
|
<div class="logo-inner">
|
|
<img src="https://z-cdn-media.chatglm.cn/files/86761a99-93d8-4c6b-8021-bcfb9aecd714.jpg?auth_key=1874401267-a7e6f6ec181f409995f4de9630b73831-0-9be3095628cee72ea819886a474c12fc" alt="Moxiegen Logo" class="logo-img">
|
|
</div>
|
|
</div>
|
|
<span class="font-display font-bold text-xl">Moxiegen</span>
|
|
</a>
|
|
<div class="nav-links flex items-center gap-8" id="nav-links">
|
|
<a href="#features" class="nav-link">Features</a>
|
|
<a href="#solutions" class="nav-link">Solutions</a>
|
|
<a href="#testimonials" class="nav-link">Testimonials</a>
|
|
<a href="#contact" class="nav-link">Contact</a>
|
|
<button class="btn-primary text-sm py-2 px-4">Get Started</button>
|
|
</div>
|
|
<button class="mobile-menu-btn" id="mobile-menu-btn" aria-label="Toggle menu"><span></span><span></span><span></span></button>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="hero">
|
|
<div class="floating-element float-1">
|
|
<div class="glow-orb"></div>
|
|
</div>
|
|
<div class="floating-element float-2">
|
|
<div class="glow-orb mint"></div>
|
|
</div>
|
|
<div class="floating-element float-3"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><circle cx="20" cy="20" r="18" stroke="var(--accent-mint)" stroke-width="2" stroke-dasharray="4 4"/></svg></div>
|
|
<div class="floating-element float-4"><svg width="50" height="50" viewBox="0 0 50 50" fill="none"><polygon points="25,5 45,40 5,40" stroke="var(--accent-blue)" stroke-width="2" fill="none"/></svg></div>
|
|
|
|
<div class="hero-content">
|
|
<div class="hero-badge">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg> Next-Generation Innovation Platform
|
|
</div>
|
|
<h1 class="hero-title font-display">Illuminate Your<br><span class="gradient-text">Brightest Ideas</span></h1>
|
|
<p class="hero-subtitle">Transform the way you think, create, and innovate. Moxiegen connects your ideas to infinite possibilities through our intelligent network platform.</p>
|
|
<div class="hero-cta">
|
|
<button class="btn-primary">Start Free Trial</button>
|
|
<button class="btn-secondary">Watch Demo</button>
|
|
</div>
|
|
</div>
|
|
<div class="scroll-indicator"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--accent-blue)" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>
|
|
</section>
|
|
|
|
<section class="section" id="features">
|
|
<div class="section-header">
|
|
<p class="section-label reveal">Features</p>
|
|
<h2 class="section-title font-display reveal reveal-delay-1">Powerful Tools for Modern Minds</h2>
|
|
</div>
|
|
<div class="features-grid">
|
|
<div class="feature-card" data-delay="0">
|
|
<div class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="var(--accent-blue)" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v6M12 17v6M4.22 4.22l4.24 4.24M15.54 15.54l4.24 4.24M1 12h6M17 12h6M4.22 19.78l4.24-4.24M15.54 8.46l4.24-4.24"/></svg></div>
|
|
<h3 class="feature-title">Intelligent Network</h3>
|
|
<p class="feature-desc">Our AI-powered network analyzes connections between ideas, revealing hidden patterns and opportunities.</p>
|
|
</div>
|
|
<div class="feature-card" data-delay="100">
|
|
<div class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="var(--accent-mint)" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></div>
|
|
<h3 class="feature-title">Lightning Fast</h3>
|
|
<p class="feature-desc">Process millions of data points in milliseconds. Real-time insights at your fingertips.</p>
|
|
</div>
|
|
<div class="feature-card" data-delay="200">
|
|
<div class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="var(--accent-cream)" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg></div>
|
|
<h3 class="feature-title">Visual Dashboard</h3>
|
|
<p class="feature-desc">Beautiful, intuitive interfaces that turn complex data into actionable visualizations.</p>
|
|
</div>
|
|
<div class="feature-card" data-delay="300">
|
|
<div class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="var(--accent-blue)" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
|
|
<h3 class="feature-title">Enterprise Security</h3>
|
|
<p class="feature-desc">Bank-grade encryption and compliance certifications keep your ideas safe and secure.</p>
|
|
</div>
|
|
<div class="feature-card" data-delay="400">
|
|
<div class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="var(--accent-mint)" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
|
|
<h3 class="feature-title">Team Collaboration</h3>
|
|
<p class="feature-desc">Work together seamlessly with real-time sync, comments, and version control.</p>
|
|
</div>
|
|
<div class="feature-card" data-delay="500">
|
|
<div class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="var(--accent-cream)" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg></div>
|
|
<h3 class="feature-title">API Integration</h3>
|
|
<p class="feature-desc">Connect with your favorite tools through our robust REST API and webhooks.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section stats-section" id="solutions">
|
|
<div class="stats-grid">
|
|
<div class="stat-item">
|
|
<div class="stat-number font-display" data-target="10">0</div>
|
|
<div class="stat-label">Million Ideas Connected</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number font-display" data-target="50">0</div>
|
|
<div class="stat-label">Thousand Teams</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number font-display" data-target="99">0</div>
|
|
<div class="stat-label">Percent Uptime</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number font-display" data-target="150">0</div>
|
|
<div class="stat-label">Countries Worldwide</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="testimonials">
|
|
<div class="section-header">
|
|
<p class="section-label reveal">Testimonials</p>
|
|
<h2 class="section-title font-display reveal reveal-delay-1">Loved by Innovators</h2>
|
|
</div>
|
|
<div class="testimonials-container reveal reveal-delay-2">
|
|
<div class="testimonial-card">
|
|
<p class="testimonial-text">"Moxiegen transformed how our team brainstorms. We've cut our ideation time in half and the quality of ideas has dramatically improved. It's like having a creative partner that never sleeps."</p>
|
|
<div class="testimonial-author">
|
|
<div class="author-avatar">SK</div>
|
|
<div class="author-info">
|
|
<div class="author-name">Sarah Kim</div>
|
|
<div class="author-role">Head of Innovation, TechCorp</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cta-section" id="contact">
|
|
<h2 class="cta-title font-display reveal">Ready to Illuminate Your Ideas?</h2>
|
|
<p class="cta-subtitle reveal reveal-delay-1">Join thousands of innovators who are already using Moxiegen to transform their creative process.</p>
|
|
<div class="reveal reveal-delay-2"><button class="btn-primary">Get Started Free</button></div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<p class="footer-text">2024 Moxiegen. All rights reserved. Built for innovators.</p>
|
|
</footer>
|
|
|
|
<script>
|
|
const canvas = document.getElementById('particles-canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
let particles = [];
|
|
let mouseX = 0,
|
|
mouseY = 0;
|
|
|
|
function resizeCanvas() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
resizeCanvas();
|
|
window.addEventListener('resize', resizeCanvas);
|
|
|
|
class Particle {
|
|
constructor() {
|
|
this.reset();
|
|
}
|
|
reset() {
|
|
this.x = Math.random() * canvas.width;
|
|
this.y = Math.random() * canvas.height;
|
|
this.size = Math.random() * 2 + 0.5;
|
|
this.speedX = (Math.random() - 0.5) * 0.5;
|
|
this.speedY = (Math.random() - 0.5) * 0.5;
|
|
this.opacity = Math.random() * 0.5 + 0.2;
|
|
this.hue = Math.random() > 0.5 ? 200 : 160;
|
|
}
|
|
update() {
|
|
this.x += this.speedX;
|
|
this.y += this.speedY;
|
|
const dx = mouseX - this.x,
|
|
dy = mouseY - this.y,
|
|
dist = Math.sqrt(dx * dx + dy * dy);
|
|
if (dist < 150) {
|
|
const force = (150 - dist) / 150;
|
|
this.x -= dx * force * 0.02;
|
|
this.y -= dy * force * 0.02;
|
|
}
|
|
if (this.x < 0) this.x = canvas.width;
|
|
if (this.x > canvas.width) this.x = 0;
|
|
if (this.y < 0) this.y = canvas.height;
|
|
if (this.y > canvas.height) this.y = 0;
|
|
}
|
|
draw() {
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, Math.max(0.1, this.size), 0, Math.PI * 2);
|
|
ctx.fillStyle = `hsla(${this.hue}, 70%, 70%, ${this.opacity})`;
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
function initParticles() {
|
|
particles = [];
|
|
const count = Math.min(80, Math.floor((canvas.width * canvas.height) / 15000));
|
|
for (let i = 0; i < count; i++) particles.push(new Particle());
|
|
}
|
|
initParticles();
|
|
|
|
function drawConnections() {
|
|
for (let i = 0; i < particles.length; i++) {
|
|
for (let j = i + 1; j < particles.length; j++) {
|
|
const dx = particles[i].x - particles[j].x,
|
|
dy = particles[i].y - particles[j].y,
|
|
dist = Math.sqrt(dx * dx + dy * dy);
|
|
if (dist < 120) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(particles[i].x, particles[i].y);
|
|
ctx.lineTo(particles[j].x, particles[j].y);
|
|
ctx.strokeStyle = `rgba(128, 196, 233, ${(1 - dist / 120) * 0.15})`;
|
|
ctx.lineWidth = 0.5;
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function animate() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
particles.forEach(p => {
|
|
p.update();
|
|
p.draw();
|
|
});
|
|
drawConnections();
|
|
requestAnimationFrame(animate);
|
|
}
|
|
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) animate();
|
|
|
|
document.addEventListener('mousemove', e => {
|
|
mouseX = e.clientX;
|
|
mouseY = e.clientY;
|
|
});
|
|
|
|
const navbar = document.getElementById('navbar');
|
|
window.addEventListener('scroll', () => {
|
|
navbar.classList.toggle('scrolled', window.scrollY > 50);
|
|
});
|
|
|
|
document.getElementById('mobile-menu-btn').addEventListener('click', () => {
|
|
document.getElementById('nav-links').classList.toggle('active');
|
|
});
|
|
document.querySelectorAll('#nav-links a').forEach(link => link.addEventListener('click', () => {
|
|
document.getElementById('nav-links').classList.remove('active');
|
|
}));
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const delay = entry.target.dataset.delay || 0;
|
|
setTimeout(() => entry.target.classList.add('visible'), delay);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
});
|
|
document.querySelectorAll('.feature-card, .stat-item, .reveal').forEach(el => observer.observe(el));
|
|
|
|
const statsObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.querySelectorAll('.stat-number').forEach(stat => {
|
|
const target = parseInt(stat.dataset.target);
|
|
let current = 0;
|
|
const increment = target / 60;
|
|
const timer = setInterval(() => {
|
|
current += increment;
|
|
if (current >= target) {
|
|
stat.textContent = target + (target === 99 ? '%' : target >= 50 ? '+' : 'M+');
|
|
clearInterval(timer);
|
|
} else stat.textContent = Math.floor(current);
|
|
}, 16);
|
|
});
|
|
statsObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.5
|
|
});
|
|
statsObserver.observe(document.querySelector('.stats-grid'));
|
|
|
|
document.querySelectorAll('.btn-primary, .btn-secondary').forEach(btn => {
|
|
btn.addEventListener('click', function(e) {
|
|
const ripple = document.createElement('span');
|
|
const rect = this.getBoundingClientRect();
|
|
const size = Math.max(rect.width, rect.height);
|
|
ripple.style.cssText = `position:absolute;width:${size}px;height:${size}px;background:rgba(255,255,255,0.3);border-radius:50%;transform:scale(0);animation:ripple 0.6s ease-out;left:${e.clientX - rect.left - size/2}px;top:${e.clientY - rect.top - size/2}px;pointer-events:none;`;
|
|
this.style.position = 'relative';
|
|
this.style.overflow = 'hidden';
|
|
this.appendChild(ripple);
|
|
setTimeout(() => ripple.remove(), 600);
|
|
});
|
|
});
|
|
const styleSheet = document.createElement('style');
|
|
styleSheet.textContent = '@keyframes ripple { to { transform: scale(4); opacity: 0; } }';
|
|
document.head.appendChild(styleSheet);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |