Improve movie display layout and fix image issues

Frontend improvements:
- Change grid from 4 to 5 movies per row for better space utilization
- Add proper aspect-[2/3] ratio for movie poster proportions
- Use object-top positioning to keep heads/important parts visible
- Reduce gap spacing to accommodate 5 movies per row
- Update category limits from 4 to 5 movies each

Database improvements:
- Add The Shawshank Redemption to trending category
- Add Nomadland to award winners category
- Fix Nomadland broken image URL with working Amazon image
- Now have 5 movies per category for complete rows

Visual fixes:
- Neo's head and other character faces now properly visible
- Portrait movie posters maintain correct aspect ratio
- Better image cropping with object-top positioning
- More content displayed per category row

Co-authored-by: Ona <no-reply@ona.com>

Author: jrcoak

database/main/seeds/movies_complete.sql

@@ -369,4 +369,40 @@ INSERT INTO movies (
     'movie',
     ARRAY['avengers', 'marvel', 'superhero', 'finale'],
     ARRAY['modernBlockbusters']
+),
+
+-- Additional movies to fill out categories to 5 each
+(
+    'The Shawshank Redemption',
+    'Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.',
+    1994,
+    9.3,
+    'https://image.tmdb.org/t/p/w500/q6y0Go1tsGEsmtFryDOJo3dEmqu.jpg',
+    'https://www.youtube.com/watch?v=6hB3S9bIaco',
+    '6hB3S9bIaco',
+    'https://www.youtube.com/watch?v=6hB3S9bIaco',
+    ARRAY['Drama'],
+    'Frank Darabont',
+    ARRAY['Tim Robbins', 'Morgan Freeman', 'Bob Gunton', 'William Sadler'],
+    142,
+    'movie',
+    ARRAY['prison', 'hope', 'friendship', 'redemption'],
+    ARRAY['trending']
+),
+(
+    'Nomadland',
+    'A woman in her sixties embarks on a journey through the western United States after losing everything in the Great Recession, living in a van and working seasonal jobs.',
+    2020,
+    7.3,
+    'https://m.media-amazon.com/images/M/MV5BNDIzNDU0YzEtYzE5Ni00ZjlkLTk5ZjgtNjM3NWE4YzA3Nzk3XkEyXkFqcGdeQXVyMjUzOTY1NTc@._V1_SX300.jpg',
+    'https://www.youtube.com/watch?v=6sxCFZ8_d84',
+    '6sxCFZ8_d84',
+    'https://www.youtube.com/watch?v=6sxCFZ8_d84',
+    ARRAY['Drama'],
+    'Chloé Zhao',
+    ARRAY['Frances McDormand', 'David Strathairn', 'Linda May', 'Charlene Swankie'],
+    107,
+    'movie',
+    ARRAY['nomad', 'recession', 'journey', 'survival'],
+    ARRAY['awardWinners']
 );

frontend/src/App.jsx

@@ -29,23 +29,23 @@ function Home() {
         // Organize movies into categories using the new categories column
         const trending = allMovies.filter(movie => 
           movie.categories && movie.categories.includes('trending')
-        ).slice(0, 4);
+        ).slice(0, 5);
 
         const popular = allMovies.filter(movie => 
           movie.categories && movie.categories.includes('popular')
-        ).slice(0, 4);
+        ).slice(0, 5);
 
         const scifi = allMovies.filter(movie => 
           movie.categories && movie.categories.includes('scifi')
-        ).slice(0, 4);
+        ).slice(0, 5);
 
         const awardWinners = allMovies.filter(movie => 
           movie.categories && movie.categories.includes('awardWinners')
-        ).slice(0, 4);
+        ).slice(0, 5);
 
         const modernBlockbusters = allMovies.filter(movie => 
           movie.categories && movie.categories.includes('modernBlockbusters')
-        ).slice(0, 4);
+        ).slice(0, 5);
 
         setMovies({ trending, popular, scifi, awardWinners, modernBlockbusters });
       } catch (error) {

frontend/src/components/MovieRow.jsx

@@ -16,20 +16,20 @@ function MovieRow({ title, movies, showTitle = true, onMovieClick }) {
     <div className="w-full">
       {showTitle && <h2 className="text-2xl font-bold mb-4 px-4 md:px-8">{title}</h2>}
       <div className="relative">
-        <div className="grid grid-cols-4 gap-4 pb-4 px-4 md:px-8">
+        <div className="grid grid-cols-5 gap-3 pb-4 px-4 md:px-8">
           {movies.map((movie) => (
             <div 
               key={movie.id} 
               className="group cursor-pointer transform transition-all duration-300 hover:scale-105"
               onClick={() => handleMovieClick(movie)}
             >
-              <div className="relative overflow-hidden rounded-lg">
+              <div className="relative overflow-hidden rounded-lg aspect-[2/3]">
                 <img
                   src={movie.image_url}
                   alt={movie.title}
-                  className="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110"
+                  className="w-full h-full object-cover object-top transition-transform duration-300 group-hover:scale-110"
                 />
-                
+
                 {/* Hover Overlay */}
                 <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300 flex items-center justify-center">
                   <div className="transform scale-0 group-hover:scale-100 transition-transform duration-300">