You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@activemq.apache.org by ma...@apache.org on 2018/11/06 11:54:55 UTC

[activemq-website] 06/45: first pass at project landing pages

This is an automated email from the ASF dual-hosted git repository.

martyntaylor pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/activemq-website.git

commit cebf8339ff66a88c30b7408e03a39769e95616c6
Author: andytaylor <an...@gmail.com>
AuthorDate: Fri Jul 27 16:03:34 2018 +0100

    first pass at project landing pages
---
 _includes/features.html                  |  6 +--
 _includes/nav.html                       |  4 +-
 _includes/{nav.html => project-nav.html} | 14 ++----
 _includes/splash.html                    | 49 +++++++++++++++++++++
 _includes/users.html                     | 24 +++++------
 _layouts/project_default.html            | 12 ++++++
 _site/css/main.css                       | 31 +++++++++++++
 _site/index.html                         | 42 +++++++++---------
 css/main.scss                            | 37 ++++++++++++++++
 index.html                               |  8 ++--
 projects/activemq/index.html             | 65 ++++++++++++++++++++++++++++
 projects/artemis/index.html              | 74 ++++++++++++++++++++++++++++++++
 projects/cms/index.html                  | 65 ++++++++++++++++++++++++++++
 projects/nms/index.html                  | 65 ++++++++++++++++++++++++++++
 14 files changed, 443 insertions(+), 53 deletions(-)

diff --git a/_includes/features.html b/_includes/features.html
index 5505b83..b15a99f 100644
--- a/_includes/features.html
+++ b/_includes/features.html
@@ -33,7 +33,7 @@
             <div class="card-body">
               <div class="row">
                 <div class="col-sm-12 col-lg-12 feature-img">
-                  <img  src="assets/img/features/protocol-translation.png"></img>
+                  <img  src="/assets/img/features/protocol-translation.png"></img>
                 </div>
                 <div class="col-sm-12 col-lg-12 feature-narative">
                   <p>Applications and deployment environments are varied
@@ -64,7 +64,7 @@
             <div class="card-body">
               <div class="row">
                 <div class="col-sm-12 col-lg-12 feature-img">
-                  <img  src="assets/img/features/protocol-translation.png"></img>
+                  <img  src="/assets/img/features/protocol-translation.png"></img>
                 </div>
                 <div class="col-sm-12 col-lg-12 feature-narative">
                   <p>Applications and deployment environments are varied
@@ -95,7 +95,7 @@
             <div class="card-body">
               <div class="row">
                 <div class="col-sm-12 col-lg-12 feature-img">
-                  <img  src="assets/img/features/protocol-translation.png"></img>
+                  <img  src="/assets/img/features/protocol-translation.png"></img>
                 </div>
                 <div class="col-sm-12 col-lg-12 feature-narative">
                   <p>Applications and deployment environments are varied
diff --git a/_includes/nav.html b/_includes/nav.html
index 6500188..81a808e 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -2,7 +2,7 @@
 <nav class="navbar navbar-expand-lg navbar-light fixed-top">
   <div class="container">
     <!-- <a class="navbar-brand mr-auto" href="#"><img style="height: 50px" src="assets/img/apache-feather.png" /></a> -->
-    <a class="navbar-brand mr-auto" href="#"><img src="assets/img/nav-logo.png" /></a>
+    <a class="navbar-brand mr-auto" href="#"><img src="/assets/img/nav-logo.png" /></a>
     <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
@@ -10,7 +10,7 @@
     <div class="ml-auto collapse navbar-collapse" id="navbarContent">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
-            <a class="nav-link active" href="#">Home</a>
+            <a class="nav-link active" href="/index.html">Home</a>
         </li>
         <li class="nav-item">
             <a class="nav-link" href="#">Projects</a>
diff --git a/_includes/nav.html b/_includes/project-nav.html
similarity index 58%
copy from _includes/nav.html
copy to _includes/project-nav.html
index 6500188..912ca86 100644
--- a/_includes/nav.html
+++ b/_includes/project-nav.html
@@ -1,8 +1,7 @@
 
 <nav class="navbar navbar-expand-lg navbar-light fixed-top">
   <div class="container">
