Add dynamic and engaging search bar placeholders

Enhance search bar experience with 15 dynamic placeholders for the movie web app. Provides a mix of engaging questions and suggestions, promoting user interaction and a personalized feel. Shuffled for a random appearance, contributing to a more dynamic user experience.

src/assets/locales/en.json

@@ -116,7 +116,26 @@
       "failed": "Failed to find media, try again!",
       "loading": "Loading...",
       "noResults": "We couldn't find anything!",
-      "placeholder": "What do you want to watch?",
+      "placeholder": {
+        "default": "What do you want to watch?",
+        "extra": [
+          "What's on your movie radar today?",
+          "What's your cinematic preference today?",
+          "What kind of entertainment are you seeking?",
+          "What's your ideal movie or series right now?",
+          "What do you want to explore in the film world?",
+          "What's on your watchlist for today?",
+          "What movie or series piques your interest?",
+          "What's your desired film experience at the moment?",
+          "What are you in the mood to watch?",
+          "Looking for a classic or something new?",
+          "Any specific mood you're in for your watch?",
+          "In the mood for a thrilling adventure or a cozy drama?",
+          "Searching for your favorite entertainment?",
+          "Interested in recent releases or timeless classics?",
+          "Prefer a short movie night or a binge-watching session?"
+        ]
+      },
       "sectionTitle": "Search results"
     },
     "titles": {

src/pages/parts/home/HeroPart.tsx

@@ -54,7 +54,7 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
 
   const time = getTimeOfDay(new Date());
   const title = randomT(`home.titles.${time}`);
-
+  const placeholder = randomT(`home.search.placeholder`);
   const inputRef = useRef<HTMLInputElement>(null);
   useSlashFocus(inputRef);
 
@@ -77,7 +77,7 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
               onChange={setSearch}
               value={search}
               onUnFocus={setSearchUnFocus}
-              placeholder={t("home.search.placeholder") ?? ""}
+              placeholder={placeholder ?? ""}
             />
           </Sticky>
         </div>