You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by zr...@apache.org on 2018/12/18 11:43:59 UTC

[camel-website] branch master updated: [CAMEL-12998] Website design proposal

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

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


The following commit(s) were added to refs/heads/master by this push:
     new 0e97937  [CAMEL-12998] Website design proposal
0e97937 is described below

commit 0e97937352f749a6bf31d4c242b1e75dbf429273
Author: Francois Papon <fr...@openobject.fr>
AuthorDate: Wed Dec 12 16:51:32 2018 +0400

    [CAMEL-12998] Website design proposal
---
 antora-ui-camel/src/css/base.css              |  19 +-
 antora-ui-camel/src/css/footer.css            |   7 +-
 antora-ui-camel/src/css/header.css            |  15 +-
 antora-ui-camel/src/css/main.css              | 217 ++++++++++++++++++++
 antora-ui-camel/src/img/apache-logo.png       | Bin 0 -> 41489 bytes
 antora-ui-camel/src/img/camel-1.svg           | 272 ++++++++++++++++++++++++++
 antora-ui-camel/src/img/camel-2.svg           | 186 ++++++++++++++++++
 antora-ui-camel/src/img/logo-camel-medium.png | Bin 0 -> 22001 bytes
 layouts/index.html                            | 145 +++++++++++++-
 layouts/partials/footer.html                  |  49 ++++-
 layouts/partials/header.html                  |   6 +-
 package.json                                  |   4 +-
 12 files changed, 898 insertions(+), 22 deletions(-)

diff --git a/antora-ui-camel/src/css/base.css b/antora-ui-camel/src/css/base.css
index 35391f8..6eae566 100644
--- a/antora-ui-camel/src/css/base.css
+++ b/antora-ui-camel/src/css/base.css
@@ -1,8 +1,9 @@
 :root {
-  --color-text: #222;
-  --color-navbar-bg: #0a0a0a;
-  --color-navbar-bg-focus: #000;
-  --color-navbar-text: #fff;
+  --color-text: #000;
+  --color-navbar-bg: #fff;
+  --color-navbar-bg-focus: #ed8225;
+  --color-navbar-text: #ed8225;
+  --color-navbar-text-link-hover: #fff;
 }
 
 html,
