feat: Redesign both hero sections with BluisHost-inspired floating elements

Hero 1 (Main):
- Added 5 floating tech icons (server, database, cloud, shield, lightning)
- BluisHost-style layered composition with central person illustration
- Staggered animations with unique timing for each element
- Blue brand color scheme maintained

Hero 2 (WordPress Cloud):
- Redesigned with central WordPress/code icon as focal point
- Added 6 floating WordPress ecosystem icons (shield, cloud, zap, package, database, settings)
- Repositioned 3 stats cards (99.9%, 10x, 24/7) around edges
- Orange/gold theme for clear visual distinction
- More organic layout matching Hero 1 style

Animations:
- Added new CSS keyframes: floatComplex, rotateSubtle, scaleBreath, floatDiagonal, bobFloat
- Each element has unique animation timing and duration
- GPU-accelerated CSS animations for smooth performance

Both sections now have distinct visual identities while maintaining consistent floating element design language
This commit is contained in:
Ehsan.Asadi
2025-12-26 18:35:53 +03:30
parent c9de09bc9a
commit f2a669f295
3 changed files with 357 additions and 114 deletions

View File

@@ -79,3 +79,56 @@ body {
}
}
@keyframes floatComplex {
0%, 100% {
transform: translateY(0px) translateX(0px) rotate(0deg);
}
25% {
transform: translateY(-20px) translateX(15px) rotate(5deg);
}
50% {
transform: translateY(-35px) translateX(5px) rotate(-3deg);
}
75% {
transform: translateY(-18px) translateX(-12px) rotate(4deg);
}
}
@keyframes rotateSubtle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes scaleBreath {
0%, 100% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.1);
opacity: 0.9;
}
}
@keyframes floatDiagonal {
0%, 100% {
transform: translate(0, 0);
}
50% {
transform: translate(-25px, -25px);
}
}
@keyframes bobFloat {
0%, 100% {
transform: translateY(0px) scale(1);
}
50% {
transform: translateY(-25px) scale(1.05);
}
}