From 5753b43e60a50e411fb1c92540dbb137e74f333f Mon Sep 17 00:00:00 2001
From: Ines Montani <ines@ines.io>
Date: Mon, 20 Apr 2020 20:33:13 +0200
Subject: [PATCH] Tidy up and fix alignment of landing cards (#5317)

---
 website/src/components/landing.js      | 13 ++++++--
 website/src/styles/landing.module.sass |  5 +++
 website/src/widgets/landing.js         | 44 +++++++++++---------------
 3 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/website/src/components/landing.js b/website/src/components/landing.js
index 16c342e3f..fb03d2845 100644
--- a/website/src/components/landing.js
+++ b/website/src/components/landing.js
@@ -46,10 +46,17 @@ export const LandingGrid = ({ cols = 3, blocks = false, children }) => (
 
 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}>
-        {title && <H3>{title}</H3>}
-        {children}
+        <section className={classes.cardText}>
+            {title && <H3>{title}</H3>}
+            <p>{children}</p>
+        </section>
+        {button && url && (
+            <footer>
+                <LandingButton to={url}>{button}</LandingButton>
+            </footer>
+        )}
     </div>
 )
 
diff --git a/website/src/styles/landing.module.sass b/website/src/styles/landing.module.sass
index fab07ce9b..c29c0fffb 100644
--- a/website/src/styles/landing.module.sass
+++ b/website/src/styles/landing.module.sass
@@ -49,12 +49,17 @@
     margin-bottom: -25rem
 
 .card
+    display: flex
+    flex-direction: column
     padding: 3rem 2.5rem
     background: var(--color-back)
     border-radius: var(--border-radius)
     box-shadow: var(--box-shadow)
     margin-bottom: 3rem
 
+.card-text
+    flex: 100%
+
 .button
     width: 100%
 
diff --git a/website/src/widgets/landing.js b/website/src/widgets/landing.js
index 77d32a6ad..c96905733 100644
--- a/website/src/widgets/landing.js
+++ b/website/src/widgets/landing.js
@@ -79,34 +79,28 @@ const Landing = ({ data }) => {
                 <LandingSubtitle>in Python</LandingSubtitle>
             </LandingHeader>
             <LandingGrid blocks>
-                <LandingCard title="Get things done">
-                    <p>
-                        spaCy is designed to help you do real work — to build real products, or
-                        gather real insights. The library respects your time, and tries to avoid
-                        wasting it. It's easy to install, and its API is simple and productive. We
-                        like to think of spaCy as the Ruby on Rails of Natural Language Processing.
-                    </p>
-                    <LandingButton to="/usage/spacy-101">Get started</LandingButton>
+                <LandingCard title="Get things done" url="/usage/spacy-101" button="Get started">
+                    spaCy is designed to help you do real work — to build real products, or gather
+                    real insights. The library respects your time, and tries to avoid wasting it.
+                    It's easy to install, and its API is simple and productive. We like to think of
+                    spaCy as the Ruby on Rails of Natural Language Processing.
                 </LandingCard>
-                <LandingCard title="Blazing fast">
-                    <p>
-                        spaCy excels at large-scale information extraction tasks. It's written from
-                        the ground up in carefully memory-managed Cython. Independent research in
-                        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.
-                    </p>
-                    <LandingButton to="/usage/facts-figures">Facts & Figures</LandingButton>
+                <LandingCard
+                    title="Blazing fast"
+                    url="/usage/facts-figures"
+                    button="Facts &amp; Figures"
+                >
+                    spaCy excels at large-scale information extraction tasks. It's written from the
+                    ground up in carefully memory-managed Cython. Independent research in 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.
                 </LandingCard>
 
-                <LandingCard title="Deep learning">
-                    <p>
-                        spaCy is the best way to prepare text for deep learning. It interoperates
-                        seamlessly with TensorFlow, PyTorch, scikit-learn, Gensim and the rest of
-                        Python's awesome AI ecosystem. With spaCy, you can easily construct
-                        linguistically sophisticated statistical models for a variety of NLP
-                        problems.
-                    </p>
-                    <LandingButton to="/usage/training">Read more</LandingButton>
+                <LandingCard title="Deep learning" url="/usage/training" button="Read more">
+                    spaCy is the best way to prepare text for deep learning. It interoperates
+                    seamlessly with TensorFlow, PyTorch, scikit-learn, Gensim and the rest of
+                    Python's awesome AI ecosystem. With spaCy, you can easily construct
+                    linguistically sophisticated statistical models for a variety of NLP problems.
                 </LandingCard>
             </LandingGrid>