Add 1000 contributor hero/splash page

1kcontributors.md

@@ -0,0 +1,5 @@
+---
+layout: 1kcontributors
+title: Quarkus reaches 1000 Contributors
+permalink: /1000contributors/
+---

_includes/1kcontributor-list-band.html

@@ -0,0 +1,32 @@
+<div class="full-width-bg component">
+  <div class="grid-wrapper">
+    <div class="width-12-12 width-12-12-m">
+      <h2 class="mt-0">Quarkus is 1000% for the community </h2>
+    </div>
+    <div class="width-6-12 width-12-12-m">
+      <p>Quarkus has reached a significant milestone by amassing a community of over 1,000 contributors who have propelled the project forward since its inception in June 2018. The Community has played a vital role in the development and growth of Quarkus. Through their collective efforts, these contributors have been instrumental in adding new features, identifying and resolving bugs, and rigorously testing the platform to ensure its stability and reliability. The diversity of the Quarkus community, which includes developers, engineers, and enthusiasts from around the world, has been a key factor in its success, bringing a wealth of expertise and innovative ideas to the table. The remarkable achievement of reaching 1,000 contributors is a testament to the project's growing popularity, the quality of its codebase, and the unwavering commitment of the individuals who have dedicated their time and skills to making Quarkus a true standout in the open-source software landscape. The Quarkus leadership team would like to say thank you to everyone who've contributed to this incredible community.</p>
+    </div>
+    <div class="width-6-12 width-12-12-m">
+      <img src="{{site.baseurl}}/assets/images/1kcontributors/1kcontributors_image.png">
+    </div>
+  </div>
+  <div class="width-12-12 width-12-12-m ">
+    <h2>The Amazing 1000 Contributors</h2>
+    <p>We'd like to recognize and thank these 1000 contributors who've dedicated their time and efforts to take Quarkus from just an idea to the one of the best Java frameworks in open source.</p>
+</div>
+  <div class="grid-wrapper contrib-cards">
+  {% for item in site.data.1kcontributor-list.links %}
+      <div class="card">
+        <a href="{{ item.url }}" target="_blank"></a>
+        <div>
+          <img class="headshot" src="{{ item.avatar }}">
+        </div>
+        <div>
+          <p class="title">{{ item.name }}</p>
+          <p class="description">Github: {{ item.login }}</p>
+        </div>
+      </div>
+  {% endfor %}
+
+  </div>
+</div>

_includes/1kcontributors-header.html

@@ -0,0 +1,3 @@
+<div class="full-width-imgbkg">
+      <img src="{{site.baseurl}}/assets/images/1kcontributors/header_1kcontributors.png">
+</div>

_includes/homepage-hero-1kcontributors.html

@@ -0,0 +1,12 @@
+<div class="grid-wrapper homepage-hero-band">
+  <div class="grid__item width-3-12"></div>
+  <div class="grid__item width-6-12 text-center">
+      <img src="{{site.baseurl}}/assets/images/1kcontributors/hero_1k_graphic.svg" class="project-logo" title="Quarkus reaches 1000 Contributors milestone">
+          <h2>Quarkus has reached the incredible milestone of 1000 community contributors!</h2>
+          <a href="{{site.baseurl}}/1000contributors/" class="button-cta">Celebrate with us</a>
+          <p><a href="{{site.baseurl}}/get-started/">Get Started with Quarkus</a>&nbsp;|&nbsp;<a href="{{site.baseurl}}/guides/" >Read the Guides</a></p>
+  </div>
+  <div class="grid__item width-12-12 homepage-hero-band-scroll">
+    <a href="#" class="scroll-down" address="true"></a>   
+  </div>
+</div>

_layouts/1kcontributors.html

@@ -0,0 +1,6 @@
+---
+layout: base
+---
+
+{% include 1kcontributors-header.html %}
+{% include 1kcontributor-list-band.html %}

_layouts/index.html

@@ -2,7 +2,7 @@
 layout: base
 ---
 <div class="quarkus-homepage">
-  {% include homepage-hero-band-ssjprime.html %}
+  {% include homepage-hero-1kcontributors.html %}
   {% include homepage-features-icon-band.html %}
   {% include homepage-userstory-callout.html %}
   {% include homepage-performance-band.html %}

_sass/includes/contributor_list.scss

@@ -0,0 +1,75 @@
+.contrib-cards {
+
+
+    a, a:hover, a:focus {
+      text-decoration: none;
+    }
+
+    ul.list-item {
+    grid-gap: 1.5em;
+    list-style: none;
+    padding: 0;
+    margin-top: 0;
+    }
+
+    ul.list, ul.list-item {
+      list-style: none;
+      padding: 0;
+    }
+
+    .card {
+      border: 1px solid var(--card-outline);
+      border-radius: 10px;
+      padding: 1rem;
+      position: relative;
+      height: calc(100% - 2rem);
+      grid-column: span 3;
+      display: flex;
+      flex-direction: row;
+
+        @media screen and (max-width: 1300px) {
+         grid-column: span 6;
+        }
+
+        @media screen and (max-width: 768px) {
+          grid-column: span 12;
+        }
+
+        @media screen and (max-width: 480px) {
+          grid-column: span 12;
+        }
+
+      > a {
+        position: absolute;
+        top: 0; left: 0;
+        height: 100%; width: 100%;
+        }
+
+      .headshot {
+        max-width: 3rem;
+        max-height: 3rem;
+        margin-right: .75rem;
+        }
+
+      .title {
+        font-weight: 600;
+        margin: 0;
+        }
+
+      .description {
+        margin: 0;       
+        }
+
+      .content-highlights p {
+        font-size: .7rem;
+        line-height: .8rem;
+        opacity: 0.8;
+      }
+
+      &:hover, &:focus {
+        background-color: var(--card-background-color-hover);
+        border:1px solid var(--card-background-color-hover);
+      }
+    }
+
+}

_sass/includes/homepage-hero-band.scss

@@ -4,10 +4,16 @@
 
   h2 {
     margin: 1rem 0;
+    color: $white;
   }
 
   p {
-/*    margin: 0 0 1.5rem; */
+  margin: .8rem 0 0 0;
+  color: $white;
+  }
+
+  a {
+  color: $white;
   }
 
   .project-logo {

_sass/layouts/home.scss

@@ -4,7 +4,8 @@
 
 .homepage {
 
-  background-image: url($baseurl + '/assets/images/bg-home-primary.png');
+  background-image: url($baseurl + '/assets/images/1kcontributors/hero_1kcontributors.jpg');
+  background-position: top center; /* this is only for the 1k contributor hero */
   background-repeat: repeat-x;
 
   p {

assets/css/main.scss

@@ -65,5 +65,6 @@ $baseurl: "{{ site.baseurl }}";
 @import "includes/tooltip";
 @import "includes/language-band.scss";
 @import "includes/homepage-userstory-callout";
+@import "includes/contributor_list.scss";
 @import "includes/brand";