7 files changed, 68 insertions, 5 deletions
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..d92fb72
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,11 @@
+import Copyright from '@components/Copyright/Copyright';
+
+const Footer = () => {
+  return (
+    <footer>
+      <Copyright />
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 0000000..599fdc0
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,11 @@
+import Branding from '@components/Branding/Branding';
+
+const Header = () => {
+  return (
+    <header>
+      <Branding />
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
new file mode 100644
index 0000000..4270a17
--- /dev/null
+++ b/src/components/Layouts/Layout.tsx
@@ -0,0 +1,16 @@
+import { FunctionComponent } from 'react';
+import Footer from '@components/Footer/Footer';
+import Header from '@components/Header/Header';
+import Main from '@components/Main/Main';
+
+const Layout: FunctionComponent = ({ children }) => {
+  return (
+    <>
+      <Header />
+      <Main>{children}</Main>
+      <Footer />
+    </>
+  );
+};
+
+export default Layout;
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
new file mode 100644
index 0000000..3705c83
--- /dev/null
+++ b/src/components/Main/Main.tsx
@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+
+const Main: FunctionComponent = ({ children }) => {
+  return <main>{children}</main>;
+};
+
+export default Main;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 6f08a02..8194b10 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,8 +1,9 @@
+import { AppPropsWithLayout } from '@ts/types/app';
 import '../styles/globals.scss';
-import type { AppProps } from 'next/app';
 
-function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+  const getLayout = Component.getLayout ?? ((page) => page);
+  return getLayout(<Component {...pageProps} />);
 }
 
 export default MyApp;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index da31f7d..6022497 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,9 +1,11 @@
-import type { NextPage } from 'next';
+import Layout from '@components/Layouts/Layout';
+import { NextPageWithLayout } from '@ts/types/app';
 import Head from 'next/head';
 import Image from 'next/image';
+import type { ReactElement } from 'react';
 import styles from '../styles/Home.module.css';
 
-const Home: NextPage = () => {
+const Home: NextPageWithLayout = () => {
   return (
     <div className={styles.container}>
       <Head>
@@ -69,4 +71,8 @@ const Home: NextPage = () => {
   );
 };
 
+Home.getLayout = function getLayout(page: ReactElement) {
+  return <Layout>{page}</Layout>;
+};
+
 export default Home;
diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
new file mode 100644
index 0000000..b663812
--- /dev/null
+++ b/src/ts/types/app.ts
@@ -0,0 +1,11 @@
+import { NextPage } from 'next';
+import { AppProps } from 'next/app';
+import { ReactElement, ReactNode } from 'react';
+
+export type NextPageWithLayout = NextPage & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
+
+export type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};