feat: privacy policy

apps/web/src/views/home/components/Header.tsx

@@ -45,9 +45,11 @@ const Header = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
         >
           <div className="flex w-full items-center justify-between lg:px-4">
             <div className="my-auto flex items-center justify-between">
-              <h1 className="w-[200px] text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
-                kan.bn
-              </h1>
+              <Link href="/">
+                <h1 className="w-[200px] text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
+                  kan.bn
+                </h1>
+              </Link>
             </div>
             {/* Desktop Menu */}
             <div className="hidden justify-center gap-10 dark:text-dark-1000 lg:flex">

apps/web/src/views/home/components/Layout.tsx

@@ -0,0 +1,44 @@
+import Cookies from "js-cookie";
+
+import PatternedBackground from "~/components/PatternedBackground";
+import { env } from "~/env";
+import { useTheme } from "~/providers/theme";
+import { api } from "~/utils/api";
+import Footer from "./Footer";
+import Header from "./Header";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  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;
+          background-color: ${!isDarkMode ? "hsl(0deg 0% 97.3%)" : "#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} />
+          {children}
+        </div>
+        <Footer />
+      </div>
+    </>
+  );
+}

apps/web/src/views/home/index.tsx

@@ -1,122 +1,92 @@
 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 Cta from "./components/Cta";
 import FAQs from "./components/Faqs";
 import Features from "./components/Features";
-import Footer from "./components/Footer";
-import Header from "./components/Header";
+import Layout from "./components/Layout";
 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;
-          background-color: ${!isDarkMode ? "hsl(0deg 0% 97.3%)" : "#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="animate-fade-down my-10 flex h-full w-full flex-col items-center justify-center px-4">
-                <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="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>
+    <Layout>
+      <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 animate-fade-down flex-col items-center justify-center px-4">
+            <div className="relative animate-fade-in 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>
-            <div className="px-4">
-              <div className="mb-24 rounded-[16px] border border-light-300 bg-light-50 p-1 shadow-md dark:border-dark-300 dark:bg-dark-100 lg:rounded-[24px] lg:p-2">
-                <div className="overflow-hidden rounded-[12px] border border-light-300 shadow-sm dark:border-dark-300 lg:rounded-[16px]">
-                  <Image
-                    src={`/hero-${isDarkMode ? "dark" : "light"}.png`}
-                    alt="kanban"
-                    width={1100}
-                    height={1000}
-                  />
-                </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>
-            <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 className="relative pt-10">
-              <div id="faq" className="absolute -top-20" />
-              <FAQs />
-            </div>
-            <div className="relative">
-              <Cta theme={theme.activeTheme} />
+            <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-[16px] border border-light-300 bg-light-50 p-1 shadow-md dark:border-dark-300 dark:bg-dark-100 lg:rounded-[24px] lg:p-2">
+            <div className="overflow-hidden rounded-[12px] border border-light-300 shadow-sm dark:border-dark-300 lg:rounded-[16px]">
+              <Image
+                src={`/hero-${isDarkMode ? "dark" : "light"}.png`}
+                alt="kanban"
+                width={1100}
+                height={1000}
+              />
             </div>
           </div>
         </div>
-        <Footer />
+        <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 className="relative pt-10">
+          <div id="faq" className="absolute -top-20" />
+          <FAQs />
+        </div>
+        <div className="relative">
+          <Cta theme={theme.activeTheme} />
+        </div>
       </div>
-    </>
+    </Layout>
   );
 }