Skip to content

Commit b64826d

Browse files
dimitriehdimitrieh
committed
feat: add all templates for certified nodes redesign
- Integration detail page layout with hero, use cases, benefits, architecture - Connect X to Y pages with step-by-step guides - Redesigned catalog index with certified hero section and community nodes - Category pill filters for certified integrations
1 parent 140a572 commit b64826d

6 files changed

Lines changed: 602 additions & 348 deletions

File tree

‎src/_includes/layouts/certified-integration.njk‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
---
2+
layout: layouts/base.njk
3+
sitemapPriority: 0.9
4+
---
5+
{# Hero Section #}
6+
<div class="w-full" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);">
7+
<div class="w-full pt-12 pb-12 md:pt-8 md:pb-10">
8+
<div class="px-6 container mx-auto md:max-w-screen-lg">
9+
<div class="md:flex items-center md:flex-row md:justify-between gap-8">
10+
<div class="my-auto max-md:mx-auto md:w-7/12 max-w-xl max-md:text-center">
11+
<div class="flex items-center gap-2 mb-3 max-md:justify-center">
12+
<span class="bg-green-700 text-white text-xs font-bold px-3 py-1 rounded uppercase tracking-wide">Certified</span>
13+
<span class="text-green-400 text-xs font-semibold uppercase tracking-wide">Enterprise Integration</span>
14+
</div>
15+
<h1 class="w-full mt-0 md:px-0 m-auto font-medium text-white">
16+
{{ integrationName }}
17+
</h1>
18+
<p class="text-gray-300 mb-6 text-lg">{{ heroDescription }}</p>
19+
{# Trust signal pills #}
20+
<div class="flex flex-wrap gap-2 mb-8 max-md:justify-center">
21+
{% if trustSla %}
22+
<span class="bg-white/10 text-gray-200 text-xs font-medium px-3 py-1.5 rounded-full border border-white/20">{{ trustSla }} SLA</span>
23+
{% endif %}
24+
{% if trustSupportResponse %}
25+
<span class="bg-white/10 text-gray-200 text-xs font-medium px-3 py-1.5 rounded-full border border-white/20">{{ trustSupportResponse }} Support Response</span>
26+
{% endif %}
27+
{% if trustUpdateFrequency %}
28+
<span class="bg-white/10 text-gray-200 text-xs font-medium px-3 py-1.5 rounded-full border border-white/20">{{ trustUpdateFrequency }} Updates</span>
29+
{% endif %}
30+
</div>
31+
<div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col">
32+
<a class="ff-btn ff-btn--primary min-h-[40px]" href="/contact-us/"
33+
onclick="capture('cta-contact-us', {'position': 'primary'}, {'page': 'integration-{{ integrationSlug }}'})">TALK TO AN EXPERT</a>
34+
<a class="ff-btn ff-btn--primary-outlined min-h-[40px] !text-white !border-white/40 hover:!bg-white/10" href="{% include 'sign-up-url.njk' %}"
35+
onclick="capture('cta-get-started', {'position': 'primary'}, {'page': 'integration-{{ integrationSlug }}'})">START FREE TRIAL</a>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
43+
{# Use Cases Section #}
44+
{% if useCasesJson %}
45+
{% set useCasesList = useCasesJson | fromJson %}
46+
<div class="w-full py-12 px-6">
47+
<div class="max-w-screen-lg mx-auto">
48+
<h2 class="font-bold text-center mb-8">What You Can Build</h2>
49+
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-6">
50+
{% for uc in useCasesList %}
51+
<div class="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
52+
<h3 class="mt-0 text-lg font-semibold">{{ uc.title }}</h3>
53+
<p class="text-gray-600 text-sm mb-0">{{ uc.description }}</p>
54+
</div>
55+
{% endfor %}
56+
</div>
57+
</div>
58+
</div>
59+
{% endif %}
60+
61+
{# How It Works #}
62+
<div class="w-full bg-gray-50 py-12 px-6">
63+
<div class="max-w-screen-lg mx-auto">
64+
<h2 class="font-bold text-center mb-8">How FlowFuse Connects {{ integrationName }}</h2>
65+
<div class="flex items-center justify-center gap-2 sm:gap-4 my-8 flex-wrap sm:flex-nowrap">
66+
<div class="bg-white border-2 border-green-200 rounded-lg p-4 sm:p-6 text-center min-w-[120px]">
67+
<span class="font-bold text-lg">{{ integrationShortName }}</span>
68+
<p class="text-xs text-gray-500 mt-1 mb-0">Source System</p>
69+
</div>
70+
<div class="text-green-500 text-2xl">&rarr;</div>
71+
<div class="bg-indigo-50 border-2 border-indigo-300 rounded-lg p-4 sm:p-6 text-center min-w-[120px]">
72+
<span class="font-bold text-lg text-indigo-700">FlowFuse</span>
73+
<p class="text-xs text-gray-500 mt-1 mb-0">Node-RED Platform</p>
74+
</div>
75+
<div class="text-green-500 text-2xl">&rarr;</div>
76+
<div class="bg-white border-2 border-green-200 rounded-lg p-4 sm:p-6 text-center min-w-[120px]">
77+
<span class="font-bold text-lg">Any System</span>
78+
<p class="text-xs text-gray-500 mt-1 mb-0">Target</p>
79+
</div>
80+
</div>
81+
<p class="text-center text-gray-600 max-w-2xl mx-auto">
82+
FlowFuse uses Node-RED's visual flow editor to connect {{ integrationShortName }} devices and systems
83+
to any destination &mdash; databases, cloud platforms, dashboards, and enterprise applications.
84+
No custom code required.
85+
</p>
86+
</div>
87+
</div>
88+
89+
{# Benefits Section #}
90+
{% if benefitsJson %}
91+
{% set benefitsList = benefitsJson | fromJson %}
92+
<div class="w-full py-12 px-6">
93+
<div class="max-w-screen-lg mx-auto">
94+
<h2 class="font-bold text-center mb-8">Why Choose FlowFuse Certified</h2>
95+
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-6">
96+
{% for benefit in benefitsList %}
97+
<div class="bg-white border border-gray-200 rounded-lg p-6">
98+
<div class="w-10 h-10 bg-green-50 rounded-lg flex items-center justify-center mb-4">
99+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 text-green-600">
100+
<path fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
101+
</svg>
102+
</div>
103+
<h3 class="mt-0 text-lg font-semibold">{{ benefit.title }}</h3>
104+
<p class="text-gray-600 text-sm mb-0">{{ benefit.description }}</p>
105+
</div>
106+
{% endfor %}
107+
</div>
108+
</div>
109+
</div>
110+
{% endif %}
111+
112+
{# Certified Nodes Included #}
113+
{% if certifiedNodeIds.length > 0 %}
114+
<div class="w-full bg-gray-50 py-12 px-6">
115+
<div class="max-w-screen-lg mx-auto">
116+
<h2 class="font-bold text-center mb-2">Certified Nodes Included</h2>
117+
<p class="text-center text-gray-500 mb-8">The npm packages included with this integration</p>
118+
<div class="grid sm:grid-cols-2 gap-4 max-w-2xl mx-auto">
119+
{% for nodeId in certifiedNodeIds %}
120+
<div class="bg-white border border-gray-200 rounded-lg p-5">
121+
<div class="flex items-center gap-2 mb-2">
122+
<span class="bg-green-100 text-green-800 text-xs font-bold px-2 py-0.5 rounded">Certified</span>
123+
</div>
124+
<code class="text-sm text-indigo-600 font-mono">{{ nodeId }}</code>
125+
<div class="mt-3">
126+
<a href="https://www.npmjs.com/package/{{ nodeId }}" target="_blank" rel="noopener noreferrer"
127+
class="text-xs text-gray-500 hover:text-indigo-600 inline-flex items-center gap-1">
128+
View on npm
129+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
130+
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
131+
</svg>
132+
</a>
133+
</div>
134+
</div>
135+
{% endfor %}
136+
</div>
137+
</div>
138+
</div>
139+
{% endif %}
140+
141+
{# Connect to Other Integrations #}
142+
<div class="w-full py-12 px-6">
143+
<div class="max-w-screen-lg mx-auto">
144+
<h2 class="font-bold text-center mb-8">Connect {{ integrationName }} to...</h2>
145+
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4">
146+
{% for integration in certifiedIntegrations.integrations %}
147+
{% if integration.slug != integrationSlug %}
148+
<a href="/integrations/{{ integrationSlug }}/and/{{ integration.slug }}/"
149+
class="block p-4 bg-white rounded-lg border border-gray-200 hover:border-green-300 hover:shadow-md transition-all hover:no-underline">
150+
<span class="font-semibold text-gray-800">{{ integrationName }}</span>
151+
<span class="text-gray-400 mx-2">&rarr;</span>
152+
<span class="font-semibold text-indigo-600">{{ integration.name }}</span>
153+
</a>
154+
{% endif %}
155+
{% endfor %}
156+
</div>
157+
</div>
158+
</div>
159+
160+
{# CTA #}
161+
{% include "common-cta.njk" %}

‎src/_includes/layouts/integration-connect.njk‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
layout: layouts/base.njk
3+
sitemapPriority: 0.7
4+
---
5+
{# Connect Integration X to Y Page #}
6+
<div class="w-full" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);">
7+
<div class="w-full pt-12 pb-12 md:pt-8 md:pb-10">
8+
<div class="px-6 container mx-auto text-center md:max-w-screen-lg">
9+
<div class="flex items-center gap-2 mb-3 justify-center">
10+
<span class="bg-green-700 text-white text-xs font-bold px-3 py-1 rounded uppercase tracking-wide">Certified</span>
11+
<span class="text-green-400 text-xs font-semibold uppercase tracking-wide">Integration</span>
12+
</div>
13+
<h1 class="mt-0 m-auto font-medium max-w-2xl text-white">
14+
Connect <span class="text-green-400">{{ fromName }}</span>
15+
to <span class="text-green-400">{{ toName }}</span>
16+
</h1>
17+
<p class="mb-8 max-w-2xl mx-auto text-gray-300">{{ pairDescription }}</p>
18+
19+
{# Visual connection diagram #}
20+
<div class="flex items-center justify-center gap-2 sm:gap-4 my-8 flex-wrap sm:flex-nowrap">
21+
<div class="bg-white/10 border-2 border-white/20 rounded-lg p-3 sm:p-4 text-center min-w-[100px]">
22+
<span class="font-bold text-base sm:text-lg text-white">{{ fromShortName }}</span>
23+
</div>
24+
<div class="text-green-400 text-xl sm:text-2xl">&rarr;</div>
25+
<div class="bg-indigo-500/20 border-2 border-indigo-400/40 rounded-lg p-3 sm:p-4 text-center min-w-[100px]">
26+
<span class="font-bold text-base sm:text-lg text-white">FlowFuse</span>
27+
</div>
28+
<div class="text-green-400 text-xl sm:text-2xl">&rarr;</div>
29+
<div class="bg-white/10 border-2 border-white/20 rounded-lg p-3 sm:p-4 text-center min-w-[100px]">
30+
<span class="font-bold text-base sm:text-lg text-white">{{ toShortName }}</span>
31+
</div>
32+
</div>
33+
34+
<div class="flex gap-3 justify-center">
35+
<a class="ff-btn ff-btn--primary min-h-[40px]" href="/contact-us/"
36+
onclick="capture('cta-contact-us', {'position': 'primary'}, {'page': 'connect-{{ fromSlug }}-and-{{ toSlug }}'})">TALK TO AN EXPERT</a>
37+
<a class="ff-btn ff-btn--primary-outlined min-h-[40px] !text-white !border-white/40 hover:!bg-white/10" href="{% include 'sign-up-url.njk' %}"
38+
onclick="capture('cta-get-started', {'position': 'primary'}, {'page': 'connect-{{ fromSlug }}-and-{{ toSlug }}'})">START FREE TRIAL</a>
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
44+
{# Content body #}
45+
<div class="w-full px-6">
46+
<div class="max-w-screen-lg mx-auto">
47+
{{ content | safe }}
48+
</div>
49+
</div>
50+
51+
{# Reverse direction link #}
52+
<div class="w-full py-8 px-6 text-center">
53+
<div class="max-w-screen-lg mx-auto">
54+
<p class="text-gray-600">
55+
Looking for the other direction?
56+
<a href="/integrations/{{ toSlug }}/and/{{ fromSlug }}/" class="text-indigo-600 font-semibold">
57+
Connect {{ toName }} to {{ fromName }} &rarr;
58+
</a>
59+
</p>
60+
</div>
61+
</div>
62+
63+
{# Related Integration Pages #}
64+
<div class="w-full bg-gray-50 py-12 px-6">
65+
<div class="max-w-screen-lg mx-auto">
66+
<h2 class="font-bold text-center mb-8">Learn More</h2>
67+
<div class="grid sm:grid-cols-2 gap-4 max-w-xl mx-auto">
68+
<a href="/integrations/{{ fromSlug }}/"
69+
class="block p-4 bg-white rounded-lg border border-gray-200 hover:border-green-300 hover:shadow-md transition-all hover:no-underline group">
70+
<span class="font-semibold text-indigo-600 group-hover:text-indigo-800">{{ fromName }}</span>
71+
<p class="text-sm text-gray-600 mt-1 mb-0">View full integration details</p>
72+
</a>
73+
<a href="/integrations/{{ toSlug }}/"
74+
class="block p-4 bg-white rounded-lg border border-gray-200 hover:border-green-300 hover:shadow-md transition-all hover:no-underline group">
75+
<span class="font-semibold text-indigo-600 group-hover:text-indigo-800">{{ toName }}</span>
76+
<p class="text-sm text-gray-600 mt-1 mb-0">View full integration details</p>
77+
</a>
78+
</div>
79+
</div>
80+
</div>
81+
82+
{% include "common-cta.njk" %}

‎src/integrations/connect/connect.njk‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
pagination:
3+
data: integrationPairs
4+
size: 1
5+
alias: pair
6+
layout: layouts/integration-connect.njk
7+
eleventyComputed:
8+
permalink: /integrations/{{ pair.from.slug }}/and/{{ pair.to.slug }}/
9+
title: "{{ pair.title }}"
10+
fromName: "{{ pair.from.name }}"
11+
fromShortName: "{{ pair.from.shortName }}"
12+
fromSlug: "{{ pair.from.slug }}"
13+
toName: "{{ pair.to.name }}"
14+
toShortName: "{{ pair.to.shortName }}"
15+
toSlug: "{{ pair.to.slug }}"
16+
pairDescription: "{{ pair.description }}"
17+
meta:
18+
title: "{{ pair.meta.title }}"
19+
description: "{{ pair.meta.description }}"
20+
keywords: "{{ pair.meta.keywords }}"
21+
---
22+
<div class="mt-12 content">
23+
<h2 class="mb-4">How to Connect {{ pair.from.name }} to {{ pair.to.name }}</h2>
24+
<p>
25+
FlowFuse makes it easy to bridge data from {{ pair.from.name }} to {{ pair.to.name }}
26+
using Node-RED's visual flow editor. No custom code required.
27+
</p>
28+
29+
<div class="mt-8">
30+
<h3>Step-by-Step Guide</h3>
31+
<div class="space-y-6">
32+
<div class="flex gap-4 items-start">
33+
<div class="bg-green-100 text-green-700 rounded-full w-8 h-8 flex items-center justify-center font-bold flex-shrink-0">1</div>
34+
<div>
35+
<h4 class="mt-0">Set up your {{ pair.from.shortName }} connection</h4>
36+
<p>Install the certified {{ pair.from.shortName }} nodes from the FlowFuse integration catalog and configure your connection parameters.</p>
37+
</div>
38+
</div>
39+
<div class="flex gap-4 items-start">
40+
<div class="bg-green-100 text-green-700 rounded-full w-8 h-8 flex items-center justify-center font-bold flex-shrink-0">2</div>
41+
<div>
42+
<h4 class="mt-0">Transform your data</h4>
43+
<p>Use function nodes or built-in transformers to reshape, filter, and enrich your data as it flows through the pipeline.</p>
44+
</div>
45+
</div>
46+
<div class="flex gap-4 items-start">
47+
<div class="bg-green-100 text-green-700 rounded-full w-8 h-8 flex items-center justify-center font-bold flex-shrink-0">3</div>
48+
<div>
49+
<h4 class="mt-0">Send data to {{ pair.to.shortName }}</h4>
50+
<p>Configure the certified {{ pair.to.shortName }} output node to deliver data to your target system in the format it expects.</p>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
56+
<div class="mt-12 bg-green-50 border border-green-200 rounded-lg p-6">
57+
<h3 class="mt-0">Why use FlowFuse Certified nodes for this integration?</h3>
58+
<ul>
59+
<li><strong>Commercially supported</strong> &mdash; 24-hour response SLA with dedicated engineering team</li>
60+
<li><strong>Rigorously tested</strong> &mdash; Certified nodes are validated against real industrial equipment</li>
61+
<li><strong>Enterprise governance</strong> &mdash; SSO, RBAC, and audit trails for every change</li>
62+
<li><strong>Guaranteed compatibility</strong> &mdash; Tested with every FlowFuse platform release</li>
63+
</ul>
64+
</div>
65+
</div>

‎src/integrations/connect/index.njk‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
layout: layouts/nohero.njk
3+
title: Connect Integrations
4+
description: Browse all certified integration connection guides. Learn how to bridge data between industrial protocols, cloud services, and enterprise systems.
5+
meta:
6+
title: "Connect Integrations | FlowFuse"
7+
---
8+
<div class="container mx-auto max-w-screen-lg px-6 py-12">
9+
<h1 class="font-medium text-center">Connect Integrations</h1>
10+
<p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">
11+
FlowFuse certified nodes make it easy to bridge data between systems.
12+
Choose a connection to learn more.
13+
</p>
14+
{% for integration in certifiedIntegrations.integrations %}
15+
<div class="mb-8">
16+
<h2 class="text-xl font-semibold mb-4">Connect {{ integration.name }} to...</h2>
17+
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-3">
18+
{% for other in certifiedIntegrations.integrations %}
19+
{% if other.slug != integration.slug %}
20+
<a href="/integrations/{{ integration.slug }}/and/{{ other.slug }}/"
21+
class="block p-3 bg-white rounded-lg border border-gray-200 hover:border-green-300 hover:shadow-md transition-all hover:no-underline text-sm">
22+
<span class="font-semibold text-gray-800">{{ integration.shortName }}</span>
23+
<span class="text-gray-400 mx-1">&rarr;</span>
24+
<span class="font-semibold text-indigo-600">{{ other.name }}</span>
25+
</a>
26+
{% endif %}
27+
{% endfor %}
28+
</div>
29+
</div>
30+
{% endfor %}
31+
</div>
32+
{% include "common-cta.njk" %}

0 commit comments

Comments
 (0)