116 lines
4.4 KiB
TypeScript
116 lines
4.4 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import Cookies from "js-cookie";
|
|
import { IoLogoGithub } from "react-icons/io";
|
|
|
|
import Button from "~/components/Button";
|
|
import PatternedBackground from "~/components/PatternedBackground";
|
|
import { env } from "~/env";
|
|
import { useTheme } from "~/providers/theme";
|
|
import { api } from "~/utils/api";
|
|
import Features from "./components/Features";
|
|
import Footer from "./components/Footer";
|
|
import Header from "./components/Header";
|
|
import Pricing from "./components/Pricing";
|
|
|
|
export default function HomeView() {
|
|
const theme = useTheme();
|
|
|
|
const token =
|
|
typeof window !== "undefined"
|
|
? Cookies.get(env.NEXT_PUBLIC_SUPABASE_AUTH_COOKIE_NAME)
|
|
: null;
|
|
|
|
const { data } = api.user.getUser.useQuery(undefined, {
|
|
enabled: !!token,
|
|
});
|
|
|
|
const isLoggedIn = !!data;
|
|
|
|
const isDarkMode = theme.activeTheme === "dark";
|
|
|
|
return (
|
|
<>
|
|
<style jsx global>{`
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
background-color: ${!isDarkMode ? "hsl(0deg 0% 98.8%)" : "#161616"};
|
|
}
|
|
`}</style>
|
|
<div className="mx-auto flex h-full min-h-screen min-w-[375px] flex-col items-center bg-light-100 dark:bg-dark-50">
|
|
<PatternedBackground />
|
|
<div className="z-10 mx-auto h-full w-full max-w-[1100px]">
|
|
<Header isLoggedIn={isLoggedIn} />
|
|
<div className="flex h-full w-full flex-col lg:pt-[5rem]">
|
|
<div className="w-full pb-10 pt-32 lg:py-32">
|
|
<div className="my-10 flex h-full w-full flex-col items-center justify-center px-4">
|
|
<div className="relative overflow-hidden rounded-full bg-gradient-to-b from-light-300 to-light-400 p-[2px] dark:from-dark-300 dark:to-dark-400">
|
|
<div className="gradient-border absolute inset-0 animate-border-spin" />
|
|
<div className="relative z-10 rounded-full bg-light-50 dark:bg-dark-50">
|
|
<Link
|
|
href="https://github.com/kanbn/kan"
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
className="flex items-center gap-2 px-4 py-1 text-center text-xs text-light-1000 dark:text-dark-1000 lg:text-sm"
|
|
>
|
|
Star on Github
|
|
<IoLogoGithub size={20} />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="mt-2 text-center text-4xl font-bold text-light-1000 dark:text-dark-1000 lg:text-5xl">
|
|
The open source <br />
|
|
alternative to Trello
|
|
</p>
|
|
|
|
<p className="text-md mt-3 max-w-[450px] text-center text-dark-900 lg:max-w-[600px] lg:text-lg">
|
|
A powerful, flexible kanban app that helps you organise work,
|
|
track progress, and deliver results—all in one place.
|
|
</p>
|
|
|
|
<div className="mt-6 flex gap-2">
|
|
<Button href="/signup">Get started on Cloud</Button>
|
|
<Button
|
|
variant="secondary"
|
|
href="https://github.com/kanbn/kan"
|
|
openInNewTab
|
|
>
|
|
Self host with Github
|
|
</Button>
|
|
</div>
|
|
<p className="mt-4 text-center text-sm text-dark-900">
|
|
No credit card required
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="px-4">
|
|
<div className="mb-24 rounded-[24px] border border-light-300 bg-light-50 p-2 shadow-md dark:border-dark-300 dark:bg-dark-100">
|
|
<div className="overflow-hidden rounded-[16px] border border-light-300 shadow-sm dark:border-dark-300">
|
|
<Image
|
|
src={`/hero-${isDarkMode ? "dark" : "light"}.png`}
|
|
alt="kanban"
|
|
width={1100}
|
|
height={1000}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="relative pt-10">
|
|
<div id="features" className="absolute -top-20" />
|
|
<Features theme={theme.activeTheme} />
|
|
</div>
|
|
<div className="relative pt-10">
|
|
<div id="pricing" className="absolute -top-20" />
|
|
<Pricing />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|