Adding a specific layout for Home so other pages are not coupled to the the header / footer / grid used on Home; Make header transparent on Home

website/src/components/Header/Header.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { signOut, useSession } from "next-auth/react";
 import { FaUser, FaSignOutAlt } from "react-icons/fa";
+import clsx from "clsx";
 
 import { Container } from "src/components/Container";
 import { NavLinks } from "./NavLinks";
@@ -53,9 +54,10 @@ function AccountButton() {
   );
 }
 
-export function Header() {
+export function Header(props) {
+  const transparent = props.transparent ?? false;
   return (
-    <header className="bg-white">
+    <header className={`${clsx({'bg-transparent':transparent, 'bg-white':!transparent})}`}>
       <nav>
         <Container className="relative z-10 flex justify-between py-8">
           <div className="relative z-10 flex items-center gap-16">

website/src/pages/index.tsx

@@ -5,6 +5,8 @@ import { CallToAction } from "src/components/CallToAction";
 import { Faq } from "src/components/Faq";
 import { Hero } from "src/components/Hero";
 import { TaskSelection } from "src/components/TaskSelection";
+import { Header } from "src/components/Header";
+import { Footer } from "src/components/Footer";
 
 const Home = () => {
   const { data: session } = useSession();
@@ -34,4 +36,12 @@ 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>
+);
+
 export default Home;