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:
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user