For the Team plan, you can add or remove
@@ -418,26 +423,26 @@ export default function _Page() {
manager to request a seat increase. You'll then be billed for
the prorated amount for the remainder of the billing cycle.
-
-
-
-
+
+
+
+
What happens to my data with Firezone enabled?
-
-
+
+
Network traffic is always end-to-end encrypted, and by default,
routes directly to Gateways running on your infrastructure. In
rare circumstances, encrypted traffic can pass through our
global relay network if a direct connection cannot be
established. Firezone can never decrypt the contents of your
traffic.
-
-
-
-
+
+
+
+
How do I cancel or change my plan?
-
-
+
+
For Starter and Team plans, you can downgrade by going to your
Account settings in your Firezone admin portal. For Enterprise
plans, contact your account manager for subscription updates. If
@@ -449,31 +454,31 @@ export default function _Page() {
contact support
.
-
-
-
- When will I be billed?
-
+
+
+
+ When will I be billed?
+
The Team plan is billed monthly on the same day you start
service until canceled. Enterprise plans are billed annually.
-
-
-
-
+
+
+
+
What payment methods are available?
-
-
+
+
The Starter plan is free and does not require a credit card to
get started. Team and Enterprise plans can be paid via credit
card, ACH, or wire transfer.
-
-
-
-
+
+
+
+
Do you offer special pricing for nonprofits and educational
institutions?
-
-
+
+
Yes. Not-for-profit organizations and educational institutions
are eligible for a 50% discount.{" "}
{" "}
to request the discount.
-
-
-
-
+
+
+
+
What payment methods are available?
-
-
+
+
The Starter plan is free and does not require a credit card to
get started. Team and Enterprise plans can be paid via credit
card, ACH, or wire transfer.
-
-
+
+
diff --git a/website/src/components/Clipboard/index.tsx b/website/src/components/Clipboard/index.tsx
index 2e43a71cd..7bfbee1d5 100644
--- a/website/src/components/Clipboard/index.tsx
+++ b/website/src/components/Clipboard/index.tsx
@@ -1,21 +1,14 @@
-import { Clipboard as FlowbiteClipboard } from "flowbite-react";
-import type { CustomFlowbiteTheme } from "flowbite-react";
+import { ClipboardWithIcon } from "flowbite-react";
+import type { ClipboardWithIconTheme } from "flowbite-react";
-const clipboardTheme: CustomFlowbiteTheme["clipboard"] = {
- withIcon: {
- base: "absolute end-2 top-2 inline-flex items-center justify-center rounded p-1.5 text-neutral-500 transition transform duration-200 hover:text-neutral-800 hover:bg-neutral-50",
- icon: {
- defaultIcon: "h-4 w-4",
- successIcon: "h-4 w-4 text-accent-500",
- },
+const clipboardTheme: ClipboardWithIconTheme = {
+ base: "absolute end-3 top-4 inline-flex items-center justify-center rounded p-2 text-neutral-500 transition transform duration-200 hover:text-neutral-800 hover:bg-neutral-50",
+ icon: {
+ defaultIcon: "h-4 w-4",
+ successIcon: "h-4 w-4 text-accent-500",
},
};
export default function Clipboard({ valueToCopy }: { valueToCopy: string }) {
- return (
-
- );
+ return ;
}
diff --git a/website/src/components/RootNavbar/index.tsx b/website/src/components/RootNavbar/index.tsx
index 63e4c0381..dffc839d1 100644
--- a/website/src/components/RootNavbar/index.tsx
+++ b/website/src/components/RootNavbar/index.tsx
@@ -15,7 +15,7 @@ import {
import { usePathname } from "next/navigation";
import Button from "@/components/Button";
import { HiChevronDown } from "react-icons/hi2";
-import type { CustomFlowbiteTheme } from "flowbite-react";
+import type { CustomFlowbiteTheme } from "flowbite-react/types";
import { HiBars3 } from "react-icons/hi2";
import { useDrawer } from "@/components/Providers/DrawerProvider";
import { useScrollPosition } from "@/hooks/useScrollPosition";
@@ -53,8 +53,8 @@ const navbarThemeLight: CustomFlowbiteTheme["navbar"] = {
link: {
base: "block py-2 pl-3 pr-4 md:p-0 border-t border-neutral-200 md:border-t-0 md:border-transparent",
active: {
- on: "bg-neutral-200 rounded text-white md:bg-transparent text-primary-450 font-semibold",
- off: "text-neutral-700 hover:text-primary-450 hover:bg-neutral-100 transition transform duration-50 md:hover:bg-transparent md:hover:border-b-2 md:hover:border-primary-450",
+ on: "bg-neutral-100 rounded md:bg-transparent font-semibold text-primary-450 md:text-primary-450",
+ off: "text-neutral-700 hover:text-primary-450 md:hover:text-primary-450 hover:bg-neutral-100 transition transform duration-50 md:hover:bg-transparent md:hover:border-b-2 md:hover:border-primary-450",
},
disabled: {
on: "text-neutral-400 hover:cursor-not-allowed",
@@ -100,8 +100,8 @@ const navbarThemeDark: CustomFlowbiteTheme["navbar"] = {
link: {
base: "block py-2 pl-3 pr-4 md:p-0 border-t border-neutral-700 md:border-t-0 md:border-transparent",
active: {
- on: "rounded text-white md:bg-transparent text-primary-450 font-semibold",
- off: "text-neutral-200 hover:text-primary-450 hover:bg-primary-900 hover:text-primary-450 transition transform duration-50 md:hover:bg-transparent md:hover:border-b-2 md:hover:border-primary-450",
+ on: "rounded bg-primary-900 md:bg-transparent font-semibold text-primary-450 md:text-primary-450",
+ off: "text-neutral-200 hover:text-primary-450 md:hover:text-primary-450 hover:bg-primary-900 transition transform duration-50 md:hover:bg-transparent md:hover:border-b-2 md:hover:border-primary-450",
},
disabled: {
on: "text-neutral-400 hover:cursor-not-allowed",
diff --git a/website/src/components/Sidebar/index.tsx b/website/src/components/Sidebar/index.tsx
index daa6ea3ba..5a8b65191 100644
--- a/website/src/components/Sidebar/index.tsx
+++ b/website/src/components/Sidebar/index.tsx
@@ -1,8 +1,14 @@
"use client";
import { Route } from "next";
import { usePathname } from "next/navigation";
-import type { CustomFlowbiteTheme } from "flowbite-react";
-import { Sidebar as FlowbiteSidebar } from "flowbite-react";
+import type { CustomFlowbiteTheme } from "flowbite-react/types";
+import {
+ Sidebar as FlowbiteSidebar,
+ SidebarItem as FlowbiteSidebarItem,
+ SidebarItems as FlowbiteSidebarItems,
+ SidebarItemGroup as FlowbiteSidebarItemGroup,
+ SidebarCollapse as FlowbiteSidebarCollapse,
+} from "flowbite-react";
import Link from "next/link";
import { useDrawer } from "@/components/Providers/DrawerProvider";
@@ -20,7 +26,7 @@ const FlowbiteSidebarTheme: CustomFlowbiteTheme["sidebar"] = {
off: "w-64",
},
inner:
- "h-full overflow-y-auto overflow-x-hidden rounded px-3 py-4 dark:bg-neutral-800",
+ "h-full overflow-y-auto overflow-x-hidden bg-white rounded px-3 py-4 dark:bg-neutral-800",
},
collapse: {
button:
@@ -29,7 +35,7 @@ const FlowbiteSidebarTheme: CustomFlowbiteTheme["sidebar"] = {
base: "h-6 w-6 text-neutral-500 transition duration-75 group-hover:text-neutral-900 dark:text-neutral-400 dark:group-hover:text-white",
open: {
off: "",
- on: "text-neutral-900",
+ on: "text-neutral-900 dark:text-white",
},
},
label: {
@@ -114,17 +120,17 @@ export function SidebarItem({
if (href) {
return (
-
+
{children}
-
+
);
} else {
- return {children};
+ return {children};
}
}
export function SidebarItems({ children }: { children: React.ReactNode }) {
- return {children};
+ return {children};
}
export function SidebarItemGroup({
@@ -135,14 +141,14 @@ export function SidebarItemGroup({
children: React.ReactNode;
}) {
return (
-
+
{label && (
-
+
{label}
-
+
)}
{children}
-
+
);
}
@@ -158,9 +164,9 @@ export function SidebarCollapse({
const p = usePathname();
return (
-
+
{children}
-
+
);
}
diff --git a/website/src/components/Tabs/index.tsx b/website/src/components/Tabs/index.tsx
index a4ceec768..65f15bc00 100644
--- a/website/src/components/Tabs/index.tsx
+++ b/website/src/components/Tabs/index.tsx
@@ -1,6 +1,6 @@
"use client";
-import { Tabs } from "flowbite-react";
-import type { CustomFlowbiteTheme } from "flowbite-react";
+import { Tabs, TabItem } from "flowbite-react";
+import type { CustomFlowbiteTheme } from "flowbite-react/types";
const customTheme: CustomFlowbiteTheme["tabs"] = {
base: "flex flex-col gap-2",
@@ -85,9 +85,9 @@ function TabsItem({
icon?: FlowbiteIcon;
}) {
return (
-
+
{children}
-
+
);
}
diff --git a/website/src/components/Tooltip/index.tsx b/website/src/components/Tooltip/index.tsx
index 6e416fe71..f1912ccfa 100644
--- a/website/src/components/Tooltip/index.tsx
+++ b/website/src/components/Tooltip/index.tsx
@@ -1,6 +1,6 @@
"use client";
-import type { CustomFlowbiteTheme } from "flowbite-react";
+import type { CustomFlowbiteTheme } from "flowbite-react/types";
import { Tooltip as FlowbiteTooltip } from "flowbite-react";
export default function Tooltip({
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index 7600d7fa0..d64bce57b 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -1,5 +1,5 @@
/** @type {import('tailwindcss').Config} */
-import flowbite from "flowbite-react/tailwind";
+import flowbite from "flowbite-react/plugin/tailwindcss";
const firezoneColors = {
// See our brand palette in Figma.
@@ -66,11 +66,12 @@ const firezoneColors = {
/** @type {import('tailwindcss').Config} */
module.exports = {
+ darkMode: "class",
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
- flowbite.content(),
+ "./node_modules/flowbite-react/dist/**/*.js",
],
theme: {
extend: {
@@ -135,5 +136,5 @@ module.exports = {
},
},
},
- plugins: [flowbite.plugin(), require("flowbite-typography")],
+ plugins: [flowbite, require("flowbite-typography")],
};
diff --git a/website/tsconfig.json b/website/tsconfig.json
index 0c7555fa7..eb0b41d94 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -9,7 +9,7 @@
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
- "moduleResolution": "node",
+ "moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",