Sticky navbar now

daily-thought-frontend/src/components/hero/Hero.tsx

 export default function Hero() {
 
   return (
-    <div className="bg-white">
+    <div className="bg-c-pink">
       <div className="relative isolate px-6 pt-14 lg:px-8">
         <div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
           <div className="text-center">
-            <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
+            <h1 className="text-4xl font-bold tracking-tight text-c-green sm:text-6xl">
               Welcome to Daily
             </h1>
-            <p className="mt-6 text-lg leading-8 text-gray-600">
-              Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
-              fugiat veniam occaecat fugiat aliqua.
+            <p className="mt-6 text-lg leading-8 text-white">
+              Hello there! Welcome to Daily - a social media plaform focussed on finding the answers to sometimes weird, always wonderful yet totally random daily thoughts. 
             </p>
             <div className="mt-10 flex items-center justify-center gap-x-6">
               <a
                 href="#"
-                className="rounded-md bg-pink-400 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-white hover:text-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-400"
+                className="rounded-md bg-c-green px-3.5 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-white hover:text-c-pink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-400"
               >
                 Sign Up
               </a>
-              <a href="#" className="text-sm font-semibold leading-6 text-gray-900">
+              <a href="#" className="text-sm font-semibold leading-6 text-c-green">
                 Log In <span aria-hidden="true">→</span>
               </a>
             </div>

daily-thought-frontend/src/components/navigation/NavBar.tsx

-import { FC, Fragment, PropsWithChildren } from 'react'
+import { FC, Fragment, PropsWithChildren, useEffect, useState } from 'react'
 import { Disclosure, Menu, Transition } from '@headlessui/react'
 import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
 import { User } from '@/types/user'
@@ -30,15 +30,15 @@ type NavBarProps = {
 const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
   children,
   user
-}) =>  {
+}) =>  {  
   return (
     <>
       <div className="min-h-full min-w-full">
-        <Disclosure as="nav" className="bg-c-pink">
+        <Disclosure as="nav" className="bg-c-pink fixed w-full">
           {({ open }) => (
             <>
               <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-                <div className="flex h-16 items-center justify-between">
+                <div className={`flex h-16 items-center justify-between`}>
 
                   {user !== null &&
                     <div className="flex items-center">

daily-thought-frontend/src/pages/feed.tsx

@@ -2,6 +2,7 @@ import NavBar from "@/components/navigation/NavBar";
 import AnswerCard from "@/components/post/AnswerCard";
 import Post from "@/components/post/Post";
 import Question from "@/components/question/Question";
+import { useEffect, useState } from "react";
 
 const user = {
   Name: 'Tom Cook',
@@ -14,16 +15,15 @@ const user = {
 const Feed = () => {
 
 
-
     
     return(
       <>
         <div className="w-full">
           <NavBar user={user} />
         </div>
-        <div className="flex w-full bg-c-pink flex-col items-center py-3">
+        <div className="flex w-full bg-c-pink flex-col items-center py-3 pt-10">
           <div className="flex-1 max-w-4xl flex items-center flex-col justify-center">
-            <div className="p-8">
+            <div className={`p-8 bg-c-pink`}>
               <h1 className="text-4xl font-bold tracking-tight text-c-green text-center">This is my question of the day</h1>
             </div>
             <p className="text-c-green">Most recent answer</p>

daily-thought-frontend/src/pages/index.tsx

@@ -24,7 +24,7 @@ export default function Home() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main>
+      <main className='min-h-screen bg-c-pink'>
         <NavBar user={null}>
           {user && 
             <Hero />

daily-thought-frontend/src/pages/userPost.tsx

@@ -18,7 +18,7 @@ const UserPost = () => {
     <div className="w-full">
       <NavBar user={user} />
     </div>
-    <div className="flex w-full bg-c-pink flex-col items-center py-3">
+    <div className="flex w-full bg-c-pink flex-col items-center py-3 pt-10">
       <div className="flex-1 max-w-4xl flex items-center flex-col justify-center">
         <div className="p-8">
           <h1 className="text-4xl font-bold tracking-tight text-c-green text-center">This is my question of the day</h1>