<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Data Concept Banner</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<style>
/* Custom styles */
.banner-container {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
position: relative;
height: 50vh;
overflow: hidden;
}
.grid-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(100, 116, 139, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(100, 116, 139, 0.1) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
.particle {
position: absolute;
background: linear-gradient(145deg, #3b82f6, #8b5cf6);
border-radius: 50%;
pointer-events: none;
filter: blur(1px);
}
.data-node {
position: absolute;
width: 8px;
height: 8px;
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
border-radius: 50%;
box-shadow: 0 0 10px 2px rgba(59, 130, 246, 0.7);
z-index: 10;
}
.data-connection {
position: absolute;
height: 1px;
background: linear-gradient(90deg, transparent, #64748b, transparent);
}
.polygon {
position: absolute;
background: rgba(59, 130, 246, 0.1);
backdrop-filter: blur(2px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
border: 1px solid rgba(59, 130, 246, 0.3);
}
.ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(59, 130, 246, 0.3);
}
.data-wave {
position: absolute;
width: 200%;
height: 100px;
background: linear-gradient(90deg,
transparent,
rgba(59, 130, 246, 0.7),
rgba(139, 92, 246, 0.7),
transparent);
opacity: 0.1;
transform-origin: center;
animation: waveMove 20s linear infinite;
filter: blur(5px);
}
@keyframes waveMove {
0% { transform: translateX(-50%) rotate(0deg); }
100% { transform: translateX(0%) rotate(0deg); }
}
.
</html>