Merge pull request #110 from connorchan/eneterprise-page

New Enterprise page

_includes/header.html

@@ -13,7 +13,7 @@
 
     @media (max-width: 48em) {
       #header .links {
-        top: 125px !important;
+        top: 160px !important;
       }
     }
   </style>
@@ -40,6 +40,9 @@
       <li>
         <a href="{{latestDocs}}">Documentation</a>
       </li>
+      <li>
+        <a href="{{ "/community" | relative_url }}">Community</a>
+      </li>
       <li>
         <a href="{{slackLink}}">Slack <span class="md-hidden">Channel</span></a>
       </li>

_includes/values.inc

@@ -9,3 +9,6 @@
 {% assign communityMeetingLink = "https://github.com/crossplane/crossplane/#get-involved" %}
 {% assign latestDocs = "/docs/v1.2" | append: '/' | relative_url %}
 {% assign cncfLink = "https://www.cncf.io/" %}
+{% assign prodFormLink = "https://docs.google.com/forms/d/e/1FAIpQLSev-5clADSdkwi_wiFqBCAECeIoAQDE91chBbeWbvyTjRCeYg/viewform" %}
+{% assign infoMailToLink = "mailto:info@crossplane.io" %}
+{% assign upboundGithubLink = "https://github.com/upbound" %}

community.html

@@ -0,0 +1,56 @@
+---
+stylesheet: community
+---
+
+{% include values.inc %}
+
+<div id="commercial">
+  <div class="grid">
+    <div class="col-12">
+      <h1>Companies with Commercial Crossplane Offerings</h1>
+      <img src="{{ "/images/red-squares.svg" | relative_url }}" id="squares" />
+      <div class="company-card">
+        <div class="topbar"></div>
+        <div class="card-content">
+          <div class="company-logo">
+            <img src="{{ "/images/upbound-logo.svg" | relative_url }}" alt="Upbound" />
+          </div>
+          <div class="company-info">
+            <p>Upbound is the creator of open source Crossplane — the modern, cloud native 
+            alternative to Infrastructure as Code (IaC).</p>
+            <div class="company-links">
+              <a href="{{ upboundLink }}">Learn More</a>
+              <span>|</span>
+              <a href="{{ upboundGithubLink }}">GitHub</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="let-us-know">
+        <p>Building on top of Crossplane or offering support?</p>
+        <p><a href="{{ infoMailToLink }}">Let us know</a> and we will add your logo to this page.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div id="cncf">
+  <div class="grid">
+    <div class="col-12">
+      <h2>Crossplane is a <span>Cloud Native Computing Foundation</span> sandbox project</h2>
+      <a href="{{ cncfLink }}">
+        <img class="img" src="{{ "/images/cncf.png" | relative_url }}" srcset="{{ "/images/cncf.png" | relative_url }} 1x, {{ "/images/cncf@2x.png" | relative_url }} 2x, {{ "/images/cncf@3x.png" | relative_url }} 3x" alt="CNCF logo" />
+      </a>
+    </div>
+  </div>
+</div>
+
+<div id="production">
+  <div class="grid">
+    <div class="col-12">
+      <img src="{{ "/images/stacks.png" | relative_url }}" srcset="{{ "/images/stacks.png" | relative_url }} 1x, {{ "/images/stacks@2x.png" | relative_url }} 2x, {{ "/images/stacks@3x.png" | relative_url }} 3x" alt="Stacks" id="stacksImg" />
+      <h2>Are you using Crossplane in Production?</h2>
+      <a href="{{ prodFormLink }}">Share your success story & receive special Crossplane swag</a>
+    </div>
+  </div>
+</div>

css/community.scss

@@ -0,0 +1,122 @@
+---
+---
+
+@import "vars";
+
+#commercial {
+  background-color: #183d54;
+  text-align: center;
+
+  h1 {
+    color: #FFFFFF;
+    max-width: 830px;
+    width: 100%;
+    margin: 0 auto;
+    line-height: 55px;
+    margin-bottom: 50px;
+    margin-top: 40px;
+  }
+
+  #squares {
+    margin-bottom: 50px;
+  }
+
+  .company-card {
+    max-width: 800px;
+    width: 100%;
+    margin: 0 auto 110px auto;
+    
+    .topbar {
+      height: 10px;
+      width: 100%;
+      background-color: #35d0ba;
+    }
+
+    .card-content {
+      padding: 50px 35px;
+      background-color: #FFFFFF;
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-align: center;
+      align-items: center;
+
+      @media (max-width: $md-width) {
+        flex-direction: column;
+        -moz-flex-direction: column;
+        -ms-flex-direction: column;
+        -o-flex-direction: column;
+      }
+
+      .company-logo {
+        margin-right: 30px;
+        padding: 25px;
+        border: 1px solid #ebebeb;
+        border-radius: 5px;
+      }
+
+      .company-info {
+        text-align: left;
+        font-size: 18px;
+
+        & p, & a {
+          color: #183d54;
+        }
+
+        & span {
+          margin: 0 7px;
+        }
+      }
+    }
+  }
+
+  .let-us-know {
+    margin-bottom: 100px;
+
+    & p {
+      color: #FFFFFF;
+      margin: 0;
+    }
+
+    & a {
+      color: #34d0bb;
+    }
+  }
+}
+
+#cncf {
+  text-align: center;
+  padding: 15px 0 100px 0;
+
+  h2 {
+    color: #183d54;
+
+    & span {
+      color: #34d0bb;
+    }
+  }
+}
+
+#production {
+  position: relative;
+  background-color: #f7f7f7;
+  text-align: center;
+  padding-top: 65px;
+  padding-bottom: 90px;
+  overflow: initial !important;
+
+  h2 {
+    color: #183d54;
+  }
+
+  a {
+    color: #505a72;
+    font-size: 16px;
+  }
+
+  #stacksImg {
+    position: absolute;
+    top: -20%;
+    margin: 0 0 0 -82px;
+    left: 50%;
+  }
+}

images/red-squares.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="75" height="15" viewBox="0 0 75 15">
+    <g fill="none" fill-rule="evenodd">
+        <g fill="#F99" fill-rule="nonzero">
+            <g>
+                <path d="M0 10H5V15H0zM20 10H25V15H20zM10 10H15V15H10zM30 10H35V15H30zM40 10H45V15H40zM60 10H65V15H60zM50 10H55V15H50zM70 10H75V15H70zM0 0H5V5H0zM20 0H25V5H20zM10 0H15V5H10zM30 0H35V5H30zM40 0H45V5H40zM60 0H65V5H60zM50 0H55V5H50zM70 0H75V5H70z" transform="translate(-581 -300) translate(581 300)"/>
+            </g>
+        </g>
+    </g>
+</svg>