Fix/modal

packages/nextjs/components/Footer.tsx

@@ -47,13 +47,13 @@ export const Footer = () => {
           <div className="flex justify-center items-center gap-2 text-sm w-full">
             <div className="text-center">
               <a href="https://github.com/La-DAO/scaffold-xoc" target="_blank" rel="noreferrer" className="link">
-                Clona el codigo
+                Clone this project
               </a>
             </div>
             <span>·</span>
             <div className="flex justify-center items-center gap-2">
               <p className="m-0 text-center">
-                Construido con <HeartIcon className="inline-block h-4 w-4" /> por
+                Built with <HeartIcon className="inline-block h-4 w-4" /> by
               </p>
               <a
                 className="flex justify-center items-center gap-1"
@@ -67,7 +67,7 @@ export const Footer = () => {
             <span>·</span>
             <div className="text-center">
               <a href="https://discord.gg/eYGZJpYdU2" target="_blank" rel="noreferrer" className="link">
-                Soporte
+                Technical Support
               </a>
             </div>
           </div>

packages/nextjs/components/index/container.js → packages/nextjs/components/index/container.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 
-const Container = props => {
+type ContainerProps = {
+  className?: string;
+  children: React.ReactNode;
+};
+
+const Container = (props: ContainerProps) => {
   return (
     <div className={`container p-8 mx-auto xl:px-0 ${props.className ? props.className : ""}`}>{props.children}</div>
   );

packages/nextjs/components/index/cta.js

@@ -1,11 +1,12 @@
-import React, { useState } from "react";
-import Image from "next/image";
+import React, { useState, useEffect } from "react";
 import { xocolatlABI } from "../xoc-dapp/abis/xocabis";
 import { xocPinABI } from "./abis/xocpin";
-import Container from "./container";
-import { parseEther } from "viem";
-import { useContractWrite } from "wagmi";
+import { parseEther, formatEther } from "viem";
+import { useContractRead, useContractWrite } from "wagmi";
 import { useAccount } from "wagmi";
+import Familia  from "../../public/Familia.png";
+import Image from "next/image";
+
 
 const Cta = () => {
   const [showCard, setShowCard] = useState(false);
@@ -33,21 +34,40 @@ const Cta = () => {
     args: [account.address],
   });
 
+  const { data: tokenID} = useContractRead({
+    address: "0x72fa57b14b83D165EACab4E2bB3B3B9D5B9C5A52",
+    abi: xocPinABI,
+    functionName: "nextTokenId",
+    watch: true,
+  });
+
+  const [latestTokenID, setLatestTokenID] = useState(null);
+
+  useEffect(() => {
+    if (tokenID) {
+      const ID = tokenID.toString() -1;
+      setLatestTokenID(ID);
+    }
+  }, [tokenID]);
+
+
+  console.log(tokenID);
+
   return (
-    <Container>
+    <div className="flex items-center justify-center">
       <div className="flex flex-wrap items-center justify-between w-full max-w-4xl gap-5 mx-auto text-white bg-indigo-600 px-7 py-7 lg:px-12 lg:py-12 lg:flex-nowrap rounded-xl">
         <div className="flex-grow text-center lg:text-left">
-          <h2 className="text-2xl font-medium lg:text-3xl">Listo para unirte a la aventura?</h2>
+          <h2 className="text-2xl font-medium lg:text-3xl">Ready to join the movement?</h2>
           <p className="mt-2 font-medium text-white text-opacity-90 lg:text-xl">
-            No dejes pasar la oportunidad de aportar!
+            Don&apos;t let your chance pass you by!
           </p>
         </div>
         <div className="flex-shrink-0 w-full text-center lg:w-auto">
           <button
             onClick={handleButtonClick}
             className="inline-block py-3 mx-auto text-lg font-medium text-center text-indigo-600 bg-white rounded-md px-7 lg:px-10 lg:py-5"
           >
-            Mintea tu NFT de membresía
+            Mint a membership NFT
           </button>
         </div>
       </div>
@@ -66,10 +86,10 @@ const Cta = () => {
               </svg>
             </button>
           </div>
+          <div className="mx-auto flex justify-center">
+            <Image src={Familia} alt="Familia" height={500} width={500} className="" />
+          </div>
           <div className="card bg-base-100 shadow-xl">
-            <figure>
-              <Image src="https://daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.jpg" alt="Album" />
-            </figure>
             <div className="card-body">
               <div className="stats stats-vertical lg:stats-horizontal shadow mb-5">
                 <div className="stat">
@@ -79,8 +99,8 @@ const Cta = () => {
                 </div>
                 <div className="stat">
                   <div className="stat-title">NFTs Minted</div>
-                  <div className="stat-value">4,200</div>
-                  <div className="stat-desc">↗︎ 400 (22%)</div>
+                  <div className="stat-value">{latestTokenID}</div>
+                  <div className="stat-desc">So Far</div>
                 </div>
               </div>
               <div className="card-actions justify-center">
@@ -97,7 +117,7 @@ const Cta = () => {
           </div>
         </div>
       )}
-    </Container>
+    </div>
   );
 };
 

packages/nextjs/components/index/data.js

@@ -10,46 +10,46 @@ import {
 } from "@heroicons/react/24/solid";
 
 const benefitOne = {
-  title: "El primer peso MXN decentralizado",
-  desc: "$XOC es la encarnación digital del peso mexicano gracias a los contratos inteligentes. Sin intermediarios, esto significa que está libre de control gubernamental o bancario. Así, los usuarios pueden realizar transacciones de manera rápida y segura, sin importar su ubicación.",
+  title: "The First Decentralized MXN Peso",
+  desc: "$XOC is the digital embodiment of the Mexican peso thanks to smart contracts. Without intermediaries, this means it's free from government or banking control. Thus, users can conduct transactions quickly and securely, regardless of their location.",
   image: benefitOneImg,
   bullets: [
     {
-      title: "Tu moneda, en código en la red:",
-      desc: "Es la evolución natural del dinero digital.",
+      title: "Your currency, encoded on the network:",
+      desc: "It'S the natural evolution of digital money.",
       icon: <FaceSmileIcon />,
     },
     {
-      title: "Transacciones ágiles y seguras:",
-      desc: "Con presencia en las redes de Polygon, Gnosis Chain y Optimism, $XOC garantiza rapidez y seguridad en cada transacción.",
+      title: "Agile and secure transactions:",
+      desc: "With a presence on Polygon, Gnosis Chain, and Optimism networks, $XOC ensures speed and security in every transaction.",
       icon: <ChartBarSquareIcon />,
     },
     {
-      title: "Sin intermediarios:",
-      desc: "Libre de la influencia gubernamental o bancaria, $XOC te ofrece autonomía y libertad financiera.",
+      title: "No intermediaries:",
+      desc: "Free from government or banking influence, $XOC offers you autonomy and financial freedom.",
       icon: <CursorArrowRaysIcon />,
     },
   ],
 };
 
 const benefitTwo = {
-  title: "Desarrollado por La DAO",
-  desc: "En el corazón de Scaffold-XOC late el espíritu de una comunidad dedicada a forjar un sistema financiero abierto y descentralizado. La DAO representa una organización autónoma descentralizada que lidera el camino en la construcción de soluciones innovadoras en DeFi.",
+  title: "Developed by La DAO",
+  desc: "At the heart of Scaffold-XOC lies the spirit of a community dedicated to forging an open and decentralized financial system. La DAO represents a decentralized autonomous organization that leads the way in building innovative DeFi solutions.",
   image: benefitTwoImg,
   bullets: [
     {
-      title: "Construyendo con herramientas Web3:",
-      desc: "Nuestro arsenal está compuesto por las mejores herramientas de Web3, desde OpenZeppelin hasta Scaffold-Eth-2, pasando por DAOHaus y Safe, entre muchas otras. Cada una de estas herramientas es una pieza clave en la construcción de un futuro financiero más inclusivo y accesible.",
+      title: "Building with Web3 tools:",
+      desc: "Our arsenal is composed of the best Web3 tools, from OpenZeppelin to Scaffold-Eth-2, passing through DAOHaus and Safe, among many others. Each of these tools is a key piece in building a more inclusive and accessible financial future.",
       icon: <DevicePhoneMobileIcon />,
     },
     {
-      title: "Una nueva era de democracia financiera:",
-      desc: "Cada línea de código, cada reunión, cada decisión está orientada hacia la creación de un sistema financiero más equitativo y transparente. Nos comprometemos a impulsar una revolución financiera que brinde oportunidades para todos, sin importar su origen o situación económica.",
+      title: "A new era of financial democracy:",
+      desc: "Every line of code, every meeting, every decision is oriented towards creating a fairer and more transparent financial system. We are committed to driving a financial revolution that provides opportunities for everyone, regardless of their background or economic situation.",
       icon: <AdjustmentsHorizontalIcon />,
     },
     {
-      title: "Encuentra un mentor, o sé el mentor que siempre quisiste tener:",
-      desc: "En La DAO, valoramos el crecimiento personal y profesional. Estamos aquí para guiar y apoyar a aquellos que desean contribuir y aprender. ¡Únete a nosotros y sé parte de esta emocionante jornada hacia un futuro financiero más brillante y equitativo!",
+      title: "Find a mentor, or be the mentor you always wanted to have:",
+      desc: "At La DAO, we value personal and professional growth. We are here to guide and support those who wish to contribute and learn. Join us and be part of this exciting journey towards a brighter and more equitable financial future!",
       icon: <SunIcon />,
     },
   ],

packages/nextjs/components/index/faq.js → packages/nextjs/components/index/faq.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Container from "./container";
 
-const FaqItem = ({ question, answer }) => {
+const FaqItem = ({ question, answer }: { question: string; answer: string }) => {
   return (
     <div className="mb-5">
       <details className="w-96 bg-base-100 p-4 rounded-xl shadow-md group mx-auto overflow-hidden max-h-[56px] open:!max-h-[400px] transition-[max-height] duration-500">
@@ -31,24 +31,24 @@ const Faq = () => {
 
 const faqdata = [
   {
-    question: "Como se respalda el valor de cada $XOC?",
+    question: "How is the value of each $XOC backed?",
     answer:
-      "Cada $XOC está respaldado por un token ERC20 en las redes de Polygon, Gnosis Chain y Optimism. Este respaldo garantiza que cada $XOC pueda ser liquidado por su valor equivalente en deuda en $XOC y saldar la cuenta en el proceso, todo respaldado por la red de validadores.",
+      "Each $XOC is backed by an ERC20 token on the Polygon, Gnosis Chain, and Optimism networks. This backing ensures that each $XOC can be liquidated for its equivalent value in $XOC-denominated debt and settle the account in the process, all backed by the network of validators.",
   },
   {
-    question: "Que puedo hacer con $XOC?",
+    question: "What can I do with $XOC?",
     answer:
-      "Puedes utilizar $XOC para pagar deudas, adquirir bienes y servicios, o simplemente mantenerlo como reserva de valor, al igual que cualquier otro peso mexicano. Además, puedes apoyar a la comunidad de La DAO construyendo el próximo sistema financiero abierto y descentralizado.",
+      "You can use $XOC to pay off debts, acquire goods and services, or simply hold it as a store of value, much like any other Mexican peso. Additionally, you can support the La DAO community by building the next open and decentralized financial system.",
   },
   {
-    question: "Quien mantiene todo esto? ",
+    question: "Who maintains all this?",
     answer:
-      "Utilizamos un modelo de negocio basado en una DAO, actualmente conocida como 'La DAO'. Esta organización autónoma descentralizada se encarga de gestionar todo el trabajo necesario para construir en DeFi.",
+      "We utilize a business model based on a DAO, currently known as 'La DAO.' This decentralized autonomous organization is responsible for managing all the work needed to build in DeFi.",
   },
   {
-    question: "Como me involucro? ",
+    question: "How can I get involved?",
     answer:
-      "Puedes adquirir $XOC en cualquier exchange que lo ofrezca, o participar en la DAO y contribuir a la construcción del futuro de las finanzas descentralizadas. Si tienes habilidades que crees que puedan ser útiles, no dudes en contactarnos.",
+      "You can acquire $XOC on any exchange that offers it, or participate in the DAO and contribute to building the future of decentralized finance. If you have skills you think may be useful, feel free to reach out to us.",
   },
 ];