feat: update hero section with new design elements, including enhanced padding, background gradients, and animated glowing orbs for improved visual appeal and engagement

themes/default/views/home.blade.php

@@ -96,10 +96,11 @@
 /* Hero Section */
 .hero {
     position: relative;
-    padding-top: clamp(3rem, 8vw, 5rem);
-    padding-bottom: clamp(3rem, 8vw, 5rem);
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #8b5cf6 100%);
+    padding-top: clamp(4rem, 10vw, 7rem);
+    padding-bottom: clamp(5rem, 12vw, 9rem);
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #0f172a 100%);
     overflow: hidden;
+    border-bottom: 1px solid rgba(59, 130, 246, 0.3);
 }
 
 .hero::before {
@@ -109,19 +110,34 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.15) 0%, transparent 50%),
-                radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 50%),
-                radial-gradient(circle at 50% 20%, rgba(139, 92, 246, 0.3) 0%, transparent 40%);
+    background: 
+        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59, 130, 246, 0.3) 0%, transparent 50%),
+        radial-gradient(ellipse 60% 40% at 100% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
+        radial-gradient(ellipse 60% 40% at 0% 50%, rgba(6, 182, 212, 0.15) 0%, transparent 50%);
     pointer-events: none;
 }
 
+.hero-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
+    background-size: 50px 50px;
+    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 100%);
+    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 100%);
+}
+
 .hero::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
-    height: 100px;
+    height: 150px;
     background: linear-gradient(to bottom, transparent, var(--color-bg-base));
     pointer-events: none;
 }
@@ -174,6 +190,57 @@
     }
 }
 
+/* Animated Glowing Orbs */
+.hero-orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(80px);
+    pointer-events: none;
+    animation: orb-float 20s ease-in-out infinite;
+}
+
+.hero-orb-1 {
+    width: 400px;
+    height: 400px;
+    background: rgba(59, 130, 246, 0.4);
+    top: -100px;
+    right: 10%;
+    animation-delay: 0s;
+}
+
+.hero-orb-2 {
+    width: 300px;
+    height: 300px;
+    background: rgba(139, 92, 246, 0.3);
+    bottom: -50px;
+    left: 5%;
+    animation-delay: -7s;
+}
+
+.hero-orb-3 {
+    width: 250px;
+    height: 250px;
+    background: rgba(6, 182, 212, 0.25);
+    top: 40%;
+    left: 30%;
+    animation-delay: -14s;
+}
+
+@keyframes orb-float {
+    0%, 100% {
+        transform: translate(0, 0) scale(1);
+    }
+    25% {
+        transform: translate(30px, -30px) scale(1.1);
+    }
+    50% {
+        transform: translate(-20px, 20px) scale(0.95);
+    }
+    75% {
+        transform: translate(20px, 30px) scale(1.05);
+    }
+}
+
 .hero-content {
     position: relative;
     z-index: 1;
@@ -2415,6 +2482,14 @@
 <div id="home">
     <!-- Hero Section -->
     <header class="hero">
+        <!-- Grid Background -->
+        <div class="hero-grid"></div>
+        
+        <!-- Animated Orbs -->
+        <div class="hero-orb hero-orb-1"></div>
+        <div class="hero-orb hero-orb-2"></div>
+        <div class="hero-orb hero-orb-3"></div>
+        
         <!-- Animated Particles -->
         <div class="hero-particles">
             <div class="hero-particle"></div>