added global context and started example with Banner

client/src/App.tsx

@@ -10,13 +10,15 @@ import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary';
 import GeneralError from './components/ErrorBoundary/GeneralError';
 import NotFound from './components/ErrorBoundary/NotFoundError';
 
+import { MarketingTextProvider } from './providers/MarketingTextProvider';
+
 import { UserProvider } from './providers';
-import { ModalProvider } from './providers/ModalProvider';
+import { ModalProvider } from './providers';
+import { SettingsProvider } from './providers';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 
 import './App.css';
-import { SettingsProvider } from './providers/SettingsProvider';
 
 const queryClient = new QueryClient();
 
@@ -27,33 +29,35 @@ function App(): JSX.Element {
         <QueryClientProvider client={queryClient}>
           <ReactQueryDevtools />
           <ErrorBoundary fallback={GeneralError}>
-            <UserProvider>
-              <SettingsProvider>
-                <ModalProvider>
-                  <BrowserRouter
-                    getUserConfirmation={() => {
-                      // intentionally left empty callback to block the default browser prompt.
-                    }}
-                  >
-                    <Grid
-                      className="App"
-                      display="flex"
-                      flexDirection="column"
-                      height="100vh"
-                      width="100vw"
-                      justifyContent="space-between"
+            <MarketingTextProvider>
+              <UserProvider>
+                <SettingsProvider>
+                  <ModalProvider>
+                    <BrowserRouter
+                      getUserConfirmation={() => {
+                        // intentionally left empty callback to block the default browser prompt.
+                      }}
                     >
-                      <Header />
-                      <ErrorBoundary fallback={NotFound}>
-                        <Main />
-                      </ErrorBoundary>
-                      <Footer />
-                      <Modal />
-                    </Grid>
-                  </BrowserRouter>
-                </ModalProvider>
-              </SettingsProvider>
-            </UserProvider>
+                      <Grid
+                        className="App"
+                        display="flex"
+                        flexDirection="column"
+                        height="100vh"
+                        width="100vw"
+                        justifyContent="space-between"
+                      >
+                        <Header />
+                        <ErrorBoundary fallback={NotFound}>
+                          <Main />
+                        </ErrorBoundary>
+                        <Footer />
+                        <Modal />
+                      </Grid>
+                    </BrowserRouter>
+                  </ModalProvider>
+                </SettingsProvider>
+              </UserProvider>
+            </MarketingTextProvider>
           </ErrorBoundary>
         </QueryClientProvider>
       </ThemeProvider>

client/src/providers/MarketingTextProvider.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, FC, ReactNode, useContext } from 'react';
+
+const marketingText = {
+  banner: {
+    mainHigh: 'Support Local',
+    mainLow: 'Nonprofits',
+    mainSubtext:
+      'Be part of our community of volunteers, nonprofits, and individuals through the Givingful exchange platform.',
+    CTAButton: 'Join Now',
+  },
+
+  signup: {
+    buttonLabel: 'Example1',
+    formFieldLabel: 'Example2',
+  },
+} as const;
+
+const MarketingTextContext = createContext<typeof marketingText>(marketingText);
+
+interface MarketingTextProviderProps {
+  children: ReactNode;
+}
+
+export const MarketingTextProvider: FC<MarketingTextProviderProps> = ({ children }) => {
+  return (
+    <MarketingTextContext.Provider value={marketingText}>{children}</MarketingTextContext.Provider>
+  );
+};
+
+// Custom hook for consuming the context
+export const useMarketingText = () => {
+  return useContext(MarketingTextContext);
+};
+
+export default MarketingTextProvider;

client/src/providers/index.ts

@@ -1,2 +1,4 @@
 export * from './UserProvider';
+export * from './MarketingTextProvider';
+export * from './SettingsProvider';
 export * from './ModalProvider';