Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doc site: updating landing page content #393

Merged
merged 2 commits into from
Jul 23, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 11 additions & 26 deletions doc-site/src/components/HomepageFeatures.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,10 @@ const FeatureList = [
Svg: require('../../static/img/icons/attr-reliable.svg').default,
description: (
<>
Your infrastructure will be highly available and fault tolerant.
Production workloads will be self-healing, with all traffic load
balanced to multiple instances of your application. All the
infrastructure is represented with code to be reproducible,
auditable, and easy to configure.
Fault-tolerant infrastructure. Production workloads will be
highly available, with traffic load balanced to multiple
instances of your application. All the infrastructure is
represented with code to be reproducible and easy to configure.
</>
),
},
Expand All @@ -21,9 +20,9 @@ const FeatureList = [
Svg: require('../../static/img/icons/attr-scalable.svg').default,
description: (
<>
Everything in your system will scale automatically based on the needs
of your application. For frontend assets, using a CDN will ensure global
scale, so you don’t need to worry about it.
Your system will scale automatically based on your application’s
needs. For frontend assets, using a CDN will ensure availability
at global scale.
</>
),
},
Expand All @@ -32,25 +31,11 @@ const FeatureList = [
Svg: require('../../static/img/icons/attr-secure.svg').default,
description: (
<>
All your systems will follow security best practices backed up
All your systems will follow security best practices backed up
by multiple security audits and penetration tests, and will be
properly configured to make sure access is controlled to
private networks, secrets, and data. Built-in application
features help you bullet-proof your application by using
existing, tested tools rather than reinventing the wheel.
</>
),
},
{
title: 'Modular',
Svg: require('../../static/img/icons/attr-modular.svg').default,
description: (
<>
Everything built by Zero is yours. After Zero generates your
infrastructure, backend, and frontend, all the code is checked
into your source control repositories and becomes the basis for
your new system. You can customize as much as you like. We
provide constant updates and new modules.
properly configured to limit access to private networks,
secrets, and data. Bullet-proof your application by default
using existing, tested tools.
</>
),
},
Expand Down
7 changes: 3 additions & 4 deletions doc-site/src/components/HomepageFeatures.module.scss
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
.features {
background: white;
align-items: center;

.title {
color: var(--ifm-landing-page-inverse-font-color);
color: white;
font-weight: 400;
text-transform: inherit;
max-width: 34rem;
Expand All @@ -24,8 +23,8 @@
}

p {
color: var(--ifm-landing-page-inverse-font-color);
font-size: 0.8rem;
color: white;
font-size: 0.9rem;
padding: 0 calc(var(--ifm-spacing-horizontal)*2);
}

Expand Down
2 changes: 1 addition & 1 deletion doc-site/src/components/HomepageVideo.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@ import styles from './HomepageVideo.module.scss';

export default function FeatureVideo () {
return <div className={styles.video}>
<iframe width="850" height="450" src="https://www.youtube.com/embed/IZ45Wm3wN7s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="850" height="450" src="https://www.youtube.com/embed/6rBM8L8dz4A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
}
21 changes: 12 additions & 9 deletions doc-site/src/components/HomepageWhyZero.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,18 @@ const reasons = [
{
logo: require('../../static/img/icons/reason-diamond.svg').default,
title: 'Quality',
text: `The same quality as hiring an experienced DevOps engineer`,
text: `Like the best DevOps engineer you’ve ever met - except open source and free.`,
details: [
`The devops skill gap is real. Why spend precious time picking up unfamiliar tech, making wrong choices that result in costly refactoring or rebuilding in
the future, and missing tools and best practices that would speed up your product iteration?`,
`Think of Zero as the best DevOps engineer you’ve ever met - except it’s open-source, and free.`
`The devops skill gap is real. Why spend precious time picking up unfamiliar tech,
making wrong choices that result in costly refactoring or rebuilding in the future,
and missing tools and best practices that would speed up your product iteration?`,
`Get real-time support for all your questions from Zero’s community.`
]
},
{
logo: require('../../static/img/icons/reason-clockwise.svg').default,
title: 'Speed',
text: `Just as fast as Render`,
text: `Just as fast as other tools like Heroku to get up and running.`,
details: [
`Building foundational infrastructure the right way doesn’t have to take a long time. Our team has years of experience building and scaling startups and have poured that knowledge into Zero. What used to take us weeks of DevOps work can now take you 30 minutes.`,
`We provide constant updates and new modules that you can pull in on an ongoing basis.`,
Expand All @@ -25,10 +26,12 @@ const reasons = [
{
logo: require('../../static/img/icons/reason-key.svg').default,
title: 'Ownership',
text: `You own 100% of the code`,
text: `You own 100% of the code. No lock-in!`,
details: [
`We don’t lock you into any decisions. It’s your code to change or migrate off at any point without consequence.`,
`Everything built by Zero is yours. It’s your code to change or migrate off at any point.`,
`Cloud application hosting tools are built to lock you in and don’t scale. `,
`Infrastructure is created in your cloud provider account. You can customize as much
as you like with no strings attached. You control how much you spend.`
]
}
];
Expand All @@ -55,9 +58,9 @@ const title = "Why is Zero good for startups ?"
return <div className={`${styles.reasons_container} featured-sections`}>
<h2 className={styles.title}>
{title}
<h5 className={styles.subtitle}>
<h4 className={styles.subtitle}>
As engineer #1, your sole priority is to build the logic for your application and get it into customers’ hands as quickly and reliably as possible.
</h5>
</h4>
</h2>
<Reasons data={reasons} expanded={expanded} setExpanded={setExpanded} />
<div className={`${styles.expand} ${expanded && styles.expanded}`}>
Expand Down
12 changes: 7 additions & 5 deletions doc-site/src/components/HomepageWhyZero.module.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.reasons_container{
// background: rgba(232, 237, 244, 1);
text-align: center;
color: white;
background: white;
color: var(--ifm-landing-page-inverse-font-color);

.title {
margin-bottom: 5rem;
Expand All @@ -12,7 +12,7 @@
margin: 1rem auto;
font-family: 'lato';
font-weight: 400;
max-width: 30rem;
max-width: 34rem;
letter-spacing: normal;
}
.expand {
Expand All @@ -24,7 +24,7 @@

&:active, &:link, &:visited{
text-decoration: none;
color:#7A8AA9;;
color: var(--ifm-landing-page-inverse-font-color);
}
&:after {
align-self: center;
Expand Down Expand Up @@ -63,11 +63,13 @@
}

.description{
font-size: 0.8rem;
min-height: 2.5rem;
font-size: 0.9rem;
align-self: center;
}
ul.description {
margin-top: 2rem;
padding-left: 1rem;
}
.description li{
text-align: left;
Expand Down
2 changes: 1 addition & 1 deletion doc-site/src/pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ export default function Home() {
<HomepageVideo />
<HomePageCallToAction />
<HomepageTrustedBy />
<HomepageFeatures />
<HomepageWhyZero />
<HomepageFeatures />
<HomepageOfferings />
<HomePageCallToAction />
</main>
Expand Down