feat: Add visual improvements and aesthetic enhancements

- Enhanced index.css with glassmorphism, gradient mesh, shimmer loading
- Added new Tailwind animations (scale-in, bounce-subtle, glow-pulse)
- Updated Header with animated connection indicator
- Enhanced ResultsCard and GAResultsCard with premium loading effects
- Added App.tsx gradient mesh background

frontend/src/App.tsx

@@ -54,7 +54,7 @@ function App() {
 
   return (
     <ImageProvider>
-      <div className="h-screen flex flex-col bg-dark-bg overflow-hidden">
+      <div className="h-screen flex flex-col bg-dark-bg gradient-mesh overflow-hidden">
         {/* Header - fixed height */}
         <Header isConnected={isConnected} feedbackStats={feedbackStats} />
 

frontend/src/components/GAResultsCard.tsx

@@ -15,16 +15,16 @@ const BIOMETRY_LABELS: Record<string, string> = {
 export function GAResultsCard({ results, isLoading }: GAResultsCardProps) {
   if (isLoading) {
     return (
-      <div className="space-y-3 animate-pulse">
+      <div className="space-y-3">
         <div className="bg-white border border-dark-border rounded-xl p-4 shadow-card">
-          <div className="h-3 w-24 bg-dark-input rounded mb-2" />
-          <div className="h-8 w-40 bg-dark-input rounded" />
+          <div className="h-3 w-24 shimmer-premium rounded mb-2" />
+          <div className="h-8 w-40 shimmer-premium rounded" />
         </div>
         <div className="bg-white border border-dark-border rounded-xl p-4 shadow-card">
-          <div className="h-3 w-40 bg-dark-input rounded mb-3" />
+          <div className="h-3 w-40 shimmer-premium rounded mb-3" />
           <div className="grid grid-cols-3 gap-2">
             {[...Array(3)].map((_, i) => (
-              <div key={i} className="h-16 bg-dark-input rounded-lg" />
+              <div key={i} className="h-16 shimmer-premium rounded-lg" style={{ animationDelay: `${i * 100}ms` }} />
             ))}
           </div>
         </div>
@@ -56,7 +56,7 @@ export function GAResultsCard({ results, isLoading }: GAResultsCardProps) {
   else if (results.femur_length) biometryLabel = BIOMETRY_LABELS.femur_length;
 
   return (
-    <div className="space-y-3 animate-fade-in">
+    <div className="space-y-3 animate-scale-in">
       {/* Gestational Age */}
       <div className="bg-gradient-to-r from-nvidia-green/10 to-nvidia-green/5 border border-nvidia-green/20 rounded-xl p-4 shadow-card">
         <p className="text-[10px] uppercase tracking-wider text-text-muted mb-1">
@@ -72,7 +72,7 @@ export function GAResultsCard({ results, isLoading }: GAResultsCardProps) {
 
       {/* Biometry Percentiles - Dynamic based on view */}
       {biometryData && (
-        <div className="bg-white border border-dark-border rounded-xl p-4 shadow-card">
+        <div className="bg-white border border-dark-border rounded-xl p-4 shadow-card card-interactive">
           <p className="text-[10px] uppercase tracking-wider text-text-muted mb-3">
             {biometryLabel} Percentiles
           </p>

frontend/src/components/Header.tsx

@@ -43,15 +43,19 @@ export function Header({ isConnected, feedbackStats }: HeaderProps) {
               )}
             </div>
           )}
-          
+
           <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-dark-input border border-dark-border">
-            <div
-              className={`w-2 h-2 rounded-full transition-colors ${
-                isConnected 
-                  ? 'bg-nvidia-green shadow-[0_0_8px_rgba(118,185,0,0.5)]' 
-                  : 'bg-red-500 animate-pulse'
-              }`}
-            />
+            <div className="relative">
+              <div
+                className={`w-2 h-2 rounded-full transition-colors ${isConnected
+                    ? 'bg-nvidia-green animate-glow-pulse'
+                    : 'bg-red-500 animate-pulse'
+                  }`}
+              />
+              {isConnected && (
+                <div className="absolute inset-0 rounded-full bg-nvidia-green/30 animate-ping" style={{ animationDuration: '2s' }} />
+              )}
+            </div>
             <span className="text-xs text-text-secondary">
               {isConnected ? 'Model Ready' : 'Connecting...'}
             </span>

frontend/src/components/ResultsCard.tsx

@@ -11,19 +11,19 @@ interface ResultsCardProps {
 export function ResultsCard({ results, isLoading, confidenceThreshold = 70 }: ResultsCardProps) {
   if (isLoading) {
     return (
-      <div className="space-y-3 animate-pulse">
+      <div className="space-y-3">
         <div className="bg-white border border-dark-border rounded-xl p-4 shadow-card">
-          <div className="h-3 w-20 bg-dark-input rounded mb-2" />
-          <div className="h-6 w-40 bg-dark-input rounded" />
+          <div className="h-3 w-20 shimmer-premium rounded mb-2" />
+          <div className="h-6 w-40 shimmer-premium rounded" />
         </div>
         <div className="bg-white border border-dark-border rounded-xl p-4 shadow-card space-y-2">
           {[...Array(5)].map((_, i) => (
-            <div key={i} className="space-y-1">
+            <div key={i} className="space-y-1" style={{ animationDelay: `${i * 100}ms` }}>
               <div className="flex justify-between">
-                <div className="h-3 w-20 bg-dark-input rounded" />
-                <div className="h-3 w-10 bg-dark-input rounded" />
+                <div className="h-3 w-20 shimmer-premium rounded" />
+                <div className="h-3 w-10 shimmer-premium rounded" />
               </div>
-              <div className="h-2 bg-dark-input rounded" />
+              <div className="h-2 shimmer-premium rounded" />
             </div>
           ))}
         </div>
@@ -43,24 +43,23 @@ export function ResultsCard({ results, isLoading, confidenceThreshold = 70 }: Re
   const isLowConfidence = topResult.confidence < confidenceThreshold;
 
   return (
-    <div className="space-y-3 animate-fade-in">
+    <div className="space-y-3 animate-scale-in">
       {/* Low Confidence Warning */}
       {isLowConfidence && (
         <div className="flex items-start gap-2 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
           <AlertTriangle className="w-4 h-4 text-yellow-600 flex-shrink-0 mt-0.5" />
           <div className="text-xs text-yellow-800">
-            <span className="font-semibold">Low Confidence:</span> The model is uncertain about this prediction. 
+            <span className="font-semibold">Low Confidence:</span> The model is uncertain about this prediction.
             Please verify manually and provide feedback.
           </div>
         </div>
       )}
 
       {/* Top Prediction */}
-      <div className={`bg-gradient-to-r ${
-        isLowConfidence 
-          ? 'from-yellow-50 to-yellow-50/50 border-yellow-200' 
+      <div className={`bg-gradient-to-r ${isLowConfidence
+          ? 'from-yellow-50 to-yellow-50/50 border-yellow-200'
           : 'from-nvidia-green/10 to-nvidia-green/5 border-nvidia-green/20'
-      } border rounded-xl p-4 shadow-card`}>
+        } border rounded-xl p-4 shadow-card`}>
         <p className="text-[10px] uppercase tracking-wider text-text-muted mb-1">
           Top Prediction
         </p>
@@ -70,9 +69,8 @@ export function ResultsCard({ results, isLoading, confidenceThreshold = 70 }: Re
           </span>
           <div className="flex items-center gap-1.5">
             {isLowConfidence && <AlertTriangle className="w-4 h-4 text-yellow-600" />}
-            <span className={`text-lg font-semibold ${
-              isLowConfidence ? 'text-yellow-700' : 'text-text-primary'
-            }`}>
+            <span className={`text-lg font-semibold ${isLowConfidence ? 'text-yellow-700' : 'text-text-primary'
+              }`}>
               {topResult.confidence.toFixed(1)}%
             </span>
           </div>
@@ -80,7 +78,7 @@ export function ResultsCard({ results, isLoading, confidenceThreshold = 70 }: Re
       </div>
 
       {/* All Predictions */}
-      <div className="bg-white border border-dark-border rounded-xl p-4 shadow-card">
+      <div className="bg-white border border-dark-border rounded-xl p-4 shadow-card card-interactive">
         <p className="text-[10px] uppercase tracking-wider text-text-muted mb-3">
           All Predictions
         </p>
@@ -95,8 +93,8 @@ export function ResultsCard({ results, isLoading, confidenceThreshold = 70 }: Re
               </div>
               <div className="h-2 bg-dark-input rounded-full overflow-hidden">
                 <div
-                  className="h-full bg-gradient-to-r from-nvidia-green to-nvidia-green-hover rounded-full transition-all duration-500"
-                  style={{ width: `${result.confidence}%` }}
+                  className="h-full bg-gradient-to-r from-nvidia-green to-nvidia-green-hover rounded-full result-bar-animated"
+                  style={{ width: `${result.confidence}%`, animationDelay: `${index * 80}ms` }}
                 />
               </div>
             </div>

frontend/src/index.css

@@ -52,6 +52,7 @@ body {
   0% {
     background-position: -200% 0;
   }
+
   100% {
     background-position: 200% 0;
   }
@@ -59,16 +60,103 @@ body {
 
 .animate-shimmer {
   animation: shimmer 2s infinite;
-  background: linear-gradient(
-    90deg,
-    #f1f5f9 0%,
-    #e2e8f0 50%,
-    #f1f5f9 100%
-  );
+  background: linear-gradient(90deg,
+      #f1f5f9 0%,
+      #e2e8f0 50%,
+      #f1f5f9 100%);
   background-size: 200% 100%;
 }
 
 /* Smooth transitions globally */
-button, a, input, [role="button"] {
+button,
+a,
+input,
+[role="button"] {
   transition: all 0.15s ease;
 }
+
+/* Enhanced glassmorphism panels */
+.glass-panel {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Subtle gradient mesh background */
+.gradient-mesh {
+  background:
+    radial-gradient(at 40% 20%, rgba(118, 185, 0, 0.03) 0px, transparent 50%),
+    radial-gradient(at 80% 0%, rgba(14, 165, 233, 0.03) 0px, transparent 50%),
+    radial-gradient(at 0% 50%, rgba(118, 185, 0, 0.02) 0px, transparent 50%),
+    #f8fafc;
+}
+
+/* Premium shimmer loading effect */
+.shimmer-premium {
+  background: linear-gradient(90deg,
+      #f1f5f9 0%,
+      #f8fafc 25%,
+      #e2e8f0 50%,
+      #f8fafc 75%,
+      #f1f5f9 100%);
+  background-size: 400% 100%;
+  animation: shimmer 2s ease-in-out infinite;
+}
+
+/* Card interactive hover effect */
+.card-interactive {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card-interactive:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
+}
+
+/* Subtle glow effect */
+.glow-nvidia {
+  box-shadow: 0 0 20px rgba(118, 185, 0, 0.15);
+}
+
+/* Smooth image transition */
+.image-preview {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.image-preview:hover {
+  transform: scale(1.02);
+}
+
+/* Result bar fill animation */
+@keyframes fillBar {
+  from {
+    width: 0%;
+  }
+}
+
+.result-bar-animated {
+  animation: fillBar 0.6s ease-out forwards;
+}
+
+/* Pulse ring for connection indicator */
+@keyframes pulseRing {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+.pulse-ring::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  animation: pulseRing 1.5s ease-out infinite;
+}

frontend/tailwind.config.js

@@ -45,6 +45,9 @@ export default {
         'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
         'fade-in': 'fadeIn 0.3s ease-out',
         'slide-up': 'slideUp 0.3s ease-out',
+        'scale-in': 'scaleIn 0.3s ease-out',
+        'bounce-subtle': 'bounceSubtle 0.4s ease-out',
+        'glow-pulse': 'glowPulse 2s ease-in-out infinite',
       },
       keyframes: {
         fadeIn: {
@@ -55,6 +58,19 @@ export default {
           '0%': { opacity: '0', transform: 'translateY(10px)' },
           '100%': { opacity: '1', transform: 'translateY(0)' },
         },
+        scaleIn: {
+          '0%': { opacity: '0', transform: 'scale(0.95)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+        bounceSubtle: {
+          '0%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-3px)' },
+          '100%': { transform: 'translateY(0)' },
+        },
+        glowPulse: {
+          '0%, 100%': { boxShadow: '0 0 8px rgba(118, 185, 0, 0.4)' },
+          '50%': { boxShadow: '0 0 16px rgba(118, 185, 0, 0.6)' },
+        },
       },
     },
   },