Factoring out the re-used layout

website/src/components/Layout.tsx

@@ -17,4 +17,12 @@ export const getDefaultLayout = (page: React.ReactElement) => (
   </div>
 );
 
+export const getTransparentHeaderLayout = (page: React.ReactElement) => (
+  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
+    <Header transparent={true} />
+    {page}
+    <Footer />
+  </div>
+);
+
 export const noLayout = (page: React.ReactElement) => page;

website/src/pages/index.tsx

@@ -5,6 +5,7 @@ import { Faq } from "src/components/Faq";
 import { Footer } from "src/components/Footer";
 import { Header } from "src/components/Header";
 import { Hero } from "src/components/Hero";
+import { getTransparentHeaderLayout } from "src/components/Layout";
 import { TaskSelection } from "src/components/TaskSelection";
 
 const Home = () => {
@@ -34,12 +35,6 @@ const Home = () => {
   );
 };
 
-Home.getLayout = (page) => (
-  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
-    <Header transparent={true} />
-    {page}
-    <Footer />
-  </div>
-);
+Home.getLayout = getTransparentHeaderLayout;
 
 export default Home;

website/src/pages/privacy-policy.tsx

@@ -2,6 +2,7 @@ import { Container, Heading } from "@chakra-ui/react";
 import Head from "next/head";
 import { Footer } from "src/components/Footer";
 import { Header } from "src/components/Header";
+import { getTransparentHeaderLayout } from "src/components/Layout";
 
 const PrivacyPolicy = () => {
   return (
@@ -403,12 +404,6 @@ const PrivacyPolicy = () => {
   );
 };
 
-PrivacyPolicy.getLayout = (page) => (
-  <div>
-    <Header transparent={true} />
-    {page}
-    <Footer />
-  </div>
-);
+PrivacyPolicy.getLayout = getTransparentHeaderLayout;
 
 export default PrivacyPolicy;

website/src/pages/terms-of-service.tsx

@@ -2,6 +2,7 @@ import { Container, Heading } from "@chakra-ui/react";
 import Head from "next/head";
 import { Footer } from "src/components/Footer";
 import { Header } from "src/components/Header";
+import { getTransparentHeaderLayout } from "src/components/Layout";
 
 const TermsOfService = () => {
   return (
@@ -148,12 +149,6 @@ const TermsOfService = () => {
   );
 };
 
-TermsOfService.getLayout = (page) => (
-  <div>
-    <Header transparent={true} />
-    {page}
-    <Footer />
-  </div>
-);
+TermsOfService.getLayout = getTransparentHeaderLayout;
 
 export default TermsOfService;