From af224a51308c02da0edaa1337c1daf28c3f30c41 Mon Sep 17 00:00:00 2001 From: Christian Visintin Date: Sun, 7 Jun 2026 21:53:02 +0200 Subject: [PATCH] feat(site): landing page with dual-pane explorer hero --- site/src/components/ExplorerHero.astro | 63 +++++++++++++++++++++++++ site/src/components/FeatureCard.astro | 8 ++++ site/src/components/ProtocolStrip.astro | 15 ++++++ site/src/pages/index.astro | 39 ++++++++++++--- 4 files changed, 118 insertions(+), 7 deletions(-) create mode 100644 site/src/components/ExplorerHero.astro create mode 100644 site/src/components/FeatureCard.astro create mode 100644 site/src/components/ProtocolStrip.astro diff --git a/site/src/components/ExplorerHero.astro b/site/src/components/ExplorerHero.astro new file mode 100644 index 0000000..cf8f324 --- /dev/null +++ b/site/src/components/ExplorerHero.astro @@ -0,0 +1,63 @@ +--- +import { localizePath, useTranslations, type Locale } from "../i18n/ui"; +interface Props { locale: Locale; } +const { locale } = Astro.props; +const t = useTranslations(locale); +const p = (sub: string) => localizePath(locale, sub); + +const local = [ + { name: " ..", size: "DIR", kind: "dir" }, + { name: " Documents/", size: "DIR", kind: "dir" }, + { name: " backup.tar.gz", size: "1.2 GB", kind: "file" }, + { name: " id_ed25519", size: "411 B", kind: "file" }, + { name: " notes.md", size: "8.4 KB", kind: "file" }, +]; +const remote = [ + { name: " ..", size: "DIR", kind: "dir" }, + { name: " html/", size: "DIR", kind: "sel" }, + { name: " .env", size: "220 B", kind: "file" }, + { name: " docker-compose.yml", size: "1.7 KB", kind: "file" }, + { name: " logs/", size: "DIR", kind: "dir" }, +]; +--- +
+

{t("hero.kicker")}

+
+
+ {t("hero.tabs", { host: "192.168.1.10" })} +
+
+
+
{t("hero.local")}
+ {local.map((r) => ( +
+ {r.name}{r.size} +
+ ))} +
+
+
{t("hero.remote")}
+ {remote.map((r) => ( +
+ {r.name} + {r.size} +
+ ))} +
+
+
+ $1')}> + 4 files · 1.2 GB +
+
+

{t("hero.title")}

+

{t("hero.subtitle")}

+
+ {t("cta.install")} + {t("cta.manual")} +
+
+
+
diff --git a/site/src/components/FeatureCard.astro b/site/src/components/FeatureCard.astro new file mode 100644 index 0000000..4ffea46 --- /dev/null +++ b/site/src/components/FeatureCard.astro @@ -0,0 +1,8 @@ +--- +interface Props { title: string; body: string; } +const { title, body } = Astro.props; +--- +
+

{title}

+

{body}

+
diff --git a/site/src/components/ProtocolStrip.astro b/site/src/components/ProtocolStrip.astro new file mode 100644 index 0000000..8ba4aec --- /dev/null +++ b/site/src/components/ProtocolStrip.astro @@ -0,0 +1,15 @@ +--- +import { useTranslations, type Locale } from "../i18n/ui"; +interface Props { locale: Locale; } +const { locale } = Astro.props; +const t = useTranslations(locale); +const protocols = ["SCP", "SFTP", "FTP/S", "S3", "Kube", "SMB", "WebDAV"]; +--- +
+

{t("protocols.heading")}

+
+ {protocols.map((proto) => ( + {proto} + ))} +
+
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro index de7bb5c..7db8fc4 100644 --- a/site/src/pages/index.astro +++ b/site/src/pages/index.astro @@ -1,9 +1,34 @@ --- -import "../styles/theme.css"; +import Base from "../layouts/Base.astro"; +import Nav from "../components/Nav.astro"; +import Footer from "../components/Footer.astro"; +import ExplorerHero from "../components/ExplorerHero.astro"; +import ProtocolStrip from "../components/ProtocolStrip.astro"; +import FeatureCard from "../components/FeatureCard.astro"; +import { useTranslations } from "../i18n/ui"; + +const locale = "en" as const; +const t = useTranslations(locale); +const features = ["handy", "cross", "custom", "bookmarks", "security", "performance"]; --- - - termscp - -

termscp

- - + +