diff --git a/jsx-version.html b/jsx-version.html
index c31d822..a7b5c37 100644
--- a/jsx-version.html
+++ b/jsx-version.html
@@ -59,7 +59,7 @@
{title}
includesText: 'Includes:',
features: ['No credit card required', 'Limited Agent requests', 'Limited Tab completions'],
buttonText: 'Download',
- buttonVariant: 'secondary',
+ buttonVariant: 'primary',
};
const proPlan = {
title: 'Pro',
@@ -72,7 +72,20 @@ {title}
'Maximum context windows',
],
buttonText: 'Get Pro',
- buttonVariant: 'primary',
+ buttonVariant: 'secondary',
+ };
+ const enterprisePlan = {
+ title: 'Enterprise',
+ price: 'Custom',
+ includesText: 'Everything in Pro, plus:',
+ features: [
+ 'SSO and SAML',
+ 'Dedicated support',
+ 'Admin controls and audit logs',
+ 'Custom contracts and invoicing',
+ ],
+ buttonText: 'Contact sales',
+ buttonVariant: 'tertiary',
};
return (
@@ -84,6 +97,7 @@ {title}
{/* This is the same as writing: title="Hobby" price="Free" includesText="Includes:" etc. */}
+
>
);
diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
index 3bb039c..361283b 100644
--- a/src/components/Button/Button.css
+++ b/src/components/Button/Button.css
@@ -25,14 +25,14 @@
/* Primary variant — for "Get Pro" button */
.download-button.primary {
- background-color: #111;
+ background-color: #00CC66;
color: #fff;
}
.download-button.primary:hover {
- background-color: #333;
+ background-color: #00b35a;
}
.download-button.primary:active {
- background-color: #333;
+ background-color: #00b35a;
}
diff --git a/styles.css b/styles.css
index 650590a..54eb75b 100644
--- a/styles.css
+++ b/styles.css
@@ -118,16 +118,47 @@ body {
}
.download-button.primary {
- background-color: #111;
+ background-color: #00CC66;
color: #fff;
}
.download-button.primary:hover {
- background-color: #333;
+ background-color: #00b35a;
}
.download-button.primary:active {
+ background-color: #00b35a;
+}
+
+.download-button.secondary {
+ background-color: transparent;
+ color: #26251e;
+ border: 1px solid rgba(38, 37, 30, 0.35);
+}
+
+.download-button.secondary:hover {
+ background-color: #26251e;
+ color: #fff;
+ border-color: #26251e;
+}
+
+.download-button.secondary:active {
background-color: #333;
+ color: #fff;
+ border-color: #333;
+}
+
+.download-button.tertiary {
+ background-color: #e6e5e0;
+ color: #333;
+}
+
+.download-button.tertiary:hover {
+ background-color: #D8D6CE;
+}
+
+.download-button.tertiary:active {
+ background-color: #D8D6CE;
}
.page-label {