All Prompts
All Prompts
herosectionanimatedresponsivetailwindlandingdashboardvisual
Futuristic Robotics Dashboard Hero Layout
Футуристический шаблон дашборда для робототехники. Адаптивный hero-лейаут с анимированными SVG, статистикой и эффектами фона. Идеально для лендингов.
Prompt
<section class="bg-stone-300 text-stone-900 min-h-screen flex items-center justify-center p-4 md:p-8 lg:p-12 antialiased relative" style="font-family: 'Manrope', sans-serif;">
<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=DM+Mono:ital,wght@0,300;0,400;0,500&family=Instrument+Serif:ital@0;1&family=Manrope:wght@200;300;400&display=swap" rel="stylesheet">
<canvas id="fx-canvas" class="fixed inset-0 pointer-events-none z-0 w-full h-full"></canvas>
<main id="main-layout" class="w-full max-w-7xl grid grid-cols-1 lg:grid-cols-[0.9fr_1.3fr_0.8fr] bg-[#e8e6e3] shadow-2xl border border-stone-400 overflow-hidden relative z-10">
<!-- Panel 1: Dark Earth Tone -->
<section class="bg-[#292524] text-stone-100 flex flex-col border-b lg:border-b-0 lg:border-r border-stone-700 relative overflow-hidden z-20">
<!-- Top Section -->
<div class="h-1/3 min-h-[150px] border-b border-stone-700 flex">
<!-- Rotated Sidebar -->
<div class="w-12 md:w-16 border-r border-stone-700 flex items-center justify-center shrink-0">
<span class="text-xs font-extralight tracking-widest uppercase text-stone-400 whitespace-nowrap" style="writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'DM Mono', monospace;">
Aetherial Transport Matrix
</span>
</div>
<!-- Arrow Grid -->
<div class="flex-1 p-6 grid grid-cols-4 grid-rows-3 gap-4 place-items-center opacity-80">
<!-- Repeating Arrows -->
<script>
for(let i=0; i<12; i++) {
document.write(`
<svg viewBox="0 0 24 24" class="w-4 h-4 text-stone-500 animate-[pulse_${(i%3)+2}s_ease-in-out_infinite]" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 18l6-6-6-6" />
</svg>
`);
}
</script>
</div>
</div>
<!-- Middle Section (Large Text) -->
<div class="flex-1 p-8 md:p-12 flex items-center justify-center relative">
<!-- Corner Markers -->
<div class="absolute top-4 left-4 w-2 h-2 bg-stone-600"></div>
<div class="absolute top-4 right-4 w-2 h-2 bg-stone-600"></div>
<div class="absolute bottom-4 left-4 w-2 h-2 bg-stone-600"></div>
<div class="absolute bottom-4 right-4 w-2 h-2 bg-stone-600"></div>
<h2 class="text-5xl md:text-6xl lg:text-7xl font-light text-[#ea580c] tracking-tight leading-[0.9] w-full uppercase" style="font-family: 'Dela Gothic One', cursive;">
AERO<span class="text-stone-500">-</span><br>
Core
</h2>
</div>
<!-- Bottom Section (Stripes) -->
<div class="h-20 w-full border-t border-stone-700" style="background: repeating-linear-gradient(-45deg, #292524, #292524 10px, #d6d3d1 10px, #d6d3d1 20px); opacity: 0.9;"></div>
</section>
<!-- Panel 2: Main Content -->
<section class="p-6 md:p-10 border-b lg:border-b-0 lg:border-r border-stone-400 flex flex-col relative z-10">
<!-- Background Watermark -->
<div class="absolute bottom-0 right-0 w-full h-full pointer-events-none opacity-40 overflow-hidden flex items-end justify-end">
<svg viewBox="0 0 200 200" class="w-3/4 h-auto text-orange-200 translate-x-1/4 translate-y-1/4" fill="currentColor">
<path d="M100 0L200 200H0L100 0Z" opacity="0.5"></path>
<circle cx="100" cy="130" r="40" fill="#e8e6e3"></circle>
</svg>
</div>
<!-- Header -->
<h1 class="text-6xl md:text-7xl lg:text-8xl font-light tracking-tight leading-none text-stone-800 mb-8 z-10 italic" style="font-family: 'Instrument Serif', serif;">
Dynamic<br>Construct<sup class="text-xl md:text-2xl not-italic tracking-tight">®</sup>
</h1>
<!-- Technical Bar -->
<div class="border border-stone-400 p-2 flex justify-between items-center text-xs font-extralight uppercase tracking-widest mb-6 bg-[#e8e6e3] z-10" style="font-family: 'DM Mono', monospace;">
<span>SYS / DYNAMIC PROTOCOL</span>
<span>HUB REF. 142</span>
</div>
<!-- Stats Grid -->
<div class="grid grid-cols-2 gap-4 text-xs font-extralight text-stone-600 mb-8 z-10" style="font-family: 'DM Mono', monospace;">
<div class="space-y-1">
<p>FLUID ROUTING</p>
<p>LOAD BALANCING LOGIC</p>
<p>EXECUTION</p>
</div>
<div class="space-y-1 text-right">
<p>0.2 SEC PER LOOP</p>
<p>0.4 KWH / ACTION</p>
<p>99.99% UPTIME</p>
</div>
</div>
<!-- Illustration Area -->
<div class="relative w-full aspect-video border border-stone-400 bg-stone-100/50 mb-8 p-4 z-10 flex items-center justify-center overflow-hidden group">
<!-- Grid background -->
<div class="absolute inset-0" style="background-image: linear-gradient(#d6d3d1 1px, transparent 1px), linear-gradient(90deg, #d6d3d1 1px, transparent 1px); background-size: 20px 20px; opacity: 0.4;"></div>
<span class="absolute top-2 left-2 text-xs font-extralight text-stone-500" style="font-family: 'DM Mono', monospace;">Live-State</span>
<span class="absolute top-2 right-2 text-xs font-extralight text-stone-500" style="font-family: 'DM Mono', monospace;">Auto-Calibrating</span>
<!-- Robotic Arm SVG -->
<svg viewBox="0 0 300 200" class="w-full h-full text-stone-800 relative z-10">
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">
<!-- Base -->
<path d="M40 180 L80 180 L70 140 L50 140 Z"></path>
<circle cx="60" cy="140" r="6" fill="#e8e6e3"></circle>
<!-- Animated Arm Assembly -->
<g>
<animateTransform attributeName="transform" type="rotate" values="0 60 140; 12 60 140; 12 60 140; -8 60 140; -8 60 140; 0 60 140" keyTimes="0; 0.15; 0.4; 0.55; 0.8; 1" dur="4s" repeatCount="indefinite"></animateTransform>
<!-- Lower Arm -->
<path d="M60 140 L120 70" class="group-hover:stroke-orange-500 transition-colors duration-500"></path>
<circle cx="120" cy="70" r="8" fill="#e8e6e3"></circle>
<circle cx="120" cy="70" r="3"></circle>
<g>
<animateTransform attributeName="transform" type="rotate" values="0 120 70; -20 120 70; -20 120 70; 15 120 70; 15 120 70; 0 120 70" keyTimes="0; 0.15; 0.4; 0.55; 0.8; 1" dur="4s" repeatCount="indefinite"></animateTransform>
<!-- Upper Arm -->
<path d="M120 70 L190 110" class="group-hover:stroke-orange-500 transition-colors duration-500"></path>
<circle cx="190" cy="110" r="6" fill="#e8e6e3"></circle>
<g>
<animateTransform attributeName="transform" type="rotate" values="0 190 110; 25 190 110; 25 190 110; 0 190 110" keyTimes="0; 0.2; 0.7; 1" dur="2s" repeatCount="indefinite"></animateTransform>
<!-- Gripper Mount -->
<rect x="185" y="116" width="10" height="15"></rect>
<!-- Gripper Claws -->
<path d="M185 131 L175 150 L185 155"></path>
<path d="M195 131 L205 150 L195 155"></path>
</g>
</g>
</g>
<!-- Target Box -->
<rect x="220" y="130" width="50" height="50" stroke-dasharray="4 4" class="text-orange-500">
<animate attributeName="stroke-dashoffset" from="8" to="0" dur="0.8s" repeatCount="indefinite"></animate>
</rect>
<!-- Movement Lines -->
<path d="M190 110 Q230 70 245 130" stroke-dasharray="2 4" stroke-width="1" opacity="0.5">
<animate attributeName="stroke-dashoffset" from="6" to="0" dur="0.4s" repeatCount="indefinite"></animate>
</path>
</g>
</svg>
<div class="absolute bottom-2 left-2 text-xs text-stone-500 uppercase tracking-widest" style="font-family: 'DM Mono', monospace;">GEN5 - COMMERCIAL</div>
<div class="absolute bottom-2 right-2 text-xs text-stone-500 uppercase tracking-widest" style="font-family: 'DM Mono', monospace;">0.05MM ACCURACY</div>
</div>
<!-- Footer Section -->
<div class="mt-auto pt-6 border-t border-stone-400 grid grid-cols-[auto_1fr] gap-6 items-end z-10">
<!-- Badge -->
<div class="w-16 h-16 rounded-full border border-orange-500 flex items-center justify-center relative animate-[spin_20s_linear_infinite]">
<svg viewBox="0 0 100 100" class="absolute inset-0 w-full h-full text-orange-500" fill="none" stroke="currentColor" stroke-width="0.5">
<circle cx="50" cy="50" r="45" stroke-dasharray="4 4">
<animate attributeName="stroke-dashoffset" from="8" to="0" dur="1s" repeatCount="indefinite"></animate>
</circle>
</svg>
<span class="text-orange-600 font-light text-xl tracking-tight" style="font-family: 'Instrument Serif', serif;">A</span>
</div>
<!-- Orange Text Block -->
<div class="text-orange-600 space-y-2">
<h3 class="text-sm font-light tracking-tight flex items-center gap-2">
<iconify-icon icon="solar:planet-3-linear" class="text-lg"></iconify-icon>
Orbital Relay Network
</h3>
<p class="text-xs leading-relaxed font-extralight">
Aero Core / X-9 / LINK<br>
<span class="text-stone-500 mt-1 block">Utilizing next-gen dynamic articulation for heavy-duty assembly and global logistics. Built for maximum resilience.</span>
</p>
</div>
</div>
</section>
<!-- Panel 3: Right -->
<section class="p-6 md:p-10 flex flex-col justify-between relative bg-[#e8e6e3]">
<!-- Top Illustration -->
<div class="flex-1 relative min-h-[200px]">
<svg viewBox="0 0 200 250" class="w-full h-full text-stone-800 absolute top-0 right-0">
<g fill="none" stroke="currentColor" stroke-width="1" stroke-linejoin="round">
<!-- Base Arm -->
<path d="M200 20 L120 70"></path>
<circle cx="120" cy="70" r="12" fill="#e8e6e3"></circle>
<circle cx="120" cy="70" r="4"></circle>
<g>
<animateTransform attributeName="transform" type="rotate" values="0 120 70; 18 120 70; 18 120 70; -12 120 70; -12 120 70; 0 120 70" keyTimes="0; 0.1; 0.4; 0.5; 0.8; 1" dur="3.5s" repeatCount="indefinite"></animateTransform>
<!-- Lower Arm -->
<path d="M120 70 L100 120"></path>
<!-- End effector -->
<path d="M90 120 L110 120 L100 140 Z"></path>
</g>
<!-- Connecting line to box -->
<path d="M100 140 L100 180" stroke-dasharray="2 2">
<animate attributeName="stroke-dashoffset" from="4" to="0" dur="0.3s" repeatCount="indefinite"></animate>
</path>
<!-- Box -->
<rect x="60" y="180" width="80" height="60"></rect>
<path d="M60 180 L40 220" stroke-dasharray="2 4" opacity="0.5">
<animate attributeName="stroke-dashoffset" from="6" to="0" dur="0.5s" repeatCount="indefinite"></animate>
</path>
</g>
</svg>
</div>
<!-- Bottom Illustration -->
<div class="flex-1 relative min-h-[200px] mt-8">
<svg viewBox="0 0 200 200" class="w-full h-full text-stone-800 absolute bottom-0 right-0">
<g fill="none" stroke="currentColor" stroke-width="1" stroke-linejoin="round">
<!-- Base Arm -->
<path d="M200 180 L120 140"></path>
<circle cx="120" cy="140" r="15" fill="#e8e6e3"></circle>
<circle cx="120" cy="140" r="5"></circle>
<g>
<animateTransform attributeName="transform" type="rotate" values="0 120 140; -28 120 140; -28 120 140; 14 120 140; 14 120 140; 0 120 140" keyTimes="0; 0.15; 0.5; 0.65; 0.9; 1" dur="4.2s" repeatCount="indefinite"></animateTransform>
<!-- Lower Arm -->
<path d="M120 140 L80 160"></path>
<!-- Base mount -->
<path d="M70 155 L70 165 L90 165 L90 155"></path>
<circle cx="80" cy="160" r="2" fill="currentColor"></circle>
</g>
<!-- Rotation Indicator -->
<g class="animate-[spin_6s_linear_infinite]" style="transform-origin: 120px 140px;">
<path d="M100 120 A 28 28 0 0 0 95 160" stroke-dasharray="3 3">
<animate attributeName="stroke-dashoffset" from="6" to="0" dur="0.6s" repeatCount="indefinite"></animate>
</path>
<path d="M95 160 L90 155 M95 160 L100 155"></path>
</g>
</g>
</svg>
</div>
</section>
</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>
for(let i=0; i<12; i++) {
document.write(`
<svg viewBox="0 0 24 24" class="w-4 h-4 text-stone-500 animate-[pulse_${(i%3)+2}s_ease-in-out_infinite]" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 18l6-6-6-6" />
</svg>
`);
}
</script>
<script>
const cvs = document.getElementById('fx-canvas');
const ctx = cvs.getContext('2d');
const main = document.getElementById('main-layout');
let w, h, rect;
const resize = () => {
w = cvs.width = window.innerWidth;
h = cvs.height = window.innerHeight;
rect = main.getBoundingClientRect();
};
window.addEventListener('resize', resize);
const debris = Array.from({length: 45}, () => ({x: Math.random()*window.innerWidth, y: Math.random()*window.innerHeight, vx: (Math.random()-0.5)*0.6, vy: (Math.random()-0.5)*0.6}));
const rain = Array.from({length: 120}, () => ({x: Math.random()*window.innerWidth, y: Math.random()*window.innerHeight, vy: 18+Math.random()*12, l: 15+Math.random()*25}));
const splashes = [];
function render() {
if(!w) resize();
ctx.clearRect(0, 0, w, h);
rect = main.getBoundingClientRect();
ctx.fillStyle = 'rgba(28, 25, 23, 0.4)';
ctx.lineWidth = 0.5;
for(let i=0; i<debris.length; i++) {
let p = debris[i];
p.x += p.vx; p.y += p.vy;
if(p.x<0||p.x>w) p.vx*=-1; if(p.y<0||p.y>h) p.vy*=-1;
ctx.beginPath(); ctx.arc(p.x, p.y, 1.5, 0, 6.28); ctx.fill();
for(let j=i+1; j<debris.length; j++) {
let p2 = debris[j];
let d = Math.hypot(p.x-p2.x, p.y-p2.y);
if(d<130) {
ctx.strokeStyle = `rgba(28, 25, 23, ${0.2 - d/130*0.2})`;
ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(p2.x, p2.y); ctx.stroke();
}
}
}
ctx.strokeStyle = 'rgba(28, 25, 23, 0.35)';
ctx.lineWidth = 1;
for(let r of rain) {
r.y += r.vy;
if(r.y>h) { r.y = -r.l; r.x = Math.random()*w; }
if(r.y>rect.top && r.y-r.vy<=rect.top && r.x>rect.left && r.x<rect.right) {
for(let k=0; k<4; k++) splashes.push({x: r.x, y: rect.top, vx: (Math.random()-0.5)*3.5, vy: -Math.random()*3-1.5, life: 1});
r.y = -r.l; r.x = Math.random()*w;
} else {
ctx.beginPath(); ctx.moveTo(r.x, r.y); ctx.lineTo(r.x, r.y-r.l); ctx.stroke();
}
}
for(let i=splashes.length-1; i>=0; i--) {
let s = splashes[i];
s.x += s.vx; s.y += s.vy; s.vy += 0.25; s.life -= 0.04;
if(s.life<=0) splashes.splice(i, 1);
else {
ctx.fillStyle = `rgba(28, 25, 23, ${s.life})`;
ctx.beginPath(); ctx.arc(s.x, s.y, 1.2, 0, 6.28); ctx.fill();
}
}
requestAnimationFrame(render);
}
render();
</script>
</section>