feat: implement debounced live search with clear button, refactor UI components, and adjust layout spacing and image cropping across screens.

lib/features/home/presentation/widgets/top_professionals_section.dart

@@ -105,9 +105,10 @@ class _TopProfessionalsSectionState
             _buildEmptyState(_activeTab)
           else ...[
             // Professional Cards - horizontal scroll
-            // Use screen-relative height so cards fit on all devices
+            // Use screen-relative height so cards fit on all devices.
+            // Bumped to 0.72 to fit the taller image (300) + content area.
             SizedBox(
-              height: MediaQuery.of(context).size.height * 0.64,
+              height: MediaQuery.of(context).size.height * 0.72,
               child: ListView.builder(
                 // Unique key per tab forces Flutter to rebuild (not reuse)
                 // the list items, preventing stale images from the other tab.
@@ -318,10 +319,12 @@ class _TopProfessionalsSectionState
         crossAxisAlignment: CrossAxisAlignment.start,
         mainAxisSize: MainAxisSize.min,
         children: [
-          // Image (226px per Figma)
+          // Image — taller box for portrait photos so faces aren't cropped.
+          // Uses topCenter alignment as a fallback when the photo is much
+          // taller than the box (crops bottom, keeps the face visible).
           SizedBox(
             width: double.infinity,
-            height: 226,
+            height: 300,
             child: ClipRRect(
               borderRadius: const BorderRadius.vertical(
                 top: Radius.circular(15),
@@ -334,9 +337,9 @@ class _TopProfessionalsSectionState
                       key: ValueKey('${_activeTab}_$imageUrl'),
                       imageUrl: imageUrl,
                       width: double.infinity,
-                      height: 226,
+                      height: 300,
                       fit: BoxFit.cover,
-                      alignment: Alignment.topCenter,
+                      alignment: const Alignment(0, -0.4),
                       errorWidget: (_) => _buildImagePlaceholder(index),
                     )
                   : _buildImagePlaceholder(index),
@@ -569,7 +572,7 @@ class _TopProfessionalsSectionState
             children: [
               // Image placeholder
               Container(
-                height: 226,
+                height: 300,
                 decoration: const BoxDecoration(
                   color: Colors.white,
                   borderRadius: BorderRadius.vertical(top: Radius.circular(15)),