Create initial components for rendering the landing page #11

🚀 Description

Enhancements to App.tsx

This pull request introduces substantial enhancements to the App.tsx component within the OwnTube.tv web client, focusing on refining the architecture for efficient video content management. It adds new components, updates service logic, and upgrades dependencies, aimed at improving the user interface's responsiveness and overall application performance.

New Components

MainPageComponent: Serves as a vertically scrolling container that acts as the central framework for the landing page.
VideoCategoryPreviewComponent: Offers a horizontally scrollable view that displays video thumbnails, providing a sneak peek at various video categories.
VideoThumbnailComponent: Displays detailed information for each video, including its thumbnail, title, and category.

Integration and Styling

Service Integration: The updates include integration with VideoService to ensure dynamic data display, enhancing the interactivity of the UI.
Styling Framework: Initiation of a styling framework that sets the groundwork for future theming capabilities, aligning with our project goals.

📄 Motivation and Context

The updates are driven by the necessity to develop a responsive and interactive user interface for the OwnTube.tv web client, as detailed in GitHub issue #11. The revisions adopt a structured method for processing video content, enhancing both the performance of the application and the user interaction.

🧪 How Has This Been Tested?

The updates have undergone extensive testing, including:

Unit Testing: Executed unit tests in videoServices.test.tsx to confirm the new data fetching logic functions as intended.
Manual Testing: Verified that the UI renders correctly and dynamically adapts to changes in data and screen dimensions within a development environment.
Code Quality Tools: Ensured compliance with coding standards and consistency utilizing ESLint and Prettier.

📷 Screenshots (if appropriate)

View screenshots or GIFs here to visualize the updates to the user interface, providing a clearer understanding of the implemented features.

📦 Types of changes

[x] New Features: Introduces functionalities that enhance the application's capabilities.
[x] Bug Fixes: Implements corrections that improve the operation of existing functionalities.
[x] Breaking Changes: Introduces updates that may impact current functionalities unexpectedly.

✅ Checklist (copied from README)

[x] Squash your changes into a single clear and thoroughly descriptive commit, split changes into multiple commits only when it contributes to readability
[x] Reference the GitHub issue that you are contributing on in your commit title or body
[x] Sign your commits, as this is required by the automated GitHub PR checks
[x] Ensure that the changes adhere to the project code style and formatting rules by running npx eslint . and npx prettier --check ../ from the ./OwnTube.tv/ directory (without errors/warnings)
[x] Include links and illustrations in your pull request to make it easy to review
[x] Request a review by @ar9708, @OGTor, @tryklick and @mblomdahl

OwnTube-tv / web-client