improvement(welcome): prominent open-source callout in the page body

Add an accent-tinted 'Free and open source' band between the app preview and the feature grid
— a short line about reading the code / self-hosting / filing an issue, linking to the public
repo. The compact footer link stays. Trilingual.
This commit is contained in:
npeter83 2026-07-02 02:14:27 +02:00
parent d560825685
commit df09b49c0c
4 changed files with 39 additions and 0 deletions

View file

@ -1,6 +1,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import {
ArrowRight,
Code2, Code2,
Expand, Expand,
Filter, Filter,
@ -64,6 +65,29 @@ export default function Welcome() {
onOpen={open} onOpen={open}
/> />
{/* Open source Siftlode's code is public; nudge visitors to read it or self-host. The
footer keeps a compact link too. */}
<a
href={REPO_URL}
target="_blank"
rel="noopener noreferrer"
className="group mt-8 flex flex-col items-center gap-x-4 gap-y-2 rounded-2xl border border-accent/25 bg-accent/[0.06] px-5 py-4 text-center sm:flex-row sm:text-left hover:border-accent/50 transition"
>
<span className="grid place-items-center w-10 h-10 rounded-xl bg-accent/15 text-accent shrink-0">
<Code2 className="w-5 h-5" />
</span>
<span className="flex-1">
<span className="block font-semibold">{t("welcome.openSource.title")}</span>
<span className="block text-sm text-muted leading-relaxed">
{t("welcome.openSource.body")}
</span>
</span>
<span className="inline-flex items-center gap-1 text-sm font-medium text-accent whitespace-nowrap">
{t("welcome.openSource.link")}
<ArrowRight className="w-4 h-4 transition group-hover:translate-x-0.5" />
</span>
</a>
{/* Features */} {/* Features */}
<section className="mt-14"> <section className="mt-14">
<h2 className="text-2xl font-semibold text-center">{t("welcome.features.heading")}</h2> <h2 className="text-2xl font-semibold text-center">{t("welcome.features.heading")}</h2>

View file

@ -4,6 +4,11 @@
"subtitle": "Jeder Upload der Kanäle, denen du folgst, in einem aufgeräumten, filterbaren Feed — kein Algorithmus entscheidet, was du siehst, und kein Shorts- oder Livestream-Lärm, außer du willst es.", "subtitle": "Jeder Upload der Kanäle, denen du folgst, in einem aufgeräumten, filterbaren Feed — kein Algorithmus entscheidet, was du siehst, und kein Shorts- oder Livestream-Lärm, außer du willst es.",
"trust": "Selbst gehostet und privat. Melde dich per E-Mail an oder fahre mit Google fort." "trust": "Selbst gehostet und privat. Melde dich per E-Mail an oder fahre mit Google fort."
}, },
"openSource": {
"title": "Kostenlos und quelloffen",
"body": "Der Code von Siftlode ist öffentlich — sieh nach, wie es funktioniert, betreibe deine eigene private Instanz oder melde ein Problem.",
"link": "Quellcode ansehen"
},
"preview": { "preview": {
"feed": "Der Feed — filtern nach Kanal, Sprache, Thema, Länge und Datum.", "feed": "Der Feed — filtern nach Kanal, Sprache, Thema, Länge und Datum.",
"channels": "Kanal-Verwaltung", "channels": "Kanal-Verwaltung",

View file

@ -4,6 +4,11 @@
"subtitle": "Every upload from the channels you follow in one clean, filterable feed — no algorithm deciding what you see, and no Shorts or livestream noise unless you want it.", "subtitle": "Every upload from the channels you follow in one clean, filterable feed — no algorithm deciding what you see, and no Shorts or livestream noise unless you want it.",
"trust": "Self-hosted and private. Sign in with email, or continue with Google." "trust": "Self-hosted and private. Sign in with email, or continue with Google."
}, },
"openSource": {
"title": "Free and open source",
"body": "Siftlode's code is public — see how it works, run your own private instance, or open an issue.",
"link": "View the source"
},
"preview": { "preview": {
"feed": "The feed — filter by channel, language, topic, length and date.", "feed": "The feed — filter by channel, language, topic, length and date.",
"channels": "Channel manager", "channels": "Channel manager",

View file

@ -4,6 +4,11 @@
"subtitle": "Minden feltöltés a követett csatornáidról egyetlen tiszta, szűrhető hírfolyamban — nincs algoritmus, ami eldönti, mit látsz, és nincs Shorts- vagy élő-zaj, hacsak nem kéred.", "subtitle": "Minden feltöltés a követett csatornáidról egyetlen tiszta, szűrhető hírfolyamban — nincs algoritmus, ami eldönti, mit látsz, és nincs Shorts- vagy élő-zaj, hacsak nem kéred.",
"trust": "Self-hosted és privát. Lépj be e-maillel, vagy folytasd Google-fiókkal." "trust": "Self-hosted és privát. Lépj be e-maillel, vagy folytasd Google-fiókkal."
}, },
"openSource": {
"title": "Ingyenes és nyílt forráskódú",
"body": "A Siftlode kódja nyilvános — nézd meg, hogyan működik, futtass saját privát példányt, vagy nyiss egy hibajegyet.",
"link": "Forráskód megtekintése"
},
"preview": { "preview": {
"feed": "A hírfolyam — szűrés csatorna, nyelv, téma, hossz és dátum szerint.", "feed": "A hírfolyam — szűrés csatorna, nyelv, téma, hossz és dátum szerint.",
"channels": "Csatorna-kezelő", "channels": "Csatorna-kezelő",