mirror of
https://github.com/fosrl/docs.git
synced 2025-05-12 21:30:43 +01:00
664 lines
21 KiB
TypeScript
664 lines
21 KiB
TypeScript
import { useState } from "react";
|
|
import Layout from "@theme/Layout";
|
|
|
|
const PricingComponent = () => {
|
|
const [siteCount, setSiteCount] = useState(3);
|
|
|
|
const handleSiteCountChange = (e) => {
|
|
const value = parseInt(e.target.value);
|
|
if (!isNaN(value) && value >= 1) {
|
|
setSiteCount(value);
|
|
} else {
|
|
setSiteCount(1);
|
|
}
|
|
};
|
|
|
|
const increaseSiteCount = () => {
|
|
setSiteCount(siteCount + 1);
|
|
};
|
|
|
|
const decreaseSiteCount = () => {
|
|
if (siteCount > 1) {
|
|
setSiteCount(siteCount - 1);
|
|
}
|
|
};
|
|
|
|
const calculatePrice = () => {
|
|
return 125 + siteCount * 5;
|
|
};
|
|
|
|
return (
|
|
<Layout title="Pricing" description="Fossorial Pricing Options">
|
|
{/* Pricing Cards */}
|
|
|
|
<div style={styles.pricingContainer}>
|
|
{/* Open Source Plan */}
|
|
<div style={styles.card}>
|
|
<div style={styles.freeTag}>FREE</div>
|
|
<h2 style={styles.cardTitle}>Open Source</h2>
|
|
<ul style={styles.featureList}>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
Perfect for individuals and small teams
|
|
</li>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
Community support
|
|
</li>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
Licensed under AGPL-3.0
|
|
</li>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<a href="/supporter-program">Check out the Supporter Program</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div style={styles.customPricing}>Free</div>
|
|
|
|
<button
|
|
style={styles.buttonSecondary}
|
|
onClick={() =>
|
|
(window.location.href = "/Getting%20Started/quick-install")
|
|
}
|
|
>
|
|
Get Started
|
|
</button>
|
|
</div>
|
|
|
|
{/* Professional Plan */}
|
|
<div style={styles.highlightedCard}>
|
|
<div style={styles.popularTag}>MOST BUSINESSES</div>
|
|
<h2 style={styles.cardTitle}>Professional</h2>
|
|
<ul style={styles.featureList}>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
All Open Source features
|
|
</li>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
Ticket based support
|
|
</li>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
Auto provision IdP users
|
|
</li>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
Robust integration API for automation
|
|
</li>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
Future licensed feature access
|
|
</li>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
<a href="/license.html">Fossorial Commercial License</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div style={styles.counterContainer}>
|
|
<span style={styles.counterLabel}>Base Number of Sites</span>
|
|
<div style={styles.counterControls}>
|
|
<button onClick={decreaseSiteCount} style={styles.counterButton}>
|
|
-
|
|
</button>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
value={siteCount}
|
|
onChange={handleSiteCountChange}
|
|
style={styles.counterInput}
|
|
/>
|
|
<button onClick={increaseSiteCount} style={styles.counterButton}>
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={styles.priceDisplay}>
|
|
${calculatePrice()}
|
|
<span style={styles.pricePeriod}>/month</span>
|
|
</div>
|
|
|
|
<div style={styles.priceBreakdown}>
|
|
Base price $125 + ${siteCount} x $5 per site
|
|
</div>
|
|
<div style={styles.priceBreakdown}>
|
|
Bulk pricing available.{" "}
|
|
<a href="mailto:numbat@fossorial.io">Contact us</a>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() =>
|
|
(window.location.href = `https://payment.fossorial.io/buy/958562da-a87c-4dc8-abba-a3fbfcc1eb7d?quantity=${siteCount}`)
|
|
}
|
|
style={styles.buttonPrimary}
|
|
>
|
|
Subscribe Now
|
|
</button>
|
|
</div>
|
|
|
|
{/* Enterprise Plan */}
|
|
<div style={styles.card}>
|
|
<h2 style={styles.cardTitle}>Enterprise</h2>
|
|
<ul style={styles.featureList}>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
All Professional Features
|
|
</li>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
Tailored agreements
|
|
</li>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
Dedicated support (meetings & calls)
|
|
</li>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
Custom features
|
|
</li>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
Multi-region & HA deployments
|
|
</li>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
Custom branding (white-labeling)
|
|
</li>
|
|
<li style={styles.featureItem}>
|
|
<svg
|
|
style={styles.checkIcon}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
Deployment references & assistance
|
|
</li>
|
|
</ul>
|
|
|
|
<div style={styles.customPricing}>
|
|
Custom pricing <span style={styles.pricePeriod}>($1k+/month)</span>
|
|
</div>
|
|
|
|
<a
|
|
href="mailto:numbat@fossorial.io"
|
|
style={{
|
|
...styles.buttonSecondary,
|
|
textDecoration: "none",
|
|
display: "block",
|
|
textAlign: "center"
|
|
}}
|
|
>
|
|
Schedule a Meeting with Us
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={styles.pricingContainer}>
|
|
<div style={styles.cardLarge}>
|
|
<h1 style={styles.cardTitle}>Professional License FAQ</h1>
|
|
|
|
<h4>How often will I be billed?</h4>
|
|
|
|
<p style={styles.textMuted}>
|
|
The Professional License is billed monthly.
|
|
</p>
|
|
|
|
<h4>What if I need more sites?</h4>
|
|
<p style={styles.textMuted}>
|
|
When you purchase the license above you are provided with a key to
|
|
unlock the features and a BASE number of sites for your instance.
|
|
</p>
|
|
<p style={styles.textMuted}>
|
|
You can buy more sites at any time from within your Pangolin
|
|
instance. Navigate to the licensing page, indicate the amount of
|
|
sites you would like to purchase, and complete the order.
|
|
</p>
|
|
|
|
<h4>How do I manage all of my keys?</h4>
|
|
|
|
<p style={styles.textMuted}>
|
|
You can log into{" "}
|
|
<a href="https://app.lemonsqueezy.com/my-orders/">Lemon Squeezy</a>{" "}
|
|
with the same email that your purchased your keys with. From here
|
|
you can deactivate an instance or manage subscriptions.
|
|
</p>
|
|
|
|
<h4>Can I reuse the license keys?</h4>
|
|
<p style={styles.textMuted}>
|
|
No, the license keys are tied to the instance they were purchased
|
|
for. If you need to move your instance to a new server, please log
|
|
into Lemon Squeezy, deactivate the key, and then re-activate it on
|
|
the new server.
|
|
</p>
|
|
|
|
<h4>There is an issue with my order!</h4>
|
|
|
|
<p style={styles.textMuted}>
|
|
Please <a href="mailto:numbat@fossorial.io">email us</a> immediately
|
|
with any issues.
|
|
</p>
|
|
|
|
<h4>Where do I create support tickets?</h4>
|
|
<p style={styles.textMuted}>
|
|
Within 48 hours of your purchase you should receive an email invite
|
|
to our support portal where you can interact with us.
|
|
</p>
|
|
<p style={styles.textMuted}>
|
|
You can then create support tickets in the{" "}
|
|
<a href="https://support.fossorial.io/">support portal</a>.
|
|
</p>
|
|
|
|
<h4>
|
|
What is the difference between this and the Supporter Program?
|
|
</h4>
|
|
<p style={styles.textMuted}>
|
|
The Supporter Program is a way to support the project and remove the
|
|
support marks. It is a one time donation. No features are unlocked.
|
|
</p>
|
|
<p style={styles.textMuted}>
|
|
The Professional plan is a paid license that allows you to use the
|
|
software in a commercial environment that unlocks features and
|
|
provides support. It is a monthly subscription.
|
|
</p>
|
|
|
|
<h4>What happens if I run out of sites?</h4>
|
|
|
|
<p style={styles.textMuted}>
|
|
You will be warned if you go over your site limit before you create
|
|
a site. If you do there will be a banner displayed in the Pangolin
|
|
application and login pages stating you have gone over your limit
|
|
but no functionality of the application will be lost.
|
|
</p>
|
|
|
|
<p style={styles.textMuted}>--</p>
|
|
|
|
<p style={styles.textMuted}>
|
|
By purchasing any license key you agree to abide by the{" "}
|
|
<a href="/license.html">Fossorial Commercial License and Terms</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
// CSS Styles object
|
|
const styles = {
|
|
container: {
|
|
display: "flex",
|
|
flexDirection: "column" as const,
|
|
alignItems: "center",
|
|
padding: "24px",
|
|
backgroundColor: "var(--ifm-background-color)",
|
|
minHeight: "100vh",
|
|
fontFamily: "var(--ifm-font-family-base)"
|
|
},
|
|
heading: {
|
|
fontSize: "30px",
|
|
fontWeight: "bold",
|
|
marginBottom: "48px",
|
|
color: "var(--ifm-font-color-base)"
|
|
},
|
|
pricingContainer: {
|
|
display: "flex",
|
|
flexDirection: "row" as const,
|
|
justifyContent: "center",
|
|
gap: "24px",
|
|
width: "100%",
|
|
padding: "24px",
|
|
flexWrap: "wrap" as const
|
|
},
|
|
card: {
|
|
backgroundColor: "var(--ifm-background-color)",
|
|
borderRadius: "8px",
|
|
boxShadow: "var(--ifm-global-shadow-lw)",
|
|
padding: "24px",
|
|
border: "1px solid var(--ifm-color-emphasis-300)",
|
|
position: "relative" as const,
|
|
overflow: "hidden" as const,
|
|
width: "300px",
|
|
flex: "1 1 300px",
|
|
maxWidth: "400px",
|
|
minHeight: "500px",
|
|
display: "flex",
|
|
flexDirection: "column" as const
|
|
},
|
|
cardLarge: {
|
|
backgroundColor: "var(--ifm-background-color)",
|
|
borderRadius: "8px",
|
|
boxShadow: "var(--ifm-global-shadow-lw)",
|
|
padding: "24px",
|
|
border: "1px solid var(--ifm-color-emphasis-300)",
|
|
position: "relative" as const,
|
|
overflow: "hidden" as const,
|
|
width: "100%",
|
|
flex: "1 1 100%",
|
|
maxWidth: "1250px",
|
|
minHeight: "500px",
|
|
display: "flex",
|
|
flexDirection: "column" as const,
|
|
marginBottom: "24px",
|
|
zIndex: "1"
|
|
},
|
|
highlightedCard: {
|
|
backgroundColor: "var(--ifm-background-color)",
|
|
borderRadius: "8px",
|
|
boxShadow: "var(--ifm-global-shadow-lw)",
|
|
padding: "24px",
|
|
border: "1px solid var(--ifm-color-primary)",
|
|
position: "relative" as const,
|
|
overflow: "hidden" as const,
|
|
width: "300px",
|
|
flex: "1 1 300px",
|
|
maxWidth: "400px",
|
|
minHeight: "500px",
|
|
display: "flex",
|
|
flexDirection: "column" as const,
|
|
zIndex: "1"
|
|
},
|
|
freeTag: {
|
|
position: "absolute" as const,
|
|
top: "0",
|
|
right: "0",
|
|
backgroundColor: "var(--ifm-color-emphasis-200)",
|
|
padding: "4px 12px",
|
|
fontSize: "12px",
|
|
fontWeight: "600"
|
|
},
|
|
popularTag: {
|
|
position: "absolute" as const,
|
|
top: "0",
|
|
right: "0",
|
|
backgroundColor: "var(--ifm-color-primary)",
|
|
color: "var(--ifm-color-white)",
|
|
padding: "4px 12px",
|
|
fontSize: "12px",
|
|
fontWeight: "600"
|
|
},
|
|
cardTitle: {
|
|
fontSize: "20px",
|
|
fontWeight: "bold",
|
|
marginBottom: "16px",
|
|
color: "var(--ifm-font-color-base)"
|
|
},
|
|
featureList: {
|
|
listStyleType: "none",
|
|
padding: "0",
|
|
marginBottom: "24px",
|
|
flex: "1"
|
|
},
|
|
featureItem: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
marginBottom: "8px",
|
|
fontSize: "14px",
|
|
color: "var(--ifm-font-color-base)"
|
|
},
|
|
checkIcon: {
|
|
width: "16px",
|
|
height: "16px",
|
|
marginRight: "8px",
|
|
color: "var(--ifm-color-primary)"
|
|
},
|
|
buttonSecondary: {
|
|
width: "100%",
|
|
padding: "8px 16px",
|
|
backgroundColor: "var(--ifm-color-emphasis-200)",
|
|
color: "var(--ifm-font-color-base)",
|
|
border: "none",
|
|
borderRadius: "6px",
|
|
fontWeight: "500",
|
|
cursor: "pointer",
|
|
transition: "background-color 0.2s",
|
|
fontSize: "14px",
|
|
marginTop: "auto"
|
|
},
|
|
buttonPrimary: {
|
|
width: "100%",
|
|
padding: "8px 16px",
|
|
backgroundColor: "var(--ifm-color-primary)",
|
|
color: "var(--ifm-color-white)",
|
|
border: "none",
|
|
borderRadius: "6px",
|
|
fontWeight: "500",
|
|
cursor: "pointer",
|
|
transition: "background-color 0.2s",
|
|
fontSize: "14px",
|
|
marginTop: "auto"
|
|
},
|
|
counterContainer: {
|
|
marginBottom: "16px"
|
|
},
|
|
counterLabel: {
|
|
display: "block",
|
|
marginBottom: "8px",
|
|
fontWeight: "500",
|
|
fontSize: "14px",
|
|
color: "var(--ifm-font-color-base)"
|
|
},
|
|
counterControls: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between"
|
|
},
|
|
counterButton: {
|
|
width: "32px",
|
|
height: "32px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: "var(--ifm-color-emphasis-200)",
|
|
border: "none",
|
|
borderRadius: "6px",
|
|
cursor: "pointer"
|
|
},
|
|
counterInput: {
|
|
width: "48px",
|
|
height: "32px",
|
|
margin: "0 8px",
|
|
textAlign: "center" as const,
|
|
border: "1px solid var(--ifm-color-emphasis-300)",
|
|
borderRadius: "6px",
|
|
backgroundColor: "var(--ifm-background-color)",
|
|
color: "var(--ifm-font-color-base)"
|
|
},
|
|
priceDisplay: {
|
|
fontSize: "24px",
|
|
fontWeight: "bold",
|
|
marginBottom: "16px",
|
|
color: "var(--ifm-font-color-base)"
|
|
},
|
|
pricePeriod: {
|
|
fontSize: "14px",
|
|
fontWeight: "normal",
|
|
color: "var(--ifm-color-emphasis-600)",
|
|
marginLeft: "4px"
|
|
},
|
|
priceBreakdown: {
|
|
fontSize: "14px",
|
|
color: "var(--ifm-color-emphasis-600)",
|
|
marginBottom: "16px"
|
|
},
|
|
customPricing: {
|
|
fontSize: "20px",
|
|
fontWeight: "bold",
|
|
marginBottom: "16px",
|
|
color: "var(--ifm-font-color-base)"
|
|
},
|
|
textMuted: {
|
|
color: "var(--ifm-color-emphasis-600)",
|
|
fontSize: "14px",
|
|
marginBottom: "16px"
|
|
}
|
|
};
|
|
|
|
export default PricingComponent;
|