add a separate pricing page
This commit is contained in:
Abi Raja
parent
75e93a66b8
commit
2274268b2f
@ -1,51 +1,13 @@
|
||||
import React from "react";
|
||||
import Footer from "./LandingPage/Footer";
|
||||
import PricingPlans from "./payments/PricingPlans";
|
||||
|
||||
const PricingPage: React.FC = () => {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<h1 className="text-3xl font-bold mb-6">Pricing</h1>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Basic Plan */}
|
||||
<div className="border rounded-lg p-6">
|
||||
<h2 className="text-2xl font-semibold mb-4">Basic</h2>
|
||||
<p className="text-3xl font-bold mb-4">$9.99/mo</p>
|
||||
<ul className="list-disc list-inside mb-6">
|
||||
<li>Feature 1</li>
|
||||
<li>Feature 2</li>
|
||||
<li>Feature 3</li>
|
||||
</ul>
|
||||
<button className="bg-blue-500 text-white px-4 py-2 rounded">
|
||||
Choose Plan
|
||||
</button>
|
||||
</div>
|
||||
{/* Pro Plan */}
|
||||
<div className="border rounded-lg p-6 bg-gray-100">
|
||||
<h2 className="text-2xl font-semibold mb-4">Pro</h2>
|
||||
<p className="text-3xl font-bold mb-4">$19.99/mo</p>
|
||||
<ul className="list-disc list-inside mb-6">
|
||||
<li>All Basic features</li>
|
||||
<li>Feature 4</li>
|
||||
<li>Feature 5</li>
|
||||
</ul>
|
||||
<button className="bg-blue-600 text-white px-4 py-2 rounded">
|
||||
Choose Plan
|
||||
</button>
|
||||
</div>
|
||||
{/* Enterprise Plan */}
|
||||
<div className="border rounded-lg p-6">
|
||||
<h2 className="text-2xl font-semibold mb-4">Enterprise</h2>
|
||||
<p className="text-3xl font-bold mb-4">Custom</p>
|
||||
<ul className="list-disc list-inside mb-6">
|
||||
<li>All Pro features</li>
|
||||
<li>Custom integrations</li>
|
||||
<li>Dedicated support</li>
|
||||
</ul>
|
||||
<button className="bg-blue-500 text-white px-4 py-2 rounded">
|
||||
Contact Sales
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold mb-6">Screenshot to Code Pricing</h1>
|
||||
|
||||
<PricingPlans />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
@ -7,19 +7,12 @@ import {
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "../../ui/dialog";
|
||||
import { FaCheckCircle } from "react-icons/fa";
|
||||
import Spinner from "../../custom-ui/Spinner";
|
||||
import useStripeCheckout from "./useStripeCheckout";
|
||||
import { Button } from "../../ui/button";
|
||||
import { useStore } from "../../../store/store";
|
||||
import PricingPlans from "./PricingPlans";
|
||||
|
||||
const LOGOS = ["microsoft", "amazon", "mit", "stanford", "bytedance", "baidu"];
|
||||
|
||||
const PricingDialog: React.FC = () => {
|
||||
const { checkout, isLoadingCheckout } = useStripeCheckout();
|
||||
const [paymentInterval, setPaymentInterval] = React.useState<
|
||||
"monthly" | "yearly"
|
||||
>("monthly");
|
||||
const subscriberTier = useStore((state) => state.subscriberTier);
|
||||
const [showDialog, setShowDialog] = useStore((state) => [
|
||||
state.isPricingDialogOpen,
|
||||
@ -43,114 +36,8 @@ const PricingDialog: React.FC = () => {
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex justify-center gap-x-2 mt-2">
|
||||
<Button
|
||||
variant={paymentInterval === "monthly" ? "default" : "secondary"}
|
||||
onClick={() => setPaymentInterval("monthly")}
|
||||
>
|
||||
Monthly
|
||||
</Button>
|
||||
<Button
|
||||
variant={paymentInterval === "yearly" ? "default" : "secondary"}
|
||||
onClick={() => setPaymentInterval("yearly")}
|
||||
>
|
||||
Yearly (2 months free)
|
||||
</Button>
|
||||
</div>
|
||||
<PricingPlans />
|
||||
|
||||
<div className="flex justify-center items-center">
|
||||
<div className="grid grid-cols-2 gap-8 p-2">
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="font-semibold">Hobby</h2>
|
||||
<p className="text-gray-500">Great to start</p>
|
||||
<div className="my-4">
|
||||
<span className="text-4xl font-bold">
|
||||
{paymentInterval === "monthly" ? "$15" : "$150"}
|
||||
</span>
|
||||
<span className="text-gray-500">
|
||||
{paymentInterval === "monthly" ? "/ month" : "/ year"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="bg-black text-white rounded py-2 px-4 w-full text-sm
|
||||
flex justify-center items-center gap-x-2"
|
||||
onClick={() =>
|
||||
checkout(
|
||||
paymentInterval === "monthly"
|
||||
? "hobby_monthly"
|
||||
: "hobby_yearly"
|
||||
)
|
||||
}
|
||||
>
|
||||
Subscribe {isLoadingCheckout && <Spinner />}
|
||||
</button>
|
||||
|
||||
<ul className="mt-4 space-y-2">
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
100 credits / mo
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
OpenAI models
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
Claude models
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
Chat support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="font-semibold">Pro</h2>
|
||||
<p className="text-gray-500">Higher limits</p>
|
||||
<div className="my-4">
|
||||
<span className="text-4xl font-bold">
|
||||
{paymentInterval === "monthly" ? "$40" : "$400"}
|
||||
</span>
|
||||
<span className="text-gray-500">
|
||||
{paymentInterval === "monthly" ? "/ month" : "/ year"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="bg-black text-white rounded py-2 px-4 w-full text-sm
|
||||
flex justify-center items-center gap-x-2"
|
||||
onClick={() =>
|
||||
checkout(
|
||||
paymentInterval === "monthly" ? "pro_monthly" : "pro_yearly"
|
||||
)
|
||||
}
|
||||
>
|
||||
Subscribe {isLoadingCheckout && <Spinner />}
|
||||
</button>
|
||||
|
||||
<ul className="mt-4 space-y-2">
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
300 credits / mo
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
OpenAI models
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
Claude models
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
Chat support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center text-xs text-gray-600 mt-1">
|
||||
1 credit = 1 code generation. <br />
|
||||
Cancel subscription at any time.
|
||||
|
||||
126
frontend/src/components/hosted/payments/PricingPlans.tsx
Normal file
126
frontend/src/components/hosted/payments/PricingPlans.tsx
Normal file
@ -0,0 +1,126 @@
|
||||
import { FaCheckCircle } from "react-icons/fa";
|
||||
import Spinner from "../../custom-ui/Spinner";
|
||||
import React from "react";
|
||||
import { Button } from "../../ui/button";
|
||||
import useStripeCheckout from "./useStripeCheckout";
|
||||
|
||||
function PricingPlans() {
|
||||
const { checkout, isLoadingCheckout } = useStripeCheckout();
|
||||
const [paymentInterval, setPaymentInterval] = React.useState<
|
||||
"monthly" | "yearly"
|
||||
>("monthly");
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-center gap-x-2 mt-2">
|
||||
<Button
|
||||
variant={paymentInterval === "monthly" ? "default" : "secondary"}
|
||||
onClick={() => setPaymentInterval("monthly")}
|
||||
>
|
||||
Monthly
|
||||
</Button>
|
||||
<Button
|
||||
variant={paymentInterval === "yearly" ? "default" : "secondary"}
|
||||
onClick={() => setPaymentInterval("yearly")}
|
||||
>
|
||||
Yearly (2 months free)
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex justify-center items-center">
|
||||
<div className="grid grid-cols-2 gap-8 p-2">
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="font-semibold">Hobby</h2>
|
||||
<p className="text-gray-500">Great to start</p>
|
||||
<div className="my-4">
|
||||
<span className="text-4xl font-bold">
|
||||
{paymentInterval === "monthly" ? "$15" : "$150"}
|
||||
</span>
|
||||
<span className="text-gray-500">
|
||||
{paymentInterval === "monthly" ? "/ month" : "/ year"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="bg-black text-white rounded py-2 px-4 w-full text-sm
|
||||
flex justify-center items-center gap-x-2"
|
||||
onClick={() =>
|
||||
checkout(
|
||||
paymentInterval === "monthly"
|
||||
? "hobby_monthly"
|
||||
: "hobby_yearly"
|
||||
)
|
||||
}
|
||||
>
|
||||
Subscribe {isLoadingCheckout && <Spinner />}
|
||||
</button>
|
||||
|
||||
<ul className="mt-4 space-y-2">
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
100 credits / mo
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
OpenAI models
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
Claude models
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
Chat support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="font-semibold">Pro</h2>
|
||||
<p className="text-gray-500">Higher limits</p>
|
||||
<div className="my-4">
|
||||
<span className="text-4xl font-bold">
|
||||
{paymentInterval === "monthly" ? "$40" : "$400"}
|
||||
</span>
|
||||
<span className="text-gray-500">
|
||||
{paymentInterval === "monthly" ? "/ month" : "/ year"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="bg-black text-white rounded py-2 px-4 w-full text-sm
|
||||
flex justify-center items-center gap-x-2"
|
||||
onClick={() =>
|
||||
checkout(
|
||||
paymentInterval === "monthly" ? "pro_monthly" : "pro_yearly"
|
||||
)
|
||||
}
|
||||
>
|
||||
Subscribe {isLoadingCheckout && <Spinner />}
|
||||
</button>
|
||||
|
||||
<ul className="mt-4 space-y-2">
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
300 credits / mo
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
OpenAI models
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
Claude models
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
Chat support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default PricingPlans;
|
||||
Loading…
Reference in New Issue
Block a user