Customization options for start page's background

[danburonline]

Fixes #3761

Description

• I have updated the documentation for Nexus and included example screenshots. You can find the pull request here.
• The background video was implemented, but it did not play in the production version due to an issue with the Webpack configuration. This issue has been fixed.
• Instead of using a video cover, I have replaced it with a backup image using the source tag. This prevents flickering of the background by loading the image first.
• The PNG logo on the top left has been replaced with an SVG logo, including fine-tuned adjustments to the spacing.
• I replaced the logo with the correct version that has the HEX codes from the Fusion codebase, as the previous logo had incorrect colors due to being an old version.
• I have compressed the images using the Guetzli algorithm, reducing their file size by a few KBs.
• The background video has been compressed using proper dynamic H264 bitrate compression, resulting in a significantly smaller file size.
  I removed the last two frames of the background video. It appears that they were cut right before another movement, causing slight blur but no movement. The video now loops more smoothly.
• I have fixed some typos in all the files I worked on.
• The TypeScript imports have been automatically ordered using my ESLint addon. I am considering adding an ESLint rule for the codebase in the future and transitioning from TSLint to ESLint, as TSLint is deprecated.
• Markdown errors have been corrected.
• Alt attributes have been added to the images in the files I worked on.
• The order of HTML tags on the landing page has been changed to make the logo on the top left clickable and improve loading priorities, with the video being loaded last.
• Semantic HTML tags have been used instead of <div>.
• The Connect button now has a different cursor when there are no Realms set up.
• A lang attribute and read direction have been added to the root HTML, as the Helmet settings were not working.
• The missing LOGO_LINK environment variable has been set up to make the logo clickable.
• Ensure that the cover image, background image, and all other banner images do not get squeezed when the browser window is resized. Here's a "before and after" comparison:
  

How has this been tested?

• Tested it locally on my laptop via the development server and prod build. I didn't do any functional changes. Tests pass.

Types of changes

• Bug fix (non-breaking change which fixes an issue)

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added screenshots (if applicable), in the comment section.

[codecov-commenter]

Codecov Report

Attention: 1 lines in your changes are missing coverage. Please review.

Comparison is base (5db9678) 47.99% compared to head (b2672eb) 48.05%.
Report is 3 commits behind head on develop.

Files	Patch %	Lines
src/shared/store/actions/search.ts	50.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #1437      +/-   ##
===========================================
+ Coverage    47.99%   48.05%   +0.05%     
===========================================
  Files          249      249              
  Lines        11362    11365       +3     
  Branches      2655     2655              
===========================================
+ Hits          5453     5461       +8     
+ Misses        5876     5870       -6     
- Partials        33       34       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Dinika]

Looks great too :)

[bilalesi]

nice PR 🎆

[olivergrabinski]

Ensure that the cover image, background image, and all other banner images do not get squeezed when the browser window is resized. Here's a "before and after" comparison

🤩