feat: Add SaaS 100K plan

src/components/Dashboard.tsx

@@ -46,6 +46,13 @@ export function Dashboard({ products }: DashboardProps): React.ReactElement {
 						Thanks for using the Reacher{" "}
 						{productName(subscription?.prices?.products)}!
 					</Text>
+					{subscription && (
+						<>
+							<StripeMananageButton>
+								Manage Subscription
+							</StripeMananageButton>
+						</>
+					)}
 					<StripeMananageButton>Billing History</StripeMananageButton>
 				</div>
 				<div>
@@ -62,21 +69,18 @@ export function Dashboard({ products }: DashboardProps): React.ReactElement {
 								{formatDate(new Date(subscription.cancel_at))}
 							</Text>
 						)}
-					<div className="text-right">
-						{subscription ? (
-							<StripeMananageButton>
-								Manage Subscription
-							</StripeMananageButton>
-						) : (
+					{subscription?.prices?.products?.id !==
+						COMMERCIAL_LICENSE_PRODUCT_ID && (
+						<div className="text-right">
 							<GLink
 								color
 								href="/pricing"
 								data-sa-link-event="dashboard:upgrade:click"
 							>
 								<strong>Upgrade Plan</strong>
 							</GLink>
-						)}
-					</div>
+						</div>
+					)}
 				</div>
 			</section>
 

src/components/Nav.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 
-import { Link as GLink, Select, Spacer, Text } from "@geist-ui/react";
+import { Button, Link as GLink, Select, Spacer, Text } from "@geist-ui/react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import React from "react";
@@ -9,6 +9,7 @@ import logo from "../assets/logo/reacher.svg";
 import { sentryException } from "@/util/sentry";
 import { useUser } from "@/util/useUser";
 import styles from "./Nav.module.css";
