feat: add floating animation to dashboard preview and implement 3D transform utilities for enhanced visual effects

app/page.tsx

@@ -17,6 +17,8 @@ function DashboardPreview() {
       {/* * Glow behind the image */}
       <div className="absolute inset-0 bg-brand-orange/20 blur-[100px] -z-10 rounded-full opacity-50" />
       
+      {/* * Floating Wrapper */}
+      <div className="animate-float">
         {/* * The Dashboard Image Container */}
         <div className="relative rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 bg-neutral-900/50 backdrop-blur-sm shadow-2xl transform rotate-x-12 hover:rotate-x-0 transition-transform duration-700 ease-out overflow-hidden">
           {/* * Header of the fake browser window */}
@@ -35,6 +37,7 @@ function DashboardPreview() {
           </div>
         </div>
       </div>
+    </div>
   )
 }
 

styles/globals.css

@@ -52,4 +52,31 @@
   .glow-orange {
     box-shadow: 0 0 40px -10px rgba(253, 94, 15, 0.5);
   }
+
+  /* * 3D Transform Utilities */
+  .perspective-1000 {
+    perspective: 1000px;
+  }
+  
+  .rotate-x-12 {
+    transform: rotateX(12deg);
+  }
+  
+  .rotate-x-0 {
+    transform: rotateX(0deg);
+  }
+  
+  .transform-style-3d {
+    transform-style: preserve-3d;
+  }
+
+  /* * Animations */
+  @keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+  }
+
+  .animate-float {
+    animation: float 6s ease-in-out infinite;
+  }
 }