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

feat: hero image theme

Browse Source
This commit is contained in:
Henry
2024-11-25 22:59:25 +00:00
parent 8984790b5e
commit 1fd7900f24
3 changed files with 104 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/hero-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 KiB

0
public/hero.png → public/hero-light.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 433 KiB

After

Width:  |  Height:  |  Size: 433 KiB

22
src/views/home/index.tsx
View File

@@ -1,15 +1,18 @@
import Link from "next/link";
import Image from "next/image";
import Cookies from "js-cookie";
import { IoLogoGithub } from "react-icons/io";
import Button from "~/components/Button";
import PatternedBackground from "~/components/PatternedBackground";
import { api } from "~/utils/api";
import { env } from "~/env.mjs";
import { IoLogoGithub } from "react-icons/io";
import { useTheme } from "~/providers/theme";
export default function HomeView() {
const theme = useTheme();
const token =
typeof window !== "undefined"
? Cookies.get(env.NEXT_PUBLIC_SUPABASE_AUTH_COOKIE_NAME)
@@ -22,6 +25,14 @@ export default function HomeView() {
const isLoggedIn = !!data;
return (
<>
<style jsx global>{`
body {
background-color: ${theme.theme === "light"
? "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">
<PatternedBackground />
<div className="z-10 mx-auto h-full w-full max-w-[1100px]">
@@ -102,11 +113,11 @@ export default function HomeView() {
</p>
</div>
</div>
<div className="mb-10 rounded-[24px] border border-light-300 bg-light-50 p-2 shadow-md">
<div className="rounded-[16px] border border-light-300 bg-light-200 p-2">
<div className="mb-10 rounded-[24px] border border-light-300 bg-light-50 p-2 shadow-md dark:border-dark-300 dark:bg-dark-50">
<div className="rounded-[16px] border border-light-300 bg-light-200 p-2 dark:border-dark-300 dark:bg-dark-200">
<div className="overflow-hidden rounded-[16px] shadow-sm">
<Image
src="/hero.png"
src={`/hero-${theme.theme}.png`}
alt="kanban"
width={1100}
height={1000}
@@ -115,7 +126,7 @@ export default function HomeView() {
</div>
</div>
<div className="flex flex-col items-center justify-center pb-10">
<div className="flex items-center gap-2 rounded-full border bg-light-50 px-4 py-1 text-center text-sm text-light-1000 dark:bg-dark-50 dark:text-dark-1000">
<div className="flex items-center gap-2 rounded-full border bg-light-50 px-4 py-1 text-center text-sm text-light-1000 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-900">
<p>
We are currently building the product and will be launching
soon.
@@ -125,5 +136,6 @@ export default function HomeView() {
</div>
</div>
</div>
</>
);
}