201 lines
7.5 KiB
JavaScript
201 lines
7.5 KiB
JavaScript
import Link from "next/link";
|
|
import React, { useState } from "react";
|
|
|
|
const PricingHero = () => {
|
|
const [oneMonth, setOneMonth] = useState(0);
|
|
const [threeMonth, setThreeMonth] = useState(0);
|
|
const [oneYear, setOneYear] = useState(0);
|
|
return (
|
|
<div className="min-h-[100vh]">
|
|
<div className="flex justify-center lg:pt-[150px] xs:pt-[100px] lg:ml-0">
|
|
<div className=" ml-1 lg:w-8/12 xs:w-full text-center ">
|
|
<h1 className="text-white font-semibold md:text-[80px] sm:text-[60px] xs:text-[40px] text-[18px] mt-4">
|
|
Pricing
|
|
</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 ">
|
|
Tailor your coffee shop management with our time-flexible pricing
|
|
plans. All packages offer the same comprehensive features, differing
|
|
only in duration to suit your business needs. Choose from monthly,
|
|
quarterly, or annual options, each designed for ease and efficiency.
|
|
</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=" p-3 flex">
|
|
<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 text-xl">up 10 user</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 text-xl">up 25 user</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 text-xl">up 50 user</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-8/12 bg-[#132420] p-10 rounded-r-3xl rounded-bl-3xl">
|
|
<h2 className="mb-0 text-center font-bold text-[25px] text-gray-400">
|
|
1 Mounth
|
|
</h2>
|
|
|
|
<p className="mb-0 text-center text-white text-[33px] font-bold">
|
|
{oneMonth == 0
|
|
? " 15,000,000 R"
|
|
: oneMonth == 1
|
|
? " 24,000,000 R"
|
|
: oneMonth == 2
|
|
? " 29,500,000 R"
|
|
: " 15,000,000 R"}
|
|
</p>
|
|
|
|
<p className="mb-0 text-center text-gray-400 text-sm">
|
|
It could be the best package for you, so feel free to use the
|
|
14-day free trial
|
|
</p>
|
|
<div className="flex justify-center mt-10">
|
|
<Link href="/app/login">
|
|
<button className=" btn btn-primary px-10 rounded-full py-2 xs:hidden lg:block">
|
|
Get started
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className=" p-3 flex">
|
|
<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 text-xl">up 10 user</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 text-xl">up 25 user</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 text-xl">up 50 user</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-8/12 bg-[#132420] p-10 rounded-r-3xl rounded-bl-3xl">
|
|
<h2 className="mb-0 text-center font-bold text-[25px] text-gray-400">
|
|
3 Mounth
|
|
</h2>
|
|
|
|
<p className="mb-0 text-center text-white text-[33px] font-bold">
|
|
{threeMonth == 0
|
|
? " 36,000,000 R"
|
|
: threeMonth == 1
|
|
? " 57,600,000 R"
|
|
: threeMonth == 2
|
|
? " 70,800,000 R"
|
|
: " 36,000,000 R"}{" "}
|
|
</p>
|
|
|
|
<p className="mb-0 text-center text-gray-400 text-sm">
|
|
It could be the best package for you, so feel free to use the
|
|
14-day free trial
|
|
</p>
|
|
<div className="flex justify-center mt-10">
|
|
<Link href="/app/login">
|
|
<button className=" btn btn-primary px-10 rounded-full py-2 xs:hidden lg:block">
|
|
Get started
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className=" p-3 flex">
|
|
<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 text-xl">up 10 user</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 text-xl">up 25 user</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 text-xl">up 50 user</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-8/12 bg-[#132420] p-10 rounded-r-3xl rounded-bl-3xl">
|
|
<h2 className="mb-0 text-center font-bold text-[25px] text-gray-400">
|
|
12 Mounth
|
|
</h2>
|
|
|
|
<p className="mb-0 text-center text-white text-[33px] font-bold">
|
|
{oneYear == 0
|
|
? " 108,000,000 R"
|
|
: oneYear == 1
|
|
? " 172,800,000 R"
|
|
: oneYear == 2
|
|
? " 212,400,000 R"
|
|
: " 108,000,000 R"}{" "}
|
|
</p>
|
|
|
|
<p className="mb-0 text-center text-gray-400 text-sm">
|
|
It could be the best package for you, so feel free to use the
|
|
14-day free trial
|
|
</p>
|
|
<div className="flex justify-center mt-10">
|
|
<Link href="/app/login">
|
|
<button className=" btn btn-primary px-10 rounded-full py-2 xs:hidden lg:block">
|
|
Get started
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PricingHero;
|