Refactor feature details rendering and update feature data for improv…

…ed clarity and organization Signed-off-by: Lee Calcote <[email protected]>
layer5io · Dec 13, 2024 · 32008bf · 32008bf
1 parent 0fff2d5
commit 32008bf
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 14 deletions.
diff --git a/src/components/PlanCard/index.js b/src/components/PlanCard/index.js
@@ -14,11 +14,14 @@ const PlanCard = ({ planData , isYearly }) => {
       <Container>
         <Row $Hcenter>
           {planData.map((x) => (
-            <Col xl={4} lg={3} md={2} sm={1} key={x.tier}>
+            // <Col $xl={4} $lg={2} $md={1} $sm={1} key={x.tier}>
+            <Col key={x.tier}>
               <div className={`${x.featured ? "featured" : ""} pricing-table`}>
 
                 {x.tier === "Personal" ? <div className="pricing-label">Free Forever</div> : null}
 
+                {x.tier === "Team Designer" ? <div className="featured-label">Most Popular</div> : null}
+
                 {x.pricing_coming_soon && (
                   <div className="pricing_coming_soon">
                     {x.pricing_coming_soon}
@@ -66,10 +69,10 @@ const PlanCard = ({ planData , isYearly }) => {
 
 
                 <Button
-                  disabled={x.tier === "Team Operator"}
+                  // disabled={x.tier === "Team Operator"}
                   $primary
                   className={
-                    x.button[0] === "Coming Soon" || x.tier === "Team Operator"
+                    x.button[0] === "Coming Soon"
                       ? "price-button-disabled"
                       : "price-button-link"
                   }

diff --git a/src/components/PlanCard/planCard.style.js b/src/components/PlanCard/planCard.style.js
@@ -78,15 +78,28 @@ const PlanCardWrapper = styled.section`
     }
     .pricing-label {
       border-radius: 0px 4px;
-      background: ${(props) => props.theme.grey050505ToGreyF1F2F1};
+      background: ${(props) => props.theme.grey0E0E0EToGreen3C494F};
       padding: 0.125rem 0.5rem;
       position: absolute;
       width: fit-content;
       font-size: 0.75rem;
       font-weight: 500;
       top: 0rem;
       right: .9rem;
-      color: ${(props) => props.theme.greyDEE3DEToGrey363636};
+      color: #eee;
+      transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+    .featured-label {
+      border-radius: 0px 4px;
+      background: ${(props) => props.theme.saffronColor};
+      padding: 0.125rem 0.5rem;
+      position: absolute;
+      width: fit-content;
+      font-size: 0.75rem;
+      font-weight: 500;
+      top: 0rem;
+      right: .9rem;
+      color: #111;
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
     h6 {

diff --git a/src/sections/Pricing/data.js → src/sections/Pricing/archived/data.js b/src/sections/Pricing/data.js → src/sections/Pricing/archived/data.js
diff --git a/src/sections/Pricing/comparison.js b/src/sections/Pricing/comparison.js
@@ -104,7 +104,8 @@ h2, h5{
 }
 .price-table th.price-table-popular {
     border-top: 3px solid #00b39f;
-    color:${props => props.theme.whiteEightToBlack};
+    color:${props => props.theme.saffronColor};
+    background-color:rgba(0,179,159,0.1);
     text-transform: uppercase;
     font-size: 12px;
     padding: 12px 48px;
@@ -217,13 +218,9 @@ const Comparison = () => {
               {details.map((x) => (
                 <>
                   <tr key={x.id} >
-                    <td className="categories" colSpan="4">
+                    <td className="categories" colSpan="5">
                       <img src={x.icon} height={32} className="category-icon" alt={x.category} />
                       <h3 className="category">{x.category}</h3></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
                   </tr>
                   {x.features.map((f) => (
                     <tr key={f.feature}>

diff --git a/src/sections/Pricing/generatePlans.js b/src/sections/Pricing/generatePlans.js
@@ -25,10 +25,10 @@ function generatePlans(data) {
     },
     "TeamOperator": {
       tier: "Team Operator",
-      featured: true,
+      featured: false,
       monthlyprice: 8,
       yearlyprice: 68,
-      pricing_coming_soon: <img src={comingSoon} alt="Coming Soon" />,
+      // pricing_coming_soon: <img src={comingSoon} alt="Coming Soon" />,
       byline: "Advanced collaboration for imperative DevOps",
       byline2: "← Everything included in Free, plus...",
       button: ["Start Free Trial", "https://cloud.layer5.io"],

diff --git a/src/sections/Pricing/pricing.style.js b/src/sections/Pricing/pricing.style.js
@@ -56,7 +56,7 @@ const PricingWrapper = styled.section`
 .toggle-container span {
   cursor: pointer;
   padding: .5rem 1rem;
-  color: solid ${props => props.theme.shadowLightColor};
+  color: #fff;
   border-radius: .5rem;
   transition: background-color 0.3s, color 0.3s;
 }