feat: add cta to landing page

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

@@ -0,0 +1,91 @@
+import { useEffect, useState } from "react";
+
+import Button from "~/components/Button";
+
+const Cta = ({ theme }: { theme: string }) => {
+  const [currentWorkspaceSlug, setCurrentWorkspaceSlug] = useState("acme");
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const workspaceSlugs = [
+      "acme",
+      "henry",
+      "cal",
+      "documenso",
+      "jack",
+      "openstatus",
+      "florrie",
+      "supabase",
+    ];
+
+    const interval = setInterval(() => {
+      setIsVisible(false);
+      setTimeout(() => {
+        setCurrentWorkspaceSlug((prev) => {
+          const currentIndex = workspaceSlugs.indexOf(prev);
+          const nextIndex = (currentIndex + 1) % workspaceSlugs.length;
+          const nextSlug = workspaceSlugs[nextIndex];
+          if (!nextSlug) return prev;
+          return nextSlug;
+        });
+        setIsVisible(true);
+      }, 500);
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="relative isolate overflow-hidden">
+      <div className="px-6 py-24 sm:px-6 sm:py-32 lg:px-8">
+        <div className="mx-auto flex max-w-2xl flex-col items-center text-center">
+          <div
+            className={`mb-8 flex items-center gap-2 rounded-2xl border bg-light-50 px-4 py-2 text-center text-sm font-bold text-light-1000 transition-all duration-500 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-950 lg:text-[16px] ${
+              isVisible
+                ? "translate-y-0 opacity-100"
+                : "-translate-y-4 opacity-0"
+            }`}
+          >
+            <p>kan.bn/{currentWorkspaceSlug}</p>
+          </div>
+          <h2 className="text-balance text-4xl font-bold tracking-tight text-light-1000 dark:text-dark-1000 sm:text-4xl">
+            Get started for free today
+          </h2>
+          <p className="text-md/8 mx-auto mt-6 max-w-[375px] text-pretty text-light-900 dark:text-dark-900">
+            Unlimited boards, unlimited lists, unlimited cards. No credit card
+            required.
+          </p>
+          <div className="mt-10 flex items-center justify-center gap-x-6">
+            <Button size="lg">Get started</Button>
+          </div>
+        </div>
+      </div>
+      <svg
+        viewBox="0 0 1024 1024"
+        aria-hidden="true"
+        className="absolute left-1/2 top-[65%] -z-10 size-[60rem] -translate-x-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] lg:size-[64rem]"
+      >
+        <circle
+          r={512}
+          cx={512}
+          cy={512}
+          fill="url(#8d958450-c69f-4251-94bc-4e091a323369)"
+          fillOpacity="0.7"
+        />
+        <defs>
+          <radialGradient id="8d958450-c69f-4251-94bc-4e091a323369">
+            <stop
+              stopColor={theme === "light" ? "hsl(0deg 0% 52.2%)" : "#505050"}
+            />
+            <stop
+              offset={1}
+              stopColor={theme === "light" ? "hsl(0deg 0% 43.5%)" : "#707070"}
+            />
+          </radialGradient>
+        </defs>
+      </svg>
+    </div>
+  );
+};
+
+export default Cta;

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

@@ -50,7 +50,7 @@ const faqs = [
 
 const Faqs = () => {
   return (
-    <div className="mx-auto max-w-[900px] px-4 pb-12">
+    <div className="mx-auto max-w-[900px] px-4">
       <div className="flex flex-col items-center justify-center pb-12">
         <div className="flex items-center gap-2 rounded-full border bg-light-50 px-4 py-1 text-center text-xs text-light-1000 dark:border-dark-300 dark:bg-dark-50 dark:text-dark-900 lg:text-sm">
           <p>FAQs</p>
@@ -59,7 +59,7 @@ const Faqs = () => {
         <p className="mt-2 text-center text-3xl font-bold text-light-1000 dark:text-dark-1000 lg:text-4xl">
           Questions?
         </p>
-        <p className="text:md mt-3 max-w-[600px] text-center text-dark-900 lg:text-lg">
+        <p className="text:md lg:text-md mt-3 max-w-[500px] text-center text-dark-900">
           Find answers to common questions about the project. Can't find what
           you're looking for? Feel free to{" "}
           <Link href="mailto:support@kan.bn" className="underline">

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

@@ -127,7 +127,7 @@ const Features = ({ theme }: { theme: "light" | "dark" }) => {
         <p className="mt-2 text-center text-3xl font-bold text-light-1000 dark:text-dark-1000 lg:text-4xl">
           Kanban reimagined
         </p>
-        <p className="text-md mt-3 max-w-[600px] text-center text-dark-900 lg:text-lg">
+        <p className="text-md lg:text-md mt-3 max-w-[500px] text-center text-dark-900">
           Simple, visual task management that just works. Drag and drop cards,
           collaborate with your team, and get more done.
         </p>

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

@@ -44,7 +44,7 @@ const StatusMarker = () => (
 
 const Footer = () => {
   return (
-    <footer className="z-10 mt-20 w-full border-t border-light-300 bg-light-50 py-8 dark:border-dark-300 dark:bg-dark-50">
+    <footer className="z-10 w-full border-t border-light-300 bg-light-50 py-8 dark:border-dark-300 dark:bg-dark-50">
       <div className="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8 lg:py-24">
         <div className="xl:grid xl:grid-cols-3 xl:gap-8">
           <div>

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

@@ -89,9 +89,9 @@ const Pricing = () => {
         </div>
 
         <p className="mt-2 text-center text-3xl font-bold text-light-1000 dark:text-dark-1000 lg:text-4xl">
-          Simple pricing to fit your needs
+          Simple pricing
         </p>
-        <p className="text:md mt-3 max-w-[600px] text-center text-dark-900 lg:text-lg">
+        <p className="text:md lg:text-md mt-3 max-w-[500px] text-center text-dark-900">
           Get started for free, with no usage limits. For collaboration, upgrade
           to a plan that fits the size of your team.
         </p>

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

@@ -8,6 +8,7 @@ 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";
@@ -109,6 +110,9 @@ export default function HomeView() {
               <div id="faq" className="absolute -top-20" />
               <FAQs />
             </div>
+            <div className="relative">
+              <Cta theme={theme.activeTheme} />
+            </div>
           </div>
         </div>
         <Footer />