style: Adjust hero section layout and background for better visual emphasis

This commit is contained in:
Paul Gauthier (aider) 2025-03-19 11:27:41 -07:00
parent 92fcf9a159
commit 1af423e2df

View file

@ -76,12 +76,30 @@
.hero {
padding: 80px 0;
background: linear-gradient(135deg, #f5f7ff 0%, #e9ecf8 100%);
background: linear-gradient(135deg, #eef2ff 0%, #d8e0f7 50%, #c5d1f8 100%);
position: relative;
}
.hero::before {
content: "";
position: absolute;
top: 0;
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;
z-index: 0;
}
.hero .container {
position: relative;
z-index: 1;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: 40% 60%;
gap: 40px;
align-items: center;
}