All Prompts
All Prompts
featuresectiontailwindmarketingdeveloperanimatedresponsive
Developer Feature Section with AI Editor Preview
Секция с AI-редактором для разработчиков. Демонстрирует 'Config as Code' с иконкой, заголовком, списком. Адаптивный дизайн. Идеально для SaaS и маркетинга.
Prompt
<section class="border-y border-white/5 pt-24 pr-24 pb-24 pl-24" id="developers">
<div class="border-gradient-mask group relative overflow-hidden rounded-[2.5rem] bg-zinc-900/20 backdrop-blur-md">
<!-- Background Glow -->
<div
class="absolute -bottom-24 -left-24 w-96 h-96 bg-indigo-600/20 blur-[100px] rounded-full pointer-events-none group-hover:bg-indigo-600/30 transition-colors duration-700">
</div>
<div class="grid lg:grid-cols-2 z-10 gap-x-0 gap-y-0"
style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0))">
<!-- Text Content -->
<div class="md:p-16 flex flex-col z-10 pt-12 pr-12 pb-12 pl-12 justify-center">
<div
class="mb-6 h-12 w-12 flex items-center justify-center rounded-2xl bg-white/5 border border-white/10 shadow-inner">
<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="wand-2"
class="lucide lucide-wand-2 h-6 w-6 text-indigo-400">
<path
d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"
class=""></path>
<path d="m14 7 3 3" class=""></path>
<path d="M5 6v4" class=""></path>
<path d="M19 14v4" class=""></path>
<path d="M10 2v2" class=""></path>
<path d="M7 8H3" class=""></path>
<path d="M21 16h-4" class=""></path>
<path d="M11 3H9" class=""></path>
</svg>
</div>
<h2 class="text-3xl tracking-tight text-white sm:text-4xl font-medium">
Config as Code.
<span class="text-gradient-blue">
Version control your security.
</span>
</h2>
<div class="space-y-6 text-lg text-zinc-400 font-normal leading-relaxed">
<p class="mt-6 text-lg text-slate-400 leading-relaxed">
Stop clicking through endless dashboards. Define your security
policies in TypeScript, Python, or YAML. Review changes in
PRs, rollback instantly, and keep your history clean.
</p>
<ul class="mt-10 space-y-4">
<li class="flex items-center gap-3 text-base text-slate-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-5 w-5 text-blue-500">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
<span class="">Type-safe policy definitions</span>
</li>
<li class="flex items-center gap-3 text-base text-slate-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-5 w-5 text-blue-500">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
<span class="">Integrates with Terraform & Pulumi</span>
</li>
<li class="flex items-center gap-3 text-base text-slate-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-5 w-5 text-blue-500">
<circle cx="12" cy="12" r="10" class=""></circle>
<path d="m9 12 2 2 4-4" class=""></path>
</svg>
<span>CI/CD pipeline blocking</span>
</li>
</ul>
</div>
</div>
<!-- Visual: AI Editor -->
<div
class="min-h-[500px] lg:border-t-0 lg:border-l font-geist bg-black/40 border-white/5 border-t relative overflow-hidden">
<!-- Floating Prompt Input -->
<div class="-translate-x-1/2 -translate-y-1/2 z-20 w-[85%] max-w-md absolute top-1/2 left-1/2">
<div
class="relative overflow-hidden rounded-2xl border border-white/10 bg-zinc-900/90 p-4 shadow-2xl backdrop-blur-xl transition-all duration-500 hover:scale-[1.02] hover:border-indigo-500/30">
<!-- Prompt Header -->
<div class="flex items-center justify-between mb-3 pb-3 border-b border-white/5">
<div class="flex items-center gap-2">
<div class="h-2 w-2 rounded-full bg-indigo-500 animate-pulse"></div>
<span class="text-xs font-medium text-indigo-300">Sentrix Assistant</span>
</div>
<span class="text-[10px] text-zinc-600">v2.1 Model</span>
</div>
<!-- User Input Simulation -->
<div class="flex gap-3 mb-4">
<div
class="h-6 w-6 rounded-full bg-zinc-800 flex items-center justify-center shrink-0 border border-white/5">
<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="user" class="lucide lucide-user h-3 w-3 text-zinc-400">
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" class=""></path>
<circle cx="12" cy="7" r="4" class=""></circle>
</svg>
</div>
<div class="text-sm text-zinc-300 font-normal leading-relaxed">
Generate a security policy to enforce MFA and block public
access for the production environment.
</div>
</div>
<!-- AI Generating Loader -->
<div class="flex gap-3">
<div
class="h-6 w-6 rounded-full bg-indigo-500/20 flex items-center justify-center shrink-0 border border-indigo-500/30">
<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="sparkles" class="lucide lucide-sparkles h-3 w-3 text-indigo-400">
<path
d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
class=""></path>
<path d="M20 2v4" class=""></path>
<path d="M22 4h-4" class=""></path>
<circle cx="4" cy="20" r="2" class=""></circle>
</svg>
</div>
<div class="w-full space-y-2">
<div class="h-2 w-3/4 bg-zinc-800 rounded animate-pulse"></div>
<div class="h-2 w-1/2 bg-zinc-800 rounded animate-pulse delay-75"></div>
<!-- The Generated Component Preview (Code Block) -->
<div
class="mt-4 rounded-lg border border-zinc-700/50 bg-[#0B0C10] p-4 font-mono text-[10px] md:text-xs leading-relaxed overflow-hidden relative group">
<!-- Language Badge -->
<div
class="absolute top-2 right-2 text-[8px] text-zinc-500 border border-zinc-800 px-1.5 rounded bg-zinc-900/50">
TS
</div>
<div class="text-zinc-400">
<span class="text-purple-400">export</span>
<span class="text-blue-400">const</span>
<span class="text-yellow-200">securityConfig</span>
= {
</div>
<div class="pl-4 text-zinc-400">
environment:
<span class="text-green-400">'production'</span>
,
</div>
<div class="pl-4 text-zinc-400">compliance: {</div>
<div class="pl-8 text-zinc-400">
enforceMfa:
<span class="text-blue-400">true</span>
,
</div>
<div class="pl-8 text-zinc-400">
blockPublicAccess:
<span class="text-blue-400">true</span>
,
</div>
<div class="pl-4 text-zinc-400">},</div>
<div class="text-zinc-400">};</div>
<!-- Decorative glowing cursor or selection -->
<div class="absolute bottom-4 left-10 w-1.5 h-3 bg-indigo-500/50 animate-pulse"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Background Abstract Code -->
<style>
@keyframes scrollUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
</style>
<div class="absolute inset-0 p-8 opacity-20 pointer-events-none select-none overflow-hidden">
<div class="absolute inset-0 w-full h-full"
style="mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);">
<div class="w-full" style="animation: scrollUp 30s linear infinite;">
<!-- Original Block -->
<div class="text-xs text-zinc-600 space-y-1 pb-16">
<p>
<span class="text-purple-400">export default</span>
<span class="text-blue-400">function</span>
<span class="text-yellow-200">RevenueCard</span>
() {
</p>
<p class="pl-4">
<span class="text-purple-400">return</span>
(
</p>
<p class="pl-8">
<
<span class="text-red-400">Card</span>
className=
<span class="text-green-400">
"bg-zinc-950 p-6 border..."
</span>
>
</p>
<p class="pl-12">
<
<span class="text-red-400">div</span>
className=
<span class="text-green-400">
"flex justify-between"
</span>
>
</p>
<p class="pl-16">
<
<span class="text-red-400">h3</span>
>Revenue</
<span class="text-red-400">h3</span>
>
</p>
<p class="pl-12">
</
<span class="text-red-400">div</span>
>
</p>
<p class="pl-8">
</
<span class="text-red-400">Card</span>
>
</p>
<p class="pl-4">);</p>
<p>}</p>
</div>
<!-- Duplicate for seamless loop -->
<div class="text-xs text-zinc-600 space-y-1 pb-16">
<p>
<span class="text-purple-400">export default</span>
<span class="text-blue-400">function</span>
<span class="text-yellow-200">RevenueCard</span>
() {
</p>
<p class="pl-4">
<span class="text-purple-400">return</span>
(
</p>
<p class="pl-8">
<
<span class="text-red-400">Card</span>
className=
<span class="text-green-400">
"bg-zinc-950 p-6 border..."
</span>
>
</p>
<p class="pl-12">
<
<span class="text-red-400">div</span>
className=
<span class="text-green-400">
"flex justify-between"
</span>
>
</p>
<p class="pl-16">
<
<span class="text-red-400">h3</span>
>Revenue</
<span class="text-red-400">h3</span>
>
</p>
<p class="pl-12">
</
<span class="text-red-400">div</span>
>
</p>
<p class="pl-8">
</
<span class="text-red-400">Card</span>
>
</p>
<p class="pl-4">);</p>
<p>}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>