|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CORTEX - AI Evolution Platform</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--electron-blue: #4a6bff; |
|
|
--nexora-purple: #9c4dff; |
|
|
--cyber-yellow: #ffd700; |
|
|
--cyber-pink: #ff6b9d; |
|
|
--light-bg: #f8f9fa; |
|
|
--neon-green: #4dffb5; |
|
|
--grid-line: rgba(74, 107, 255, 0.1); |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Rajdhani', sans-serif; |
|
|
background-color: var(--light-bg); |
|
|
color: #333; |
|
|
overflow-x: hidden; |
|
|
background-image: |
|
|
linear-gradient(var(--grid-line) 1px, transparent 1px), |
|
|
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); |
|
|
background-size: 20px 20px; |
|
|
} |
|
|
|
|
|
.orbitron { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
} |
|
|
|
|
|
.gradient-text-electron { |
|
|
background: linear-gradient(90deg, #4a6bff, #6d8cff); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.gradient-text-nexora { |
|
|
background: linear-gradient(90deg, #9c4dff, #c47dff); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.glow-electron { |
|
|
box-shadow: 0 0 15px rgba(74, 107, 255, 0.7); |
|
|
} |
|
|
|
|
|
.glow-nexora { |
|
|
box-shadow: 0 0 15px rgba(156, 77, 255, 0.7); |
|
|
} |
|
|
|
|
|
.hover-glow-electron:hover { |
|
|
box-shadow: 0 0 25px rgba(74, 107, 255, 0.9); |
|
|
} |
|
|
|
|
|
.hover-glow-nexora:hover { |
|
|
box-shadow: 0 0 25px rgba(156, 77, 255, 0.9); |
|
|
} |
|
|
|
|
|
.cyber-border { |
|
|
position: relative; |
|
|
border: 1px solid transparent; |
|
|
} |
|
|
|
|
|
.cyber-border::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
inset: 0; |
|
|
border: 1px solid var(--electron-blue); |
|
|
border-image: linear-gradient(45deg, var(--electron-blue), var(--nexora-purple)) 1; |
|
|
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); |
|
|
mask-composite: exclude; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.cyber-glow { |
|
|
box-shadow: 0 0 15px rgba(74, 107, 255, 0.5), 0 0 30px rgba(156, 77, 255, 0.3); |
|
|
} |
|
|
|
|
|
.neon-border-electron { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.neon-border-electron::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -2px; |
|
|
left: -2px; |
|
|
right: -2px; |
|
|
bottom: -2px; |
|
|
border: 2px solid var(--electron-blue); |
|
|
border-radius: inherit; |
|
|
z-index: -1; |
|
|
animation: pulse-electron 2s infinite; |
|
|
} |
|
|
|
|
|
.neon-border-nexora { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.neon-border-nexora::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -2px; |
|
|
left: -2px; |
|
|
right: -2px; |
|
|
bottom: -2px; |
|
|
border: 2px solid var(--nexora-purple); |
|
|
border-radius: inherit; |
|
|
z-index: -1; |
|
|
animation: pulse-nexora 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse-electron { |
|
|
0% { opacity: 0.3; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.3; } |
|
|
} |
|
|
|
|
|
@keyframes pulse-nexora { |
|
|
0% { opacity: 0.3; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.3; } |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: floating 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-15px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.floating-delay-1 { |
|
|
animation-delay: 0.5s; |
|
|
} |
|
|
|
|
|
.floating-delay-2 { |
|
|
animation-delay: 1s; |
|
|
} |
|
|
|
|
|
.hexagon { |
|
|
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); |
|
|
} |
|
|
|
|
|
.grid-dots { |
|
|
background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); |
|
|
background-size: 20px 20px; |
|
|
} |
|
|
|
|
|
.ai-card { |
|
|
transition: all 0.3s ease; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
|
|
|
.ai-card:hover { |
|
|
transform: translateY(-10px) rotateX(5deg); |
|
|
} |
|
|
|
|
|
.particle { |
|
|
position: absolute; |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.scroll-indicator { |
|
|
animation: bounce 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 20%, 50%, 80%, 100% { transform: translateY(0); } |
|
|
40% { transform: translateY(-20px); } |
|
|
60% { transform: translateY(-10px); } |
|
|
} |
|
|
|
|
|
.terminal-line { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.terminal-line::before { |
|
|
content: '>'; |
|
|
position: absolute; |
|
|
left: -20px; |
|
|
color: var(--electron-blue); |
|
|
} |
|
|
|
|
|
.nexora-terminal-line::before { |
|
|
color: var(--nexora-purple); |
|
|
} |
|
|
|
|
|
.typewriter { |
|
|
overflow: hidden; |
|
|
border-right: 2px solid var(--electron-blue); |
|
|
white-space: nowrap; |
|
|
margin: 0 auto; |
|
|
letter-spacing: 2px; |
|
|
animation: typing 3.5s steps(40, 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(--electron-blue) } |
|
|
} |
|
|
|
|
|
.nexora-typewriter { |
|
|
border-right-color: var(--nexora-purple); |
|
|
} |
|
|
|
|
|
@keyframes nexora-blink-caret { |
|
|
from, to { border-color: transparent } |
|
|
50% { border-color: var(--nexora-purple) } |
|
|
} |
|
|
|
|
|
.nexora-typewriter { |
|
|
animation: typing 3.5s steps(40, end), nexora-blink-caret 0.75s step-end infinite; |
|
|
} |
|
|
|
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
|
|
|
.spin { |
|
|
animation: spin 3s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
from { transform: rotate(0deg); } |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.wiggle { |
|
|
animation: wiggle 1s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes wiggle { |
|
|
0%, 100% { transform: rotate(-3deg); } |
|
|
50% { transform: rotate(3deg); } |
|
|
} |
|
|
|
|
|
.zoom-in-out { |
|
|
animation: zoom-in-out 2s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes zoom-in-out { |
|
|
0%, 100% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
} |
|
|
|
|
|
.slide-in-left { |
|
|
animation: slide-in-left 0.5s ease-out forwards; |
|
|
} |
|
|
|
|
|
@keyframes slide-in-left { |
|
|
from { transform: translateX(-100px); opacity: 0; } |
|
|
to { transform: translateX(0); opacity: 1; } |
|
|
} |
|
|
|
|
|
.slide-in-right { |
|
|
animation: slide-in-right 0.5s ease-out forwards; |
|
|
} |
|
|
|
|
|
@keyframes slide-in-right { |
|
|
from { transform: translateX(100px); opacity: 0; } |
|
|
to { transform: translateX(0); opacity: 1; } |
|
|
} |
|
|
|
|
|
.slide-in-bottom { |
|
|
animation: slide-in-bottom 0.5s ease-out forwards; |
|
|
} |
|
|
|
|
|
@keyframes slide-in-bottom { |
|
|
from { transform: translateY(100px); opacity: 0; } |
|
|
to { transform: translateY(0); opacity: 1; } |
|
|
} |
|
|
|
|
|
.neon-flicker { |
|
|
animation: neon-flicker 1.5s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes neon-flicker { |
|
|
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { |
|
|
text-shadow: |
|
|
0 0 4px #fff, |
|
|
0 0 11px #fff, |
|
|
0 0 19px #fff, |
|
|
0 0 40px var(--electron-blue), |
|
|
0 0 80px var(--electron-blue), |
|
|
0 0 90px var(--electron-blue), |
|
|
0 0 100px var(--electron-blue), |
|
|
0 0 150px var(--electron-blue); |
|
|
} |
|
|
20%, 24%, 55% { |
|
|
text-shadow: none; |
|
|
} |
|
|
} |
|
|
|
|
|
.grid-lines { |
|
|
background-image: |
|
|
linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), |
|
|
linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px); |
|
|
background-size: 20px 20px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="circuit-bg"> |
|
|
|
|
|
<nav class="fixed w-full z-50 bg-white bg-opacity-80 backdrop-blur-sm shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<a href="#" class="flex-shrink-0 flex items-center"> |
|
|
<span class="orbitron text-2xl font-bold gradient-text-electron">CORT<span class="gradient-text-nexora">EX</span></span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
|
|
<a href="#electron" class="text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:glow-electron hover:bg-gray-100 group"> |
|
|
<span class="inline-block group-hover:animate-bounce">elecTron</span> |
|
|
</a> |
|
|
<a href="#nexora" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:glow-nexora hover:bg-gray-900">neXora</a> |
|
|
<a href="#features" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:bg-gray-900">Features</a> |
|
|
<a href="#pricing" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-all duration-300 hover:bg-gray-900">Pricing</a> |
|
|
<button class="ml-4 neon-border-electron px-4 py-2 rounded-md text-sm font-medium text-white hover-glow-electron hover:bg-gray-900 transition-all duration-300"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center md:hidden"> |
|
|
<button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-gray-900"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#electron" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">elecTron</a> |
|
|
<a href="#nexora" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">neXora</a> |
|
|
<a href="#features" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Features</a> |
|
|
<a href="#pricing" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Pricing</a> |
|
|
<button class="w-full neon-border-electron px-4 py-2 rounded-md text-base font-medium text-white mt-2"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="relative pt-24 pb-20 px-4 sm:px-6 lg:pt-32 lg:pb-28 lg:px-8 grid-lines"> |
|
|
<div class="absolute inset-0"> |
|
|
<div class="absolute inset-y-0 left-0 w-1/2 bg-gradient-to-r from-black to-transparent"></div> |
|
|
<div class="absolute inset-y-0 right-0 w-1/2 bg-gradient-to-l from-black to-transparent"></div> |
|
|
</div> |
|
|
<div class="relative max-w-7xl mx-auto"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl"> |
|
|
<span class="block orbitron gradient-text-electron neon-flicker">elecTron</span> |
|
|
<span class="block orbitron gradient-text-nexora neon-flicker" style="animation-delay: 0.5s">neXora</span> |
|
|
</h1> |
|
|
<p class="mt-3 max-w-md mx-auto text-base text-gray-300 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl"> |
|
|
The next evolution in artificial intelligence. Two sides of the same powerful coin. |
|
|
</p> |
|
|
<div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8"> |
|
|
<div class="rounded-md shadow"> |
|
|
<a href="#electron" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-black bg-gradient-to-r from-cyan-400 to-blue-500 hover:from-cyan-500 hover:to-blue-600 md:py-4 md:text-lg md:px-10 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/50 pulse"> |
|
|
<span class="inline-block">Explore elecTron</span> |
|
|
<i class="fas fa-arrow-right ml-2 transform transition-transform duration-300 group-hover:translate-x-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3"> |
|
|
<a href="#nexora" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-black bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 md:py-4 md:text-lg md:px-10 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/50"> |
|
|
Discover neXora |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute top-1/4 left-1/4 w-8 h-8 rounded-full bg-cyan-500 opacity-30 floating spin" style="animation-duration: 20s"></div> |
|
|
<div class="absolute top-1/3 right-1/4 w-12 h-12 rounded-full bg-purple-500 opacity-30 floating pulse" style="animation-duration: 3s"></div> |
|
|
<div class="absolute bottom-1/4 left-1/3 w-10 h-10 rounded-full bg-pink-500 opacity-30 floating wiggle"></div> |
|
|
<div class="absolute bottom-1/3 right-1/3 w-6 h-6 rounded-full bg-blue-500 opacity-30 floating"></div> |
|
|
|
|
|
|
|
|
<div class="absolute inset-0 overflow-hidden pointer-events-none"> |
|
|
<div class="absolute inset-0 bg-grid-lines" style="background-size: 40px 40px; animation: grid-move 30s linear infinite;"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-center scroll-indicator"> |
|
|
<p class="text-sm text-gray-400 mb-2">Scroll to explore</p> |
|
|
<i class="fas fa-chevron-down text-gray-400 animate-bounce"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section id="electron" class="py-20 px-4 sm:px-6 lg:py-28 lg:px-8 bg-gradient-to-b from-gray-900 to-black"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl orbitron gradient-text-electron"> |
|
|
elecTron AI |
|
|
</h2> |
|
|
<p class="mt-3 max-w-2xl mx-auto text-lg text-gray-300 sm:mt-4"> |
|
|
Precision-engineered intelligence for technical problem solving and data analysis. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="ai-card bg-white rounded-lg overflow-hidden shadow-lg neon-border-electron p-6 hover:zoom-in-out"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="hexagon w-16 h-16 bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center"> |
|
|
<i class="fas fa-brain text-2xl text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2 orbitron">Technical Mastery</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Advanced algorithms designed for complex technical computations, engineering simulations, and scientific research. |
|
|
</p> |
|
|
<div class="terminal-line text-sm font-mono text-blue-600">Processing efficiency: 98.7%</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="ai-card bg-gray-800 rounded-lg overflow-hidden shadow-lg neon-border-electron p-6"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="hexagon w-16 h-16 bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center"> |
|
|
<i class="fas fa-chart-line text-2xl text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2 orbitron">Data Analysis</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Real-time processing of massive datasets with unparalleled accuracy and lightning-fast response times. |
|
|
</p> |
|
|
<div class="terminal-line text-sm font-mono text-cyan-300">Data throughput: 12.4 TB/s</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="ai-card bg-gray-800 rounded-lg overflow-hidden shadow-lg neon-border-electron p-6"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="hexagon w-16 h-16 bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center"> |
|
|
<i class="fas fa-cogs text-2xl text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2 orbitron">System Integration</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Seamless API connectivity with existing infrastructure and enterprise systems for smooth implementation. |
|
|
</p> |
|
|
<div class="terminal-line text-sm font-mono text-cyan-300">API latency: 3.2ms avg</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 text-center"> |
|
|
<div class="inline-block typewriter text-xl font-mono text-cyan-300 mb-6"> |
|
|
elecTron system initialized... Ready for technical operations. |
|
|
</div> |
|
|
<div> |
|
|
<button class="neon-border-electron px-6 py-3 rounded-md text-lg font-medium text-white hover-glow-electron transition-all duration-300"> |
|
|
Request Technical Demo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="nexora" class="py-20 px-4 sm:px-6 lg:py-28 lg:px-8 bg-gradient-to-b from-black to-gray-900"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl orbitron gradient-text-nexora"> |
|
|
neXora AI |
|
|
</h2> |
|
|
<p class="mt-3 max-w-2xl mx-auto text-lg text-gray-300 sm:mt-4"> |
|
|
Creative intelligence with human-like understanding for artistic and conceptual tasks. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="ai-card bg-gray-800 rounded-lg overflow-hidden shadow-lg neon-border-nexora p-6"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="hexagon w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center"> |
|
|
<i class="fas fa-paint-brush text-2xl text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2 orbitron">Creative Genius</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Generates original art, music, and literature with emotional depth and stylistic versatility. |
|
|
</p> |
|
|
<div class="terminal-line nexora-terminal-line text-sm font-mono text-purple-300">Creativity index: 9.8/10</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="ai-card bg-gray-800 rounded-lg overflow-hidden shadow-lg neon-border-nexora p-6"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="hexagon w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center"> |
|
|
<i class="fas fa-comments text-2xl text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2 orbitron">Natural Interaction</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Conversational abilities indistinguishable from human interaction, with contextual understanding. |
|
|
</p> |
|
|
<div class="terminal-line nexora-terminal-line text-sm font-mono text-purple-300">Empathy score: 96.5%</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="ai-card bg-gray-800 rounded-lg overflow-hidden shadow-lg neon-border-nexora p-6"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="hexagon w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center"> |
|
|
<i class="fas fa-lightbulb text-2xl text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white mb-2 orbitron">Conceptual Innovation</h3> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Brainstorms novel ideas, solves abstract problems, and makes intuitive leaps beyond conventional AI. |
|
|
</p> |
|
|
<div class="terminal-line nexora-terminal-line text-sm font-mono text-purple-300">Innovation factor: 8.7/10</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 text-center"> |
|
|
<div class="inline-block nexora-typewriter text-xl font-mono text-purple-300 mb-6"> |
|
|
neXora consciousness active... Imagination protocols engaged. |
|
|
</div> |
|
|
<div> |
|
|
<button class="neon-border-nexora px-6 py-3 rounded-md text-lg font-medium text-white hover-glow-nexora transition-all duration-300"> |
|
|
Experience Creative Demo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-20 px-4 sm:px-6 lg:py-28 lg:px-8 bg-gray-900 grid-dots"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl orbitron"> |
|
|
<span class="gradient-text-electron">Interactive</span> <span class="gradient-text-nexora">Features</span> |
|
|
</h2> |
|
|
<div class="mt-8 max-w-2xl mx-auto"> |
|
|
<div class="flex border-b border-gray-700"> |
|
|
<button class="feature-tab active px-4 py-2 text-sm font-medium text-white border-b-2 border-cyan-500" data-tab="electron">elecTron</button> |
|
|
<button class="feature-tab px-4 py-2 text-sm font-medium text-gray-400 hover:text-white" data-tab="nexora">neXora</button> |
|
|
<button class="feature-tab px-4 py-2 text-sm font-medium text-gray-400 hover:text-white" data-tab="compare">Compare</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-content active" id="electron-tab"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div class="bg-gray-800 rounded-lg p-6 neon-border-electron"> |
|
|
<h3 class="text-xl font-bold text-white mb-4 orbitron">Technical Dashboard</h3> |
|
|
<div class="grid grid-cols-2 gap-4 mb-6"> |
|
|
<div class="bg-gray-700 rounded p-4 text-center"> |
|
|
<div class="text-3xl font-bold text-cyan-400 mb-1">98.7%</div> |
|
|
<div class="text-xs text-gray-300">Accuracy</div> |
|
|
</div> |
|
|
<div class="bg-gray-700 rounded p-4 text-center"> |
|
|
<div class="text-3xl font-bold text-cyan-400 mb-1">12.4TB/s</div> |
|
|
<div class="text-xs text-gray-300">Throughput</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full bg-cyan-600 hover:bg-cyan-700 text-white py-2 rounded transition-all duration-300"> |
|
|
View Performance Metrics |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-lg p-6 neon-border-electron"> |
|
|
<h3 class="text-xl font-bold text-white mb-4 orbitron">Code Playground</h3> |
|
|
<div class="bg-gray-900 rounded p-4 mb-4 h-32 overflow-auto"> |
|
|
<pre class="text-green-400 text-sm">// Sample code output |
|
|
function calculate() { |
|
|
return 42 * Math.PI; |
|
|
}</pre> |
|
|
</div> |
|
|
<button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 rounded transition-all duration-300"> |
|
|
Try Live Editor |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="feature-content hidden" id="nexora-tab"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div class="bg-gray-800 rounded-lg p-6 neon-border-nexora"> |
|
|
<h3 class="text-xl font-bold text-white mb-4 orbitron">Creative Studio</h3> |
|
|
<div class="bg-gray-900 rounded p-4 mb-4 h-48 flex items-center justify-center"> |
|
|
<div class="text-purple-400 text-center"> |
|
|
<i class="fas fa-paint-brush text-4xl mb-2"></i> |
|
|
<p class="text-sm">Generate art, music, and stories</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded transition-all duration-300"> |
|
|
Launch Creative Studio |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-lg p-6 neon-border-nexora"> |
|
|
<h3 class="text-xl font-bold text-white mb-4 orbitron">Conversation Simulator</h3> |
|
|
<div class="bg-gray-900 rounded p-4 mb-4 h-32 overflow-auto"> |
|
|
<p class="text-pink-300 text-sm">neXora: "How are you feeling today?"</p> |
|
|
<p class="text-gray-300 text-sm mt-2">You: </p> |
|
|
</div> |
|
|
<button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 rounded transition-all duration-300"> |
|
|
Start Conversation |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="feature-content hidden" id="compare-tab"> |
|
|
<div class="bg-gray-800 rounded-lg p-6 neon-border-electron neon-border-nexora"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-700"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Feature</th> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-cyan-300 uppercase tracking-wider">elecTron</th> |
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-purple-300 uppercase tracking-wider">neXora</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="divide-y divide-gray-700"> |
|
|
<tr> |
|
|
<td class="px-4 py-3 text-sm text-gray-300">Technical Analysis</td> |
|
|
<td class="px-4 py-3 text-sm text-cyan-400"><i class="fas fa-check"></i></td> |
|
|
<td class="px-4 py-3 text-sm text-purple-400"><i class="fas fa-check"></i></td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-3 text-sm text-gray-300">Creative Generation</td> |
|
|
<td class="px-4 py-3 text-sm text-cyan-400"><i class="fas fa-times"></i></td> |
|
|
<td class="px-4 py-3 text-sm text-purple-400"><i class="fas fa-check"></i></td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-3 text-sm text-gray-300">Real-time Processing</td> |
|
|
<td class="px-4 py-3 text-sm text-cyan-400"><i class="fas fa-check"></i></td> |
|
|
<td class="px-4 py-3 text-sm text-purple-400"><i class="fas fa-check"></i></td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl orbitron"> |
|
|
<span class="gradient-text-electron">CORT</span><span class="gradient-text-nexora">EX</span> Features |
|
|
</h2> |
|
|
<p class="mt-3 max-w-2xl mx-auto text-lg text-gray-300 sm:mt-4"> |
|
|
The combined power of elecTron and neXora creates an unparalleled AI experience. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="relative bg-gray-800 p-6 rounded-lg overflow-hidden"> |
|
|
<div class="absolute -top-4 -right-4 w-24 h-24 bg-cyan-500 rounded-full opacity-10"></div> |
|
|
<div class="absolute -bottom-4 -left-4 w-24 h-24 bg-purple-500 rounded-full opacity-10"></div> |
|
|
<div class="relative z-10"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0 bg-gradient-to-r from-cyan-500 to-blue-600 p-2 rounded-md"> |
|
|
<i class="fas fa-random text-white text-xl"></i> |
|
|
</div> |
|
|
<h3 class="ml-3 text-lg font-bold text-white orbitron">Dynamic Switching</h3> |
|
|
</div> |
|
|
<p class="text-gray-300"> |
|
|
Seamlessly transition between elecTron's technical precision and neXora's creative brilliance with a single command. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative bg-gray-800 p-6 rounded-lg overflow-hidden"> |
|
|
<div class="absolute -top-4 -right-4 w-24 h-24 bg-purple-500 rounded-full opacity-10"></div> |
|
|
<div class="absolute -bottom-4 -left-4 w-24 h-24 bg-cyan-500 rounded-full opacity-10"></div> |
|
|
<div class="relative z-10"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0 bg-gradient-to-r from-purple-500 to-pink-600 p-2 rounded-md"> |
|
|
<i class="fas fa-sync-alt text-white text-xl"></i> |
|
|
</div> |
|
|
<h3 class="ml-3 text-lg font-bold text-white orbitron">Collaborative Mode</h3> |
|
|
</div> |
|
|
<p class="text-gray-300"> |
|
|
Both AIs work in tandem, combining analytical rigor with creative solutions for breakthrough results. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative bg-gray-800 p-6 rounded-lg overflow-hidden"> |
|
|
<div class="absolute -top-4 -right-4 w-24 h-24 bg-cyan-500 rounded-full opacity-10"></div> |
|
|
<div class="absolute -bottom-4 -left-4 w-24 h-24 bg-purple-500 rounded-full opacity-10"></div> |
|
|
<div class="relative z-10"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0 bg-gradient-to-r from-cyan-500 to-purple-600 p-2 rounded-md"> |
|
|
<i class="fas fa-shield-alt text-white text-xl"></i> |
|
|
</div> |
|
|
<h3 class="ml-3 text-lg font-bold text-white orbitron">Security Protocol</h3> |
|
|
</div> |
|
|
<p class="text-gray-300"> |
|
|
Military-grade encryption and privacy controls ensure your data remains secure across both systems. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative bg-gray-800 p-6 rounded-lg overflow-hidden"> |
|
|
<div class="absolute -top-4 -right-4 w-24 h-24 bg-purple-500 rounded-full opacity-10"></div> |
|
|
<div class="absolute -bottom-4 -left-4 w-24 h-24 bg-cyan-500 rounded-full opacity-10"></div> |
|
|
<div class="relative z-10"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0 bg-gradient-to-r from-pink-500 to-cyan-600 p-2 rounded-md"> |
|
|
<i class="fas fa-rocket text-white text-xl"></i> |
|
|
</div> |
|
|
<h3 class="ml-3 text-lg font-bold text-white orbitron">Continuous Learning</h3> |
|
|
</div> |
|
|
<p class="text-gray-300"> |
|
|
Both AIs evolve with each interaction, constantly improving their capabilities and understanding. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative bg-gray-800 p-6 rounded-lg overflow-hidden"> |
|
|
<div class="absolute -top-4 -right-4 w-24 h-24 bg-cyan-500 rounded-full opacity-10"></div> |
|
|
<div class="absolute -bottom-4 -left-4 w-24 h-24 bg-purple-500 rounded-full opacity-10"></div> |
|
|
<div class="relative z-10"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0 bg-gradient-to-r from-blue-500 to-purple-600 p-2 rounded-md"> |
|
|
<i class="fas fa-project-diagram text-white text-xl"></i> |
|
|
</div> |
|
|
<h3 class="ml-3 text-lg font-bold text-white orbitron">Custom Integration</h3> |
|
|
</div> |
|
|
<p class="text-gray-300"> |
|
|
Tailor both AIs to your specific needs with customizable modules and specialized training. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative bg-gray-800 p-6 rounded-lg overflow-hidden"> |
|
|
<div class="absolute -top-4 -right-4 w-24 h-24 bg-purple-500 rounded-full opacity-10"></div> |
|
|
<div class="absolute -bottom-4 -left-4 w-24 h-24 bg-cyan-500 rounded-full opacity-10"></div> |
|
|
<div class="relative z-10"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex-shrink-0 bg-gradient-to-r from-purple-500 to-cyan-600 p-2 rounded-md"> |
|
|
<i class="fas fa-chart-pie text-white text-xl"></i> |
|
|
</div> |
|
|
<h3 class="ml-3 text-lg font-bold text-white orbitron">Performance Analytics</h3> |
|
|
</div> |
|
|
<p class="text-gray-300"> |
|
|
Detailed metrics on both AIs' performance, with insights for optimization and improvement. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="pricing" class="py-20 px-4 sm:px-6 lg:py-28 lg:px-8 bg-black"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl orbitron"> |
|
|
<span class="gradient-text-electron">Free</span> <span class="gradient-text-nexora">Premium</span> |
|
|
</h2> |
|
|
<p class="mt-3 max-w-2xl mx-auto text-lg text-gray-300 sm:mt-4"> |
|
|
elecTron is completely free while neXora offers premium capabilities |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="relative bg-gray-800 rounded-lg overflow-hidden shadow-lg neon-border-electron"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold text-white mb-2 orbitron">elecTron</h3> |
|
|
<p class="text-gray-300 mb-6">Free forever with basic features</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-extrabold text-white">$0</span> |
|
|
<span class="text-gray-300">/month</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-cyan-500 mr-2"></i> |
|
|
<span class="text-gray-300">Basic image generation</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-cyan-500 mr-2"></i> |
|
|
<span class="text-gray-300">Simple code editor</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-cyan-500 mr-2"></i> |
|
|
<span class="text-gray-300">Basic data analysis</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-cyan-500 mr-2"></i> |
|
|
<span class="text-gray-300">Community support</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full neon-border-electron px-4 py-3 rounded-md text-lg font-medium text-white hover-glow-electron transition-all duration-300"> |
|
|
Use For Free |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative bg-gray-800 rounded-lg overflow-hidden shadow-lg transform scale-105 neon-border-nexora z-10"> |
|
|
<div class="absolute top-0 right-0 bg-gradient-to-r from-purple-500 to-pink-600 text-white text-xs font-bold px-3 py-1 transform translate-x-2 -translate-y-2"> |
|
|
PREMIUM |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold text-white mb-2 orbitron">neXora</h3> |
|
|
<p class="text-gray-300 mb-6">Advanced capabilities for professionals</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-extrabold text-white">$9</span> |
|
|
<span class="text-gray-300">/month</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-purple-500 mr-2"></i> |
|
|
<span class="text-gray-300">HD image generation</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-purple-500 mr-2"></i> |
|
|
<span class="text-gray-300">Advanced code editor</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-purple-500 mr-2"></i> |
|
|
<span class="text-gray-300">Realtime data analysis</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-purple-500 mr-2"></i> |
|
|
<span class="text-gray-300">Website builder</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-purple-500 mr-2"></i> |
|
|
<span class="text-gray-300">Priority support</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full neon-border-nexora px-4 py-3 rounded-md text-lg font-medium text-white hover-glow-nexora transition-all duration-300"> |
|
|
Upgrade Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 sm:px-6 lg:py-28 lg:px-8 bg-gradient-to-r from-blue-50 to-purple-50"> |
|
|
<div class="max-w-7xl mx-auto text-center"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl orbitron"> |
|
|
<span class="gradient-text-electron">Ready to experience</span> <span class="gradient-text-nexora">the future of AI?</span> |
|
|
</h2> |
|
|
<p class="mt-3 max-w-2xl mx-auto text-lg text-gray-300 sm:mt-4"> |
|
|
Join thousands of innovators already using CORTEX to push boundaries. |
|
|
</p> |
|
|
<div class="mt-8 flex justify-center"> |
|
|
<div class="inline-flex rounded-md shadow"> |
|
|
<button class="inline-flex items-center justify-center px-6 py-4 border border-transparent text-base font-medium rounded-md text-white bg-gradient-to-r from-cyan-500 to-purple-600 hover:from-cyan-600 hover:to-purple-700 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/30"> |
|
|
Get Started Now |
|
|
<i class="fas fa-arrow-right ml-3"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-white pt-16 pb-8 px-4 sm:px-6 lg:px-8 border-t border-gray-200"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold text-white mb-4 orbitron gradient-text-electron">elecTron</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Technical Specs</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">API Documentation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Use Cases</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Benchmarks</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold text-white mb-4 orbitron gradient-text-nexora">neXora</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Creative Showcase</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Art Gallery</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Writing Samples</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Innovation Lab</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold text-white mb-4 orbitron">Company</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Press</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold text-white mb-4 orbitron">Resources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Documentation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Community</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Tutorials</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Support</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-16 text-center"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl orbitron"> |
|
|
<span class="gradient-text-electron">About</span> <span class="gradient-text-nexora">Us</span> |
|
|
</h2> |
|
|
<div class="mt-8 max-w-2xl mx-auto bg-gray-800 rounded-lg p-6 neon-border-electron neon-border-nexora"> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Cortex is a student-led initiative created by two 9th grade innovators: |
|
|
</p> |
|
|
<div class="flex justify-center space-x-8 mb-6"> |
|
|
<div> |
|
|
<div class="w-20 h-20 rounded-full bg-gradient-to-r from-cyan-500 to-blue-600 mx-auto mb-2 flex items-center justify-center text-white text-2xl font-bold">V</div> |
|
|
<p class="text-white font-medium">Vineet Kumar</p> |
|
|
</div> |
|
|
<div> |
|
|
<div class="w-20 h-20 rounded-full bg-gradient-to-r from-purple-500 to-pink-600 mx-auto mb-2 flex items-center justify-center text-white text-2xl font-bold">P</div> |
|
|
<p class="text-white font-medium">Prakshmya Mishra</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-300"> |
|
|
What started as a school project has evolved into a powerful AI platform. |
|
|
We're proof that age is just a number when it comes to innovation! |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<span class="orbitron text-xl font-bold gradient-text-electron">CORT<span class="gradient-text-nexora">EX</span></span> |
|
|
<span class="ml-4 text-gray-400 text-sm">© 2023 Cortex AI. All rights reserved.</span> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0 flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors duration-300 hover:animate-spin"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> |
|
|
<i class="fab fa-linkedin"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> |
|
|
<i class="fab fa-discord"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="particles-js" class="fixed top-0 left-0 w-full h-full pointer-events-none z-0"></div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.feature-tab').forEach(tab => { |
|
|
tab.addEventListener('click', function() { |
|
|
|
|
|
document.querySelectorAll('.feature-tab').forEach(t => t.classList.remove('active', 'text-white', 'border-cyan-500')); |
|
|
document.querySelectorAll('.feature-content').forEach(c => c.classList.add('hidden')); |
|
|
|
|
|
|
|
|
this.classList.add('active', 'text-white'); |
|
|
if(this.dataset.tab === 'electron') { |
|
|
this.classList.add('border-cyan-500'); |
|
|
} else if(this.dataset.tab === 'nexora') { |
|
|
this.classList.add('border-purple-500'); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById(`${this.dataset.tab}-tab`).classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.ai-card').forEach(card => { |
|
|
card.addEventListener('click', function() { |
|
|
const details = this.querySelector('.card-details'); |
|
|
if(details) { |
|
|
details.classList.toggle('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
function createParticles() { |
|
|
const container = document.getElementById('particles-js'); |
|
|
const particleCount = 30; |
|
|
|
|
|
for (let i = 0; i < particleCount; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.classList.add('particle'); |
|
|
|
|
|
|
|
|
const size = Math.random() * 5 + 1; |
|
|
const posX = Math.random() * 100; |
|
|
const posY = Math.random() * 100; |
|
|
const delay = Math.random() * 5; |
|
|
const duration = Math.random() * 10 + 10; |
|
|
const color = Math.random() > 0.5 ? 'rgba(0, 240, 255, 0.5)' : 'rgba(179, 0, 255, 0.5)'; |
|
|
|
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
particle.style.left = `${posX}%`; |
|
|
particle.style.top = `${posY}%`; |
|
|
particle.style.backgroundColor = color; |
|
|
particle.style.animation = `floating ${duration}s ease-in-out ${delay}s infinite`; |
|
|
|
|
|
container.appendChild(particle); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
createParticles(); |
|
|
|
|
|
|
|
|
gsap.utils.toArray("h1, h2, h3").forEach(heading => { |
|
|
gsap.from(heading, { |
|
|
scrollTrigger: { |
|
|
trigger: heading, |
|
|
start: "top 80%", |
|
|
toggleActions: "play none none none" |
|
|
}, |
|
|
duration: 1, |
|
|
opacity: 0, |
|
|
y: 20, |
|
|
stagger: 0.2, |
|
|
ease: "back.out" |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
gsap.utils.toArray("button, a[href]").forEach(btn => { |
|
|
btn.addEventListener("mouseenter", () => { |
|
|
gsap.to(btn, { |
|
|
duration: 0.3, |
|
|
scale: 1.05, |
|
|
ease: "power2.out" |
|
|
}); |
|
|
}); |
|
|
btn.addEventListener("mouseleave", () => { |
|
|
gsap.to(btn, { |
|
|
duration: 0.3, |
|
|
scale: 1, |
|
|
ease: "power2.out" |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
gsap.to(".floating", { |
|
|
y: 20, |
|
|
duration: 3, |
|
|
repeat: -1, |
|
|
yoyo: true, |
|
|
ease: "sine.inOut" |
|
|
}); |
|
|
|
|
|
|
|
|
gsap.to("body", { |
|
|
backgroundPosition: "20px 20px", |
|
|
duration: 30, |
|
|
repeat: -1, |
|
|
ease: "none" |
|
|
}); |
|
|
|
|
|
|
|
|
gsap.registerPlugin(ScrollTrigger); |
|
|
|
|
|
|
|
|
gsap.from(".gradient-text-electron", { |
|
|
duration: 1.5, |
|
|
y: -50, |
|
|
opacity: 0, |
|
|
ease: "power3.out" |
|
|
}); |
|
|
|
|
|
gsap.from(".gradient-text-nexora", { |
|
|
duration: 1.5, |
|
|
y: 50, |
|
|
opacity: 0, |
|
|
ease: "power3.out", |
|
|
delay: 0.3 |
|
|
}); |
|
|
|
|
|
gsap.from("nav", { |
|
|
duration: 1, |
|
|
y: -50, |
|
|
opacity: 0, |
|
|
ease: "power3.out" |
|
|
}); |
|
|
|
|
|
|
|
|
gsap.utils.toArray("section").forEach(section => { |
|
|
gsap.from(section, { |
|
|
scrollTrigger: { |
|
|
trigger: section, |
|
|
start: "top 80%", |
|
|
toggleActions: "play none none none" |
|
|
}, |
|
|
y: 50, |
|
|
opacity: 0, |
|
|
duration: 1, |
|
|
ease: "power3.out" |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll(".ai-card").forEach(card => { |
|
|
card.addEventListener("mouseenter", function() { |
|
|
gsap.to(this, { |
|
|
duration: 0.3, |
|
|
y: -10, |
|
|
ease: "power2.out" |
|
|
}); |
|
|
}); |
|
|
|
|
|
card.addEventListener("mouseleave", function() { |
|
|
gsap.to(this, { |
|
|
duration: 0.3, |
|
|
y: 0, |
|
|
ease: "power2.out" |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll(".hover-glow-electron").forEach(btn => { |
|
|
btn.addEventListener("mouseenter", function() { |
|
|
gsap.to(this, { |
|
|
duration: 0.3, |
|
|
boxShadow: "0 0 25px rgba(0, 240, 255, 0.9)", |
|
|
ease: "power2.out" |
|
|
}); |
|
|
}); |
|
|
|
|
|
btn.addEventListener("mouseleave", function() { |
|
|
gsap.to(this, { |
|
|
duration: 0.3, |
|
|
boxShadow: "0 0 15px rgba(0, 240, 255, 0.7)", |
|
|
ease: "power2.out" |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll(".hover-glow-nexora").forEach(btn => { |
|
|
btn.addEventListener("mouseenter", function() { |
|
|
gsap.to(this, { |
|
|
duration: 0.3, |
|
|
boxShadow: "0 0 25px rgba(179, 0, 255, 0.9)", |
|
|
ease: "power2.out" |
|
|
}); |
|
|
}); |
|
|
|
|
|
btn.addEventListener("mouseleave", function() { |
|
|
gsap.to(this, { |
|
|
duration: 0.3, |
|
|
boxShadow: "0 0 15px rgba(179, 0, 255, 0.7)", |
|
|
ease: "power2.out" |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=w4rriorG/cortex" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
