Skip to content

Commit a7a0fe5

Browse files
sriumcpsriumcp
authored
Landing page changes to include cards (#637)
* landing page changes * GH banner replacement
1 parent 39aaa9f commit a7a0fe5

File tree

6 files changed

+304
-67
lines changed

6 files changed

+304
-67
lines changed

‎mkdocs/docs/stylesheets/main.css

Lines changed: 78 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
.mdx-hero {
2222
margin: 0 0.8rem;
2323
color: var(--md-primary-bg-color);
24-
padding-bottom: 1.6rem;
2524
}
2625
.mdx-hero h1 {
2726
margin-bottom: 1rem;
@@ -34,11 +33,15 @@
3433
}
3534
}
3635
.mdx-hero__content {
37-
padding-bottom: 6rem;
36+
padding-bottom: 3rem;
3837
padding: 1rem;
3938
}
39+
@media screen and (max-width: 59.9375em) {
40+
.mdx-hero__content {
41+
padding-bottom: 4rem;
42+
}
43+
}
4044
.mdx-hero__image {
41-
padding-bottom: 2.5rem;
4245
padding: 1rem;
4346
min-width: 60%;
4447
}
@@ -83,3 +86,75 @@
8386
.md-header__title {
8487
font-size: 1.5rem;
8588
}
89+
90+
.feature-item h2 svg {
91+
height: 30px;
92+
float: left;
93+
margin-right: 10px;
94+
transform: translateY(10%);
95+
}
96+
97+
.top-hr {
98+
margin-top: 0px;
99+
}
100+
101+
.feature-item {
102+
font-family: "Lato", sans-serif;
103+
font-weight: 300;
104+
box-sizing: border-box;
105+
padding: 0 15px;
106+
word-break: break-word;
107+
}
108+
109+
.feature-item h2 {
110+
color: #333;
111+
font-weight: 300;
112+
font-size: 25px;
113+
white-space: nowrap;
114+
overflow: hidden;
115+
text-overflow: ellipsis;
116+
line-height: normal;
117+
margin-top: 20px;
118+
margin-bottom: 10px;
119+
font-family: inherit;
120+
}
121+
[data-md-color-scheme=slate] .feature-item h2 {
122+
color: #fff;
123+
}
124+
125+
.feature-item p {
126+
font-size: 16px;
127+
line-height: 1.8em;
128+
text-rendering: optimizeLegibility;
129+
-webkit-font-smoothing: antialiased;
130+
color: #111;
131+
margin: 0 0 10px;
132+
display: block;
133+
}
134+
[data-md-color-scheme=slate] .feature-item p {
135+
color: #fff;
136+
}
137+
138+
@media screen and (min-width: 76.25em) {
139+
.top-hr {
140+
width: 100%;
141+
display: flex;
142+
max-width: 61rem;
143+
margin-right: auto;
144+
margin-left: auto;
145+
padding: 0 0.2rem;
146+
flex-wrap: wrap;
147+
}
148+
149+
.feature-item {
150+
width: 25%;
151+
}
152+
153+
.feature-item:hover {
154+
background-color: #526cfe47;
155+
border-radius: 3px;
156+
}
157+
[data-md-color-scheme=slate] .feature-item:hover {
158+
background-color: #fc058047;
159+
}
160+
}

‎mkdocs/overrides/home.html

Lines changed: 140 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -24,85 +24,164 @@
2424

