"use client"; import clsx from "clsx"; import { cn } from "@/lib/utils"; import { ArrowRight, MinusIcon, PlusIcon } from "lucide-react"; import { useTranslations } from "next-intl"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { use, useState } from "react"; import { Container } from "./Container"; import { trackGAEvent } from "./analitycs"; import { Badge } from "./ui/badge"; import { Button, buttonVariants } from "./ui/button"; import { NumberInput } from "./ui/input"; import { Tabs, TabsList, TabsTrigger } from "./ui/tabs"; function SwirlyDoodle(props: React.ComponentPropsWithoutRef<"svg">) { return ( ); } function CheckIcon({ className, ...props }: React.ComponentPropsWithoutRef<"svg">) { return ( ); } export const calculatePrice = (count: number, isAnnual = false) => { if (isAnnual) { if (count <= 1) return 45.9; return 35.7 * count; } if (count <= 1) return 4.5; return count * 3.5; }; function Plan({ name, price, description, href, features, featured = false, buttonText = "Get Started", }: { name: string; price: string; description: string; href: string; features: Array; featured?: boolean; buttonText?: string; }) { const router = useRouter(); return (

{name}

{description}

{price}

    {features.map((feature) => (
  • {feature}
    • ))}
); } export function Pricing() { const router = useRouter(); const t = useTranslations("Pricing"); const [isAnnual, setIsAnnual] = useState(true); const [serverQuantity, setServerQuantity] = useState(3); const featured = true; return (

{t("swirlyDoodleTitle")} {" "} {t("restTitle")}

{t("description")}

setIsAnnual(e === "annual")} > {t("billingCycle.monthly")} {t("billingCycle.annual")}

{t("plan.free.title")}

|

{t("plan.free.subTitle")}

{t("plan.free.section.title")}

{t("plan.free.section.description")}

    {[ t("plan.free.features.f1"), t("plan.free.features.f2"), t("plan.free.features.f3"), t("plan.free.features.f4"), t("plan.free.features.f5"), t("plan.free.features.f6"), t("plan.free.features.f7"), t("plan.free.features.f8"), ].map((feature) => (
  • {feature}
    • ))}
{t("plan.free.features.f9")} {t("plan.free.go")}{" "}
{isAnnual && (
{t("plan.cloud.title")} 🚀
)} {isAnnual ? (

$ {calculatePrice(serverQuantity, isAnnual).toFixed(2)}{" "} USD

|

${" "} {(calculatePrice(serverQuantity, isAnnual) / 12).toFixed( 2, )}{" "} / Month USD

) : (

$ {calculatePrice(serverQuantity, isAnnual).toFixed(2)} USD

)}

{t("plan.cloud.section.title")}

{t("plan.cloud.section.description")}

    {[ t("plan.cloud.features.f1"), t("plan.cloud.features.f2"), t("plan.cloud.features.f3"), ].map((feature) => (
  • {feature}
    • ))}
{t("plan.cloud.servers", { serverQuantity, })}
{ setServerQuantity(e.target.value as unknown as number); }} />
{t("plan.cloud.go")}
); } const faqs = [ [ { question: "faq.q1", answer: "faq.a1", }, { question: "faq.q2", answer: "faq.a2", }, { question: "faq.q3", answer: "faq.a3", }, ], [ { question: "faq.q4", answer: "faq.a4", }, { question: "faq.q5", answer: "faq.a5", }, { question: "faq.q6", answer: "faq.a6", }, ], [ { question: "faq.q7", answer: "faq.a7", }, { question: "faq.q8", answer: "faq.a8", }, ], ]; export function Faqs() { const t = useTranslations("Pricing"); return (

{t("faq.title")}

{t("faq.description")}:{" "} support@dokploy.com

    {faqs.map((column, columnIndex) => (
    • {column.map((faq, faqIndex) => (

    • {t(faq.question)}

      {t(faq.answer)}

      • ))}
    • ))}
); }