HeroSection (presentational component)

src/components/HeroSection/HeroSection.css

@@ -0,0 +1,37 @@
+.section {
+  width: 100%;
+  min-height: calc(100vh - 80px);
+  background-image: url('http://placehold.it/700x300');
+  background-size: cover;
+  background-position: center;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.titleWrapper {
+  text-align: center;
+}
+
+.title {
+  font-size: 2em;
+}
+.subTitle {
+  font-size: 1em;
+}
+
+.ctaWrapper {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  align-items: center;
+  width: 90vw;
+}
+

src/components/HeroSection/HeroSection.js

@@ -0,0 +1,32 @@
+import React, { PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
+import css from './HeroSection.css';
+
+const HeroSection = props => (
+  <section className={css.section}>
+    <div className={css.content}>
+      <div className={css.titleWrapper}>
+        <div className={css.title}>
+          <FormattedMessage id={'HeroSection.title'} defaultMessage={'Book Studiotime anywhere'} />
+        </div>
+        <div className={css.subTitle}>
+          <FormattedMessage
+            id={'HeroSection.subTitle'}
+            defaultMessage={'The largest online community to rent music studios'}
+          />
+        </div>
+      </div>
+      <div className={css.ctaWrapper}>
+        {props.children}
+      </div>
+    </div>
+  </section>
+);
+
+HeroSection.defaultProps = { children: [] };
+
+const { any } = PropTypes;
+
+HeroSection.propTypes = { children: any };
+
+export default HeroSection;

src/components/HeroSection/HeroSection.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { TestProvider } from '../../util/test-helpers';
+import HeroSection from './HeroSection';
+
+describe('HeroSection', () => {
+  it('matches snapshot', () => {
+    const component = renderer.create(
+      (
+        <TestProvider>
+          <HeroSection params={{ displayName: 'most-awesome-shop' }}>
+            test
+          </HeroSection>
+        </TestProvider>
+      ),
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/HeroSection/__snapshots__/HeroSection.test.js.snap

@@ -0,0 +1,27 @@
+exports[`HeroSection matches snapshot 1`] = `
+<section
+  className={undefined}>
+  <div
+    className={undefined}>
+    <div
+      className={undefined}>
+      <div
+        className={undefined}>
+        <span>
+          Book Studiotime anywhere
+        </span>
+      </div>
+      <div
+        className={undefined}>
+        <span>
+          The largest online community to rent music studios
+        </span>
+      </div>
+    </div>
+    <div
+      className={undefined}>
+      test
+    </div>
+  </div>
+</section>
+`;

src/components/index.js

@@ -1,6 +1,7 @@
+import HeroSection from './HeroSection/HeroSection';
 import NamedLink from './NamedLink/NamedLink';
 import PageLayout from './PageLayout/PageLayout';
 import RouterProvider from './RouterProvider/RouterProvider';
 import RoutesProvider from './RoutesProvider/RoutesProvider';
 
-export { NamedLink, PageLayout, RouterProvider, RoutesProvider };
+export { HeroSection, NamedLink, PageLayout, RouterProvider, RoutesProvider };

src/translations/en.json

@@ -1,3 +1,5 @@
 {
-  "landingpage.examplelink": "Show nice studios! (from json)"
+  "landingpage.examplelink": "Show nice studios! (from json)",
+  "HeroSection.title": "Book Studiotime anywhere",
+  "HeroSection.subTitle": "The largest online community to rent music studios"
 }