-    <!-- <a class="navbar-brand mr-auto" href="#"><img style="height: 50px" src="assets/img/apache-feather.png" /></a> -->
-    <a class="navbar-brand mr-auto" href="#"><img src="assets/img/nav-logo.png" /></a>
+    <a class="navbar-brand mr-auto" href="#"><img src="/assets/img/nav-logo.png" /> {{ page.project_name }}</a>
     <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
@@ -10,13 +9,10 @@
     <div class="ml-auto collapse navbar-collapse" id="navbarContent">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
-            <a class="nav-link active" href="#">Home</a>
+            <a class="nav-link active" href="/index.html">Home</a>
         </li>
         <li class="nav-item">
-            <a class="nav-link" href="#">Projects</a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link" href="#">Clients</a>
+            <a class="nav-link" href="#">Documentation</a>
         </li>
         <li class="nav-item">
             <a class="nav-link" href="#">Community</a>
@@ -24,10 +20,6 @@
         <li class="nav-item">
             <a class="nav-link" href="#">Team</a>
         </li>
-        <li class="nav-item">
-            <a class="nav-link" href="#">Getting Started</a>
-        </li>
       </ul>
     </div>
-  </div>
 </nav>
diff --git a/_includes/splash.html b/_includes/splash.html
new file mode 100644
index 0000000..9863669
--- /dev/null
+++ b/_includes/splash.html
@@ -0,0 +1,49 @@
+<div class="row">
+    <div class="col-sm-12 slider">
+        <div class="container">
+            <div class="row">
+                <div class="col-12 slider-text align-middle">
+                    <table class="slider slider-lg d-none d-md-block">
+                        <tbody class="slider-lg">
+                        <tr class="slider-lg">
+                            <td class="slider-lg align-middle">{{ page.project_info }}</td>
+                            <td class="slider-lg align-middle">
+                                <img class="float-right" src="/assets/img/main-logo.png"/>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                    <table class="slider d-md-none d-lg-none d-xl-none">
+                        <tbody align="center" class="slider d-inline-block">
+                        <tr>
+                            <td class="align-middle slider-sm logo-sm">Artemis is ActiveMQ's next generation message broker</td>
+                            <td class="slider-sm align-middle"><img class="float-right logo-sm" src="/assets/img/main-logo.png"/></td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-12 slider-text align-middle">
+                    <button style="margin-top: 10px" href="#" class="btn btn-primary btn-outline-light">Download<i class="fa-download fa btn-icon"></i></button>
+                    <button style="margin-top: 10px" href="#" class="btn btn-primary btn-outline-light">Get Started<i class="fa-info-circle fa btn-icon"></i></button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row narative">
+    <div class="col-12">
+        <div class="container">
+            <!-- Narative 2 -->
+            <div class="row">
+                <div class="col-sm-12 narative">
+                    <div class="card">
+                        <div class="card-body narative">{{ page.project_top_narative }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/_includes/users.html b/_includes/users.html
index 2befe0a..de78973 100644
--- a/_includes/users.html
+++ b/_includes/users.html
@@ -7,40 +7,40 @@
         </div>
         <div class="row">
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
         </div>
       </div>
diff --git a/_layouts/project_default.html b/_layouts/project_default.html
new file mode 100644
index 0000000..38e32ec
--- /dev/null
+++ b/_layouts/project_default.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+    {% include head.html %}
+<body>
+    {% include project-nav.html %}
+    <div class="content">
+        {% include splash.html %}
+      {{ content }}
+    </div>
+    {% include footer.html %}
+</body>
+</html>
diff --git a/_site/css/main.css b/_site/css/main.css
index 78d6685..fe32350 100644
--- a/_site/css/main.css
+++ b/_site/css/main.css
@@ -6589,6 +6589,15 @@ table.slider {
   font-size: 1rem;
   padding: 0px !important; }
 
+.project-narative {
+  font-size: 1rem;
+  padding: 0px !important; }
+
+.project-narative-alt {
+  font-size: 1rem;
+  padding: 0px !important;
+  background-color: #eee; }
+
 .card {
   border: 0 !important;
   border-radius: 0 !important; }
@@ -6597,24 +6606,46 @@ table.slider {
   border-left: 5px solid #714099 !important;
   margin-bottom: 40px; }
 
+.card-purple-right {
+  border-right: 5px solid #714099 !important;
+  margin-bottom: 40px; }
+
 .card-pink {
   border: 0 !important;
   border-left: 5px solid #c12766 !important;
   border-radius: 0 !important;
   margin-bottom: 40px; }
 
+.card-pink-right {
+  border: 0 !important;
+  border-right: 5px solid #c12766 !important;
+  border-radius: 0 !important;
+  margin-bottom: 40px; }
+
 .card-orange {
   border: 0 !important;
   border-left: 5px solid #cf242a !important;
   border-radius: 0 !important;
   margin-bottom: 40px; }
 
+.card-orange-right {
+  border: 0 !important;
+  border-right: 5px solid #cf242a !important;
+  border-radius: 0 !important;
+  margin-bottom: 40px; }
+
 .card-blue {
   border: 0 !important;
   border-left: 5px solid #3e489f !important;
   border-radius: 0 !important;
   margin-bottom: 40px; }
 
+.card-blue-right {
+  border: 0 !important;
+  border-right: 5px solid #3e489f !important;
+  border-radius: 0 !important;
+  margin-bottom: 40px; }
+
 .card-white {
   border: 0 !important;
   border-left: 5px solid white !important;
diff --git a/_site/index.html b/_site/index.html
index e46d633..b5b50d9 100644
--- a/_site/index.html
+++ b/_site/index.html
@@ -18,7 +18,7 @@
 <nav class="navbar navbar-expand-lg navbar-light fixed-top">
   <div class="container">
     <!-- <a class="navbar-brand mr-auto" href="#"><img style="height: 50px" src="assets/img/apache-feather.png" /></a> -->
-    <a class="navbar-brand mr-auto" href="#"><img src="assets/img/nav-logo.png" /></a>
+    <a class="navbar-brand mr-auto" href="#"><img src="/assets/img/nav-logo.png" /></a>
     <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
@@ -26,7 +26,7 @@
     <div class="ml-auto collapse navbar-collapse" id="navbarContent">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
-            <a class="nav-link active" href="#">Home</a>
+            <a class="nav-link active" href="/index.html">Home</a>
         </li>
         <li class="nav-item">
             <a class="nav-link" href="#">Projects</a>
@@ -103,7 +103,7 @@
             <li>Multi protocol support</li>
             <li>Built in data replication</li>
           </ul>
-          <button style="margin-top: 10px" href="projects/artemis/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></button>
+          <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
           <button style="margin-top: 10px" href="#" class="btn btn-warning">Download Latest<i class="fa-download fa btn-icon"></i></button>
         </div>
       </div>
@@ -119,7 +119,7 @@
             <li>Multi protocol support</li>
             <li>Built in data replication</li>
           </ul>
-          <button style="margin-top: 10px" href="#" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></button>
+          <a style="margin-top: 10px" href="/projects/activemq/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
           <button style="margin-top: 10px" href="#" class="btn btn-secondary">Download Latest<i class="fa-download fa btn-icon"></i></button>
         </div>
       </div>
@@ -135,7 +135,7 @@
             <li>Multi protocol support</li>
             <li>Built in data replication</li>
           </ul>
-          <button style="margin-top: 10px" href="#" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></button>
+          <a style="margin-top: 10px" href="/projects/nms/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
           <button style="margin-top: 10px" href="#" class="btn btn-success">Download Latest<i class="fa-download fa btn-icon"></i></button>
         </div>
       </div>
@@ -151,7 +151,7 @@
             <li>Multi protocol support</li>
             <li>Built in data replication</li>
           </ul>
-          <button style="margin-top: 10px" href="#" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></button>
+          <a style="margin-top: 10px" href="/projects/cms/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
           <button style="margin-top: 10px" href="#" class="btn btn-info">Download Latest<i class="fa-download fa btn-icon"></i></button>
         </div>
       </div>
@@ -195,7 +195,7 @@
             <div class="card-body">
               <div class="row">
                 <div class="col-sm-12 col-lg-12 feature-img">
-                  <img  src="assets/img/features/protocol-translation.png"></img>
+                  <img  src="/assets/img/features/protocol-translation.png"></img>
                 </div>
                 <div class="col-sm-12 col-lg-12 feature-narative">
                   <p>Applications and deployment environments are varied
@@ -226,7 +226,7 @@
             <div class="card-body">
               <div class="row">
                 <div class="col-sm-12 col-lg-12 feature-img">
-                  <img  src="assets/img/features/protocol-translation.png"></img>
+                  <img  src="/assets/img/features/protocol-translation.png"></img>
                 </div>
                 <div class="col-sm-12 col-lg-12 feature-narative">
                   <p>Applications and deployment environments are varied
@@ -257,7 +257,7 @@
             <div class="card-body">
               <div class="row">
                 <div class="col-sm-12 col-lg-12 feature-img">
-                  <img  src="assets/img/features/protocol-translation.png"></img>
+                  <img  src="/assets/img/features/protocol-translation.png"></img>
                 </div>
                 <div class="col-sm-12 col-lg-12 feature-narative">
                   <p>Applications and deployment environments are varied
@@ -291,40 +291,40 @@
         </div>
         <div class="row">
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
           <div class="user-logo col-sm-4 col-md-2">
-            <img src="assets/img/customers/igindex.png"/>
+            <img src="/assets/img/customers/igindex.png"/>
           </div>
         </div>
       </div>
diff --git a/css/main.scss b/css/main.scss
index 1ce945d..2d441c8 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -125,6 +125,17 @@ table.slider {
   padding: 0px !important;
 }
 
+.project-narative {
+  font-size: 1rem;
+  padding: 0px !important;
+}
+
+.project-narative-alt {
+  font-size: 1rem;
+  padding: 0px !important;
+  background-color: #eee
+}
+
 .card {
   border: 0 !important;
   border-radius: 0 !important;
@@ -135,6 +146,11 @@ table.slider {
   margin-bottom: 40px;
 }
 
+.card-purple-right {
+  border-right: 5px solid $purple !important;
+  margin-bottom: 40px;
+}
+
 .card-pink {
   border: 0 !important;
   border-left: 5px solid $pink !important;
@@ -142,6 +158,13 @@ table.slider {
   margin-bottom: 40px;
 }
 
+.card-pink-right {
+  border: 0 !important;
+  border-right: 5px solid $pink !important;
+  border-radius: 0 !important;
+  margin-bottom: 40px;
+}
+
 .card-orange {
   border: 0 !important;
   border-left: 5px solid $orange !important;
@@ -149,6 +172,13 @@ table.slider {
   margin-bottom: 40px;
 }
 
+.card-orange-right {
+  border: 0 !important;
+  border-right: 5px solid $orange !important;
+  border-radius: 0 !important;
+  margin-bottom: 40px;
+}
+
 .card-blue {
   border: 0 !important;
   border-left: 5px solid $blue !important;
@@ -156,6 +186,13 @@ table.slider {
   margin-bottom: 40px;
 }
 
+.card-blue-right {
+  border: 0 !important;
+  border-right: 5px solid $blue !important;
+  border-radius: 0 !important;
+  margin-bottom: 40px;
+}
+
 .card-white {
   border: 0 !important;
   border-left: 5px solid white !important;
diff --git a/index.html b/index.html
index 4f62cf7..96eac6d 100644
--- a/index.html
+++ b/index.html
@@ -55,7 +55,7 @@ layout: default
             <li>Multi protocol support</li>
             <li>Built in data replication</li>
           </ul>
-          <button style="margin-top: 10px" href="projects/artemis/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></button>
+          <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
           <button style="margin-top: 10px" href="#" class="btn btn-warning">Download Latest<i class="fa-download fa btn-icon"></i></button>
         </div>
       </div>
@@ -71,7 +71,7 @@ layout: default
             <li>Multi protocol support</li>
             <li>Built in data replication</li>
           </ul>
-          <button style="margin-top: 10px" href="#" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></button>
+          <a style="margin-top: 10px" href="/projects/activemq/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
           <button style="margin-top: 10px" href="#" class="btn btn-secondary">Download Latest<i class="fa-download fa btn-icon"></i></button>
         </div>
       </div>
@@ -87,7 +87,7 @@ layout: default
             <li>Multi protocol support</li>
             <li>Built in data replication</li>
           </ul>
-          <button style="margin-top: 10px" href="#" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></button>
+          <a style="margin-top: 10px" href="/projects/nms/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
           <button style="margin-top: 10px" href="#" class="btn btn-success">Download Latest<i class="fa-download fa btn-icon"></i></button>
         </div>
       </div>
@@ -103,7 +103,7 @@ layout: default
             <li>Multi protocol support</li>
             <li>Built in data replication</li>
           </ul>
-          <button style="margin-top: 10px" href="#" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></button>
+          <a style="margin-top: 10px" href="/projects/cms/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
           <button style="margin-top: 10px" href="#" class="btn btn-info">Download Latest<i class="fa-download fa btn-icon"></i></button>
         </div>
       </div>
diff --git a/projects/activemq/index.html b/projects/activemq/index.html
new file mode 100644
index 0000000..20a1e66
--- /dev/null
+++ b/projects/activemq/index.html
@@ -0,0 +1,65 @@
+---
+layout: project_default
+project_name: Classic
+project_info: Apache ActiveMQ ™ is the most popular and powerful open source messaging and Integration Patterns server.
+project_top_narative: Apache ActiveMQ is fast, supports many Cross Language Clients and Protocols, comes with easy to use Enterprise Integration Patterns and many advanced features while fully supporting JMS 1.1 and J2EE 1.4. Apache ActiveMQ is released under the Apache 2.0 License
+---
+
+<div class="row project-narative">
+    <div class="col-12">
+        <div class="container">
+            <!-- Narative 2 -->
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="card card-pink">
+                        <div class="card-body">
+                            <h5 class="card-title text-pink">foo</h5>
+                            <h6>bar</h6>
+                            <p>some words </p>
+                            <a style="margin-top: 10px" href="/projects/activemq/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+
+                        </div>
+
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="card">
+                        <div class="card-body">
+                            <img class="float-right logo-sm" src="/assets/img/features/protocol-translation.png"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row project-narative-alt">
+    <div class="col-12">
+        <div class="container">
+            <!-- Narative 2 -->
+            <div class="row project-narative-alt">
+                <div class="col-sm-6">
+                    <div class="card project-narative-alt">
+                        <div class="card-body">
+                            <img class="float-right logo-sm" src="/assets/img/features/protocol-translation.png"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="card card-pink-right project-narative-alt">
+                        <div class="card-body">
+                            <h5 class="card-title text-pink">foo</h5>
+                            <h6>bar</h6>
+                            <p>somem more words</p>
+                            <a style="margin-top: 10px" href="/projects/activemq/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% include users.html %}
diff --git a/projects/artemis/index.html b/projects/artemis/index.html
index e69de29..ff5e64d 100644
--- a/projects/artemis/index.html
+++ b/projects/artemis/index.html
@@ -0,0 +1,74 @@
+---
+layout: project_default
+project_name: Artemis
+project_info: Artemis is ActiveMQ's next generation message broker built to be both scalable and performant
+project_top_narative: <span>Artemis is a scalable messaging broker with outstanding performance, see the independant article <a href="###">here</a>
+---
+
+<div class="row project-narative">
+    <div class="col-12">
+        <div class="container">
+            <!-- Narative 2 -->
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="card card-purple">
+                        <div class="card-body">
+                            <h5 class="card-title text-purple">Aysnchronous Architecture</h5>
+                            <h6>A scalable and foo bar</h6>
+                            <p>Artemis has been developed using a completely non blocking architecture. This means that
+                            unlike ActiveMQ it does not have bounded client or destination limits. </p>
+                            <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+
+                        </div>
+
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="card">
+                        <div class="card-body">
+                            <img class="float-right logo-sm" src="/assets/img/features/protocol-translation.png"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row project-narative-alt">
+    <div class="col-12">
+        <div class="container">
+            <!-- Narative 2 -->
+            <div class="row project-narative-alt">
+                <div class="col-sm-6">
+                    <div class="card project-narative-alt">
+                        <div class="card-body">
+                            <img class="float-right logo-sm" src="/assets/img/features/protocol-translation.png"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="card card-purple-right project-narative-alt">
+                        <div class="card-body">
+                            <h5 class="card-title text-purple">Multi Protocol</h5>
+                            <h6>Support for multiple Clients</h6>
+                            <p>Artemis supports multiple protocols which means it supports a rich set of clients written
+                                in different technologies </p>
+                            <ul>
+                                <li>The Artemis Protocol (core)</li>
+                                <li>The ActiveMQ protocol (Openwire)</li>
+                                <li>AMQP</li>
+                                <li>STOMP</li>
+                                <li>MQTT</li>
+                            </ul>
+                            <a style="margin-top: 10px" href="/projects/artemis/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% include users.html %}
diff --git a/projects/cms/index.html b/projects/cms/index.html
new file mode 100644
index 0000000..49049e0
--- /dev/null
+++ b/projects/cms/index.html
@@ -0,0 +1,65 @@
+---
+layout: project_default
+project_name: CMS
+project_info: build C++ Applications that can talk to Brokers using a JMS style API
+project_top_narative: CMS (stands for C++ Messaging Service) is a JMS-like API for C++ for interfacing with Message Brokers such as Apache ActiveMQ. CMS helps to make your C++ client code much neater and easier to follow. To get a better feel for CMS try the API Reference. ActiveMQ-CPP is a client only library, a message broker such as Apache ActiveMQ is still needed for your clients to communicate.
+---
+
+<div class="row project-narative">
+    <div class="col-12">
+        <div class="container">
+            <!-- Narative 2 -->
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="card card-blue">
+                        <div class="card-body">
+                            <h5 class="card-title text-blue">foo</h5>
+                            <h6>bar</h6>
+                            <p>some words </p>
+                            <a style="margin-top: 10px" href="/projects/activemq/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+
+                        </div>
+
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="card">
+                        <div class="card-body">
+                            <img class="float-right logo-sm" src="/assets/img/features/protocol-translation.png"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row project-narative-alt">
+    <div class="col-12">
+        <div class="container">
+            <!-- Narative 2 -->
+            <div class="row project-narative-alt">
+                <div class="col-sm-6">
+                    <div class="card project-narative-alt">
+                        <div class="card-body">
+                            <img class="float-right logo-sm" src="/assets/img/features/protocol-translation.png"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="card card-blue-right project-narative-alt">
+                        <div class="card-body">
+                            <h5 class="card-title text-blue">foo</h5>
+                            <h6>bar</h6>
+                            <p>some more words</p>
+                            <a style="margin-top: 10px" href="/projects/activemq/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% include users.html %}
diff --git a/projects/nms/index.html b/projects/nms/index.html
new file mode 100644
index 0000000..caac7b3
--- /dev/null
+++ b/projects/nms/index.html
@@ -0,0 +1,65 @@
+---
+layout: project_default
+project_name: NMS
+project_info: build .NET Applications that can talk to Brokers using a JMS style API
+project_top_narative: The NMS API This allows you to build .NET applications in C#, VB, or any other .NET language, using a single API to connect to multiple different providers using a JMS style API.
+---
+
+<div class="row project-narative">
+    <div class="col-12">
+        <div class="container">
+            <!-- Narative 2 -->
+            <div class="row">
+                <div class="col-sm-6">
+                    <div class="card card-orange">
+                        <div class="card-body">
+                            <h5 class="card-title text-orange">foo</h5>
+                            <h6>bar</h6>
+                            <p>some words </p>
+                            <a style="margin-top: 10px" href="/projects/activemq/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+
+                        </div>
+
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="card">
+                        <div class="card-body">
+                            <img class="float-right logo-sm" src="/assets/img/features/protocol-translation.png"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row project-narative-alt">
+    <div class="col-12">
+        <div class="container">
+            <!-- Narative 2 -->
+            <div class="row project-narative-alt">
+                <div class="col-sm-6">
+                    <div class="card project-narative-alt">
+                        <div class="card-body">
+                            <img class="float-right logo-sm" src="/assets/img/features/protocol-translation.png"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="card card-orange-right project-narative-alt">
+                        <div class="card-body">
+                            <h5 class="card-title text-orange">foo</h5>
+                            <h6>bar</h6>
+                            <p>somem more words</p>
+                            <a style="margin-top: 10px" href="/projects/activemq/index.html" class="btn btn-primary">Find out more<i class="fa-info-circle fa btn-icon"></i></a>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% include users.html %}