|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Rookus - AI Marketing Automation</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"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
:root { |
|
|
--neon-cyan: #0ff; |
|
|
--neon-pink: #f0f; |
|
|
--neon-purple: #a020f0; |
|
|
--matrix-green: #0f0; |
|
|
} |
|
|
|
|
|
body { |
|
|
background: linear-gradient(135deg, #0a0a12 0%, #151528 100%); |
|
|
color: #e0e0ff; |
|
|
font-family: 'Exo 2', sans-serif; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.neon-text { |
|
|
text-shadow: 0 0 10px var(--极on-cyan), 0 0 20px var(--neon-cyan); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.neon-pink { |
|
|
text-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.neon-purple { |
|
|
text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.futuristic-card { |
|
|
background: rgba(20, 20, 35, 0.7); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(100, 100, 255, 0.2); |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 0 20px rgba(0, 200, 255, 极.1); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.futuristic-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 0 30px rgba(0, 200, 255, 0.3); |
|
|
border-color: rgba(100, 100, 255, 0.4); |
|
|
} |
|
|
|
|
|
.glowing-border { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.glowing-border::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -2px; |
|
|
left: -2px; |
|
|
right: -2px; |
|
|
bottom: -2px; |
|
|
background: linear-gradient(45deg, #ff00cc, #3333ff, #00ccff, #ff00cc); |
|
|
background-size: 400% 400%; |
|
|
z-index: -1; |
|
|
border-radius: 12px; |
|
|
animation: glowing 3s ease infinite; |
|
|
} |
|
|
|
|
|
.glowing-border::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: rgba(20, 20, 35, 0.9); |
|
|
border-radius: 12px; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
@keyframes glowing { |
|
|
0% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
100% { background-position: 0% 50%; } |
|
|
} |
|
|
|
|
|
.matrix-bg { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -2; |
|
|
opacity: 0.05; |
|
|
background: repeating-linear-gradient( |
|
|
0deg, |
|
|
transparent, |
|
|
transparent 1px, |
|
|
rgba(0, 255, 0, 0.05) 1px, |
|
|
rgba(0, 255, 0, 0.05) 2px |
|
|
); |
|
|
} |
|
|
|
|
|
.cyber-button { |
|
|
background: linear-gradient(45deg, #ff00cc, #3333ff); |
|
|
border: none; |
|
|
border-radius: 30px; |
|
|
color: white; |
|
|
font-weight: 600; |
|
|
padding: 12px 28px; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
transition: all 0.3s; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.cyber-button:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 8px 25px rgba(255, 0, 204, 0.4); |
|
|
} |
|
|
|
|
|
.cyber-button::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); |
|
|
transition: 0.5s; |
|
|
} |
|
|
|
|
|
.cyber-button:hover::after { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.holographic-line { |
|
|
height: 2px; |
|
|
background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-pink), transparent); |
|
|
margin: 20px 0; |
|
|
} |
|
|
|
|
|
.ai-response { |
|
|
border-left: 3px solid var(--neon-cyan); |
|
|
padding-left: 15px; |
|
|
margin: 15px 0; |
|
|
animation: fadeIn 0.5s ease-in; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.pricing-card { |
|
|
transition: all 0.4s ease; |
|
|
} |
|
|
|
|
|
.pricing-card:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.feature-icon { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
background: rgba(0, 50, 100, 0.3); |
|
|
border-radius: 50%; |
|
|
margin-bottom: 20px; |
|
|
font-size: 24px; |
|
|
color: var(--neon-cyan); |
|
|
border: 1px solid rgba(0, 200, 255, 0.3); |
|
|
} |
|
|
|
|
|
.neon-pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(0, 200, 255, 0.7); } |
|
|
70% { box-shadow: 0 0 0 15px rgba(0, 200, 255, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(0, 200, 255, 0); } |
|
|
} |
|
|
|
|
|
.terminal-input { |
|
|
background: rgba(10, 20, 30, 0.7); |
|
|
border: 1px solid rgba(0, 200, 255, 0.3); |
|
|
border-radius: 8px; |
|
|
color: white; |
|
|
padding: 15px; |
|
|
font-family: 'Courier New', monospace; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.terminal-input:focus { |
|
|
outline: none; |
|
|
border-color: var(--neon-cyan); |
|
|
box-shadow: 0 0 15px rgba(0, 200, 255, 0.3); |
|
|
} |
|
|
|
|
|
.page-section { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.page-section.active { |
|
|
display: block; |
|
|
animation: fadeIn 0.8s ease; |
|
|
} |
|
|
|
|
|
.nav-active { |
|
|
color: var(--neon-cyan) !important; |
|
|
text-shadow: 0 0 10px var(--neon-cyan); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-active::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 2px; |
|
|
background: var(--neon-cyan); |
|
|
box-shadow: 0 0 10px var(--neon-cyan); |
|
|
} |
|
|
|
|
|
.matrix-text { |
|
|
color: var(--matrix-green); |
|
|
font-family: 'Courier New', monospace; |
|
|
text-shadow: 0 0 5px var(--matrix-green); |
|
|
} |
|
|
|
|
|
.cyber-loader { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.cyber-loader div { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
background: var(--neon-cyan); |
|
|
border-radius: 50%; |
|
|
margin: 0 5px; |
|
|
animation: loader 1.2s infinite ease-in-out; |
|
|
} |
|
|
|
|
|
.cyber-loader div:nth-child(1) { animation-delay: -0.32s; } |
|
|
.cyber-loader div:nth-child(2) { animation-delay: -0.16s; } |
|
|
|
|
|
@keyframes loader { |
|
|
0%, 80%, 100% { transform: scale(0); } |
|
|
40% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.hologram-effect { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.hologram-effect::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: linear-gradient( |
|
|
transparent, |
|
|
rgba(0, 255, 255, 0.1), |
|
|
transparent |
|
|
); |
|
|
transform: rotate(45deg); |
|
|
animation: hologram 4s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes hologram { |
|
|
0% { transform: rotate(45deg) translateX(-100%); } |
|
|
100% { transform: rotate(45deg) translateX(100%); } |
|
|
} |
|
|
|
|
|
.additional-layer { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.show-all .additional-layer { |
|
|
display: block; |
|
|
animation: fadeIn 0.8s ease; |
|
|
} |
|
|
|
|
|
|
|
|
.footer-section { |
|
|
background: linear-gradient(135deg, #0a0e1a 0%, #0d1120 100%); |
|
|
border-top: 1px solid rgba(0, 200, 255, 0.1); |
|
|
padding: 60px 0 30px; |
|
|
} |
|
|
|
|
|
.footer-column h3 { |
|
|
font-size: 1.25rem; |
|
|
font-weight: 700; |
|
|
margin-bottom: 1.5rem; |
|
|
position: relative; |
|
|
padding-bottom: 10px; |
|
|
color: var(--neon-cyan); |
|
|
} |
|
|
|
|
|
.footer-column h3::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 40px; |
|
|
height: 2px; |
|
|
background: var(--neon-cyan); |
|
|
box-shadow: 0 0 10px var(--neon-cyan); |
|
|
} |
|
|
|
|
|
.footer-links a { |
|
|
display: block; |
|
|
margin-bottom: 12px; |
|
|
color: #a0aec0; |
|
|
transition: all 0.3s ease; |
|
|
position: relative; |
|
|
padding-left: 20px; |
|
|
} |
|
|
|
|
|
.footer-links a::before { |
|
|
content: '▹'; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
color: var(--neon-cyan); |
|
|
} |
|
|
|
|
|
.footer-links a:hover { |
|
|
color: white; |
|
|
transform: translateX(5px); |
|
|
} |
|
|
|
|
|
.social-links a { |
|
|
display: inline-block; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
background: rgba(100, 100, 255, 0.1); |
|
|
color: var(--neon-cyan); |
|
|
text-align: center; |
|
|
line-height: 40px; |
|
|
margin-right: 12px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.social-links a:hover { |
|
|
background: var(--neon-cyan); |
|
|
color: #0a0a12; |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 0 15px var(--neon-cyan); |
|
|
} |
|
|
|
|
|
.copyright { |
|
|
border-top: 1px solid rgba(100, 100, 255, 0.1); |
|
|
padding-top: 30px; |
|
|
margin-top: 50px; |
|
|
text-align: center; |
|
|
color: #718096; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.copyright-text { |
|
|
color: var(--neon-cyan); |
|
|
text-shadow: 0 0 5px var(--neon-cyan); |
|
|
} |
|
|
|
|
|
.cta-section { |
|
|
background: linear-gradient(135deg, #0d1120 0%, #0a0e1a 100%); |
|
|
border: 1px solid rgba(0, 200, 255, 0.1); |
|
|
border-radius: 12px; |
|
|
padding: 50px 30px; |
|
|
margin-bottom: 60px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.cta-section::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: linear-gradient( |
|
|
transparent, |
|
|
rgba(0, 255, 255, 0.05), |
|
|
transparent |
|
|
); |
|
|
transform: rotate(30deg); |
|
|
animation: hologram 10s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes hologram { |
|
|
0% { transform: rotate(30deg) translateX(-100%); } |
|
|
100% { transform: rotate(30deg) translateX(100%); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="matrix-bg"></div> |
|
|
|
|
|
|
|
|
<nav class="py-4 px-6 md:px-12"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="text-3xl font-bold neon-text"> |
|
|
<i class="fas fa-robot mr-2"></i>ROOKUS |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#" data-page="home" class="nav-link text-lg hover:text-cyan-300 transition nav-active">Home</a> |
|
|
<a href="#" data-page="features" class="nav-link text-lg hover:text-cyan-300 transition">Features</a> |
|
|
<a href="#" data-page="demo" class="nav-link text-lg hover:text-cyan-300 transition">Try Demo</a> |
|
|
<a href="#" data-page="pricing" class="nav-link text-lg hover:text-cyan-300 transition">Pricing</a> |
|
|
</div> |
|
|
|
|
|
<button class="cyber-button"> |
|
|
<i class="fas fa-rocket mr-2"></i>Get Started |
|
|
</button> |
|
|
|
|
|
<button class="md:hidden text-cyan-300 text-2xl"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div id="home-page" class="page-section active"> |
|
|
|
|
|
<section class="py-16 md:py-24 px-6"> |
|
|
<div class="container mx-auto max-w-6xl text-center"> |
|
|
<div class="inline-block px-6 py-2 bg-cyan-900 bg-opacity-30 rounded-full mb-6 neon-pulse"> |
|
|
<span class="neon-text">AI-POWERED MARKETING</span> |
|
|
</div> |
|
|
|
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6 neon-text"> |
|
|
Transform Your Marketing with <span class="neon-pink">JARVIS</span> |
|
|
</h1> |
|
|
|
|
|
<p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10 text-cyan-100"> |
|
|
The world's first fully autonomous AI marketing platform that creates, deploys, and optimizes campaigns in minutes |
|
|
</p> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4 mb-16"> |
|
|
<button class="cyber-button"> |
|
|
<i class="fas fa-play-circle mr-2"></i>Watch Demo |
|
|
</button> |
|
|
<button class="bg-transparent border-2 border-cyan-500 text-cyan-300 rounded-full px-8 py-3 text-lg font-semibold hover:bg-cyan-900 hover:bg-opacity-30 transition"> |
|
|
<i class="fas fa-terminal mr-2"></i>Try Now |
|
|
</button> |
|
|
</极> |
|
|
|
|
|
<div class="glowing-border max-w-5xl mx-auto p-1 rounded-xl"> |
|
|
<div class="futuristic-card p-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div class="flex flex-col justify-center"> |
|
|
<div class="flex items-start mb-6"> |
|
|
<div class="bg-gray-800 rounded-full p-2 mr-4"> |
|
|
<i class="fas fa-user text-cyan-400 text-xl"></i> |
|
|
</div> |
|
|
<div class="user-bubble bg-gray-800 p-4 rounded-xl max-w-md"> |
|
|
<p class="matrix-text">@MarketingPro: Need campaign for new eco-friendly headphones. Target Gen Z. Budget $5k.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-gray-800 rounded-full p-2 mr-4"> |
|
|
<i class="fas fa-robot text-purple-400 text-xl"></i> |
|
|
</div> |
|
|
<div class="ai-response"> |
|
|
<p class="text-green-400">JARVIS: Analyzing market... Found 142 similar campaigns. Generating 3 ad concepts with visuals. Estimating CTR 4.2-5.8%. Deploying to FB/IG. Full report ready in 2:17 min.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="terminal-input mt-8"> |
|
|
<span class="text-green-500">$</span> Enter campaign details... |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-center"> |
|
|
<div class="relative"> |
|
|
<div class="hologram-effect rounded-xl overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1677442135722-5f8ea49cec8a?q=80&w=1000" alt="AI Marketing" class="w-full h-64 object-cover rounded-xl"> |
|
|
</div> |
|
|
<div class="absolute -inset-2 bg-cyan-500 rounded-xl blur-xl opacity-30 z-[-1]"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 px-6"> |
|
|
<div class="container mx-auto max-w-6xl"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4 neon-text">How <span class="neon-pink">JARVIS</span> Works</h2> |
|
|
<p class="text-center text-cyan-200 max-w-2xl mx-auto mb-16">Our 8-layer AI system transforms your ideas into results in minutes</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
<div class="futuristic-card p-6"> |
|
|
<div class="feature-icon mx-auto"> |
|
|
<i class="fas fa-comment-alt"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-center mb-3 neon-text">1. Input</h3> |
|
|
<p class="text-center text-cyan-100">Describe your campaign goals in plain English</p> |
|
|
</div> |
|
|
|
|
|
<div class="futuristic-card p-6"> |
|
|
<div class="feature-icon mx-auto"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-center mb-3 neon-text">2. Analysis</h3> |
|
|
<p class="text-center text-cyan-100">AI analyzes market data and competitors</p> |
|
|
</div> |
|
|
|
|
|
<div class="futuristic-card p-6"> |
|
|
<div class="feature-icon mx-auto"> |
|
|
<i class="fas fa-pen-fancy"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-center mb-3 neon-text">3. Creation</h3> |
|
|
<p class="text-center text-cyan-100">Generates ads, visuals, and copy</p> |
|
|
</div> |
|
|
|
|
|
<div class="futuristic-card p-6"> |
|
|
<div class="feature-icon mx-auto"> |
|
|
<i class="fas fa-rocket"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-center mb-3 neon-text">4. Launch</h3> |
|
|
<p class="text-center text-cyan-100">Deploys campaigns across platforms</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 px-6"> |
|
|
<div class="container mx-auto max-w-6xl"> |
|
|
<div class="futuristic-card p-8"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> |
|
|
<div> |
|
|
<div class="text-4xl font-bold neon-text mb-2">10x</div> |
|
|
<div class="text-cyan-200">Faster Campaign Creation</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-4xl font-bold neon-pink mb-2">47%</div> |
|
|
<div class="text-cyan-200">Higher Average CTR</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-4xl font-bold neon-purple mb-2">3.2M</div> |
|
|
<div class="text-cyan-200">Ads Analyzed Daily</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-4xl font-bold neon-text mb-2">24/7</div> |
|
|
<div class="text-cyan-200">AI Optimization</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="features-page" class="page-section"> |
|
|
<section class="py-16 px-6"> |
|
|
<div class="container mx-auto max-w-6xl"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4 neon-text">The <span class="neon-pink">8-Layer</span> AI Marketing Stack</h2> |
|
|
<p class="text-center text-cyan-200 max-w-2xl mx-auto mb-16">Our proprietary technology stack handles every aspect of marketing automation</p> |
|
|
|
|
|
<div class="space-y-12"> |
|
|
|
|
|
<div class="futuristic-card p-6"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="text-3xl font-bold bg-cyan-900 w-16 h-16 rounded-full flex items-center justify-center neon-text mr-6">1</div> |
|
|
<h3 class="text-2xl font-bold neon-text">User Input & Intent Understanding</h3> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<p class="text-cyan-100 mb-4">JARVIS uses advanced NLP to understand your campaign goals, extract key entities, and create an execution plan.</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-cyan-900 bg-opacity-50 rounded-full text-cyan-300">DistilBERT</span> |
|
|
<span class="px-3 py-1 bg-cyan-900 bg-opacity-50 rounded-full text-cyan-300">spaCy NER</span> |
|
|
<span class="px-3 py-1 bg-cyan-900 bg-opacity-50 rounded-full text-cyan-300">GPT-4</span> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="terminal-input p-4"> |
|
|
<span class="text-green-500">$</span> Campaign goal: Launch eco-friendly headphones for Gen Z with $5k budget<br> |
|
|
<span class="text-cyan-500">>></span> Detected: Product: headphones, Audience: Gen Z, Budget: $5000<br> |
|
|
<span class="text-cyan-500">>></span> Intent: Product launch, brand awareness, sales conversion |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="futuristic-card p-6"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="text-3xl font-bold bg-purple-900 w-16 h-16 rounded-full flex items-center justify-center neon-pink mr-6">2</div> |
|
|
<h3 class="text-2xl font-bold neon-pink">Market Insight & Ad Scraping</h3> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<p class="text-cyan-100 mb-4">Real-time analysis of competitor campaigns and market trends to inform your strategy.</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-purple-900 bg-opacity-50 rounded-full text-purple-300">Playwright</span> |
|
|
<span class="px-3 py-1 bg-purple-900 bg-opacity-50 rounded-full text-purple-300">Sentence-BERT</span> |
|
|
<span class="px-3 py-1 bg-purple-900 bg-opacity-50 rounded-full text-purple-300">ColBERT</span> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="terminal-input p-4"> |
|
|
<span class="text-green-500">$</span> Analyzing 142 competitor campaigns...<br> |
|
|
<span class="text-cyan-500">>></span> Top performing keywords: #sustainableaudio, #ecofriendlytech<br> |
|
|
<span class="text-cyan-500">>></span> Trending visuals: nature backgrounds, recycled materials<br> |
|
|
<span class="text-cyan-500">>></span> Avg. CTR in niche: 3.8-5.2% |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="futuristic-card p-6"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="text-3xl font-bold bg-blue-900 w-16 h-16 rounded-full flex items-center justify-center neon-text mr-6">3</div> |
|
|
<h3 class="text-2xl font-bold neon-text">Ad Script Generation</h3> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<p class="text-cyan-100 mb-4">AI generates compelling ad copy tailored to your audience and brand voice.</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-blue-900 bg-opacity-50 rounded-full text-blue-300">Mistral</span> |
|
|
<span class="px-3 py-1 bg-blue-900 bg-opacity-50 rounded-full text-blue-300">GPT-3.5</span> |
|
|
<span class="px-3 py-1 bg-blue-900 bg-opacity-50 rounded-full text-blue-300">CTRL</span> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="terminal-input p-4"> |
|
|
<span class="text-green-500">$</span> Generated ad concept #1:<br> |
|
|
<span class="text-yellow-300">"Tune into nature. Our eco-headphones deliver crystal clear sound without costing the earth. Made from 100% recycled materials. #SustainableSound"</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="futuristic-card p-6"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="text-3xl font-bold bg-green-900 w-16 h-16 rounded-full flex items-center justify-center matrix-text mr-6">4</div> |
|
|
<h3 class="text-2xl font-bold matrix-text">Visual Content Creation</h3> |
|
|
</div> |
|
|
<div class="grid grid-c极ls-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<p class="text-cyan-100 mb-4">AI generates stunning visuals that match your brand and campaign goals.</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-green-900 bg-opacity-50 rounded-full text-green-300">SDXL</span> |
|
|
<span class="px-3 py-1 bg-green-900 bg-opacity-50 rounded-full text-green-300">DALLE-3</span> |
|
|
<span class="px-3 py-1 bg-green-900 bg-opacity-50 rounded-full text-green-300">CLIP</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-center"> |
|
|
<div class="h-40 w-40 bg-gradient-to-br from-cyan-500 to-purple-600 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-image text-white text-4xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="futuristic-card p-6 additional-layer"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="text-3xl font-bold bg-yellow-900 w-16 h-16 rounded-full flex items-center justify-center neon-text mr-6">5</div> |
|
|
<h3 class="text-2xl font-bold neon-text">Tagline & CTA Creator</h3> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<p class="text-cyan-100 mb-4">AI crafts compelling taglines and calls-to-action that drive conversions.</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-yellow-900 bg-opacity-50 rounded-full text-yellow-300">GPT-2 Fine-tuned</span> |
|
|
<span class="px-3 py-1 bg-yellow-900 bg-opacity-50 rounded-full text-yellow-300">AIDA Framework</span> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="terminal-input p-4"> |
|
|
<span class="text-green-500">$</span> Generated taglines:<br> |
|
|
<span class="text-yellow-300">"Sound that doesn't cost the earth"</span><br> |
|
|
<span class="text-yellow-300">"Eco-friendly audio for the next generation"</span><br><br> |
|
|
<span class="text-green-500">$</span> CTAs:<br> |
|
|
<span class="text-cyan-500">>></span> "Shop now and get 20% off your first order!" |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="futuristic-card p-6 additional-layer"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="text-3xl font-bold bg-orange-900 w-16 h-16 rounded-full flex items-center justify-center neon-pink mr-6">6</div> |
|
|
<h3 class="text-2xl font-bold neon-pink">Feedback & Editor</h3> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<p class="text-cyan-100 mb-4">Human-AI collaboration tools for refining campaign elements.</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-orange-900 bg-opacity-50 rounded-full text-orange-300">WYSIWYG Editor</span> |
|
|
<span class="px-3 py-1 bg-orange-900 bg-opacity-50 rounded-full text-orange-300">Prompt Rewriter</span> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="terminal-input p-4"> |
|
|
<span class="text-green-500">$</span> AI Feedback:<br> |
|
|
<span class="text-cyan-500">>></span> "Consider adding more emojis for Gen Z appeal"<br> |
|
|
<span class="text-cyan-500">>></span> "Increase contrast in visuals for better engagement"<br> |
|
|
<span class="text-cyan-500">>></span> "Add sustainability certifications to build trust" |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="futuristic-card p-6 additional-layer"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="text-3xl font-bold bg-red-900 w-16 h-16 rounded-full flex items-center justify-center matrix-text mr-6">7</div> |
|
|
<h3 class="text-2xl font-bold matrix-text">A/B Testing & Performance</h3> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<p class="text-cyan-100 mb-4">Predictive analytics and multi-variant testing for optimal results.</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-red-900 bg-opacity-50 rounded-full text-red-300">LSTM</span> |
|
|
<span class="px-3 py-1 bg-red-900 bg-opacity-50 rounded-full text-red-300">XGBoost</span> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="terminal-input p-4"> |
|
|
<span class="text-green-500">$</span> Performance Prediction:<br> |
|
|
<span class="text-cyan-500">>></span> Estimated CTR: 4.2-5.8%<br> |
|
|
<span class="text-cyan-500">>></span> Conversion Rate: 2.2-3.1%<br> |
|
|
<span class="text-cyan-500">>></span> Cost Per Click: $0.42-0.58<br> |
|
|
<span class="text-cyan-500">>></span> ROAS: 3.2x-4.1x |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="futuristic-card p-6 additional-layer"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="text-3xl font-bold bg-indigo-900 w-16 h-16 rounded-full flex items-center justify-center neon-text mr-6">8</div> |
|
|
<h3 class="text-2xl font-bold neon-text">Campaign Deployment</h3> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<p class="text-cyan-100 mb-4">Automated deployment across all digital marketing channels.</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="px-3 py-1 bg-indigo-900 bg-opacity-50 rounded-full text-indigo-300">Meta API</span> |
|
|
<span class="px-3 py-1 bg-indigo-900 bg-opacity-50 rounded-full text-indigo-300">Google Ads</span> |
|
|
<span class="px-3 py-1 bg-indigo-900 bg-opacity-50 rounded-full text-indigo-300">TikTok API</span> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="terminal-input p-4"> |
|
|
<span class="text-green-500">$</span> Deployment Status:<br> |
|
|
<span class="text-cyan-500">>></span> Facebook: Campaign live<br> |
|
|
<span class="text-cyan-500">>></span> Instagram: Ads running<br> |
|
|
<span class="text-cyan-500">>></span> Google Ads: Active<br> |
|
|
<span class="text-cyan-500">>></span> TikTok: Scheduled |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<button id="toggle-layers" class="cyber-button"> |
|
|
<i class="fas fa-layer-group mr-2"></i>Explore All 8 Layers |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="demo-page" class="page-section"> |
|
|
<section class="py-16 px-6"> |
|
|
<div class="container mx-auto max-w-4xl"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4 neon-text">Try <span class="neon-pink">JARVIS</span> Demo</h2> |
|
|
<p class="text-center text-cyan-200 max-w-2xl mx-auto mb-16">Experience our AI marketing assistant in action</p> |
|
|
|
|
|
<div class="glowing-border rounded-xl"> |
|
|
<div class="futuristic-card p-6"> |
|
|
<div class="mb-8"> |
|
|
<h3 class="text-xl font-bold neon-text mb-4">Create Your Campaign</h3> |
|
|
<textarea class="terminal-input w-full h-32" placeholder="Describe your campaign... Example: Promote eco-friendly headphones to Gen Z audience with $5k budget"></textarea> |
|
|
<button class="cyber-button mt-4 w-full"> |
|
|
<i class="fas fa-bolt mr-2"></i>Generate Campaign |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="cyber-loader mb-8 hidden"> |
|
|
<div></div> |
|
|
<div></div> |
|
|
<div></div> |
|
|
</div> |
|
|
|
|
|
<div class="demo-results hidden"> |
|
|
<h3 class="text-xl font-bold neon-text mb-4">Generated Campaign</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
|
|
<div class="futuristic-card p-4"> |
|
|
<h4 class="font-bold text-cyan-300 mb-2">Ad Copy</h4> |
|
|
<p>"Sound that doesn't cost the earth. Our eco-headphones deliver premium audio from 100% recycled materials. #SustainableSound"</p> |
|
|
</div> |
|
|
<div class="futuristic-card p-4"> |
|
|
<h4 class="font-bold text-cyan-300 mb-2">Visual Concept</h4> |
|
|
<div class="bg-gradient-to-br from-green-500 to-blue-600 h-32 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-headphones text-white text-4xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="futuristic-card p-4 mb-6"> |
|
|
<h4 class="font-bold text-cyan-300 mb-2">Performance Prediction</h4> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<div class="text-cyan-300">Estimated CTR</div> |
|
|
<div class="text-xl font-bold neon-text">4.2-5.8%</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-cyan-300">Cost Per Click</div> |
|
|
<div class="text-xl font-bold neon-pink">$0.32-$0.48</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="cyber-button w-full"> |
|
|
<i class="fas fa-paper-plane mr-2"></i>Deploy Campaign |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="pricing-page" class="page-section"> |
|
|
<section class="py-16 px-6"> |
|
|
<div class="container mx-auto max-w-6xl"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4 neon-text">Simple, Transparent <span class="neon-pink">Pricing</span></h2> |
|
|
<p class="text-center text-cyan-200 max-w-2xl mx-auto mb-16">Choose the plan that fits your marketing needs</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="futuristic-card pricing-card p-8"> |
|
|
<h3 class="text-2xl font-bold text-center mb-2 neon-text">Starter</h3> |
|
|
<p class="text-center text-cyan-200 mb-6">Perfect for small businesses</p> |
|
|
|
|
|
<div class="text-center mb-8"> |
|
|
<span class="text-4xl font-bold neon-text">$29</span> |
|
|
<span class="text-cyan-200">/month</span> |
|
|
</div> |
|
|
|
|
|
<ul class="space-y-4 mb-8"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i> |
|
|
<span>100 campaign executions/month</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i> |
|
|
<span>Basic ad scraping</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i> |
|
|
<span>Standard image generation</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i> |
|
|
<span>Email support</span> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<button class="cyber-button w-full"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glowing-border p-1 rounded-xl pricing-card"> |
|
|
<div class="futuristic-card p-8 h-full"> |
|
|
<div class="text-center mb-4"> |
|
|
<span class="px-3 py-1 bg-purple-900 rounded-full text-purple-300 text-sm">MOST POPULAR</span> |
|
|
</div> |
|
|
|
|
|
<h3 class="text-2xl font-bold text-center mb-2 neon-pink">Pro</h3> |
|
|
<p class="text-center text-cyan-200 mb-6">For growing businesses</p> |
|
|
|
|
|
<div class="text-center mb-8"> |
|
|
<span class="text-4xl font-bold neon-pink">$99</span> |
|
|
<span class="text-cyan-200">/month</span> |
|
|
</div> |
|
|
|
|
|
<ul class="space-y-4 mb-8"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i> |
|
|
<span>500 campaign executions/month</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i> |
|
|
<span>Advanced ad scraping</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i> |
|
|
<span>Premium image generation</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i> |
|
|
<span>A/B testing capabilities</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i> |
|
|
<span>Priority support</span> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<button class="cyber-button w-full bg-gradient-to-r from-purple-600 to-pink-600"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="futuristic-card pricing-card p-8"> |
|
|
<h3 class="text-2xl font-bold text-center mb-2 neon-text">Enterprise</h3> |
|
|
<p class="text-center text-cyan-200 mb-6">For large-scale operations</p> |
|
|
|
|
|
<div class="text-center mb-8"> |
|
|
<span class="text-4xl font-bold neon-text">$299</span> |
|
|
<span class="text-cyan-200">/month</span> |
|
|
</div> |
|
|
|
|
|
<ul class="space-y-4 mb-8"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i> |
|
|
<span>Unlimited campaigns</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i> |
|
|
<span>Premium ad scraping</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i> |
|
|
<span>Ultra HD image generation</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i> |
|
|
<span>Advanced A/B testing</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i> |
|
|
<span>API access</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-400 mt-1 mr-3"></i> |
|
|
<span>Dedicated account manager</span> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<button class="cyber-button w-full"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="py-16 px-6"> |
|
|
<div class="container mx-auto max-w-4xl text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 neon-text">Ready to Transform Your Marketing?</h2> |
|
|
<p class="text-xl text-cyan-200 mb-10">Join thousands of marketers using JARVIS to create high-performing campaigns</p> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
|
|
<button class="cyber-button"> |
|
|
<i class="fas fa-play-circle mr-2"></i>Watch Demo |
|
|
</button> |
|
|
<button class="cyber-button bg-gradient-to-r from-cyan-600 to-purple-600"> |
|
|
<i class="fas fa-rocket mr-2"></i>Start Free Trial |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="footer-section"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="footer-column"> |
|
|
<h3>Product</h3> |
|
|
<div class="footer-links"> |
|
|
<a href="#">Features</a> |
|
|
<a href="#">Pricing</a> |
|
|
<a href="#">API</a> |
|
|
<a href="#">Integrations</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="footer-column"> |
|
|
<h3>Resources</h3> |
|
|
<div class="footer-links"> |
|
|
<a href="#">Documentation</a> |
|
|
<a href="#">Guides</a> |
|
|
<a href="#">Blog</a> |
|
|
<a href="#">Support</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="footer-column"> |
|
|
<h3>Company</h3> |
|
|
<div class="footer-links"> |
|
|
<a href="#">About</a> |
|
|
<a href="#">Careers</a> |
|
|
<a href="#">Privacy</a> |
|
|
<a href="#">Terms</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="footer-column"> |
|
|
<h3>Connect</h3> |
|
|
<div class="social-links mb-6"> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#"><i class="fab fa-linkedin"></i></a> |
|
|
<a href="#"><i class="fab fa-facebook"></i></a> |
|
|
<a href="#"><i class="fab fa-instagram"></i></a> |
|
|
</div> |
|
|
<p class="text-cyan-100">Subscribe to our newsletter</p> |
|
|
<div class="mt-4 flex"> |
|
|
<input type="email" placeholder="Your email" class="flex-grow bg-gray-800 text-white rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500"> |
|
|
<button class="bg-cyan-600 hover:bg-cyan-500 text-white px-4 rounded-r-lg"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="copyright"> |
|
|
<p>© 2023 Rookus AI. All rights reserved. <span class="copyright-text">The future of marketing is here.</span></p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.nav-link').forEach(link => { |
|
|
link.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
const page = this.dataset.page; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.page-section').forEach(section => { |
|
|
section.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById(`${page}-page`).classList.add('active'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.nav-link').forEach(nav => { |
|
|
nav.classList.remove('nav-active'); |
|
|
}); |
|
|
this.classList.add('nav-active'); |
|
|
|
|
|
|
|
|
window.scrollTo(0, 0); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const generateBtn = document.querySelector('#demo-page .cyber-button'); |
|
|
const loader = document.querySelector('.cyber-loader'); |
|
|
const demoResults = document.querySelector('.demo-results'); |
|
|
|
|
|
if (generateBtn) { |
|
|
generateBtn.addEventListener('click', function() { |
|
|
const textarea = document.querySelector('#demo-page textarea'); |
|
|
if (!textarea.value.trim()) { |
|
|
textarea.focus(); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
loader.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
this.classList.add('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
loader.classList.add('hidden'); |
|
|
demoResults.classList.remove('hidden'); |
|
|
}, 2500); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const terminalInput = document.querySelector('.terminal-input'); |
|
|
if (terminalInput) { |
|
|
let charIndex = 0; |
|
|
const placeholderText = " Describe your campaign... Example: Promote eco-friendly headphones to Gen Z audience with $5k budget"; |
|
|
|
|
|
function typeWriter() { |
|
|
if (charIndex < placeholderText.length) { |
|
|
terminalInput.placeholder = placeholderText.substring(0, charIndex + 1); |
|
|
charIndex++; |
|
|
setTimeout(typeWriter, 50); |
|
|
} |
|
|
} |
|
|
|
|
|
setTimeout(typeWriter, 1000); |
|
|
} |
|
|
|
|
|
|
|
|
const toggleButton = document.getElementById('toggle-layers'); |
|
|
if (toggleButton) { |
|
|
toggleButton.addEventListener('click', function() { |
|
|
const featuresSection = document.getElementById('features-page'); |
|
|
featuresSection.classList.toggle('show-all'); |
|
|
|
|
|
if (featuresSection.classList.contains('show-all')) { |
|
|
this.innerHTML = '<i class="fas fa-layer-group mr-2"></i>Show Less Layers'; |
|
|
} else { |
|
|
this.innerHTML = '<i class="fas fa-layer-group mr-2"></i>Explore All 8 Layers'; |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const emailInput = document.querySelector('input[type="email"]'); |
|
|
if (emailInput) { |
|
|
emailInput.addEventListener('focus', function() { |
|
|
this.parentElement.classList.add('ring-2', 'ring-cyan-500', 'rounded-lg'); |
|
|
}); |
|
|
|
|
|
emailInput.addEventListener('blur', function() { |
|
|
this.parentElement.classList.remove('ring-2', 'ring-cyan-500', 'rounded-lg'); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const footerLinks = document.querySelectorAll('.footer-links a'); |
|
|
footerLinks.forEach(link => { |
|
|
link.addEventListener('mouseenter', function() { |
|
|
this.style.color = 'var(--neon-cyan)'; |
|
|
}); |
|
|
|
|
|
link.addEventListener('mouseleave', function() { |
|
|
this.style.color = '#a0aec0'; |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
