Redesign homepage layout

src/_data/home.json

@@ -1,44 +1,37 @@
 [
   {
     "title": "Capture data like never before",
-    "content": "Gathering data from your operations is key to start a digital transformation. We make it easy to access, transform, and visualize data over any protocol.",
-    "image": "device_group_red",
-    "imagealt": "data transformation"
+    "content": "Start a digital transformation. We make it easy to access, transform, and visualize data over any protocol.",
+    "icon": "circle-stack"
   },
   {
     "title": "Custom solutions for your company",
-    "content": "FlowFuse offers the customization essential for your specific needs. Leveraging Node-RED and its extensive library, we enable the creation of manufacturing applications that align perfectly with your operational requirements.",
-    "image": "bespoke_red",
-    "imagealt": "icon of code"
+    "content": "Create manufacturing applications that align perfectly with your operational requirements.",
+    "icon": "light-bulb"
   },
   {
     "title": "Centralized management and automated deployment",
-    "content": "FlowFuse streamlines the management of your development environments, offering a unified platform for deployment and configuration. With our automated processes, creating and deploying configurations across multiple devices is efficient and hassle-free.",
-    "image": "scalable_pictogram_red",
-    "imagealt": "scalability"
+    "content": "With our automated processes, creating and deploying configurations across multiple devices is efficient and hassle-free.",
+    "icon": "bolt"
   },
   {
     "title": "Reliable delivery every time",
-    "content": "FlowFuse revolutionizes the software development process, streamlining the lifecycle for your applications. Our DevOps pipelines facilitate development, testing, and production, ensuring consistent and reliable application delivery.",
-    "image": "small-pipeline_red",
-    "imagealt": "a pipeline of Node-RED instances"
+    "content": "Our DevOps pipelines facilitate development, testing, and production, ensuring consistent and reliable application delivery.",
+    "icon": "arrow-up-on-square-stack"
   },
   {
     "title": "Secure and compliant development",
-    "content": "Digitally transform your operations while maintaining the security you rely upon. Single-Sign-On (SSO), audit logs for monitoring, and change control are a few ways we ensure secure building in a collaborative environment.",
-    "image": "security_pictogram_red",
-    "imagealt": "a lock"
+    "content": "Single-Sign-On (SSO), audit logs for monitoring, and change control are a few ways we ensure secure building in a collaborative environment",
+    "icon": "lock-closed"
   },
   {
     "title": "Expert Support for your applications",
-    "content": "FlowFuse is your trusted partner for professional support, ensuring smooth and secure operation of your critical applications. Our team of experts is dedicated to tackling any challenge and maintaining the highest level of performance. We keep your systems current with the latest updates, safeguarding the continuity and efficiency of your operations.",
-    "image": "support_pictogram_red",
-    "imagealt": "support"
+    "content": "Our team of experts keep your systems current with the latest updates, safeguarding the continuity and efficiency of your operations.",
+    "icon": "lifebuoy"
   },
   {
     "title": "Low-code development",
     "content": "Our low-code platform enables your team to rapidly develop tailored applications in-house for faster, optimized results.",
-    "image": "low-code_red",
-    "imagealt": "a team of developers"
+    "icon": "code-bracket"
   }
 ]

src/_data/mainFeatures.json

@@ -1,7 +1,7 @@
 [{
     "id": "feature1",
-    "buttonText": "LOW-CODE NODE-RED",
-    "buttonTextMobile": "LOW-CODE",
+    "buttonText": "Low-code Node-RED",
+    "buttonTextMobile": "Low-code",
     "title": "Low-code Node-RED",
     "imageFolder": "./images/features/",
     "imageFile": "feature-low-code-nr.png",
@@ -25,8 +25,8 @@
   },
   {
     "id": "feature3",
-    "buttonText": "DATA SHARING & STORAGE",
-    "buttonTextMobile": "DATA",
+    "buttonText": "Data sharing and storage",
+    "buttonTextMobile": "Data",
     "title": "Data sharing and storage",
     "imageFolder": "./images/pictograms/",
     "imageFile": "feature-data-sharing.png",
@@ -40,8 +40,8 @@
   },
   {
     "id": "feature4",
-    "buttonText": "EDGE MANAGEMENT",
-    "buttonTextMobile": "EDGE",
+    "buttonText": "Edge Management",
+    "buttonTextMobile": "Edge",
     "title": "Remote device management at the edge",
     "imageFolder": "./images/pictograms/",
     "imageFile": "edge_red.png",

src/_data/solutions.json

@@ -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": " a plant worker looking at a dashboard from a control room.",
+    "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"
+  }]

src/_includes/feature_lists/main-features.njk

@@ -1,4 +1,4 @@
-<div class="flex flex-wrap md:justify-between flex-row justify-center mt-4 md:mt-8 mb-3 mb:6 md:mb-6">
+<div class="flex flex-wrap md:justify-between gap-3 md:gap-0 flex-row justify-center mt-4 md:mt-8 mb-3 mb:6 md:mb-6">
   {%- for f in mainFeatures -%}
   <button class="feature-button align-baseline" data-section="{{ f.id }}">
     <span class="hidden md:inline">{{ f.buttonText }}</span>

src/_includes/solutions.njk

@@ -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>

src/css/style.css

@@ -380,14 +380,29 @@ h4:hover .header-anchor {
     margin-left: -5px;
     transform: translate(0,0px); 
 }
+.ff-image-cover {
+    overflow: hidden;
+}
 
 .ff-image-cover img,
 .ff-image-cover picture {
     object-fit: cover;
     height: 100%;
     width: 100%;
+    transition: transform 0.5s;
+}
+
+.ff-image-cover.scale:hover img,
+.ff-image-cover.scale:hover picture {
+    transform: scale(1.1);
+}
+
+.ff-image-cover.scale,
+.ff-image-cover.scale {
+    @apply cursor-pointer;
 }
 
+.ff-image-rounded,
 .ff-image-rounded img,
 .ff-image-rounded picture {
     @apply rounded-lg;
@@ -662,28 +677,42 @@ h4:hover .header-anchor {
 .features-card{
     @apply flex flex-wrap flex-col justify-between h-full bg-gray-50 rounded-3xl px-5 pb-5;
 }
-
-.feature-button {
-    background-color: none;
-    color: theme(colors.gray.800);
-    text-transform: uppercase;
+.feature-button,
+.solution-button {
+    background-color: transparent;
+    color: theme(colors.gray.500);
+    text-transform: capitalize;
     display: inline-block;
-    padding: 8px 12px;
-    font-weight: 600;
+    padding: 8px 18px;
+    font-weight: 300;
+    border: 2px solid theme(colors.gray.200);
+    border-radius: 24px;
 }
 
-.feature-button.active {
-    background-color: theme(colors.blue.800);
-    color: white;
+.feature-button.active,
+.solution-button.active {
+    background-color: theme(colors.gray.200);
+    color: theme(colors.gray.800);
+    border: 2px solid theme(colors.gray.300);
 }
 
-.feature {
-    display: none;
-  }
+.feature,
+.solution {
+    transition: opacity 0.7s ease, transform 0.7s ease;
+    opacity: 0;
+    visibility: hidden;
+    position: absolute;
+    width: 100%;
+    transform: translateX(20px);
+}
 
-  .feature.active {
-    display: block;
-  }
+.feature.active,
+.solution.active {
+    opacity: 1;
+    visibility: visible;
+    position: relative;
+    transform: translateX(0);
+}
 /*
     Footer
 */