57 lines
2.3 KiB
JavaScript
57 lines
2.3 KiB
JavaScript
import React from "react";
|
|
|
|
const PricingHero = () => {
|
|
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 lg:flex lg:justify-center xs:px-10 lg:px-[120px] mt-20">
|
|
<div className="p-5 text-center lg:mx-10">
|
|
<p className="mb-0 text-white text-[30px] font-thin bg-primary-300 w-fit mx-auto px-4 rounded-full">
|
|
per Month
|
|
</p>
|
|
|
|
<p className="mb-0 text-[100px] font-bold text-white mt-10">46 €</p>
|
|
</div>
|
|
|
|
<div className="p-5 text-center lg:mx-10">
|
|
<p className="mb-0 text-white text-[30px] font-thin bg-primary-300 w-fit mx-auto px-4 rounded-full">
|
|
3 Months
|
|
</p>
|
|
<div className="flex justify-center">
|
|
<del className="mb-0 text-[30px] text-white absolute mt-[15px]">
|
|
138 €
|
|
</del>
|
|
</div>
|
|
<p className="mb-0 text-[100px] font-bold text-white mt-10">110 €</p>
|
|
</div>
|
|
|
|
<div className="p-5 text-center lg:mx-10">
|
|
<p className="mb-0 text-white text-[30px] font-thin bg-primary-300 w-fit mx-auto px-4 rounded-full">
|
|
12 Months
|
|
</p>
|
|
<div className="flex justify-center">
|
|
<del className="mb-0 text-[30px] text-white absolute mt-[15px]">
|
|
552 €
|
|
</del>
|
|
</div>
|
|
<p className="mb-0 text-[100px] font-bold text-white mt-10">390 €</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PricingHero;
|