call to action button

app/src/App.tsx

@@ -1,23 +1,22 @@
 import { Switch, Route } from 'wouter';
 import { routes } from '@/pages';
+import { PopupProvider } from './pages/Home/components/PopUpContext';
 
 const App = () => {
   return (
-    <div style={{ height: '100vh' }}>
-      <Switch>
-        {
-          routes.map((route, i) => {
-            return (
-              <Route
-                key={i}
-                path={route.href}
-                component={route.component as any}
-              />
-            )
-          })
-        }
-      </Switch>
-    </div>
+    <PopupProvider>
+      <div style={{ height: '100vh' }}>
+        <Switch>
+          {routes.map((route, i) => (
+            <Route
+              key={i}
+              path={route.href}
+              component={route.component as any}
+            />
+          ))}
+        </Switch>
+      </div>
+    </PopupProvider>
   );
 };
 

app/src/pages/Home/components/Header.tsx

@@ -8,8 +8,10 @@ import { useMetagalleryStore } from '@/providers/MetagalleryProvider';
 import { useTranslation, Trans } from 'react-i18next';
 import { Grab } from 'lucide-react';
 import ThemeSwitcher from '@/components/DarkerMode/themeSwitcher';
+import { usePopupContext } from './PopUpContext';
 
 export const Header = () => {
+  const { isRegisterPopupOpen, closeRegisterPopup } = usePopupContext();
   const { t } = useTranslation();
   const [loginPopup, setLoginPopup] = useState(false);
   const [registerPopup, setRegisterPopup] = useState(false);
@@ -159,7 +161,7 @@ export const Header = () => {
           {t('call_to_action')}
         </Button>
 
-        <Popup trigger={registerPopup} setTrigger={resetRegisterFlow}>
+        <Popup trigger={isRegisterPopupOpen} setTrigger={closeRegisterPopup}>
           {registerStep === 1 ? (
             <>
               <h3 className={popupStyles.title}>Registro de usuario</h3>

app/src/pages/Home/components/PopUpContext.tsx

@@ -0,0 +1,30 @@
+import { createContext, useContext, useState, ReactNode } from 'react';
+
+interface PopupContextProps {
+  isRegisterPopupOpen: boolean;
+  openRegisterPopup: () => void;
+  closeRegisterPopup: () => void;
+}
+
+const PopupContext = createContext<PopupContextProps | undefined>(undefined);
+
+export const PopupProvider = ({ children }: { children: ReactNode }) => {
+  const [isRegisterPopupOpen, setIsRegisterPopupOpen] = useState(false);
+
+  const openRegisterPopup = () => setIsRegisterPopupOpen(true);
+  const closeRegisterPopup = () => setIsRegisterPopupOpen(false);
+
+  return (
+    <PopupContext.Provider value={{ isRegisterPopupOpen, openRegisterPopup, closeRegisterPopup }}>
+      {children}
+    </PopupContext.Provider>
+  );
+};
+
+export const usePopupContext = () => {
+  const context = useContext(PopupContext);
+  if (!context) {
+    throw new Error('usePopupContext must be used within a PopupProvider');
+  }
+  return context;
+};

app/src/pages/Home/components/PricingCard.tsx

@@ -1,4 +1,5 @@
 import Button from './Button';
+import { usePopupContext } from './PopUpContext';
 import styles from './PricingCard.module.css';
 import { useTranslation, Trans } from 'react-i18next';
 
@@ -9,7 +10,9 @@ interface PricingCardProps {
 }
 
 const PricingCard = ({ title, price, features }: PricingCardProps) => {
+  const { openRegisterPopup } = usePopupContext();
   const { t } = useTranslation();
+
   return (
     <div className={styles.card}>
       <h3 className={styles.title}>{title}</h3>
@@ -19,7 +22,7 @@ const PricingCard = ({ title, price, features }: PricingCardProps) => {
           <li key={index} className={styles.feature}>{feature}</li>
         ))}
       </ul>
-      <Button variant="primary" className={styles.button}>
+      <Button variant="primary" className={styles.button} onClick={openRegisterPopup}>
         {t('call_to_action')}
       </Button>
     </div>