Skip to content

feat: Reorder pricing tiers and highlight Enterprise column #4619

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
dimitrieh wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

feat: Reorder pricing tiers and highlight Enterprise column #4619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f2daf27
feat: restyle pricing feature table with left-aligned headers, column…
dimitrieh Mar 2, 2026
df15bee
feat: unify Enterprise pricing card across Cloud and Self-Hosted views
dimitrieh Mar 2, 2026
fca90fe
feat: add Enterprise column border highlight, secondary CTA buttons, …
dimitrieh Mar 2, 2026
f0b62ea
feat: darker Enterprise card border, full-width social proof, slower …
dimitrieh Mar 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions src/_data/featureCatalog.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -954,22 +954,22 @@ sections:

buttons:
cloud:
- cta: Request a Quote
url: /pricing/request-quote/
onclick: "capture('cta-request-quote', {'position': 'secondary'}, {'plan': 'cloud-enterprise'})"
- cta: TRY FOR FREE
url: sign-up-url
onclick: "capture('cta-join', {'position': 'secondary'}, {'plan': 'cloud-starter'})"
onclick: "capture('cta-join', {'position': 'secondary'}, {'plan': 'cloud-pro'})"
- cta: TRY FOR FREE
url: sign-up-url
onclick: "capture('cta-join', {'position': 'secondary'}, {'plan': 'cloud-pro'})"
onclick: "capture('cta-join', {'position': 'secondary'}, {'plan': 'cloud-starter'})"
selfHosted:
- cta: Request a Quote
url: /pricing/request-quote/
onclick: "capture('cta-request-quote', {'position': 'secondary'}, {'plan': 'sh-enterprise'})"
selfHosted:
- cta: INSTALL NOW
url: https://flowfuse.com/docs/install/introduction/
onclick: "capture('cta-install', {'position': 'secondary'}, {'plan': 'sh-starter'})"
- cta: CONTACT US
url: /contact-us
onclick: "capture('cta-contact-us', {'position': 'secondary'}, {'plan': 'sh-team'})"
- cta: Request a Quote
url: /pricing/request-quote/
onclick: "capture('cta-request-quote', {'position': 'secondary'}, {'plan': 'sh-enterprise'})"
- cta: INSTALL NOW
url: https://flowfuse.com/docs/install/introduction/
onclick: "capture('cta-install', {'position': 'secondary'}, {'plan': 'sh-starter'})"
14 changes: 7 additions & 7 deletions src/_includes/feature_lists/features-table-base.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
<ul class="{{ hosting }} ff-feature-table-section sticky top-0 md:top-14 z-10">
<li class="ff-feature--column-header">
<span class="sticky left-0 h-full bg-white"></span>
<label class="mr-2">
<label>Enterprise</label>
<label>Pro</label>
<label>
<div>Starter</div>
</label>
<label>Pro</label>
<label class="ml-2">Enterprise</label>
</li>
</ul>

{% set hostingKey = 'selfHosted' if hosting == 'self-hosted' else 'cloud' %}
{% set tiers = ['starter', 'pro', 'enterprise'] %}
{% set tiers = ['enterprise', 'pro', 'starter'] %}

{% for section in featureCatalog.sections %}
<ul class="{{ hosting }} ff-feature-table-section">
Expand Down Expand Up @@ -45,15 +45,15 @@
{% elif cell and cell.value === 'addon' %}
{% include "components/feature-addon.svg" %}
{% elif cell and cell.value === 'contact' %}
<a href="/contact-us" class="ff-btn ff-btn--primary uppercase">Contact Us</a>
<a href="/contact-us" class="ff-btn ff-btn--primary-outlined uppercase grow mx-1">Contact Us</a>
{% elif cell and cell.value === 'list' %}
{% for opt in cell.options %}{{ opt }}{% if not loop.last %}<br>{% endif %}{% endfor %}
{% elif cell and cell.value %}
{{ cell.value }}
{% elif cell and cell.tag %}
{% if cell.tagPrefix %}{{ cell.tagPrefix }} {% endif %}<span class="ff-feature-note{% if cell.tagPrefix %} ml-1{% endif %}">{{ cell.tag }}</span>
{% else %}
<span></span>
<span class="text-gray-300">&mdash;</span>
{% endif %}
</span>
{% endfor %}
Expand All @@ -75,7 +75,7 @@
{% if button.url == 'sign-up-url' %}
{% set buttonUrl %}{% include "sign-up-url.njk" %}{% endset %}
{% endif %}
<label><a class="ff-btn ff-btn--primary uppercase align-baseline w-full text-center" href="{{ buttonUrl }}" {% if button.onclick %} onclick="{{ button.onclick }}" {% endif %}>{{ button.cta }}</a></label>
<label><a class="ff-btn {{ 'ff-btn--primary' if loop.first else 'ff-btn--primary-outlined' }} uppercase align-baseline w-full text-center" href="{{ buttonUrl }}" {% if button.onclick %} onclick="{{ button.onclick }}" {% endif %}>{{ button.cta }}</a></label>
{% endfor %}
</li>
</ul>
Expand Down
32 changes: 30 additions & 2 deletions src/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1274,6 +1274,7 @@ h4:hover .header-anchor::before {
display: grid;
grid-template-columns: 270px 1fr 1fr 1fr;
align-items: center;
column-gap: 0.5rem;
@apply bg-indigo-50/30;
}

