✨ Enhance Wall of Love component with user image handling and improved layout

Author: HassanZahirnia

resources/views/components/wall-of-love/early-adopter-card.blade.php

@@ -4,10 +4,11 @@
     'url' => '',
     'image' => '',
     'featured' => false,
+    'hasUserImage' => false,
 ])
 
 <article
-    class="group mt-3 inline-block break-inside-avoid overflow-hidden rounded-2xl text-center transition duration-300 ease-out will-change-transform hover:scale-102 xl:mt-5"
+    class="group w-full break-inside-avoid overflow-hidden rounded-2xl text-center transition duration-300 ease-out will-change-transform not-last:mb-3 hover:scale-102 xl:not-last:mb-5"
     itemscope
 >
     <figure class="grid">
@@ -32,7 +33,7 @@ class="capitalize transition duration-300 ease-out will-change-transform group-h
                 </h3>
                 <p
                     @class([
-                        'opacity-50',
+                        'truncate opacity-50',
                         'text-sm' => $featured,
                         'text-xs' => ! $featured,
                     ])
@@ -53,9 +54,10 @@ class="capitalize transition duration-300 ease-out will-change-transform group-h
             decoding="async"
             itemprop="image"
             @class([
-                'relative z-10 self-center justify-self-center object-cover brightness-80 transition duration-300 [grid-area:1/-1] group-hover:brightness-100',
+                'relative z-10 w-full self-center justify-self-center object-cover brightness-80 transition duration-300 [grid-area:1/-1] group-hover:brightness-100',
                 'aspect-[1/1.3] xl:aspect-[1/1.5]' => $featured,
                 'aspect-square max-h-50 xl:max-h-none' => ! $featured,
+                'grayscale-50 dark:brightness-50' => ! $hasUserImage,
             ])
         />
 

resources/views/wall-of-love.blade.php

@@ -116,17 +116,24 @@ class="mx-auto mt-5 max-w-2xl text-center text-base/relaxed text-gray-600 sm:tex
             ->inRandomOrder()
             ->get();
 
+        // Check if any submissions have user-uploaded images
+        $hasAnyUserImages = $approvedSubmissions->contains(fn ($s) => ! empty($s->photo_path));
+
         // Convert approved submissions to the format expected by the component
         $earlyAdopters = $approvedSubmissions
-            ->map(function ($submission) {
+            ->map(function ($submission) use ($hasAnyUserImages) {
+                $hasUserImage = ! empty($submission->photo_path);
+
                 return [
                     'name' => $submission->name,
                     'title' => $submission->company,
                     'url' => $submission->url,
-                    'image' => $submission->photo_path
+                    'image' => $hasUserImage
                         ? asset('storage/' . $submission->photo_path)
-                        : 'https://avatars.laravel.cloud/' . rand(1, 70) . '?vibe=' . array_rand(['ocean', 'crystal', 'bubble', 'forest', 'sunset']),
-                    'featured' => rand(0, 4) === 0, // Randomly feature about 20% of submissions
+                        : 'https://avatars.laravel.cloud/' . rand(1, 70) . '?vibe=' . array_rand(['ocean', 'stealth', 'bubble', 'ice']),
+                    'hasUserImage' => $hasUserImage,
+                    // Only allow featured if has user image (unless no submissions have images)
+                    'featured' => ($hasAnyUserImages ? $hasUserImage : true) && rand(0, 4) === 0,
                     'testimonial' => $submission->testimonial,
                 ];
             })
@@ -144,6 +151,7 @@ class="relative z-10 mt-10 grid place-items-center 2xs:block 2xs:columns-[10rem]
                     :url="$adopter['url'] ?? null"
                     :title="$adopter['title'] ?? null"
                     :featured="$adopter['featured'] ?? false"
+                    :hasUserImage="$adopter['hasUserImage'] ?? false"
                 />
             @endforeach
         </div>