Thomas
45d8bc9443
* Add Homarr provider proxy foundation * Complete Homarr provider integration * Harden Homarr provider integration * Address Homarr provider review feedback * Address CodeRabbit provider feedback * Localize provider errors * Handle provider activity load failures * docs: improve workshop and homepage * Harden Homarr provider limits * fix: harden the Homarr provider * fix: address provider review feedback * fix: clarify provider request accounting * feat: complete the Homarr provider endpoint * fix: terminate invalid provider streams
71 lines
2.9 KiB
TypeScript
71 lines
2.9 KiB
TypeScript
import Link from "@docusaurus/Link";
|
|
import { translate } from "@docusaurus/Translate";
|
|
import { IconDownload, IconExternalLink } from "@tabler/icons-react";
|
|
import clsx from "clsx";
|
|
import styles from "../../../../pages/index.module.css";
|
|
import { HeroCards } from "./hero-cards";
|
|
|
|
export default function HomeHero() {
|
|
return (
|
|
<header className={clsx("hero hero--primary", styles.heroBanner, styles.hero)}>
|
|
<div className={styles.heroContent}>
|
|
<div className={styles.heroCopy}>
|
|
<h1 className={clsx("font-extrabold lg:text-7xl text-3xl", styles.heroTitle)}>
|
|
A simple, yet
|
|
<br />
|
|
powerful dashboard
|
|
<br />
|
|
for your server.
|
|
</h1>
|
|
<p className={"lg:text-2xl text-base"}>
|
|
A sleek, modern dashboard that puts all of your apps and services at your fingertips. Control everything in
|
|
one convenient location. Seamlessly integrates with the apps you've added, providing you with valuable
|
|
information.
|
|
</p>
|
|
|
|
<div className={styles.heroActions}>
|
|
<Link
|
|
data-attr="Install button"
|
|
className={"button button--secondary button--lg rounded-3xl dark:border-zinc-600 dark:bg-zinc-800"}
|
|
to="/docs/getting-started"
|
|
>
|
|
<div className={"flex items-center gap-3"}>
|
|
<span className={"dark:text-gray-200"}>Install</span>
|
|
<IconDownload className={"dark:text-gray-200"} size={20} />
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
data-attr="Try demo button"
|
|
className={"button button--secondary button--lg rounded-3xl dark:border-zinc-600 dark:bg-zinc-800"}
|
|
to="https://demo.homarr.dev/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<div className={"flex items-center gap-3"}>
|
|
<span className={"dark:text-gray-200"}>Try Demo</span>
|
|
<IconExternalLink className={"dark:text-gray-200"} size={20} />
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
data-attr="Redirect to PikaPods"
|
|
className={`button bg-neutral-900 button--lg rounded-3xl dark:border-zinc-600 dark:bg-zinc-800`}
|
|
to="https://www.pikapods.com/pods?run=homarr-v1"
|
|
>
|
|
<div className={"flex items-center gap-5"}>
|
|
<img src={"/img/pictures/partner/pika-pods.svg"} alt={"Pika Pods logo"} height={20} />
|
|
<span className={"dark:text-gray-200"}>Host from $2.3/month</span>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<section
|
|
className={clsx(styles.heroPreview, "hover-animation")}
|
|
aria-label={translate({ id: "homepage.preview.label", message: "Example Homarr dashboard" })}
|
|
>
|
|
<HeroCards />
|
|
</section>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|