File: //var/www/cxocopilot.com/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CXO Copilot - Coming Soon</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
box-sizing: border-box;
}
.gradient-bg {
background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 25%, #7c3aed 50%, #db2777 75%, #dc2626 100%);
background-size: 400% 400%;
animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.floating {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.pulse-glow {
animation: pulseGlow 2s ease-in-out infinite alternate;
}
@keyframes pulseGlow {
from { box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); }
to { box-shadow: 0 0 40px rgba(139, 92, 246, 0.6); }
}
.typewriter {
overflow: hidden;
border-right: 3px solid rgba(255,255,255,0.75);
white-space: nowrap;
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: rgba(255,255,255,0.75); }
}
.slide-up {
animation: slideUp 1s ease-out 0.5s both;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(50px); }
to { opacity: 1; transform: translateY(0); }
}
.countdown-box {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.feature-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.feature-card:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-5px);
}
</style>
</head>
<body class="gradient-bg min-h-full text-white overflow-x-hidden">
<!-- Header -->
<header class="relative z-10 pt-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
</div>
<h1 class="text-2xl font-bold">CXO Copilot</h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#features" class="hover:text-purple-200 transition-colors">Features</a>
<a href="#about" class="hover:text-purple-200 transition-colors">About</a>
<a href="#contact" class="hover:text-purple-200 transition-colors">Contact</a>
</nav>
</div>
</div>
</header>
<!-- Main Content -->
<main class="relative z-10 flex items-center justify-center min-h-full py-20">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<!-- Logo/Icon -->
<div class="floating mb-8">
<div class="w-24 h-24 mx-auto bg-white/10 rounded-2xl flex items-center justify-center backdrop-blur-sm border border-white/20">
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
</div>
</div>
<!-- Main Heading -->
<h1 class="text-5xl md:text-7xl font-bold mb-6">
<span class="typewriter">CXO Copilot</span>
</h1>
<div class="slide-up">
<p class="text-xl md:text-2xl mb-4 text-purple-100">
AI-Powered Executive Assistant
</p>
<p class="text-lg md:text-xl mb-12 text-white/80 max-w-3xl mx-auto">
Revolutionizing C-suite decision making with intelligent insights, automated workflows, and strategic recommendations. Your AI copilot for executive excellence.
</p>
</div>
<!-- Countdown Timer -->
<div class="slide-up mb-16">
<h2 class="text-2xl md:text-3xl font-semibold mb-8">Launching In</h2>
<div class="grid grid-cols-4 gap-4 max-w-md mx-auto">
<div class="countdown-box rounded-xl p-4">
<div id="days" class="text-3xl md:text-4xl font-bold">45</div>
<div class="text-sm text-purple-200">Days</div>
</div>
<div class="countdown-box rounded-xl p-4">
<div id="hours" class="text-3xl md:text-4xl font-bold">12</div>
<div class="text-sm text-purple-200">Hours</div>
</div>
<div class="countdown-box rounded-xl p-4">
<div id="minutes" class="text-3xl md:text-4xl font-bold">34</div>
<div class="text-sm text-purple-200">Minutes</div>
</div>
<div class="countdown-box rounded-xl p-4">
<div id="seconds" class="text-3xl md:text-4xl font-bold">56</div>
<div class="text-sm text-purple-200">Seconds</div>
</div>
</div>
</div>
<!-- Email Signup -->
<div class="slide-up mb-16">
<h3 class="text-xl md:text-2xl font-semibold mb-6">Be the First to Know</h3>
<div class="max-w-md mx-auto">
<form id="emailForm" class="flex flex-col sm:flex-row gap-4">
<input
type="email"
id="emailInput"
placeholder="Enter your email address"
class="flex-1 px-6 py-4 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-purple-400"
required
>
<button
type="submit"
class="px-8 py-4 bg-white text-purple-600 rounded-full font-semibold hover:bg-purple-50 transition-colors pulse-glow"
>
Notify Me
</button>
</form>
<p class="text-sm text-white/60 mt-4">Join 5,000+ executives waiting for early access</p>
</div>
</div>
</div>
</main>
<!-- Features Preview -->
<section id="features" class="relative z-10 py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">What's Coming</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="feature-card rounded-2xl p-8 text-center">
<div class="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H9a2 2 0 00-2 2z" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-4">Strategic Analytics</h3>
<p class="text-white/80">Real-time business intelligence and predictive analytics to drive strategic decisions.</p>
</div>
<div class="feature-card rounded-2xl p-8 text-center">
<div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-4">Workflow Automation</h3>
<p class="text-white/80">Streamline executive processes with intelligent automation and task management.</p>
</div>
<div class="feature-card rounded-2xl p-8 text-center">
<div class="w-16 h-16 bg-pink-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-pink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-4">AI Insights</h3>
<p class="text-white/80">Personalized recommendations and insights powered by advanced AI algorithms.</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="relative z-10 py-12 border-t border-white/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-3 mb-4 md:mb-0">
<div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
</div>
<span class="font-semibold">CXO Copilot</span>
</div>
<div class="flex space-x-6">
<a href="#" class="text-white/60 hover:text-white transition-colors">Privacy</a>
<a href="#" class="text-white/60 hover:text-white transition-colors">Terms</a>
<a href="#" class="text-white/60 hover:text-white transition-colors">Contact</a>
</div>
</div>
<div class="text-center mt-8 text-white/60">
<p>© 2025 CXO Copilot. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Background Elements -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/4 left-1/4 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl"></div>
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
<div class="absolute top-3/4 left-1/2 w-48 h-48 bg-pink-500/10 rounded-full blur-3xl"></div>
</div>
<script>
// Countdown Timer
function updateCountdown() {
// Set launch date to 45 days from now
const launchDate = new Date();
launchDate.setDate(launchDate.getDate() + 45);
launchDate.setHours(23, 59, 59, 999); // Set to end of day
const now = new Date().getTime();
const distance = launchDate.getTime() - now;
// If countdown is finished
if (distance < 0) {
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById('days').textContent = days.toString().padStart(2, '0');
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
}
// Update countdown every second
setInterval(updateCountdown, 1000);
updateCountdown();
// Email form submission
document.getElementById('emailForm').addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('emailInput').value;
if (email) {
// Create success message
const message = document.createElement('div');
message.className = 'fixed top-8 right-8 bg-green-500 text-white px-6 py-4 rounded-lg shadow-lg z-50 transition-all duration-300';
message.innerHTML = `
<div class="flex items-center space-x-3">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Thanks! We'll notify you when CXO Copilot launches.</span>
</div>
`;
document.body.appendChild(message);
// Clear form
document.getElementById('emailInput').value = '';
// Remove message after 5 seconds
setTimeout(() => {
message.style.opacity = '0';
setTimeout(() => message.remove(), 300);
}, 5000);
}
});
// Smooth scrolling for navigation
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'
});
}
});
});
// Add parallax effect to background elements
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const parallax = document.querySelectorAll('.fixed');
parallax.forEach(element => {
const speed = 0.5;
element.style.transform = `translateY(${scrolled * speed}px)`;
});
});
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'98e70ea603bbff6c',t:'MTc2MDQ0NDcwNC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>