diff --git a/index.html b/index.html index 768037f..016815a 100644 --- a/index.html +++ b/index.html @@ -33,10 +33,14 @@

Hobby

✓ Limited Tab completions +
  • + ✓ + Some agents +
    • - +
    @@ -60,6 +64,32 @@

    Pro

    ✓ Background Agents + +
    +
    + + +
    +
    +

    Enterprise

    +

    + Custom +

    +
    +

    Everything in Pro, plus:

    +
      +
    • + ✓ + Unlimited Agent requests +
      • +
    • + ✓ + Unlimited Tab completions +
      • +
    • + ✓ + Background Agents +
    • ✓ Maximum context windows @@ -67,7 +97,7 @@

      Pro

    - +
    diff --git a/jsx-version.html b/jsx-version.html index c31d822..f97277d 100644 --- a/jsx-version.html +++ b/jsx-version.html @@ -24,25 +24,31 @@ // 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, priceAmount, 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}

    -
    -

    {includesText}

    - +
    + {/* Curly braces { } let you insert JavaScript expressions into JSX */} +

    {title}

    + {/* Matches index.html: card-price-amount + card-price-period */} +

    + {priceAmount} + {pricePeriod} +

    +
    +

    {includesText}

    +
      + {/* .map() loops through the features array and creates a
    • for each item */} + {features.map((feature, i) => ( + // "key" helps React track which items changed - using index (i) is OK for static lists +
    • + ✓ + {feature} +
      • + ))} +
    +
    {/* Using our Button component instead of a raw
    ); diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css index 3bb039c..ebdcbe9 100644 --- a/src/components/Button/Button.css +++ b/src/components/Button/Button.css @@ -36,3 +36,27 @@ .download-button.primary:active { background-color: #333; } + +.download-button.tertiary { + background-color: transparent; + color: #111; + border: 1px solid #c8c7c2; +} + +.download-button.tertiary:hover { + background-color: #D8D6CE; +} + +.download-button.tertiary:active { + background-color: #D8D6CE; +} + +/* Focus — outline on all button variants */ +.download-button:focus { + outline: none; +} + +.download-button:focus-visible { + outline: 2px solid yellow; + outline-offset: 2px; +} diff --git a/src/components/PricingCard/PricingCard.jsx b/src/components/PricingCard/PricingCard.jsx index ff0e384..9662d89 100644 --- a/src/components/PricingCard/PricingCard.jsx +++ b/src/components/PricingCard/PricingCard.jsx @@ -21,7 +21,7 @@ function PricingCard({ title, priceAmount, pricePeriod, includesText, features,

    {title}

    {priceAmount} - {pricePeriod != null && {pricePeriod}} + {pricePeriod}

    {includesText}

    diff --git a/src/pages/Pricing.jsx b/src/pages/Pricing.jsx index 5ec711d..5f4a69b 100644 --- a/src/pages/Pricing.jsx +++ b/src/pages/Pricing.jsx @@ -15,9 +15,9 @@ function Pricing() { priceAmount: 'Free', pricePeriod: null, includesText: 'Includes:', - features: ['No credit card required', 'Limited Agent requests', 'Limited Tab completions'], - buttonText: 'Download', - buttonVariant: 'secondary', + features: ['No credit card required', 'Limited Agent requests', 'Limited Tab completions', 'Some agents'], + buttonText: 'Start for free', + buttonVariant: 'tertiary', }; const proPlan = { title: 'Pro', @@ -28,9 +28,22 @@ function Pricing() { 'Extended limits on Agent', 'Unlimited Tab completions', 'Background Agents', - 'Maximum context windows', ], buttonText: 'Get Pro', + buttonVariant: 'secondary', + }; + const enterprisePlan = { + title: 'Enterprise', + priceAmount: 'Custom', + pricePeriod: null, + includesText: 'Everything in Pro, plus:', + features: [ + 'Unlimited Agent requests', + 'Unlimited Tab completions', + 'Background Agents', + 'Maximum context windows', + ], + buttonText: 'Contact sales', buttonVariant: 'primary', }; @@ -40,9 +53,9 @@ function Pricing() {

    React App — running with Vite

    {/* The spread operator {...hobbyPlan} passes all object properties as individual props */} - {/* This is the same as: title="Hobby" price="Free" includesText="Includes:" etc. */} +
    ); diff --git a/styles.css b/styles.css index 650590a..4b8659d 100644 --- a/styles.css +++ b/styles.css @@ -130,6 +130,30 @@ body { background-color: #333; } +.download-button.tertiary { + background-color: transparent; + color: #111; + border: 1px solid #c8c7c2; +} + +.download-button.tertiary:hover { + background-color: #D8D6CE; +} + +.download-button.tertiary:active { + background-color: #D8D6CE; +} + +/* Focus — outline on all button variants (keyboard / :focus-visible) */ +.download-button:focus { + outline: none; +} + +.download-button:focus-visible { + outline: 2px solid rgb(4, 0, 255); + outline-offset: 2px; +} + .page-label { position: fixed; top: 16px;