add b homepage

wiremock · Nov 14, 2023 · 3cd69e6 · 3cd69e6
1 parent 8de165f
commit 3cd69e6
Show file tree

Hide file tree

Showing 4 changed files with 362 additions and 0 deletions.
diff --git a/_sass/_homepage.scss b/_sass/_homepage.scss
@@ -19,6 +19,7 @@ html {
       gap: $p-3xl;
       flex-direction: row;
     }
+
     .home-header-hero-text {
       flex: 0 1 50%;
     }
@@ -1153,6 +1154,11 @@ html {
     }
   }
 
+  &__image {
+    margin-bottom: $p-l;
+    width: 100%;
+  }
+
   &__boxes {
     @media (min-width: 920px) {
       padding: $p-xl 0;
@@ -1184,6 +1190,10 @@ html {
     background-color: $light-gray;
     border-radius: 10px;
 
+    &__box--b {
+      grid-template-rows: auto min-content 1fr min-content;
+    }
+
     &--alt {
       background: $blue;
       border-radius: 10px;

diff --git a/b.html b/b.html
@@ -0,0 +1,352 @@
+---
+layout: default
+title: WireMock - flexible, open source API mocking
+description: WireMock is a tool for building mock APIs. API mocking enables you build stable, predictable development environments when the APIs you depend on are unreliable or don't exist.
+header_signup_link: "https://www.wiremock.io/product?utm_source=wiremock.org&utm_medium=referral&utm_campaign=masthead"
+---
+
+<style>
+  #main {
+    max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  #a-wiremock-cloud {
+    display: none;
+  }
+</style>
+
+<div class="home-header-wrapper">
+  <div class="container home-hero">
+    <h1 class="home-hero__title">Mock the APIs You Depend On</h1>
+
+    <div class="home-hero__boxes">
+      <div class="home-hero__box home-hero__box--b">
+        <img
+          src="{{ '/images/home/oss.png' | absolute_url }}"
+          alt="WireMock OSS"
+          class="home-hero__image"
+        />
+        <h2 class="home-hero__heading">Open Source</h2>
+        <p>
+          The core WireMock engine.<br />
+          Embed in your test code, run as a standalone process, or deploy via
+          Docker.
+        </p>
+
+        <div>
+          <a href="#opensource" class="btn t-6">Learn more</a>
+        </div>
+      </div>
+      <div class="home-hero__box home-hero__box--b home-hero__box--alt">
+        <img
+          src="{{ '/images/home/cloud.png' | absolute_url }}"
+          alt="WireMock cloud"
+          class="home-hero__image"
+        />
+        <h2 class="home-hero__heading">Cloud</h2>
+
+        <div>
+          <p>
+            Web UI with team collaboration, OpenAPI + Swagger support, and chaos
+            testing.
+          </p>
+          <p>Start on the generous free-forever tier:</p>
+        </div>
+        <div>
+          <a
+            href="https://www.wiremock.io/product?utm_source=wiremock.org&utm_medium=referral&utm_campaign=exp_hero"
+            class="btn t-6 btn--inverse"
+            >Get Started</a
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="home-header-wrapper">
+  <div class="container">
+    <div class="home-header-container">
+      <div class="home-header-hero-text">
+        <h1>
+          <a id="opensource"></a> Flexible API Mocking for Testing and
+          Development
+        </h1>
+
+        <div class="summary-header-stats">
+          <a
+            href="https://github.com/wiremock/wiremock/stargazers"
+            target="_blank"
+          >
+            <img
+              alt="GitHub Repo stars"
+              src="https://img.shields.io/github/stars/wiremock/wiremock?style=social"
+            />
+          </a>
+          <a href="https://github.com/wiremock/wiremock" target="_blank">
+            <img
+              alt="GitHub forks"
+              src="https://img.shields.io/github/forks/wiremock/wiremock?style=social"
+            />
+          </a>
+          <a href="https://github.com/wiremock/" target="_blank">
+            <img
+              alt="Downloads"
+              src="https://img.shields.io/badge/Downloads-5M%2B%20%2F%20month-white?style=social"
+            />
+          </a>
+          <a href="https://github.com/wiremock/" target="_blank">
+            <img
+              alt="Contributors"
+              src="https://img.shields.io/badge/Contributors-279-white?style=social&logo=github"
+            />
+          </a>
+
+          <!-- Automate pulling with fancy style
+        <a href="https://github.com/wiremock/" target="_blank">
+          <img alt="Contributors" src="https://cauldron.io/project/7478/export/svg/git_contributors.svg" >
+        </a>
+        --></div>
+
+        <p>
+          WireMock is a tool for building mock APIs. Create stable development
+          environments, isolate yourself from flakey 3rd parties and simulate
+          APIs that don't exist yet.
+        </p>
+
+        <div class="wiremock-cloud__buttons">
+          <a href="{{ '/docs/' | absolute_url }}" class="btn t-6"
+            >Documentation</a
+          >
+          <a
+            href="{{ site.community_slack.join_url | absolute_url }}"
+            class="btn btn--inverse t-6"
+            >Slack Community</a
+          >
+        </div>
+      </div>
+      <div class="home-header-hero-text whats-hot">
+        <h2>
+          <img
+            src="/images/logos/doc-sections/loudspeaker.svg"
+            width="32px"
+          />&nbsp; Join us for Hacktoberfest 2023!
+        </h2>
+        <p>Learn WireMock and contribute to open source</p>
+        <p>
+          <a href="./events/hacktoberfest">
+            <img
+              src="/images/events/hacktoberfest/wiremock_hacktoberfest_header.png"
+              width="100%"
+            />
+          </a>
+        </p>
+        <p>
+          This October we participate in Hacktoberfest - a global open source
+          hack fest. We invite you to join us, regardless of your profile and
+          technology stack.
+        </p>
+        <p>
+          Adopt WireMock in your projects, contribute new features and fixes,
+          improve docs, create new demos and artwork, etc.
+        </p>
+        <p>
+          <a href="./events/hacktoberfest">Learn More...</a>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div id="wiremock-cloud-learn-more">
+  <div class="container">
+    <a id="a-wiremock-cloud" href="#wiremock-cloud-learn-more">z</a>
+    <div class="wiremock-cloud-wrapper">
+      <div class="wiremock-cloud-img-wrapper">
+        <img
+          class="wiremock-cloud-img"
+          src="{{ '/images/wiremock-cloud/hero-screenshot.png' | absolute_url }}"
+          alt="wiremock cloud screenshot"
+        />
+      </div>
+      <div class="wiremock-cloud-vLine"></div>
+
+      <div id="wiremock-cloud" class="wiremock-cloud-details">
+        <img
+          src="/assets/svg/cloud-logo.svg"
+          |
+          alt="wiremock cloud logo"
+          class="logo"
+        />
+        <h3 class="heading t-4">Hosted API mocking for everyone</h3>
+
+        <ul class="mocklab-callout-bullets">
+          <li>SaaS, nothing to install</li>
+          <li>For individuals, teams and enterprises</li>
+          <li>Intuitive web UI for developers</li>
+          <li>OpenAPI, Swagger and Postman import</li>
+          <li><b style="color: red">NEW:</b> Chaos Engineering</li>
+          <li>Generous free plan</li>
+        </ul>
+
+        <div class="wiremock-cloud__buttons">
+          <a
+            href="https://www.wiremock.io/product?utm_source=wiremock.org&utm_medium=referral&utm_campaign=homepage-callout_learn-more"
+            class="btn t-6"
+            >Learn more</a
+          >
+          <a
+            href="https://app.wiremock.cloud/signup?utm_source=wiremock.org&utm_medium=referral&homepage-callout_try-it-now"
+            class="btn btn--inverse t-6"
+            >Sign Up for Free</a
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="key-features-wrapper">
+    <div class="container">
+      <h2 class="keyFeaturesTXT">Key Features</h2>
+      <p class="keyFeaturesInfo">
+        WireMock frees you from dependency on unstable APIs and allows you to
+        develop with confidence. It's easy to launch a mock API server and
+        simulate a host of real-world scenarios and APIs - including REST, SOAP,
+        OAuth2 and more.
+      </p>
+      <div class="container key-features-grid">
+        <div class="key-features-card">
+          <div class="key-features__icon">
+            <img
+              src="{{ '/images/requestIcon.svg' | absolute_url }}"
+              alt="Wiremock Features"
+            />
+          </div>
+          <p>Advanced request matching</p>
+        </div>
+        <div class="key-features-card">
+          <div class="key-features__icon">
+            <img
+              src="{{ '/images/responseIcon.svg' | absolute_url }}"
+              alt="wiremock dynamic response"
+            />
+          </div>
+          <p>Dynamic response templating</p>
+        </div>
+        <div class="key-features-card">
+          <div class="key-features__icon">
+            <img
+              src="{{ '/images/unitTestIcon.svg' | absolute_url }}"
+              alt="wiremock unit tests"
+            />
+          </div>
+          <p>
+            Run in your unit tests, on your laptop or in your test environment.
+          </p>
+        </div>
+        <div class="key-features-card">
+          <div class="key-features__icon">
+            <img
+              src="{{ '/images/faultIcon.svg' | absolute_url }}"
+              alt="wiremock fault and latency"
+            />
+          </div>
+          <p>Fault and latency injection</p>
+        </div>
+        <div class="key-features-card">
+          <div class="key-features__icon">
+            <img
+              src="{{ '/images/recordIcon.svg' | absolute_url }}"
+              alt="wiremock record playback"
+            />
+          </div>
+          <p>Record / Playback</p>
+        </div>
+        <div class="key-features-card">
+          <div class="key-features__icon">
+            <img
+              src="{{ '/images/httpIcon.svg' | absolute_url }}"
+              alt="wiremock java, python, http"
+            />
+          </div>
+          <p>Java, Python, HTTP and</p>
+          <p>JSON file APIs</p>
+        </div>
+      </div>
+      <a class="key-features__cta btn t-6" href="docs/">Full Documentation</a>
+    </div>
+  </div>
+  <div class="downloads-wrapper container">
+    <h2 class="t-2">Downloads</h2>
+    <p class="keyFeaturesInfo">
+      WireMock is available as a standalone service, Java library and
+      integrations for modern languages and technology stacks.
+    </p>
+
+    {% include downloads.html show_standalone="true" %}
+  </div>
+
+  <div class="faq-wrapper">
+    <div class="container faq">
+      <h2 class="faq__title">Frequently Asked Questions</h2>
+
+      <dl class="faq-list">
+        <dt>What is WireMock? <i class="faq-list__icon"></i></dt>
+        <dd>
+          WireMock is a free API mocking tool that can be run as a standalone
+          server, or in a hosted version via the
+          <a href="https://wiremock.io/">WireMock Cloud</a> managed service.
+        </dd>
+
+        <dt>What is API mocking? <i class="faq-list__icon"></i></dt>
+        <dd>
+          API mocking involves creating a simple simulation of an API, accepting
+          the same types of request and returning identically structured
+          responses as the real thing, enabling fast and reliable development
+          and testing.
+        </dd>
+
+        <dt>When do you need to mock APIs? <i class="faq-list__icon"></i></dt>
+        <dd>
+          API mocking is typically used during development and testing as it
+          allows you to build your app without worrying about 3rd party APIs or
+          sandboxes breaking. It can also be used to rapidly prototype APIs that
+          don’t exist yet.
+        </dd>
+
+        <dt>How do you create an API mock? <i class="faq-list__icon"></i></dt>
+        <dd>
+          WireMock supports several approaches for creating mock APIs - in code,
+          via its REST API, as JSON files and by recording HTTP traffic proxied
+          to another destination.
+        </dd>
+
+        <dt>What makes WireMock unique? <i class="faq-list__icon"></i></dt>
+        <dd>
+          WireMock has a rich
+          <a href="docs/request-matching/">matching system</a>, allowing any
+          part of an incoming request to be matched against complex and precise
+          criteria. Responses of any complexity can be dynamically generated via
+          the Handlebars based templating system. Finally, WireMock is easy to
+          integrate into any workflow due to its numerous
+          <a href="docs/extending-wiremock/">extension points</a> and
+          comprehensive APIs.
+        </dd>
+
+        <dt>Is WireMock open source? <i class="faq-list__icon"></i></dt>
+        <dd>
+          Yes, WireMock is a completely open source API mocking tool (<a
+            href="https://github.com/wiremock/wiremock"
+            >GitHub repo</a
+          >). If you’re looking for a hosted version of WireMock, check out
+          <a href="https://wiremock.io/">WireMock Cloud</a>.
+        </dd>
+
+        <dt>Is WireMock a free service? <i class="faq-list__icon"></i></dt>
+        <dd>WireMock is completely free under the Apache 2.0 license.</dd>
+      </dl>
+    </div>
+  </div>
+</div>
diff --git a/images/home/cloud.png b/images/home/cloud.png
diff --git a/images/home/oss.png b/images/home/oss.png