improvement(welcome): gallery landing, refreshed copy, name-free screenshots

Rebuild the landing preview into a per-module screenshot gallery (feed hero + channels, playlists, search, player, downloads, Plex), reusing the existing Preview/Lightbox. Rewrite the hero + feature copy in a plainer, concise tone that reflects the current modules (Download Center, Plex, two-way playlists), in EN and HU. Regenerate all screenshots name-free. Bring the README up to date: fix the broken landing image, add the Plex feature, and correct the now-temporary YouTube-search behaviour.
This commit is contained in:
2026-07-29 18:28:51 +02:00
parent 18bfcba4ed
commit 9dc7f80305
11 changed files with 80 additions and 40 deletions
+28 -14
View File
@@ -2,7 +2,9 @@ import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import {
ArrowRight,
Clapperboard,
Code2,
Download,
Expand,
Filter,
Inbox,
@@ -115,20 +117,19 @@ export default function Welcome() {
</div>
</section>
{/* Secondary showcase — smaller thumbnails; click to view full size. */}
<section className="mt-12 flex flex-wrap justify-center gap-4">
<Preview
src="/welcome/channels.webp"
label={t("welcome.preview.channels")}
className="w-full sm:w-72 aspect-[4/3]"
onOpen={open}
/>
<Preview
src="/welcome/playlists.webp"
label={t("welcome.preview.playlists")}
className="w-full sm:w-72 aspect-[4/3]"
onOpen={open}
/>
{/* Gallery — one shot per module; click any to view it full size. */}
<section className="mt-12">
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
{GALLERY.map((g) => (
<Preview
key={g.key}
src={g.src}
label={t(`welcome.preview.${g.key}`)}
className="aspect-video"
onOpen={open}
/>
))}
</div>
</section>
</main>
@@ -159,12 +160,25 @@ export default function Welcome() {
);
}
// The screenshot gallery below the hero — one shot per module, each opening full-size in the
// lightbox. Order roughly follows the nav rail; the feed leads as the hero above the fold.
const GALLERY: { key: string; src: string }[] = [
{ key: "channels", src: "/welcome/channels.webp" },
{ key: "playlists", src: "/welcome/playlists.webp" },
{ key: "search", src: "/welcome/search.webp" },
{ key: "player", src: "/welcome/player.webp" },
{ key: "downloads", src: "/welcome/downloads.webp" },
{ key: "plex", src: "/welcome/plex.webp" },
];
const FEATURES: { key: string; icon: LucideIcon }[] = [
{ key: "readable", icon: Filter },
{ key: "neverMiss", icon: Inbox },
{ key: "search", icon: Search },
{ key: "playlists", icon: ListVideo },
{ key: "player", icon: PlayCircle },
{ key: "downloads", icon: Download },
{ key: "plex", icon: Clapperboard },
{ key: "private", icon: Lock },
];