-
Notifications
You must be signed in to change notification settings - Fork 53
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Doc site: landing page design update and swizzle sidebar (#390)
* doc-site: swizzle docsidebar for link attributes * doc-site: upgrade to latest docusaurus * doc-site: update landing page design * fixup! doc-site: update landing page design * doc-site: gha build domain * doc-site: update common elements package
- Loading branch information
1 parent
bdc1ccd
commit c42eead
Showing
24 changed files
with
1,266 additions
and
2,264 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,67 @@ | ||
| import React from 'react'; | ||
| import React, { useState } from 'react'; | ||
| import clsx from 'clsx'; | ||
| import styles from './HomepageWhyZero.module.scss'; | ||
|
|
||
| const reasons = [ | ||
| { | ||
| logo: require('../../static/img/icons/reason-technical-founder.svg').default, | ||
| text: `As a technical founder or the first technical hire at a startup, | ||
| your sole focus is to build the logic for your application and get it into customers’ | ||
| hands as quickly and reliably as possible. Yet you immediately face multiple hurdles | ||
| before even writing the first line of code. You’re forced to make many tech trade-offs, | ||
| leading to decision fatigue. You waste countless hours building boilerplate SaaS | ||
| features not adding direct value to your customers. You spend precious time picking | ||
| up unfamiliar tech, make wrong choices that result in costly refactoring or rebuilding | ||
| in the future, and are unaware of tools and best practices that would speed up your | ||
| product iteration.`, | ||
| logo: require('../../static/img/icons/reason-diamond.svg').default, | ||
| title: 'Quality', | ||
| text: `The same quality as hiring an experienced DevOps engineer`, | ||
| 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.` | ||
| ] | ||
| }, | ||
| { | ||
| logo: require('../../static/img/icons/reason-tools.svg').default, | ||
| text: `Zero was built by a team of engineers with many years of experience in building | ||
| and scaling startups. We have faced all the problems you will and want to provide a way | ||
| for new startups to avoid all those pitfalls. We also want to help you learn about the | ||
| tech choices we made so your team can become proficient in some of the great tools we | ||
| have included. The system you get starts small but allows you to scale well into the | ||
| future when you need to.`, | ||
| logo: require('../../static/img/icons/reason-clockwise.svg').default, | ||
| title: 'Speed', | ||
| text: `Just as fast as Render`, | ||
| 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.`, | ||
| ] | ||
| }, | ||
| { | ||
| logo: require('../../static/img/icons/reason-key.svg').default, | ||
| title: 'Ownership', | ||
| text: `You own 100% of the code`, | ||
| details: [ | ||
| `We don’t lock you into any decisions. It’s your code to change or migrate off at any point without consequence.`, | ||
| `Cloud application hosting tools are built to lock you in and don’t scale. `, | ||
| ] | ||
| } | ||
| ]; | ||
|
|
||
| const Reasons = ({data}) => ( | ||
| <div className={`${styles.reasons}`}> | ||
| const Reasons = ({ data, expanded, setExpanded }) => ( | ||
| <div className={`${styles.reasons} row`}> | ||
| { | ||
| data.map((i, idx) => ( | ||
| <div key={idx} className={styles.reason}> | ||
| <div key={idx} className={`${styles.reason} ${clsx('col col--3') }`}> | ||
| <i.logo className={styles.reason_logo} alt="logo" /> | ||
| <h4 className={styles.title}>{i.title}</h4> | ||
|
|
||
| <p className={`${styles.description} description`}>{i.text}</p> | ||
| {expanded && <ul className={`${styles.description} description`}>{i.details.map(content=> <li>{content}</li>)}</ul>} | ||
| </div> | ||
| )) | ||
| } | ||
| </div> | ||
| ) | ||
|
|
||
| export default function FeatureWhyZero () { | ||
| const [expanded, setExpanded] = useState(false) | ||
| const title = "Why is Zero good for startups ?" | ||
| return <div className={`${styles.reasons_container} featured-sections`}> | ||
| <h3>{title}</h3> | ||
| <Reasons data={reasons} /> | ||
| <h2 className={styles.title}> | ||
| {title} | ||
| <h5 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> | ||
| </h2> | ||
| <Reasons data={reasons} expanded={expanded} setExpanded={setExpanded} /> | ||
| <div className={`${styles.expand} ${expanded && styles.expanded}`}> | ||
| <a href="javascript:void(0);" onClick={()=>{setExpanded(!expanded)}}>{expanded ? "Less" : "More" } Details</a> | ||
| </div> | ||
| </div> | ||
| } |
Oops, something went wrong.