+import Link from "next/link";
 
 export function Nav(): React.ReactElement {
 	const { user, userDetails, signOut } = useUser();
@@ -64,7 +65,7 @@ export function Nav(): React.ReactElement {
 					Help Center
 				</GLink>
 			</div>
-			{user && (
+			{user ? (
 				<Select
 					className={styles.dropdown}
 					placeholder={userDetails?.full_name || user.email}
@@ -79,6 +80,18 @@ export function Nav(): React.ReactElement {
 						Log Out{" "}
 					</Select.Option>
 				</Select>
+			) : (
+				<>
+					<Link href="/login">
+						<Button auto>Login</Button>
+					</Link>
+					<Spacer x={0.5} />
+					<Link href="/signup">
+						<Button auto type="success">
+							Get Started - 50 free emails
+						</Button>
+					</Link>
+				</>
 			)}
 		</header>
 	);

src/components/ProductCard/Card.tsx

@@ -5,20 +5,22 @@ import React from "react";
 import styles from "./Card.module.css";
 
 export interface CardProps extends React.HTMLProps<HTMLDivElement> {
-	body?: string | React.ReactChild;
-	cta?: string | React.ReactChild;
-	features?: (string | React.ReactChild)[];
-	header: string | React.ReactChild;
-	price?: string | React.ReactChild;
-	subtitle?: string | React.ReactChild;
-	footer?: string | React.ReactChild;
+	body?: React.ReactElement;
+	cta?: React.ReactElement;
+	extra?: React.ReactElement;
+	features?: (string | React.ReactElement)[];
+	header?: string | React.ReactElement;
+	price?: string | React.ReactElement;
+	subtitle?: React.ReactElement;
+	footer?: React.ReactElement;
 	title: string;
 }
 
 export function Card({
 	cta,
 	header,
 	features,
+	extra,
 	price,
 	title,
 	subtitle,
@@ -52,6 +54,8 @@ export function Card({
 			<Divider />
 			<Spacer />
 
+			{extra}
+
 			<div>
 				<Text b small>
 					What you get:

src/components/ProductCard/Commercial.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import { Check, Info } from "@geist-ui/react-icons";
+import { ProductCard, ProductCardProps } from "./ProductCard";
+import { Spacer, Text } from "@geist-ui/react";
+import styles from "./Card.module.css";
+
+export function Commercial(props: ProductCardProps): React.ReactElement {
+	return (
+		<ProductCard
+			{...props}
+			extra={
+				<div>
+					<Text b small>
+						What you need to do:
+					</Text>
+					<Spacer />
+					<div className="flex align-center">
+						<div>
+							<Check className={styles.icon} width={24} />
+						</div>
+						<Text small>
+							Purchase servers yourself to self-host Reacher.{" "}
+							<a
+								href="https://help.reacher.email/self-host-guide"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								Read how
+							</a>
+							.
+						</Text>
+					</div>
+					<Spacer />
+				</div>
+			}
+			features={features}
+			footer={
+				<div className="flex">
+					<div>
+						<Info className={styles.icon} width={24} />
+					</div>
+					<Text small>
+						Want a <strong>free trial</strong> before committing?
+						Feel free to try self-hosting with the{" "}
+						<a
+							href="https://help.reacher.email/self-host-guide"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							open-source guide
+						</a>
+						, and subscribe once you&apos;re ready.
+					</Text>
+				</div>
+			}
+			header={
+				<Text b small type="success">
+					🏠 Self-Hosted
+				</Text>
+			}
+			subtitle={
+				<span>
+					<strong>Unlimited</strong> email verifications / mo
+				</span>
+			}
+		/>
+	);
+}
+
+const features = [
+	<span key="licenseFeatures-3">
+		<strong>Unlimited</strong>{" "}
+		<a
+			href="https://help.reacher.email/email-attributes-inside-json"
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			full-featured
+		</a>{" "}
+		email verifications.
+	</span>,
+	<span key="licenseFeatures-1">
+		<strong>💪 Bulk</strong> email verifications.{" "}
+		<a
+			href="https://help.reacher.email/bulk-email-verification"
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			Read more.
+		</a>
+	</span>,
+	<span key="licenseFeatures-2">No data sent back to Reacher.</span>,
+
+	<span key="licenseFeatures-4">
+		<strong>Customer support</strong> via email/chat.
+	</span>,
+	<span key="licenseFeatures-6">
+		See{" "}
+		<a
+			href="https://help.reacher.email/reacher-licenses"
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			full terms and details
+		</a>
+		.
+	</span>,
+];

src/components/ProductCard/FreeTrial.tsx

@@ -26,40 +26,37 @@ export function FreeTrial({
 					{active ? "Current Plan" : "Not available"}
 				</Button>
 			}
-			features={[
-				"50 email verifications per month.",
-				<span key="freeTrial-2">
-					<a
-						href="https://help.reacher.email/email-attributes-inside-json"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						Full-featured
-					</a>{" "}
-					email verifications.
-				</span>,
-				<span key="freeTrial-3">
-					Support via{" "}
-					<a
-						href="https://github.com/reacherhq/check-if-email-exists"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						Github Issues
-					</a>
-					.
-				</span>,
-				"No credit card required.",
-			]}
+			features={features}
 			header="Free Forever"
-			subtitle={
-				<span>
-					Use Reacher&apos;s servers with <br />
-					high IP reputation.
-				</span>
-			}
+			subtitle={<span>50 email verifications / mo</span>}
 			title={productName()}
 			price={priceString}
 		/>
 	);
 }
+
+const features = [
+	"Use Reacher's servers with high IP reputation.",
+	<span key="freeTrial-2">
+		<a
+			href="https://help.reacher.email/email-attributes-inside-json"
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			Full-featured
+		</a>{" "}
+		email verifications.
+	</span>,
+	<span key="freeTrial-3">
+		Support via{" "}
+		<a
+			href="https://github.com/reacherhq/check-if-email-exists"
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			Github Issues
+		</a>
+		.
+	</span>,
+	"No credit card required.",
+];