From a538d781a276b8d287e80d3b2888a7375afd70a3 Mon Sep 17 00:00:00 2001
From: Yannickdjallo-ux <Hellodjallo@gmail.com>
Date: Thu, 4 Jun 2026 16:46:41 +0200
Subject: [PATCH] Live class

Learnings from the live class
---
 jsx-version.html                 | 18 ++++++++++++++--
 src/components/Button/Button.css |  6 +++---
 styles.css                       | 35 ++++++++++++++++++++++++++++++--
 3 files changed, 52 insertions(+), 7 deletions(-)

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 @@ <h1 className="card-title">{title}</h1>
                 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 @@ <h1 className="card-title">{title}</h1>
                     '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 @@ <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/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 {