La-DAO · iafhurtado · Feb 28, 2024 · Feb 23, 2024
diff --git a/packages/foundry/package.json b/packages/foundry/package.json
@@ -18,6 +18,7 @@
     "dotenv": "~16.3.1",
     "envfile": "~6.18.0",
     "ethers": "~5.7.1",
+    "next-video": "^0.14.3",
     "prettier": "~2.8.8",
     "qrcode": "~1.5.3",
     "toml": "~3.0.0"

diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -4,7 +4,6 @@ import { hardhat } from "viem/chains";
 import { CurrencyDollarIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { HeartIcon } from "@heroicons/react/24/outline";
 import { SwitchTheme } from "~~/components/SwitchTheme";
-import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
 import { Faucet } from "~~/components/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { useGlobalState } from "~~/services/store/store";
@@ -47,29 +46,28 @@ export const Footer = () => {
         <ul className="menu menu-horizontal w-full">
           <div className="flex justify-center items-center gap-2 text-sm w-full">
             <div className="text-center">
-              <a href="https://github.com/scaffold-eth/se-2" target="_blank" rel="noreferrer" className="link">
-                Fork me
+              <a href="https://github.com/La-DAO/scaffold-xoc" target="_blank" rel="noreferrer" className="link">
+                Clona el codigo
               </a>
             </div>
             <span>·</span>
             <div className="flex justify-center items-center gap-2">
               <p className="m-0 text-center">
-                Built with <HeartIcon className="inline-block h-4 w-4" /> at
+                Construido con <HeartIcon className="inline-block h-4 w-4" /> por
               </p>
               <a
                 className="flex justify-center items-center gap-1"
-                href="https://buidlguidl.com/"
+                href="https://ladao.club/"
                 target="_blank"
                 rel="noreferrer"
               >
-                <BuidlGuidlLogo className="w-3 h-5 pb-1" />
-                <span className="link">BuidlGuidl</span>
+                <span className="link">La DAO</span>
               </a>
             </div>
             <span>·</span>
             <div className="text-center">
-              <a href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA" target="_blank" rel="noreferrer" className="link">
-                Support
+              <a href="https://discord.gg/eYGZJpYdU2" target="_blank" rel="noreferrer" className="link">
+                Soporte
               </a>
             </div>
           </div>

diff --git a/packages/nextjs/components/index/faq.js b/packages/nextjs/components/index/faq.js
@@ -4,10 +4,7 @@ import Container from "./container";
 const FaqItem = ({ question, answer }) => {
   return (
     <div className="mb-5">
-      <details
-        open
-        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"
-      >
+      <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">
         <summary className="outline-none cursor-pointer focus:underline focus:text-inherit font-semibold marker:text-inherit group-open:before:rotate-90  before:origin-center relative before:w-[18px] before:h-[18px] before:transition-transform before:duration-200 before:-left-1 before:top-2/4 before:-translate-y-2/4 before:absolute before:bg-no-repeat before:bg-[length:18px_18px] before:bg-center before:bg-[url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22h-6%20w-6%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%0A%20%20%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M9%205l7%207-7%207%22%20%2F%3E%0A%3C%2Fsvg%3E')]">
           {question}
         </summary>

diff --git a/packages/nextjs/components/index/hero.tsx b/packages/nextjs/components/index/hero.tsx
@@ -3,6 +3,9 @@ import Image from "next/image";
 import heroImg from "../../public/hero-1.png";
 import { houseOfReserveABI, xocolatlABI } from "../xoc-dapp/abis/xocabis";
 import Container from "./container";
+import MXNFetch from "./mxnFetch";
+import ProtocolNumbers from "./protocolNumbers";
+import XOCMinted from "./xocMinted";
 import { parseEther } from "viem";
 import { useAccount } from "wagmi";
 import { useContractRead, useContractWrite } from "wagmi";
@@ -87,14 +90,13 @@ const Hero = () => {
     <>
       <Container className="flex flex-wrap">
         <div className="flex items-center w-full lg:w-1/2">
-          <div className="max-w-2xl mb-8">
+          <div className="max-w-2xl m-8 text-justify">
             <h1 className="text-4xl font-bold leading-snug tracking-tight text-gray-800 lg:text-4xl lg:leading-tight xl:text-6xl xl:leading-tight dark:text-inherit">
-              Welcome to
-              <br />
-              Scaffold-XOC
+              Bienvenidos
+              <br />A Scaffold-XOC
             </h1>
             <p className="py-5 text-xl leading-normal text-gray-500 lg:text-xl xl:text-2xl dark:text-inherit">
-              Este es un proyecto construyido con{" "}
+              Este proyecto open-source es construido con{" "}
               <a
                 href="https://scaffoldeth.io/"
                 target="_blank"
@@ -103,19 +105,20 @@ const Hero = () => {
               >
                 scaffold-eth-2
               </a>{" "}
-              con algunas modificaciones para ayudarte a empezar a construir tu dApp usando XOC como base. Incluye
-              algunos contratos de ejemplo y una interfaz de usuario sencilla con la que interactuar.
+              lo que significa que puedes clonar el codigo y usarlo a tu favor. Incluye algunas funciones conectadas a
+              los contratos de $XOC, incluyendo el ERC-20 y el protocolo para acuñar y quemar el stablecoin y una
+              interfaz de usuario sencilla con la que interactuar.
             </p>
             <p className="py-5 text-xl leading-normal text-gray-500 lg:text-xl  dark:text-inherit">
-              Compra tus primeros 100 $XOC para apoyar a los builders de este proyecto.
+              Compra tus primeros 100 $XOC para apoyar a los desarrolladores de este proyecto.
             </p>
 
             <div className="flex flex-col items-start space-y-3 sm:space-x-4 sm:space-y-0 sm:items-center sm:flex-row">
               <button
                 className="px-8 py-4 text-lg font-medium text-center text-white bg-indigo-600 rounded-md"
                 onClick={() => (document.getElementById("my_modal_1") as HTMLDialogElement)?.showModal()}
               >
-                Buy $XOC
+                Compra $XOC
               </button>
               <dialog id="my_modal_1" className="modal">
                 <div className="modal-box">
@@ -180,8 +183,50 @@ const Hero = () => {
           </div>
         </div>
       </Container>
+      <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
+        <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
+          <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
+            <div className="App">
+              <ProtocolNumbers />
+            </div>
+            <div className="text-xl font-semibold">
+              <p>
+                Fuente:{" "}
+                <span className=" text-fuchsia-300 decoration-fuchsia-400 decoration-8 font-extrabold">
+                  Uniswap V3{" "}
+                </span>
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
+            <MXNFetch />
+            <div className="text-xl font-semibold">
+              <p>
+                Fuente:{" "}
+                <span className=" text-blue-400 decoration-base-300 decoration-8 font-extrabold">ChainLink </span>
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
+            <XOCMinted />
+            <div className="text-xl font-semibold">
+              <p>
+                Fuente:{" "}
+                <a
+                  href="https://polygonscan.com/token/0xa411c9aa00e020e4f88bc19996d29c5b7adb4acf"
+                  target="_blank" // Add this attribute
+                  rel="noopener noreferrer" // Add these attributes for security reasons
+                  className="text-purple-400 decoration-base-300 decoration-8 font-extrabold"
+                >
+                  Polygonscan
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
       <Container>
-        <div className="flex flex-col justify-center">
+        <div className="flex flex-col justify-center mt-24 mb-14">
           <div className="text-xl text-center text-inherit dark:text-inherit">
             <h2>
               Mas de <span className=" text-green-500">1 millon de mexicanos</span> ya usan $XOC en sus empresas

diff --git a/packages/nextjs/components/index/testimonials.js b/packages/nextjs/components/index/testimonials.js
@@ -1,12 +1,11 @@
-import Image from "next/image";
 import React from "react";
-import Container from "./container";
-
+import Image from "next/image";
 import userOneImg from "../../public/user1.jpg";
 import userTwoImg from "../../public/user2.jpg";
 import userThreeImg from "../../public/user3.jpg";
+import Container from "./container";
 
-const Testimonials  = () => {
+const Testimonials = () => {
   return (
     <Container>
       <div className="grid gap-10 lg:grid-cols-2 xl:grid-cols-3">
@@ -33,8 +32,7 @@ const Testimonials  = () => {
         <div className="">
           <div className="flex flex-col justify-between w-full h-full bg-base-300 px-14 rounded-2xl py-14 dark:bg-trueGray-800">
             <p className="text-2xl leading-normal text-inherit dark:text-inherit">
-              This is an <Mark>awesome</Mark> landing page template I&apos;ve seen. I
-              would use this for anything.
+              This is an <Mark>awesome</Mark> landing page template I&apos;ve seen. I would use this for anything.
             </p>
 
             <Avatar image={userThreeImg} name="Gabrielle Winn" title="Co-founder of Acme Inc" />
@@ -43,19 +41,13 @@ const Testimonials  = () => {
       </div>
     </Container>
   );
-}
+};
 
 function Avatar(props) {
   return (
     <div className="flex items-center mt-8 space-x-3">
       <div className="flex-shrink-0 overflow-hidden rounded-full w-14 h-14">
-        <Image
-          src={props.image}
-          width="40"
-          height="40"
-          alt="Avatar"
-          placeholder="blur"
-        />
+        <Image src={props.image} width="40" height="40" alt="Avatar" placeholder="blur" />
       </div>
       <div>
         <div className="text-lg font-medium dark:text-inherit">{props.name}</div>
@@ -76,4 +68,4 @@ function Mark(props) {
   );
 }
 
-export default Testimonials;
+export default Testimonials;
diff --git a/packages/nextjs/components/index/video.js b/packages/nextjs/components/index/video.js
@@ -3,19 +3,22 @@ import Container from "./container";
 
 const Video = () => {
   const [playVideo, setPlayVideo] = useState(false);
+
   return (
     <Container>
-      <div className="w-full max-w-4xl mx-auto overflow-hidden lg:mb-20 rounded-2xl ">
+      <div className="w-full max-w-4xl mx-auto overflow-hidden lg:mb-20 rounded-2xl">
         <div
           onClick={() => setPlayVideo(!playVideo)}
-          className="relative bg-indigo-300 cursor-pointer aspect-w-16 aspect-h-9 bg-gradient-to-tr from-purple-400 to-indigo-700">
+          className="relative bg-indigo-300 cursor-pointer aspect-w-16 aspect-h-9 bg-gradient-to-tr from-purple-400 to-indigo-700"
+        >
           {!playVideo && (
             <button className="absolute inset-auto w-16 h-16 text-white transform -translate-x-1/2 -translate-y-1/2 lg:w-28 lg:h-28 top-1/2 left-1/2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 className="w-16 h-16  lg:w-28 lg:h-28"
                 viewBox="0 0 20 20"
-                fill="currentColor">
+                fill="currentColor"
+              >
                 <path
                   fillRule="evenodd"
                   d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
@@ -27,16 +30,17 @@ const Video = () => {
           )}
           {playVideo && (
             <iframe
-              src="https://www.youtube-nocookie.com/embed/aOq49euWnIo?controls=0&autoplay=1"
+              src="https://www.youtube-nocookie.com/embed/Au5TUkp373c?controls=0&autoplay=1"
               title="YouTube video player"
               frameBorder="0"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowfullscreen></iframe>
+              allowFullScreen
+            ></iframe>
           )}
         </div>
       </div>
     </Container>
   );
-}
+};
 
 export default Video;
diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -6,11 +6,8 @@ import Benefits from "~~/components/index/benefits";
 import Cta from "~~/components/index/cta";
 import Faq from "~~/components/index/faq";
 import Hero from "~~/components/index/hero";
-import MXNFetch from "~~/components/index/mxnFetch";
-import ProtocolNumbers from "~~/components/index/protocolNumbers";
 import SectionTitle from "~~/components/index/sectionTitle";
 import Testimonials from "~~/components/index/testimonials";
-import XOCMinted from "~~/components/index/xocMinted";
 import grow from "~~/public/grow.png";
 
 const Home: NextPage = () => {
@@ -31,48 +28,6 @@ const Home: NextPage = () => {
           />
         </div>
       </div>
-      <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
-        <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
-          <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-            <div className="App">
-              <ProtocolNumbers />
-            </div>
-            <div className="text-xl font-semibold">
-              <p>
-                Fuente:{" "}
-                <span className=" text-fuchsia-300 decoration-fuchsia-400 decoration-8 font-extrabold">
-                  Uniswap V3{" "}
-                </span>
-              </p>
-            </div>
-          </div>
-          <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-            <MXNFetch />
-            <div className="text-xl font-semibold">
-              <p>
-                Fuente:{" "}
-                <span className=" text-blue-400 decoration-base-300 decoration-8 font-extrabold">ChainLink </span>
-              </p>
-            </div>
-          </div>
-          <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-            <XOCMinted />
-            <div className="text-xl font-semibold">
-              <p>
-                Fuente:{" "}
-                <a
-                  href="https://polygonscan.com/token/0xa411c9aa00e020e4f88bc19996d29c5b7adb4acf"
-                  target="_blank" // Add this attribute
-                  rel="noopener noreferrer" // Add these attributes for security reasons
-                  className="text-purple-400 decoration-base-300 decoration-8 font-extrabold"
-                >
-                  Polygonscan
-                </a>
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
       <SectionTitle pretitle="Beneficios de $XOC" title=" Para que empezar usar un peso digital">
         El uso de $XOC es la unica forma de integrarte a la comunidad emergente Web3 que estar creciendo en México y el
         mundo. Aquí te dejamos algunos beneficios de usar $XOC.

diff --git a/packages/nextjs/tsconfig.json b/packages/nextjs/tsconfig.json
@@ -18,6 +18,6 @@
       "~~/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "components/index/benefits.js", "components/index/container.js", "components/index/data.js", "components/index/sectionTitle.js", "components/index/testimonials.jsx", "components/index/hero.js", "components/index/testimonials.js"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "components/index/benefits.js", "components/index/container.js", "components/index/data.js", "components/index/sectionTitle.js", "components/index/testimonials.jsx", "components/index/hero.js", "components/index/testimonials.js", "components/index/video.js"],
   "exclude": ["node_modules"]
 }