diff --git a/jsx-version.html b/jsx-version.html
index c31d822..a30a108 100644
--- a/jsx-version.html
+++ b/jsx-version.html
@@ -24,13 +24,18 @@
// Same card UI, written as a JSX component (HTML-like syntax inside JavaScript)
// This component is reusable - we can create multiple cards by passing different data
- function PricingCard({ title, price, includesText, features, buttonText, buttonVariant }) {
+ function PricingCard({ title, price, pricePeriod, includesText, features, buttonText, buttonVariant }) {
return (
// JSX uses "className" instead of "class" because "class" is a reserved word in JavaScript
{/* Curly braces { } let you insert JavaScript expressions into JSX */}
{title}
-
{price}
+
+ {price}
+ {pricePeriod != null && (
+ {pricePeriod}
+ )}
+
{includesText}
@@ -56,22 +61,41 @@ {title}
const hobbyPlan = {
title: 'Hobby',
price: 'Free',
+ pricePeriod: null,
includesText: 'Includes:',
- features: ['No credit card required', 'Limited Agent requests', 'Limited Tab completions'],
+ features: [
+ 'No credit card required',
+ 'Limited Agent requests',
+ 'Limited Tab completions',
+ 'Agent Awesomeness',
+ ],
buttonText: 'Download',
buttonVariant: 'secondary',
};
const proPlan = {
title: 'Pro',
- price: '$20/mo.',
+ price: '$20',
+ pricePeriod: '/mo.',
includesText: 'Everything in Hobby, plus:',
features: [
'Extended limits on Agent',
'Unlimited Tab completions',
'Background Agents',
- 'Maximum context windows',
],
buttonText: 'Get Pro',
+ buttonVariant: 'secondary',
+ };
+
+ const enterprisePlan = {
+ title: 'Enterprise',
+ price: 'Let\'s talk',
+ pricePeriod: null,
+ includesText: 'Everything in Pro, plus:',
+ features: [
+ 'Custom usage limits and controls',
+ 'Priority support and onboarding',
+ ],
+ buttonText: 'Contact sales',
buttonVariant: 'primary',
};
@@ -84,6 +108,7 @@ {title}
{/* This is the same as writing: title="Hobby" price="Free" includesText="Includes:" etc. */}
+
>
);
diff --git a/styles.css b/styles.css
index ee9220a..869bb57 100644
--- a/styles.css
+++ b/styles.css
@@ -147,6 +147,24 @@ body {
background-color: #333;
}
+.download-button.tertiary {
+ background-color: transparent;
+ color: #333;
+ border: 1px solid #a1a19d;
+}
+
+.download-button.tertiary:hover {
+ background-color: #e6e5e0;
+ color: #333;
+ border: 1px solid #a1a19d;
+}
+
+.download-button.tertiary:active {
+ background-color: #a1a19d;
+ color: #333;
+ border: 1px solid #a1a19d;
+}
+
/* Fixed pill label that sits at the top center of the viewport */
.page-label {
position: fixed;