Skip to content

Commit

Permalink
Feat: new landing page
Browse files Browse the repository at this point in the history 
Signed-off-by: thisisobate <obasiuche62@gmail.com>
  • Loading branch information
@thisisobate
thisisobate committed Sep 19, 2024
1 parent 8eb878f commit fa803b3
Show file tree
Hide file tree
Showing 5 changed files with 131 additions and 103 deletions.
38 changes: 38 additions & 0 deletions docs/assets/images/moon-gradient.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
119 changes: 80 additions & 39 deletions docs/assets/stylesheets/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ body {
}

.md-main {
flex-grow: 0
flex-grow: 0;
}

.md-main__inner {
Expand All @@ -32,63 +32,103 @@ body {
}

.gradient-container {
padding-top: .0rem;
background: linear-gradient(to bottom, var(--md-primary-fg-color), var(--md-accent-fg-color),var(--md-default-bg-color));
padding-top: 0rem;
}

.hero-container {
background-color: var(--md-default-bg-color);
}

.md-button {
background-color: #D9D9D9DE;
cursor: pointer;
display: inline-block;
font-weight: 700;
font-size: 1rem;
padding: .625em 2em;
transition: color 125ms, background-color 125ms, border-color 125ms;
}

.tx-hero {
margin: 32px 2.8rem;
color: var(--md-primary-bg-color);
justify-content: center;
width: 100%;
height: 100vh;
background-size: 40%;
background-repeat: no-repeat;
background-position: center;
background-image: url("../images/moon-gradient.svg");
text-align: center;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 1rem;
padding-top: 20vh;
}

.tx-hero h1 {
margin-bottom: 1rem;
color: var(--md-default-fg-color--light);
font-weight: 700
background: conic-gradient(from 168deg at 48.75% 6.95%,
#6BA3CE 0deg,
#63a7d7 148.1250035762787deg,
#93C5EA 270deg,
#5690BB 360deg);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: 65%;
font-weight: 700;
font-size: 4rem;
margin: 0px;
}

.hero-subtitle {
font-size: 1.25rem;
font-weight: 300;
width: 50%;
color: var(--md-default-fg-color);
}

.tx-hero__content {
padding-bottom: 1rem;
margin: 0 auto;
}

.tx-hero__image{
width:17rem;
height:17rem;
order:1;
.tx-hero__image {
width: 17rem;
height: 17rem;
order: 1;
padding-right: 2.5rem;
}

.tx-hero .md-button {
margin-top: .5rem;
margin-right: .5rem;
color: var(--md-primary-bg-color)
margin-top: 0.5rem;
margin-right: 0.5rem;
}

.tx-hero .md-button--primary {
background-color: var(--md-primary-bg-color);
color: var(--md-primary-fg-color);
border-color: var(--md-primary-bg-color)
background-color: var(--md-primary-fg-color);
color: var(--md-primary-bg-color);
}

.md-button--secondary {
color: #161C5C;
}

.tx-hero .md-button:focus,
.tx-hero .md-button:hover {
background-color: var(--md-accent-fg-color);
color: var(--md-primary-bg-color);
border-color: var(--md-accent-fg-color)
border-color: var(--md-accent-fg-color);
}

.top-hr {
margin-top: 42px;
}

.feature-item {
font-family: 'Lato', sans-serif;
font-family: "Lato", sans-serif;
font-weight: 300;
box-sizing: border-box;
padding: 0 15px;
word-break: break-word
word-break: break-word;
}

.feature-item h2 {
Expand All @@ -112,36 +152,36 @@ body {
display: block;
}

@media screen and (max-width:30em) {
@media screen and (max-width: 30em) {
.tx-hero h1 {
font-size: 1.4rem
font-size: 1.4rem;
}
}

@media screen and (min-width:60em) {
@media screen and (min-width: 60em) {
.md-sidebar--secondary {
display: none
display: none;
}

.tx-hero {
display: flex;
align-items: center;
justify-content: center;
justify-content: flex-start;
}

.tx-hero__content {
max-width: 22rem;
margin-top: 3.5rem;
margin-bottom: 3.5rem;
margin-left: 1.0rem;
margin-right: 4.0rem;
margin-left: 1rem;
margin-right: 4rem;
align-items: center;
}
}

@media screen and (min-width:76.25em) {
@media screen and (min-width: 76.25em) {
.md-sidebar--primary {
display: none
display: none;
}

.top-hr {
Expand All @@ -150,7 +190,7 @@ body {
max-width: 61rem;
margin-right: auto;
margin-left: auto;
padding: 0 .2rem;
padding: 0 0.2rem;
}

.bottom-hr {
Expand All @@ -160,7 +200,7 @@ body {
max-width: 61rem;
margin-right: auto;
margin-left: auto;
padding: 0 .2rem;
padding: 0 0.2rem;
}

.feature-item {
Expand All @@ -187,7 +227,7 @@ body {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
font-family: 'Lato', sans-serif;
font-family: "Lato", sans-serif;
font-size: 23px;
font-weight: 300;
padding-bottom: 10px;
Expand All @@ -201,7 +241,7 @@ body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 1.0rem;
margin-top: 1rem;
}

.md-footer-social {
Expand All @@ -210,7 +250,7 @@ body {

/* new stuff */

.md-typeset h2 + h3 {
.md-typeset h2+h3 {
font-size: 1em;
margin-top: -0.8em;
}
Expand All @@ -234,11 +274,12 @@ body {
gap: 3.2rem;
margin: 0 0 3.2rem;
}

.mdx-spotlight__feature:last-child {
margin-bottom: 1em;
}

.mdx-spotlight__feature > img {
.mdx-spotlight__feature>img {
display: block;
flex-shrink: 0;
border-radius: 0.2rem;
Expand All @@ -257,7 +298,7 @@ body {
gap: 0;
}

.mdx-spotlight__feature > img {
.mdx-spotlight__feature>img {
margin-left: auto;
margin-right: auto;
height: auto;
Expand All @@ -276,4 +317,4 @@ body {
.mdx-spotlight__feature:nth-child(odd) {
flex-direction: row-reverse;
}
}
}
2 changes: 1 addition & 1 deletion docs/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
template: home.html
---

# Keptn - Supercharge your Deployments
# Keptn
73 changes: 11 additions & 62 deletions docs/overrides/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,76 +10,25 @@
{{ super() }}

<!-- Main site Entry button descriptions -->
<div class="gradient-container">
<section class="tx-container">
<div class="md-grid md-typeset">
<div class="tx-hero">
<div class="tx-hero__image">
</div>
<div class="tx-hero__content">
<img src="assets/images/keptn-logo-white.svg" draggable="false"
alt="keptn icon with keptn text next to it"
data-proofer-ignore>
<p id="keptn-supercharge-your-deployments">Supercharge your deployments with Keptn!</p>
<a href="docs/getting-started/" data-proofer-ignore title="Get started"
class="md-button md-button--primary">
Get started
</a>
<a href="docs/" data-proofer-ignore title="Documentation" class="md-button">
Documentation
</a>
</div>
</div>
</div>
</section>

<!-- Main site box descriptions -->
<div class="top-hr">
<div class="feature-item">
<a href="#deployment-observability">
<img src="assets/images/capabilities-04.svg" draggable="false"
alt="a ship going around in circles with an infinity symbol next to it"
data-proofer-ignore>
<h2>
Deployment Observability
</h2>
<p>Make ANY Kubernetes Deployment observable</p>
</a>
</div>

<div class="feature-item">
<a href="#gather-metrics-from-anywhere">
<img src="assets/images/capabilities-03.svg" draggable="false"
alt="a lighthouse with a heartbeat line and a sheet with SLIs and SLOs on it"
data-proofer-ignore>
<h2>
Gather metrics from anywhere
</h2>
<p>Standardize access for all Observability Data for K8s</p>
<div class="hero-container">
<section class="tx-hero">
<h1>Supercharge your deployments</h1>
<p class="hero-subtitle">Manage your application release lifecycle metrics, observability, health checks, with pre- and post-deployment evaluations and tasks</p>
<div>
<a href="docs/getting-started/" data-proofer-ignore title="Get started"
class="md-button md-button--primary">
Get started
</a>
</div>
<div class="feature-item">
<a href="#orchestrate-deployment-checks">
<img src="assets/images/capabilities-01.svg" draggable="false"
alt="a seaman holding a sheet of paper with cog on it"
data-proofer-ignore>
<h2>
Orchestrate Deployment Checks
</h2>
<p>Gain confidence in your work with pre/post-deployment checks</p>
<a href="docs/" data-proofer-ignore title="Documentation" class="md-button md-button--secondary">
Documentation
</a>
</div>
</div>
</section>
</div>

<section class="mdx-parallax__group" data-md-color-scheme="default">
<div class="md-content md-grid" data-md-component="content">
<div class="md-content__inner">
<header class="md-typeset">
<h1 id="supercharge-your-deployments">
Supercharge your Deployments
</h1>
</header>
<div class="mdx-spotlight">
<figure class="mdx-spotlight__feature">
<img
Expand Down
2 changes: 1 addition & 1 deletion mkdocs.yml
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
site_name: Keptn - Supercharge Your Deployments
site_name: Keptn
theme:
name: material
custom_dir: docs/overrides
Expand Down

0 comments on commit fa803b3

Please sign in to comment.