mirror of
https://github.com/fosrl/docs.git
synced 2025-05-12 21:30:43 +01:00
Move API name back
This commit is contained in:
Owen
parent
790c72e9a8
commit
55e2da8a9b
76 changed files with 818 additions and 114 deletions
|
|
@ -194,9 +194,10 @@ const config: Config = {
|
|||
config: {
|
||||
petstore: {
|
||||
specPath: "./openapi.yml",
|
||||
outputDir: "docs/03-Pangolin/07-API (Professional)",
|
||||
outputDir: "docs/03-Pangolin/07-API",
|
||||
sidebarOptions: {
|
||||
groupPathsBy: "tag"
|
||||
groupPathsBy: "tag",
|
||||
categoryLinkSource: "tag",
|
||||
}
|
||||
} satisfies OpenApiPlugin.Options
|
||||
}
|
||||
|
|
|
|||
531
packages/docusaurus/src/pages/license.tsx
Normal file
531
packages/docusaurus/src/pages/license.tsx
Normal file
|
|
@ -0,0 +1,531 @@
|
|||
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>
|
||||
<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>
|
||||
Ticketed 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 APIs 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>
|
||||
Fossorial Commercial License
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div style={styles.counterContainer}>
|
||||
<span style={styles.counterLabel}>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>
|
||||
|
||||
<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 Meet with Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
// CSS Styles object
|
||||
const styles = {
|
||||
container: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
padding: '24px',
|
||||
backgroundColor: 'var(--ifm-background-color)',
|
||||
minHeight: '100vh',
|
||||
fontFamily: 'system-ui, -apple-system, sans-serif'
|
||||
},
|
||||
heading: {
|
||||
fontSize: '30px',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '48px',
|
||||
color: '#111827'
|
||||
},
|
||||
pricingContainer: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
gap: '24px',
|
||||
width: '100%',
|
||||
padding: '24px',
|
||||
flexWrap: 'wrap'
|
||||
},
|
||||
card: {
|
||||
backgroundColor: 'var(--ifm-card-background-color, white)',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
|
||||
padding: '24px',
|
||||
border: '1px solid var(--ifm-color-emphasis-300, #e5e7eb)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
width: '300px',
|
||||
flex: '1 1 300px',
|
||||
maxWidth: '400px',
|
||||
minHeight: '500px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
},
|
||||
highlightedCard: {
|
||||
backgroundColor: 'var(--ifm-card-background-color, white)',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
||||
padding: '24px',
|
||||
border: '1px solid var(--ifm-color-primary, hsl(24.6, 95%, 53.1%))',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
width: '300px',
|
||||
flex: '1 1 300px',
|
||||
maxWidth: '400px',
|
||||
minHeight: '500px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
zIndex: '1'
|
||||
},
|
||||
freeTag: {
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
backgroundColor: 'var(--ifm-color-emphasis-200, #e5e7eb)',
|
||||
padding: '4px 12px',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600'
|
||||
},
|
||||
popularTag: {
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
backgroundColor: 'var(--ifm-color-primary, hsl(24.6, 95%, 53.1%))',
|
||||
color: 'var(--ifm-color-white, white)',
|
||||
padding: '4px 12px',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600'
|
||||
},
|
||||
cardTitle: {
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '16px',
|
||||
// color: 'var(--ifm-heading-color, #111827)'
|
||||
},
|
||||
featureList: {
|
||||
listStyleType: 'none',
|
||||
padding: '0',
|
||||
marginBottom: '24px',
|
||||
flex: '1'
|
||||
},
|
||||
featureItem: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginBottom: '8px',
|
||||
fontSize: '14px'
|
||||
},
|
||||
checkIcon: {
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
marginRight: '8px',
|
||||
color: '#10b981'
|
||||
},
|
||||
buttonSecondary: {
|
||||
width: '100%',
|
||||
padding: '8px 16px',
|
||||
backgroundColor: 'var(--ifm-color-emphasis-200, #e5e7eb)',
|
||||
color: 'var(--ifm-color-emphasis-900, #111827)',
|
||||
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, hsl(24.6, 95%, 53.1%))',
|
||||
color: 'var(--ifm-color-white, 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'
|
||||
},
|
||||
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, #f3f4f6)',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer'
|
||||
},
|
||||
counterInput: {
|
||||
width: '48px',
|
||||
height: '32px',
|
||||
margin: '0 8px',
|
||||
textAlign: 'center',
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '6px'
|
||||
},
|
||||
priceDisplay: {
|
||||
fontSize: '24px',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '16px',
|
||||
// color: 'var(--ifm-heading-color, #111827)'
|
||||
},
|
||||
pricePeriod: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'normal',
|
||||
color: 'var(--ifm-color-emphasis-600, #6b7280)',
|
||||
marginLeft: '4px'
|
||||
},
|
||||
priceBreakdown: {
|
||||
fontSize: '14px',
|
||||
color: 'var(--ifm-color-emphasis-600, #6b7280)',
|
||||
marginBottom: '16px'
|
||||
},
|
||||
customPricing: {
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '16px',
|
||||
// color: 'var(--ifm-heading-color, #111827)'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
export default PricingComponent;
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { useState } from 'react';
|
||||
import Layout from '@theme/Layout';
|
||||
import { useState } from "react";
|
||||
import Layout from "@theme/Layout";
|
||||
|
||||
const PricingComponent = () => {
|
||||
const [siteCount, setSiteCount] = useState(1);
|
||||
|
||||
const [siteCount, setSiteCount] = useState(3);
|
||||
|
||||
const handleSiteCountChange = (e) => {
|
||||
const value = parseInt(e.target.value);
|
||||
if (!isNaN(value) && value >= 1) {
|
||||
|
|
@ -12,24 +12,25 @@ const PricingComponent = () => {
|
|||
setSiteCount(1);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const increaseSiteCount = () => {
|
||||
setSiteCount(siteCount + 1);
|
||||
};
|
||||
|
||||
|
||||
const decreaseSiteCount = () => {
|
||||
if (siteCount > 1) {
|
||||
setSiteCount(siteCount - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const calculatePrice = () => {
|
||||
return 125 + (siteCount * 5);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<Layout title="Hello" description="Hello React Page">
|
||||
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}>
|
||||
|
|
@ -37,67 +38,153 @@ const PricingComponent = () => {
|
|||
<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
|
||||
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>
|
||||
Basic features
|
||||
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
|
||||
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
|
||||
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>
|
||||
1 site
|
||||
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>
|
||||
<button style={styles.buttonSecondary} onClick={() => window.location.href = '/Getting%20Started/quick-install'}>
|
||||
<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}>POPULAR</div>
|
||||
<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
|
||||
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
|
||||
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>
|
||||
Priority support
|
||||
Ticketed 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
|
||||
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>
|
||||
Advanced features
|
||||
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
|
||||
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>
|
||||
Multiple sites
|
||||
Robust integration APIs 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>
|
||||
Fossorial Commercial License
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div style={styles.counterContainer}>
|
||||
<span style={styles.counterLabel}>Number of sites</span>
|
||||
<div style={styles.counterControls}>
|
||||
<button
|
||||
onClick={decreaseSiteCount}
|
||||
style={styles.counterButton}
|
||||
>
|
||||
<button onClick={decreaseSiteCount} style={styles.counterButton}>
|
||||
-
|
||||
</button>
|
||||
<input
|
||||
|
|
@ -107,77 +194,155 @@ const PricingComponent = () => {
|
|||
onChange={handleSiteCountChange}
|
||||
style={styles.counterInput}
|
||||
/>
|
||||
<button
|
||||
onClick={increaseSiteCount}
|
||||
style={styles.counterButton}
|
||||
>
|
||||
<button onClick={increaseSiteCount} style={styles.counterButton}>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div style={styles.priceDisplay}>
|
||||
${calculatePrice()}<span style={styles.pricePeriod}>/year</span>
|
||||
${calculatePrice()}
|
||||
<span style={styles.pricePeriod}>/month</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div style={styles.priceBreakdown}>
|
||||
Base price $125 + ${siteCount} x $5 per site
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => window.location.href = `https://payment.fossorial.io/buy/958562da-a87c-4dc8-abba-a3fbfcc1eb7d?quantity=${siteCount}`}
|
||||
|
||||
<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
|
||||
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
|
||||
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
|
||||
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 agreements
|
||||
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
|
||||
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
|
||||
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
|
||||
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>
|
||||
Unlimited sites
|
||||
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
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => window.location.href = '/contact'}
|
||||
style={styles.buttonDark}
|
||||
|
||||
<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"
|
||||
}}
|
||||
>
|
||||
Contact Sales
|
||||
</button>
|
||||
Schedule a Meet with Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
// CSS Styles object
|
||||
const styles = {
|
||||
container: {
|
||||
|
|
@ -185,7 +350,7 @@ const styles = {
|
|||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
padding: '24px',
|
||||
backgroundColor: '#f9fafb',
|
||||
backgroundColor: 'var(--ifm-background-color)',
|
||||
minHeight: '100vh',
|
||||
fontFamily: 'system-ui, -apple-system, sans-serif'
|
||||
},
|
||||
|
|
@ -197,34 +362,49 @@ const styles = {
|
|||
},
|
||||
pricingContainer: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
gap: '24px',
|
||||
width: '100%',
|
||||
// maxWidth: '448px'
|
||||
padding: '24px',
|
||||
flexWrap: 'wrap'
|
||||
},
|
||||
card: {
|
||||
backgroundColor: 'white',
|
||||
backgroundColor: 'var(--ifm-card-background-color, white)',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
|
||||
padding: '24px',
|
||||
border: '1px solid #e5e7eb',
|
||||
border: '1px solid var(--ifm-color-emphasis-300, #e5e7eb)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden'
|
||||
overflow: 'hidden',
|
||||
width: '300px',
|
||||
flex: '1 1 300px',
|
||||
maxWidth: '400px',
|
||||
minHeight: '500px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
},
|
||||
highlightedCard: {
|
||||
backgroundColor: 'white',
|
||||
backgroundColor: 'var(--ifm-card-background-color, white)',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
||||
padding: '24px',
|
||||
border: '1px solid hsl(24.6, 95%, 53.1%)',
|
||||
border: '1px solid var(--ifm-color-primary, hsl(24.6, 95%, 53.1%))',
|
||||
position: 'relative',
|
||||
overflow: 'hidden'
|
||||
overflow: 'hidden',
|
||||
width: '300px',
|
||||
flex: '1 1 300px',
|
||||
maxWidth: '400px',
|
||||
minHeight: '500px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
zIndex: '1'
|
||||
},
|
||||
freeTag: {
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
backgroundColor: '#e5e7eb',
|
||||
backgroundColor: 'var(--ifm-color-emphasis-200, #e5e7eb)',
|
||||
padding: '4px 12px',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600'
|
||||
|
|
@ -233,8 +413,8 @@ const styles = {
|
|||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
backgroundColor: 'hsl(24.6, 95%, 53.1%)',
|
||||
color: 'white',
|
||||
backgroundColor: 'var(--ifm-color-primary, hsl(24.6, 95%, 53.1%))',
|
||||
color: 'var(--ifm-color-white, white)',
|
||||
padding: '4px 12px',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600'
|
||||
|
|
@ -243,12 +423,13 @@ const styles = {
|
|||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '16px',
|
||||
color: '#111827'
|
||||
// color: 'var(--ifm-heading-color, #111827)'
|
||||
},
|
||||
featureList: {
|
||||
listStyleType: 'none',
|
||||
padding: '0',
|
||||
marginBottom: '24px'
|
||||
marginBottom: '24px',
|
||||
flex: '1'
|
||||
},
|
||||
featureItem: {
|
||||
display: 'flex',
|
||||
|
|
@ -265,38 +446,28 @@ const styles = {
|
|||
buttonSecondary: {
|
||||
width: '100%',
|
||||
padding: '8px 16px',
|
||||
backgroundColor: '#e5e7eb',
|
||||
color: '#111827',
|
||||
backgroundColor: 'var(--ifm-color-emphasis-200, #e5e7eb)',
|
||||
color: 'var(--ifm-color-emphasis-900, #111827)',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
fontWeight: '500',
|
||||
cursor: 'pointer',
|
||||
transition: 'background-color 0.2s',
|
||||
fontSize: '14px'
|
||||
fontSize: '14px',
|
||||
marginTop: 'auto'
|
||||
},
|
||||
buttonPrimary: {
|
||||
width: '100%',
|
||||
padding: '8px 16px',
|
||||
backgroundColor: 'hsl(24.6, 95%, 53.1%)',
|
||||
color: 'white',
|
||||
backgroundColor: 'var(--ifm-color-primary, hsl(24.6, 95%, 53.1%))',
|
||||
color: 'var(--ifm-color-white, white)',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
fontWeight: '500',
|
||||
cursor: 'pointer',
|
||||
transition: 'background-color 0.2s',
|
||||
fontSize: '14px'
|
||||
},
|
||||
buttonDark: {
|
||||
width: '100%',
|
||||
padding: '8px 16px',
|
||||
backgroundColor: '#1f2937',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
fontWeight: '500',
|
||||
cursor: 'pointer',
|
||||
transition: 'background-color 0.2s',
|
||||
fontSize: '14px'
|
||||
fontSize: '14px',
|
||||
marginTop: 'auto'
|
||||
},
|
||||
counterContainer: {
|
||||
marginBottom: '16px'
|
||||
|
|
@ -312,13 +483,13 @@ const styles = {
|
|||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
},
|
||||
counterButton: {
|
||||
counterButton: {
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#f3f4f6',
|
||||
backgroundColor: 'var(--ifm-color-emphasis-200, #f3f4f6)',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer'
|
||||
|
|
@ -335,25 +506,26 @@ const styles = {
|
|||
fontSize: '24px',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '16px',
|
||||
color: '#111827'
|
||||
// color: 'var(--ifm-heading-color, #111827)'
|
||||
},
|
||||
pricePeriod: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'normal',
|
||||
color: '#6b7280',
|
||||
color: 'var(--ifm-color-emphasis-600, #6b7280)',
|
||||
marginLeft: '4px'
|
||||
},
|
||||
priceBreakdown: {
|
||||
fontSize: '14px',
|
||||
color: '#6b7280',
|
||||
color: 'var(--ifm-color-emphasis-600, #6b7280)',
|
||||
marginBottom: '16px'
|
||||
},
|
||||
customPricing: {
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '16px',
|
||||
color: '#111827'
|
||||
// color: 'var(--ifm-heading-color, #111827)'
|
||||
}
|
||||
};
|
||||
|
||||
export default PricingComponent;
|
||||
|
||||
export default PricingComponent;
|
||||
|
|
|
|||
Loading…
Reference in a new issue