Tidy up and fix alignment of landing cards (#5317)

This commit is contained in:
Ines Montani 2020-04-20 20:33:13 +02:00
parent 32c2bb3d99
commit 5753b43e60
3 changed files with 34 additions and 28 deletions

View File

@ -46,10 +46,17 @@ export const LandingGrid = ({ cols = 3, blocks = false, children }) => (
export const LandingCol = ({ children }) => <div className={classes.col}>{children}</div> export const LandingCol = ({ children }) => <div className={classes.col}>{children}</div>
export const LandingCard = ({ title, children }) => ( export const LandingCard = ({ title, button, url, children }) => (
<div className={classes.card}> <div className={classes.card}>
{title && <H3>{title}</H3>} <section className={classes.cardText}>
{children} {title && <H3>{title}</H3>}
<p>{children}</p>
</section>
{button && url && (
<footer>
<LandingButton to={url}>{button}</LandingButton>
</footer>
)}
</div> </div>
) )

View File

@ -49,12 +49,17 @@
margin-bottom: -25rem margin-bottom: -25rem
.card .card
display: flex
flex-direction: column
padding: 3rem 2.5rem padding: 3rem 2.5rem
background: var(--color-back) background: var(--color-back)
border-radius: var(--border-radius) border-radius: var(--border-radius)
box-shadow: var(--box-shadow) box-shadow: var(--box-shadow)
margin-bottom: 3rem margin-bottom: 3rem
.card-text
flex: 100%
.button .button
width: 100% width: 100%

View File

@ -79,34 +79,28 @@ const Landing = ({ data }) => {
<LandingSubtitle>in Python</LandingSubtitle> <LandingSubtitle>in Python</LandingSubtitle>
</LandingHeader> </LandingHeader>
<LandingGrid blocks> <LandingGrid blocks>
<LandingCard title="Get things done"> <LandingCard title="Get things done" url="/usage/spacy-101" button="Get started">
<p> spaCy is designed to help you do real work to build real products, or gather
spaCy is designed to help you do real work to build real products, or real insights. The library respects your time, and tries to avoid wasting it.
gather real insights. The library respects your time, and tries to avoid It's easy to install, and its API is simple and productive. We like to think of
wasting it. It's easy to install, and its API is simple and productive. We spaCy as the Ruby on Rails of Natural Language Processing.
like to think of spaCy as the Ruby on Rails of Natural Language Processing.
</p>
<LandingButton to="/usage/spacy-101">Get started</LandingButton>
</LandingCard> </LandingCard>
<LandingCard title="Blazing fast"> <LandingCard
<p> title="Blazing fast"
spaCy excels at large-scale information extraction tasks. It's written from url="/usage/facts-figures"
the ground up in carefully memory-managed Cython. Independent research in button="Facts &amp; Figures"
2015 found spaCy to be the fastest in the world. If your application needs >
to process entire web dumps, spaCy is the library you want to be using. spaCy excels at large-scale information extraction tasks. It's written from the
</p> ground up in carefully memory-managed Cython. Independent research in 2015 found
<LandingButton to="/usage/facts-figures">Facts & Figures</LandingButton> spaCy to be the fastest in the world. If your application needs to process
entire web dumps, spaCy is the library you want to be using.
</LandingCard> </LandingCard>
<LandingCard title="Deep learning"> <LandingCard title="Deep learning" url="/usage/training" button="Read more">
<p> spaCy is the best way to prepare text for deep learning. It interoperates
spaCy is the best way to prepare text for deep learning. It interoperates seamlessly with TensorFlow, PyTorch, scikit-learn, Gensim and the rest of
seamlessly with TensorFlow, PyTorch, scikit-learn, Gensim and the rest of Python's awesome AI ecosystem. With spaCy, you can easily construct
Python's awesome AI ecosystem. With spaCy, you can easily construct linguistically sophisticated statistical models for a variety of NLP problems.
linguistically sophisticated statistical models for a variety of NLP
problems.
</p>
<LandingButton to="/usage/training">Read more</LandingButton>
</LandingCard> </LandingCard>
</LandingGrid> </LandingGrid>