website: update landing page and contents heading formatting

This commit is contained in:
Yangshun Tay
2019-12-22 10:21:17 +08:00
parent 378c54520c
commit 8c116e399c
8 changed files with 147 additions and 47 deletions

View File

@ -35,7 +35,7 @@ module.exports = {
},
'questions-to-ask',
],
'Post Interview': ['negotiation', 'understanding-compensation'],
'Post Interview': ['understanding-compensation', 'negotiation'],
Algorithms: [
'algorithms/algorithms-introduction',
'algorithms/array',

View File

@ -30,7 +30,7 @@ export default [
quote: (
<>
Most of us are familiar with having the prospect of having to grind tons
of Leetcode problems before the interview, but I really wanted a sense
of LeetCode problems before the interview, but I really wanted a sense
of direction, an outline of sorts to prepare efficiently; I wanted to
pick questions that covered all the important concepts one can be tested
on. The Tech Interview Handbook provides just that; the Algorithms

View File

@ -43,13 +43,18 @@ function Home() {
</div>
</div>
</header>
<main>
<div className={styles.sectionDark}>
<div className="container padding-vert--md">
<div>
<div
className={classnames(
'margin-bottom--lg',
'padding-vert--lg',
styles.sectionPrimary,
)}>
<div className="container">
<div className="row">
<div className="col col--8 col--offset-2">
<div className="margin-vert--lg text--center">
<h2 className={styles.sectionDarkTitle}>
<h2 className={styles.sectionPrimaryTitle}>
Job hunting? Sign up with Triplebyte to efficiently
interview with top tech companies and land your dream job!
💰
@ -68,11 +73,16 @@ function Home() {
</div>
</div>
</div>
<p className="padding-vert--xl">
<p className="container">
<p className="row">
<p className="col col--10 col--offset-1">
<h2 className="text--center margin-bottom--xl">
<div className={classnames('margin-vert--lg', 'padding-vert--lg')}>
<div className="container">
<div className="row">
<div className="col col--10 col--offset-1">
<h2
className={classnames(
'text--center',
'margin-bottom--xl',
styles.sectionTitle,
)}>
Why Tech Interview Handbook?
</h2>
<div className="row margin-vert--lg">
@ -86,7 +96,7 @@ function Home() {
<div className="col">
<h3>Curated Practice Questions</h3>
<p>
No one has time to practice a few hundred Leetcode
No one has time to practice a few hundred LeetCode
questions. We tell you which are the best questions to
practice.
</p>
@ -94,11 +104,12 @@ function Home() {
<div className="col">
<h3>Interview Cheatsheet</h3>
<p>
Straight-to-the-point Do's and Don'ts during an interview
Straight-to-the-point Do's and Don'ts during an interview.
Knowing these, the battle is already half won.
</p>
</div>
</div>
<p className="row margin-vert--lg">
<div className="row margin-vert--lg">
<div className="col">
<h3>Practical Algorithm Tips</h3>
<p>
@ -113,27 +124,111 @@ function Home() {
and you can prepare your answers ahead of time.
</p>
</div>
<p className="col">
<div className="col">
<h3>Tested and Proven</h3>
<p>
Countless engineers have gotten their dream jobs with its
help.
</p>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className={classnames(
'margin-vert--lg',
'padding-vert--lg',
'text--center',
styles.sectionAlt,
)}>
<div className="container">
<div className="row">
<div className="col col--8 col--offset-2">
<h2
className={classnames(
'margin-vert--lg',
styles.sectionTitle,
)}>
Enjoying Tech Interview Handbook so far?
</h2>
<p className={classnames(styles.sectionTagline)}>
Support this project by becoming a sponsor! Your logo/profile
picture will show up here with a link to your website.
</p>
</p>
</p>
</p>
</p>
<div className={styles.sectionAlt}>
<div className="container padding-vert--xl">
<div>
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/0/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/0/avatar.svg" />
</a>
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/3/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/3/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/4/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/4/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/5/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/5/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/6/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/6/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/7/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/7/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/8/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/8/avatar.svg" />
</a>{' '}
<a
href="https://opencollective.com/tech-interview-handbook/sponsor/9/website"
target="_blank">
<img src="https://opencollective.com/tech-interview-handbook/sponsor/9/avatar.svg" />
</a>
</div>
<div className="margin-vert--lg">
<a
className="button button--primary button--lg"
href="https://opencollective.com/tech-interview-handbook"
rel="noreferrer noopener"
target="_blank">
Become a sponsor!
</a>
</div>
</div>
</div>
</div>
</div>
<div className={classnames('margin-vert--lg', 'padding-vert--lg')}>
<div className="container">
<div className="row">
<div className="col col--6 col--offset-3">
<div className="margin-vert--lg text--center">
<h2>Success Stories</h2>
</div>
<h2
className={classnames(
'margin-vert--lg',
'text--center',
styles.sectionTitle,
)}>
Success Stories
</h2>
{successStories.map(user => (
<div className="card margin-vert--lg" key={user.name}>
<div className="card__body">
<p className={styles.quote}>"{user.quote}"</p>
</div>
<div className="card__header">
<div className="avatar">
<img className="avatar__photo" src={user.thumbnail} />
@ -145,16 +240,13 @@ function Home() {
</div>
</div>
</div>
<div className="card__body">
<blockquote>"{user.quote}"</blockquote>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</main>
</div>
</Layout>
);
}

View File

@ -21,18 +21,26 @@
justify-content: center;
}
.sectionAlt {
background-color: var(--ifm-color-emphasis-alpha-05);
.sectionTitle {
font-size: 2rem;
}
.sectionDark {
.sectionTagline {
font-size: 1.25rem;
}
.sectionAlt {
background-color: var(--ifm-color-emphasis-100);
}
.sectionPrimary {
background-color: var(--ifm-color-primary);
}
.sectionDarkTitle {
.sectionPrimaryTitle {
color: var(--ifm-color-white);
}
.sectionDarkLink {
color: var(--ifm-color-black-alpha-80);
.quote {
font-size: 1.1rem;
}