2525
<!-- Render hero under tabs -->
2626
{% block tabs %}
27-
{{ super() }}
28-
29-
<!-- Additional styles for landing page -->
30-
<style>
31-
32-
/* Application header should be static for the landing page */
33-
.md-header {
34-
position: initial;
35-
}
36-
37-
/* Remove spacing, as we cannot hide it completely */
38-
.md-main__inner {
39-
margin: 0;
27+
{{ super() }}
28+
29+
<!-- Additional styles for landing page -->
30+
<style>
31+
/* Application header should be static for the landing page */
32+
.md-header {
33+
position: initial;
34+
}
35+
36+
/* Remove spacing, as we cannot hide it completely */
37+
.md-main__inner {
38+
margin: 0;
39+
}
40+
41+
/* Hide main content for now */
42+
.md-content {
43+
display: none;
44+
}
45+
46+
/* Hide table of contents */
47+
@media screen and (min-width: 60em) {
48+
.md-sidebar--secondary {
49+
display: none;
4050
}
51+
}
4152

42-
/* Hide main content for now */
43-
.md-content {
53+
/* Hide navigation */
54+
@media screen and (min-width: 76.25em) {
55+
.md-sidebar--primary {
4456
display: none;
4557
}
58+
}
59+
</style>
4660

47-
/* Hide table of contents */
48-
@media screen and (min-width: 60em) {
49-
.md-sidebar--secondary {
50-
display: none;
51-
}
52-
}
61+
<!-- Hero for landing page -->
62+
<section class="mdx-container">
63+
<div class="md-grid md-typeset">
5364

54-
/* Hide navigation */
55-
@media screen and (min-width: 76.25em) {
56-
.md-sidebar--primary {
57-
display: none;
58-
}
59-
}
60-
</style>
61-
62-
<!-- Hero for landing page -->
63-
<section class="mdx-container">
64-
<div class="md-grid md-typeset">
65-
<div class="mdx-hero">
66-
67-
<!-- Hero image -->
68-
<div class="mdx-hero__image">
69-
<img
70-
src="{{ base_url }}/images/illustration.png"
71-
alt=""
72-
width="1075"
73-
height="606"
74-
draggable="false"
75-
>
76-
</div>
77-
78-
<!-- Hero content -->
79-
<div class="mdx-hero__content">
80-
<h1><strong>The AI-driven Kubernetes experimentation platform</strong></h1>
81-
82-
<h3><strong>Automate</strong> A/B, A/B/n, Canary, and Conformance experiments.</h3>
65+
<div class="mdx-hero">
66+
67+
<!-- Hero image -->
68+
<div class="mdx-hero__image">
69+
<img src="{{ base_url }}/images/illustration.png" alt="" width="1075" height="606" draggable="false">
70+
</div>
71+
72+
<!-- Hero content -->
73+
<div class="mdx-hero__content">
74+
<h1><strong>The AI-driven Kubernetes experimentation platform</strong></h1>
75+
76+
<h2>Iter8 makes it easy to <strong>optimize business metrics</strong> and <strong>validate SLOs</strong> when you release new versions of Kubernetes apps/ML models</h2>
77+
78+
<!-- <h3><strong>Automate</strong> A/B, A/B/n, Canary, and Conformance experiments.</h3>
8379
8480
<h3><strong>Progressively rollout winning version</strong> of your app/ML model.</h3>
8581
8682
<h3><strong>Optimize</strong> business rewards. <strong>Validate</strong> SLOs. <strong>Maximize</strong> release velocity with confidence.</h3>
8783
88-
<h3><strong>Protect end-user experience</strong> with mirroring, user segmentation, dark launch, and sticky sessions.</h3>
84+
<h3><strong>Protect end-user experience</strong> with mirroring, user segmentation, dark launch, and sticky sessions.</h3> -->
85+
86+
<a href="{{ base_url }}/getting-started/quick-start/with-knative" title="Quick start in 5 mins"
87+
class="md-button md-button--primary">
88+
Quick start in 5 mins
89+
</a>
90+
91+
</div>
92+
</div>
93+
<!-- Hero ^^ -->
94+
95+
96+
</div>
97+
</section>
8998

90-
<a
91-
href="{{ base_url }}/getting-started/quick-start/with-knative"
92-
title="Quick start in 5 mins"
93-
class="md-button md-button--primary"
94-
>
95-
Quick start in 5 mins
96-
</a>
9799

98-
</div>
100+
<section>
101+
<div class="md-grid md-typeset">
102+
103+
<!-- Main site box descriptions -->
104+
<div class="top-hr">
105+
106+
<div class="feature-item">
107+
<h2>
108+
<span class="twemoji">
109+
{% include ".icons/material/atom.svg" %}
110+
</span>
111+
Experiments
112+
</h2>
113+
<p>Automate <strong>A/B, A/B/n, Canary, and Conformance experiments</strong> that enable you to compare multiple versions and find the <strong>winner</strong>.</p>
99114
</div>
115+
116+
<div class="feature-item">
117+
<h2>
118+
<span class="twemoji">
119+
{% include ".icons/material/kubernetes.svg" %}
120+
</span>
121+
K8s stacks
122+
</h2>
123+
<p>Experiment over <strong>Knative, KFserving, or Istio</strong>. Or extend Iter8 over <strong>any</strong> K8s stack of your choice with just a few RBAC rules.</p>
124+
</div>
125+
126+
<div class="feature-item">
127+
<h2>
128+
<span class="twemoji">
129+
{% include ".icons/material/database-plus.svg" %}
130+
</span>
131+
Metrics
132+
</h2>
133+
<p>Use metrics from <strong>any</strong> provider in your experiments including <strong>Prometheus, New Relic, Sysdig and Elastic</strong>.</p>
134+
</div>
135+
136+
<div class="feature-item">
137+
<h2>
138+
<span class="twemoji">
139+
{% include ".icons/fontawesome/solid/cogs.svg" %}
140+
</span>
141+
AI-driven
142+
</h2>
143+
<p>Leverage <strong>Bayesian statistics</strong> for rigorous version assessments and <strong>multi-armed bandit algorithms</strong> for optimal traffic shifting.</p>
144+
</div>
145+
146+
<div class="feature-item">
147+
<h2>
148+
<span class="twemoji">
149+
{% include ".icons/material/progress-check.svg" %}
150+
</span>
151+
Progressive rollout
152+
</h2>
153+
<p>Enable <strong>progressive traffic shift</strong> towards the winning version or specify a <strong>fixed traffic split</strong> during an experiment.</p>
154+
</div>
155+
156+
<div class="feature-item">
157+
<h2>
158+
<span class="twemoji">
159+
{% include ".icons/material/router.svg" %}
160+
</span>
161+
Traffic engineering
162+
</h2>
163+
<p>Protect end-user experience with traffic engineering features such as <strong>mirroring, user segmentation, dark launch, and sticky sessions</strong>.</p>
164+
</div>
165+
166+
<div class="feature-item">
167+
<h2>
168+
<span class="twemoji">
169+
{% include ".icons/octicons/file-code-16.svg" %}
170+
</span>
171+
Resource config tools
172+
</h2>
173+
<p>Use <strong>plain YAML/JSON files, Helm, or Kustomize</strong> for configuring all the resources needed for an experiment.</p>
174+
</div>
175+
100176
</div>
101-
</section>
177+
178+
</div>
179+
</section>
180+
102181
{% endblock %}
103182

104183
<!-- Content -->
105184
{% block content %}{% endblock %}
106185

107186
<!-- Application footer -->
108-
{% block footer %}{% endblock %}
187+
{% block footer %}{% endblock %}

‎src/assets/images/ghbanner.png

3.69 KB
Loading

0 commit comments

Comments
 (0)