Added SingletonContextProvider

src/components/Hero.jsx

@@ -13,7 +13,10 @@ import logoTransistor from "@/images/logos/transistor.svg";
 import logoTuple from "@/images/logos/tuple.svg";
 import clsx from "clsx";
 
+import { useSingletonContext } from '@/pages/SingletonContextProvider';
+
 export const FancyUnderline = ({ className, children, ...props }) => {
+
   return (
     <span className={clsx("relative whitespace-nowrap", className)}>
       <svg
@@ -30,6 +33,9 @@ export const FancyUnderline = ({ className, children, ...props }) => {
 };
 
 export function Hero() {
+
+  // const { state, setState } = useSingletonContext();
+
   return (
     <Container className="pb-16 pt-20 text-center lg:pt-32">
       <h1 className="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">

src/pages/SingletonContextProvider.jsx

@@ -0,0 +1,26 @@
+import { createContext, useState, useContext } from 'react';
+
+// Create a context
+const SingletonContext = createContext();
+
+// Create a provider
+export function SingletonContextProvider({ children }) {
+  const [state, setState] = useState('singleton');
+
+  // make sure state is only created once
+  let contextValue = useContext(SingletonContext);
+  if (!contextValue) {
+    contextValue = { state, setState };
+  }
+
+  return (
+    <SingletonContext.Provider value={contextValue}>
+      {children}
+    </SingletonContext.Provider>
+  );
+}
+
+// Create a hook to use the SingletonContext, this is just to simplify using the context.
+export function useSingletonContext() {
+  return useContext(SingletonContext);
+}

src/pages/index.jsx

@@ -16,6 +16,7 @@ import { Testimonials } from "@/components/Testimonials";
 import { siteMeta } from "@/lib/siteMeta";
 
 import { ChakraProvider } from '@chakra-ui/react'
+import { SingletonContextProvider } from './SingletonContextProvider'
 
 import { Text } from '@chakra-ui/react'
 
@@ -55,13 +56,15 @@ export default function Home() {
       <Header />
       <main>
         <ChakraProvider>
-          <Hero />
-          <PrimaryFeatures />
-          <BlogArea />
-          <CallToAction />
-          {/* <Testimonials /> */}
-          <Pricing />
-          {/* <Faqs /> */}
+          <SingletonContextProvider>
+            <Hero />
+            <PrimaryFeatures />
+            <BlogArea />
+            <CallToAction />
+            {/* <Testimonials /> */}
+            <Pricing />
+            {/* <Faqs /> */}
+          </SingletonContextProvider>
         </ChakraProvider>
       </main>
       <Footer />