All Prompts
All Prompts
herosectionlandingterminaltailwindanimatedsaasdeveloper
Dark Terminal Hero with Animated Ray Background
Полноэкранный SaaS-херо с терминалом и анимированным фоном. Идеально для инструментов разработчика. UI-компонент на Tailwind CSS.
Prompt
<section class="bg-[#0a0a0c] text-gray-100 antialiased flex flex-col min-h-screen overflow-x-hidden relative font-light"
style="font-family: 'Plus Jakarta Sans', sans-serif;">
<link
href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&family=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400&display=swap"
rel="stylesheet">
<div class="pointer-events-none absolute inset-4 md:inset-8 border border-white/10 z-50">
<div class="absolute -top-1.5 -left-1.5 w-3 h-3 bg-[#0a0a0c] border border-white/20"></div>
<div class="absolute -top-1.5 -right-1.5 w-3 h-3 bg-[#0a0a0c] border border-white/20"></div>
<div class="absolute -bottom-1.5 -left-1.5 w-3 h-3 bg-[#0a0a0c] border border-white/20"></div>
<div class="absolute -bottom-1.5 -right-1.5 w-3 h-3 bg-[#0a0a0c] border border-white/20"></div>
</div>
<header
class="flex flex-col items-center justify-center pt-12 md:pt-16 pb-16 px-6 relative z-10 w-full max-w-5xl mx-auto">
<!-- Pill Shaped Header Menu -->
<nav
class="flex items-center gap-4 md:gap-8 px-6 py-2.5 mb-16 md:mb-24 bg-[#111113]/80 backdrop-blur-md border border-white/10 rounded-full shadow-lg text-xs md:text-sm font-light text-gray-400 z-20">
<a href="#" class="hover:text-white transition-colors">Platform</a>
<a href="#" class="hover:text-white transition-colors">Integration</a>
<a href="#" class="hover:text-white transition-colors">Changelog</a>
<a href="#" class="text-blue-400 hover:text-blue-300 transition-colors">Pricing</a>
</nav>
<div class="flex items-center gap-2 text-xs font-light tracking-widest mb-8 uppercase text-gray-400">
<span>Aero Infrastructure</span>
<iconify-icon icon="solar:cpu-linear" class="text-blue-500" style="stroke-width: 1.5;"></iconify-icon>
</div>
<h1 class="text-5xl md:text-7xl lg:text-8xl text-center tracking-tight leading-none max-w-4xl mb-10 text-white"
style="font-family: 'Instrument Serif', serif;">
The Future of<br>
<span class="italic text-gray-300">Compilation</span>
</h1>
<button class="group relative inline-flex items-center justify-center px-8 py-3 text-sm font-light text-blue-200 bg-[#111113] border border-white/10 rounded-full overflow-hidden transition-all hover:border-blue-500/50 hover:shadow-[0_0_20px_rgba(59,130,246,0.15)] focus:outline-none z-20">
<span class="relative z-10 tracking-wide">Discover Aero</span>
<div class="absolute inset-0 bg-gradient-to-r from-blue-900/20 to-purple-900/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
</button>
<!-- Social Proof -->
<div class="flex flex-col md:flex-row items-center gap-4 mt-10 z-20 opacity-80">
<div class="flex -space-x-2">
<img src="https://i.pravatar.cc/100?img=33" alt="User" class="w-8 h-8 rounded-full border-2 border-[#0a0a0c] bg-gray-800 object-cover">
<img src="https://i.pravatar.cc/100?img=47" alt="User" class="w-8 h-8 rounded-full border-2 border-[#0a0a0c] bg-gray-700 object-cover">
<img src="https://i.pravatar.cc/100?img=12" alt="User" class="w-8 h-8 rounded-full border-2 border-[#0a0a0c] bg-gray-600 object-cover">
<div
class="w-8 h-8 rounded-full border-2 border-[#0a0a0c] bg-[#1a1a1c] flex items-center justify-center text-xs text-gray-400">
+</div>
</div>
<p class="text-xs text-gray-500 font-light tracking-wide">
Empowering over <span class="text-gray-300">12,000</span> engineering teams
</p>
</div>
</header>
<main class="relative w-full flex-1 flex justify-center items-end min-h-[600px] mt-4">
<!-- Animated Background -->
<div class="absolute inset-0 w-full h-full bg-[#0a0a0c] overflow-hidden">
<canvas id="ray-canvas" class="absolute inset-0 w-full h-full"></canvas>
<!-- Overlay gradient to blend top edge -->
<div class="absolute top-0 inset-x-0 h-32 bg-gradient-to-b from-[#0a0a0c] via-[#0a0a0c]/80 to-transparent z-10">
</div>
</div>
<!-- Terminal Window -->
<div
class="relative z-20 w-[95%] md:w-[85%] lg:w-[75%] max-w-5xl h-[80%] min-h-[450px] bg-[#111113] rounded-t-2xl border-t border-x border-white/10 shadow-2xl flex flex-col pt-8 px-6 md:px-10 pb-24">
<!-- Terminal Content -->
<div class="text-xs md:text-sm font-light leading-relaxed tracking-wide flex flex-col gap-2"
style="font-family: 'DM Mono', monospace;">
<div class="text-gray-500 mb-5 stagger-item"
style="opacity: 0; transform: translateY(5px); transition: all 0.4s ease-out;">$ aero compile --release</div>
<div class="mb-4 stagger-item" style="opacity: 0; transform: translateY(5px); transition: all 0.4s ease-out;">
<span class="text-purple-400">AERO</span> <span class="text-gray-400">v3.0.1</span>
<span class="text-cyan-400">compile</span>
</div>
<div class="flex flex-wrap items-center justify-between max-w-2xl stagger-item"
style="opacity: 0; transform: translateY(5px); transition: all 0.4s ease-out;">
<span class="text-gray-300">app/components/Header.tsx</span>
<div class="flex items-center gap-4">
<span class="text-cyan-400">12ms</span>
<span class="text-gray-600 w-28 text-right">(cached)</span>
</div>
</div>
<div class="flex flex-wrap items-center justify-between max-w-2xl stagger-item"
style="opacity: 0; transform: translateY(5px); transition: all 0.4s ease-out;">
<span class="text-gray-300">app/core/engine.ts</span>
<div class="flex items-center gap-4">
<span class="text-cyan-400">38ms</span>
<span class="text-transparent w-28"></span>
</div>
</div>
<div class="flex flex-wrap items-center justify-between max-w-2xl stagger-item"
style="opacity: 0; transform: translateY(5px); transition: all 0.4s ease-out;">
<span class="text-gray-300">app/styles/global.css</span>
<div class="flex items-center gap-4">
<span class="text-cyan-400">6ms</span>
<span class="text-gray-600 w-28 text-right">(cached)</span>
</div>
</div>
<div class="flex flex-wrap items-center justify-between max-w-2xl stagger-item"
style="opacity: 0; transform: translateY(5px); transition: all 0.4s ease-out;">
<span class="text-gray-300">app/lib/parser.ts</span>
<div class="flex items-center gap-4">
<span class="text-cyan-400">18ms</span>
<span class="text-transparent w-28"></span>
</div>
</div>
<div class="mt-6 text-green-400 flex items-center gap-3 stagger-item"
style="opacity: 0; transform: translateY(5px); transition: all 0.4s ease-out;">
<iconify-icon icon="solar:check-circle-linear" class="text-base" style="stroke-width: 1.5;"></iconify-icon>
<span>Processed <span class="text-white">8 assets</span> in <span class="text-cyan-400">64ms</span>.</span>
</div>
<div class="mt-3 stagger-item" style="opacity: 0; transform: translateY(5px); transition: all 0.4s ease-out;">
<span class="inline-block w-2.5 h-4 bg-gray-400 animate-pulse align-middle"></span>
</div>
</div>
<!-- Segmented Control / Tabs -->
<div
class="absolute bottom-8 left-1/2 -translate-x-1/2 flex items-center bg-[#1a1a1c] border border-white/10 rounded-lg p-1.5 text-xs text-gray-500 z-30 tracking-wide overflow-x-auto max-w-[90vw]"
style="font-family: 'DM Mono', monospace;">
<button class="px-4 md:px-5 py-2 rounded-md hover:text-gray-300 transition-colors">init</button>
<button class="px-4 md:px-5 py-2 rounded-md hover:text-gray-300 transition-colors">dev</button>
<button class="px-4 md:px-5 py-2 rounded-md hover:text-gray-300 transition-colors">lint</button>
<button class="px-4 md:px-5 py-2 rounded-md hover:text-gray-300 transition-colors">test</button>
<button class="px-4 md:px-5 py-2 rounded-md bg-[#2a2a2c] text-white font-light shadow-sm transition-colors border border-white/5">compile</button>
</div>
</div>
</main>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script>
// Trigger stagger animations
setTimeout(() => {
document.querySelectorAll('.stagger-item').forEach((el, index) => {
setTimeout(() => {
el.style.opacity = '1';
el.style.transform = 'translateY(0)';
}, index * 100 + 200);
});
}, 100);
// Canvas Animation Script to simulate WebGL rays
const canvas = document.getElementById('ray-canvas');
const ctx = canvas.getContext('2d');
let width, height;
let rays = [];
function initCanvas() {
width = canvas.width = canvas.offsetWidth;
height = canvas.height = canvas.offsetHeight;
rays = [];
const numRays = window.innerWidth < 768 ? 150 : 300;
for (let i = 0; i < numRays; i++) {
rays.push({
angle: Math.random() * Math.PI * 2,
distance: Math.random() * width,
speed: Math.random() * 4 + 1,
length: Math.random() * 100 + 50,
width: Math.random() * 2 + 0.5,
hue: 220 + Math.random() * 60 // Blue to Purple range
});
}
}
window.addEventListener('resize', initCanvas);
initCanvas();
function animate() {
// Create trailing effect
ctx.fillStyle = 'rgba(10, 10, 12, 0.2)';
ctx.fillRect(0, 0, width, height);
// Add central glow
const gradient = ctx.createRadialGradient(width/2, height/2, 0, width/2, height/2, height);
gradient.addColorStop(0, 'rgba(37, 99, 235, 0.15)');
gradient.addColorStop(1, 'transparent');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
ctx.globalCompositeOperation = 'screen';
const cx = width / 2;
const cy = height / 2;
rays.forEach(ray => {
ray.distance += ray.speed;
if (ray.distance > width) {
ray.distance = 0;
ray.angle = Math.random() * Math.PI * 2;
}
const x1 = cx + Math.cos(ray.angle) * ray.distance;
const y1 = cy + Math.sin(ray.angle) * ray.distance;
const x2 = cx + Math.cos(ray.angle) * (ray.distance + ray.length);
const y2 = cy + Math.sin(ray.angle) * (ray.distance + ray.length);
// Fade out edges
const opacity = Math.min(1, ray.distance / (width * 0.3));
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = `hsla(${ray.hue}, 100%, 65%, ${opacity * 0.8})`;
ctx.lineWidth = ray.width;
ctx.stroke();
});
ctx.globalCompositeOperation = 'source-over';
requestAnimationFrame(animate);
}
animate();
</script>
</section>