[DESIGN-003] Add layered hero section with floating elements (feat)
Some checks failed
CD - Build & Deploy / build-and-push (push) Has been cancelled
CD - Build & Deploy / package-helm (push) Has been cancelled
CD - Build & Deploy / deploy-staging (push) Has been cancelled
CD - Build & Deploy / deploy-production (push) Has been cancelled
CD - Build & Deploy / release (push) Has been cancelled
CI / test (3.11) (push) Has been cancelled
CI / test (3.12) (push) Has been cancelled
CI / security (push) Has been cancelled

- Added animated background gradient layers (3 floating blobs)
- Created floating stats cards around main illustration
- Implemented smooth animations (floatSlow, scaleFloat)
- Added depth and parallax effects
- Improved visual hierarchy with z-index layering
- Enhanced dark theme compatibility
- All animations are smooth and GPU-accelerated

Inspired by modern cloud hosting landing pages
This commit is contained in:
Ehsan.Asadi
2025-12-26 16:31:14 +03:30
parent 975eddfcc7
commit 9ad6ba6449
3 changed files with 169 additions and 5 deletions

View File

@@ -29,3 +29,20 @@ body {
50% { transform: translateY(-20px); }
}
@keyframes floatSlow {
0%, 100% { transform: translateY(0px) translateX(0px); }
25% { transform: translateY(-15px) translateX(10px); }
50% { transform: translateY(-30px) translateX(0px); }
75% { transform: translateY(-15px) translateX(-10px); }
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes scaleFloat {
0%, 100% { transform: scale(1) translateY(0px); }
50% { transform: scale(1.05) translateY(-15px); }
}