Add homepage

.gitignore

@@ -55,7 +55,8 @@ typings/
 # hugo files
 .sass-cache
 .hugo_build.lock
-public
+public/
+resources/
 
 # Mac files
 .DS_Store

assets/scss/_base.scss

@@ -26,8 +26,6 @@ h1 {
   @include mixins.heading;
   font-size: 28px;
   font-weight: 700;
-  margin: var(--mm-spacing) 0 0;
-  padding-top: var(--mm-spacing);
 }
 
 h2 {

assets/scss/_home.scss

@@ -0,0 +1,52 @@
+@use 'variables';
+
+.home__callout {
+  color: var(--mm-color-primary-text);
+  padding: var(--mm-spacing) var(--mm-spacing) 0;
+  text-align: center;
+}
+
+.home__callout-heading {
+  font-family: var(--mm-font-stack-display);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.2em;
+  margin-bottom: calc(var(--mm-spacing) / 2);
+  margin-top: 0;
+
+  @include variables.breakpoint('lg') {
+    font-size: 35px;
+  }
+}
+
+.home__callout-subheading {
+  font-family: var(--mm-font-stack-monospace);
+  font-size: 14px;
+  font-weight: 700;
+
+  @include variables.breakpoint('lg') {
+    font-size: 20px;
+  }
+}
+
+.home__products {
+  display: grid;
+  gap: var(--mm-spacing);
+  padding: calc(var(--mm-spacing)/2);
+
+  @include variables.breakpoint('lg') {
+    grid-template-columns: repeat(2, minmax(0, 600px));
+    justify-content: center;
+  }
+}
+
+.home__signup {
+  padding: calc(var(--mm-spacing) / 2) var(--mm-spacing) var(--mm-spacing);
+}
+
+.home__signup-btn {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+  max-width: 600px;
+}

assets/scss/_mixins.scss

@@ -4,7 +4,6 @@
   font-family: var(--mm-font-stack-display);
   font-weight: 500;
   line-height: 1.2em;
-  margin: calc(var(--mm-spacing) * 2) 0 calc(var(--mm-spacing) / 4);
   position: relative;
   scroll-margin-top: calc(var(--page-header-height) + var(--mm-spacing));
 }

assets/scss/_product-featured.scss

@@ -0,0 +1,103 @@
+@use 'variables';
+
+.product-featured {
+  border: 1px solid var(--mm-color-border);
+  border-radius: var(--mm-border-radius);
+  box-shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+  display: grid;
+  grid-template-areas:
+    'header'
+    'content'
+    'links'
+    'learnMore';
+  position: relative;
+}
+
+.product-featured__header {
+  grid-area: header;
+  padding: 0 var(--mm-spacing);
+  text-align: center;
+
+}
+
+.product-featured__heading {
+  font-family: var(--mm-font-stack-display);
+  font-size: 20px;
+  font-weight: 700;
+  grid-area: heading;
+  line-height: 1em;
+  margin-bottom: 0;
+  text-align: center;
+
+  &--minfraud {
+    color: var(--mm-color-minfraud);
+  }
+
+  &--geoip {
+    color: var(--mm-color-geoip);
+  }
+}
+
+.product-featured__subheading {
+  font-family: var(--mm-font-stack-display);
+  font-size: 16px;
+  grid-area: subheading;
+  line-height: 1em;
+  margin: 8px 0 0;
+  text-align: center;
+}
+
+.product-featured__content {
+  background-color: var(--mm-color-background);
+  font-size: 14px;
+  padding: calc(var(--mm-spacing) / 2);
+  text-align: center;
+
+  & > p {
+    margin: 0;
+  }
+
+  @include variables.breakpoint('lg') {
+    padding: calc(var(--mm-spacing) / 2) var(--mm-spacing);
+    text-align: left;
+  }
+}
+
+.content * {
+  font-size: 14px;
+}
+
+.product-featured__links {
+  background-color: var(--mm-color-sidebar);
+  border-top: 1px solid var(--mm-color-border);
+  display: grid;
+  gap: var(--mm-spacing);
+  grid-auto-flow: column;
+  grid-template-columns: repeat(2, max-content);
+  justify-content: center;
+  padding: calc(var(--mm-spacing) / 2);
+
+  @include variables.breakpoint('lg') {
+    gap: calc(var(--mm-spacing) / 2);
+  }
+}
+
+.product-featured__footer {
+  background-color: #f0f8ff;
+  border-top: 1px solid #cfdee8;
+  border-bottom-left-radius: var(--mm-border-radius);
+  border-bottom-right-radius: var(--mm-border-radius);
+  display: grid;
+  gap: calc(var(--mm-spacing) / 4);
+  grid-area: learnMore;
+  grid-auto-flow: column;
+  grid-template-columns: max-content max-content;
+  grid-template-rows: max-content;
+  justify-content: center;
+  padding: calc(var(--mm-spacing) / 2);
+  text-align: center;
+
+  > * {
+    margin: 0;
+  }
+}