Expand Down Expand Up @@ -1349,6 +1350,7 @@ h4:hover .header-anchor::before {
.ff-feature-table-section li.ff-feature--column-buttons {
background-color: white;
padding: 0;
column-gap: 0.75rem;
}
.ff-feature-table-section li.ff-feature--column-buttons label {
text-align: center;
Expand All @@ -1370,7 +1372,7 @@ h4:hover .header-anchor::before {
}

.ff-feature-table-section li:not(.ff-feature--column-header):not(.ff-feature--column-buttons) label {
border-right: 1px solid theme(colors.indigo.100);
border-right: none;
}

.ff-feature-table-section li:not(.ff-feature--column-header):nth-child(even) label {
Expand Down Expand Up @@ -1447,6 +1449,32 @@ h4:hover .header-anchor::before {
@apply rounded-bl-lg;
}

/* Enterprise column highlight border */
.ff-feature-table-section li > :nth-child(2) {
border-left: 2px solid theme(colors.indigo.200);
border-right: 2px solid theme(colors.indigo.200);
}

/* Column header Enterprise label: top border + rounded top */
.ff-feature-table-section li.ff-feature--column-header > :nth-child(2) {
border-top: 2px solid theme(colors.indigo.200);
border-radius: 12px 12px 0 0;
margin: 0;
}

/* Bottom border + rounded corners on last data section */
.ff-feature-table > ul:nth-last-child(2) li:last-child > :nth-child(2) {
border-bottom: 2px solid theme(colors.indigo.200);
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}

/* No highlight on buttons row */
.ff-feature-table-section li.ff-feature--column-buttons > :nth-child(2) {
border-left: none;
border-right: none;
}

.ff-features-key {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -1605,7 +1633,7 @@ h4:hover .header-anchor::before {
flex-shrink: 0;
width: auto;
align-items: center;
animation: 30s slide infinite linear;
animation: 60s slide infinite linear;
}

.social-proof-carousel div img,
Expand Down
6 changes: 5 additions & 1 deletion src/css/style.page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,11 @@
flex-direction: column;
@apply max-w-sm;
}


.pricing-tile--enterprise {
background: linear-gradient(theme(colors.indigo.200), theme(colors.indigo.100) 40%, rgba(255, 255, 255, 0));
}

.pricing-tile-background {
position: relative;
width: calc(100% - 4px);
Expand Down
10 changes: 5 additions & 5 deletions src/handbook/engineering/product/features.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ navTitle: Feature Catalog

<p>Complete reference of all FlowFuse features across Cloud and Self-Hosted deployments. Not all features are shown on the public pricing page — this is the full list.</p>

{% set tiers = ['starter', 'pro', 'enterprise'] %}
{% set tiers = ['enterprise', 'pro', 'starter'] %}
{% set solutions = ['mes', 'scada', 'uns', 'edge-connectivity', 'it-ot-middleware', 'data-integration'] %}

<style>
Expand Down Expand Up @@ -64,12 +64,12 @@ navTitle: Feature Catalog
<th colspan="6" class="py-3 px-4 text-center border border-gray-200 rounded-lg border-l-2 border-l-gray-300">Solutions</th>
</tr>
<tr>
<th class="text-center py-3 px-4 border-b-2 border-gray-200 border-l-2 border-l-gray-300">Starter</th>
<th class="text-center py-3 px-4 border-b-2 border-gray-200 border-l-2 border-l-gray-300">Enterprise</th>
<th class="text-center py-3 px-4 border-b-2 border-gray-200 border-r border-r-gray-100">Pro</th>
<th class="text-center py-3 px-4 border-b-2 border-gray-200 border-r border-r-gray-100">Enterprise</th>
<th class="text-center py-3 px-4 border-b-2 border-gray-200 border-l-2 border-l-gray-300">Starter</th>
<th class="text-center py-3 px-4 border-b-2 border-gray-200 border-r border-r-gray-100">Starter</th>
<th class="text-center py-3 px-4 border-b-2 border-gray-200 border-l-2 border-l-gray-300">Enterprise</th>
<th class="text-center py-3 px-4 border-b-2 border-gray-200 border-r border-r-gray-100">Pro</th>
<th class="text-center py-3 px-4 border-b-2 border-gray-200 border-r border-r-gray-100">Enterprise</th>
<th class="text-center py-3 px-4 border-b-2 border-gray-200 border-r border-r-gray-100">Starter</th>
<th class="text-center py-3 px-4 border-b-2 border-gray-200 border-l-2 border-l-gray-300">MES</th>
<th class="text-center py-3 px-4 border-b-2 border-gray-200 border-r border-r-gray-100">SCADA</th>
<th class="text-center py-3 px-4 border-b-2 border-gray-200 border-r border-r-gray-100">UNS</th>
Expand Down
113 changes: 56 additions & 57 deletions src/pricing/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ hubspot:
</div>
{% endif %}
</div>
<a class="md:self-end ff-btn ff-btn--primary uppercase align-baseline w-full"
<a class="md:self-end ff-btn ff-btn--primary-outlined uppercase align-baseline w-full"
href='{% if cloud %}{% include "sign-up-url.njk" %}{% else %}https://flowfuse.com/docs/install/introduction/{% endif %}'
{% if cloud %}onclick="capture('cta-join', {'position': 'primary'}, {'plan': 'cloud-starter'})"{% else %}onclick="capture('cta-install', {'position': 'primary'}, {'plan': 'sh-starter'})"{% endif %}>
{% if cloud %}TRY FOR FREE{% else %}INSTALL NOW{% endif %}
Expand All @@ -123,10 +123,53 @@ hubspot:
<!-- Cloud -->
<div class="contentCloud m-auto transition duration-1000 md:min-h-[502px]">
<div class="pricing-tiles flex flex-col md:grid md:max-lg lg:max-w-screen-xl mt-4 md:mt-0">
<!-- Starter -->
<div class="pricing-tile md:h-full">
{{ starter() }}
<!-- Enterprise -->
{% macro enterprise(show_sla=true, cloud=true) %}
<div class="pricing-tile pricing-tile--enterprise md:h-full">
<div class="pricing-tile-background pb-6 md:grid md:grid-rows-[auto_1fr_minmax(36px,_36px)]">
<div>
<div class="flex flex-col items-center text-left md:flex-row md:mb-6 md:px-0 md:block md:min-h-[133px]">
<div class="flex flex-row justify-between mt-4 w-full gap-x-2">
<h4 style="display:inline-block;">Enterprise</h4>
</div>
<p class="mt-7">Operate <span class="inline font-normal">organization-wide</span> industrial applications with the highest security and integrity.</p>
</div>
<div class="flex flex-col content-start features md:mt-3 mt-6 w-full">

<ul class="ff-checklist font-light leading-7 mt-2">
<li>Faster, more powerful, AI-enhanced Node&#8209;RED</li>
<li>Unlimited team members</li>
<li>Single Sign-On</li>
{% if cloud %}
<li>MQTT Broker (20 clients to start)</li>
{% endif %}
<li>Enterprise support{% if show_sla %} + SLA: 99.9&#37;{% endif %}</li>
{% if not cloud %}
<li>Dedicated Success Management</li>
{% endif %}
<li>Device group management</li>
</ul>
<br>
<note class="font-semibold">Includes 20 hosted instances or remote instances.</note>
</div>
</div>
<div data-nosnippet class="flex">
<!-- Price -->
<div class="mt-9 md:mt-12 md:text-left items-left w-full mb-11 md:mb-5 flex flex-row items-end md:self-end">
<h2 class="self-end pb-1">Let's Talk</h2>
{% if not cloud %}<span class="pl-3 pb-2 text-sm text-gray-500">Trial period possible</span>{% endif %}
</div>
</div>
<a class="md:self-end ff-btn ff-btn--primary uppercase align-baseline w-full"
{% if cloud %}
href="#contact-us" onclick="scrollToAnchor(event, 'contact-us'); capture('cta-contact-us', {'position': 'primary'}, {'plan': 'cloud-enterprise'})">Contact Us</a>
{% else %}
href="#request-trial-license" onclick="scrollToAnchor(event, 'request-trial-license'); capture('cta-contact-us', {'position': 'primary'}, {'plan': 'sh-enterprise'})">Contact Us</a>
{% endif %}
</div>
</div>
{% endmacro %}
{{ enterprise() }}
<!-- Pro -->
<div class="pricing-tile md:h-full">
{% macro team(cloud=true) %}
Expand Down Expand Up @@ -178,7 +221,7 @@ hubspot:
</div>
</div>
</div>
<a class="md:self-end ff-btn ff-btn--primary uppercase align-baseline w-full"
<a class="md:self-end ff-btn ff-btn--primary-outlined uppercase align-baseline w-full"
href="{% if cloud %}{% include "sign-up-url.njk" %}{% else %}/contact-us{% endif %}"
{% if cloud %}onclick="capture('cta-join', {'position': 'primary'}, {'plan': 'cloud-team'})"{% else %}onclick="capture('cta-contact-us', {'position': 'primary'}, {'plan': 'sh-team'})"{% endif %}>
{% if cloud %}TRY FOR FREE{% else %}CONTACT US{% endif %}
Expand All @@ -187,68 +230,26 @@ hubspot:
{% endmacro %}
{{ team() }}
</div>
<!-- Enterprise -->
{% macro enterprise(show_sla=true, cloud=true) %}
<!-- Starter -->
<div class="pricing-tile md:h-full">
<div class="pricing-tile-background pb-6 md:grid md:grid-rows-[auto_1fr_minmax(36px,_36px)]">
<div>
<div class="flex flex-col items-center text-left md:flex-row md:mb-6 md:px-0 md:block md:min-h-[133px]">
<div class="flex flex-row justify-between mt-4 w-full gap-x-2">
<h4 style="display:inline-block;">Enterprise</h4>
</div>
<p class="mt-7">Operate <span class="inline font-normal">organization-wide</span> industrial applications with the highest security and integrity.</p>
</div>
<div class="flex flex-col content-start features md:mt-3 mt-6 w-full">

<ul class="ff-checklist font-light leading-7 mt-2">
<li>Faster, more powerful, AI-enhanced Node&#8209;RED</li>
<li>Unlimited team members</li>
<li>Single Sign-On</li>
{% if cloud %}
<li>MQTT Broker (20 clients to start)</li>
{% endif %}
<li>Enterprise support{% if show_sla %} + SLA: 99.9&#37;{% endif %}</li>
{% if not cloud %}
<li>Dedicated Success Management</li>
{% endif %}
<li>Device group management</li>
</ul>
<br>
<note class="font-semibold">Includes 20 hosted instances or remote instances.</note>
</div>
</div>
<div data-nosnippet class="flex">
<!-- Price -->
<div class="mt-9 md:mt-12 md:text-left items-left w-full mb-11 md:mb-5 flex flex-row md:self-end">
<h2 class="self-end pb-1">{% if cloud %}Let's Talk{% else %}Free Trial{% endif %}</h2>
</div>
</div>
<a class="md:self-end ff-btn ff-btn--primary uppercase align-baseline w-full"
{% if cloud %}
href="#contact-us" onclick="scrollToAnchor(event, 'contact-us'); capture('cta-contact-us', {'position': 'primary'}, {'plan': 'cloud-enterprise'})">Contact Us</a>
{% else %}
href="#request-trial-license" onclick="scrollToAnchor(event, 'request-trial-license'); capture('cta-trial-license', {'position': 'primary'}, {'plan': 'sh-enterprise'});">Get 30-day Trial License</a>
{% endif %}
</div>
{{ starter() }}
</div>
{% endmacro %}
{{ enterprise() }}
</div>
</div>
<!-- Self-Hosted -->
<div class="contentSelfHosted hide m-auto transition duration-1000 md:min-h-[502px]">
<div class="pricing-tiles flex flex-col md:grid md:max-lg lg:max-w-screen-xl mt-4 md:mt-0">
<!-- Starter -->
<!-- Enterprise -->
<div class="pricing-tile md:h-full">
{{ starter(false) }}
{{ enterprise(false, false) }}
</div>
<!-- Team -->
<div class="pricing-tile md:h-full">
{{ team(false) }}
</div>
<!-- Enterprise -->
<!-- Starter -->
<div class="pricing-tile md:h-full">
{{ enterprise(false, false) }}
{{ starter(false) }}
</div>
</div>
</div>
Expand Down Expand Up @@ -286,10 +287,8 @@ hubspot:
</div>
</div>
<!-- Social proof -->
<div class="max-w-md sm:max-w-screen-lg m-auto max-w-5xl pb-7 md:px-9">
<div class="mx-auto w-full">
{% include "social-proof.njk" %}
</div>
<div class="w-full py-7">
{% include "social-proof.njk" %}
</div>
<!-- Form section -->
<!-- Contact us -->
Expand Down