@@ -18,14 +19,15 @@ body {
 
 html {
   box-sizing: border-box;
-  font-family: "Droid Serif", "DejaVu Serif", serif;
-  font-size: 1.1em;
+  font-family: "Open Sans", "DejaVu Serif", serif;
+  font-size: 1em;
   text-size-adjust: 100%;
 }
 
 @media screen and (min-width: 1024px) {
   html {
-    font-size: 1.2em;
+    font-family: "Open Sans", "DejaVu Serif", serif;
+    font-size: 1em;
   }
 }
 
@@ -37,10 +39,11 @@ body {
 
 a {
   text-decoration: none;
+  color: #ed8225;
 }
 
 a:hover {
-  text-decoration: underline;
+  text-decoration: none;
 }
 
 code,
diff --git a/antora-ui-camel/src/css/footer.css b/antora-ui-camel/src/css/footer.css
index a0f5cf5..882482a 100644
--- a/antora-ui-camel/src/css/footer.css
+++ b/antora-ui-camel/src/css/footer.css
@@ -1,8 +1,7 @@
 footer.footer {
-  font-size: 0.85rem;
-  background-color: #2c2c2c;
-  color: #8e8e8e;
   padding: 0.5rem 1rem;
+  min-height: 200px;
+  text-align: center;
 }
 
 .footer p {
@@ -10,5 +9,5 @@ footer.footer {
 }
 
 .footer a {
-  color: #5d5d5d;
+  color: #ed8225;
 }
diff --git a/antora-ui-camel/src/css/header.css b/antora-ui-camel/src/css/header.css
index 0bb4ec0..54eb698 100644
--- a/antora-ui-camel/src/css/header.css
+++ b/antora-ui-camel/src/css/header.css
@@ -1,5 +1,5 @@
 :root {
-  --navbar-height: 3.25rem;
+  --navbar-height: 4.25rem;
 }
 
 html.is-clipped--navbar {
@@ -13,7 +13,7 @@ body {
 .navbar {
   background-color: var(--color-navbar-bg);
   color: var(--color-navbar-text);
-  font-size: 0.83333rem;
+  font-size: 1rem;
   height: var(--navbar-height);
   position: fixed;
   top: 0;
@@ -30,6 +30,7 @@ body {
 .navbar-brand .navbar-item:first-child a {
   color: var(--color-navbar-text);
   font-size: 1.15rem;
+  width: 180px;
 }
 
 .navbar-brand .separator {
@@ -45,7 +46,7 @@ body {
   .navbar-end > a.navbar-item:hover,
   .navbar-end .navbar-link:hover {
     background-color: var(--color-navbar-bg-focus);
-    color: var(--color-navbar-text);
+    color: var(--color-navbar-text-link-hover);
   }
 
   .navbar-end .navbar-link::after {
@@ -54,7 +55,7 @@ body {
 
   .navbar-item.has-dropdown:hover .navbar-link {
     background-color: var(--color-navbar-bg-focus);
-    color: var(--color-navbar-text);
+    color: var(--color-navbar-text-link-hover);
   }
 }
 
@@ -63,6 +64,12 @@ body {
   display: flex;
   flex-shrink: 0;
   height: var(--navbar-height);
+  background-image: url('../img/logo-camel-medium.png');
+  background-repeat: no-repeat;
+  background-size: 160px;
+  background-position-x: 10px;
+  background-position-y: 10px;
+  width: 180px;
 }
 
 .navbar-burger {
diff --git a/antora-ui-camel/src/css/main.css b/antora-ui-camel/src/css/main.css
index facfd77..a335978 100644
--- a/antora-ui-camel/src/css/main.css
+++ b/antora-ui-camel/src/css/main.css
@@ -9,3 +9,220 @@
     min-width: 0;
   }
 }
+
+.container {
+  margin: 0 auto;
+  position: relative;
+  padding-bottom: 50px;
+}
+
+.centered {
+  max-width: 500px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+@media screen and (min-width: 1088px) {
+  .container {
+    max-width: 960px;
+    width: 960px;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .container {
+    max-width: 1152px;
+    width: 1152px;
+  }
+}
+
+.full-height {
+  min-height: 100vh;
+}
+
+.bg-grey {
+  background-color: #fbfbfb;
+}
+
+.bg-orange {
+  background-color: #ed8225;
+}
+
+.bg-brown {
+  background-color: #6c5d53;
+}
+
+.text-white {
+  color: #fff;
+}
+
+.text-orange {
+  color: #ed8225;
+}
+
+.text-brown {
+  color: #6c5d53;
+}
+
+.muted {
+  color: #999;
+}
+
+.title {
+  font-size: 1.85em;
+  padding-top: 50px;
+}
+
+.subtitle {
+  font-size: 1.45em;
+  font-weight: normal;
+}
+
+.logo-big {
+  width: 200px;
+  height: 200px;
+}
+
+.logo-small {
+  width: 100px;
+  height: 100px;
+}
+
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+}
+
+.column.logo {
+  margin-top: 100px;
+}
+
+.columns:not(.is-desktop) {
+  display: flex;
+}
+
+.columns.centered {
+  align-items: center;
+}
+
+.columns:last-child {
+  margin-bottom: -0.75rem;
+}
+
+.columns {
+  margin-left: -0.75rem;
+  margin-right: -0.75rem;
+  margin-top: -0.75rem;
+}
+
+.column.col-8 {
+  flex: none;
+  width: 66.6667%;
+}
+
+.column.col-7 {
+  flex: none;
+  width: 58.33333333%;
+}
+
+.column.col-6 {
+  flex: none;
+  width: 50%;
+}
+
+.column.col-5 {
+  flex: none;
+  width: 41.66666667%;
+}
+
+.column.col-4 {
+  flex: none;
+  width: 33.3333%;
+}
+
+.colum.col-3 {
+  flex: none;
+  width: 25%;
+}
+
+.column.col-offset-1 {
+  margin-left: 8.33333333%;
+}
+
+.column {
+  display: block;
+  flex-basis: 0;
+  flex-grow: 1;
+  padding: 0.75rem;
+}
+
+.card {
+  width: 300px;
+  height: 320px;
+  background-color: #fff;
+  border-radius: 3px;
+  margin: 0 auto;
+  border: 1px solid #ededed;
+}
+
+.mt-60 {
+  margin-top: 60px;
+}
+
+.card .card-text {
+  padding: 20px;
+}
+
+.card .card-title {
+  padding: 20px;
+}
+
+.shadow {
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+}
+
+.border-bottom {
+  border-bottom: 1px solid #dee2e6 !important;
+}
+
+.divider {
+  height: 3px;
+  border-radius: 50px;
+  background: #ed8225;
+  width: 60px;
+}
+
+.primary-btn {
+  outline: 0;
+  border-color: #ed8225;
+  background-color: #ed8225;
+  color: #fff;
+  transition: all 0.5s;
+  border-radius: 500px;
+  font-family: "Open Sans", sans-serif;
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 16px 40px;
+}
+
+.primary-btn a {
+  color: white;
+  text-decoration: none;
+}
+
+.primary-btn a:hover {
+  text-decoration: none;
+}
+
+.button {
+  height: 48px;
+}
+
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+.text-small {
+  font-size: small;
+}
diff --git a/antora-ui-camel/src/img/apache-logo.png b/antora-ui-camel/src/img/apache-logo.png
new file mode 100644
index 0000000..769fb14
Binary files /dev/null and b/antora-ui-camel/src/img/apache-logo.png differ
diff --git a/antora-ui-camel/src/img/camel-1.svg b/antora-ui-camel/src/img/camel-1.svg
new file mode 100644
index 0000000..be9390a
--- /dev/null
+++ b/antora-ui-camel/src/img/camel-1.svg
@@ -0,0 +1,272 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="141.21454mm"
+   height="40.978458mm"
+   viewBox="0 0 141.21454 40.978458"
+   version="1.1"
+   id="svg2343"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="camel-1.svg">
+  <defs
+     id="defs2337">
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#SVGID_1_-0"
+       id="linearGradient4866"
+       gradientUnits="userSpaceOnUse"
+       x1="333.48315"
+       y1="702.59973"
+       x2="477.00238"
+       y2="563.7301" />
+    <linearGradient
+       id="SVGID_1_-0"
+       gradientUnits="userSpaceOnUse"
+       x1="-4229.6655"
+       y1="-4143.6401"
+       x2="-3987.5886"
+       y2="-3860.573"
+       gradientTransform="matrix(0.4226,-0.9063,0.9063,0.4226,6189.0356,-1936.8361)">
+      <stop
+         offset="0"
+         style="stop-color:#F69923"
+         id="stop3286-8" />
+      <stop
+         offset="0.10995827"
+         style="stop-color:#F79A23"
+         id="stop3288-2" />
+      <stop
+         offset="0.94502056"
+         style="stop-color:#E97826"
+         id="stop3290-2" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3949"
+       id="linearGradient4868"
+       gradientUnits="userSpaceOnUse"
+       x1="333.48315"
+       y1="702.59973"
+       x2="477.00238"
+       y2="563.7301" />
+    <linearGradient
+       gradientTransform="matrix(0.4226,-0.9063,0.9063,0.4226,6189.0356,-1936.8361)"
+       y2="-3860.573"
+       x2="-3987.5886"
+       y1="-4143.6401"
+       x1="-4229.6655"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient3949">
+      <stop
+         id="stop3951"
+         style="stop-color:#F69923"
+         offset="0" />
+      <stop
+         id="stop3953"
+         style="stop-color:#F79A23"
+         offset="0.08047844" />
+      <stop
+         id="stop3955"
+         style="stop-color:#E97826"
+         offset="0.41874287" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4556"
+       id="linearGradient4870"
+       gradientUnits="userSpaceOnUse"
+       x1="633.55072"
+       y1="814.59906"
+       x2="566.47131"
+       y2="909.11664" />
+    <linearGradient
+       gradientTransform="matrix(0.4226,-0.9063,0.9063,0.4226,6189.0356,-1936.8361)"
+       y2="-3860.573"
+       x2="-3987.5886"
+       y1="-4143.6401"
+       x1="-4229.6655"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient4556">
+      <stop
+         id="stop4558"
+         style="stop-color:#f6e423;stop-opacity:1"
+         offset="0" />
+      <stop
+         id="stop4560"
+         style="stop-color:#F79A23"
+         offset="0.41190839" />
+      <stop
+         id="stop4562"
+         style="stop-color:#E97826"
+         offset="0.73270744" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="342.57641"
+     inkscape:cy="5.0030723"
+     inkscape:document-units="mm"
+     inkscape:current-layer="g4767"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="3726"
+     inkscape:window-height="2049"
+     inkscape:window-x="114"
+     inkscape:window-y="55"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata2340">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(210.45846,-18.464318)">
+    <g
+       id="g4839"
+       transform="matrix(0.31520401,0,0,0.31520401,-253.46401,-173.70098)">
+      <g
+         id="g4763"
+         transform="translate(73.918961,19.51005)"
+         inkscape:export-filename="/home/zregvart/workspaces/camel-salesforce/camel/docs/img/logo-medium.png"
+         inkscape:export-xdpi="106.96"
+         inkscape:export-ydpi="106.96">
+        <g
+           transform="translate(-72.023152,20.160046)"
+           id="g4765">
+          <g
+             style="font-size:27.92029381px;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#6c5d53"
+             id="g4767">
+            <path
+               inkscape:connector-curvature="0"
+               d="m 335.43979,637.17977 c 9.45999,0 13.75,5.28001 14.63,11.33 h 2.42 l -1.1,-13.97 h -2.53 c 0,1.32 -0.55,2.2 -1.32,2.2 -2.09,0 -6.6,-3.3 -12.21,-3.3 -17.26998,0 -33.33,12.87002 -33.33,34.21 0,16.71998 11.22002,32.34 31.68,32.34 13.52999,0 19.91,-7.70001 22.66,-14.3 l -2.64,-1.32 c -1.98,5.39 -10.12001,11.88 -17.82,11.88 -11.43999,0 -22.44,-10.56002 -22.44,-31.02 0,-16.71998 9.46001,-28.05 22,-28.05"
+               style="-inkscape-font-specification:'Judson Medium'"
+               id="path4769" />
+            <path
+               inkscape:connector-curvature="0"
+               d="m 371.57479,658.62977 c 1.1,-4.29 5.50001,-5.28 11.22,-5.28 8.57999,0 11,6.05001 11,17.82 -11.10999,3.19 -31.02,5.17001 -31.02,15.4 0,10.55999 7.26001,13.42 16.5,13.42 7.69999,0 12.98,-2.42 16.17,-4.73 1.76,3.52 4.62,4.51 7.81,4.51 7.58999,0 10.12,-1.87 10.12,-5.94 h -1.98 c 0,1.54 -1.87,2.64 -3.74,2.64 -1.87,0 -3.96,-1.76 -3.96,-6.82 v -21.78 c 0,-10.22999 -5.39001,-18.48 -19.8,-18.48 -11.54999,0 -18.15,4.40001 -18.15,12.1 0,3.3 1.87,5.5 4.73,5.5 2.31,0 4.95,-1.1 4.95, [...]
+               style="-inkscape-font-specification:'Judson Medium'"
+               id="path4771" />
+            <path
+               inkscape:connector-curvature="0"
+               d="m 415.7312,698.88977 h 23.76 v -2.31 c -4.62,0 -6.27,-0.66 -6.93,-2.2 v -36.41 c 2.52999,-2.31 6.49,-4.84 11.55,-4.84 6.59999,0 9.24,3.19001 9.24,12.87 v 28.38 c -0.66,1.54 -2.31001,2.2 -6.93,2.2 v 2.31 h 23.76 v -2.31 c -4.62,0 -6.27,-0.66 -6.93,-2.2 v -32.45 c 0,-1.21 -0.11,-2.42 -0.44,-3.52 2.52999,-2.42 6.6,-5.28 11.99,-5.28 6.59999,0 9.24,3.19001 9.24,12.87 v 28.38 c -0.66,1.54 -2.31001,2.2 -6.93,2.2 v 2.31 h 23.76 v -2.31 c -4.62,0 -6.27,-0.66 -6.93,-2.2 v -32.45  [...]
+               style="-inkscape-font-specification:'Judson Medium'"
+               id="path4773" />
+            <path
+               inkscape:connector-curvature="0"
+               d="m 517.08073,672.37977 h 35.31 c 0,-12.09999 -6.60002,-22.99 -23.1,-22.99 -14.73999,0 -22.66,10.56001 -22.66,22.88 0,22.21998 13.64001,27.72 23.76,27.72 11.43999,0 17.6,-3.30001 21.78,-10.12 l -2.64,-1.32 c -4.4,5.5 -9.02001,7.26 -15.4,7.26 -8.68999,0 -16.83,-11.11001 -17.05,-23.43 m 0.11,-3.41 c 0.99,-10.11999 6.82,-16.28 11.66,-16.28 9.78999,0 11.99,7.15001 12.76,16.28 h -24.42"
+               style="-inkscape-font-specification:'Judson Medium'"
+               id="path4775" />
+            <path
+               inkscape:connector-curvature="0"
+               d="m 558.79135,698.88977 h 23.76 v -2.31 c -4.61999,0 -6.27,-0.66 -6.93,-2.2 v -64.79 c -4.94999,0 -12.54,4.73 -16.83,4.73 v 2.53 c 1.65,0 4.18001,0.33 6.93,0.55 v 56.98 c -0.66,1.54 -2.31,2.2 -6.93,2.2 v 2.31"
+               style="-inkscape-font-specification:'Judson Medium'"
+               id="path4777" />
+          </g>
+          <g
+             transform="matrix(0.35549945,0,0,0.35549945,203.40098,388.26524)"
+             id="g4779">
+            <path
+               style="fill:#d22128"
+               inkscape:connector-curvature="0"
+               d="m 280.2335,639.49652 27.23347,-65.09625 h 5.22662 l 27.23347,65.09625 h -6.87714 l -8.43962,-20.35633 h -29.24709 l -8.3406,20.35633 z m 29.89629,-57.58091 -13.39116,32.18501 h 26.40821 z"
+               id="path4781" />
+            <path
+               style="fill:#d22128"
+               inkscape:connector-curvature="0"
+               d="m 346.95825,639.49652 v -65.09625 h 26.95838 c 11.19048,0 19.25599,10.36523 19.25599,20.44436 0,10.64031 -7.51534,20.63142 -18.70582,20.63142 h -21.18159 v 24.02047 z m 6.32696,-29.70924 h 20.80748 c 7.70239,0 12.65393,-7.0642 12.65393,-14.94265 0,-8.16454 -6.05188,-14.76659 -13.20411,-14.76659 h -20.2573 z"
+               id="path4783" />
+            <path
+               style="fill:#d22128"
+               inkscape:connector-curvature="0"
+               d="m 389.60751,639.49652 27.23347,-65.09625 h 5.22663 l 27.23346,65.09625 h -6.87713 l -8.43963,-20.35633 h -29.24709 l -8.3406,20.35633 z m 29.8853,-57.58091 -13.39117,32.18501 h 26.40821 z"
+               id="path4785" />
+            <path
+               style="fill:#d22128"
+               inkscape:connector-curvature="0"
+               d="m 480.09965,574.03716 c 11.5536,0 19.98222,5.86482 24.02047,14.21642 l -5.1386,3.11397 c -4.12628,-8.61568 -12.19179,-11.55359 -19.25598,-11.55359 -15.59185,0 -24.1085,13.94133 -24.1085,27.04641 0,14.39247 10.54128,27.40952 24.38358,27.40952 7.33928,0 15.95496,-3.66414 20.08125,-12.10376 l 5.31465,2.75085 c -4.21431,9.71602 -15.7679,15.12971 -25.75901,15.12971 -17.88056,0 -30.43547,-17.05531 -30.43547,-33.56044 0,-15.67988 11.26751,-32.44909 30.89761,-32.44909 z"
+               id="path4787" />
+            <path
+               style="fill:#d22128"
+               inkscape:connector-curvature="0"
+               d="m 565.69527,574.40027 v 65.09625 h -6.41499 v -30.43547 h -38.6 v 30.43547 h -6.32698 v -65.09625 h 6.32698 v 28.97201 h 38.6 v -28.97201 z"
+               id="path4789" />
+            <path
+               style="fill:#d22128"
+               inkscape:connector-curvature="0"
+               d="m 624.13445,633.80775 v 5.68877 h -43.7386 v -65.09625 h 42.91334 v 5.68877 h -36.58638 v 23.4703 h 31.90993 v 5.40268 h -31.90993 v 24.84573 z"
+               id="path4791" />
+            <path
+               style="fill:#6d6e71"
+               inkscape:connector-curvature="0"
+               d="m 640.17744,573.74007 c 0.99031,0.99031 1.48546,2.18968 1.48546,3.58711 0,1.39744 -0.49515,2.59681 -1.48546,3.59812 -0.99031,1.00131 -2.20069,1.50747 -3.60912,1.50747 -1.41945,0 -2.61882,-0.49515 -3.59812,-1.48546 -0.97931,-0.99031 -1.47446,-2.18968 -1.47446,-3.58712 0,-1.39743 0.49515,-2.5968 1.48546,-3.59812 0.99031,-1.00131 2.18968,-1.50746 3.59812,-1.50746 1.40844,0 2.60781,0.49515 3.59812,1.48546 z m -0.42914,6.7671 c 0.86927,-0.88027 1.29841,-1.9366 1.29841,-3.168 [...]
+               id="path4793" />
+          </g>
+        </g>
+        <g
+           transform="translate(-5.4017408,7.3976335)"
+           id="g4795" />
+      </g>
+      <g
+         id="g4801"
+         transform="translate(-386.87395,-169.40258)">
+        <g
+           transform="translate(216.2639,-21.04569)"
+           id="g4803">
+          <circle
+             r="63.02026"
+             cy="629.22614"
+             cx="412.33255"
+             style="fill:url(#linearGradient4866);stroke:url(#linearGradient4868);stroke-width:5;stroke-linejoin:round"
+             id="path4805"
+             transform="matrix(0.99205956,0,0,0.99205956,-36.8047,240.87219)" />
+        </g>
+        <path
+           id="path4807"
+           d="m 573.3125,817.40625 c -0.88906,-10e-4 -1.78972,0.005 -2.6875,0.0312 -1.0437,0.0308 -2.44587,0.36218 -4.0625,0.90625 27.30936,20.73702 37.12671,58.14612 20.25,90.65625 0.57317,0.0149 1.14197,0.0625 1.71875,0.0625 30.8438,0 56.61984,-21.49325 63.28125,-50.3125 -19.57261,-22.9434 -46.11809,-41.29445 -78.5,-41.34375 z"
+           style="opacity:0.75;fill:url(#linearGradient4870)"
+           inkscape:connector-curvature="0" />
+        <path
+           id="path4809"
+           d="m 566.5625,818.34375 c -9.06824,3.05185 -26.36759,13.8017 -43,28.15625 1.26312,34.19531 28.96142,61.60672 63.25,62.5 16.87671,-32.51013 7.05936,-69.91923 -20.25,-90.65625 z"
+           style="opacity:0.75;fill:#28170b"
+           inkscape:connector-curvature="0" />
+        <g
+           id="g4811">
+          <path
+             id="path4813"
+             d="m 590.31114,806.30878 c -0.47239,-0.0321 -0.93151,0.0284 -1.375,0.25 -5.59922,2.80111 0,14 0,14 -16.80659,14.00851 -13.23603,37.9375 -32.84375,37.9375 -10.68885,0 -21.32208,-12.29336 -32.53125,-19.8125 -0.1443,1.77333 -0.25,3.56448 -0.25,5.375 0,24.51458 13.51013,45.86312 33.46875,57.06251 5.58277,-0.70321 11.15751,-2.11392 15.34375,-4.90625 21.99196,-14.6623 27.4523,-42.55657 36.4375,-56.03126 5.59618,-8.4063 31.82432,-7.67689 33.59375,-11.21875 2.80409,-5.6022 -5.60209, [...]
+             style="fill:#ffffff"
+             inkscape:connector-curvature="0" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/antora-ui-camel/src/img/camel-2.svg b/antora-ui-camel/src/img/camel-2.svg
new file mode 100644
index 0000000..b28d01f
--- /dev/null
+++ b/antora-ui-camel/src/img/camel-2.svg
@@ -0,0 +1,186 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="34.45047mm"
+   height="34.397461mm"
+   viewBox="0 0 34.45047 34.397461"
+   version="1.1"
+   id="svg3027"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="camel-2.svg">
+  <defs
+     id="defs3021">
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#SVGID_1_-0"
+       id="linearGradient4884"
+       gradientUnits="userSpaceOnUse"
+       x1="333.48315"
+       y1="702.59973"
+       x2="477.00238"
+       y2="563.7301" />
+    <linearGradient
+       id="SVGID_1_-0"
+       gradientUnits="userSpaceOnUse"
+       x1="-4229.6655"
+       y1="-4143.6401"
+       x2="-3987.5886"
+       y2="-3860.573"
+       gradientTransform="matrix(0.4226,-0.9063,0.9063,0.4226,6189.0356,-1936.8361)">
+      <stop
+         offset="0"
+         style="stop-color:#F69923"
+         id="stop3286-8" />
+      <stop
+         offset="0.10995827"
+         style="stop-color:#F79A23"
+         id="stop3288-2" />
+      <stop
+         offset="0.94502056"
+         style="stop-color:#E97826"
+         id="stop3290-2" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3949"
+       id="linearGradient4886"
+       gradientUnits="userSpaceOnUse"
+       x1="333.48315"
+       y1="702.59973"
+       x2="477.00238"
+       y2="563.7301" />
+    <linearGradient
+       gradientTransform="matrix(0.4226,-0.9063,0.9063,0.4226,6189.0356,-1936.8361)"
+       y2="-3860.573"
+       x2="-3987.5886"
+       y1="-4143.6401"
+       x1="-4229.6655"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient3949">
+      <stop
+         id="stop3951"
+         style="stop-color:#F69923"
+         offset="0" />
+      <stop
+         id="stop3953"
+         style="stop-color:#F79A23"
+         offset="0.08047844" />
+      <stop
+         id="stop3955"
+         style="stop-color:#E97826"
+         offset="0.41874287" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4556"
+       id="linearGradient4888"
+       gradientUnits="userSpaceOnUse"
+       x1="633.55072"
+       y1="814.59906"
+       x2="566.47131"
+       y2="909.11664" />
+    <linearGradient
+       gradientTransform="matrix(0.4226,-0.9063,0.9063,0.4226,6189.0356,-1936.8361)"
+       y2="-3860.573"
+       x2="-3987.5886"
+       y1="-4143.6401"
+       x1="-4229.6655"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient4556">
+      <stop
+         id="stop4558"
+         style="stop-color:#f6e423;stop-opacity:1"
+         offset="0" />
+      <stop
+         id="stop4560"
+         style="stop-color:#F79A23"
+         offset="0.41190839" />
+      <stop
+         id="stop4562"
+         style="stop-color:#E97826"
+         offset="0.73270744" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="-873.46818"
+     inkscape:cy="53.5745"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="3726"
+     inkscape:window-height="2049"
+     inkscape:window-x="114"
+     inkscape:window-y="55"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata3024">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-111.28667,-128.61079)">
+    <g
+       id="g4564"
+       transform="matrix(0.26458333,0,0,0.26458333,-27.172735,-77.514517)">
+      <g
+         transform="translate(216.2639,-21.04569)"
+         id="g4478">
+        <circle
+           r="63.02026"
+           cy="629.22614"
+           cx="412.33255"
+           style="fill:url(#linearGradient4884);stroke:url(#linearGradient4886);stroke-width:5;stroke-linejoin:round"
+           id="path4222"
+           transform="matrix(0.99205956,0,0,0.99205956,-36.8047,240.87219)" />
+      </g>
+      <path
+         id="path4491"
+         d="m 573.3125,817.40625 c -0.88906,-10e-4 -1.78972,0.005 -2.6875,0.0312 -1.0437,0.0308 -2.44587,0.36218 -4.0625,0.90625 27.30936,20.73702 37.12671,58.14612 20.25,90.65625 0.57317,0.0149 1.14197,0.0625 1.71875,0.0625 30.8438,0 56.61984,-21.49325 63.28125,-50.3125 -19.57261,-22.9434 -46.11809,-41.29445 -78.5,-41.34375 z"
+         style="opacity:0.75;fill:url(#linearGradient4888)"
+         inkscape:connector-curvature="0" />
+      <path
+         id="path4496"
+         d="m 566.5625,818.34375 c -9.06824,3.05185 -26.36759,13.8017 -43,28.15625 1.26312,34.19531 28.96142,61.60672 63.25,62.5 16.87671,-32.51013 7.05936,-69.91923 -20.25,-90.65625 z"
+         style="opacity:0.75;fill:#28170b"
+         inkscape:connector-curvature="0" />
+      <g
+         id="g4483">
+        <path
+           id="path4224-2"
+           d="m 590.31114,806.30878 c -0.47239,-0.0321 -0.93151,0.0284 -1.375,0.25 -5.59922,2.80111 0,14 0,14 -16.80659,14.00851 -13.23603,37.9375 -32.84375,37.9375 -10.68885,0 -21.32208,-12.29336 -32.53125,-19.8125 -0.1443,1.77333 -0.25,3.56448 -0.25,5.375 0,24.51458 13.51013,45.86312 33.46875,57.06251 5.58277,-0.70321 11.15751,-2.11392 15.34375,-4.90625 21.99196,-14.6623 27.4523,-42.55657 36.4375,-56.03126 5.59618,-8.4063 31.82432,-7.67689 33.59375,-11.21875 2.80409,-5.6022 -5.60209,-1 [...]
+           style="fill:#ffffff"
+           inkscape:connector-curvature="0" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/antora-ui-camel/src/img/logo-camel-medium.png b/antora-ui-camel/src/img/logo-camel-medium.png
new file mode 100644
index 0000000..36701f7
Binary files /dev/null and b/antora-ui-camel/src/img/logo-camel-medium.png differ
diff --git a/layouts/index.html b/layouts/index.html
index 051e884..9fb19f1 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,3 +1,146 @@
 {{ partial "header.html" . }}
 
-{{ partial "footer.html" . }}
\ No newline at end of file
+<div class="container">
+    <div class="columns">
+        <div class="column col-5 col-offset-1">
+            <h1 class="title">Integration that you want!</h1>
+            <h2 class="subtitle muted">Camel empowers you to define routing and mediation rules in a variety of domain-specific languages.</h2>
+            <p class="mt-60"><a href="#" class="primary-btn">Get started</a>
+            </p>
+        </div>
+        <div class="column col-5 col-offset-1 logo">
+            <img src="./_/img/camel-2.svg" class="logo-big"/>
+        </div>
+    </div>
+</div>
+
+<section class="bg-grey">
+    <div class="container centered">
+        <h1 class="title">Apache Camel provides support</h1>
+        <h2 class="subtitle muted">Bean Binding and seamless integration with popular frameworks such as CDI, Spring, Blueprint and Guice</h2>
+        <div class="divider centered"></div>
+    </div>
+    <div class="container">
+        <div class="columns">
+            <div class="column col-4">
+                <div class="card centered">
+                    <div class="card-title"><h3>Enterprise Integration Patterns</h3></div>
+                    <div class="card-text muted">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </div>
+                </div>
+            </div>
+            <div class="column col-4">
+                <div class="card centered">
+                    <div class="card-title"><h3>Components</h3></div>
+                    <div class="card-text muted">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </div>
+                </div>
+            </div>
+            <div class="column col-4">
+                <div class="card centered">
+                    <div class="card-title"><h3>Data Format</h3></div>
+                    <div class="card-text muted">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section>
+    <div class="container">
+        <div class="columns">
+            <div class="column col-5">
+                <h1 class="title">Running Apache Camel</h1>
+                <h2 class="subtitle muted">The following projects can leverage Apache Camel as a routing and mediation engine</h2>
+                <div class="divider"></div>
+            </div>
+            <div class="column col-7 mt-60">
+                <h3>Apache ServiceMix</h3>
+                <p class="muted">Popular distributed open source ESB and JBI container.</p>
+                <h3>Apache ActiveMQ</h3>
+                <p class="muted">Mature, widely used open source message broker.</p>
+                <h3>Apache CXF</h3>
+                <p class="muted">Smart web services suite (JAX-WS and JAX-RS).</p>
+                <h3>Apache Karaf</h3>
+                <p class="muted">Small OSGi based runtime in which applications can be deployed</p>
+                <h3>Apache Mina</h3>
+                <p class="muted">High-performance NIO-driven networking framework.</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="bg-grey">
+    <div class="container centered">
+        <h1 class="title">Camel K</h1>
+        <h2 class="subtitle muted">Apache Camel K is a lightweight integration framework built from Apache Camel that runs
+            natively on Kubernetes and is specifically designed for serverless and microservice architectures.</h2>
+        <p class="mt-60"><a href="#" class="primary-btn">Get started</a></p>
+    </div>
+</section>
+
+
+<section>
+    <div class="container">
+        <div class="columns">
+            <div class="column col-7">
+                <h1 class="title">Apache & OpenSource</h1>
+                <h2 class="subtitle muted">Camel is your project!</h2>
+
+                <p class="muted">
+                    Camel is an <a href="https://www.apache.org">Apache Software Foundation</a> project, available under the Apache v2 license.<br/>
+                    It's a complete open community, always listening proposals and comments.<br/>
+                    <a href="community.html">Sources</a>, <a href="community.html">mailing lists</a>, <a href="community.html">issue tracker</a>: it's fully open, you can access directly.<br/>
+                    We also love contributions : don't hesitate to <a href="community.html">contribute</a>.
+                </p>
+                <p>
+                    <a href="community.html">Be Involved In The Community</a> |
+                    <a href="community.html">How To Contribute</a>
+                </p>
+            </div>
+            <div class="column col-5 logo">
+                <img src="./_/img/apache-logo.png" class="img-fluid"/>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="bg-orange">
+    <div class="container centered text-white">
+        <h1 class="title">Latest news</h1>
+    </div>
+    <div class="container">
+        <div class="columns">
+            <div class="column col-4">
+                <div class="card">
+                    <div class="card-title"><h4>Release </h4></div>
+                    <div class="card-text muted">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </div>
+                </div>
+            </div>
+            <div class="column col-4">
+                <div class="card">
+                    <div class="card-title"><h4>Component</h4></div>
+                    <div class="card-text muted">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </div>
+                </div>
+            </div>
+            <div class="column col-4">
+                <div class="card">
+                    <div class="card-title"><h4>Event</h4></div>
+                    <div class="card-text muted">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+{{ partial "footer.html" . }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 7e04258..fa36839 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,4 +1,51 @@
-    <footer class="footer">
+    <footer class="footer bg-brown text-white">
+        <div class="container">
+            <div class="columns">
+                <div class="column col-3">
+                    <img src="./_/img/camel-2.svg" class="logo-small mt-60"/>
+                </div>
+                <div class="column col-3">
+                    <h4>Overview</h4>
+                    <ul class="list-unstyled">
+                        <li><a href="news.html">News</a></li>
+                        <li><a href="news.html">Components</a></li>
+                        <li><a href="news.html">Download</a></li>
+                        <li><a href="news.html">Getting started</a></li>
+                        <li><a href="news.html">FAQ</a></li>
+                    </ul>
+                </div>
+                <div class="column col-3">
+                    <h4>Community</h4>
+                    <ul class="list-unstyled">
+                        <li><a href="news.html">Support</a></li>
+                        <li><a href="news.html">Contributing</a></li>
+                        <li><a href="news.html">User stories</a></li>
+                        <li><a href="news.html">Article</a></li>
+                        <li><a href="news.html">Team</a></li>
+                        <li><a href="news.html">Camel extra</a></li>
+                    </ul>
+                </div>
+                <div class="column col-3">
+                    <h4>About</h4>
+                    <ul class="list-unstyled">
+                        <li><a target="_blank" href="https://www.apache.org/events/current-event.html" title="Apache Events">Apache Events</a></li>
+                        <li><a target="_blank" href="https://www.apache.org/licenses/" title="License">License</a></li>
+                        <li><a target="_blank" href="https://www.apache.org/security/" title="Security">Security</a></li>
+                        <li><a target="_blank" href="https://www.apache.org/foundation/sponsorship.html" title="Sponsorship">Sponsorship</a></li>
+                        <li><a target="_blank" href="https://www.apache.org/foundation/thanks.html" title="Thanks">Thanks</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="container">
+            © 2004-2018 The Apache Software Foundation.<br>
+            Apache Camel, Camel, Apache, the Apache feather logo, and the Apache Camel project logo are trademarks of
+            The Apache Software Foundation. All other marks mentioned may be trademarks or registered trademarks of
+            their respective owners.
+        </div>
     </footer>
+    <script src="{{ "/_/js/site.js" | relURL }}"></script>
+    <script src="{{ "/_/js/vendor/highlight.js" | relURL }}"></script>
+    <script>hljs.initHighlighting()</script>
 </body>
 </html>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 0d15d0d..a01f825 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -16,9 +16,9 @@
 <head>
 
 <body class="article">
-    <nav class="navbar">
+    <nav class="navbar shadow border-bottom">
         <div class="navbar-brand">
-          <a class="navbar-item" href="{{ .Site.BaseURL | relURL }}">Apache Camel</a>
+          <a class="navbar-item" href="{{ .Site.BaseURL | relURL }}"></a>
           <button class="navbar-burger" data-target="topbar-nav">
             <span></span>
             <span></span>
@@ -44,4 +44,4 @@
           </div>
         </div>
       </nav>
-    </header>
\ No newline at end of file
+    </header>
diff --git a/package.json b/package.json
index a564821..a0989e5 100644
--- a/package.json
+++ b/package.json
@@ -15,5 +15,7 @@
     "gulp-htmlmin": "^5.0.1",
     "hugo-bin": "^0.39.0",
     "npm-run-all": "^4.1.5"
-  }
+  },
+  "version": "1.0.0-SNAPSHOT",
+  "license": "Apache-2.0"
 }