New template and index pages

Signed-off-by: Eloy Coto <[email protected]>
gabriel-farache · Apr 22, 2022 · fd85368 · fd85368
1 parent 0410b85
commit fd85368
Show file tree

Hide file tree

Showing 24 changed files with 274 additions and 214 deletions.
diff --git a/Readme b/Readme
@@ -0,0 +1,18 @@
+# project-flotta.io webpage
+
+
+## Build
+
+```
+make build
+```
+
+## Check links
+
+```
+make check-link
+```
+
+## Contrib
+
+Template based on `github.com/themefisher/kross-jekyll` project.
diff --git a/_data/settings.yml b/_data/settings.yml
@@ -2,19 +2,20 @@
 # General Site Settings
 
 title: Project Flotta
-logo: 
+logo: assets/images/flotta-logo.png
 author: themefisher
 description: this is meta description
-email: steve.fruits@email.com
-phone: 
-address: 
+email: flotta@redhat.com
+phone:
+address:
 copyright: Copyright &copy; 2020 Designed by [Themefisher](https://themefisher.com) & Developed by [Getjekyllthemes](https://getjekyllthemes.com)
 
 menu:
-- {name: About, link: '/about'}
-- {name: Blog, link: '/blog'}
-- {name: Portfolio, link: '/portfolio'}
-- {name: Contact, link: '/contact'}
+# - {name: About, link: '/about'}
+- {name: Blog, link: '/blog.html'}
+- {name: Documentation, link: '/documentation'}
+# - {name: Portfolio, link: '/portfolio'}
+# - {name: Contact, link: '/contact'}
 
 
 #-------------------------------
@@ -38,23 +39,25 @@ disqus-identifier: # Add your shortname for Disqus Comment. For example mr-brown
 # Hero Section
 
 hero:
-  hero-title: Hi! I’m <br> Christoher <br> UX designer
-
+  hero-title: Project Flotta. Edge device management for k8s workloads.
+  hero-text: Manage, deploy, observe edge workloads from a single k8s instance. 
+  hero-image: assets/images/flotta-device-diagram.png
 social:
-- {icon: "ti-facebook", link: "#"}
-- {icon: "ti-instagram", link: "#"}
-- {icon: "ti-dribbble", link: "#"}
-- {icon: "ti-twitter", link: "#"}
+# - {icon: "ti-facebook", link: "#"}
+# - {icon: "ti-instagram", link: "#"}
+# - {icon: "ti-dribbble", link: "#"}
+# - {icon: "ti-twitter", link: "#"}
+- {icon: "ti-github", link: "https://github.com/project-flotta/"}
 
 
 #-------------------------------
 # About (Section and Page)
 
 # About Section
 blurb:
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+  Project Flotta is designed to manage containerized workload on small-footprint devices found on the edges of networks by managing the lifecycle of edge-focused operating systems and securing connectivity between K8s/OCP and the edge. Flotta provides a pipeline for operating system images across ARM and x86 architectures and enables atomic upgrades and rollbacks of an edge-focused operating system, while maintaining a minimal footprint. Because edge computing networks have the potential for instability, Flotta can provide continuity when connectivity is sporadic or down for long periods of time. Enhanced edge observability is also provided through improved metrics and log collection capabilities.
 
-blurb-btn-link: '/about'
+blurb-btn-link: '/documentation'
 blurb-btn-name: know more
 
 
@@ -65,11 +68,9 @@ work-process:
   - title : "Research and Plan"
     icon : "assets/images/icons/plan.png"
     content : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-
   - title : "Design and Develop"
     icon : "assets/images/icons/design.png"
     content : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-
   - title : "Deliver"
     icon : "assets/images/icons/print.png"
     content : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
@@ -90,15 +91,6 @@ team:
     designation : "Designer"
 
 
-#-------------------------------
-# Skills Section
-
-skills-title: Skills
-skills:
-- {name: Web Design, color: '#fdb157', value: '90%'}
-- {name: Logo Design, color: '#9473e6', value: '60%'}
-- {name: After Effects, color: '#bdecf6', value: '80%'}
-- {name: Web App, color: '#ffbcaa', value: '70%'}
 
 
 #-------------------------------
@@ -125,27 +117,60 @@ education:
 #-------------------------------
 # Services Section
 
-services-title: Services
-services:
+features-title: Features
+features:
 - {
-    name: UI Design,
-    icon: ti-palette,
-    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    name: OS Managmenet,
+    icon: ti-package,
+    description: 'Manage Operating system lifecycle using RPM ostree technology and manage the current state of the device.',
     active: # Add true to select section
   }
 - {
-    name: UX Design,
-    icon: ti-vector,
-    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    name: Observability,
+    icon: ti-search,
+    description: 'Get any information on the workloads running in the Edgedevice and export it to a central Prometheus instance with limited bandwidth, at the same time export all logs to a central device in case it’s needed.',
     active: true # Add true to select section
   }
+
 - {
-    name: Interaction Design,
-    icon: ti-panel,
-    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    name: Identity aware,
+    icon:  ti-shield,
+    description: 'All devices have their own identity managed by X509 certificates and all communication with the Fleet Management API is secured by  MTLS connection, which also managed the device approval to enrol into the fleet.',
     active: # Add true to select section
   }
 
+- {
+    name: Low footprint,
+    icon: ti-wand,
+    description: 'Flotta device is a lightweight daemon that is able to run on disconnected environments or not reliable networks, also managed to limit the control-plane bandwidth.',
+    active: true # Add true to select section
+  }
+- {
+    name: Data Upload,
+    icon: ti-upload,
+    description: 'Upload any data produced by your workload to a centrallized location from all of your devices',
+    active: false # Add true to select section
+  }
+- {
+    name: Ansible integration,
+    icon: ti-plug,
+    description: 'Execute Ansible playbooks on specific subset of Flotta devices and check their execution status',
+    active: true # Add true to select section
+  }
+
+# - {
+#     name: FDO,
+#     icon: ti-vector,
+#     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+#     active: true # Add true to select section
+#   }
+
+# - {
+#     name: GIT OPS friendly,
+#     icon: ti-vector,
+#     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+#     active: true # Add true to select section
+#   }
 
 
 #-------------------------------
@@ -259,38 +284,38 @@ testimonial-items:
 # Client Slider Section
 
 client-slider-items:
-  - logo: "assets/images/clients-logo/client-logo-1.png"
-    url: "#"
+  # - logo: "assets/images/clients-logo/client-logo-1.png"
+  #   url: "#"
 
-  - logo: "assets/images/clients-logo/client-logo-2.png"
-    url: "#"
+  # - logo: "assets/images/clients-logo/client-logo-2.png"
+  #   url: "#"
 
-  - logo: "assets/images/clients-logo/client-logo-3.png"
-    url: "#"
+  # - logo: "assets/images/clients-logo/client-logo-3.png"
+  #   url: "#"
 
-  - logo: "assets/images/clients-logo/client-logo-4.png"
-    url: "#"
+  # - logo: "assets/images/clients-logo/client-logo-4.png"
+  #   url: "#"
 
-  - logo: "assets/images/clients-logo/client-logo-5.png"
-    url: "#"
+  # - logo: "assets/images/clients-logo/client-logo-5.png"
+  #   url: "#"
 
-  - logo: "assets/images/clients-logo/client-logo-1.png"
-    url: "#"
+  # - logo: "assets/images/clients-logo/client-logo-1.png"
+  #   url: "#"
 
-  - logo: "assets/images/clients-logo/client-logo-2.png"
-    url: "#"
+  # - logo: "assets/images/clients-logo/client-logo-2.png"
+  #   url: "#"
 
-  - logo: "assets/images/clients-logo/client-logo-3.png"
-    url: "#"
+  # - logo: "assets/images/clients-logo/client-logo-3.png"
+  #   url: "#"
 
-  - logo: "assets/images/clients-logo/client-logo-4.png"
-    url: "#"
+  # - logo: "assets/images/clients-logo/client-logo-4.png"
+  #   url: "#"
 
-  - logo: "assets/images/clients-logo/client-logo-5.png"
-    url: "#"
+  # - logo: "assets/images/clients-logo/client-logo-5.png"
+  #   url: "#"
 
 #-------------------------------
 # Contact Section
 
 contact-title: Contact Info
-contact-email: steve.fruits@email.com
+contact-email: flotta@redhat.com
diff --git a/_includes/about-section.html b/_includes/about-section.html
@@ -9,4 +9,4 @@
     </div>
   </div>
 </section>
-<!-- /about -->
+<!-- /about -->
diff --git a/_includes/blog-section.html b/_includes/blog-section.html
@@ -3,12 +3,12 @@
   <div class="container">
     <div class="row">
       <div class="col-12 text-center">
-        <h2 class="section-title">Blogs</h2>
+        <h2 class="section-title">Blog</h2>
       </div>
       {% for post in site.posts offset:0 limit:3 %}
       {% include post.html %}
       {% endfor %}
     </div>
   </div>
 </section>
-<!-- /blog -->
+<!-- /blog -->
diff --git a/_includes/features-section.html b/_includes/features-section.html
@@ -0,0 +1,24 @@
+{% if site.data.settings.features %}
+<!-- features -->
+<section class="section">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 text-center">
+        <h2 class="section-title">{{ site.data.settings.features-title }}</h2>
+      </div>
+      {% for feature in site.data.settings.features %}
+      <div class="col-md-4 mb-4 mb-md-0">
+        <div class="card hover-shadow shadow">
+          <div class="card-body {% if feature.active %}active-bg-primary{% endif %} text-center px-4 py-5">
+            <i class="{{ feature.icon }} icon mb-5 d-inline-block"></i>
+            <h4 class="mb-4">{{ feature.name }}</h4>
+            <p>{{ feature.description }}</p>
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+<!-- /features -->
+{% endif %}
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -8,13 +8,13 @@ <h5 class="text-light">Email</h5>
           <p class="text-white paragraph-lg font-secondary">{{ site.data.settings.email }}</p>
         </div>
         <div class="col-md-4">
-          <h5 class="text-light">Phone</h5>
-          <p class="text-white paragraph-lg font-secondary">{{ site.data.settings.phone }}</p>
-        </div>
-        <div class="col-md-4">
-          <h5 class="text-light">Address</h5>
-          <p class="text-white paragraph-lg font-secondary">{{ site.data.settings.address }}</p>
+          <h5 class="text-light">Supported by</h5>
+          <h5><a href="http://www.redhat.com"><img id="sponsorship" class="footerLogo" src="/assets/images/Logo-Red_Hat-Supported_By-A-Reverse-RGB.svg"></a>.</h5>
         </div>
+        <!-- <div class="col-md-4"> -->
+        <!--   <h5 class="text-light">Address</h5> -->
+        <!--   <p class="text-white paragraph-lg font-secondary">{{ site.data.settings.address }}</p> -->
+        <!-- </div> -->
       </div>
     </div>
   </div>
@@ -31,4 +31,4 @@ <h5 class="text-light">Address</h5>
 {% endfor %}
 
 <!-- Main Script -->
-<script src="{{ '/assets/js/script.js' | relative_url }}"></script>
+<script src="{{ '/assets/js/script.js' | relative_url }}"></script>
diff --git a/_includes/head.html b/_includes/head.html
@@ -20,7 +20,7 @@
 
   <!--Favicon-->
   <link rel="shortcut icon" href="{{ '/assets/images/favicon.png' | relative_url }} " type="image/x-icon">
-  <link rel="icon" href="{{ '/assets/images/favicon.png' | relative_url }} " type="image/x-icon">
+  <link rel="icon" href="{{ '/assets/images/flotta-logo-stacked.ico' | relative_url }} " type="image/x-icon">
 
   <!-- google analytics -->
   {% if site.data.settings.google-analytics %}

diff --git a/_includes/header.html b/_includes/header.html
@@ -2,7 +2,7 @@
   <nav class="navbar navbar-expand-lg navbar-dark">
     <a class="navbar-brand font-tertiary h3" href="{{ site.baseurl }}/">
       {% if site.data.settings.logo %}
-        <img src="{{ site.data.settings.logo | absolute_url }}" alt="{{ site.data.settings.title }}">
+        <img src="/{{ site.data.settings.logo}}" alt="{{ site.data.settings.title }}" style="height: 60px;">
         {% else if %}
         <h3 class="text-white font-tertiary">{{site.data.settings.title}}</h3>
       {% endif %}
@@ -25,4 +25,4 @@ <h3 class="text-white font-tertiary">{{site.data.settings.title}}</h3>
       </ul>
     </div>
   </nav>
-</header>
+</header>