All Prompts
All Prompts
featuresectioninteractiveanimatedresponsivetailwindsaasmarketing
Platform Features Section with Interactive Visuals
Секция с интерактивными визуалами для описания функций платформы. Адаптивный дизайн, анимации, подходит для SaaS-маркетинга.
Prompt
<section class="border-dashed bg-[#05080A] border-white/10 border-b pt-24 pb-24"
data-element-locator="html > body:nth-of-type(1) > main:nth-of-type(1) > section:nth-of-type(1)">
<div class="max-w-6xl mr-auto ml-auto pr-6 pl-6"
data-element-locator="html > body:nth-of-type(1) > main:nth-of-type(1) > section:nth-of-type(1) > div:nth-of-type(1)">
<div class="mb-16 relative">
<div class="absolute -top-12 -left-12 w-32 h-32 bg-indigo-500/10 rounded-full blur-3xl" aria-hidden="true"></div>
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-8 z-10 relative gap-x-8 gap-y-8">
<div class="max-w-2xl">
<div class="flex items-center gap-3 mb-4">
<span class="uppercase text-xs font-semibold text-[#c6f91f] tracking-widest font-geist">
01. Platform
</span>
</div>
<h2
class="text-4xl md:text-5xl lg:text-6xl text-white font-light tracking-tighter mb-4 font-geist leading-[1.1] reveal-on-scroll">
Automate your
<span class="">entire</span>
revenue stack.
</h2>
<p class="text-lg font-geist max-w-md text-white/70 reveal-on-scroll" style="">
Deploy autonomous agents, intelligent workflows, and neural
routing to scale your sales motion without adding headcount.
</p>
</div>
<div class="flex flex-col sm:flex-row items-center gap-4">
<a href="#"
class="sm:w-auto hover:bg-slate-200 transition-colors font-medium text-black font-geist text-center bg-white w-full rounded-none pt-3 pr-6 pb-3 pl-6">
View documentation
</a>
<a href="#"
class="group flex items-center gap-2 text-white font-geist hover:text-indigo-300 transition-colors reveal-on-scroll">
Explore platform
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="group-hover:translate-x-1 transition-transform">
<path d="M5 12h14m-7-7 7 7-7 7" class=""></path>
</svg>
</a>
</div>
</div>
<div class="mt-12 h-[1px] w-full bg-gradient-to-r from-slate-800 via-slate-700 to-transparent" style=""></div>
</div>
<section class="border-dashed z-10 bg-[#05080A] border-white/10 border-b relative">
<!-- Header -->
<!-- Bottom Grid of Features -->
<div class="grid grid-cols-1 md:grid-cols-12 border-dashed border-white/10 border-b">
<div
class="col-span-12 md:col-span-4 md:p-12 md:border-b-0 md:border-r border-dashed flex flex-col border-white/10 border-b pt-8 pr-8 pb-8 pl-8 justify-center reveal-on-scroll">
<div class="flex items-center gap-2 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="cpu"
aria-hidden="true" class="lucide lucide-cpu w-4 h-4 text-[#c6f91f]">
<path d="M12 20v2" class=""></path>
<path d="M12 2v2" class=""></path>
<path d="M17 20v2" class=""></path>
<path d="M17 2v2" class=""></path>
<path d="M2 12h2" class=""></path>
<path d="M2 17h2" class=""></path>
<path d="M2 7h2" class=""></path>
<path d="M20 12h2" class=""></path>
<path d="M20 17h2" class=""></path>
<path d="M20 7h2" class=""></path>
<path d="M7 20v2" class=""></path>
<path d="M7 2v2" class=""></path>
<rect x="4" y="4" width="16" height="16" rx="2" class=""></rect>
<rect x="8" y="8" width="8" height="8" rx="1" class=""></rect>
</svg>
<span class="text-[#c6f91f] font-mono text-xs tracking-widest uppercase font-geist">
Core Engine
</span>
</div>
<h2 class="text-3xl md:text-4xl text-white font-light tracking-tighter mb-4 font-geist reveal-on-scroll">
Built for speed.
</h2>
<p class="text-sm leading-relaxed font-geist text-white/70 reveal-on-scroll" style="">
Engineered to handle enterprise volume without losing the
human touch. Our architecture scales with your demand.
</p>
</div>
<div
class="col-span-12 md:col-span-8 grid grid-cols-1 sm:grid-cols-2 divide-y sm:divide-y-0 sm:divide-x divide-dashed divide-white/10 reveal-on-scroll">
<!-- Feature 1 -->
<div
class="group hover:bg-white/[0.02] transition-colors overflow-hidden reveal-on-scroll pt-8 pr-8 pb-8 pl-8 relative">
<div
class="flex flex-col overflow-hidden bg-slate-900/50 w-full h-24 border-white/5 border rounded mb-6 pt-3 pr-3 pb-3 pl-3 relative">
<div class="flex gap-1.5 mb-2">
<div class="w-2 h-2 rounded-full bg-red-500/50"></div>
<div class="w-2 h-2 rounded-full bg-yellow-500/50"></div>
<div class="w-2 h-2 rounded-full bg-green-500/50"></div>
</div>
<div id="terminal-aura-emjs78kc81f067uvn"
class="font-mono text-[10px] text-slate-500 space-y-1 h-full cursor-default min-h-[60px]">
<div class="flex items-center">
<span class="text-[#c6f91f] mr-2">~</span><span class="text-white/70">i</span><span class="w-1.5 h-3 bg-[#c6f91f] ml-1 block animate-pulse"></span>
</div>
</div>
<div
class="absolute -right-4 -bottom-4 w-24 h-24 bg-[#c6f91f]/10 blur-[40px] rounded-full group-hover:bg-[#c6f91f]/20 transition-colors">
</div>
<script>
(function() {
const el = document.getElementById('terminal-aura-emjs78kc81f067uvn');
if (!el) return;
const lines = [
{
prompt: '~',
promptClass: 'text-[#c6f91f]',
content: 'init_sequence.sh',
contentClass: 'text-white/70'
},
{
prompt: '>',
promptClass: 'text-slate-600',
content: 'Loading modules...',
contentClass: 'text-slate-600'
},
{
prompt: '>',
promptClass: 'text-slate-600',
content: 'Connected (24ms)',
contentClass: 'text-slate-600',
completedHtml: '<span class="text-slate-600 mr-2">></span><span class="text-[#c6f91f]">Connected</span> <span class="text-slate-500">(24ms)</span>'
}
];
async function runTerminal() {
while (true) {
el.innerHTML = '';
for (const line of lines) {
const row = document.createElement('div');
row.className = 'flex items-center';
el.appendChild(row);
const prompt = document.createElement('span');
prompt.className = `${line.promptClass} mr-2`;
prompt.textContent = line.prompt;
row.appendChild(prompt);
const content = document.createElement('span');
content.className = line.contentClass;
row.appendChild(content);
const cursor = document.createElement('span');
cursor.className = 'w-1.5 h-3 bg-[#c6f91f] ml-1 block animate-pulse';
row.appendChild(cursor);
const text = line.content;
for (let i = 0; i < text.length; i++) {
content.textContent += text[i];
await new Promise(r => setTimeout(r, 30 + Math.random() * 40));
}
cursor.remove();
if (line.completedHtml) {
row.innerHTML = line.completedHtml;
}
await new Promise(r => setTimeout(r, 400));
}
const lastRow = el.lastElementChild;
if (lastRow) {
const endCursor = document.createElement('span');
endCursor.className = 'inline-block w-1.5 h-3 bg-[#c6f91f] ml-1 align-middle animate-pulse';
lastRow.appendChild(endCursor);
}
await new Promise(r => setTimeout(r, 2500));
}
}
runTerminal();
})();
</script>
</div>
<h3 class="text-white font-medium mb-2 flex items-center gap-2 font-geist reveal-on-scroll">
Instant Deployment
</h3>
<p class="text-xs leading-relaxed font-geist reveal-on-scroll" style="">
Go from signup to active prospecting in under 5 minutes with
pre-configured agent templates.
</p>
</div>
<!-- Feature 2 -->
<div class="p-8 group hover:bg-white/[0.02] transition-colors relative overflow-hidden reveal-on-scroll">
<div class="mb-6 relative h-24 w-full flex items-center justify-center">
<!-- Visual Nodes -->
<div
class="flex w-full h-full relative items-center justify-center overflow-hidden rounded-lg group reveal-on-scroll">
<!-- Interactive Canvas Layer -->
<div
class="flex w-full h-full max-w-[320px] pr-4 pl-4 relative items-center justify-between overflow-visible">
<!-- Connection Lines SVG -->
<svg class="absolute inset-0 w-full h-full pointer-events-none z-0 overflow-visible"
viewBox="0 0 320 96" preserveAspectRatio="none">
<!-- Paths: Source(44, 48) to Targets(276, 16/48/80) -->
<path id="route-p1" d="M 44 48 C 120 48, 180 16, 276 16" fill="none" stroke="currentColor"
stroke-width="1.5" class="transition-colors duration-500"></path>
<path id="route-p2" d="M 44 48 C 120 48, 180 48, 276 48" fill="none" stroke="currentColor"
stroke-width="1.5" class="text-white/10 transition-colors duration-500"></path>
<path id="route-p3" d="M 44 48 C 120 48, 180 80, 276 80" fill="none" stroke="currentColor"
stroke-width="1.5" class="text-white/10 transition-colors duration-500"></path>
<!-- Moving Packet -->
<circle id="packet" r="3" fill="#c6f91f" class="opacity-0 shadow-[0_0_8px_#c6f91f]"
style="opacity: 0;">
<animateMotion id="packet-anim" dur="0.6s" begin="indefinite" fill="freeze" keyPoints="0;1"
keyTimes="0;1" calcMode="spline" keySplines="0.4 0 0.2 1" class="">
<mpath xlink:href="#route-p1" class=""></mpath>
</animateMotion>
</circle>
</svg>
<!-- Source Node -->
<div id="node-source"
class="relative z-10 w-9 h-9 rounded-lg bg-[#0E1216] border border-white/10 flex items-center justify-center shadow-lg transition-all duration-300">
<div class="absolute inset-0 bg-[#c6f91f]/20 rounded-lg blur-md transition-opacity duration-300"
id="source-glow">
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="relative z-10 transition-colors duration-300" id="source-icon">
<circle cx="12" cy="12" r="10" class=""></circle>
<circle cx="12" cy="12" r="2" class=""></circle>
</svg>
</div>
<!-- Target Nodes -->
<div class="flex flex-col gap-3 z-10 py-2">
<!-- Target 1 -->
<div
class="node-target flex transition-all duration-300 bg-[#0E1216] w-6 h-6 border-white/10 border rounded-md items-center justify-center"
id="target-0">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="transition-colors duration-300">
<path d="M22 12h-4l-3 9L9 3l-3 9H2" class=""></path>
</svg>
</div>
<!-- Target 2 -->
<div
class="node-target flex transition-all duration-300 bg-[#0E1216] w-6 h-6 border-white/10 border rounded-md items-center justify-center"
id="target-1">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-slate-600 transition-colors duration-300">
<rect width="20" height="14" x="2" y="5" rx="2" class=""></rect>
<line x1="2" x2="22" y1="10" y2="10" class=""></line>
</svg>
</div>
<!-- Target 3 -->
<div
class="node-target flex transition-all duration-300 bg-[#0E1216] w-6 h-6 border-white/10 border rounded-md items-center justify-center"
id="target-2">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-slate-600 transition-colors duration-300">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" class=""></path>
<circle cx="12" cy="7" r="4" class=""></circle>
</svg>
</div>
</div>
</div>
<script class="">
(function() {
const container = document.currentScript.parentElement;
if (!container) return;
const source = container.querySelector('#node-source');
const sourceGlow = container.querySelector('#source-glow');
const sourceIcon = container.querySelector('#source-icon');
const targets = container.querySelectorAll('.node-target');
const paths = container.querySelectorAll('path');
const packet = container.querySelector('#packet');
const packetAnim = container.querySelector('#packet-anim');
let currentIndex = 0;
const animate = async () => {
if (!container.isConnected) return;
// 1. Activate Source
source.classList.add('border-[#c6f91f]', 'shadow-[0_0_15px_rgba(198,249,31,0.15)]');
sourceIcon.classList.replace('text-white/70', 'text-[#c6f91f]');
sourceGlow.classList.remove('opacity-0');
await new Promise(r => setTimeout(r, 600));
// 2. Choose Target
const targetIndex = currentIndex % targets.length;
currentIndex++;
const path = paths[targetIndex];
const target = targets[targetIndex];
// 3. Highlight Path
paths.forEach(p => p.classList.add('opacity-20'));
path.classList.remove('opacity-20');
path.classList.replace('text-white/10', 'text-[#c6f91f]');
path.classList.add('opacity-100', 'drop-shadow-[0_0_3px_rgba(198,249,31,0.5)]');
// 4. Send Packet
packet.style.opacity = '1';
packetAnim.innerHTML = '';
const mpath = document.createElementNS("http://www.w3.org/2000/svg", "mpath");
mpath.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", '#' + path.id);
packetAnim.appendChild(mpath);
packetAnim.beginElement();
await new Promise(r => setTimeout(r, 600));
// 5. Activate Target
target.classList.add('border-[#c6f91f]', 'scale-110', 'bg-[#c6f91f]/10', 'shadow-[0_0_15px_rgba(198,249,31,0.2)]');
target.querySelector('svg').classList.replace('text-slate-600', 'text-[#c6f91f]');
packet.style.opacity = '0';
await new Promise(r => setTimeout(r, 1200));
// 6. Reset
source.classList.remove('border-[#c6f91f]', 'shadow-[0_0_15px_rgba(198,249,31,0.15)]');
sourceIcon.classList.replace('text-[#c6f91f]', 'text-white/70');
sourceGlow.classList.add('opacity-0');
path.classList.replace('text-[#c6f91f]', 'text-white/10');
path.classList.remove('opacity-100', 'drop-shadow-[0_0_3px_rgba(198,249,31,0.5)]');
paths.forEach(p => p.classList.remove('opacity-20'));
target.classList.remove('border-[#c6f91f]', 'scale-110', 'bg-[#c6f91f]/10', 'shadow-[0_0_15px_rgba(198,249,31,0.2)]');
target.querySelector('svg').classList.replace('text-[#c6f91f]', 'text-slate-600');
await new Promise(r => setTimeout(r, 600));
requestAnimationFrame(animate);
};
setTimeout(animate, 500);
})();
</script>
</div>
</div>
<h3 class="text-white font-medium mb-2 flex items-center gap-2 font-geist reveal-on-scroll">
Neural Routing
</h3>
<p class="text-xs leading-relaxed font-geist text-white/70 reveal-on-scroll" style="">
Intelligent lead distribution based on intent signals,
company size, and historical close rates.
</p>
</div>
</div>
</div>
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 divide-y sm:divide-y-0 sm:divide-x divide-dashed divide-white/10 border-dashed border-white/10 border-b">
<!-- Mini Feature 1 -->
<div
class="flex flex-col gap-3 group hover:bg-white/[0.02] transition-colors pt-6 pr-6 pb-6 pl-6 gap-x-3 gap-y-3 reveal-on-scroll"
style="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap"
aria-hidden="true"
class="lucide lucide-zap w-5 h-5 text-slate-400 group-hover:text-[#c6f91f] transition-colors" style="">
<path
d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
class=""></path>
</svg>
<div class="">
<h4 class="text-white text-sm font-medium font-geist">
Real-time Sync
</h4>
<p class="text-[10px] text-slate-500 mt-1 font-geist reveal-on-scroll" style="">
Bi-directional CRM updates.
</p>
</div>
</div>
<!-- Mini Feature 2 -->
<div class="p-6 flex flex-col gap-3 group hover:bg-white/[0.02] transition-colors reveal-on-scroll">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="shield-check" aria-hidden="true"
class="lucide lucide-shield-check w-5 h-5 text-slate-400 group-hover:text-[#c6f91f] transition-colors"
style="">
<path
d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
class=""></path>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
<div class="">
<h4 class="text-white text-sm font-medium font-geist">
SOC2 Compliant
</h4>
<p class="text-[10px] text-slate-500 mt-1 font-geist reveal-on-scroll" style="">
Enterprise-grade security.
</p>
</div>
</div>
<!-- Mini Feature 3 -->
<div class="p-6 flex flex-col gap-3 group hover:bg-white/[0.02] transition-colors reveal-on-scroll">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="globe"
aria-hidden="true"
class="lucide lucide-globe w-5 h-5 text-slate-400 group-hover:text-[#c6f91f] transition-colors" style="">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" class=""></path>
<path d="M2 12h20" class=""></path>
</svg>
<div class="">
<h4 class="text-white text-sm font-medium font-geist">
Global Data
</h4>
<p class="text-[10px] text-slate-500 mt-1 font-geist reveal-on-scroll" style="">
180+ countries supported.
</p>
</div>
</div>
<!-- Mini Feature 4 -->
<div class="p-6 flex flex-col gap-3 group hover:bg-white/[0.02] transition-colors reveal-on-scroll">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="code-2"
aria-hidden="true"
class="lucide lucide-code-2 w-5 h-5 text-slate-400 group-hover:text-[#c6f91f] transition-colors" style="">
<path d="m18 16 4-4-4-4" class=""></path>
<path d="m6 8-4 4 4 4" class=""></path>
<path d="m14.5 4-5 16" class=""></path>
</svg>
<div class="">
<h4 class="text-white text-sm font-medium font-geist">
API First
</h4>
<p class="text-[10px] text-slate-500 mt-1 font-geist reveal-on-scroll" style="">
Full programmatic access.
</p>
</div>
</div>
</div>
</section>
</div>
</section>