diff --git a/src/app/plans/page.tsx b/src/app/plans/page.tsx
new file mode 100644
index 0000000..ee22efe
--- /dev/null
+++ b/src/app/plans/page.tsx
@@ -0,0 +1,154 @@
+import { Button } from "@/components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardTitle,
+ CardHeader,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import Link from "next/link";
+import { ReactNode } from "react";
+
+type Plan = {
+ name: string;
+ price: string;
+ features: ReactNode[];
+ planned?: boolean;
+};
+
+export default async function Page() {
+ const pricing: Plan[] = [
+ {
+ name: "Starter",
+ price: "Free",
+ features: [
+ "Free use of community features",
+ "Automated Farming",
+ "Hands-free Gaming",
+ ],
+ },
+ {
+ planned: true,
+ name: "Pro",
+ price: "$/month",
+ features: [
+ "Improved Fighting Strategies",
+ "Advanced Farming",
+ "Everything in Starter",
+ ],
+ },
+ {
+ planned: true,
+ name: "Unlimited",
+ price: "$$/month",
+ features: ["Up to XX Clients", "Priority support", "Everything in Pro"],
+ },
+ ];
+
+ return (
+
+
+
+ Choose your bot plan
+
+
+
+
+ {pricing.map((plan) => (
+
+
+
+
+ {plan.name}
+ {plan.price}
+
+
+
+ {plan.features
+ .filter((feature) => feature !== null)
+ .map((feature) => (
+ -
+ {feature}
+
+ ))}
+
+
+
+
+ {plan.price === "Free" ? (
+
+ ) : (
+
+ )}
+
+
+
+ ))}
+
+
+ );
+}
+
+function PlanWrapper({
+ plan,
+ children,
+}: Readonly<{ plan: Plan; children: ReactNode }>) {
+ if (!plan.planned) {
+ return <>{children}>;
+ }
+
+ return (
+
+
+
+ {children}
+
+
+ Coming soon
+
+
+
+ );
+}
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..afa13ec
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }