Added top-hat promo to promote the upcoming IDE webinar

Author: David Haeffner

website/pages/en/index.js

@@ -34,6 +34,15 @@ const PromoSection = props => (
   </div>
 )
 
+const PromoHeader = props => (
+  <div className="promo">
+    {props.text} Details available{' '}
+    <a href={props.link} target="_blank" rel="noopener noreferrer">
+      HERE
+    </a>
+  </div>
+)
+
 class HomeSplash extends React.Component {
   render() {
     const { siteConfig } = this.props
@@ -272,19 +281,28 @@ class Index extends React.Component {
     }
 
     return (
-      <div>
-        <HomeSplash siteConfig={siteConfig} language={language} />
-        <div className="home mainContainer">
-          <Features />
-          <FeatureCallout />
-          <ResilientTests />
-          <TestCaseReuse />
-          <ControlFlow />
-          <Plugins />
-          <TryOut />
-          <Showcase />
+      <React.Fragment>
+        {siteConfig.promoText &&
+          siteConfig.promoLink && (
+            <PromoHeader
+              text={siteConfig.promoText}
+              link={siteConfig.promoLink}
+            />
+          )}
+        <div>
+          <HomeSplash siteConfig={siteConfig} language={language} />
+          <div className="home mainContainer">
+            <Features />
+            <FeatureCallout />
+            <ResilientTests />
+            <TestCaseReuse />
+            <ControlFlow />
+            <Plugins />
+            <TryOut />
+            <Showcase />
+          </div>
         </div>
-      </div>
+      </React.Fragment>
     )
   }
 }

website/siteConfig.js

@@ -111,6 +111,8 @@ const siteConfig = {
     firefox: `https://addons.mozilla.org/en-GB/firefox/addon/selenium-ide/`,
     github: `https://github.com/SeleniumHQ/selenium-ide/releases/latest`,
   },
+  promoText: `[Webinar] The new Selenium IDE is HERE! Learn how it can turbo-charge your testing efforts.`,
+  promoLink: 'https://goo.gl/9q8xn3',
 }
 
 module.exports = siteConfig

website/static/css/custom.css

@@ -34,3 +34,11 @@ img.logo {
 .promoSection .promoRow .pluginRowBlock .pluginWrapper.buttonWrapper {
   padding: 3px 2px;
 }
+
+.promo {
+  height: 50px;
+  line-height: 50px;
+  background-color: pink;
+  color: black;
+  text-align: center;
+}