[GitHub] [camel-website] aashnajena opened a new pull request #442: CAMEL 15300: Update Front Page Design

classic Classic list List threaded Threaded
20 messages Options
Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] aashnajena opened a new pull request #442: CAMEL 15300: Update Front Page Design

GitBox

aashnajena opened a new pull request #442:
URL: https://github.com/apache/camel-website/pull/442


   Changed the front page design for header, functionalities and projects section. I have implemented the design for all three- desktop, tablet and mobile (this may not be perfect as of now) view. As of now, I am featuring the 3 latest blogs from "releases" on the front page. All icons/images are self-made.
   
   I remember seeing a "What is Camel?" page somewhere on the website, but I can't find it now. Can someone point me to that page?


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] AemieJ commented on pull request #442: CAMEL-15300: Update Front Page Design

GitBox

AemieJ commented on pull request #442:
URL: https://github.com/apache/camel-website/pull/442#issuecomment-666890383


   I would like to suggest a couple of changes -
   * Include a border-bottom & box-shadow in the navbar to show visible segregation between the body of page and navbar.
   * Reduce the height of the main image. It's extremely huge.
   * I would like to see the releases as soon as I land on the page ( in the case of the wider screen width ).
   * Increase the line spacing between the text below **Apache Camel** on the front page.
   * Increase the font-size for the complete date within releases.
   
   ![frontpage-display](https://user-images.githubusercontent.com/44139348/88995819-41c7c900-d309-11ea-9db8-ce76eef0771e.png)
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] AemieJ edited a comment on pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

AemieJ edited a comment on pull request #442:
URL: https://github.com/apache/camel-website/pull/442#issuecomment-666890383


   I would like to suggest a couple of changes -
   * Include a border-bottom & box-shadow in the navbar to show visible segregation between the body of page and navbar.
   * Reduce the height of the main image. It's extremely huge.
   * I would like to see the releases as soon as I land on the page ( in the case of the wider screen width ).
   * Increase the line spacing between the text below **Apache Camel** on the front page.
   * Increase the font-size for the complete date within releases.
   
   Also the link to **What is Camel?** is [here](https://camel.apache.org/manual/latest/faq/what-is-camel.html).
   ![frontpage-display](https://user-images.githubusercontent.com/44139348/88995819-41c7c900-d309-11ea-9db8-ce76eef0771e.png)
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] AemieJ edited a comment on pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

AemieJ edited a comment on pull request #442:
URL: https://github.com/apache/camel-website/pull/442#issuecomment-666890383


   I would like to suggest a couple of changes -
   * Include a border-bottom & box-shadow in the navbar to show visible segregation between the body of page and navbar.
   * Reduce the height of the main image. It's extremely huge.
   * I would like to see the releases as soon as I land on the page ( in the case of the wider screen width ).
   * Increase the line spacing between the text below **Apache Camel** on the front page.
   * Increase the font-size for the complete date within releases.
   
   Also the link to **What is Camel?** is [here](https://camel.apache.org/manual/latest/faq/what-is-camel.html).
   
   ![frontpage-display](https://user-images.githubusercontent.com/44139348/88995819-41c7c900-d309-11ea-9db8-ce76eef0771e.png)
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] aashnajena commented on pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

aashnajena commented on pull request #442:
URL: https://github.com/apache/camel-website/pull/442#issuecomment-667024405


   I've restricted the height of the main image, so now the blogs should also be visible to you on the first frame. Thanks for the "What Is Camel" link, I've added that and increased the line-height.
   Not sure why we need to increase the font for blog-dates. I also feel that the header menu looks neater and more modern this way (I'm not a big fan of the shadow effect), that's why I had made the change in the first place. Maybe we can introduce a segregation line once the user starts scrolling beyond the header section. More opinions are welcome! :)


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] AemieJ commented on pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

AemieJ commented on pull request #442:
URL: https://github.com/apache/camel-website/pull/442#issuecomment-667066490


   @aashnajena  the reason to increase the font-size of the data is 'cause currently it looks all clustered one after the another. I provided the snapshot and I think if I land on the desktop I observe till the releases only on the first go. And the reason I am telling to not remove the box-shadow is 'cause if you observe in the mobile view, it just doesn't fit the theme it looks confusing and plain. The navbar pattern you're suggestion looks neat on the personal portfolio I am not sure about this site tho.
   
   Also, I observed and have suggestions for the project section.
   * It would be nicer to have a consistent flow of how each section is structure i.e covered the same amount of horizontal section as the current website layout is.
   * The width of the complete section could be altered to make the changes as in the snapshot.
   * Apart from that, I find it best fit to not assign a height to the images as they end up looking inconsistent (Camel-K image appears smaller than others) and keep a margin of 1 rem between the image and content.
   * The paragraph could be explicitly assigned a height so that the button to click appears at the same level for each project.
   
   
   ![project-section](https://user-images.githubusercontent.com/44139348/89017999-cb42bf80-d338-11ea-84d0-5af62d1dfdff.png)
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] aashnajena commented on pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

aashnajena commented on pull request #442:
URL: https://github.com/apache/camel-website/pull/442#issuecomment-667083535


   @zregvart since we've made a lot of changes, can we share the preview with the community and take some overall feedback before delving deep into the minute aspects?


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] aashnajena edited a comment on pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

aashnajena edited a comment on pull request #442:
URL: https://github.com/apache/camel-website/pull/442#issuecomment-667083535


   @zregvart @delawen since we've made a lot of changes, can we share the preview with the community and take some overall feedback before delving deep into the minute aspects?


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] zregvart commented on a change in pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

