fix: resolving old merge conflicts

src/app/page.tsx

@@ -29,9 +29,9 @@ function Home() {
     <div className="HomePage w-full h-full m-0 flex-col justify-center font-normal">
       <NavBar />
       <WelcomeGraphic />
-      <div className="IntroInfo web:w-full web:h-72 bg-ivory web:bg-mint-cream inline-flex flex-col justify-center items-center">
-        {!isWebDevice && (
-          <p className="b3 w-full px-4 py-10 text-night text-center gap-4">
+      <div className="IntroInfo md:w-full md:h-72 bg-ivory md:bg-mint-cream inline-flex flex-col justify-center items-center">
+        {windowWidth < 768 && (
+          <p className="b3 w-full px-[2rem] mt-10 text-night text-center text-base gap-4">
             The Peninsula Humane Society & SPCA (PHS/SPCA) is a local, private,
             non-profit charitable organization dedicated to animal welfare.
             PHS/SPCA is truly an open admission shelter, not only accepting many
@@ -43,7 +43,7 @@ function Home() {
           className="web:w-auto h-48 rounded-lg bg-mint-cream web:bg-ivory justify-center 
         items-center mt-10 web:mt-0 m-2 inline-flex px-10 py-11 web:px-[4.59rem] py-[2.875rem]"
         >
-          <h3 className="max-w-64 web:w-96 text-scary-forest text-center font-normal italic">
+          <h3 className="w-64 md:w-96 text-scary-forest text-center font-normal italic">
             Peninsula Humane Society & SPCA guided by the humane ethics, builds
             healthy relationships between people and animals.
           </h3>

src/context/WindowWidthContext/WindowWidthContext.tsx

@@ -1,62 +0,0 @@
-'use client';
-
-import React, {
-  createContext,
-  useState,
-  useEffect,
-  useContext,
-  useMemo,
-  useCallback,
-} from 'react';
-
-interface WindowWidthContextProps {
-  isWeb: boolean;
-}
-
-const WindowWidthContext = createContext<WindowWidthContextProps | undefined>(
-  undefined,
-);
-/**
- *
- * @param root0 - Provider that checks window width and calculates if this is a web or mobile screen
- * @param root0.children - Provider will give context to its children components.
- * @returns The WindowWidthProvider component, should be wrapped across the whole project for
- * responsive design, per the Progressive Web Application functionality.
- * This provider is used in the root layout of the project such that we have global access to the window width
- * and can conditionally render accordingly.
- */
-export function WindowWidthProvider({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const [isWeb, setIsWeb] = useState(false);
-  const handleResize = useCallback(() => {
-    setIsWeb(window.innerWidth >= 1024);
-  }, []);
-
-  useEffect(() => {
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [handleResize]);
-
-  const windowWidthValue = useMemo(() => ({ isWeb }), [isWeb]);
-
-  return (
-    <WindowWidthContext.Provider value={windowWidthValue}>
-      {children}
-    </WindowWidthContext.Provider>
-  );
-}
-
-export const useWebDeviceDetection = () => {
-  const context = useContext(WindowWidthContext);
-  if (context === undefined) {
-    throw new Error('useIsWeb must be used within a WindowWidthProvider');
-  }
-
-  return context.isWeb;
-};