53 lines
1.8 KiB
JavaScript
53 lines
1.8 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] xs:ml-5 lg:ml-0">
|
|
<div className=" ml-1 ">
|
|
<h1
|
|
className={`font-black text-white lg:text-[100px] sm:text-[70px] xs:text-[60px] text-[40px] mb-0 `}
|
|
>
|
|
Pricing
|
|
</h1>
|
|
</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">
|
|
6 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;
|