diff --git a/.prettierignore b/.prettierignore index 82325066..eb725e19 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1,2 @@ downloads.html +c.html diff --git a/_docs/index.html b/_docs/index.html index e380cdbf..087b0d39 100644 --- a/_docs/index.html +++ b/_docs/index.html @@ -25,7 +25,8 @@ .card { display: flex; - border: 0.2rem solid; + border: 0.2rem solid #18253d; + color: #18253d; border-radius: 1rem; height: 6rem; width: 15rem; diff --git a/_sass/_homepage.scss b/_sass/_homepage.scss index 5e35a3e6..3ad866d9 100644 --- a/_sass/_homepage.scss +++ b/_sass/_homepage.scss @@ -15,1058 +15,1096 @@ html { } @include breakpoint($medium) { - .home-header-container { - gap: $p-3xl; - flex-direction: row; + &--b { + margin-bottom: 70px; + + .container { + display: grid; + grid-template-rows: minmax(min-content, 200px) minmax( + min-content, + calc(100vh - 350px) + ); + align-content: space-evenly; + height: 100%; + } } - .home-header-hero-text { - flex: 0 1 50%; + + @include breakpoint($medium) { + .home-header-container { + gap: $p-3xl; + flex-direction: row; + } + + .home-header-hero-text { + flex: 0 1 50%; + padding: $p-xl; + } } } -} -#openSourceCard:hover { - border: 1px solid #18253d; -} + #openSourceCard:hover { + border: 1px solid #18253d; + } -#wiremockCloudCard:hover { - border: 1px solid #f59121; -} + #wiremockCloudCard:hover { + border: 1px solid #f59121; + } -.container { - max-width: 100vw; - padding: 0 $p-l; + .container { + max-width: 100vw; + padding: 0 $p-l; - @include breakpoint($medium) { - padding: 0; - max-width: 1280px; - margin-left: auto; - margin-right: auto; + @include breakpoint($medium) { + padding: 0; + max-width: 1280px; + margin-left: auto; + margin-right: auto; + } } -} -.btn-card-info { - cursor: pointer; - height: fit-content; - background: #18253d; - border-radius: 4px; - font-family: "Ubuntu"; - font-style: normal; - font-weight: normal; - font-size: 16px; - color: #fff; - padding: 5px 10px; - width: fit-content; - text-decoration: none !important; -} -.btn-card-info:hover { - cursor: pointer; - text-decoration: none !important; -} -.btnDownload { - background: #f59121; - text-decoration: none; - font-weight: 700; -} -.btnLearnMore { - margin-left: 20px; - color: #0fb2ef; - background: #f0f5ff; - border: 1px solid rgba(15, 178, 239, 0.5); -} + .btn-card-info { + cursor: pointer; + height: fit-content; + background: #18253d; + border-radius: 4px; + font-family: "Ubuntu"; + font-style: normal; + font-weight: normal; + font-size: 16px; + color: #fff; + padding: 5px 10px; + width: fit-content; + text-decoration: none !important; + } + .btn-card-info:hover { + cursor: pointer; + text-decoration: none !important; + } + .btnDownload { + background: #f59121; + text-decoration: none; + font-weight: 700; + } + .btnLearnMore { + margin-left: 20px; + color: #0fb2ef; + background: #f0f5ff; + border: 1px solid rgba(15, 178, 239, 0.5); + } -.dot { - margin-top: 4px; - height: 12px; - width: 12px; - margin-left: 3px; - background-color: #bbb; - border-width: 1px; - border-radius: 50%; - display: inline-block; -} + .dot { + margin-top: 4px; + height: 12px; + width: 12px; + margin-left: 3px; + background-color: #bbb; + border-width: 1px; + border-radius: 50%; + display: inline-block; + } -.fake-osx-chrome { - width: 100%; - box-shadow: 3px 3px 7px 0px; - border-radius: 8px; -} + .fake-osx-chrome { + width: 100%; + margin-bottom: $p-l; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24); + border-radius: 8px; + } + + .fake-osx-chrome-title-bar { + display: flex; + gap: 5px; + padding: 10px; + border-top-left-radius: 8px; + border-top-right-radius: 8px; + padding-left: 15px; + background-color: #223746; -.fake-osx-chrome-title-bar { - border-top-left-radius: 8px; - border-top-right-radius: 8px; - padding: 10px; - padding-left: 15px; - background-color: #223746; - - &::after { - content: ""; - display: table; - clear: both; + &::after { + content: ""; + display: table; + clear: both; + } } -} -.btn-primary { - cursor: pointer; - width: fit-content; - padding: 8px 20px; - background: #0fb2ef; - border-radius: 4px; - font-family: "Ubuntu"; - font-style: normal; - font-weight: 500; - font-size: 20px; - color: #fff; - border: none; - margin-top: 5px; - text-decoration: none; - - &--mocklab { - background: $mocklab-dark-green; + .fake-osx-chrome-content-pane { + font-size: 16px; + + .highlight { + margin: 0; + background: white; + + pre { + margin: 0; + } + } } -} -.btn-secondary { - cursor: pointer; - background: #f0f5ff; - border: 1px solid rgba(15, 178, 239, 0.5); - border-radius: 4px; - padding: 7px 20px; - color: #0fb2ef; - font-style: normal; - font-weight: 500; - font-size: 20px; - text-decoration: none; - margin-top: 5px; - align-items: center; - - &--mocklab { - color: $mocklab-dark-green; - background: $mocklab-light-green; - border-color: $mocklab-dark-green; + .btn-primary { + cursor: pointer; + width: fit-content; + padding: 8px 20px; + background: #0fb2ef; + border-radius: 4px; + font-family: "Ubuntu"; + font-style: normal; + font-weight: 500; + font-size: 20px; + color: #fff; + border: none; + margin-top: 5px; + text-decoration: none; + + &--mocklab { + background: $mocklab-dark-green; + } } -} -.summary-header-stats { - display: flex; - align-items: center; - gap: $p-m; - margin-bottom: $p-m; -} + .btn-secondary { + cursor: pointer; + background: #f0f5ff; + border: 1px solid rgba(15, 178, 239, 0.5); + border-radius: 4px; + padding: 7px 20px; + color: #0fb2ef; + font-style: normal; + font-weight: 500; + font-size: 20px; + text-decoration: none; + margin-top: 5px; + align-items: center; -.whats-hot { - padding: $p-l; - border-radius: 10px; - background-color: $lighter-blue; -} + &--mocklab { + color: $mocklab-dark-green; + background: $mocklab-light-green; + border-color: $mocklab-dark-green; + } + } -.home-header-hero-text { - margin-bottom: $p-l; -} + .summary-header-stats { + display: flex; + align-items: center; + gap: $p-m; + margin-bottom: $p-m; + } -.home-header-hero-image { - width: 50%; - @media (max-width: 1023px) { - width: 100%; + .whats-hot { + padding: $p-l; + border-radius: 10px; + background-color: $lighter-blue; } - border-radius: 5px; - padding: 40px; - figure.highlight { - border: none; - border-radius: 0; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - // background-color: #f8fafe; - background-color: #223746; - box-shadow: none; - margin-top: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 1.5rem; - padding-right: 1.5rem; - - &::before { - content: ""; - background-color: transparent; + .home-header-hero-text { + margin-bottom: $p-l; + } + + .home-header-hero-image { + width: 50%; + @media (max-width: 1023px) { + width: 100%; } + border-radius: 5px; + padding: 40px; + + figure.highlight { + border: none; + border-radius: 0; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + // background-color: #f8fafe; + background-color: #223746; + box-shadow: none; + margin-top: 0; + padding-top: 0; + padding-bottom: 0; + padding-left: 1.5rem; + padding-right: 1.5rem; - code.language-json { - .p, - .w, - .nl { - color: #dededd; + &::before { + content: ""; + background-color: transparent; + } + + code.language-json { + .p, + .w, + .nl { + color: #dededd; + } } } } -} -.home-header-footer { - display: flex; - justify-content: center; - padding: 2.5rem 0; - - .wiremock-card-info { + .home-header-footer { display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - width: 267px; - height: 244px; - background-color: #fff; - border: 1px solid #d2dff9; - border-radius: 8px; - padding: 20px; - margin-left: 30px; - filter: drop-shadow(0px 10px 0px rgba(210, 223, 249, 0.3)); + justify-content: center; + padding: 2.5rem 0; - .wiremock-card-info-header { + .wiremock-card-info { display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; flex-direction: column; - -webkit-box-align: center; - -ms-flex-align: center; + justify-content: space-between; align-items: center; - } + width: 267px; + height: 244px; + background-color: #fff; + border: 1px solid #d2dff9; + border-radius: 8px; + padding: 20px; + margin-left: 30px; + filter: drop-shadow(0px 10px 0px rgba(210, 223, 249, 0.3)); - .link-card-info { - display: flex; - a { - text-decoration: none; - margin-left: 5px; - margin-right: 5px; - cursor: pointer; - font-family: "Ubuntu"; - font-style: normal; - font-weight: 600; - font-size: 16px; - color: #18253d; - border-bottom: 1px solid #18253d; - padding-bottom: 1px; + .wiremock-card-info-header { + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } - &:hover { + .link-card-info { + display: flex; + a { text-decoration: none; + margin-left: 5px; + margin-right: 5px; + cursor: pointer; + font-family: "Ubuntu"; + font-style: normal; + font-weight: 600; + font-size: 16px; + color: #18253d; + border-bottom: 1px solid #18253d; + padding-bottom: 1px; + + &:hover { + text-decoration: none; + } } } - } - h2 { - font-size: 36px; - font-family: "Ubuntu"; - font-style: normal; - font-weight: bold; - color: #000000; - padding-top: 10px !important; - } + h2 { + font-size: 36px; + font-family: "Ubuntu"; + font-style: normal; + font-weight: bold; + color: #000000; + padding-top: 10px !important; + } - p { - text-align: center; - min-height: 74px; - font-family: "Ubuntu"; - font-style: normal; - font-weight: normal; - font-size: 12px; - color: $dark-milk; - } + p { + text-align: center; + min-height: 74px; + font-family: "Ubuntu"; + font-style: normal; + font-weight: normal; + font-size: 12px; + color: $dark-milk; + } - &:first-child { - margin-left: 0; - } + &:first-child { + margin-left: 0; + } - &:last-of-type { - a { - color: #f59121; + &:last-of-type { + a { + color: #f59121; + } } } } -} -.wiremock-cloud-callout-bullets { - padding-left: 0; - - li { - font-family: "Ubuntu"; - font-style: normal; - font-weight: 400; - font-size: 18px; - color: #0c0b1a; - margin: 0; + .wiremock-cloud-callout-bullets { padding-left: 0; - list-style-type: none; - padding: 5px 0 5px 0; - } -} -.logos-title { - padding-top: 70px; - font-family: "Ubuntu"; - color: #18253d; - font-size: 24px; - margin: auto; - width: 200px; - font-weight: 300; -} + li { + font-family: "Ubuntu"; + font-style: normal; + font-weight: 400; + font-size: 18px; + color: #0c0b1a; + margin: 0; + padding-left: 0; + list-style-type: none; + padding: 5px 0 5px 0; + } + } -.clients-wrapper { - margin-top: 15px; - margin-bottom: 50px; - display: flex; - justify-content: center; + .logos-title { + padding-top: 70px; + font-family: "Ubuntu"; + color: #18253d; + font-size: 24px; + margin: auto; + width: 200px; + font-weight: 300; + } - .client-wrapper { + .clients-wrapper { + margin-top: 15px; + margin-bottom: 50px; display: flex; - height: 60px; - align-items: center; justify-content: center; - margin-left: 30px; - img { - height: 70%; - } + .client-wrapper { + display: flex; + height: 60px; + align-items: center; + justify-content: center; + margin-left: 30px; + + img { + height: 70%; + } - &:first-child { - margin-left: 0; + &:first-child { + margin-left: 0; + } } } -} - -.code-tabs-wrapper { - margin-bottom: 70px; - background-color: $general-background; - border-radius: 50px; - width: 100%; - padding: 0; - .code-tabs-row { - display: flex; - } - .code-tabs-sidebar-wrapper { - display: none; + .code-tabs-wrapper { + margin-bottom: 70px; + background-color: $general-background; + border-radius: 50px; + width: 100%; + padding: 0; - @include breakpoint($medium) { - display: block; + .code-tabs-row { + display: flex; } - } - .code-tabs-sidebar { - margin: 45px 45px; - width: 170px; - } - - .code-tabs-example-card { - display: flex; - align-items: center; - padding: 0 10px; - width: 60px; - height: 60px; - background-color: #fff; - filter: drop-shadow(0px 30px 40px #d2dff9); - border-radius: 100px; - margin-top: 20px; + .code-tabs-sidebar-wrapper { + display: none; - &:nth-child(even) { - margin-left: auto; + @include breakpoint($medium) { + display: block; + } } - &:first-child { - margin-top: 0; + .code-tabs-sidebar { + margin: 45px 45px; + width: 170px; } - } - .code-tabs-main { - border-radius: 10px; - width: 100%; - background-color: #f8fafe; + .code-tabs-example-card { + display: flex; + align-items: center; + padding: 0 10px; + width: 60px; + height: 60px; + background-color: #fff; + filter: drop-shadow(0px 30px 40px #d2dff9); + border-radius: 100px; + margin-top: 20px; - .code-tabs-main-wrapper { - margin: $p-l; + &:nth-child(even) { + margin-left: auto; + } + &:first-child { + margin-top: 0; + } + } - ul { - margin: 0 0 $p-l 0; - padding: 0; - display: flex; + .code-tabs-main { + border-radius: 10px; + width: 100%; + background-color: #f8fafe; - @include breakpoint($medium) { - margin: 0; - } + .code-tabs-main-wrapper { + margin: $p-l; - li { - display: inline; - position: relative; - cursor: pointer; - padding: 14px 20px; - margin: 0; - color: #18253d; + ul { + margin: 0 0 $p-l 0; + padding: 0; + display: flex; @include breakpoint($medium) { - margin-left: 20px; - } - - &:first-child { - margin-left: 0; + margin: 0; } - &.active-tab-example { + li { + display: inline; position: relative; - font-weight: bold; - background-color: #fff; - border: 1px solid #d2dff9; - border-radius: 8px; + cursor: pointer; + padding: 14px 20px; + margin: 0; + color: #18253d; @include breakpoint($medium) { + margin-left: 20px; + } + + &:first-child { + margin-left: 0; + } + + &.active-tab-example { + position: relative; + font-weight: bold; + background-color: #fff; border: 1px solid #d2dff9; - border-bottom: 1px solid #fff; - border-radius: 8px 8px 0px 0px; - - &:after { - content: ""; - position: absolute; - left: 0; - bottom: -2px; - right: 0; - height: 1px; - background: #fff; + border-radius: 8px; + + @include breakpoint($medium) { + border: 1px solid #d2dff9; + border-radius: 8px 8px 0px 0px; + + &:after { + content: ""; + position: absolute; + left: 0; + bottom: -2px; + right: 0; + height: 2px; + background: #fff; + } } } } } + + .code-tabs-main-example { + border: 1px solid #d2dff9; + border-radius: 7px; + background-color: #fff; + min-height: 420px; + + @include breakpoint($medium) { + border-radius: 0px 7px 7px 7px; + } + } + } + } + + .code-tabs-footer { + display: flex; + align-items: center; + justify-content: center; + background: #d2dff9; + border-bottom-right-radius: 50px; + border-bottom-left-radius: 50px; + height: 100px; + + .ctIMGWrapper { + display: flex; + align-items: center; + justify-content: center; + background-color: #fff; + border-radius: 50%; + padding: 5px; + } + + .ctDownloadBTN { + display: flex; + align-items: center; + background: #18253d; + border-radius: 4px; + padding: 5px 10px; + text-decoration: none; + + span { + margin-left: 10px; + font-family: "Ubuntu"; + font-style: normal; + font-weight: bold; + font-size: 16px; + color: #fff; + } + } + .ct-github-info-wrapper { + display: flex; + margin: 0 40px; + } + + .github-card-info-wrapper { + display: flex; + align-items: center; + margin-left: 20px; + + &:first-child { + margin-left: 0; + } } - .code-tabs-main-example { - border: 1px solid #d2dff9; - border-radius: 7px; + .github-card-info { + display: flex; + align-items: center; + border-radius: 6px 0px 0px 6px; + padding: 0 10px; + + img { + padding-right: 5px; + height: 30px; + } + + span { + font-family: SF_Pro; + font-style: normal; + font-weight: 600; + font-size: 12px; + padding: 5px 0; + } + } + .github-card-info-right { + border-left: 1px solid rgba(27, 31, 35, 0.15); background-color: #fff; - min-height: 420px; + border-radius: 0px 6px 6px 0px; + padding: 0 10px; + display: flex; - @include breakpoint($medium) { - border-radius: 0px 7px 7px 7px; + span { + font-family: SF_Pro; + font-style: normal; + font-weight: 600; + font-size: 12px; + padding: 5px 0; } } } } - .code-tabs-footer { + .wiremock-cloud__buttons { + display: flex; + flex-direction: column; + gap: $p-m; + margin-top: $p-xl; + + @media (min-width: 768px) { + flex-direction: row; + } + } + + .wiremock-cloud-wrapper, + .wiremock-cloud-robot-wrapper { + margin-top: 50px; display: flex; align-items: center; - justify-content: center; - background: #d2dff9; - border-bottom-right-radius: 50px; - border-bottom-left-radius: 50px; - height: 100px; + background: $lighter-blue; + border-radius: 10px; + margin-bottom: 4rem; + padding: 0; + gap: $p-m; - .ctIMGWrapper { - display: flex; - align-items: center; - justify-content: center; - background-color: #fff; - border-radius: 50%; - padding: 5px; + .wiremock-cloud-img-wrapper { + flex: 0 0 50%; } - .ctDownloadBTN { - display: flex; - align-items: center; - background: #18253d; - border-radius: 4px; - padding: 5px 10px; - text-decoration: none; + .mocklab-callout-bullets { + list-style: none; + margin: 0; + padding: 0; - span { - margin-left: 10px; - font-family: "Ubuntu"; - font-style: normal; - font-weight: bold; - font-size: 16px; - color: #fff; + li { + padding-left: $p-l; + background: url("/assets/svg/bullet.svg") no-repeat left center; } } - .ct-github-info-wrapper { - display: flex; - margin: 0 40px; - } - .github-card-info-wrapper { - display: flex; - align-items: center; - margin-left: 20px; + .wiremock-cloud-img { + width: 100%; + padding: $p-l; + } - &:first-child { - margin-left: 0; - } + .wiremock-cloud-vLine { + border-left: 1px solid #d2dff9; } - .github-card-info { + .wiremock-cloud-details { + flex: 0 0 50%; display: flex; - align-items: center; - border-radius: 6px 0px 0px 6px; - padding: 0 10px; + flex-direction: column; + justify-content: space-between; + padding: $p-l; - img { - padding-right: 5px; - height: 30px; + .logo { + display: block; + width: 40%; + margin-bottom: $p-m; } - span { - font-family: SF_Pro; - font-style: normal; - font-weight: 600; - font-size: 12px; - padding: 5px 0; + .heading { + margin-bottom: $p-l; } - } - .github-card-info-right { - border-left: 1px solid rgba(27, 31, 35, 0.15); - background-color: #fff; - border-radius: 0px 6px 6px 0px; - padding: 0 10px; - display: flex; - span { - font-family: SF_Pro; - font-style: normal; - font-weight: 600; - font-size: 12px; - padding: 5px 0; + .p-margin-wiremock-cloud { + margin-top: 20px; + } + + .p-width-wiremock-cloud { + width: 65%; + &:last-of-type { + margin-bottom: 0; + } + } + .wiremock-cloud-links-wrapper { + display: flex; + margin-top: 30px; } } - } -} -.wiremock-cloud__buttons { - display: flex; - flex-direction: column; - gap: $p-m; - margin-top: $p-xl; + .enterprise { + color: #3db2ef; + } - @media (min-width: 768px) { - flex-direction: row; - } -} + .wiremock-cloud-robot { + background: linear-gradient(201.62deg, #ffffff -3.51%, #d2dff9 86.83%); + width: 50%; + border-top-left-radius: 50px; + border-bottom-left-radius: 50px; + } -.wiremock-cloud-wrapper, -.wiremock-cloud-robot-wrapper { - margin-top: 50px; - display: flex; - align-items: center; - background: $lighter-blue; - border-radius: 10px; - margin-bottom: 4rem; - padding: 0; - gap: $p-m; - - .wiremock-cloud-img-wrapper { - flex: 0 0 50%; - } + .robot-subtitle { + font-family: "Ubuntu"; + font-style: normal; + font-weight: 700; + font-size: 20px; + color: #000000; + margin-top: 0; + } - .mocklab-callout-bullets { - list-style: none; - margin: 0; - padding: 0; + .enterpirse-feature { + display: flex; + align-items: center; + margin-bottom: 16px; + + .enterprise-bullet { + width: 4px; + height: 7px; + background: #e9ebf8; + border: 0.5px solid #0c0b1a; + border-radius: 20px; + } - li { - padding-left: $p-l; - background: url("/assets/svg/bullet.svg") no-repeat left center; + h4 { + font-family: "Ubuntu"; + font-style: normal; + font-weight: 400; + font-size: 16px; + color: #0c0b1a; + margin: 0; + padding-left: 10px; + } + } + .btn-schedule-call { + cursor: pointer; + width: fit-content; + padding: 5px 20px; + background: #0fb2ef; + border-radius: 4px; + font-family: "Ubuntu"; + font-style: normal; + font-weight: 500; + font-size: 16px; + color: #fff; + margin-top: 24px; } } - .wiremock-cloud-img { - width: 100%; - padding: $p-l; + .wiremock-cloud-robot-wrapper { + justify-content: unset; } - .wiremock-cloud-vLine { - border-left: 1px solid #d2dff9; - } + .key-features-wrapper { + padding: $p-2xl; + color: $light-gray; + background: #0b4f6c; - .wiremock-cloud-details { - flex: 0 0 50%; - display: flex; - flex-direction: column; - justify-content: space-between; - padding: $p-l; + .keyFeaturesTXT { + margin-bottom: $p-l; + font-size: $type-size-1; - .logo { - display: block; - width: 40%; - margin-bottom: $p-m; + @media (min-width: 768px) { + font-size: 50px; + } } - .heading { - margin-bottom: $p-l; + .keyFeaturesInfo { + margin-bottom: $p-xl; + text-align: center; } - .p-margin-wiremock-cloud { - margin-top: 20px; + .padding-grid-top { + padding-top: 50px !important; } - .p-width-wiremock-cloud { - width: 65%; - &:last-of-type { - margin-bottom: 0; + .key-features-card { + text-align: center; + margin-bottom: $p-l; + font-weight: 500; + + .key-features__icon { + margin-bottom: $p-l; + display: inline-block; + padding: $p-m; + border-radius: 100%; + background: linear-gradient(140deg, #ffffff, #ffffff33, #ffffff00); + + img { + filter: brightness(0) invert(1); + } + } + + p { + margin: 0 $p-l; } } - .wiremock-cloud-links-wrapper { - display: flex; - margin-top: 30px; - } - } - .enterprise { - color: #3db2ef; - } + @include breakpoint($medium) { + text-align: center; - .wiremock-cloud-robot { - background: linear-gradient(201.62deg, #ffffff -3.51%, #d2dff9 86.83%); - width: 50%; - border-top-left-radius: 50px; - border-bottom-left-radius: 50px; + .key-features-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + justify-items: center; + gap: $p-l; + margin: 0 $p-xl; + } + + .key-features-card { + text-align: left; + width: 100%; + + p { + margin: 0; + } + } + } } - .robot-subtitle { - font-family: "Ubuntu"; - font-style: normal; - font-weight: 700; - font-size: 20px; - color: #000000; - margin-top: 0; + .downloads-wrapper { + margin-top: $p-3xl; + margin-bottom: $p-3xl; } - .enterpirse-feature { + .apis-wrapper { + padding: 70px 0; display: flex; - align-items: center; - margin-bottom: 16px; - - .enterprise-bullet { - width: 4px; - height: 7px; - background: #e9ebf8; - border: 0.5px solid #0c0b1a; - border-radius: 20px; + justify-content: center; + flex-direction: column; + .apisTxt { + margin: 0; + padding: 0; + font-family: "Ubuntu"; + font-style: normal; + font-weight: bold; + text-align: center; + color: #18253d; + font-size: 2rem; + border-bottom: none; } - - h4 { + .apisDescription { + margin-top: 5px; font-family: "Ubuntu"; font-style: normal; - font-weight: 400; - font-size: 16px; - color: #0c0b1a; - margin: 0; - padding-left: 10px; + text-align: center; + color: #18253d; + padding-bottom: 50px; + } + .apis-card-wrapper { + display: grid; + grid-template-columns: auto auto auto auto auto; + justify-items: center; + } + .apis-card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding-top: 20px; + background-color: #fff; + width: 220px; + height: 226px; + border: 1px solid #d2dff9; + box-sizing: border-box; + border-radius: 8px; + filter: drop-shadow(0px 10px 0px rgba(210, 223, 249, 0.3)); + + .apis-card-img-wrapper { + width: 60px; + height: 60px; + img { + width: 57px; + height: 54px; + } + } + h4 { + margin: 0; + padding: 10px 10px; + text-align: center; + color: #000; + font-family: "Ubuntu"; + font-style: normal; + font-weight: 400; + font-size: 16px; + } + p { + text-align: center; + font-family: "Ubuntu"; + font-style: normal; + font-weight: normal; + font-size: 12px; + color: #000; + } } } - .btn-schedule-call { - cursor: pointer; - width: fit-content; - padding: 5px 20px; - background: #0fb2ef; - border-radius: 4px; - font-family: "Ubuntu"; - font-style: normal; - font-weight: 500; - font-size: 16px; - color: #fff; - margin-top: 24px; - } -} - -.wiremock-cloud-robot-wrapper { - justify-content: unset; -} - -.key-features-wrapper { - padding: $p-2xl; - color: $light-gray; - background: #0b4f6c; - .keyFeaturesTXT { - margin-bottom: $p-l; - font-size: $type-size-1; - - @media (min-width: 768px) { - font-size: 50px; - } + .signup-modal-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 900; + background-color: rgba(7, 0, 71, 0.5); } - .keyFeaturesInfo { - margin-bottom: $p-xl; - text-align: center; + .signup-modal-overlay.activeModalForm { + display: block; } - .padding-grid-top { - padding-top: 50px !important; + .signup-modal.activeModalForm { + display: flex; } - .key-features-card { - text-align: center; - margin-bottom: $p-l; - font-weight: 500; + .signup-modal { + position: relative; + display: none; + position: fixed; + background-color: #fff; + z-index: 1000; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + border-radius: 4px; - .key-features__icon { - margin-bottom: $p-l; - display: inline-block; - padding: $p-m; - border-radius: 100%; - background: linear-gradient(140deg, #ffffff, #ffffff33, #ffffff00); + .close-modal-icon { + cursor: pointer; + width: 20px; + height: 20px; + position: absolute; + right: 10px; + top: 10px; + border-radius: 50px; + background: #e9ebf8; + border: 1px solid #bccefd; - img { - filter: brightness(0) invert(1); - } + display: flex; + align-items: center; + justify-content: center; } - p { - margin: 0 $p-l; + @media (max-width: 1140px) { + width: 1020px; } - } - - @include breakpoint($medium) { - text-align: center; - - .key-features-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - justify-items: center; - gap: $p-l; - margin: 0 $p-xl; + @media (max-width: 1023px) { + justify-content: center; + width: 80%; + height: 90%; + padding: 30px; + overflow: hidden; } - - .key-features-card { - text-align: left; - width: 100%; - - p { - margin: 0; - } + @media (min-height: 760px) { + height: 720px; } } -} -.downloads-wrapper { - margin-top: $p-3xl; - margin-bottom: $p-3xl; -} - -.apis-wrapper { - padding: 70px 0; - display: flex; - justify-content: center; - flex-direction: column; - .apisTxt { - margin: 0; - padding: 0; - font-family: "Ubuntu"; - font-style: normal; - font-weight: bold; - text-align: center; - color: #18253d; - font-size: 2rem; - border-bottom: none; - } - .apisDescription { - margin-top: 5px; - font-family: "Ubuntu"; - font-style: normal; - text-align: center; - color: #18253d; - padding-bottom: 50px; - } - .apis-card-wrapper { - display: grid; - grid-template-columns: auto auto auto auto auto; - justify-items: center; - } - .apis-card { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding-top: 20px; - background-color: #fff; - width: 220px; - height: 226px; - border: 1px solid #d2dff9; - box-sizing: border-box; - border-radius: 8px; - filter: drop-shadow(0px 10px 0px rgba(210, 223, 249, 0.3)); + .signup-modal-robot { + width: 718px; + height: 720px; + background: + url(../../images/signupModalRobot.png) no-repeat, + linear-gradient(140deg, #ffffff 11.99%, #d2dff9 84.46%); + background-position: bottom right; + padding-left: 50px; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; - .apis-card-img-wrapper { - width: 60px; - height: 60px; - img { - width: 57px; - height: 54px; - } + h2 { + font-family: "Ubuntu"; + font-style: normal; + font-weight: 700; + font-size: 26px; + color: #7d93bd; } h4 { - margin: 0; - padding: 10px 10px; - text-align: center; - color: #000; + margin: 10px 0; font-family: "Ubuntu"; font-style: normal; - font-weight: 400; - font-size: 16px; + font-weight: 700; + font-size: 40px; + color: #18253d; + } + span { + color: #3db2ef; } + p { - text-align: center; font-family: "Ubuntu"; font-style: normal; - font-weight: normal; - font-size: 12px; - color: #000; + font-weight: 400; + font-size: 17px; + color: #494677; } - } -} - -.signup-modal-overlay { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 900; - background-color: rgba(7, 0, 71, 0.5); -} -.signup-modal-overlay.activeModalForm { - display: block; -} - -.signup-modal.activeModalForm { - display: flex; -} - -.signup-modal { - position: relative; - display: none; - position: fixed; - background-color: #fff; - z-index: 1000; - left: 50%; - top: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - border-radius: 4px; - - .close-modal-icon { - cursor: pointer; - width: 20px; - height: 20px; - position: absolute; - right: 10px; - top: 10px; - border-radius: 50px; - background: #e9ebf8; - border: 1px solid #bccefd; + .box-description-modal, + .box-description-modal-second { + margin-top: 120px; + width: 337px; + height: 129px; + background: linear-gradient( + 95.55deg, + #ffffff 2.1%, + rgba(255, 255, 255, 0) 100% + ); + border-radius: 16px; + padding: 1px 20px; + } - display: flex; - align-items: center; - justify-content: center; + .box-description-modal-second { + margin-top: 40px; + } + @media (max-width: 1023px) { + display: none; + } } - @media (max-width: 1140px) { - width: 1020px; - } - @media (max-width: 1023px) { - justify-content: center; - width: 80%; - height: 90%; + .signup-modal-form { padding: 30px; - overflow: hidden; - } - @media (min-height: 760px) { - height: 720px; - } -} - -.signup-modal-robot { - width: 718px; - height: 720px; - background: - url(../../images/signupModalRobot.png) no-repeat, - linear-gradient(140deg, #ffffff 11.99%, #d2dff9 84.46%); - background-position: bottom right; - padding-left: 50px; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - - h2 { - font-family: "Ubuntu"; - font-style: normal; - font-weight: 700; - font-size: 26px; - color: #7d93bd; - } - h4 { - margin: 10px 0; - font-family: "Ubuntu"; - font-style: normal; - font-weight: 700; - font-size: 40px; - color: #18253d; - } - span { - color: #3db2ef; - } - p { - font-family: "Ubuntu"; - font-style: normal; - font-weight: 400; - font-size: 17px; - color: #494677; - } - - .box-description-modal, - .box-description-modal-second { - margin-top: 120px; - width: 337px; - height: 129px; - background: linear-gradient( - 95.55deg, - #ffffff 2.1%, - rgba(255, 255, 255, 0) 100% - ); - border-radius: 16px; - padding: 1px 20px; - } - - .box-description-modal-second { - margin-top: 40px; - } - @media (max-width: 1023px) { - display: none; - } -} - -.signup-modal-form { - padding: 30px; - - h2 { - margin-top: 35px; - font-family: "Ubuntu"; - font-style: normal; - font-weight: 700; - font-size: 36px; - color: #18253d; - } - h4 { - font-family: "Ubuntu"; - font-style: normal; - font-weight: 400; - font-size: 12px; - color: #8f9bb2; - } - .input-form { - width: 250px; - border-radius: 5px; - } - hr { - margin-top: 30px; - margin-bottom: 30px; - border: 1px solid rgba(233, 235, 248, 0.4); - width: 62%; - } - .btn-submit-modal-form { - background: #0fb2ef; - border-radius: 6px; - border: none; - color: #fff; - font-family: "Ubuntu"; - font-style: normal; - font-weight: 500; - font-size: 16px; - width: 62%; - padding: 10px 0; - } - - .modal-terms-wrapper { - display: flex; - margin-bottom: 30px; - - .terms-accept { - background: #f7f9fc; - border: 1px solid #205cf5; - box-sizing: border-box; - border-radius: 4px; - } - .terms-wrapper { - margin-left: 15px; + h2 { + margin-top: 35px; + font-family: "Ubuntu"; + font-style: normal; + font-weight: 700; + font-size: 36px; + color: #18253d; } - .terms-txt { + h4 { font-family: "Ubuntu"; font-style: normal; font-weight: 400; - font-size: 12px !important; - margin: 0 !important; - padding: 0 !important; + font-size: 12px; + color: #8f9bb2; } - } - @media (max-width: 1023px) { - width: auto; - height: unset; - overflow: scroll; - h2 { - margin-top: 20px; - font-size: 28px; + .input-form { + width: 250px; + border-radius: 5px; + } + hr { + margin-top: 30px; + margin-bottom: 30px; + border: 1px solid rgba(233, 235, 248, 0.4); + width: 62%; + } + .btn-submit-modal-form { + background: #0fb2ef; + border-radius: 6px; + border: none; + color: #fff; + font-family: "Ubuntu"; + font-style: normal; + font-weight: 500; + font-size: 16px; + width: 62%; + padding: 10px 0; } - } -} -@media (max-width: 1280px) { - .apis-wrapper { - .apis-card { - width: 180px; - padding-left: 10px; - padding-right: 10px; + .modal-terms-wrapper { + display: flex; + margin-bottom: 30px; + + .terms-accept { + background: #f7f9fc; + border: 1px solid #205cf5; + box-sizing: border-box; + border-radius: 4px; + } + .terms-wrapper { + margin-left: 15px; + } + .terms-txt { + font-family: "Ubuntu"; + font-style: normal; + font-weight: 400; + font-size: 12px !important; + margin: 0 !important; + padding: 0 !important; + } + } + @media (max-width: 1023px) { + width: auto; + height: unset; + overflow: scroll; + h2 { + margin-top: 20px; + font-size: 28px; + } } } - .wiremock-cloud-robot { - width: 58% !important; - } - .wiremock-cloud-img { - height: 100%; - } + @media (max-width: 1280px) { + .apis-wrapper { + .apis-card { + width: 180px; + padding-left: 10px; + padding-right: 10px; + } + } - .code-tabs-main-wrapper { - ul { - flex-wrap: wrap; - display: flex; - margin-bottom: $p-l; + .wiremock-cloud-robot { + width: 58% !important; + } + .wiremock-cloud-img { + height: 100%; + } + + .code-tabs-main-wrapper { + ul { + flex-wrap: wrap; + display: flex; + margin-bottom: $p-l; + } } } -} -@media (max-width: 1023px) { - .home-header-footer { - flex-direction: column; - align-items: center; + @media (max-width: 1023px) { + .home-header-footer { + flex-direction: column; + align-items: center; - .wiremock-card-info { - margin: 30px 0 0 0; - &:first-child { - margin-top: 0; + .wiremock-card-info { + margin: 30px 0 0 0; + &:first-child { + margin-top: 0; + } } } - } - .clients-wrapper { - display: grid; - grid-template-columns: auto auto auto; - justify-content: unset; + .clients-wrapper { + display: grid; + grid-template-columns: auto auto auto; + justify-content: unset; - .client-wrapper { - margin-left: 0; + .client-wrapper { + margin-left: 0; + } } - } - .wiremock-cloud-wrapper { - flex-direction: column; - align-items: center; + .wiremock-cloud-wrapper { + padding: $p-l; + flex-direction: column; + align-items: center; - .wiremock-cloud-vLine { - display: none; + .wiremock-cloud-vLine { + display: none; + } + + .wiremock-cloud-img { + padding: 0; + } } .wiremock-cloud-details { @@ -1155,11 +1193,17 @@ html { } } + &__image { + margin-bottom: $p-l; + width: 100%; + } + &__boxes { @media (min-width: 920px) { padding: $p-xl 0; display: flex; gap: $p-3xl; + align-items: center; } } @@ -1206,5 +1250,11 @@ html { font-size: $type-size-2; margin-bottom: $p-l; } + + &--c { + img { + margin-bottom: $p-l; + } + } } } diff --git a/_sass/_page.scss b/_sass/_page.scss index ffd9d8e3..8ac250ef 100644 --- a/_sass/_page.scss +++ b/_sass/_page.scss @@ -50,6 +50,7 @@ .page__title { margin-top: 0; line-height: 1; + color: #0fb2ef; & + .page__meta { margin-top: -0.5em; @@ -65,6 +66,7 @@ h2 { padding-bottom: 0.5em; border-bottom: 1px solid $border-color; + color: #0fb2ef; } p, diff --git a/go.html b/go.html new file mode 100644 index 00000000..b8582b04 --- /dev/null +++ b/go.html @@ -0,0 +1,380 @@ +--- +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" +--- + + + +
+
+

Mock the APIs You Depend On

+ +
+
+

+
+
+ + + +
+
+{% highlight json %} +{ + "request": { + "method": "GET", + "url": "/wiremock" + }, + "response": { + "status": 200, + "body": "Easy!" + } +} +{% endhighlight %} +
+
+ Open Source +

+

+ The core WireMock engine.
+ Embed in your test code, run as a standalone process, or deploy via + Docker. +

+ +
+ Learn more +
+
+
+

+ cloud + Cloud +

+ +
+

+ Web UI with team collaboration, OpenAPI + Swagger support, and chaos + testing. +

+

Start on the generous free-forever tier:

+
+
+ Get Started +
+
+
+
+
+ +
+
+
+
+

+ Flexible API Mocking for Testing and + Development +

+ +
+ + GitHub Repo stars + + + GitHub forks + + + Downloads + + + Contributors + + +
+ +

+ 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. +

+ +
+ Documentation + Slack Community +
+
+
+

+   Join us for Hacktoberfest 2023! +

+

Learn WireMock and contribute to open source

+

+ + + +

+

+ 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. +

+

+ Adopt WireMock in your projects, contribute new features and fixes, + improve docs, create new demos and artwork, etc. +

+

+ Learn More... +

+
+
+
+
+ +
+
+ z +
+
+ wiremock cloud screenshot +
+
+ +
+ +

Hosted API mocking for everyone

+ +
    +
  • SaaS, nothing to install
    • +
  • For individuals, teams and enterprises
    • +
  • Intuitive web UI for developers
    • +
  • OpenAPI, Swagger and Postman import
    • +
  • NEW: Chaos Engineering
    • +
  • Generous free plan
    • +
+ +
+ Learn more + Sign Up for Free +
+
+
+
+ +
+
+

Key Features

+

+ 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. +

+
+
+
+ Wiremock Features +
+

Advanced request matching

+
+
+
+ wiremock dynamic response +
+

Dynamic response templating

+
+
+
+ wiremock unit tests +
+

+ Run in your unit tests, on your laptop or in your test environment. +

+
+
+
+ wiremock fault and latency +
+

Fault and latency injection

+
+
+
+ wiremock record playback +
+

Record / Playback

+
+
+
+ wiremock java, python, http +
+

Java, Python, HTTP and

+

JSON file APIs

+
+
+ Full Documentation +
+
+
+

Downloads

+

+ WireMock is available as a standalone service, Java library and + integrations for modern languages and technology stacks. +

+ + {% include downloads.html show_standalone="true" %} +
+ +
+
+

Frequently Asked Questions

+ +
+
What is WireMock?
+
+ WireMock is a free API mocking tool that can be run as a standalone + server, or in a hosted version via the + WireMock Cloud managed service. +
+ +
What is API mocking?
+
+ 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. +
+ +
When do you need to mock APIs?
+
+ 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. +
+ +
How do you create an API mock?
+
+ 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. +
+ +
What makes WireMock unique?
+
+ WireMock has a rich + matching system, 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 + extension points and + comprehensive APIs. +
+ +
Is WireMock open source?
+
+ Yes, WireMock is a completely open source API mocking tool (GitHub repo). If you’re looking for a hosted version of WireMock, check out + WireMock Cloud. +
+ +
Is WireMock a free service?
+
WireMock is completely free under the Apache 2.0 license.
+
+
+
+
diff --git a/images/home/cloud.png b/images/home/cloud.png new file mode 100644 index 00000000..525c5ada Binary files /dev/null and b/images/home/cloud.png differ diff --git a/images/home/oss.png b/images/home/oss.png new file mode 100644 index 00000000..95ed2d4a Binary files /dev/null and b/images/home/oss.png differ diff --git a/images/wiremock-cloud/hero-dash.png b/images/wiremock-cloud/hero-dash.png new file mode 100644 index 00000000..ee85247e Binary files /dev/null and b/images/wiremock-cloud/hero-dash.png differ diff --git a/start.html b/start.html new file mode 100644 index 00000000..798b073c --- /dev/null +++ b/start.html @@ -0,0 +1,356 @@ +--- +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" +--- + + + +
+
+

Mock the APIs You Depend On

+ +
+
+

+ source + Open Source +

+

+ The core WireMock engine.
+ Embed in your test code, run as a standalone process, or deploy via + Docker. +

+ +
+ Learn more +
+
+
+

+ cloud + Cloud +

+ +
+

+ Web UI with team collaboration, OpenAPI + Swagger support, and chaos + testing. +

+

Start on the generous free-forever tier:

+
+
+ Get Started +
+
+
+
+
+ +
+
+
+
+

+ Flexible API Mocking for Testing and + Development +

+ +
+ + GitHub Repo stars + + + GitHub forks + + + Downloads + + + Contributors + + +
+ +

+ 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. +

+ +
+ Documentation + Slack Community +
+
+
+

+   Join us for Hacktoberfest 2023! +

+

Learn WireMock and contribute to open source

+

+ + + +

+

+ 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. +

+

+ Adopt WireMock in your projects, contribute new features and fixes, + improve docs, create new demos and artwork, etc. +

+

+ Learn More... +

+
+
+
+
+ +
+
+ z +
+
+ wiremock cloud screenshot +
+
+ +
+ +

Hosted API mocking for everyone

+ +
    +
  • SaaS, nothing to install
    • +
  • For individuals, teams and enterprises
    • +
  • Intuitive web UI for developers
    • +
  • OpenAPI, Swagger and Postman import
    • +
  • NEW: Chaos Engineering
    • +
  • Generous free plan
    • +
+ +
+ Learn more + Sign Up for Free +
+
+
+
+ +
+
+

Key Features

+

+ 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. +

+
+
+
+ Wiremock Features +
+

Advanced request matching

+
+
+
+ wiremock dynamic response +
+

Dynamic response templating

+
+
+
+ wiremock unit tests +
+

+ Run in your unit tests, on your laptop or in your test environment. +

+
+
+
+ wiremock fault and latency +
+

Fault and latency injection

+
+
+
+ wiremock record playback +
+

Record / Playback

+
+
+
+ wiremock java, python, http +
+

Java, Python, HTTP and

+

JSON file APIs

+
+
+ Full Documentation +
+
+
+

Downloads

+

+ WireMock is available as a standalone service, Java library and + integrations for modern languages and technology stacks. +

+ + {% include downloads.html show_standalone="true" %} +
+ +
+
+

Frequently Asked Questions

+ +
+
What is WireMock?
+
+ WireMock is a free API mocking tool that can be run as a standalone + server, or in a hosted version via the + WireMock Cloud managed service. +
+ +
What is API mocking?
+
+ 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. +
+ +
When do you need to mock APIs?
+
+ 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. +
+ +
How do you create an API mock?
+
+ 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. +
+ +
What makes WireMock unique?
+
+ WireMock has a rich + matching system, 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 + extension points and + comprehensive APIs. +
+ +
Is WireMock open source?
+
+ Yes, WireMock is a completely open source API mocking tool (GitHub repo). If you’re looking for a hosted version of WireMock, check out + WireMock Cloud. +
+ +
Is WireMock a free service?
+
WireMock is completely free under the Apache 2.0 license.
+
+
+
+