216 lines
8.0 KiB
JavaScript
216 lines
8.0 KiB
JavaScript
import { useTranslations } from "next-intl";
|
|
import React, { useState } from "react";
|
|
import { Link } from "src/i18n/routing";
|
|
|
|
const PricingHero = () => {
|
|
const [oneMonth, setOneMonth] = useState(0);
|
|
const [threeMonth, setThreeMonth] = useState(0);
|
|
const [oneYear, setOneYear] = useState(0);
|
|
|
|
const t = useTranslations("pricing");
|
|
return (
|
|
<div className="min-h-[100vh]">
|
|
<div className="flex justify-center lg:pt-[150px] xs:pt-[100px] lg:ml-0">
|
|
<div className="ml-1 text-center lg:w-8/12 xs:w-full">
|
|
<h1 className="text-white font-semibold md:text-[80px] sm:text-[60px] xs:text-[40px] text-[18px] mt-4">
|
|
{t("title")}
|
|
</h1>
|
|
<p className="mb-0 sm:text-[20px] xs:text-[20px] lg:text-center xs:text-center text-secondary tracking-wider text-gray-100 font-thin xs:px-5 ">
|
|
{t("desc")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="grid xs:grid-cols-1 lg:grid-cols-3 gap-10 xs:px-[20px] lg:px-[100px] mt-10">
|
|
<div className="flex p-3 ">
|
|
<div className="w-4/12 ">
|
|
<div
|
|
className={`bg-[#132420] p-4 rounded-l-3xl cursor-pointer tr03 ${
|
|
oneMonth == 0 ? " " : "opacity-50"
|
|
} `}
|
|
onClick={() => setOneMonth(0)}
|
|
>
|
|
<p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
|
|
{t("oneMounth.users1")}
|
|
</p>
|
|
</div>
|
|
<div
|
|
className={`bg-[#132420] p-4 rounded-l-3xl mt-3 cursor-pointer tr03 ${
|
|
oneMonth == 1 ? " " : "opacity-50"
|
|
} `}
|
|
onClick={() => setOneMonth(1)}
|
|
>
|
|
<p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
|
|
{t("oneMounth.users2")}{" "}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`bg-[#132420] p-4 rounded-l-3xl mt-3 cursor-pointer tr03 ${
|
|
oneMonth == 2 ? " " : "opacity-50"
|
|
} `}
|
|
onClick={() => setOneMonth(2)}
|
|
>
|
|
<p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
|
|
{t("oneMounth.users3")}{" "}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-8/12 bg-[#132420] xs:p-5 lg:p-10 rounded-r-3xl rounded-bl-3xl">
|
|
<h2 className="mb-0 text-center font-bold xs:text-[18px] lg:text-[25px] text-gray-400">
|
|
{t("oneMounth.title")}{" "}
|
|
</h2>
|
|
|
|
<p className="mb-0 text-center text-white xs:text-[25px] lg:text-[33px] font-bold">
|
|
{oneMonth == 0
|
|
? t("oneMounth.pricing1")
|
|
: oneMonth == 1
|
|
? t("oneMounth.pricing2")
|
|
: oneMonth == 2
|
|
? t("oneMounth.pricing3")
|
|
: t("oneMounth.pricing1")}
|
|
</p>
|
|
|
|
<p className="mb-0 text-sm text-center text-gray-400">
|
|
{t("oneMounth.desc")}{" "}
|
|
</p>
|
|
<div className="flex justify-center mt-10">
|
|
<Link href="/app/login">
|
|
<button className="px-10 py-2 rounded-full btn btn-primary xs:hidden lg:block">
|
|
{t("oneMounth.button")}{" "}
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex p-3 ">
|
|
<div className="w-4/12 ">
|
|
<div
|
|
className={`bg-[#132420] p-4 rounded-l-3xl cursor-pointer tr03 ${
|
|
threeMonth == 0 ? " " : "opacity-50"
|
|
} `}
|
|
onClick={() => setThreeMonth(0)}
|
|
>
|
|
<p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
|
|
{t("threeMounth.users1")}
|
|
</p>
|
|
</div>
|
|
<div
|
|
className={`bg-[#132420] p-4 rounded-l-3xl mt-3 cursor-pointer tr03 ${
|
|
threeMonth == 1 ? " " : "opacity-50"
|
|
} `}
|
|
onClick={() => setThreeMonth(1)}
|
|
>
|
|
<p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
|
|
{t("threeMounth.users2")}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`bg-[#132420] p-4 rounded-l-3xl mt-3 cursor-pointer tr03 ${
|
|
threeMonth == 2 ? " " : "opacity-50"
|
|
} `}
|
|
onClick={() => setThreeMonth(2)}
|
|
>
|
|
<p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
|
|
{t("threeMounth.users3")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-8/12 bg-[#132420] xs:p-5 lg:p-10 rounded-r-3xl rounded-bl-3xl">
|
|
<h2 className="mb-0 text-center font-bold xs:text-[18px] lg:text-[25px] text-gray-400">
|
|
{t("threeMounth.title")}{" "}
|
|
</h2>
|
|
|
|
<p className="mb-0 text-center text-white xs:text-[25px] lg:text-[33px] font-bold">
|
|
{threeMonth == 0
|
|
? t("threeMounth.pricing1")
|
|
: threeMonth == 1
|
|
? t("threeMounth.pricing2")
|
|
: threeMonth == 2
|
|
? t("threeMounth.pricing3")
|
|
: t("threeMounth.pricing1")}
|
|
</p>
|
|
|
|
<p className="mb-0 text-sm text-center text-gray-400">
|
|
{t("threeMounth.desc")}{" "}
|
|
</p>
|
|
<div className="flex justify-center mt-10">
|
|
<Link href="/app/login">
|
|
<button className="px-10 py-2 rounded-full btn btn-primary xs:hidden lg:block">
|
|
{t("threeMounth.button")}{" "}
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex p-3 ">
|
|
<div className="w-4/12 ">
|
|
<div
|
|
className={`bg-[#132420] p-4 rounded-l-3xl cursor-pointer tr03 ${
|
|
oneYear == 0 ? " " : "opacity-50"
|
|
} `}
|
|
onClick={() => setOneYear(0)}
|
|
>
|
|
<p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
|
|
{t("sixMounth.users1")}{" "}
|
|
</p>
|
|
</div>
|
|
<div
|
|
className={`bg-[#132420] p-4 rounded-l-3xl mt-3 cursor-pointer tr03 ${
|
|
oneYear == 1 ? " " : "opacity-50"
|
|
} `}
|
|
onClick={() => setOneYear(1)}
|
|
>
|
|
<p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
|
|
{t("sixMounth.users2")}{" "}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`bg-[#132420] p-4 rounded-l-3xl mt-3 cursor-pointer tr03 ${
|
|
oneYear == 2 ? " " : "opacity-50"
|
|
} `}
|
|
onClick={() => setOneYear(2)}
|
|
>
|
|
<p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
|
|
{t("sixMounth.users3")}{" "}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-8/12 bg-[#132420] xs:p-5 lg:p-10 rounded-r-3xl rounded-bl-3xl">
|
|
<h2 className="mb-0 text-center font-bold xs:text-[18px] lg:text-[25px] text-gray-400">
|
|
{t("sixMounth.title")}{" "}
|
|
</h2>
|
|
|
|
<p className="mb-0 text-center text-white xs:text-[25px] lg:text-[33px] font-bold">
|
|
{oneYear == 0
|
|
? t("sixMounth.pricing1")
|
|
: oneYear == 1
|
|
? t("sixMounth.pricing2")
|
|
: oneYear == 2
|
|
? t("sixMounth.pricing3")
|
|
: t("sixMounth.pricing1")}
|
|
</p>
|
|
|
|
<p className="mb-0 text-sm text-center text-gray-400">
|
|
{t("sixMounth.desc")}{" "}
|
|
</p>
|
|
<div className="flex justify-center mt-10">
|
|
<Link href="/app/login">
|
|
<button className="px-10 py-2 rounded-full btn btn-primary xs:hidden lg:block">
|
|
{t("sixMounth.button")}{" "}
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PricingHero;
|