shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: landing page enhancements

Browse Source
This commit is contained in:
Henry
2025-02-17 21:24:12 +00:00
parent c5d35f9985
commit 333d713114
5 changed files with 44 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/views/auth/signup/index.tsx
View File

@@ -30,7 +30,7 @@ export default function SignupPage() {
return ( return (
<> <>
<PageHead title="Login | kan.bn" /> <PageHead title="Sign up | kan.bn" />
<main className="h-screen bg-light-100 pt-20 dark:bg-dark-50 sm:pt-0"> <main className="h-screen bg-light-100 pt-20 dark:bg-dark-50 sm:pt-0">
<div className="justify-top flex h-full flex-col items-center px-4 sm:justify-center"> <div className="justify-top flex h-full flex-col items-center px-4 sm:justify-center">
<div className="z-10 flex w-full flex-col items-center"> <div className="z-10 flex w-full flex-col items-center">

10
apps/web/src/views/home/components/Header.tsx
View File

@@ -71,20 +71,20 @@ const Header = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
> >
<div <div
className={twMerge( className={twMerge(
"my-[5px] h-[1.5px] w-4 bg-current bg-light-1000 transition-all dark:bg-dark-1000", "my-[5px] h-[2px] w-4 bg-current bg-light-1000 transition-all dark:bg-dark-1000",
isMenuOpen ? "translate-y-[6.5px] rotate-45" : "", isMenuOpen ? "translate-y-[7px] rotate-45" : "",
)} )}
/> />
<div <div
className={twMerge( className={twMerge(
"my-[5px] h-[1.5px] w-3 bg-current bg-light-1000 transition-all dark:bg-dark-1000", "my-[5px] ml-[4px] h-[2px] w-3 bg-current bg-light-1000 transition-all dark:bg-dark-1000",
isMenuOpen ? "opacity-0" : "", isMenuOpen ? "opacity-0" : "",
)} )}
/> />
<div <div
className={twMerge( className={twMerge(
"my-[5px] h-[1.5px] w-4 bg-current bg-light-1000 transition-all dark:bg-dark-1000", "my-[5px] h-[2px] w-4 bg-current bg-light-1000 transition-all dark:bg-dark-1000",
isMenuOpen ? "-translate-y-[6.5px] -rotate-45" : "", isMenuOpen ? "-translate-y-[7px] -rotate-45" : "",
)} )}
/> />
</button> </button>

26
apps/web/src/views/home/components/Pricing.tsx
View File

@@ -63,9 +63,9 @@ const tiers = [
id: "tier-self-host", id: "tier-self-host",
href: "https://github.com/kanbn/kan", href: "https://github.com/kanbn/kan",
buttonText: "View docs", buttonText: "View docs",
price: { monthly: "Free", annually: "Free" }, price: { monthly: "-", annually: "-" },
description: description:
"Spin up a self hosted version of Kan on your own infrastructure. Ideal for organisations that need complete control over their data.", "Host Kan on your own infrastructure. Ideal for organisations that need complete control over their data.",
featureHeader: "Complete control and ownership:", featureHeader: "Complete control and ownership:",
features: [ features: [
"Run on your own infrastructure", "Run on your own infrastructure",
@@ -122,7 +122,7 @@ const Pricing = () => {
key={tier.id} key={tier.id}
className={twMerge( className={twMerge(
tier.highlighted tier.highlighted
? "bg-dark-100 dark:bg-light-50" ? "bg-dark-50 ring-1 dark:ring-dark-800"
: "bg-light-50 ring-1 ring-light-300 dark:bg-dark-50 dark:ring-dark-300", : "bg-light-50 ring-1 ring-light-300 dark:bg-dark-50 dark:ring-dark-300",
"rounded-3xl p-8 xl:p-10", "rounded-3xl p-8 xl:p-10",
)} )}
@@ -132,7 +132,7 @@ const Pricing = () => {
id={tier.id} id={tier.id}
className={twMerge( className={twMerge(
tier.highlighted tier.highlighted
? "text-dark-1000 dark:text-dark-100" ? "text-dark-1000 dark:text-dark-1000"
: "text-dark-50 dark:text-dark-1000", : "text-dark-50 dark:text-dark-1000",
"text-lg/8 font-semibold", "text-lg/8 font-semibold",
)} )}
@@ -140,17 +140,15 @@ const Pricing = () => {
{tier.name} {tier.name}
</h3> </h3>
{tier.highlighted && frequency.value === "annually" ? ( {tier.highlighted && frequency.value === "annually" ? (
<p className="rounded-full bg-light-50 px-2.5 py-1 text-xs/5 font-semibold text-dark-500 dark:bg-dark-50 dark:text-dark-1000"> <p className="rounded-full bg-light-50 px-2.5 py-1 text-[12px] font-semibold text-dark-500 dark:bg-dark-1000 dark:text-dark-50">
-20% -20%
</p> </p>
) : null} ) : null}
</div> </div>
<p <p
className={twMerge( className={twMerge(
"mt-4 text-sm/6 text-dark-950", "mt-4 text-sm/6 text-dark-950 dark:text-dark-900",
tier.highlighted tier.highlighted ? "text-light-100" : "text-dark-50",
? "text-light-100 dark:text-dark-100"
: "text-dark-50 dark:text-dark-1000",
)} )}
> >
{tier.description} {tier.description}
@@ -160,7 +158,7 @@ const Pricing = () => {
className={twMerge( className={twMerge(
"text-4xl font-semibold tracking-tight text-light-100", "text-4xl font-semibold tracking-tight text-light-100",
tier.highlighted tier.highlighted
? "text-light-50 dark:text-dark-100" ? "text-light-50 dark:text-dark-1000"
: "text-gray-900 dark:text-dark-1000", : "text-gray-900 dark:text-dark-1000",
!tier.showPrice && "opacity-0", !tier.showPrice && "opacity-0",
)} )}
@@ -178,8 +176,8 @@ const Pricing = () => {
aria-describedby={tier.id} aria-describedby={tier.id}
className={twMerge( className={twMerge(
tier.highlighted tier.highlighted
? "bg-light-50 text-dark-50 shadow-sm dark:bg-dark-50 dark:text-dark-1000" ? "bg-light-50 text-dark-50 shadow-sm dark:bg-dark-1000 dark:text-dark-50"
: "bg-dark-50 text-light-50 dark:bg-light-50 dark:text-dark-50", : "bg-dark-50 text-light-50 dark:bg-dark-200 dark:text-dark-1000",
"mt-6 block rounded-md px-3 py-2 text-center text-sm/6 font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600", "mt-6 block rounded-md px-3 py-2 text-center text-sm/6 font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
)} )}
> >
@@ -189,7 +187,7 @@ const Pricing = () => {
className={twMerge( className={twMerge(
"mt-8 text-sm/6 font-bold", "mt-8 text-sm/6 font-bold",
tier.highlighted tier.highlighted
? "text-light-100 dark:text-dark-100" ? "text-light-100 dark:text-dark-1000"
: "text-dark-50 dark:text-dark-1000", : "text-dark-50 dark:text-dark-1000",
)} )}
> >
@@ -200,7 +198,7 @@ const Pricing = () => {
className={twMerge( className={twMerge(
"mt-2 space-y-3 text-sm/6 text-light-600", "mt-2 space-y-3 text-sm/6 text-light-600",
tier.highlighted tier.highlighted
? "text-light-100 dark:text-dark-100" ? "text-light-100 dark:text-dark-1000"
: "text-dark-50 dark:text-dark-1000", : "text-dark-50 dark:text-dark-1000",
)} )}
> >

8
apps/web/src/views/home/index.tsx
View File

@@ -34,9 +34,7 @@ export default function HomeView() {
<style jsx global>{` <style jsx global>{`
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} background-color: ${!isDarkMode ? "hsl(0deg 0% 97.3%)" : "#161616"};
body {
background-color: ${!isDarkMode ? "hsl(0deg 0% 98.8%)" : "#161616"};
} }
`}</style> `}</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"> <div className="mx-auto flex h-full min-h-screen min-w-[375px] flex-col items-center bg-light-100 dark:bg-dark-50">
@@ -45,8 +43,8 @@ export default function HomeView() {
<Header isLoggedIn={isLoggedIn} /> <Header isLoggedIn={isLoggedIn} />
<div className="flex h-full w-full flex-col lg:pt-[5rem]"> <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="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="animate-fade-down 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="animate-fade-in 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="gradient-border absolute inset-0 animate-border-spin" />
<div className="relative z-10 rounded-full bg-light-50 dark:bg-dark-50"> <div className="relative z-10 rounded-full bg-light-50 dark:bg-dark-50">
<Link <Link

25
tooling/tailwind/web.ts
View File

@@ -1,4 +1,4 @@
import { type Config } from "tailwindcss"; import type { Config } from "tailwindcss";
import forms from "@tailwindcss/forms"; import forms from "@tailwindcss/forms";
import scrollbar from "tailwind-scrollbar"; import scrollbar from "tailwind-scrollbar";
@@ -20,12 +20,33 @@ export default {
}, },
animation: { animation: {
"border-spin": "border-spin 4s linear infinite", "border-spin": "border-spin 4s linear infinite",
"fade-down": "fade-down 0.5s ease-out",
"fade-in": "fade-in 0.5s ease-out",
}, },
keyframes: { keyframes: {
"border-spin": { "border-spin": {
from: { transform: "rotate(0deg)" }, from: { transform: "rotate(0deg)" },
to: { transform: "rotate(360deg)" }, to: { transform: "rotate(360deg)" },
}, },
"fade-down": {
"0%": {
opacity: "0",
transform: "translateY(-20px)",
},
"100%": {
opacity: "1",
transform: "translateY(0)",
},
},
"fade-in": {
"0%": {
opacity: "0",
},
"100%": {
opacity: "1",
},
},
}, },
colors: { colors: {
"dark-50": "#161616", "dark-50": "#161616",
@@ -59,4 +80,4 @@ export default {
}, },
}, },
plugins: [forms, scrollbar], plugins: [forms, scrollbar],
} satisfies Config; } satisfies Config;