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:
@@ -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 },
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user