style: Enhance hero section background with richer gradient and effects

This commit is contained in:
Paul Gauthier (aider) 2025-03-19 11:36:43 -07:00
parent 79619de045
commit 447347c760

View file

@ -76,8 +76,9 @@
.hero {
padding: 80px 0;
background: linear-gradient(135deg, #eef2ff 0%, #d8e0f7 50%, #c5d1f8 100%);
background: linear-gradient(135deg, #e0e8ff 0%, #c9d6ff 35%, #b3c6ff 70%, #a3bdff 100%);
position: relative;
overflow: hidden;
}
.hero::before {
@ -87,11 +88,25 @@
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234c6ef5' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234c6ef5' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.6;
z-index: 0;
}
.hero::after {
content: "";
position: absolute;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
background: radial-gradient(circle, rgba(76, 110, 245, 0.1) 0%, rgba(76, 110, 245, 0) 70%);
opacity: 0.7;
z-index: 0;
transform: rotate(30deg);
pointer-events: none;
}
.hero .container {
position: relative;
z-index: 1;