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

feat: responsive landing page

Browse Source
This commit is contained in:
Henry
2025-02-15 15:46:40 +00:00
parent 3a2942886d
commit 85f6dd1ff8
5 changed files with 141 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -39,13 +39,13 @@ export default function HomeView() {
background-color: ${!isDarkMode ? "hsl(0deg 0% 98.8%)" : "#161616"};
}
`}</style>
<div className="mx-auto flex h-full min-h-screen 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">
<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">
<div className="w-full py-32">
<div className="my-10 flex h-full w-full flex-col items-center justify-center">
<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">
@@ -53,7 +53,7 @@ export default function HomeView() {
href="https://github.com/kanbn/kan"
rel="noopener noreferrer"
target="_blank"
className="flex items-center gap-2 px-4 py-1 text-center text-sm text-light-1000 dark:text-dark-1000"
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} />
@@ -61,12 +61,12 @@ export default function HomeView() {
</div>
</div>
<p className="mt-2 text-center text-5xl font-bold text-light-1000 dark:text-dark-1000">
<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="mt-3 max-w-[600px] text-center text-lg text-dark-900">
<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>
@@ -86,14 +86,16 @@ export default function HomeView() {
</p>
</div>
</div>
<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 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">