Update hero section tools and add PLAY NOW banner to README

This commit is contained in:
Gemini AI
2025-12-25 18:51:18 +04:00
Unverified
parent 56d2d2d818
commit b1b8d5a472
3 changed files with 106 additions and 7 deletions

View File

@@ -94,6 +94,86 @@ body {
color: var(--trae-green);
}
/* Play Banner */
.play-banner {
display: block;
margin: 40px auto;
max-width: 800px;
text-decoration: none;
position: relative;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 10;
}
.banner-inner {
background: rgba(0, 255, 102, 0.05);
backdrop-filter: blur(15px);
border: 2px solid rgba(0, 255, 102, 0.3);
border-radius: 24px;
padding: 40px 60px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
inset 0 0 30px rgba(0, 255, 102, 0.1);
}
.play-banner:hover {
transform: scale(1.02) translateY(-5px);
}
.banner-tag {
background: var(--trae-green);
color: var(--bg-dark);
font-family: var(--font-accent);
font-weight: 700;
font-size: 0.8rem;
padding: 6px 16px;
border-radius: 50px;
display: inline-block;
margin-bottom: 20px;
letter-spacing: 2px;
box-shadow: 0 0 20px var(--trae-green);
}
.banner-title {
font-family: var(--font-accent);
font-size: 3rem;
color: white;
margin-bottom: 10px;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
.banner-subtitle {
color: var(--trae-green);
font-size: 1.2rem;
font-weight: 500;
opacity: 0.9;
}
.banner-glow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(0, 255, 102, 0.1) 0%, transparent 70%);
pointer-events: none;
animation: rotateGlow 10s linear infinite;
}
@keyframes rotateGlow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.play-banner:hover .banner-inner {
border-color: var(--trae-green);
background: rgba(0, 255, 102, 0.1);
box-shadow: 0 30px 60px rgba(0, 255, 102, 0.2),
inset 0 0 40px rgba(0, 255, 102, 0.2);
}
/* Hero Section */
.hero {
height: 100vh;