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 fd42c05 CAMEL-15300: Update Front Page Design
fd42c05 is described below
commit fd42c051f6cdefc71d4d75323668f3306756e7fb
Author: Aashna Jena <32356795+aashnaj...@users.noreply.github.com>
AuthorDate: Tue Aug 11 02:43:19 2020 +0530
CAMEL-15300: Update Front Page Design
---
antora-ui-camel/src/css/frontpage.css | 443 ++++++++++++++++++++++------------
antora-ui-camel/src/css/header.css | 143 +----------
config.toml | 40 ---
content/_index.md | 173 +++++++++----
content/docs/_index.md | 2 +-
layouts/index.html | 52 +++-
layouts/partials/header.html | 11 -
static/img/camel-gears.svg | 1 +
static/img/components.svg | 1 +
static/img/data-formats.svg | 1 +
static/img/patterns.svg | 1 +
static/img/runtimes.svg | 1 +
12 files changed, 465 insertions(+), 404 deletions(-)
diff --git a/antora-ui-camel/src/css/frontpage.css
b/antora-ui-camel/src/css/frontpage.css
index 8a8118a..af5c476 100644
--- a/antora-ui-camel/src/css/frontpage.css
+++ b/antora-ui-camel/src/css/frontpage.css
@@ -1,212 +1,241 @@
-header.frontpage {
- font-size: 1.5rem;
- display: flex;
- flex-flow: column;
- align-items: center;
+/* common css for sections */
+
+section.frontpage h1,
+section.frontpage h2 {
+ font-weight: var(--heading-font-weight);
+ color: var(--heading-font-color);
+ line-height: 1.3;
+ margin: 1rem 0 0;
+ text-transform: uppercase;
+ word-wrap: break-word;
+}
+
+section.frontpage {
+ color: var(--doc-font-color);
+ font-size: var(--doc-font-size);
+ line-height: var(--doc-line-height);
margin: 0 auto;
- max-width: 60rem;
+ max-width: var(--frontpage-max-width);
}
-header.frontpage h1 {
- font-size: 5rem;
- font-weight: bolder;
- color: var(--heading-font-color);
- margin-top: 3rem;
- text-align: center;
- text-transform: none;
- text-shadow: -1px -1px 1px #fff5, 1px -1px 1px #fff5, -1px 1px 1px #fff5,
1px 1px 1px #fff5;
+section.frontpage a {
+ color: var(--link-font-color);
}
-header.frontpage p {
- hyphens: none;
- margin-top: 3rem;
+section.frontpage a:hover {
+ color: var(--link_hover-font-color);
+}
+
+section.frontpage h1 {
+ width: 100%;
text-align: center;
- line-height: 1.5;
- color: var(--body-font-color);
+ margin-bottom: 1rem;
+ font-size: 2.5rem;
}
-header.frontpage a {
- color: var(--heading-font-color);
- text-decoration: underline;
+section.frontpage h2 {
+ text-align: center;
}
-header.frontpage a:hover {
- color: var(--heading-font-color);
- text-decoration: underline;
+/* css for header section */
+
+header.frontpage {
+ display: flex;
+ flex-direction: row;
+ margin: 2rem 3rem 2.5rem;
}
-header.frontpage a:active {
- color: var(--heading-font-color);
+header.frontpage img {
+ width: 45vw;
+ max-height: 50vh;
}
-.frontpage a:hover {
- color: var(--color-white);
- text-decoration: none;
+header.frontpage .main-heading {
+ width: 50vw;
+ display: flex;
+ flex-direction: column;
+ margin-left: 2rem;
}
-.frontpage a:active {
- color: var(--color-white);
+header.frontpage h1 {
+ font-size: 5vw;
+ color: var(--color-asf-dark-blue);
+ margin-bottom: 0.5rem;
}
-.frontpage a.significant {
- margin: 1rem;
- padding: 0.8rem 1.5rem;
- background: var(--color-camel-orange);
- color: var(--color-white);
- border-radius: 8px;
+header.frontpage p {
font-size: 1.2rem;
+ margin-bottom: 2rem;
+ line-height: 1.7rem;
+}
+
+.frontpage a.button-dark,
+.frontpage a.button-dark:hover {
+ white-space: nowrap;
+ padding: 0.7rem 1rem;
+ background-color: var(--color-camel-orange);
+ color: white;
font-weight: bold;
- outline: none;
- display: inline-block;
- box-shadow: 0 4px #8e480b;
+ margin-right: 0.5rem;
+ border-radius: 3rem;
}
-.frontpage a.significant:hover {
- color: var(--color-white);
- box-shadow: 0 3px #8e480b;
- transform: translateY(2px);
+.frontpage a.button-light {
+ padding: 0.7rem 1rem;
+ border: 1px solid var(--color-gray-70);
+ color: var(--color-gray-70);
+ font-weight: bold;
+ border-radius: 3rem;
+ white-space: nowrap;
}
-.frontpage a.significant:active {
- color: var(--color-white);
- box-shadow: 0 3px #8e480b;
- transform: translateY(2px);
+/* css for blog section */
+
+div.frontpage.news {
+ padding: 0.2rem 0;
+ width: 20%;
+ text-align: center;
+ margin-left: 3rem;
+ background-color: var(--color-smoke-50);
+ border-radius: 1rem 1rem 0 0;
}
-header.frontpage svg {
- position: absolute;
- top: 4rem;
- left: 0;
- width: 100%;
- height: 14rem;
- z-index: -1;
+div.frontpage.news h2 {
+ margin-bottom: 0.5rem;
}
-header.frontpage svg path {
- fill: none;
- animation: sparkle 2s ease alternate infinite;
+section.frontpage.columns.blog-posts {
+ margin: 0;
+ display: flex;
+ flex-direction: row;
+ padding: 1rem 1rem 1rem 3rem;
+ max-width: none;
+ border-top: none;
+ background-color: var(--color-smoke-50);
}
-header.frontpage svg path:nth-child(1) {
- stroke: #ffebcc;
- stroke-width: 10;
- stroke-opacity: 0.9;
+li.blog-post .content {
+ padding: 1rem;
+ padding-right: 0.5rem;
}
-header.frontpage svg path:nth-child(2) {
- stroke: #911408;
- stroke-width: 10;
- stroke-opacity: 0.3;
- animation-delay: -1s;
+li.blog-post .content h2 {
+ text-align: left;
+ margin: 0;
}
-header.frontpage svg path:nth-child(3) {
- stroke: #f1b35b;
- stroke-width: 15;
- stroke-opacity: 0.6;
- animation-delay: -3.5s;
+li.blog-post .content p {
+ margin: 0.2rem 0;
}
-header.frontpage svg path:nth-child(4) {
- stroke: #f28a40;
- stroke-width: 5;
- stroke-opacity: 0.4;
- animation-delay: -3s;
+li.blog-post .content a {
+ font-weight: bold;
+ white-space: nowrap;
}
-header.frontpage svg path:nth-child(5) {
- stroke: #ee6d11;
- stroke-width: 5;
- stroke-opacity: 0.6;
- animation-delay: -6s;
+li.blog-post {
+ display: flex;
+ width: 30vw;
+ margin: 0 1vw;
+ border-radius: 1rem;
}
-@keyframes sparkle {
- 0% {
- stroke-opacity: 0.2;
- }
+li.blog-post time.date {
+ margin-top: 1rem;
+ text-align: center;
+ color: var(--color-asf-dark-blue);
+ text-transform: uppercase;
+}
- 100% {
- stroke-opacity: 0.6;
- }
+li.blog-post time.date .day {
+ font-size: 3.2rem;
+ font-weight: bold;
+ padding: 0;
+ line-height: 1;
}
-section.frontpage {
- color: var(--doc-font-color);
- font-size: var(--doc-font-size);
- line-height: var(--doc-line-height);
- margin: 0 auto;
- margin-top: 4rem;
- max-width: var(--frontpage-max-width);
+li.blog-post time.date .month {
+ font-size: 1.5rem;
+ font-weight: bold;
+ line-height: 1.2;
+}
+
+/* common css for columns section */
+
+section.frontpage.columns.functionalities p,
+section.frontpage.projects .project .content p {
+ margin-bottom: 1.5rem;
}
-section.frontpage.columns,
section.frontpage.projects,
-section.frontpage.apache {
+section.frontpage.apache,
+section.frontpage.functionalities {
display: flex;
flex-wrap: wrap;
border-top: 1px solid var(--color-smoke-50);
padding: 2rem 1rem 1rem 1rem;
}
-section.frontpage.projects .section {
- width: calc(33% - 3rem);
- padding: 1%;
- margin: 1.5rem;
+section.frontpage.columns.functionalities {
+ border: none;
}
-section.frontpage h1,
-section.frontpage h2,
-section.frontpage h3,
-section.frontpage h4,
-section.frontpage h5,
-section.frontpage h6 {
- font-weight: var(--heading-font-weight);
- color: var(--heading-font-color);
- line-height: 1.3;
- margin: 1rem 0 0;
- text-transform: uppercase;
- word-wrap: break-word;
+section.frontpage.columns.functionalities h2,
+section.frontpage.projects .project .content h2,
+section.frontpage.projects .project .content p {
+ text-align: left;
+ text-transform: none;
}
-section.frontpage a {
- color: var(--link-font-color);
+/* css for functionalities section */
+
+section.frontpage.columns.functionalities .box {
+ width: 70%;
+ display: flex;
+ margin: 2vw auto;
}
-section.frontpage a:hover {
- color: var(--link_hover-font-color);
+section.frontpage.columns.functionalities .box .content {
+ width: 55vw;
+ margin: 0 1vw;
}
-section.frontpage h1 {
- width: 100%;
+section.frontpage.columns.functionalities .box .icon {
+ width: 30vw;
text-align: center;
- margin-bottom: 1rem;
}
-section.frontpage h2 {
- text-align: center;
+section.frontpage.columns.functionalities img {
+ height: 12rem;
+ margin: 0 1vw;
}
-section.frontpage.columns .box {
- width: calc(50% - 3rem);
- flex-direction: column;
- align-items: center;
- text-align: center;
- padding: 2rem;
- margin: 1.5rem;
- border: 1px solid var(--color-smoke-90);
+/* css for projects section */
+section.frontpage.projects {
+ width: 80%;
+ max-width: none;
+ margin: 0 auto;
}
-.section.frontpage.columns .box img {
- width: 27rem;
+section.frontpage.projects .project {
+ display: flex;
+ width: 50%;
+ padding: 1rem;
}
-section.frontpage.columns .box .feature-icon {
- width: 3.75rem;
- height: 3.75rem;
- filter: invert(24%) sepia(38%) saturate(1353%) hue-rotate(200deg)
brightness(89%) contrast(99%);
+section.frontpage.projects .project .icon {
+ min-width: 8rem;
+ margin-right: 1rem;
+ text-align: center;
}
+section.frontpage.projects .project img {
+ height: 6rem;
+ margin-top: 2rem;
+}
+
+/* css for apache section */
+
.split {
flex: 50%;
padding: 1rem 0 2rem 0;
@@ -216,26 +245,16 @@ section.frontpage.columns .box .feature-icon {
max-width: 100%;
}
-@media screen and (max-width: 626px) {
- section.frontpage.columns,
- section.frontpage.apache,
- section.frontpage.projects {
- padding-top: 1rem;
- }
-
- section.frontpage.projects .section {
- width: 100%;
- }
-}
+/* css for tablet view */
@media screen and (max-width: 1023px) {
header.frontpage h1 {
- font-size: 9vw;
+ font-size: 3rem;
+ text-align: center;
}
- header.frontpage svg {
- height: 10rem;
- top: 8rem;
+ section.frontpage h1 {
+ font-size: 2.5rem;
}
.split {
@@ -244,18 +263,124 @@ section.frontpage.columns .box .feature-icon {
}
.split img {
- max-width: 70%;
display: block;
margin: auto;
}
- section.frontpage.columns .box {
+ header.frontpage .main-heading,
+ section.frontpage.columns.functionalities,
+ section.frontpage.columns.projects,
+ section.frontpage.apache,
+ section.frontpage.blog-posts .blog-post {
+ width: 90%;
+ margin: 0 auto;
+ }
+
+ section.frontpage.columns.blog-posts {
+ flex-direction: column;
+ }
+
+ section.frontpage.blog-posts .blog-post .date,
+ section.frontpage.projects .project .icon {
+ min-width: 25%;
+ }
+
+ section.frontpage.projects .project,
+ section.frontpage.columns.functionalities .box {
+ width: 100%;
+ }
+
+ section.frontpage.functionalities .icon img {
+ max-width: 25vw;
+ margin: 2vw;
+ }
+
+ section.frontpage.functionalities .content {
+ width: 70vw;
+ }
+
+ header.frontpage p {
+ font-size: inherit;
+ text-align: center;
+ }
+
+ header.frontpage {
+ flex-direction: column-reverse;
+ margin: 0;
+ }
+
+ header.frontpage img {
+ width: 60%;
+ max-height: 45vh;
+ margin: 0 auto;
+ }
+
+ div.frontpage.news {
+ width: 100%;
+ margin: 1.5rem 0 0;
+ text-transform: uppercase;
+ border-radius: 0;
+ }
+}
+
+/* css for mobile view */
+
+@media screen and (max-width: 626px) {
+ header.frontpage .main-heading,
+ section.frontpage.columns.functionalities,
+ section.frontpage.columns.blog-posts,
+ section.frontpage.projects,
+ section.frontpage.apache {
+ width: 100%;
+ margin: 0;
+ padding: 1rem;
+ }
+
+ header.frontpage a.button-light {
+ line-height: 5rem;
+ }
+
+ section.frontpage.projects .project,
+ section.frontpage.columns.functionalities .box.left {
+ flex-direction: column;
+ margin: 0;
+ padding: 0;
+ }
+
+ section.frontpage.columns.functionalities .box.right {
+ flex-direction: column-reverse;
+ margin: 0;
+ padding: 0;
+ }
+
+ section.frontpage.projects .project h2,
+ section.frontpage.projects .project .icon,
+ section.frontpage.columns.functionalities .box .content h2,
+ section.frontpage.columns.functionalities .box .content,
+ section.frontpage.columns.functionalities .box .icon,
+ section.frontpage.columns.functionalities p,
+ section.frontpage.projects p {
+ text-align: center;
+ margin: 0;
width: 100%;
}
- @media screen and (min-width: 627px) {
- section.frontpage.projects .section {
- width: calc(50% - 3rem);
- }
+ section.frontpage.columns.functionalities .box .content p,
+ section.frontpage.projects .project .content p {
+ margin: 1rem 0 1.5rem;
+ }
+
+ section.frontpage.columns.functionalities .box .icon img {
+ max-width: 50%;
+ height: auto;
+ margin-top: 2rem;
+ }
+
+ section.frontpage h1 {
+ font-size: 2rem;
+ }
+
+ header.frontpage h1 {
+ font-size: 2.5rem;
}
}
diff --git a/antora-ui-camel/src/css/header.css
b/antora-ui-camel/src/css/header.css
index e56d4a3..e94728c 100644
--- a/antora-ui-camel/src/css/header.css
+++ b/antora-ui-camel/src/css/header.css
@@ -22,8 +22,6 @@ body {
width: 100%;
word-wrap: break-word;
z-index: var(--z-index-navbar);
- border-bottom: 1px solid var(--color-smoke-90);
- box-shadow: 0 0.5rem 3rem var(--color-smoke-70);
}
.navbar a {
@@ -35,25 +33,12 @@ body {
}
@media screen and (min-width: 1024px) {
- .navbar-end > .navbar-item,
- .navbar-end .navbar-link {
+ .navbar-end > .navbar-item {
color: var(--navbar-font-color);
+ text-transform: uppercase;
}
- .navbar-end > a.navbar-item:hover,
- .navbar-end .navbar-link:hover {
- color: var(--color-asf-dark-blue);
- }
-
- .navbar-end .navbar-link::after {
- border-color: var(--navbar-font-color);
- }
-
- .navbar-item.has-dropdown:hover .navbar-link::after {
- border-color: var(--color-asf-dark-blue);
- }
-
- .navbar-item.has-dropdown:hover .navbar-link {
+ .navbar-end > a.navbar-item:hover {
color: var(--color-asf-dark-blue);
}
}
@@ -128,35 +113,13 @@ body {
order: 2;
}
-.navbar-item,
-.navbar-link {
+.navbar-item {
color: var(--navbar-menu-font-color);
display: block;
line-height: var(--doc-line-height);
position: relative;
}
-.navbar-item .icon {
- width: 1.1rem;
- height: 1.1rem;
- display: block;
-}
-
-.navbar-dropdown {
- position: absolute;
- display: none;
- top: calc(100% - 1px);
- background-color: var(--navbar-menu-background);
- border: 1px solid var(--navbar-menu-border-color);
- border-top: none;
- border-radius: 0 0 0.25rem 0.25rem;
- left: 0;
-}
-
-.navbar-dropdown .navbar-item {
- font-weight: normal;
-}
-
.navbar-divider {
background-color: var(--navbar-menu-border-color);
border: none;
@@ -177,38 +140,14 @@ body {
padding: 1rem 2rem;
}
- .has-dropdown:not(.is-active) > .navbar-dropdown {
- display: none;
- }
-
- .has-dropdown:not(.is-active) > .navbar-link::after {
- transform: rotate(-45deg);
- }
-
- .has-dropdown.is-active > .navbar-dropdown {
- display: block;
- position: relative;
- border: none;
- }
-
- .has-dropdown.is-active > .navbar-link::after {
- transform: rotate(135deg);
- }
-
- .navbar-item.navbar-topics,
- .navbar-link.navbar-topics {
- color: var(--navbar-font-color);
- }
-
.navbar-item {
font-weight: bold;
flex: none;
margin: 1rem;
+ color: var(--color-camel-orange);
}
- .navbar-dropdown .navbar-item:hover,
- a.navbar-item.navbar-topics:hover,
- a.navbar-link.navbar-topics:hover {
+ a.navbar-item.navbar-topics:hover {
text-decoration: underline;
text-decoration-color: var(--navbar-hover-font-color);
}
@@ -217,21 +156,6 @@ body {
background: var(--navbar-menu-background);
padding: 0.5rem 0;
}
-
- .navbar-link::after {
- border-width: 0 0 2px 2px;
- border-style: solid;
- content: ' ';
- display: block;
- height: 0.5em;
- pointer-events: none;
- position: absolute;
- transform: rotate(-45deg);
- width: 0.5em;
- margin-right: 1rem;
- right: 0;
- top: 40%;
- }
}
@media screen and (min-width: 1024px) {
@@ -246,70 +170,17 @@ body {
display: none;
}
- .navbar-item,
- .navbar-link {
+ .navbar-item {
align-items: flex-end;
display: flex;
font-weight: bold;
- }
-
- .navbar-item {
padding: 1rem 1.5rem 1rem 0;
}
- .navbar-item.has-dropdown {
- align-items: stretch;
- padding-right: 2.8rem;
- }
-
- .navbar-item.has-dropdown:last-of-type .navbar-dropdown {
- left: auto;
- right: 0;
- }
-
- .navbar-item.is-hoverable:hover .navbar-dropdown {
- display: block;
- }
-
- .navbar-link::after {
- border-width: 0 0 2px 2px;
- border-style: solid;
- content: ' ';
- display: block;
- height: 0.5em;
- pointer-events: none;
- position: absolute;
- transform: rotate(-45deg);
- width: 0.5em;
- right: -0.8rem;
- top: 50%;
- }
-
.navbar-end {
justify-content: flex-end;
margin-left: 1rem;
}
-
- .navbar-dropdown .navbar-item {
- white-space: nowrap;
- }
-
- .navbar-dropdown .navbar-item:last-child {
- border-radius: inherit;
- }
-
- .navbar-dropdown a.navbar-item {
- padding: 0.6rem 2rem 0.6rem 1rem;
- }
-
- .navbar-dropdown.is-right {
- left: auto;
- right: 0;
- }
-
- .navbar-dropdown a.navbar-item:hover {
- background-color: var(--navbar-menu-hover-background);
- }
}
.navbar .button {
diff --git a/config.toml b/config.toml
index 0114eb2..db7d39e 100644
--- a/config.toml
+++ b/config.toml
@@ -54,46 +54,6 @@ timeout = 300000
identifier = "download"
url = "/download/"
-[[menu.main]]
- name = "About"
- identifier = "about"
- weight = 7
-
-[[menu.main]]
- name = "Apache events"
- parent = "about"
- weight = 1
- identifier = "about-apache-events"
- url = "https://www.apache.org/events/current-event.html";
-
-[[menu.main]]
- name = "License"
- parent = "about"
- weight = 2
- identifier = "about-license"
- url = "https://www.apache.org/licenses/";
-
-[[menu.main]]
- name = "Security"
- parent = "about"
- weight = 3
- identifier = "about-security"
- url = "/security/"
-
-[[menu.main]]
- name = "Sponsorship"
- parent = "about"
- weight = 4
- identifier = "about-sponsorship"
- url = "https://www.apache.org/foundation/sponsorship.html";
-
-[[menu.main]]
- name = "Thanks"
- parent = "about"
- weight = 5
- identifier = "about-thanks"
- url = "https://www.apache.org/foundation/thanks.html";
-
[module]
[[module.mounts]]
diff --git a/content/_index.md b/content/_index.md
index a6f0da0..69c7760 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -3,52 +3,88 @@ title: Home
description: Camel is an open source integration framework that empowers you
to quickly and easily integrate various systems consuming or producing data.
---
-{{< section "frontpage columns" >}}
-# Packed with functionality
+{{< section "frontpage columns functionalities" >}}
-{{< div "box" >}}
-{{< div >}}
+# Why Camel?
-<img src="./img/functions/svg/feature-patterns.svg" alt="pattern icon"
class="feature-icon"/>
+{{< div "box right" >}}
-### Patterns
+{{< div "content">}}
+
+## Based on Enterprise Integration Patterns
+
+Camel supports most of the Enterprise Integration Patterns from the excellent
book by Gregor Hohpe and Bobby Woolf, and newer integration patterns from
microservice architectures to help you solve your integration problem by
applying best practices out of the box.
+
+<p><a class="button-dark"
href="/components/latest/eips/enterprise-integration-patterns.html">Read more
on EIP</a></p>
+
+{{< /div >}}
+
+{{< div "icon" >}}
+
+<img src="./img/patterns.svg" alt="component icon"/>
-Based on <mark>Enterprise Integration Patterns</mark> (EIP) to help you solve
your integration problem by applying best practices out of the box. Camel
supports most of the Enterprise Integration Patterns from the excellent book by
Gregor Hohpe and Bobby Woolf, and newer integration patterns from microservice
architectures.
{{< /div >}}
+
{{< /div >}}
-{{< div "box" >}}
-{{< div >}}
-<img src="./img/functions/svg/feature-components.svg" alt="component icon"
class="feature-icon"/>
+{{< div "box left" >}}
-### Components
+{{< div "icon" >}}
+
+<img src="./img/runtimes.svg" alt="runtime icon" />
-Packed with <mark>several hundred components</mark> that are used to access
databases, message queues, APIs or basically anything under the sun. Helping
you integrate with everything.
{{< /div >}}
+
+{{< div "content">}}
+
+## Runs Everywhere
+
+Apache Camel is standalone, and can be embedded as a library within Spring
Boot, Quarkus, Application Servers, and in the clouds. Camel subprojects focus
on making your work easy.
+
+<p><a class="button-dark" href="/docs/">Go to Camel Subprojects</a></p>
+
{{< /div >}}
-{{< div "box" >}}
-{{< div >}}
+{{< /div >}}
-<img src="./img/functions/svg/feature-runtimes.svg" alt="runtime icon"
class="feature-icon"/>
+{{< div "box right" >}}
-### Runtimes
+{{< div "content">}}
+
+## Packed with Components
+Packed with several hundred components that are used to access databases,
message queues, APIs or basically anything under the sun. Helping you integrate
with everything.
+
+<p><a class="button-dark" href="/components/latest">Go to Component
Reference</a></p>
+
+{{< /div >}}
+
+{{< div "icon" >}}
+
+<img src="./img/components.svg" alt="component icon"/>
+
+{{< /div >}}
-<mark>Runs everywhere</mark>: Standalone, embedded as a library within Spring
Boot, Quarkus, Application Servers, and in the clouds.
{{< /div >}}
+
+{{< div "box left" >}}
+
+{{< div "icon" >}}
+
+<img src="./img/data-formats.svg" alt="data icon"/>
+
{{< /div >}}
-{{< div "box" >}}
-{{< div >}}
+{{< div "content">}}
-<img src="./img/functions/svg/feature-dataformats.svg" alt="data icon"
class="feature-icon"/>
+## Supports over 50 Data Formats
-### Data Formats
+Camel supports around 50 data formats, allowing to translate messages in
multiple formats, and with support from industry standard formats from finance,
telco, health-care, and more.
+<p><a class="button-dark" href="/components/latest/dataformats/">See Supported
Formats</a></p>
-Camel supports around 50 data formats, allowing to <mark>translate
messages</mark> in multiple formats, and with support from industry standard
formats from finance, telco, health-care, and more.
{{< /div >}}
+
{{< /div >}}
{{< /section >}}
@@ -57,65 +93,112 @@ Camel supports around 50 data formats, allowing to
<mark>translate messages</mar
# Apache Camel Projects
-{{< div "section" >}}
+{{< div "project" >}}
+
+{{< div "icon" >}}
-[](/docs/#camel-k)
+<img src="/_/img/logo-d.svg" alt="data icon"/>
+
+{{< /div >}}
+
+{{< div "content" >}}
+
+## Camel Core
+Apache Camel helps you integrate various systems consuming or producing data.
+<p><a class="button-dark" href="/docs/">Read More</a></p>
+
+{{< /div >}}
+
+{{< /div >}}
+
+{{< div "project" >}}
+
+{{< div "icon" >}}
+
+<img src="/_/img/knative.svg" alt="data icon"/>
+
+{{< /div >}}
+
+{{< div "content" >}}
## Camel K
+Apache Camel K is a lightweight integration framework that runs natively on
Kubernetes.
+<p><a class="button-dark" href="/docs/">Read More</a></p>
-**Apache Camel K** runs natively on [Kubernetes](https://kubernetes.io/).
+{{< /div >}}
{{< /div >}}
-{{< div "section" >}}
+{{< div "project" >}}
+
+{{< div "icon" >}}
-[](/manual/latest/)
+<img src="/_/img/quarkus.svg" alt="data icon"/>
+
+{{< /div >}}
-## Camel
+{{< div "content" >}}
-**Apache Camel** is the *Swiss knife* of integration.
+## Camel Quarkus
+Apache Camel Quarkus packages 280+ Camel components as Quarkus extensions.
+<p><a class="button-dark" href="/docs/">Read More</a></p>
{{< /div >}}
-{{< div "section" >}}
+{{< /div >}}
-[](/docs/#camel-quarkus)
+{{< div "project" >}}
-## Quarkus
+{{< div "icon" >}}
-**Apache Camel Quarkus** runs Camel on [Quarkus](https://quarkus.io).
+<img src="/_/img/apache-kafka.svg" alt="data icon"/>
{{< /div >}}
-{{< div "section" >}}
+{{< div "content" >}}
-[](/docs/#camel-kafka-connector)
+## Camel Kafka Connector
+Apache Camel Kafka Connector embeds Camel within Kafka Connect.
-## Kafka
+<p><a class="button-dark" href="/docs/">Read More</a></p>
-**Apache Camel Kafka Connector** embeds Camel within [Kafka
Connect](https://kafka.apache.org/documentation/#connect).
+{{< /div >}}
{{< /div >}}
-{{< div "section" >}}
+{{< div "project" >}}
+
+{{< div "icon" >}}
-[](/docs/#camel-spring-boot)
+<img src="/_/img/spring-boot.svg" alt="data icon"/>
-## Spring Boot
+{{< /div >}}
+
+{{< div "content" >}}
-**Apache Camel Spring Boot** runs Camel on [Spring
Boot](https://spring.io/projects/spring-boot).
+## Camel Spring Boot
+Apache Camel Spring Boot runs Camel on Spring Boot and provides starters for
Camel components.
+<p><a class="button-dark" href="/docs/">Read More</a></p>
+{{< /div >}}
{{< /div >}}
-{{< div "section" >}}
+{{< div "project" >}}
-[](/docs/#camel-karaf)
+{{< div "icon" >}}
-## Karaf
+<img src="/_/img/apache-karaf.svg" alt="data icon"/>
-**Apache Camel Karaf** runs Camel in [OSGi](https://www.osgi.org/) container
using [Apache Karaf](https://karaf.apache.org/).
+{{< /div >}}
+{{< div "content" >}}
+
+## Camel Karaf
+Apache Camel Karaf makes running Apache Camel components to run in the OSGi
environment.
+<p><a class="button-dark" href="/docs/">Read More</a></p>
+
+{{< /div >}}
{{< /div >}}
diff --git a/content/docs/_index.md b/content/docs/_index.md
index cdb4c9b..7c57351 100644
--- a/content/docs/_index.md
+++ b/content/docs/_index.md
@@ -114,7 +114,7 @@ This project hosts the efforts to port and package the 280+
Camel components as
{{< /div >}}
-{{< div "section">}}
+{{< div "section" >}}
[](/camel-spring-boot/latest/)
diff --git a/layouts/index.html b/layouts/index.html
index 5d88179..cef2043 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,18 +1,46 @@
{{ partial "header.html" . }}
<header class="frontpage">
- <h1>🚀 Camel 3.4 is here! <wbr><a
href="blog/2020/06/camel34-whatsnew/">What's new?</a></h1>
- <svg viewBox="0 0 500 70" preserveAspectRatio="none">
- <path d="M -10,25 C 130,125 330,0 510,5" />
- <path d="M -10,20 C 130,125 330,0 510,2" />
- <path d="M -10,15 C 150,115 350,0 510,15" />
- <path d="M -10,11 C 130,125 330,0 510,20" />
- <path d="M -10,5 C 130,125 330,0 510,25" />
- </svg>
- <p>Camel is an <mark>open source integration framework</mark> that empowers
you to quickly and easily integrate various systems consuming or producing data.
- </p>
- <a class="significant" href="/manual/latest/getting-started.html">Get
started</a>
-</header>
+ <div class="main-heading">
+ <h1>Apache Camel</h1>
+ <p>
+ Camel is an Open Source integration framework that empowers you
+ to quickly and easily integrate various systems consuming or producing
data.
+ </p>
+ <p>
+ <a class="button-dark" href="/manual/latest/getting-started.html">Get
Started</a> <a class="button-light"
href="/manual/latest/faq/what-is-camel.html">What is Camel?</a>
+ </p>
+ </div>
+ <img src="./img/camel-gears.svg" />
+</header>
+
+<div class="frontpage news">
+ <h2>What's New?</h2>
+</div>
+
+<section class="frontpage columns blog-posts">
+{{with .Site.GetPage "section" "blog"}}
+{{range .Pages | first 3}}
+
+<li class="blog-post">
+ <time class="date">
+ <div class="day">
+ {{ dateFormat "2" .PublishDate}}
+ </div>
+ <div class="month">
+ {{ dateFormat "Jan" .PublishDate}}
+ {{ dateFormat "2006" .PublishDate}}
+ </div>
+ </time>
+ <div class="content">
+ <h2>{{ .Title }}</h2>
+ <p>{{ .Params.preview }}... <a href="{{ .Permalink }}">Read More</a></p>
+ </div>
+</li>
+
+{{end}}
+{{end}}
+</section>
{{ .Content }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 3d7add9..ed2dd01 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -37,19 +37,8 @@
<div id="topbar-nav" class="navbar-menu">
<div class="navbar-end">
{{ range .Site.Menus.main }}
- {{ if .HasChildren }}
- <div class="navbar-item has-dropdown is-hoverable">
- <a class="navbar-link navbar-topics" href="#">{{
.Name }}</a>
- <div class="navbar-dropdown">
- {{ range .Children }}
- <a class="navbar-item" href="{{ .URL | relURL
}}">{{ .Name }}</a>
- {{ end }}
- </div>
- </div>
- {{ else }}
<a class="navbar-item navbar-topics" href="{{ .URL |
relURL }}">{{ .Name }}</a>
{{ end }}
- {{ end }}
</div>
</div>
<div class="navbar-fill"></div>
diff --git a/static/img/camel-gears.svg b/static/img/camel-gears.svg
new file mode 100644
index 0000000..c4858bc
--- /dev/null
+++ b/static/img/camel-gears.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 440.03
364"><defs><style>.cls-1{fill:#c3c3c3;}.cls-2{fill:#e6e6e6;}.cls-3{fill:#acacac;}.cls-11,.cls-13,.cls-15,.cls-17,.cls-4,.cls-6,.cls-8{fill:#fff;}.cls-5{fill:#f26b3d;}.cls-5,.cls-6{stroke:#f26b3d;}.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{stroke-miterlimit:10;}.cls-7{fill:#fca468;}.cls-7,.cls-8{stroke:#fca468;}.cls-9{fill:#963;}.cls-10,.cls-
[...]
\ No newline at end of file
diff --git a/static/img/components.svg b/static/img/components.svg
new file mode 100644
index 0000000..9b2e008
--- /dev/null
+++ b/static/img/components.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 418
399.7"><defs><style>.cls-1{fill:#fca338;}.cls-2{fill:#f26b3d;}.cls-3{fill:#fff;}.cls-4{fill:#fca468;}.cls-5{fill:#a5664a;}</style></defs><path
class="cls-1"
d="M531.47,272a33.22,33.22,0,0,1-23.31-9.74,28.16,28.16,0,0,1-8.22-20.11c.2-16.07,14.51-29.15,31.9-29.15h.38a33.17,33.17,0,0,1,23.31,9.73,28.13,28.13,0,0,1,8.22,20.11C563.55,259,549.24,272,531.86,272Z"
transform="translate(-410 -172.31)"/><path [...]
\ No newline at end of file
diff --git a/static/img/data-formats.svg b/static/img/data-formats.svg
new file mode 100644
index 0000000..34216ed
--- /dev/null
+++ b/static/img/data-formats.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 365.14
368.04"><defs><style>.cls-1{fill:#f26b3d;}.cls-2{fill:#fca468;}.cls-3{fill:#fca338;}.cls-4{fill:#fff;}.cls-5{fill:#a5664a;}</style></defs><circle
class="cls-1" cx="89" cy="89" r="88.5"/><path class="cls-1"
d="M462,190a88,88,0,1,1-88,88,88.1,88.1,0,0,1,88-88m0-1a89,89,0,1,0,89,89,89,89,0,0,0-89-89Z"
transform="translate(-373 -189)"/><polygon class="cls-2" points="262.98 6.19
364.25 169.51 172.09 1 [...]
\ No newline at end of file
diff --git a/static/img/patterns.svg b/static/img/patterns.svg
new file mode 100644
index 0000000..5dcb85b
--- /dev/null
+++ b/static/img/patterns.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 520.19
502.81"><defs><style>.cls-1{fill:#f26b3d;}.cls-1,.cls-6{stroke:#f26b3d;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{stroke-miterlimit:10;}.cls-2{fill:#fca468;}.cls-2,.cls-4{stroke:#fca468;}.cls-3{fill:#963;stroke:#964;}.cls-4,.cls-5,.cls-6,.cls-8{fill:#fff;}.cls-5{stroke:#963;}.cls-7{fill:#fca338;stroke:#fca338;}</style></defs><path
class="cls-1" d="M857.63,265a116.26,116.26,0,0,0-5.58-27.11 [...]
\ No newline at end of file
diff --git a/static/img/runtimes.svg b/static/img/runtimes.svg
new file mode 100644
index 0000000..655c416
--- /dev/null
+++ b/static/img/runtimes.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg";
viewBox="0 0 388.92
318.5"><defs><style>.cls-1{fill:#f26b3d;}.cls-1,.cls-2,.cls-3,.cls-6{stroke:#fff;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{stroke-miterlimit:10;}.cls-1,.cls-5{stroke-width:5px;}.cls-2{fill:#e2a77f;}.cls-2,.cls-6{stroke-width:4px;}.cls-3{fill:#d1d1d1;}.cls-4{fill:#6d6b69;stroke-width:3px;}.cls-4,.cls-5{stroke:#6d6b69;}.cls-5{fill:none;}.cls-6{fill:#fca338;}</style></defs><path
class="cls-1" d="M6 [...]
\ No newline at end of file