assets/scss/btn.scss

@@ -0,0 +1,46 @@
+.btn {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  cursor: pointer;
+  display: inline-block;
+  padding: .375rem .75rem;
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+
+  &:active, &:focus, &:hover {
+    text-decoration: none;
+  }
+
+  &:hover {
+    background-color: #f9f9f9;
+  }
+}
+
+.btn--minfraud {
+  background-color: var(--mm-color-minfraud);
+  border-color: var(--mm-color-minfraud);
+  color: #fff;
+
+  &:hover {
+    background-color: #8a3899;
+  }
+}
+
+.btn--geoip {
+  background-color: var(--mm-color-geoip);
+  border-color: var(--mm-color-geoip);
+  color: #fff;
+
+  &:hover {
+    background-color: #217e71;
+  }
+}
+
+.btn--primary {
+  background-color: #4877bb;
+  border-color: #4877bb;
+  color: #fff;
+
+  &:hover {
+    background-color: #385f98;
+  }
+}

assets/scss/index.scss

@@ -5,6 +5,10 @@
 @import 'search';
 @import 'search-results';
 @import 'variables';
+@import 'btn';
+
+@import 'home';
+@import 'product-featured';
 
 :root {
   --mm-color-active-blue: #2b7ec6;
@@ -16,6 +20,8 @@
   --mm-color-logo-blue-dark: #005f83;
   --mm-color-primary-text: #595959;
   --mm-color-display-text: #005f83;
+  --mm-color-geoip: #2ca695;
+  --mm-color-minfraud: #aa48bc;
   --mm-border-radius: 6px;
   --mm-font-stack-default: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Ubuntu, sans-serif;
   --mm-font-stack-display: 'montserrat', var(--mm-font-stack-default);

layouts/index.html

@@ -1,5 +1,90 @@
 {{ define "main" }}
 <main aria-role="main">
-  <p>hello world</p>
+  <div class="home__callout">
+    <h1 class="home__callout-heading">
+      Welcome to the MaxMind Developer Portal!
+    </h1>
+    <h2 class="home__callout-subheading">
+      Develop applications using industry-leading IP intelligence and risk
+      scoring.
+    </h2>
+  </div>
+
+  <div class="home__products">
+    <div class="product-featured">
+      <div class="product-featured__header">
+        <h2
+          class="product-featured__heading product-featured__heading--minfraud"
+        >
+          minFraud Web Services
+        </h2>
+        <h3 class="product-featured__subheading">Transaction Risk API</h3>
+      </div>
+      <div class="product-featured__content">
+        <p>
+          Use risk scoring and data to identify high-risk activity in e-commerce
+          payments, platform user activity, incentivized traffic, and more.
+        </p>
+      </div>
+      <div class="product-featured__links">
+        <a href="/minfraud/evaluate-a-transaction" class="btn btn--minfraud"
+          >Quickstart</a
+        >
+        <a href="/minfraud" class="btn btn--minfraud">View docs</a>
+      </div>
+      <div class="product-featured__footer">
+        <p>
+          Learn more about
+          <a
+            href="https://www.maxmind.com/en/solutions/minfraud-services"
+            class="product-featured__footer-link"
+            >minFraud Web Services</a
+          >.
+        </p>
+      </div>
+    </div>
+    <div class="product-featured">
+      <div class="product-featured__header">
+        <h2 class="product-featured__heading product-featured__heading--geoip">
+          GeoIP2 and GeoLite2
+        </h2>
+        <h3 class="product-featured__subheading">Databases and Web Services</h3>
+      </div>
+      <div class="product-featured__content">
+        <p>
+          Use GeoIP intelligence for content customization, advertising, digital
+          rights management, compliance, fraud detection, security and more.
+        </p>
+      </div>
+      <div class="product-featured__links">
+        <a href="/geoip/geolocate-an-ip" class="btn btn--geoip">Quickstart</a>
+        <a href="/geoip" class="btn btn--geoip">View docs</a>
+      </div>
+      <div class="product-featured__footer">
+        <p>
+          Learn more about
+          <a
+            href="https://www.maxmind.com/en/geoip2-services-and-databases"
+            class="product-featured__footer-link"
+            >GeoIP2</a
+          >
+          and
+          <a
+            href="https://www.maxmind.com/en/geoip2-services-and-databases"
+            class="product-featured__footer-link"
+            >GeoLite2</a
+          >.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div class="home__signup">
+    <a
+      href="https://www.maxmind.com/en/geolite2/signup"
+      class="home__signup-btn btn btn--primary"
+      >Sign up for a GeoLite2 account to get free IP geolocation data</a
+    >
+  </div>
 </main>
 {{ end }}