-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
“yndira-flowforge”
committed
Feb 22, 2024
1 parent
029e7e1
commit 08c457f
Showing
9 changed files
with
192 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| [{ | ||
| "id": "solution1", | ||
| "buttonText": "Manufacturing", | ||
| "buttonTextMobile": "Manufacturing", | ||
| "title": "FlowFuse allows teams to automate their manufacturing process through customized, reliable applications.", | ||
| "imageFile": "manufacturing.png", | ||
| "imageAlt": " a manufacturing floor plant.", | ||
| "content": "FlowFuse streamlines manufacturing automation, from production monitoring to supply chain management.", | ||
| "list": [ | ||
| "Hardware & Sensor Integration", | ||
| "Integrate OT and IT Data", | ||
| "Intuitive OT Data visualization", | ||
| "Automate Event Triggers" | ||
| ], | ||
| "url": "manufacturing" | ||
| }, | ||
| { | ||
| "id": "solution2", | ||
| "buttonText": "Device Management", | ||
| "buttonTextMobile": "Devices", | ||
| "title": "FlowFuse simplifies the management of deployments to edge devices in manufacturing, from equipment to PLCs", | ||
| "imageFile": "device_management.png", | ||
| "imageAlt": " a plant worker holding a laptop controling a machine.", | ||
| "content": "Our platform ensures secure and reliable handling of large-scale deployments, overcoming the challenges of extensive device management.", | ||
| "list": [ | ||
| "Scalable Device Management", | ||
| "Effortless Data Streaming", | ||
| "Rapid Security Deployment", | ||
| "Remote Troubleshooting" | ||
| ], | ||
| "url": "device-management" | ||
| }, | ||
| { | ||
| "id": "solution3", | ||
| "buttonText": "Data Integration", | ||
| "buttonTextMobile": "Data", | ||
| "title": "FlowFuse allows anyone to collect data from multiple sources, apply it, update it, store it, and transmit it to a new service", | ||
| "imageFile": "home_data_integration.png", | ||
| "imageAlt": " data sharing and storage.", | ||
| "content": "Data integration can be a challenging task, especially when dealing with multiple data formats, protocols, and sources. Node-RED is the Data Integration Solution and FlowFuse improves data integration", | ||
| "list": [ | ||
| "Collaborative Development", | ||
| "Managed Node-RED Service", | ||
| "Software Delivery Pipelines" | ||
| ], | ||
| "url": "data-integration" | ||
| }] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| <div class="flex flex-wrap flex-row gap-2 justify-center sm:justify-start sm:gap-6 mt-2 sm:mt-8 mb-6"> | ||
| {%- for s in solutions -%} | ||
| <button class="solution-button align-baseline" data-section="{{ s.id }}"> | ||
| <span class="hidden sm:inline">{{ s.buttonText }}</span> | ||
| <span class="inline sm:hidden">{{ s.buttonTextMobile }}</span> | ||
| </button> | ||
| {%- endfor -%} | ||
| </div> | ||
| <div class="flex flex-col flex-wrap content-center justify-center sm:min-h-[450px] transition duration-1000"> | ||
| {%- for s in solutions -%} | ||
| <div class="solution active sm:text-left" id="{{ s.id }}"> | ||
| <div class="m-auto max-w-screen-lg"> | ||
| <div class="max-w-[410px] sm:max-w-none mx-auto sm:grid justify-center items-center" style="grid-template-columns: 40% auto;"> | ||
| {% set imageFolder = './images/home/' %} | ||
| <div class="max-h-[300px] sm:max-h-full ff-image-cover scale ff-image-rounded w-full h-full mb-4 sm:mb-0"> | ||
| <a href="/solutions/{{ s.url }}/"> | ||
| {% set imageSrc = [imageFolder, s.imageFile] | join %} | ||
| {% set imageDescription = ["Image depicting", s.imageAlt] | join %} | ||
| {% image imageSrc, imageDescription, [410] %} | ||
| </a> | ||
| </div> | ||
| <div class="content-center justify-center sm:pl-6 flex-1"> | ||
| <h3 class="flex items-center text-center justify-center sm:text-left sm:justify-start"> | ||
| <div class="flex flex-col leading-8 text-xl mb-3 text-gray-600"> | ||
| {{ s.title }} | ||
| </div> | ||
| </h3> | ||
| <p class="font-light"> | ||
| {{ s.content }} | ||
| </p> | ||
| <div class="prose"> | ||
| <ul> | ||
| {% if s.list %} | ||
| {%- for item in s.list -%} | ||
| <li class="font-light">{{ item }}</li> | ||
| {%- endfor -%} | ||
| {% endif %} | ||
| </ul> | ||
| </div> | ||
| <a href="/solutions/{{ s.url }}/" class="w-full text-right flex flex-row items-center gap-1 mt-6 justify-end sm:justify-start"> | ||
| Learn more | ||
| {% include "components/icons/arrow-long-right.svg" %} | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {%- endfor -%} | ||
| </div> | ||
|
|
||
| <script> | ||
| const solutionButtons = document.querySelectorAll('.solution-button'); | ||
| const solutions = document.querySelectorAll('.solution'); | ||
| let currentIndex = 0; | ||
| let autoPlayInterval; | ||
| function activateSection(index) { | ||
| // Hide all sections | ||
| solutions.forEach(solution => { | ||
| solution.classList.remove('active'); | ||
| }); | ||
| // Show the selected section | ||
| solutions[index].classList.add('active'); | ||
| solutionButtons.forEach((button, i) => { | ||
| if (i === index) { | ||
| button.classList.add('active'); | ||
| } else { | ||
| button.classList.remove('active'); | ||
| } | ||
| }); | ||
| } | ||
| function startAutoPlay() { | ||
| autoPlayInterval = setInterval(() => { | ||
| currentIndex = (currentIndex + 1) % solutions.length; | ||
| activateSection(currentIndex); | ||
| }, 10000); // Auto play every 10 seconds | ||
| } | ||
| function stopAutoPlay() { | ||
| clearInterval(autoPlayInterval); | ||
| } | ||
| solutionButtons.forEach((button, index) => { | ||
| button.addEventListener('click', () => { | ||
| activateSection(index); | ||
| currentIndex = index; | ||
| stopAutoPlay(); | ||
| }); | ||
| }); | ||
| activateSection(currentIndex); | ||
| startAutoPlay(); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters