From 333d713114ba535a01f13bcc601d10145afba223 Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Mon, 17 Feb 2025 21:24:12 +0000
Subject: [PATCH] feat: landing page enhancements

---
 apps/web/src/views/auth/signup/index.tsx      |  2 +-
 apps/web/src/views/home/components/Header.tsx | 10 +++----
 .../web/src/views/home/components/Pricing.tsx | 26 +++++++++----------
 apps/web/src/views/home/index.tsx             |  8 +++---
 tooling/tailwind/web.ts                       | 25 ++++++++++++++++--
 5 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/apps/web/src/views/auth/signup/index.tsx b/apps/web/src/views/auth/signup/index.tsx
index 5dd3c7b5..7cf11435 100644
--- a/apps/web/src/views/auth/signup/index.tsx
+++ b/apps/web/src/views/auth/signup/index.tsx
@@ -30,7 +30,7 @@ export default function SignupPage() {
 
   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">
         <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">
diff --git a/apps/web/src/views/home/components/Header.tsx b/apps/web/src/views/home/components/Header.tsx
index bca5f1c7..6637f910 100644
--- a/apps/web/src/views/home/components/Header.tsx
+++ b/apps/web/src/views/home/components/Header.tsx
@@ -71,20 +71,20 @@ const Header = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
             >
               <div
                 className={twMerge(
-                  "my-[5px] h-[1.5px] w-4 bg-current bg-light-1000 transition-all dark:bg-dark-1000",
-                  isMenuOpen ? "translate-y-[6.5px] rotate-45" : "",
+                  "my-[5px] h-[2px] w-4 bg-current bg-light-1000 transition-all dark:bg-dark-1000",
+                  isMenuOpen ? "translate-y-[7px] rotate-45" : "",
                 )}
               />
               <div
                 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" : "",
                 )}
               />
               <div
                 className={twMerge(
-                  "my-[5px] h-[1.5px] w-4 bg-current bg-light-1000 transition-all dark:bg-dark-1000",
-                  isMenuOpen ? "-translate-y-[6.5px] -rotate-45" : "",
+                  "my-[5px] h-[2px] w-4 bg-current bg-light-1000 transition-all dark:bg-dark-1000",
+                  isMenuOpen ? "-translate-y-[7px] -rotate-45" : "",
                 )}
               />
             </button>
diff --git a/apps/web/src/views/home/components/Pricing.tsx b/apps/web/src/views/home/components/Pricing.tsx
index 9ffeda76..5ef98369 100644
--- a/apps/web/src/views/home/components/Pricing.tsx
+++ b/apps/web/src/views/home/components/Pricing.tsx
@@ -63,9 +63,9 @@ const tiers = [
     id: "tier-self-host",
     href: "https://github.com/kanbn/kan",
     buttonText: "View docs",
-    price: { monthly: "Free", annually: "Free" },
+    price: { monthly: "-", annually: "-" },
     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:",
     features: [
       "Run on your own infrastructure",
@@ -122,7 +122,7 @@ const Pricing = () => {
             key={tier.id}
             className={twMerge(
               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",
               "rounded-3xl p-8 xl:p-10",
             )}
@@ -132,7 +132,7 @@ const Pricing = () => {
                 id={tier.id}
                 className={twMerge(
                   tier.highlighted
-                    ? "text-dark-1000 dark:text-dark-100"
+                    ? "text-dark-1000 dark:text-dark-1000"
                     : "text-dark-50 dark:text-dark-1000",
                   "text-lg/8 font-semibold",
                 )}
@@ -140,17 +140,15 @@ const Pricing = () => {
                 {tier.name}
               </h3>
               {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%
                 </p>
               ) : null}
             </div>
             <p
               className={twMerge(
-                "mt-4 text-sm/6 text-dark-950",
-                tier.highlighted
-                  ? "text-light-100 dark:text-dark-100"
-                  : "text-dark-50 dark:text-dark-1000",
+                "mt-4 text-sm/6 text-dark-950 dark:text-dark-900",
+                tier.highlighted ? "text-light-100" : "text-dark-50",
               )}
             >
               {tier.description}
@@ -160,7 +158,7 @@ const Pricing = () => {
                 className={twMerge(
                   "text-4xl font-semibold tracking-tight text-light-100",
                   tier.highlighted
-                    ? "text-light-50 dark:text-dark-100"
+                    ? "text-light-50 dark:text-dark-1000"
                     : "text-gray-900 dark:text-dark-1000",
                   !tier.showPrice && "opacity-0",
                 )}
@@ -178,8 +176,8 @@ const Pricing = () => {
               aria-describedby={tier.id}
               className={twMerge(
                 tier.highlighted
-                  ? "bg-light-50 text-dark-50 shadow-sm dark:bg-dark-50 dark:text-dark-1000"
-                  : "bg-dark-50 text-light-50 dark:bg-light-50 dark:text-dark-50",
+                  ? "bg-light-50 text-dark-50 shadow-sm dark:bg-dark-1000 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",
               )}
             >
@@ -189,7 +187,7 @@ const Pricing = () => {
               className={twMerge(
                 "mt-8 text-sm/6 font-bold",
                 tier.highlighted
-                  ? "text-light-100 dark:text-dark-100"
+                  ? "text-light-100 dark:text-dark-1000"
                   : "text-dark-50 dark:text-dark-1000",
               )}
             >
@@ -200,7 +198,7 @@ const Pricing = () => {
               className={twMerge(
                 "mt-2 space-y-3 text-sm/6 text-light-600",
                 tier.highlighted
-                  ? "text-light-100 dark:text-dark-100"
+                  ? "text-light-100 dark:text-dark-1000"
                   : "text-dark-50 dark:text-dark-1000",
               )}
             >
diff --git a/apps/web/src/views/home/index.tsx b/apps/web/src/views/home/index.tsx
index aaf06511..710e36fa 100644
--- a/apps/web/src/views/home/index.tsx
+++ b/apps/web/src/views/home/index.tsx
@@ -34,9 +34,7 @@ export default function HomeView() {
       <style jsx global>{`
         html {
           scroll-behavior: smooth;
-        }
-        body {
-          background-color: ${!isDarkMode ? "hsl(0deg 0% 98.8%)" : "#161616"};
+          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">
@@ -45,8 +43,8 @@ export default function HomeView() {
           <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="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
diff --git a/tooling/tailwind/web.ts b/tooling/tailwind/web.ts
index 09a431ab..8a320333 100644
--- a/tooling/tailwind/web.ts
+++ b/tooling/tailwind/web.ts
@@ -1,4 +1,4 @@
-import { type Config } from "tailwindcss";
+import type { Config } from "tailwindcss";
 import forms from "@tailwindcss/forms";
 import scrollbar from "tailwind-scrollbar";
 
@@ -20,12 +20,33 @@ export default {
       },
       animation: {
         "border-spin": "border-spin 4s linear infinite",
+        "fade-down": "fade-down 0.5s ease-out",
+        "fade-in": "fade-in 0.5s ease-out",
       },
+
       keyframes: {
         "border-spin": {
           from: { transform: "rotate(0deg)" },
           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: {
         "dark-50": "#161616",
@@ -59,4 +80,4 @@ export default {
     },
   },
   plugins: [forms, scrollbar],
-} satisfies Config;
\ No newline at end of file
+} satisfies Config;