mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-13 21:32:18 +00:00
pricing update
This commit is contained in:
BFlat committed
1 parent
e840322907
commit
6bcdd7b210
2 files changed
+490
-428
No files matched your search
@@ -1,71 +1,176 @@
|
||||
const FAKEYOU_PRICES = {
|
||||
free: {
|
||||
tier: "free",
|
||||
//Starter Tier
|
||||
starter: {
|
||||
tier: "Starter",
|
||||
price: 0,
|
||||
features: {
|
||||
"Extended Audio": false,
|
||||
mp3: false,
|
||||
"Priority Processing": false,
|
||||
"Commercial Voices": false,
|
||||
tts: {
|
||||
title: "TTS",
|
||||
features: ["Unlimited generation", "Up to 12 seconds audio"],
|
||||
},
|
||||
vcweb: {
|
||||
title: "VC Web",
|
||||
features: ["Up to 12 seconds audio"],
|
||||
},
|
||||
vcapp: {
|
||||
title: "VC App",
|
||||
features: [
|
||||
"5 model downloads",
|
||||
"Up to 12 secs prerecorded",
|
||||
"Up to 2 mins realtime",
|
||||
],
|
||||
},
|
||||
w2l: {
|
||||
title: "Wav2Lip",
|
||||
features: ["Up to 12 seconds video"],
|
||||
},
|
||||
priority: {
|
||||
title: "Processing Priority",
|
||||
features: ["Level 1"],
|
||||
},
|
||||
},
|
||||
plus: {
|
||||
tier: "plus",
|
||||
price: 7,
|
||||
features: {
|
||||
"Extended Audio": true,
|
||||
mp3: false,
|
||||
"Priority Processing": false,
|
||||
"Commercial Voices": false,
|
||||
},
|
||||
},
|
||||
pro: {
|
||||
tier: "pro",
|
||||
price: 15,
|
||||
features: {
|
||||
"Extended Audio": true,
|
||||
mp3: true,
|
||||
"Priority Processing": true,
|
||||
"Commercial Voices": true,
|
||||
},
|
||||
},
|
||||
elite: {
|
||||
tier: "elite",
|
||||
price: 25,
|
||||
features: {
|
||||
"Extended Audio": true,
|
||||
mp3: true,
|
||||
"Priority Processing": true,
|
||||
"Commercial Voices": true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const STORYTELLER_PRICES = {
|
||||
free: {
|
||||
tier: "free",
|
||||
price: 0,
|
||||
features: {
|
||||
"Priority Processing": false,
|
||||
"Stream Labs": false,
|
||||
},
|
||||
},
|
||||
//Basic Tier
|
||||
basic: {
|
||||
tier: "basic",
|
||||
price: 5,
|
||||
features: {
|
||||
"Priority Processing": false,
|
||||
"Stream Labs": false,
|
||||
tier: "Basic",
|
||||
price: 3,
|
||||
tts: {
|
||||
title: "TTS",
|
||||
features: ["Unlimited generation", "Up to 20 seconds audio"],
|
||||
},
|
||||
vcweb: {
|
||||
title: "VC Web",
|
||||
features: ["Up to 20 seconds audio", "Push to play"],
|
||||
},
|
||||
vcapp: {
|
||||
title: "VC App",
|
||||
features: [
|
||||
"7 model downloads",
|
||||
"Up to 20 secs prerecorded",
|
||||
"Up to 5 mins realtime",
|
||||
],
|
||||
},
|
||||
w2l: {
|
||||
title: "Wav2Lip",
|
||||
features: ["Up to 30 seconds video"],
|
||||
},
|
||||
priority: {
|
||||
title: "Processing Priority",
|
||||
features: ["Level 10"],
|
||||
},
|
||||
},
|
||||
|
||||
//Plus Tier
|
||||
plus: {
|
||||
tier: "Plus",
|
||||
price: 7,
|
||||
tts: {
|
||||
title: "TTS",
|
||||
features: ["Unlimited generation", "Up to 30 seconds audio"],
|
||||
},
|
||||
vcweb: {
|
||||
title: "VC Web",
|
||||
features: ["Up to 30 seconds audio", "Push to play"],
|
||||
},
|
||||
vcapp: {
|
||||
title: "VC App",
|
||||
features: [
|
||||
"10 model downloads",
|
||||
"Up to 30 secs prerecorded",
|
||||
"Up to 7 mins realtime",
|
||||
],
|
||||
},
|
||||
w2l: {
|
||||
title: "Wav2Lip",
|
||||
features: ["Up to 1 minute video"],
|
||||
},
|
||||
priority: {
|
||||
title: "Processing Priority",
|
||||
features: ["Level 20"],
|
||||
},
|
||||
},
|
||||
|
||||
//Pro Tier
|
||||
pro: {
|
||||
tier: "premium",
|
||||
price: 50,
|
||||
features: {
|
||||
"Priority Processing": true,
|
||||
"Stream Labs": true,
|
||||
tier: "Pro",
|
||||
price: 15,
|
||||
tts: {
|
||||
title: "TTS",
|
||||
features: [
|
||||
"Unlimited generation",
|
||||
"Up to 1 minute audio",
|
||||
"Generate MP3 file",
|
||||
"Upload private models",
|
||||
],
|
||||
},
|
||||
vcweb: {
|
||||
title: "VC Web",
|
||||
features: ["Up to 30 seconds audio", "Push to play", "Generate MP3 file"],
|
||||
},
|
||||
vcapp: {
|
||||
title: "VC App",
|
||||
features: [
|
||||
"20 model downloads",
|
||||
"Up to 5 mins prerecorded",
|
||||
"Up to 15 mins realtime",
|
||||
],
|
||||
},
|
||||
w2l: {
|
||||
title: "Wav2Lip",
|
||||
features: ["Up to 2 minutes video"],
|
||||
},
|
||||
priority: {
|
||||
title: "Processing Priority",
|
||||
features: ["Level 30"],
|
||||
},
|
||||
api: {
|
||||
title: "API Access",
|
||||
features: ["Full API access"],
|
||||
},
|
||||
},
|
||||
|
||||
//Elite Tier
|
||||
elite: {
|
||||
tier: "Elite",
|
||||
price: 25,
|
||||
tts: {
|
||||
title: "TTS",
|
||||
features: [
|
||||
"Unlimited generation",
|
||||
"Up to 5 minutes audio",
|
||||
"Generate MP3 file",
|
||||
"Upload private models",
|
||||
"Share private models",
|
||||
],
|
||||
},
|
||||
vcweb: {
|
||||
title: "VC Web",
|
||||
features: ["Up to 7 minutes audio", "Push to play", "Generate MP3 file"],
|
||||
},
|
||||
vcapp: {
|
||||
title: "VC App",
|
||||
features: [
|
||||
"Unlimited models",
|
||||
"Unlimited prerecorded",
|
||||
"Unlimited realtime",
|
||||
],
|
||||
},
|
||||
w2l: {
|
||||
title: "Wav2Lip",
|
||||
features: ["Up to 2 minutes video"],
|
||||
},
|
||||
priority: {
|
||||
title: "Processing Priority",
|
||||
features: ["Level 40"],
|
||||
},
|
||||
api: {
|
||||
title: "API Access",
|
||||
features: ["Full API access"],
|
||||
},
|
||||
commercial: {
|
||||
title: "Commercial Voices",
|
||||
features: ["FakeYou commercial voices"],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export { FAKEYOU_PRICES, STORYTELLER_PRICES };
|
||||
export { FAKEYOU_PRICES };
|
||||
@@ -1,16 +1,9 @@
|
||||
import React from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
faCheckCircle as TRUE,
|
||||
faTimesCircle as FALSE,
|
||||
faCheck,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { faCheck } from "@fortawesome/free-solid-svg-icons";
|
||||
import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
|
||||
import {
|
||||
FAKEYOU_PRICES as FYP,
|
||||
STORYTELLER_PRICES as STP,
|
||||
} from "@storyteller/fakeyou/src/data/PriceTiers";
|
||||
import { FAKEYOU_PRICES as FYP } from "@storyteller/fakeyou/src/data/PriceTiers";
|
||||
|
||||
interface Props {
|
||||
sessionWrapper: SessionWrapper;
|
||||
@@ -18,45 +11,6 @@ interface Props {
|
||||
}
|
||||
|
||||
function PricingPage(props: Props) {
|
||||
function capitalize(word: string) {
|
||||
return word.charAt(0).toUpperCase() + word.slice(1);
|
||||
}
|
||||
|
||||
const [FY_TIERS, ST_TIERS] = [Object.keys(FYP), Object.keys(STP)];
|
||||
|
||||
const [FY_FEATURES, ST_FEATURES] = [
|
||||
Object.keys(FYP.free.features),
|
||||
Object.keys(STP.free.features),
|
||||
];
|
||||
|
||||
let current_tiers: string[], current_features: string[], current_list: any;
|
||||
|
||||
const site = window.location.hostname;
|
||||
|
||||
switch (site) {
|
||||
case "fakeyou":
|
||||
[current_tiers, current_features, current_list] = [
|
||||
FY_TIERS,
|
||||
FY_FEATURES,
|
||||
FYP,
|
||||
];
|
||||
break;
|
||||
case "storyteller":
|
||||
[current_tiers, current_features, current_list] = [
|
||||
ST_TIERS,
|
||||
ST_FEATURES,
|
||||
STP,
|
||||
];
|
||||
break;
|
||||
default:
|
||||
[current_tiers, current_features, current_list] = [
|
||||
FY_TIERS,
|
||||
FY_FEATURES,
|
||||
FYP,
|
||||
];
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="container py-5 text-center">
|
||||
@@ -65,347 +19,350 @@ function PricingPage(props: Props) {
|
||||
Some kind of description here, idk haven't thought of it.
|
||||
</p>
|
||||
</div>
|
||||
<div className="container mt-3">
|
||||
<div className="container mt-3 mb-5">
|
||||
<div className="row gx-3 gy-4">
|
||||
<div className="col-12 col-sm-6 col-lg-3">
|
||||
<div className="rounded panel p-4 h-100">
|
||||
<h2 className="text-center my-2 fw-bold mb-4">Starter</h2>
|
||||
<h2 className="text-center my-2 fw-bold mb-4">
|
||||
{FYP.starter.tier}
|
||||
</h2>
|
||||
<Link to="/" className="btn btn-secondary w-100 fs-6">
|
||||
Use for free
|
||||
</Link>
|
||||
<h2 className="display-5 fw-bold text-center my-5">
|
||||
${current_list.free.price}
|
||||
${FYP.starter.price}
|
||||
<span className="fs-5 opacity-75 fw-normal"> /month</span>
|
||||
</h2>
|
||||
<ul className="pricing-list d-flex flex-column gap-2">
|
||||
<li className="fw-semibold">TTS</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Unlimited generation
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 12 seconds audio
|
||||
</li>
|
||||
<li className="fw-semibold">VC Web</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 12 seconds audio
|
||||
</li>
|
||||
<li className="fw-semibold">
|
||||
VC App <span className="small-text">(registered users)</span>
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />5
|
||||
model downloads
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 12 secs prerecorded
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 2 mins realtime
|
||||
</li>
|
||||
<li className="fw-semibold">Wav2Lip</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 12 seconds video
|
||||
</li>
|
||||
<li className="fw-semibold">Processing Priority</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="me-3" />
|
||||
Level 0
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Level 1 <span className="small-text">(registered users)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 col-lg-3">
|
||||
<div className="rounded panel p-4 panel-border h-100">
|
||||
<h2 className="text-center my-2 fw-bold mb-4">Plus</h2>
|
||||
<Link to="/" className="btn btn-primary w-100 fs-6">
|
||||
Buy Plus
|
||||
</Link>
|
||||
<h2 className="display-5 fw-bold text-center my-5">
|
||||
${current_list.plus.price}
|
||||
<span className="fs-5 opacity-75 fw-normal"> /month</span>
|
||||
</h2>
|
||||
<ul className="pricing-list d-flex flex-column gap-2">
|
||||
<li className="fw-semibold">TTS</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Unlimited generation
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 30 seconds audio
|
||||
</li>
|
||||
<li className="fw-semibold">VC Web</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 30 seconds audio
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Push to play
|
||||
</li>
|
||||
<li className="fw-semibold">VC App</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
10 model downloads
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 30 secs prerecorded
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 7 mins realtime
|
||||
</li>
|
||||
<li className="fw-semibold">Wav2Lip</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 1 minute video
|
||||
</li>
|
||||
<li className="fw-semibold">Processing Priority</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Level 20
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 col-lg-3">
|
||||
<div className="rounded panel p-4 h-100">
|
||||
<h2 className="text-center my-2 fw-bold mb-4">Pro</h2>
|
||||
<Link to="/" className="btn btn-primary w-100 fs-6">
|
||||
Buy Pro
|
||||
</Link>
|
||||
<h2 className="display-5 fw-bold text-center my-5">
|
||||
${current_list.pro.price}
|
||||
<span className="fs-5 opacity-75 fw-normal"> /month</span>
|
||||
</h2>
|
||||
<ul className="pricing-list d-flex flex-column gap-2">
|
||||
<li className="fw-semibold">TTS</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Unlimited generation
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 1 minute audio
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Generate MP3 file
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Upload private models
|
||||
</li>
|
||||
<li className="fw-semibold">VC Web</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 2 minutes audio
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Push to play
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Generate MP3 file
|
||||
</li>
|
||||
<li className="fw-semibold">VC App</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
20 model downloads
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 5 mins prerecorded
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 15 mins realtime
|
||||
</li>
|
||||
<li className="fw-semibold">Wav2Lip</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 2 minutes video
|
||||
</li>
|
||||
<li className="fw-semibold">Processing Priority</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Level 30
|
||||
</li>
|
||||
<li className="fw-semibold">API Access</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Full API access
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 col-lg-3">
|
||||
<div className="rounded panel p-4 h-100">
|
||||
<h2 className="text-center my-2 fw-bold mb-4">Elite</h2>
|
||||
<Link to="/" className="btn btn-primary w-100 fs-6">
|
||||
Buy Elite
|
||||
</Link>
|
||||
<h2 className="display-5 fw-bold text-center my-5">
|
||||
${current_list.elite.price}
|
||||
<span className="fs-5 opacity-75 fw-normal"> /month</span>
|
||||
</h2>
|
||||
<ul className="pricing-list d-flex flex-column gap-2">
|
||||
<li className="fw-semibold">TTS</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Unlimited generation
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 5 minutes audio
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Generate MP3 file
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Upload private models
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Share private models
|
||||
</li>
|
||||
<li className="fw-semibold">VC Web</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 7 minutes audio
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Push to play
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Generate MP3 file
|
||||
</li>
|
||||
<li className="fw-semibold">VC App</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Unlimited models
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Unlimited prerecorded
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Unlimited realtime
|
||||
</li>
|
||||
<li className="fw-semibold">Wav2Lip</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Up to 5 minutes video
|
||||
</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Turn off watermark
|
||||
</li>
|
||||
<li className="fw-semibold">Processing Priority</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Level 40
|
||||
</li>
|
||||
<li className="fw-semibold">API Access</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
Full API access
|
||||
</li>
|
||||
<li className="fw-semibold">Commercial Voices</li>
|
||||
<li>
|
||||
<FontAwesomeIcon icon={faCheck} className="text-red me-3" />
|
||||
FakeYou commercial voices
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-panel mt-5 py-5">
|
||||
<div className="panel p-4">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="">Feature List</th>
|
||||
|
||||
{current_tiers.map((e) => {
|
||||
<li className="fw-semibold">{FYP.starter.tts.title}</li>
|
||||
{FYP.starter.tts.features.map((e: any) => {
|
||||
return (
|
||||
<th key={e} className="">
|
||||
{capitalize(e)}
|
||||
</th>
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="has-text-weight-bold">Price</td>
|
||||
<td>${current_list.free.price}/month</td>
|
||||
<td>${current_list.plus.price}/month</td>
|
||||
<td>${current_list.pro.price}/month</td>
|
||||
</tr>
|
||||
|
||||
{current_features.map((e, i) => {
|
||||
return (
|
||||
<tr key={i}>
|
||||
<td>{e}</td>
|
||||
|
||||
<td>
|
||||
<li className="fw-semibold">{FYP.starter.vcweb.title}</li>
|
||||
{FYP.starter.vcweb.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={current_list.free.features[e] ? TRUE : FALSE}
|
||||
className={`fa-2x ${
|
||||
current_list.free.features[e]
|
||||
? "has-text-success"
|
||||
: "has-text-danger"
|
||||
}`}
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">
|
||||
{FYP.starter.vcapp.title}{" "}
|
||||
<span className="small-text">(registered users)</span>
|
||||
</li>
|
||||
{FYP.starter.vcapp.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={current_list.plus.features[e] ? TRUE : FALSE}
|
||||
className={`fa-2x ${
|
||||
current_list.plus.features[e]
|
||||
? "has-text-success"
|
||||
: "has-text-danger"
|
||||
}`}
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">{FYP.starter.w2l.title}</li>
|
||||
{FYP.starter.w2l.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={current_list.pro.features[e] ? TRUE : FALSE}
|
||||
className={`fa-2x ${
|
||||
current_list.pro.features[e]
|
||||
? "has-text-success"
|
||||
: "has-text-danger"
|
||||
}`}
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">
|
||||
{FYP.starter.priority.title}{" "}
|
||||
<span className="small-text">(registered users)</span>
|
||||
</li>
|
||||
{FYP.starter.priority.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 col-lg-3">
|
||||
<div className="rounded panel p-4 h-100">
|
||||
<h2 className="text-center my-2 fw-bold mb-4">{FYP.plus.tier}</h2>
|
||||
<Link to="/" className="btn btn-primary w-100 fs-6">
|
||||
Buy {FYP.plus.tier}
|
||||
</Link>
|
||||
<h2 className="display-5 fw-bold text-center my-5">
|
||||
${FYP.plus.price}
|
||||
<span className="fs-5 opacity-75 fw-normal"> /month</span>
|
||||
</h2>
|
||||
<ul className="pricing-list d-flex flex-column gap-2">
|
||||
<li className="fw-semibold">{FYP.plus.tts.title}</li>
|
||||
{FYP.plus.tts.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">{FYP.plus.vcweb.title}</li>
|
||||
{FYP.plus.vcweb.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">{FYP.plus.vcapp.title}</li>
|
||||
{FYP.plus.vcapp.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">{FYP.plus.w2l.title}</li>
|
||||
{FYP.plus.w2l.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">{FYP.plus.priority.title}</li>
|
||||
{FYP.plus.priority.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 col-lg-3">
|
||||
<div className="rounded panel p-4 h-100">
|
||||
<h2 className="text-center my-2 fw-bold mb-4">{FYP.pro.tier}</h2>
|
||||
<Link to="/" className="btn btn-primary w-100 fs-6">
|
||||
Buy {FYP.pro.tier}
|
||||
</Link>
|
||||
<h2 className="display-5 fw-bold text-center my-5">
|
||||
${FYP.pro.price}
|
||||
<span className="fs-5 opacity-75 fw-normal"> /month</span>
|
||||
</h2>
|
||||
<ul className="pricing-list d-flex flex-column gap-2">
|
||||
<li className="fw-semibold">{FYP.pro.tts.title}</li>
|
||||
{FYP.pro.tts.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">{FYP.pro.vcweb.title}</li>
|
||||
{FYP.pro.vcweb.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">{FYP.pro.vcapp.title}</li>
|
||||
{FYP.pro.vcapp.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">{FYP.pro.w2l.title}</li>
|
||||
{FYP.pro.w2l.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">{FYP.pro.priority.title}</li>
|
||||
{FYP.pro.priority.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">{FYP.pro.api.title}</li>
|
||||
{FYP.pro.api.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 col-lg-3">
|
||||
<div className="rounded panel p-4 h-100">
|
||||
<h2 className="text-center my-2 fw-bold mb-4">
|
||||
{FYP.elite.tier}
|
||||
</h2>
|
||||
<Link to="/" className="btn btn-primary w-100 fs-6">
|
||||
Buy {FYP.elite.tier}
|
||||
</Link>
|
||||
<h2 className="display-5 fw-bold text-center my-5">
|
||||
${FYP.elite.price}
|
||||
<span className="fs-5 opacity-75 fw-normal"> /month</span>
|
||||
</h2>
|
||||
<ul className="pricing-list d-flex flex-column gap-2">
|
||||
<li className="fw-semibold">{FYP.elite.tts.title}</li>
|
||||
{FYP.elite.tts.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">{FYP.elite.vcweb.title}</li>
|
||||
{FYP.elite.vcweb.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">{FYP.elite.vcapp.title}</li>
|
||||
{FYP.elite.vcapp.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">{FYP.elite.w2l.title}</li>
|
||||
{FYP.elite.w2l.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">{FYP.elite.priority.title}</li>
|
||||
{FYP.elite.priority.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">{FYP.elite.api.title}</li>
|
||||
{FYP.elite.api.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<li className="fw-semibold">{FYP.elite.commercial.title}</li>
|
||||
{FYP.elite.commercial.features.map((e: any) => {
|
||||
return (
|
||||
<li key={e}>
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
className="text-red me-3"
|
||||
/>
|
||||
{e}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user