diff --git a/src/containers/HeroSearchForm/HeroSearchForm.css b/src/containers/HeroSearchForm/HeroSearchForm.css
new file mode 100644
index 00000000..c0f27222
--- /dev/null
+++ b/src/containers/HeroSearchForm/HeroSearchForm.css
@@ -0,0 +1,11 @@
+.locationInput {
+ width: 100%;
+ height: 50px;
+ background-color: white;
+}
+
+.locationButton {
+ width: 100%;
+ height: 50px;
+ margin: 0;
+}
diff --git a/src/containers/HeroSearchForm/HeroSearchForm.example.js b/src/containers/HeroSearchForm/HeroSearchForm.example.js
new file mode 100644
index 00000000..6f763010
--- /dev/null
+++ b/src/containers/HeroSearchForm/HeroSearchForm.example.js
@@ -0,0 +1,11 @@
+/* eslint-disable no-console, import/prefer-default-export */
+import HeroSearchForm from './HeroSearchForm';
+
+export const Empty = {
+ component: HeroSearchForm,
+ props: {
+ onSubmit(values) {
+ console.log('submit search query:', values);
+ },
+ },
+};
diff --git a/src/containers/HeroSearchForm/HeroSearchForm.js b/src/containers/HeroSearchForm/HeroSearchForm.js
new file mode 100644
index 00000000..19972a95
--- /dev/null
+++ b/src/containers/HeroSearchForm/HeroSearchForm.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
+import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+import css from './HeroSearchForm.css';
+
+const HeroSearchForm = props => {
+ const { className, intl, handleSubmit, pristine, submitting } = props;
+ const addClassName = className ? { className } : {};
+ const placeholderMsg = {
+ id: 'HeroSearchForm.placeholder',
+ defaultMessage: 'Location search (soon)',
+ };
+
+ return (
+
+ );
+};
+
+HeroSearchForm.propTypes = { ...formPropTypes, intl: intlShape.isRequired };
+
+export default reduxForm({ form: 'herosearchform' })(injectIntl(HeroSearchForm))
diff --git a/src/containers/HeroSearchForm/HeroSearchForm.test.js b/src/containers/HeroSearchForm/HeroSearchForm.test.js
new file mode 100644
index 00000000..0c4f607d
--- /dev/null
+++ b/src/containers/HeroSearchForm/HeroSearchForm.test.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Provider } from 'react-redux';
+import { injectIntl, IntlProvider } from 'react-intl';
+import configureStore from '../../store';
+import { TestProvider } from '../../util/test-helpers';
+import HeroSearchForm from './HeroSearchForm';
+
+describe('HeroSearchForm', () => {
+ it('matches snapshot', () => {
+ const store = configureStore();
+ const component = renderer.create(
+ (
+
+
+
+ ),
+ );
+ const tree = component.toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+});
diff --git a/src/containers/HeroSearchForm/__snapshots__/HeroSearchForm.test.js.snap b/src/containers/HeroSearchForm/__snapshots__/HeroSearchForm.test.js.snap
new file mode 100644
index 00000000..b6c2ed38
--- /dev/null
+++ b/src/containers/HeroSearchForm/__snapshots__/HeroSearchForm.test.js.snap
@@ -0,0 +1,24 @@
+exports[`HeroSearchForm matches snapshot 1`] = `
+
+`;
diff --git a/src/containers/index.js b/src/containers/index.js
index 451075e1..0942c704 100644
--- a/src/containers/index.js
+++ b/src/containers/index.js
@@ -4,6 +4,7 @@ import ChangePasswordForm from './ChangePasswordForm/ChangePasswordForm';
import CheckoutPage from './CheckoutPage/CheckoutPage';
import ContactDetailsPage from './ContactDetailsPage/ContactDetailsPage';
import EditProfilePage from './EditProfilePage/EditProfilePage';
+import HeroSearchForm from './HeroSearchForm/HeroSearchForm';
import InboxPage from './InboxPage/InboxPage';
import LandingPage from './LandingPage/LandingPage';
import ListingPage from './ListingPage/ListingPage';
@@ -30,6 +31,7 @@ export {
CheckoutPage,
ContactDetailsPage,
EditProfilePage,
+ HeroSearchForm,
InboxPage,
LandingPage,
ListingPage,
diff --git a/src/examples.js b/src/examples.js
index 8881760b..3d6bb477 100644
--- a/src/examples.js
+++ b/src/examples.js
@@ -1,5 +1,6 @@
import * as ChangeAccountPasswordForm from './containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.example';
import * as ChangePasswordForm from './containers/ChangePasswordForm/ChangePasswordForm.example';
+import * as HeroSearchForm from './containers/HeroSearchForm/HeroSearchForm.example';
import * as LoginForm from './containers/LoginForm/LoginForm.example';
import * as PasswordForgottenForm from './containers/PasswordForgottenForm/PasswordForgottenForm.example';
import * as SignUpForm from './containers/SignUpForm/SignUpForm.example';
@@ -7,6 +8,7 @@ import * as SignUpForm from './containers/SignUpForm/SignUpForm.example';
export {
ChangeAccountPasswordForm,
ChangePasswordForm,
+ HeroSearchForm,
LoginForm,
PasswordForgottenForm,
SignUpForm,
diff --git a/src/translations/en.json b/src/translations/en.json
index 8669a5c4..5ce5a195 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1,5 +1,7 @@
{
"landingpage.examplelink": "Show nice studios! (from json)",
+ "HeroSearchForm.placeholder": "Location search (soon)",
+ "HeroSearchForm.search": "Search",
"HeroSection.title": "Book Studiotime anywhere",
"HeroSection.subTitle": "The largest online community to rent music studios"
}