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 React from "react";
|
||||||
import Footer from "./LandingPage/Footer";
|
import Footer from "./LandingPage/Footer";
|
||||||
|
import PricingPlans from "./payments/PricingPlans";
|
||||||
|
|
||||||
const PricingPage: React.FC = () => {
|
const PricingPage: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-8">
|
<div className="container mx-auto px-4 py-8">
|
||||||
<h1 className="text-3xl font-bold mb-6">Pricing</h1>
|
<h1 className="text-3xl font-bold mb-6">Screenshot to Code Pricing</h1>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
{/* Basic Plan */}
|
<PricingPlans />
|
||||||
<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>
|
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,19 +7,12 @@ import {
|
|||||||
DialogTitle,
|
DialogTitle,
|
||||||
DialogTrigger,
|
DialogTrigger,
|
||||||
} from "../../ui/dialog";
|
} 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 { useStore } from "../../../store/store";
|
||||||
|
import PricingPlans from "./PricingPlans";
|
||||||
|
|
||||||
const LOGOS = ["microsoft", "amazon", "mit", "stanford", "bytedance", "baidu"];
|
const LOGOS = ["microsoft", "amazon", "mit", "stanford", "bytedance", "baidu"];
|
||||||
|
|
||||||
const PricingDialog: React.FC = () => {
|
const PricingDialog: React.FC = () => {
|
||||||
const { checkout, isLoadingCheckout } = useStripeCheckout();
|
|
||||||
const [paymentInterval, setPaymentInterval] = React.useState<
|
|
||||||
"monthly" | "yearly"
|
|
||||||
>("monthly");
|
|
||||||
const subscriberTier = useStore((state) => state.subscriberTier);
|
const subscriberTier = useStore((state) => state.subscriberTier);
|
||||||
const [showDialog, setShowDialog] = useStore((state) => [
|
const [showDialog, setShowDialog] = useStore((state) => [
|
||||||
state.isPricingDialogOpen,
|
state.isPricingDialogOpen,
|
||||||
@ -43,114 +36,8 @@ const PricingDialog: React.FC = () => {
|
|||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
<div className="flex justify-center gap-x-2 mt-2">
|
<PricingPlans />
|
||||||
<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>
|
|
||||||
<p className="text-center text-xs text-gray-600 mt-1">
|
<p className="text-center text-xs text-gray-600 mt-1">
|
||||||
1 credit = 1 code generation. <br />
|
1 credit = 1 code generation. <br />
|
||||||
Cancel subscription at any time.
|
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