51 lines
2.0 KiB
JavaScript
51 lines
2.0 KiB
JavaScript
import Section from "@/components/Section";
|
|
import Heading from "@/components/Heading";
|
|
import PricingList from "@/components/PricingList";
|
|
import { useState } from "react";
|
|
import Logos from "@/components/Logos";
|
|
|
|
type PricingProps = {};
|
|
|
|
const Pricing = ({}: PricingProps) => {
|
|
const [monthly, setMonthly] = useState<boolean>(false);
|
|
|
|
return (
|
|
<Section className="overflow-hidden">
|
|
<div className="container relative z-2 md:pt-10 lg:pt-16 xl:pt-20">
|
|
<Heading
|
|
textAlignClassName="text-center"
|
|
titleLarge="Pay once, use forever"
|
|
textLarge="Get started with Brainwave - AI chat app today and experience the power of AI in your conversations!"
|
|
/>
|
|
<div className="w-[19rem] mx-auto mb-10 p-0.25 bg-gradient-to-b from-[#D77DEE]/90 to-n-1/15 rounded-xl">
|
|
<div className="flex p-[0.1875rem] bg-n-8 rounded-[0.6875rem]">
|
|
<button
|
|
className={`button flex-1 h-10 rounded-lg transition-colors ${
|
|
monthly ? "bg-n-6" : ""
|
|
}`}
|
|
onClick={() => setMonthly(true)}
|
|
>
|
|
monthly
|
|
</button>
|
|
<button
|
|
className={`button flex-1 h-10 rounded-lg transition-colors ${
|
|
monthly ? "" : "bg-n-6"
|
|
}`}
|
|
onClick={() => setMonthly(false)}
|
|
>
|
|
annually
|
|
<span className="ml-2.5 p-1 bg-color-1 rounded">
|
|
-10%
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<PricingList monthly={monthly} />
|
|
<Logos className="hidden mt-20 lg:block" />
|
|
</div>
|
|
</Section>
|
|
);
|
|
};
|
|
|
|
export default Pricing;
|