From 80d2d0c7178552fa36af0e7a70638fe2f82445a6 Mon Sep 17 00:00:00 2001
From: Glormy <tomjodoinux@gmail.com>
Date: Mon, 23 Mar 2026 15:10:46 -0700
Subject: [PATCH] Updating JSX PricingCard component

PriceAmount and PricePeriod have been added
---
 jsx-version.html | 35 ++++++++++++++++++++++++++++++-----
 styles.css       | 18 ++++++++++++++++++
 2 files changed, 48 insertions(+), 5 deletions(-)

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
                 <div className="card">
                     {/* Curly braces { } let you insert JavaScript expressions into JSX */}
                     <h1 className="card-title">{title}</h1>
-                    <p className="card-price">{price}</p>
+                    <p className="card-price">
+                        <span className="card-price-amount">{price}</span>
+                        {pricePeriod != null && (
+                            <span className="card-price-period">{pricePeriod}</span>
+                        )}
+                    </p>
                     <div className="card-content">
                         <p className="includes-text">{includesText}</p>
                         <ul className="features-list">
@@ -56,22 +61,41 @@ <h1 className="card-title">{title}</h1>
             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 @@ <h1 className="card-title">{title}</h1>
                         {/* This is the same as writing: title="Hobby" price="Free" includesText="Includes:" etc. */}
                         <PricingCard {...hobbyPlan} />
                         <PricingCard {...proPlan} />
+                        <PricingCard {...enterprisePlan} />
                     </div>
                 </>
             );
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;