mirror of
https://github.com/stefanpejcic/openpanel
synced 2025-06-26 18:28:26 +00:00
74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
import React from "react";
|
|
import clsx from "clsx";
|
|
import { LandingRainbowButton } from "./landing-rainbow-button";
|
|
import { LandingGhostButton } from "./landing-ghost-button";
|
|
|
|
export const LandingHeroTop = () => {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"pt-10",
|
|
"landing-sm:pt-4",
|
|
"landing-lg:pt-6",
|
|
"flex flex-col",
|
|
"justify-center",
|
|
"gap-10",
|
|
"landing-md:gap-16",
|
|
"landing-lg:gap-8",
|
|
"mt-4",
|
|
)}
|
|
>
|
|
<div>
|
|
<h1
|
|
className={clsx(
|
|
"flex items-center justify-center",
|
|
"flex-col",
|
|
"gap-2",
|
|
"text-[24px] leading-[32px]",
|
|
"landing-md:gap-0",
|
|
"landing-md:text-[32px] landing-md:leading-[40px]",
|
|
"landing-lg:gap-2",
|
|
"landing-lg:text-[40px] landing-lg:leading-[48px]",
|
|
)}
|
|
>
|
|
<span
|
|
className={clsx(
|
|
"text-center",
|
|
"block bg-landing-text-bg bg-clip-text text-transparent",
|
|
"font-semibold",
|
|
)}
|
|
>
|
|
Open-source Retool for{" "}
|
|
<br className="inline landing-md:hidden" />
|
|
Enterprise
|
|
</span>
|
|
<span
|
|
className={clsx(
|
|
"text-base sm:text-xl xl:text-2xl",
|
|
"max-w-[328px] sm:max-w-[480px] xl:max-w-max",
|
|
"text-center",
|
|
"block bg-landing-text-bg bg-clip-text text-transparent",
|
|
"font-light",
|
|
)}
|
|
>
|
|
Build your internal tools, admin panels, dashboards, B2B
|
|
apps with flexibility in mind.
|
|
</span>
|
|
</h1>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"flex items-center justify-center",
|
|
"flex-col landing-sm:flex-row",
|
|
"gap-6",
|
|
"landing-sm:gap-8",
|
|
"landing-lg:gap-10",
|
|
)}
|
|
>
|
|
<LandingRainbowButton href="/#playground" />
|
|
<LandingGhostButton />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|