Fix hydration and locale issues
This commit is contained in:
Henry
@@ -16,123 +16,126 @@ const Text = ({ children }: { children: React.ReactNode }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
question: t`Why make an open source Trello?`,
|
||||
answer: (
|
||||
<Text>
|
||||
{t`When Trello launched in 2011, it blew everyone away with its carefully designed simplicity, but over time (and atlassification) it lost its magic and grew into something closer to "Jira Lite". This project is our attempt to recapture the original magic of Trello’s simplicity, in open source.`}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: t`What's the difference between Kan and Trello?`,
|
||||
answer: (
|
||||
<Text>
|
||||
{t`The main difference between Kan and Trello is that Kan is open source, allowing anyone to view, modify, and contribute to our code. Our cloud offering also offers no restrictions on features for individual use, whereas Trello locks basic features such as the number of boards you can create behind a paywall.`}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: t`How is the project funded?`,
|
||||
answer: (
|
||||
<Text>
|
||||
{t`For long-term sustainability, we recognise all good open source projects need a source of revenue. Ours comes from the paid cloud offering for workspaces with multiple users (free during the beta) and for custom workspace slugs. There's no obligation to use it, and you can self-host the software on your own infrastructure free of charge.`}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: t`How do I import my Trello boards?`,
|
||||
answer: (
|
||||
<Text>
|
||||
<Trans>
|
||||
Importing your Trello boards into Kan is easy. You can follow our
|
||||
step-by-step guide{" "}
|
||||
<Link href="https://docs.kan.bn/imports/trello" className="underline">
|
||||
here
|
||||
</Link>
|
||||
.
|
||||
</Trans>
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: t`How do I get a custom URL?`,
|
||||
answer: (
|
||||
<Text>
|
||||
<Trans>
|
||||
You can get a custom workspace URL, like{" "}
|
||||
<Link href="https://kan.bn/kan" className="underline">
|
||||
kan.bn/kan
|
||||
</Link>
|
||||
, by going into your{" "}
|
||||
<Link href="https://kan.bn/settings" className="underline">
|
||||
workspace settings
|
||||
</Link>{" "}
|
||||
and purchasing a pro workspace subscription. All subscriptions help
|
||||
fund the development of the project!
|
||||
</Trans>
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: t`Do you offer a free plan?`,
|
||||
answer: (
|
||||
<Text>
|
||||
{t`Yes, we offer an forever free plan for individual use. No restrictions, no paywalls, no limits.`}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: t`What license are you using?`,
|
||||
answer: (
|
||||
<Text>
|
||||
<Trans>
|
||||
We are using the{" "}
|
||||
<Link
|
||||
href="https://github.com/kan-bn/kan/blob/main/LICENSE"
|
||||
className="underline"
|
||||
>
|
||||
AGPL-3.0 license
|
||||
</Link>
|
||||
.
|
||||
</Trans>
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: t`How do I invite team members?`,
|
||||
answer: (
|
||||
<Text>
|
||||
<Trans>
|
||||
You can invite team members by clicking the "Invite" button in the top
|
||||
right corner of the{" "}
|
||||
<Link href="https://kan.bn/members" className="underline">
|
||||
members page
|
||||
</Link>{" "}
|
||||
and entering their email address. They will receive an email with a
|
||||
link to join the workspace.
|
||||
</Trans>
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: t`How do I self-host?`,
|
||||
answer: (
|
||||
<Text>
|
||||
<Trans>
|
||||
You can self-host by following the instructions in our{" "}
|
||||
<Link href="https://github.com/kanbn/kan" className="underline">
|
||||
repo
|
||||
</Link>
|
||||
.
|
||||
</Trans>
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const Faqs = () => {
|
||||
const faqs = [
|
||||
{
|
||||
question: t`Why make an open source Trello?`,
|
||||
answer: (
|
||||
<Text>
|
||||
{t`When Trello launched in 2011, it blew everyone away with its carefully designed simplicity, but over time (and atlassification) it lost its magic and grew into something closer to "Jira Lite". This project is our attempt to recapture the original magic of Trello's simplicity, in open source.`}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: t`What's the difference between Kan and Trello?`,
|
||||
answer: (
|
||||
<Text>
|
||||
{t`The main difference between Kan and Trello is that Kan is open source, allowing anyone to view, modify, and contribute to our code. Our cloud offering also offers no restrictions on features for individual use, whereas Trello locks basic features such as the number of boards you can create behind a paywall.`}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: t`How is the project funded?`,
|
||||
answer: (
|
||||
<Text>
|
||||
{t`For long-term sustainability, we recognise all good open source projects need a source of revenue. Ours comes from the paid cloud offering for workspaces with multiple users (free during the beta) and for custom workspace slugs. There's no obligation to use it, and you can self-host the software on your own infrastructure free of charge.`}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: t`How do I import my Trello boards?`,
|
||||
answer: (
|
||||
<Text>
|
||||
<Trans>
|
||||
Importing your Trello boards into Kan is easy. You can follow our
|
||||
step-by-step guide{" "}
|
||||
<Link
|
||||
href="https://docs.kan.bn/imports/trello"
|
||||
className="underline"
|
||||
>
|
||||
here
|
||||
</Link>
|
||||
.
|
||||
</Trans>
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: t`How do I get a custom URL?`,
|
||||
answer: (
|
||||
<Text>
|
||||
<Trans>
|
||||
You can get a custom workspace URL, like{" "}
|
||||
<Link href="https://kan.bn/kan" className="underline">
|
||||
kan.bn/kan
|
||||
</Link>
|
||||
, by going into your{" "}
|
||||
<Link href="https://kan.bn/settings" className="underline">
|
||||
workspace settings
|
||||
</Link>{" "}
|
||||
and purchasing a pro workspace subscription. All subscriptions help
|
||||
fund the development of the project!
|
||||
</Trans>
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: t`Do you offer a free plan?`,
|
||||
answer: (
|
||||
<Text>
|
||||
{t`Yes, we offer an forever free plan for individual use. No restrictions, no paywalls, no limits.`}
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: t`What license are you using?`,
|
||||
answer: (
|
||||
<Text>
|
||||
<Trans>
|
||||
We are using the{" "}
|
||||
<Link
|
||||
href="https://github.com/kan-bn/kan/blob/main/LICENSE"
|
||||
className="underline"
|
||||
>
|
||||
AGPL-3.0 license
|
||||
</Link>
|
||||
.
|
||||
</Trans>
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: t`How do I invite team members?`,
|
||||
answer: (
|
||||
<Text>
|
||||
<Trans>
|
||||
You can invite team members by clicking the "Invite" button in the
|
||||
top right corner of the{" "}
|
||||
<Link href="https://kan.bn/members" className="underline">
|
||||
members page
|
||||
</Link>{" "}
|
||||
and entering their email address. They will receive an email with a
|
||||
link to join the workspace.
|
||||
</Trans>
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: t`How do I self-host?`,
|
||||
answer: (
|
||||
<Text>
|
||||
<Trans>
|
||||
You can self-host by following the instructions in our{" "}
|
||||
<Link href="https://github.com/kanbn/kan" className="underline">
|
||||
repo
|
||||
</Link>
|
||||
.
|
||||
</Trans>
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-[900px] px-4">
|
||||
<div className="flex flex-col items-center justify-center pb-12">
|
||||
|
||||
@@ -72,6 +72,7 @@ const FeatureItem = ({
|
||||
|
||||
const Features = ({ theme }: { theme: "light" | "dark" }) => {
|
||||
const isDark = theme === "dark";
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: t`Board visibility`,
|
||||
|
||||
@@ -7,77 +7,76 @@ import { twMerge } from "tailwind-merge";
|
||||
|
||||
type Frequency = "monthly" | "annually";
|
||||
|
||||
const frequencies = [
|
||||
{
|
||||
value: "monthly" as Frequency,
|
||||
label: t`Monthly`,
|
||||
priceSuffix: t`per user/month`,
|
||||
},
|
||||
{
|
||||
value: "annually" as Frequency,
|
||||
label: t`Yearly`,
|
||||
priceSuffix: t`per user/month`,
|
||||
},
|
||||
];
|
||||
|
||||
const tiers = [
|
||||
{
|
||||
name: t`Individuals`,
|
||||
id: "tier-individuals",
|
||||
href: "signup",
|
||||
buttonText: t`Get Started`,
|
||||
price: { monthly: t`Free`, annually: t`Free` },
|
||||
description: t`Everything you need, free forever. Unlimited boards, unlimited lists, unlimited cards. Upgrade any time.`,
|
||||
featureHeader: t`Free, forever`,
|
||||
features: [
|
||||
t`1 user`,
|
||||
t`Unlimited boards`,
|
||||
t`Unlimited lists`,
|
||||
t`Unlimited cards`,
|
||||
t`Unlimited comments`,
|
||||
t`Unlimited activity log`,
|
||||
],
|
||||
showPrice: true,
|
||||
},
|
||||
{
|
||||
name: t`Teams`,
|
||||
id: "tier-teams",
|
||||
href: "signup",
|
||||
buttonText: t`Get Started`,
|
||||
price: { monthly: "$10.00", annually: "$8.00" },
|
||||
description: t`Kanban is better with a team. Perfect for small and growing teams looking to collaborate.`,
|
||||
featureHeader: t`Everything in the free plan, plus:`,
|
||||
features: [
|
||||
t`Workspace members`,
|
||||
t`Admin roles`,
|
||||
t`Priority email support`,
|
||||
t`Support the development of the project`,
|
||||
],
|
||||
highlighted: true,
|
||||
showPrice: true,
|
||||
showPriceSuffix: true,
|
||||
},
|
||||
{
|
||||
name: t`Self Host`,
|
||||
id: "tier-self-host",
|
||||
href: "https://github.com/kanbn/kan",
|
||||
buttonText: t`View docs`,
|
||||
price: { monthly: "-", annually: "-" },
|
||||
description: t`Host Kan on your own infrastructure. Ideal for organisations that need complete control over their data.`,
|
||||
featureHeader: t`Complete control and ownership:`,
|
||||
features: [
|
||||
t`Run on your own infrastructure`,
|
||||
t`Own your data`,
|
||||
t`Custom domain`,
|
||||
],
|
||||
mostPopular: false,
|
||||
showPrice: false,
|
||||
},
|
||||
];
|
||||
|
||||
const Pricing = () => {
|
||||
const initialFrequency = frequencies[1]!;
|
||||
const [frequency, setFrequency] = useState(initialFrequency);
|
||||
const frequencies = [
|
||||
{
|
||||
value: "monthly" as Frequency,
|
||||
label: t`Monthly`,
|
||||
priceSuffix: t`per user/month`,
|
||||
},
|
||||
{
|
||||
value: "annually" as Frequency,
|
||||
label: t`Yearly`,
|
||||
priceSuffix: t`per user/month`,
|
||||
},
|
||||
];
|
||||
|
||||
const [frequency, setFrequency] = useState(frequencies[1]);
|
||||
|
||||
const tiers = [
|
||||
{
|
||||
name: t`Individuals`,
|
||||
id: "tier-individuals",
|
||||
href: "signup",
|
||||
buttonText: t`Get Started`,
|
||||
price: { monthly: t`Free`, annually: t`Free` },
|
||||
description: t`Everything you need, free forever. Unlimited boards, unlimited lists, unlimited cards. Upgrade any time.`,
|
||||
featureHeader: t`Free, forever`,
|
||||
features: [
|
||||
t`1 user`,
|
||||
t`Unlimited boards`,
|
||||
t`Unlimited lists`,
|
||||
t`Unlimited cards`,
|
||||
t`Unlimited comments`,
|
||||
t`Unlimited activity log`,
|
||||
],
|
||||
showPrice: true,
|
||||
},
|
||||
{
|
||||
name: t`Teams`,
|
||||
id: "tier-teams",
|
||||
href: "signup",
|
||||
buttonText: t`Get Started`,
|
||||
price: { monthly: "$10.00", annually: "$8.00" },
|
||||
description: t`Kanban is better with a team. Perfect for small and growing teams looking to collaborate.`,
|
||||
featureHeader: t`Everything in the free plan, plus:`,
|
||||
features: [
|
||||
t`Workspace members`,
|
||||
t`Admin roles`,
|
||||
t`Priority email support`,
|
||||
t`Support the development of the project`,
|
||||
],
|
||||
highlighted: true,
|
||||
showPrice: true,
|
||||
showPriceSuffix: true,
|
||||
},
|
||||
{
|
||||
name: t`Self Host`,
|
||||
id: "tier-self-host",
|
||||
href: "https://github.com/kanbn/kan",
|
||||
buttonText: t`View docs`,
|
||||
price: { monthly: "-", annually: "-" },
|
||||
description: t`Host Kan on your own infrastructure. Ideal for organisations that need complete control over their data.`,
|
||||
featureHeader: t`Complete control and ownership:`,
|
||||
features: [
|
||||
t`Run on your own infrastructure`,
|
||||
t`Own your data`,
|
||||
t`Custom domain`,
|
||||
],
|
||||
mostPopular: false,
|
||||
showPrice: false,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -68,8 +68,7 @@ export default function HomeView() {
|
||||
</p>
|
||||
|
||||
<p className="text-md mt-3 max-w-[450px] text-center text-dark-900 lg:max-w-[600px] lg:text-lg">
|
||||
{t`A powerful, flexible kanban app that helps you organise work,
|
||||
track progress, and deliver results—all in one place.`}
|
||||
{t`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">
|
||||
|
||||
Reference in New Issue
Block a user