zregvart commented on a change in pull request #442:
URL: https://github.com/apache/camel-website/pull/442#discussion_r463789721



##########
File path: content/_index.md
##########
@@ -59,63 +95,110 @@ Camel supports around 50 data formats, allowing to <mark>translate messages</mar
 
 {{< div "project" >}}
 
-[![Camel](/_/img/logo-d.svg)![Knative](/_/img/knative.svg)](/docs/#camel-k)
+{{< div "icon" >}}
 
-## Camel K
+<img src="/_/img/logo-d.svg" alt="data icon"/>
 
-**Apache Camel K** runs natively on [Kubernetes](https://kubernetes.io/).
+{{< /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" >}}
 
-[![Camel](/_/img/logo-d.svg)](/manual/latest/)
+{{< div "icon" >}}
 
-## Camel
+<img src="/_/img/knative.svg" alt="data icon"/>
 
-**Apache Camel** is the *Swiss knife* of integration.
+{{< /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>
+
+{{< /div >}}
 
 {{< /div >}}
 
 {{< div "project" >}}
 
-[![Camel](/_/img/logo-d.svg)![Quarkus](/_/img/quarkus.svg)](/docs/#camel-quarkus)
+{{< div "icon" >}}
 
-## Quarkus
+<img src="/_/img/quarkus.svg" alt="data icon"/>
+
+{{< /div >}}
 
-**Apache Camel Quarkus** runs Camel on [Quarkus](https://quarkus.io).
+{{< div "content" >}}
+
+## 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 >}}
 
 {{< div "project" >}}
 
-[![Camel](/_/img/logo-d.svg)![Kafka](/_/img/apache-kafka.svg)](/docs/#camel-kafka-connector)
+{{< div "icon" >}}
 
-## Kafka
+<img src="/_/img/apache-kafka.svg" alt="data icon"/>
 
-**Apache Camel Kafka Connector** embeds Camel within [Kafka Connect](https://kafka.apache.org/documentation/#connect).
+{{< /div >}}
+
+{{< div "content" >}}
+
+## Camel Kafka

Review comment:
       ```suggestion
   ## Apache Camel Kafka Connector
   ```




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] zregvart commented on a change in pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

zregvart commented on a change in pull request #442:
URL: https://github.com/apache/camel-website/pull/442#discussion_r463789721



##########
File path: content/_index.md
##########
@@ -59,63 +95,110 @@ Camel supports around 50 data formats, allowing to <mark>translate messages</mar
 
 {{< div "project" >}}
 
-[![Camel](/_/img/logo-d.svg)![Knative](/_/img/knative.svg)](/docs/#camel-k)
+{{< div "icon" >}}
 
-## Camel K
+<img src="/_/img/logo-d.svg" alt="data icon"/>
 
-**Apache Camel K** runs natively on [Kubernetes](https://kubernetes.io/).
+{{< /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" >}}
 
-[![Camel](/_/img/logo-d.svg)](/manual/latest/)
+{{< div "icon" >}}
 
-## Camel
+<img src="/_/img/knative.svg" alt="data icon"/>
 
-**Apache Camel** is the *Swiss knife* of integration.
+{{< /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>
+
+{{< /div >}}
 
 {{< /div >}}
 
 {{< div "project" >}}
 
-[![Camel](/_/img/logo-d.svg)![Quarkus](/_/img/quarkus.svg)](/docs/#camel-quarkus)
+{{< div "icon" >}}
 
-## Quarkus
+<img src="/_/img/quarkus.svg" alt="data icon"/>
+
+{{< /div >}}
 
-**Apache Camel Quarkus** runs Camel on [Quarkus](https://quarkus.io).
+{{< div "content" >}}
+
+## 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 >}}
 
 {{< div "project" >}}
 
-[![Camel](/_/img/logo-d.svg)![Kafka](/_/img/apache-kafka.svg)](/docs/#camel-kafka-connector)
+{{< div "icon" >}}
 
-## Kafka
+<img src="/_/img/apache-kafka.svg" alt="data icon"/>
 
-**Apache Camel Kafka Connector** embeds Camel within [Kafka Connect](https://kafka.apache.org/documentation/#connect).
+{{< /div >}}
+
+{{< div "content" >}}
+
+## Camel Kafka

Review comment:
       ```suggestion
   ## Camel Kafka Connector
   ```




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] aashnajena commented on pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

aashnajena commented on pull request #442:
URL: https://github.com/apache/camel-website/pull/442#issuecomment-667574769


   I've included changes from the community page PR, as well as made a few changes of my own. The reason we need to specify image height is that the Kafka logo is longer than others, so it will appear much bigger if there's no height restriction. I've added more space between the project logo and description as suggested.
   Honestly, I really like how the functionalities section looks because it's compact and narrow. The blog section will also need more horizontal space than other sections. Is it really problematic to have sections of different widths? We can align the "projects" and "open-source" section since the last section is small.


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] aashnajena commented on pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

aashnajena commented on pull request #442:
URL: https://github.com/apache/camel-website/pull/442#issuecomment-667906942


   This is how 3 projects in a row would look, but might get clustered near 1024px :
   
   ![Screenshot 2020-08-03 at 2 38 58 PM](https://user-images.githubusercontent.com/32356795/89166166-3c7fae00-d597-11ea-8a1c-0f8106956dc5.png)
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] AemieJ commented on pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

AemieJ commented on pull request #442:
URL: https://github.com/apache/camel-website/pull/442#issuecomment-667998749


   ![clustered-buttons](https://user-images.githubusercontent.com/44139348/89182711-d05f7300-d5b3-11ea-918c-dc1d6d0aab57.png)
   
   Occurs due to `white-space: no-wrap`. An easy fix to provide a line-height to the paragraph encompassing the two links i.e `line-height: 3rem;`


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] AemieJ edited a comment on pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

AemieJ edited a comment on pull request #442:
URL: https://github.com/apache/camel-website/pull/442#issuecomment-667998749


   * First issue found :
    ![clustered-buttons](https://user-images.githubusercontent.com/44139348/89182711-d05f7300-d5b3-11ea-918c-dc1d6d0aab57.png)
   
   Occurs due to `white-space: no-wrap`. An easy fix to provide a line-height to the paragraph encompassing the two links i.e `line-height: 3rem;`
   
   * Second issue :
   For the navbar items within small screen width ( < 1023px ), the color of navbar items is the shade #333333


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] zregvart commented on a change in pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

zregvart commented on a change in pull request #442:
URL: https://github.com/apache/camel-website/pull/442#discussion_r465359211



##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -244,18 +222,120 @@ section.frontpage.columns .box .feature-icon {
   }
 
   .split img {
-    max-width: 70%;
     display: block;
     margin: auto;
   }
 
-  section.frontpage.columns .box {
+  .frontpage-header .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;
+  }
+
+  .frontpage-header p {
+    font-size: inherit;
+    text-align: center;
+  }
+
+  .frontpage-header {
+    flex-direction: column-reverse;

Review comment:
       Perhaps:
   ```suggestion
       flex-direction: column;
   ```
   
   To make the "Apache Camel" above the image, since currently image doesn't really depict what Camel is?

##########
File path: antora-ui-camel/src/css/blog-frontpage.css
##########
@@ -0,0 +1,44 @@
+.blog-post .content {

Review comment:
       I'd put this in `frontpage.css` and prefix with `.frontpage`.

##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -1,212 +1,200 @@
-header.frontpage {
-  font-size: 1.5rem;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  margin: 0 auto;
-  max-width: 60rem;
-}
+/* common css for sections */
 
-header.frontpage h1 {
-  font-size: 5rem;
-  font-weight: bolder;
+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);
-  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;
+  line-height: 1.3;
+  margin: 1rem 0 0;
+  text-transform: uppercase;
+  word-wrap: break-word;
 }
 
-header.frontpage p {
-  hyphens: none;
-  margin-top: 3rem;
-  text-align: center;
-  line-height: 1.5;
-  color: var(--body-font-color);
+section.frontpage {
+  color: var(--doc-font-color);
+  font-size: var(--doc-font-size);
+  line-height: var(--doc-line-height);
+  margin: 0 auto;
+  max-width: var(--frontpage-max-width);
 }
 
-header.frontpage a {
-  color: var(--heading-font-color);
-  text-decoration: underline;

Review comment:
       I think it's a mistake that we don't underline links by default. I created [a separate issue for that](https://issues.apache.org/jira/browse/CAMEL-15371).

##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -1,212 +1,200 @@
-header.frontpage {
-  font-size: 1.5rem;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  margin: 0 auto;
-  max-width: 60rem;
-}
+/* common css for sections */
 
-header.frontpage h1 {
-  font-size: 5rem;
-  font-weight: bolder;
+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);
-  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;
+  line-height: 1.3;
+  margin: 1rem 0 0;
+  text-transform: uppercase;
+  word-wrap: break-word;
 }
 
-header.frontpage p {
-  hyphens: none;
-  margin-top: 3rem;
-  text-align: center;
-  line-height: 1.5;
-  color: var(--body-font-color);
+section.frontpage {
+  color: var(--doc-font-color);
+  font-size: var(--doc-font-size);
+  line-height: var(--doc-line-height);
+  margin: 0 auto;
+  max-width: var(--frontpage-max-width);
 }
 
-header.frontpage a {
-  color: var(--heading-font-color);
-  text-decoration: underline;
+section.frontpage a {
+  color: var(--link-font-color);
 }
 
-header.frontpage a:hover {
-  color: var(--heading-font-color);
-  text-decoration: underline;
+section.frontpage a:hover {
+  color: var(--link_hover-font-color);
 }
 
-header.frontpage a:active {
-  color: var(--heading-font-color);
+section.frontpage h1 {
+  width: 100%;
+  text-align: center;
+  margin-bottom: 1rem;
+  font-size: 2.5rem;
 }
 
-.frontpage a:hover {
-  color: var(--color-white);
-  text-decoration: none;
+section.frontpage h2 {
+  text-align: center;
 }
 
-.frontpage a:active {
-  color: var(--color-white);
-}
+/* css for header section */
 
-.frontpage a.significant {
-  margin: 1rem;
-  padding: 0.8rem 1.5rem;
-  background: var(--color-camel-orange);
-  color: var(--color-white);
-  border-radius: 8px;
-  font-size: 1.2rem;
-  font-weight: bold;
-  outline: none;
-  display: inline-block;
-  box-shadow: 0 4px #8e480b;
+.frontpage-header {
+  display: flex;
+  flex-direction: row;
+  margin: 2rem 3rem 2.5rem;
 }
 
-.frontpage a.significant:hover {
-  color: var(--color-white);
-  box-shadow: 0 3px #8e480b;
-  transform: translateY(2px);
+.frontpage-header img {
+  width: 45vw;
+  max-height: 50vh;
 }
 
-.frontpage a.significant:active {
-  color: var(--color-white);
-  box-shadow: 0 3px #8e480b;
-  transform: translateY(2px);
+.frontpage-header .main-heading {
+  width: 50vw;
+  display: flex;
+  flex-direction: column;
+  margin-left: 2rem;
 }
 
-header.frontpage svg {
-  position: absolute;
-  top: 4rem;
-  left: 0;
-  width: 100%;
-  height: 14rem;
-  z-index: -1;
+.frontpage-header h1 {
+  font-size: 5vw;
+  color: var(--color-asf-dark-blue);
+  margin-bottom: 0.5rem;
 }
 
-header.frontpage svg path {
-  fill: none;
-  animation: sparkle 2s ease alternate infinite;
+.frontpage-header p {
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+  line-height: 1.7rem;
 }
 
-header.frontpage svg path:nth-child(1) {
-  stroke: #ffebcc;
-  stroke-width: 10;
-  stroke-opacity: 0.9;
+a.button-dark,
+.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;
+  margin-right: 0.5rem;
+  border-radius: 3rem;
 }
 
-header.frontpage svg path:nth-child(2) {
-  stroke: #911408;
-  stroke-width: 10;
-  stroke-opacity: 0.3;
-  animation-delay: -1s;
+.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;
 }
 
-header.frontpage svg path:nth-child(3) {
-  stroke: #f1b35b;
-  stroke-width: 15;
-  stroke-opacity: 0.6;
-  animation-delay: -3.5s;
-}
+/* css for blog section */
 
-header.frontpage svg path:nth-child(4) {
-  stroke: #f28a40;
-  stroke-width: 5;
-  stroke-opacity: 0.4;
-  animation-delay: -3s;
+.whats-new {

Review comment:
       Prefix with `.frontpage`, perhaps `news` would be a better class name?

##########
File path: layouts/index.html
##########
@@ -1,18 +1,48 @@
 {{ partial "header.html" . }}
 
-<header class="frontpage">
-  <h1>&#x1f680; 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="frontpage-header">

Review comment:
       Let's use semantic html here, so `<header>` instead of `<div>`. This not only eliminates the need for separate CSS class, but also helps screen readers.

##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -1,212 +1,200 @@
-header.frontpage {
-  font-size: 1.5rem;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  margin: 0 auto;
-  max-width: 60rem;
-}
+/* common css for sections */
 
-header.frontpage h1 {
-  font-size: 5rem;
-  font-weight: bolder;
+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);
-  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;
+  line-height: 1.3;
+  margin: 1rem 0 0;
+  text-transform: uppercase;
+  word-wrap: break-word;
 }
 
-header.frontpage p {
-  hyphens: none;
-  margin-top: 3rem;
-  text-align: center;
-  line-height: 1.5;
-  color: var(--body-font-color);
+section.frontpage {
+  color: var(--doc-font-color);
+  font-size: var(--doc-font-size);
+  line-height: var(--doc-line-height);
+  margin: 0 auto;
+  max-width: var(--frontpage-max-width);
 }
 
-header.frontpage a {
-  color: var(--heading-font-color);
-  text-decoration: underline;
+section.frontpage a {
+  color: var(--link-font-color);
 }
 
-header.frontpage a:hover {
-  color: var(--heading-font-color);
-  text-decoration: underline;
+section.frontpage a:hover {
+  color: var(--link_hover-font-color);
 }
 
-header.frontpage a:active {
-  color: var(--heading-font-color);
+section.frontpage h1 {
+  width: 100%;
+  text-align: center;
+  margin-bottom: 1rem;
+  font-size: 2.5rem;
 }
 
-.frontpage a:hover {
-  color: var(--color-white);
-  text-decoration: none;
+section.frontpage h2 {
+  text-align: center;
 }
 
-.frontpage a:active {
-  color: var(--color-white);
-}
+/* css for header section */
 
-.frontpage a.significant {
-  margin: 1rem;
-  padding: 0.8rem 1.5rem;
-  background: var(--color-camel-orange);
-  color: var(--color-white);
-  border-radius: 8px;
-  font-size: 1.2rem;
-  font-weight: bold;
-  outline: none;
-  display: inline-block;
-  box-shadow: 0 4px #8e480b;
+.frontpage-header {
+  display: flex;
+  flex-direction: row;
+  margin: 2rem 3rem 2.5rem;
 }
 
-.frontpage a.significant:hover {
-  color: var(--color-white);
-  box-shadow: 0 3px #8e480b;
-  transform: translateY(2px);
+.frontpage-header img {
+  width: 45vw;
+  max-height: 50vh;
 }
 
-.frontpage a.significant:active {
-  color: var(--color-white);
-  box-shadow: 0 3px #8e480b;
-  transform: translateY(2px);
+.frontpage-header .main-heading {
+  width: 50vw;
+  display: flex;
+  flex-direction: column;
+  margin-left: 2rem;
 }
 
-header.frontpage svg {
-  position: absolute;
-  top: 4rem;
-  left: 0;
-  width: 100%;
-  height: 14rem;
-  z-index: -1;
+.frontpage-header h1 {
+  font-size: 5vw;
+  color: var(--color-asf-dark-blue);
+  margin-bottom: 0.5rem;
 }
 
-header.frontpage svg path {
-  fill: none;
-  animation: sparkle 2s ease alternate infinite;
+.frontpage-header p {
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+  line-height: 1.7rem;
 }
 
-header.frontpage svg path:nth-child(1) {
-  stroke: #ffebcc;
-  stroke-width: 10;
-  stroke-opacity: 0.9;
+a.button-dark,
+.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;
+  margin-right: 0.5rem;
+  border-radius: 3rem;
 }
 
-header.frontpage svg path:nth-child(2) {
-  stroke: #911408;
-  stroke-width: 10;
-  stroke-opacity: 0.3;
-  animation-delay: -1s;
+.button-light {

Review comment:
       Prefix with `.frontpage`?

##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -1,212 +1,200 @@
-header.frontpage {
-  font-size: 1.5rem;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  margin: 0 auto;
-  max-width: 60rem;
-}
+/* common css for sections */
 
-header.frontpage h1 {
-  font-size: 5rem;
-  font-weight: bolder;
+section.frontpage h1,
+section.frontpage h2,
+section.frontpage h3,
+section.frontpage h4,
+section.frontpage h5,
+section.frontpage h6 {

Review comment:
       Is this needed? we're only using `h1` and `h2` from what I can see.

##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -244,18 +222,120 @@ section.frontpage.columns .box .feature-icon {
   }
 
   .split img {
-    max-width: 70%;
     display: block;
     margin: auto;
   }
 
-  section.frontpage.columns .box {
+  .frontpage-header .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;
+  }
+
+  .frontpage-header p {
+    font-size: inherit;
+    text-align: center;
+  }
+
+  .frontpage-header {
+    flex-direction: column-reverse;
+    margin: 0;
+  }
+
+  .frontpage-header img {
+    width: 60%;
+    max-height: 45vh;
+    margin: 0 auto;
+  }
+
+  .whats-new {

Review comment:
       Prefix with `.frontpage`?

##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -1,212 +1,200 @@
-header.frontpage {
-  font-size: 1.5rem;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  margin: 0 auto;
-  max-width: 60rem;
-}
+/* common css for sections */
 
-header.frontpage h1 {
-  font-size: 5rem;
-  font-weight: bolder;
+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);
-  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;
+  line-height: 1.3;
+  margin: 1rem 0 0;
+  text-transform: uppercase;
+  word-wrap: break-word;
 }
 
-header.frontpage p {
-  hyphens: none;
-  margin-top: 3rem;
-  text-align: center;
-  line-height: 1.5;
-  color: var(--body-font-color);
+section.frontpage {
+  color: var(--doc-font-color);
+  font-size: var(--doc-font-size);
+  line-height: var(--doc-line-height);
+  margin: 0 auto;
+  max-width: var(--frontpage-max-width);
 }
 
-header.frontpage a {
-  color: var(--heading-font-color);
-  text-decoration: underline;
+section.frontpage a {
+  color: var(--link-font-color);
 }
 
-header.frontpage a:hover {
-  color: var(--heading-font-color);
-  text-decoration: underline;
+section.frontpage a:hover {
+  color: var(--link_hover-font-color);
 }
 
-header.frontpage a:active {
-  color: var(--heading-font-color);
+section.frontpage h1 {
+  width: 100%;
+  text-align: center;
+  margin-bottom: 1rem;
+  font-size: 2.5rem;
 }
 
-.frontpage a:hover {
-  color: var(--color-white);
-  text-decoration: none;
+section.frontpage h2 {
+  text-align: center;
 }
 
-.frontpage a:active {
-  color: var(--color-white);
-}
+/* css for header section */
 
-.frontpage a.significant {
-  margin: 1rem;
-  padding: 0.8rem 1.5rem;
-  background: var(--color-camel-orange);
-  color: var(--color-white);
-  border-radius: 8px;
-  font-size: 1.2rem;
-  font-weight: bold;
-  outline: none;
-  display: inline-block;
-  box-shadow: 0 4px #8e480b;
+.frontpage-header {
+  display: flex;
+  flex-direction: row;
+  margin: 2rem 3rem 2.5rem;
 }
 
-.frontpage a.significant:hover {
-  color: var(--color-white);
-  box-shadow: 0 3px #8e480b;
-  transform: translateY(2px);
+.frontpage-header img {
+  width: 45vw;
+  max-height: 50vh;
 }
 
-.frontpage a.significant:active {
-  color: var(--color-white);
-  box-shadow: 0 3px #8e480b;
-  transform: translateY(2px);
+.frontpage-header .main-heading {
+  width: 50vw;
+  display: flex;
+  flex-direction: column;
+  margin-left: 2rem;
 }
 
-header.frontpage svg {
-  position: absolute;
-  top: 4rem;
-  left: 0;
-  width: 100%;
-  height: 14rem;
-  z-index: -1;
+.frontpage-header h1 {
+  font-size: 5vw;
+  color: var(--color-asf-dark-blue);
+  margin-bottom: 0.5rem;
 }
 
-header.frontpage svg path {
-  fill: none;
-  animation: sparkle 2s ease alternate infinite;
+.frontpage-header p {
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+  line-height: 1.7rem;
 }
 
-header.frontpage svg path:nth-child(1) {
-  stroke: #ffebcc;
-  stroke-width: 10;
-  stroke-opacity: 0.9;
+a.button-dark,
+.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;
+  margin-right: 0.5rem;
+  border-radius: 3rem;
 }
 
-header.frontpage svg path:nth-child(2) {
-  stroke: #911408;
-  stroke-width: 10;
-  stroke-opacity: 0.3;
-  animation-delay: -1s;
+.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;
 }
 
-header.frontpage svg path:nth-child(3) {
-  stroke: #f1b35b;
-  stroke-width: 15;
-  stroke-opacity: 0.6;
-  animation-delay: -3.5s;
-}
+/* css for blog section */
 
-header.frontpage svg path:nth-child(4) {
-  stroke: #f28a40;
-  stroke-width: 5;
-  stroke-opacity: 0.4;
-  animation-delay: -3s;
+.whats-new {
+  padding: 0.2rem 0;
+  width: 20%;
+  text-align: center;
+  margin-left: 3rem;
+  background-color: #f5f5f5;
+  border-radius: 1rem 1rem 0 0;
 }
 
-header.frontpage svg path:nth-child(5) {
-  stroke: #ee6d11;
-  stroke-width: 5;
-  stroke-opacity: 0.6;
-  animation-delay: -6s;
+.whats-new h2 {

Review comment:
       Prefix with `.frontpage`?

##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -1,212 +1,200 @@
-header.frontpage {
-  font-size: 1.5rem;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  margin: 0 auto;
-  max-width: 60rem;
-}
+/* common css for sections */
 
-header.frontpage h1 {
-  font-size: 5rem;
-  font-weight: bolder;
+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);
-  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;
+  line-height: 1.3;
+  margin: 1rem 0 0;
+  text-transform: uppercase;
+  word-wrap: break-word;
 }
 
-header.frontpage p {
-  hyphens: none;
-  margin-top: 3rem;
-  text-align: center;
-  line-height: 1.5;
-  color: var(--body-font-color);
+section.frontpage {
+  color: var(--doc-font-color);
+  font-size: var(--doc-font-size);
+  line-height: var(--doc-line-height);
+  margin: 0 auto;
+  max-width: var(--frontpage-max-width);
 }
 
-header.frontpage a {
-  color: var(--heading-font-color);
-  text-decoration: underline;
+section.frontpage a {
+  color: var(--link-font-color);
 }
 
-header.frontpage a:hover {
-  color: var(--heading-font-color);
-  text-decoration: underline;
+section.frontpage a:hover {
+  color: var(--link_hover-font-color);
 }
 
-header.frontpage a:active {
-  color: var(--heading-font-color);
+section.frontpage h1 {
+  width: 100%;
+  text-align: center;
+  margin-bottom: 1rem;
+  font-size: 2.5rem;
 }
 
-.frontpage a:hover {
-  color: var(--color-white);
-  text-decoration: none;
+section.frontpage h2 {
+  text-align: center;
 }
 
-.frontpage a:active {
-  color: var(--color-white);
-}
+/* css for header section */
 
-.frontpage a.significant {
-  margin: 1rem;
-  padding: 0.8rem 1.5rem;
-  background: var(--color-camel-orange);
-  color: var(--color-white);
-  border-radius: 8px;
-  font-size: 1.2rem;
-  font-weight: bold;
-  outline: none;
-  display: inline-block;
-  box-shadow: 0 4px #8e480b;
+.frontpage-header {
+  display: flex;
+  flex-direction: row;
+  margin: 2rem 3rem 2.5rem;
 }
 
-.frontpage a.significant:hover {
-  color: var(--color-white);
-  box-shadow: 0 3px #8e480b;
-  transform: translateY(2px);
+.frontpage-header img {
+  width: 45vw;
+  max-height: 50vh;
 }
 
-.frontpage a.significant:active {
-  color: var(--color-white);
-  box-shadow: 0 3px #8e480b;
-  transform: translateY(2px);
+.frontpage-header .main-heading {
+  width: 50vw;
+  display: flex;
+  flex-direction: column;
+  margin-left: 2rem;
 }
 
-header.frontpage svg {
-  position: absolute;
-  top: 4rem;
-  left: 0;
-  width: 100%;
-  height: 14rem;
-  z-index: -1;
+.frontpage-header h1 {
+  font-size: 5vw;
+  color: var(--color-asf-dark-blue);
+  margin-bottom: 0.5rem;
 }
 
-header.frontpage svg path {
-  fill: none;
-  animation: sparkle 2s ease alternate infinite;
+.frontpage-header p {
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+  line-height: 1.7rem;
 }
 
-header.frontpage svg path:nth-child(1) {
-  stroke: #ffebcc;
-  stroke-width: 10;
-  stroke-opacity: 0.9;
+a.button-dark,
+.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;
+  margin-right: 0.5rem;
+  border-radius: 3rem;
 }
 
-header.frontpage svg path:nth-child(2) {
-  stroke: #911408;
-  stroke-width: 10;
-  stroke-opacity: 0.3;
-  animation-delay: -1s;
+.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;
 }
 
-header.frontpage svg path:nth-child(3) {
-  stroke: #f1b35b;
-  stroke-width: 15;
-  stroke-opacity: 0.6;
-  animation-delay: -3.5s;
-}
+/* css for blog section */
 
-header.frontpage svg path:nth-child(4) {
-  stroke: #f28a40;
-  stroke-width: 5;
-  stroke-opacity: 0.4;
-  animation-delay: -3s;
+.whats-new {
+  padding: 0.2rem 0;
+  width: 20%;
+  text-align: center;
+  margin-left: 3rem;
+  background-color: #f5f5f5;

Review comment:
       Use a variable here.

##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -1,212 +1,200 @@
-header.frontpage {
-  font-size: 1.5rem;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  margin: 0 auto;
-  max-width: 60rem;
-}
+/* common css for sections */
 
-header.frontpage h1 {
-  font-size: 5rem;
-  font-weight: bolder;
+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);
-  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;
+  line-height: 1.3;
+  margin: 1rem 0 0;
+  text-transform: uppercase;
+  word-wrap: break-word;
 }
 
-header.frontpage p {
-  hyphens: none;
-  margin-top: 3rem;
-  text-align: center;
-  line-height: 1.5;
-  color: var(--body-font-color);
+section.frontpage {
+  color: var(--doc-font-color);
+  font-size: var(--doc-font-size);
+  line-height: var(--doc-line-height);
+  margin: 0 auto;
+  max-width: var(--frontpage-max-width);
 }
 
-header.frontpage a {
-  color: var(--heading-font-color);
-  text-decoration: underline;
+section.frontpage a {
+  color: var(--link-font-color);
 }
 
-header.frontpage a:hover {
-  color: var(--heading-font-color);
-  text-decoration: underline;
+section.frontpage a:hover {
+  color: var(--link_hover-font-color);
 }
 
-header.frontpage a:active {
-  color: var(--heading-font-color);
+section.frontpage h1 {
+  width: 100%;
+  text-align: center;
+  margin-bottom: 1rem;
+  font-size: 2.5rem;
 }
 
-.frontpage a:hover {
-  color: var(--color-white);
-  text-decoration: none;
+section.frontpage h2 {
+  text-align: center;
 }
 
-.frontpage a:active {
-  color: var(--color-white);
-}
+/* css for header section */
 
-.frontpage a.significant {
-  margin: 1rem;
-  padding: 0.8rem 1.5rem;
-  background: var(--color-camel-orange);
-  color: var(--color-white);
-  border-radius: 8px;
-  font-size: 1.2rem;
-  font-weight: bold;
-  outline: none;
-  display: inline-block;
-  box-shadow: 0 4px #8e480b;
+.frontpage-header {
+  display: flex;
+  flex-direction: row;
+  margin: 2rem 3rem 2.5rem;
 }
 
-.frontpage a.significant:hover {
-  color: var(--color-white);
-  box-shadow: 0 3px #8e480b;
-  transform: translateY(2px);
+.frontpage-header img {
+  width: 45vw;
+  max-height: 50vh;
 }
 
-.frontpage a.significant:active {
-  color: var(--color-white);
-  box-shadow: 0 3px #8e480b;
-  transform: translateY(2px);
+.frontpage-header .main-heading {
+  width: 50vw;
+  display: flex;
+  flex-direction: column;
+  margin-left: 2rem;
 }
 
-header.frontpage svg {
-  position: absolute;
-  top: 4rem;
-  left: 0;
-  width: 100%;
-  height: 14rem;
-  z-index: -1;
+.frontpage-header h1 {
+  font-size: 5vw;
+  color: var(--color-asf-dark-blue);
+  margin-bottom: 0.5rem;
 }
 
-header.frontpage svg path {
-  fill: none;
-  animation: sparkle 2s ease alternate infinite;
+.frontpage-header p {
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+  line-height: 1.7rem;
 }
 
-header.frontpage svg path:nth-child(1) {
-  stroke: #ffebcc;
-  stroke-width: 10;
-  stroke-opacity: 0.9;
+a.button-dark,
+.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;
+  margin-right: 0.5rem;
+  border-radius: 3rem;
 }
 
-header.frontpage svg path:nth-child(2) {
-  stroke: #911408;
-  stroke-width: 10;
-  stroke-opacity: 0.3;
-  animation-delay: -1s;
+.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;
 }
 
-header.frontpage svg path:nth-child(3) {
-  stroke: #f1b35b;
-  stroke-width: 15;
-  stroke-opacity: 0.6;
-  animation-delay: -3.5s;
-}
+/* css for blog section */
 
-header.frontpage svg path:nth-child(4) {
-  stroke: #f28a40;
-  stroke-width: 5;
-  stroke-opacity: 0.4;
-  animation-delay: -3s;
+.whats-new {
+  padding: 0.2rem 0;
+  width: 20%;
+  text-align: center;
+  margin-left: 3rem;
+  background-color: #f5f5f5;
+  border-radius: 1rem 1rem 0 0;
 }
 
-header.frontpage svg path:nth-child(5) {
-  stroke: #ee6d11;
-  stroke-width: 5;
-  stroke-opacity: 0.6;
-  animation-delay: -6s;
+.whats-new h2 {
+  margin-bottom: 0.5rem;
 }
 
-@keyframes sparkle {
-  0% {
-    stroke-opacity: 0.2;
-  }
-
-  100% {
-    stroke-opacity: 0.6;
-  }
+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);
 }
 
-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);
+/* common css for columns section */
+
+section.frontpage.columns.functionalities p,
+.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,
+.project .content h2,
+.project .content p {

Review comment:
       Prefix with `.frontpage`?

##########
File path: layouts/index.html
##########
@@ -1,18 +1,48 @@
 {{ partial "header.html" . }}
 
-<header class="frontpage">
-  <h1>&#x1f680; 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="frontpage-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" />
+</div>  
+
+<div class="whats-new">
+  <h2>What's New?</h2>
+</div>
+
+<section class="frontpage columns blog-posts">
+
+{{with .Site.GetPage "taxonomy" "releases"}}
+{{range .Pages | first 3}}
+
+<div class="blog-post">

Review comment:
       I'd use `<ol>` and `<li>` for each blog post, this helps screen readers.

##########
File path: layouts/index.html
##########
@@ -1,18 +1,48 @@
 {{ partial "header.html" . }}
 
-<header class="frontpage">
-  <h1>&#x1f680; 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="frontpage-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" />
+</div>  
+
+<div class="whats-new">
+  <h2>What's New?</h2>
+</div>
+
+<section class="frontpage columns blog-posts">
+
+{{with .Site.GetPage "taxonomy" "releases"}}
+{{range .Pages | first 3}}

Review comment:
       Do you think we could fit more than 3, perhaps by reducing the font size of the date presented? It's quite large and probably not the more important than other text.

##########
File path: layouts/index.html
##########
@@ -1,18 +1,48 @@
 {{ partial "header.html" . }}
 
-<header class="frontpage">
-  <h1>&#x1f680; 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="frontpage-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" />
+</div>  
+
+<div class="whats-new">
+  <h2>What's New?</h2>
+</div>
+
+<section class="frontpage columns blog-posts">
+
+{{with .Site.GetPage "taxonomy" "releases"}}

Review comment:
       Let's use all blog posts, rather than just releases. We can feature releases on the _Downloads_ page.

##########
File path: layouts/index.html
##########
@@ -1,18 +1,48 @@
 {{ partial "header.html" . }}
 
-<header class="frontpage">
-  <h1>&#x1f680; 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="frontpage-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" />
+</div>  
+
+<div class="whats-new">
+  <h2>What's New?</h2>
+</div>
+
+<section class="frontpage columns blog-posts">
+
+{{with .Site.GetPage "taxonomy" "releases"}}
+{{range .Pages | first 3}}
+
+<div class="blog-post">
+  <div class="date">
+    <div class="day">
+        {{ dateFormat "2" .PublishDate}}
+    </div>
+    <div class="month">
+        {{ dateFormat "Jan" .PublishDate}}
+        {{ dateFormat "2006" .PublishDate}}
+    </div>
+  </div>

Review comment:
       Use semantic HTML here, [`<time>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time) would be appropriate I think.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] aashnajena commented on a change in pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

aashnajena commented on a change in pull request #442:
URL: https://github.com/apache/camel-website/pull/442#discussion_r467582562



##########
File path: antora-ui-camel/src/css/frontpage.css
##########
@@ -244,18 +222,120 @@ section.frontpage.columns .box .feature-icon {
   }
 
   .split img {
-    max-width: 70%;
     display: block;
     margin: auto;
   }
 
-  section.frontpage.columns .box {
+  .frontpage-header .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;
+  }
+
+  .frontpage-header p {
+    font-size: inherit;
+    text-align: center;
+  }
+
+  .frontpage-header {
+    flex-direction: column-reverse;

Review comment:
       > Perhaps:
   >
   > To make the "Apache Camel" above the image, since currently image doesn't really depict what Camel is?
   
   I completely understand your point, but between 1 & 2, I think 2 looks aesthetically better than 1. What do you think?
   
   ![image](https://user-images.githubusercontent.com/32356795/89732937-ab657700-da6f-11ea-81c5-f7705d0cef6e.png)  ![image](https://user-images.githubusercontent.com/32356795/89733016-3fcfd980-da70-11ea-9108-75fca6ee7bb0.png)
   
   
   
   




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] aashnajena commented on a change in pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

aashnajena commented on a change in pull request #442:
URL: https://github.com/apache/camel-website/pull/442#discussion_r467583251



##########
File path: layouts/index.html
##########
@@ -1,18 +1,48 @@
 {{ partial "header.html" . }}
 
-<header class="frontpage">
-  <h1>&#x1f680; 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="frontpage-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" />
+</div>  
+
+<div class="whats-new">
+  <h2>What's New?</h2>
+</div>
+
+<section class="frontpage columns blog-posts">
+
+{{with .Site.GetPage "taxonomy" "releases"}}
+{{range .Pages | first 3}}

Review comment:
       Fitting more than 3 in a row would be difficult near on small screens. We can make use of a carousel to display more blogs. We can display 3 by default and have arrows on both sides, allowing the user to slide and see more blogs. What do you think about this?




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] aashnajena commented on pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

aashnajena commented on pull request #442:
URL: https://github.com/apache/camel-website/pull/442#issuecomment-671057186


   @zregvart I've made most of the changes suggested above. For the featured blogs, I've included all blogs instead of just releases. If the date seems too big in comparison to text, we could move to a layout similar to the Blog page (shown below). We can also convert this to a carousel so that we can include more blogs, plus we wouldn't have to display 3 blogs on mobile view (which takes up vertical space), instead we can just have a carousel that user can swipe through.
   
   ![image](https://user-images.githubusercontent.com/32356795/89734189-3fd3d780-da78-11ea-8e03-1c433c29b5ce.png)
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] zregvart merged pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

zregvart merged pull request #442:
URL: https://github.com/apache/camel-website/pull/442


   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]


Reply | Threaded
Open this post in threaded view
|

[GitHub] [camel-website] zregvart commented on pull request #442: CAMEL-15300: Update Front Page Design

GitBox
In reply to this post by GitBox

zregvart commented on pull request #442:
URL: https://github.com/apache/camel-website/pull/442#issuecomment-671592806


   Thanks!


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[hidden email]