|
|
<!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(--neon-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, 0.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%); } |
|
|
} |
|
|
</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> |
|
|
|
|
|
<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-cols-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="text-center mt-12"> |
|
|
<button 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="py-12 px-6 border-t border-gray-800"> |
|
|
<div class="container mx-auto max-w-6xl"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12"> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold neon-text mb-4">Product</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-cyan-200 hover:text-cyan-400">Features</a></li> |
|
|
<li><a href="#" class="text-cyan-200 hover:text-cyan-400">Pricing</a></li> |
|
|
<li><a href="#" class="text-cyan-200 hover:text-cyan-400">API</a></li> |
|
|
<li><a href="#" class="text-cyan-200 hover:text-cyan-400">Integrations</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold neon-text mb-4">Resources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-cyan-200 hover:text-cyan-400">Documentation</a></li> |
|
|
<li><a href="#" class="text-cyan-200 hover:text-cyan-400">Guides</a></li> |
|
|
<li><a href="#" class="text-cyan-200 hover:text-cyan-400">Blog</a></li> |
|
|
<li><a href="#" class="text-cyan-200 hover:text-cyan-400">Support</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold neon-text mb-4">Company</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-cyan-200 hover:text-cyan-400">About</a></li> |
|
|
<li><a href="#" class="text-cyan-200 hover:text-cyan-400">Careers</a></li> |
|
|
<li><a href="#" class="text-cyan-200 hover:text-cyan-400">Privacy</a></li> |
|
|
<li><a href="#" class="text-cyan-200 hover:text-cyan-400">Terms</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold neon-text mb-4">Connect</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-cyan-200 hover:text-cyan-400 text-xl"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-cyan-200 hover:text-cyan-400 text-xl"><i class="fab fa-linkedin"></i></a> |
|
|
<a href="#" class="text-cyan-200 hover:text-cyan-400 text-xl"><i class="fab fa-facebook"></i></a> |
|
|
<a href="#" class="text-cyan-200 hover:text-cyan-400 text-xl"><i class="fab fa-instagram"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 pt-8 text-center text-cyan-200"> |
|
|
<p>© 2023 Rookus AI. All rights reserved. The future of marketing is here.</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); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
