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

feat: add cta to landing page

Browse Source
This commit is contained in:
Henry
2025-02-19 21:22:42 +00:00
parent d4d3e41384
commit 169275d9ca
6 changed files with 101 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
apps/web/src/views/home/components/Cta.tsx Normal file
View File

@@ -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;

4
apps/web/src/views/home/components/Faqs.tsx
View File

@@ -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">

2
apps/web/src/views/home/components/Features.tsx
View File

@@ -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>

2
apps/web/src/views/home/components/Footer.tsx
View File

@@ -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>

4
apps/web/src/views/home/components/Pricing.tsx
View File

@@ -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>

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

@@ -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 />