All Prompts
All Prompts
feature-sectionlanding-pagetailwindresponsiveanimatedvideoctamarketing
Responsive SaaS Feature Section with Videos & CTA
Адаптивный блок с функциями SaaS: заголовок, видео-демо, списки преимуществ, статистика, CTA. TailwindCSS, анимации, SVG. Для маркетинга.
Prompt
<div class="relative z-30 max-w-7xl mr-auto ml-auto pt-24 pr-6 pb-24 pl-6 space-y-24">
<!-- Section Header -->
<div class="text-center max-w-4xl mx-auto">
<div class="inline-flex items-center rounded-full border border-emerald-400/30 bg-emerald-400/10 px-4 py-2 text-sm font-medium text-emerald-300 mb-6">
<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="mr-2">
<rect width="18" height="11" x="3" y="11" rx="2" ry="2" class=""></rect>
<circle cx="12" cy="5" r="2" class=""></circle>
<path d="M12 7v4" class=""></path>
</svg>
How It Works
</div>
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight text-white leading-tight">
Deploy anywhere. <span class="bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 to-emerald-300">Access everywhere.</span>
</h2>
<p class="mt-6 text-base sm:text-lg lg:text-xl text-slate-400 leading-relaxed">
Choose your deployment model and access your secure vault from any environment, whether self-hosted or managed cloud.
</p>
</div>
<!-- Feature 1: Self-Hosted or Cloud -->
<div class="grid grid-cols-1 lg:grid-cols-12 items-center gap-12" role="region" aria-labelledby="feature-1-heading">
<!-- Visual Demo -->
<div class="lg:col-span-7">
<div class="relative rounded-3xl overflow-hidden border border-emerald-400/20 bg-gradient-to-br from-white/5 to-white/10 backdrop-blur-sm shadow-[0_0_60px_rgba(16,185,129,0.15)]">
<!-- Window Chrome -->
<div class="absolute inset-x-0 top-0 h-10 bg-white/5 border-b border-white/10 flex items-center px-4">
<div class="flex items-center gap-1.5">
<span class="h-2.5 w-2.5 rounded-full bg-red-400/60"></span>
<span class="h-2.5 w-2.5 rounded-full bg-yellow-400/60"></span>
<span class="h-2.5 w-2.5 rounded-full bg-green-400/60"></span>
</div>
<div class="flex-1 text-center">
<span class="text-xs text-white/60 font-mono">vaultic-deploy.local</span>
</div>
</div>
<!-- Deployment Visualization -->
<div class="relative aspect-[16/10] sm:aspect-[16/9] w-full h-full pt-10"><video src="https://cdn.midjourney.com/video/02265b95-7302-4fb0-bcef-44fde128e554/0.mp4" autoplay="" loop="" muted="" playsinline="" class="absolute inset-0 w-full h-full object-cover"></video>
<!-- Background Grid -->
<div class="pointer-events-none absolute inset-0 mix-blend-overlay" style="background-image:
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 34px 34px;"></div>
<!-- Infrastructure Diagram -->
<svg viewBox="0 0 1200 700" class="absolute inset-0 w-[24px] h-[24px]" aria-hidden="true" stroke-width="2" data-icon-replaced="true" style="width: 24px; height: 24px; color: rgb(226, 232, 240);">
<defs class="">
</defs>
<!-- Divider Line -->
<line x1="600" y1="70" x2="600" y2="630" stroke="rgba(110,231,183,0.15)" stroke-width="2" stroke-dasharray="6 12" class=""></line>
<!-- Self-Hosted Server -->
<g transform="translate(320,330)" class="">
<g filter="url(#soft-glow)" class="">
<rect x="-160" y="-140" width="240" height="240" rx="24" fill="none" stroke="rgba(110,231,183,0.28)" stroke-width="2" class=""></rect>
<rect x="-140" y="-120" width="200" height="200" rx="20" fill="none" stroke="rgba(16,185,129,0.5)" stroke-width="2" class=""></rect>
</g>
<!-- Server Icon -->
<g class="">
<polygon points="-40,-50 40,-10 40,70 -40,30" fill="rgba(16,185,129,0.18)" stroke="rgba(110,231,183,0.55)" class=""></polygon>
<polygon points="-40,-50 0,-70 80,-30 40,-10" fill="rgba(16,185,129,0.18)" stroke="rgba(110,231,183,0.55)" class=""></polygon>
<polygon points="40,-10 80,-30 80,50 40,70" fill="rgba(16,185,129,0.12)" stroke="rgba(110,231,183,0.45)" class=""></polygon>
</g>
<!-- Configuration Lines -->
<g opacity="0.8" class="">
<rect x="-110" y="90" width="160" height="8" rx="4" fill="rgba(110,231,183,0.25)" class=""></rect>
<rect x="-110" y="110" width="120" height="8" rx="4" fill="rgba(110,231,183,0.18)" class=""></rect>
<rect x="-110" y="130" width="90" height="8" rx="4" fill="rgba(110,231,183,0.12)" class=""></rect>
</g>
<!-- Label -->
<text x="0" y="180" text-anchor="middle" fill="rgba(110,231,183,0.9)" font-size="18" font-weight="500" class="">Self-Hosted</text>
</g>
<!-- Cloud Infrastructure -->
<g transform="translate(880,340)" filter="url(#soft-glow)" class="">
<path d="M-80 30a70 70 0 1 1 130-50a55 55 0 0 1 20 105h-140a45 45 0 0 1 -10 -55z" fill="rgba(16,185,129,0.15)" stroke="rgba(110,231,183,0.45)" stroke-width="2" class=""></path>
<!-- Cloud Nodes -->
<circle cx="-40" cy="20" r="10" fill="rgba(16,185,129,0.8)" class=""></circle>
<circle cx="20" cy="10" r="10" fill="rgba(16,185,129,0.8)" class=""></circle>
<circle cx="-5" cy="50" r="10" fill="rgba(16,185,129,0.8)" class=""></circle>
<!-- Node Connections -->
<line x1="-40" y1="20" x2="20" y2="10" stroke="rgba(110,231,183,0.45)" stroke-width="2" class=""></line>
<line x1="-5" y1="50" x2="20" y2="10" stroke="rgba(110,231,183,0.45)" stroke-width="2" class=""></line>
<line x1="-5" y1="50" x2="-40" y2="20" stroke="rgba(110,231,183,0.45)" stroke-width="2" class=""></line>
<!-- Label -->
<text x="0" y="150" text-anchor="middle" fill="rgba(110,231,183,0.9)" font-size="18" font-weight="500" class="">Managed Cloud</text>
</g>
<!-- Data Flow Lines -->
<g stroke="rgba(110,231,183,0.22)" stroke-width="2" fill="none" class="">
<path d="M480 330 C 560 330 640 330 720 330" stroke-dasharray="6 10" class=""></path>
<path d="M480 360 C 560 360 640 360 720 360" stroke-dasharray="6 10" class=""></path>
<path d="M480 390 C 560 390 640 390 720 390" stroke-dasharray="6 10" class=""></path>
</g>
<!-- Choice Arrow -->
<g transform="translate(600,200)" class="">
<text x="0" y="-10" text-anchor="middle" fill="rgba(110,231,183,0.8)" font-size="16" font-weight="500" class="">Choose Your Deployment</text>
<path d="M-30 20 L30 20 M25 15 L30 20 L25 25" stroke="rgba(110,231,183,0.6)" stroke-width="2" fill="none" class=""></path>
</g>
</svg>
<!-- Connection Anchor -->
<div id="anchor-a" class="absolute left-1/2 -translate-x-1/2 bottom-0 mb-2">
<span class="block h-3 w-3 rounded-full bg-emerald-400/90 shadow-[0_0_15px_rgba(16,185,129,0.8)]"></span>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="lg:col-span-5">
<div class="inline-flex items-center rounded-full border border-emerald-400/30 bg-emerald-400/10 px-3 py-1 text-xs font-medium text-emerald-300">
<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="mr-2">
<rect width="18" height="18" x="3" y="3" rx="2" class=""></rect>
<path d="M12 8v8" class=""></path>
<path d="m8 12 4 4 4-4" class=""></path>
</svg>
Self Hosted or Cloud
</div>
<h3 id="feature-1-heading" class="mt-5 text-4xl sm:text-5xl font-semibold tracking-tight text-white leading-tight">
You choose where data lives
</h3>
<p class="mt-5 text-base sm:text-lg text-slate-400 leading-relaxed max-w-xl">
Deploy Vaultic on your own infrastructure for complete control, or use our secure managed cloud for zero-maintenance convenience. Your data, your choice.
</p>
<ul class="mt-8 space-y-4" role="list">
<li class="flex items-start gap-3">
<span class="mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/20 ring-1 ring-emerald-400/40" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</span>
<span class="text-[14.5px] sm:text-base text-slate-300">Docker-ready deployment in minutes</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/20 ring-1 ring-emerald-400/40" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</span>
<span class="text-[14.5px] sm:text-base text-slate-300">Cloud sync with isolated vault instances</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/20 ring-1 ring-emerald-400/40" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</span>
<span class="text-[14.5px] sm:text-base text-slate-300">Built-in updates with CLI auto-sync</span>
</li>
</ul>
<!-- Quick Stats -->
<div class="mt-8 flex items-center gap-6 text-sm">
<div class="flex items-center gap-2">
<span class="h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_8px_rgba(16,185,129,0.8)]"></span>
<span class="text-slate-400">99.9% Uptime</span>
</div>
<div class="flex items-center gap-2">
<span class="h-2 w-2 rounded-full bg-blue-400"></span>
<span class="text-slate-400">< 100ms Sync</span>
</div>
</div>
</div>
</div>
<!-- Feature 2: CLI-First Experience -->
<div class="grid grid-cols-1 lg:grid-cols-12 items-center gap-12" role="region" aria-labelledby="feature-2-heading">
<!-- Content -->
<div class="lg:col-span-5 order-2 lg:order-1">
<div class="inline-flex items-center rounded-full border border-emerald-400/30 bg-emerald-400/10 px-3 py-1 text-xs font-medium text-emerald-300">
<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="mr-2">
<path d="M4 17l6-6-6-6" class=""></path>
<path d="M12 19h8" class=""></path>
</svg>
Built for CLI & Dev Environments
</div>
<h3 id="feature-2-heading" class="mt-5 text-4xl sm:text-5xl font-semibold tracking-tight text-white leading-tight">
Designed for developers, not users
</h3>
<p class="mt-5 text-base sm:text-lg text-slate-400 leading-relaxed max-w-xl">
Interact with Vaultic entirely via terminal, scripts, or API. Built by developers who understand that the best tools stay out of your way.
</p>
<ul class="mt-8 space-y-4" role="list">
<li class="flex items-start gap-3">
<span class="mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/20 ring-1 ring-emerald-400/40" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</span>
<span class="text-[14.5px] sm:text-base text-slate-300">Full-featured CLI interface</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/20 ring-1 ring-emerald-400/40" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</span>
<span class="text-[14.5px] sm:text-base text-slate-300">Secure secrets in shell scripts</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded-full bg-emerald-400/20 ring-1 ring-emerald-400/40" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</span>
<span class="text-[14.5px] sm:text-base text-slate-300">RESTful API with SDK support</span>
</li>
</ul>
<!-- Code Example Preview -->
<div class="text-sm font-mono bg-black/40 border-white/10 border rounded-lg mt-8 pt-4 pr-4 pb-4 pl-4 backdrop-blur-sm overflow-hidden" style="height: 120px; position: relative;">
<div style="animation: scrollText 8s linear infinite; position: absolute; white-space: nowrap;" class="">
<div class="flex gap-2 mb-2 items-center">
<span class="h-2 w-2 rounded-full bg-emerald-400"></span>
<span class="text-slate-400 text-xs">Terminal</span>
</div><div class="text-emerald-300 mb-1">
<span class="text-slate-500">$</span> vault get api-key --env production
</div>
<div class="text-slate-400 mb-1">
sk-proj-abc123...xyz789
</div>
<div class="text-emerald-300 mb-1">
<span class="text-slate-500">$</span> vault set db-password --secure
</div>
<div class="text-slate-400 mb-1">
Password stored securely
</div>
<div class="text-emerald-300 mb-1">
<span class="text-slate-500">$</span> vault sync --all
</div>
<div class="text-slate-400 mb-1">
✓ Synced 42 secrets across 3 environments
</div>
<div class="text-emerald-300 mb-1">
<span class="text-slate-500">$</span> vault backup create
</div>
<div class="text-slate-400 mb-1">
Backup created: vault-backup-2024-01-15.enc
</div>
</div>
<style>
@keyframes scrollText {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-200px);
}
}
</style>
</div>
</div>
<!-- Visual Demo -->
<div class="lg:col-span-7 order-1 lg:order-2">
<div class="relative rounded-3xl overflow-hidden border border-emerald-400/20 bg-gradient-to-br from-white/5 to-white/10 backdrop-blur-sm shadow-[0_0_60px_rgba(16,185,129,0.15)]">
<!-- Window Chrome -->
<div class="absolute inset-x-0 top-0 h-10 bg-white/5 border-b border-white/10 flex items-center px-4">
<div class="flex items-center gap-1.5">
<span class="h-2.5 w-2.5 rounded-full bg-red-400/60"></span>
<span class="h-2.5 w-2.5 rounded-full bg-yellow-400/60"></span>
<span class="h-2.5 w-2.5 rounded-full bg-green-400/60"></span>
</div>
<div class="flex-1 text-center">
<span class="text-xs text-white/60 font-mono">terminal — zsh — 120x40</span>
</div>
</div>
<!-- CLI Visualization -->
<div class="relative aspect-[16/10] sm:aspect-[16/9] pt-10"><video src="https://cdn.midjourney.com/video/b684a978-25aa-4f71-9a00-4b906ffa9e86/0.mp4" autoplay="" loop="" muted="" playsinline="" class="absolute inset-0 w-full h-full object-cover"></video>
<!-- Background Grid -->
<div class="pointer-events-none absolute inset-0 mix-blend-overlay" style="background-image:
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 34px 34px;"></div>
<!-- Terminal Interface -->
<svg viewBox="0 0 1200 700" class="absolute inset-0 w-[24px] h-[24px]" aria-hidden="true" stroke-width="2" data-icon-replaced="true" style="width: 24px; height: 24px; color: rgb(226, 232, 240);">
<defs class="">
</defs>
<!-- Terminal Window -->
<g transform="translate(250,220)" filter="url(#soft-glow)" class="">
<rect x="-120" y="-60" width="420" height="180" rx="18" fill="rgba(16,185,129,0.10)" stroke="rgba(110,231,183,0.35)" stroke-width="2" class=""></rect>
<text x="-90" y="-10" fill="rgba(110,231,183,0.9)" font-size="44" font-family="ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace" letter-spacing="0.5" class="">vault sync</text>
<text x="-90" y="40" fill="rgba(110,231,183,0.7)" font-size="28" font-family="ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace" class="">> Syncing...</text>
<text x="-90" y="80" fill="rgba(110,231,183,0.5)" font-size="20" font-family="ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace" class="">✓ Connected to vault</text>
</g>
<!-- API Hub -->
<g transform="translate(640,360)" filter="url(#soft-glow)" class="">
<circle r="34" fill="rgba(16,185,129,0.25)" stroke="rgba(110,231,183,0.55)" stroke-width="2" class=""></circle>
<text x="-12" y="10" fill="rgba(110,231,183,0.95)" font-size="28" font-family="ui-monospace" class="">API</text>
</g>
<!-- Connection Lines -->
<g stroke="rgba(110,231,183,0.45)" stroke-width="2" class="">
<line x1="640" y1="360" x2="900" y2="260" class=""></line>
<line x1="640" y1="360" x2="940" y2="380" class=""></line>
<line x1="640" y1="360" x2="880" y2="510" class=""></line>
</g>
<!-- Service Endpoints -->
<g filter="url(#soft-glow)" class="">
<g transform="translate(940,250)" class="">
<rect x="-60" y="-25" width="120" height="50" rx="25" fill="rgba(16,185,129,0.15)" stroke="rgba(110,231,183,0.4)" stroke-width="2" class=""></rect>
<text x="0" y="5" text-anchor="middle" fill="rgba(110,231,183,0.9)" font-size="16" font-weight="500" class="">Scripts</text>
</g>
<g transform="translate(1000,380)" class="">
<rect x="-60" y="-25" width="120" height="50" rx="25" fill="rgba(16,185,129,0.15)" stroke="rgba(110,231,183,0.4)" stroke-width="2" class=""></rect>
<text x="0" y="5" text-anchor="middle" fill="rgba(110,231,183,0.9)" font-size="16" font-weight="500" class="">Webhooks</text>
</g>
<g transform="translate(940,520)" class="">
<rect x="-60" y="-25" width="120" height="50" rx="25" fill="rgba(16,185,129,0.15)" stroke="rgba(110,231,183,0.4)" stroke-width="2" class=""></rect>
<text x="0" y="5" text-anchor="middle" fill="rgba(110,231,183,0.9)" font-size="16" font-weight="500" class="">CI/CD</text>
</g>
</g>
</svg>
<!-- Connection Anchor -->
<div id="anchor-b" class="absolute left-1/2 -translate-x-1/2 top-0 mt-2">
<span class="block h-3 w-3 rounded-full bg-emerald-400/90 shadow-[0_0_15px_rgba(16,185,129,0.8)]"></span>
</div>
</div>
</div>
</div>
</div>
<!-- Call to Action -->
<div class="text-center py-12">
<div class="inline-flex items-center gap-4">
<a href="#" class="inline-flex items-center gap-2 hover:bg-emerald-400 transition-colors text-sm font-medium rounded-full pt-3 pr-6 pb-3 pl-6 relative overflow-hidden" style="--green: #1BFD9C; font-size: 15px; padding: 0.7em 2.7em; letter-spacing: 0.06em; position: relative; font-family: inherit; border-radius: 2.6em; overflow: hidden; line-height: 1.4em; border: 2px solid var(--green); background: linear-gradient(to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%, transparent 60%, rgba(27, 253, 156, 0.1) 100%); color: var(--green); box-shadow: rgba(27, 253, 156, 0.4) 0px 0px 10px inset, rgba(27, 253, 156, 0.1) 0px 0px 9px 3px;" onmouseover="this.style.color='#82ffc9'; this.style.boxShadow='inset 0 0 10px rgba(27, 253, 156, 0.6), 0 0 9px 3px rgba(27, 253, 156, 0.2)'; this.querySelector('.sweep-effect').style.transform='translateX(15em)';" onmouseout="this.style.color='var(--green)'; this.style.boxShadow='inset 0 0 10px rgba(27, 253, 156, 0.4), 0 0 9px 3px rgba(27, 253, 156, 0.1)'; this.querySelector('.sweep-effect').style.transform='translateX(-4em)';">
<span class="sweep-effect" style="content: ""; position: absolute; left: -4em; width: 4em; height: 100%; top: 0px; background: linear-gradient(to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%, rgba(27, 253, 156, 0.1) 60%, transparent 100%); pointer-events: none;"></span>
Try Vaultic Now
<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="">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</a>
<a href="#" class="inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-medium text-slate-300 border border-white/15 hover:bg-white/5 transition-colors">
View Documentation
<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" data-lucide="arrow-right" class="lucide lucide-arrow-right w-[16px] h-[16px]" filllinecap="round" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(203, 213, 225);"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</a>
</div>
</div>
</div>