feat: better mobile view + compressed image

[weebao]

No description provided.

[Copilot]

Pull Request Overview

This PR enhances the mobile layout, adds a compressed video thumbnail with modal dialog, and updates the GSAP dependency.

• Introduces a modal dialog for the “How to play?” video using an optimized thumbnail and play icon.
• Refines spacing, typography, and breakpoint utilities for better mobile responsiveness.
• Adjusts Navbar logo sizing utilities and bumps GSAP from v3.12.5 to v3.13.0.

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

File	Description
src/routes/+page.svelte	Added Dialog-based video modal, imported Play icon and VideoImg, tweaked spacing and typography classes for mobile
src/lib/components/main/navbar/navbar.svelte	Modified LogoHorizontal sizing classes to constrain min-width/height
package.json	Upgraded "gsap" dependency from ^3.12.5 to ^3.13.0

Comments suppressed due to low confidence (3)

src/routes/+page.svelte:163

• The dialog trigger should expose an accessible name or role. Add aria-label="Open tutorial video" or wrap the trigger in a native <button> to ensure screen-reader users can identify and activate it.

<Dialog.Trigger class="group relative mx-auto max-w-xl cursor-pointer rounded-lg shadow-lg transition-transform">

src/routes/+page.svelte:162

• [nitpick] The new video dialog feature isn't covered by automated tests. Consider adding component or integration tests to verify that the dialog opens, displays the iframe, and can be closed as expected.

<Dialog.Root>

src/lib/components/main/navbar/navbar.svelte:27

• The utility class min-w-28 is not a default Tailwind CSS utility. If the goal is a 7rem minimum width, consider using an explicit arbitrary value like min-w-[7rem] or adjust to a valid spacing utility. Similarly verify that min-h-6 maps to an existing min-height utility.

<LogoHorizontal class="h-full min-h-6 w-full min-w-28" />