diff --git a/components/Common/Button/button-outline.jsx b/components/Common/Button/button-outline.jsx
new file mode 100644
index 00000000..14852e5f
--- /dev/null
+++ b/components/Common/Button/button-outline.jsx
@@ -0,0 +1,14 @@
+import Button from '../Button';
+
+const OutlineButton = ({ className, ...props }) => {
+ return (
+
+ );
+};
+
+OutlineButton.propTypes = Button.propTypes;
+
+export default OutlineButton;
diff --git a/components/Common/Button/button-primary.jsx b/components/Common/Button/button-primary.jsx
new file mode 100644
index 00000000..26e741c2
--- /dev/null
+++ b/components/Common/Button/button-primary.jsx
@@ -0,0 +1,14 @@
+import Button from '../Button';
+
+const PrimaryButton = ({ className, ...props }) => {
+ return (
+
+ );
+};
+
+PrimaryButton.propTypes = Button.propTypes;
+
+export default PrimaryButton;
diff --git a/components/Common/PageHero/index.jsx b/components/Common/PageHero/index.jsx
new file mode 100644
index 00000000..1cda1060
--- /dev/null
+++ b/components/Common/PageHero/index.jsx
@@ -0,0 +1,91 @@
+import PropTypes from 'prop-types';
+import { useCallback } from 'react';
+import * as analytics from '../../../lib/analytics';
+import OutlineButton from '../../Common/Button/button-outline';
+import PrimaryButton from '../../Common/Button/button-primary';
+
+const PageHero = ({
+ title,
+ subTitle,
+ subText,
+ mainButton,
+ secondaryButton,
+ imageNode,
+}) => {
+ const handleMainClick = useCallback(() => {
+ analytics.event({
+ action: mainButton.eventName,
+ params: mainButton.eventParams,
+ });
+ }, [mainButton.eventName, mainButton.eventParams]);
+
+ const handleSecondaryClick = useCallback(() => {
+ analytics.event({
+ action: secondaryButton.eventName,
+ params: secondaryButton.eventParams,
+ });
+ }, [secondaryButton.eventName, secondaryButton.eventParams]);
+ return (
+ <>
+
+
+
+
+ {title}
+
+
+ {subTitle}
+
+
+ {subText}
+
+
+
+
+
+