From aebe52efa7908941c1e1702eb2a75b947cc4fdff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Thu, 17 Nov 2022 16:32:42 +0100
Subject: [PATCH] Fix improper component nesting

Next doesn't allow block elements inside a `<p>`
---
 website/src/components/landing.js |  2 +-
 website/src/widgets/landing.js    | 94 +++++++++++++++++--------------
 2 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/website/src/components/landing.js b/website/src/components/landing.js
index c811ff5b3..084587b74 100644
--- a/website/src/components/landing.js
+++ b/website/src/components/landing.js
@@ -130,7 +130,7 @@ export const LandingBanner = ({
                     </Heading>
                 )}
                 <div className={textClassNames}>
-                    <p>{children}</p>
+                    {children}
 
                     {button && (
                         <LandingBannerButton to={to} small={small}>
diff --git a/website/src/widgets/landing.js b/website/src/widgets/landing.js
index 22476d20b..4091faf30 100644
--- a/website/src/widgets/landing.js
+++ b/website/src/widgets/landing.js
@@ -111,15 +111,17 @@ const Landing = () => {
                     color="#1e1935"
                     small
                 >
-                    <Link to="https://explosion.ai/custom-solutions" hidden>
-                        <img src={tailoredPipelinesImage.src} alt="spaCy Tailored Pipelines" />
-                    </Link>
-                    <strong>
-                        Get a custom spaCy pipeline, tailor-made for your NLP problem by
-                        spaCy&apos;s core developers.
-                    </strong>
-                    <br />
-                    <br />
+                    <p>
+                        <Link to="https://explosion.ai/custom-solutions" hidden>
+                            <img src={tailoredPipelinesImage.src} alt="spaCy Tailored Pipelines" />
+                        </Link>
+                    </p>
+                    <p>
+                        <strong>
+                            Get a custom spaCy pipeline, tailor-made for your NLP problem by
+                            spaCy&apos;s core developers.
+                        </strong>
+                    </p>
                     <Ul>
                         <Li emoji="🔥">
                             <strong>Streamlined.</strong> Nobody knows spaCy better than we do. Send
@@ -155,20 +157,22 @@ const Landing = () => {
                     color="#000"
                     small
                 >
-                    <Link to="https://prodi.gy" hidden>
-                        {/** Update image */}
-                        <img
-                            src={prodigyImage.src}
-                            alt="Prodigy: Radically efficient machine teaching"
-                        />
-                    </Link>
-                    <br />
-                    <br />
-                    Prodigy is an <strong>annotation tool</strong> so efficient that data scientists
-                    can do the annotation themselves, enabling a new level of rapid iteration.
-                    Whether you&apos;re working on entity recognition, intent detection or image
-                    classification, Prodigy can help you <strong>train and evaluate</strong> your
-                    models faster.
+                    <p>
+                        <Link to="https://prodi.gy" hidden>
+                            {/** Update image */}
+                            <img
+                                src={prodigyImage.src}
+                                alt="Prodigy: Radically efficient machine teaching"
+                            />
+                        </Link>
+                    </p>
+                    <p>
+                        Prodigy is an <strong>annotation tool</strong> so efficient that data
+                        scientists can do the annotation themselves, enabling a new level of rapid
+                        iteration. Whether you&apos;re working on entity recognition, intent
+                        detection or image classification, Prodigy can help you{' '}
+                        <strong>train and evaluate</strong> your models faster.
+                    </p>
                 </LandingBanner>
             </LandingBannerGrid>
 
@@ -236,13 +240,15 @@ const Landing = () => {
                     button="See what's new"
                     small
                 >
-                    spaCy v3.0 features all new <strong>transformer-based pipelines</strong> that
-                    bring spaCy&apos;s accuracy right up to the current{' '}
-                    <strong>state-of-the-art</strong>. You can use any pretrained transformer to
-                    train your own pipelines, and even share one transformer between multiple
-                    components with <strong>multi-task learning</strong>. Training is now fully
-                    configurable and extensible, and you can define your own custom models using{' '}
-                    <strong>PyTorch</strong>, <strong>TensorFlow</strong> and other frameworks.
+                    <p>
+                        spaCy v3.0 features all new <strong>transformer-based pipelines</strong>{' '}
+                        that bring spaCy&apos;s accuracy right up to the current{' '}
+                        <strong>state-of-the-art</strong>. You can use any pretrained transformer to
+                        train your own pipelines, and even share one transformer between multiple
+                        components with <strong>multi-task learning</strong>. Training is now fully
+                        configurable and extensible, and you can define your own custom models using{' '}
+                        <strong>PyTorch</strong>, <strong>TensorFlow</strong> and other frameworks.
+                    </p>
                 </LandingBanner>
                 <LandingBanner
                     to="https://course.spacy.io"
@@ -251,19 +257,21 @@ const Landing = () => {
                     color="#252a33"
                     small
                 >
-                    <Link to="https://course.spacy.io" hidden>
-                        <img
-                            src={courseImage.src}
-                            alt="Advanced NLP with spaCy: A free online course"
-                        />
-                    </Link>
-                    <br />
-                    <br />
-                    In this <strong>free and interactive online course</strong> you’ll learn how to
-                    use spaCy to build advanced natural language understanding systems, using both
-                    rule-based and machine learning approaches. It includes{' '}
-                    <strong>55 exercises</strong> featuring videos, slide decks, multiple-choice
-                    questions and interactive coding practice in the browser.
+                    <p>
+                        <Link to="https://course.spacy.io" hidden>
+                            <img
+                                src={courseImage.src}
+                                alt="Advanced NLP with spaCy: A free online course"
+                            />
+                        </Link>
+                    </p>
+                    <p>
+                        In this <strong>free and interactive online course</strong> you’ll learn how
+                        to use spaCy to build advanced natural language understanding systems, using
+                        both rule-based and machine learning approaches. It includes{' '}
+                        <strong>55 exercises</strong> featuring videos, slide decks, multiple-choice
+                        questions and interactive coding practice in the browser.
+                    </p>
                 </LandingBanner>
             </LandingBannerGrid>