diff --git a/src/_includes/components/icons/book-open.svg b/src/_includes/components/icons/book-open.svg new file mode 100644 index 0000000000..4e123d44af --- /dev/null +++ b/src/_includes/components/icons/book-open.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/_includes/components/icons/chat-bubble-bottom-center-text.svg b/src/_includes/components/icons/chat-bubble-bottom-center-text.svg new file mode 100644 index 0000000000..9ad05cf323 --- /dev/null +++ b/src/_includes/components/icons/chat-bubble-bottom-center-text.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/_includes/components/icons/check-badge.svg b/src/_includes/components/icons/check-badge.svg new file mode 100644 index 0000000000..0a2f26859d --- /dev/null +++ b/src/_includes/components/icons/check-badge.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/_includes/components/icons/check-circle.svg b/src/_includes/components/icons/check-circle.svg new file mode 100644 index 0000000000..b69150bad9 --- /dev/null +++ b/src/_includes/components/icons/check-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/_includes/components/icons/document-arrow-up.svg b/src/_includes/components/icons/document-arrow-up.svg new file mode 100644 index 0000000000..71d37dbf10 --- /dev/null +++ b/src/_includes/components/icons/document-arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/css/style.css b/src/css/style.css index dc75ac8494..ffe1ccbc01 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1095,6 +1095,37 @@ h4:hover .header-anchor { .ff-features-key label { margin-left: 12px; } + /* + Certify hardware lists + */ + + .ff-certify-list { + @apply flex flex-col pb-6 gap-y-10 sm:gap-y-0; + } + + .ff-certify-list > .ff-item { + @apply grid grid-cols-[1fr,50px,1fr] sm:grid-cols-[24px,1fr] sm:grid-flow-col md:px-10 sm:gap-x-6 sm:grid-rows-[minmax(18px,1fr),60px,minmax(18px,1fr)]; + } + + .ff-certify-list > .ff-item:first-of-type { + @apply sm:grid-rows-[36px,minmax(18px,1fr)]; + } + + .ff-certified { + @apply sm:grid-cols-[24px,1fr,86px]; + } + + .ff-line-container { + @apply grid items-stretch my-auto sm:my-0 sm:mx-auto; + } + + .ff-line { + @apply sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500; + } + + .ff-certify-list-icon { + @apply m-auto text-gray-500 w-[24px]; + } /* Used for nicely formatting links diff --git a/src/images/partners/ff-certified-device.svg b/src/images/partners/ff-certified-device.svg new file mode 100644 index 0000000000..6e8dce4e42 --- /dev/null +++ b/src/images/partners/ff-certified-device.svg @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/pictograms/certified.png b/src/images/pictograms/certified.png new file mode 100644 index 0000000000..a8cfb6c8b4 Binary files /dev/null and b/src/images/pictograms/certified.png differ diff --git a/src/partners/certify-hardware.njk b/src/partners/certify-hardware.njk new file mode 100644 index 0000000000..3e44a96b13 --- /dev/null +++ b/src/partners/certify-hardware.njk @@ -0,0 +1,94 @@ +--- +layout: layouts/page.njk +meta: + title: How to Certify Your Hardware + description: Follow these steps to get your hardware certified for compatibility with FlowFuse and Node-RED +--- +
+

How to Certify Your Hardware

+
+
{% image "../images/pictograms/certified.png", "Certification badge", [86] %}
+

Follow these steps to get your hardware certified for compatibility with FlowFuse and Node-RED.

+
+
+
+ {% include "components/divider-flow--top-red--light.njk" %} +
+
+
+

Technical Qualification in 3 Steps

+
+
+
+
+
+
{% include "components/icons/book-open.svg" %}
+
+
+
+
Explore the FlowFuse Device Agent Repository and Documentation.
+
+
+
+
+
+
{% include "components/icons/check-circle.svg" %}
+
+
+
+
Ensure that the Device Agent comes pre-installed on your device. Alternatively, it should be available from a store or marketplace as a "one-click" installer.
+
+
+
+
+
+
{% include "components/icons/document-arrow-up.svg" %}
+
+
+
+
Users can easily upload their device configuration either through a custom user interface (e.g., file upload or input mask) or via the built-in Device Agent UI.
+
+
+ {% include "components/divider-grey-wires-right.njk" %} +
+
+

Certification

+
+

After successfully navigating the technical qualification, take the next step by booking a meeting with our team. Together, we'll work towards ensuring your device is fully compatible with FlowFuse and Node-RED.

+ +
+ {% include "components/divider-grey-wires-left.njk" %} +
+
+

Marketing and Publications

+
+
+
+
+
+
{% include "components/icons/chat-bubble-bottom-center-text.svg" %}
+
+
+
+
In a joint meeting, we will discuss marketing activities on a case-by-case basis.
+
+
+
+
+
+
{% include "components/icons/check-badge.svg" %}
+
+
+
+
Upon successful technical qualification, you will be granted the right to use the "FlowFuse Certified" logo.
+
{% image "../images/partners/ff-certified-device.svg", "FlowFuse certification badge", [86] %}
+
+
+
+
\ No newline at end of file diff --git a/src/partners/index.njk b/src/partners/index.njk index 521043d7eb..375107a511 100644 --- a/src/partners/index.njk +++ b/src/partners/index.njk @@ -26,7 +26,8 @@ description:

Hardware Partners

-
+
+

FlowFuse partners with key industry hardware partners to provide an integrated experience using Node-RED and FlowFuse.

+
+
+ + CERTIFY YOUR HARDWARE + +
{% include "components/divider-grey-wires-left.njk" %}