Add BackgroundDots component to RootPage; update About page image references and layout styles; enhance layout.js with viewport settings; improve styling in various components

Author: EricLuceroGonzalez

app/(redirect)/page.js

@@ -3,21 +3,9 @@
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { MainPageBg, PageContainer, TitlePage } from "../ui/ComponentsStyled";
-import styled from "styled-components";
 import SpinnerLoad from "../components/SpinnerLoad";
+import BackgroundDots from "../components/BgMovingDots";
 
-const Spinner = styled.svg`
-  animation: spin 1s linear infinite;
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-`;
 export default function RootPage() {
   const router = useRouter();
 
@@ -30,6 +18,7 @@ export default function RootPage() {
 
   return (
     <PageContainer>
+      <BackgroundDots numDots={90} />
       <MainPageBg>
         <div
           style={{

app/[locale]/about/page.js

@@ -38,8 +38,7 @@ export default async function About({ params }) {
             >
               <Image
                 src={
-                  "https://res.cloudinary.com/dcvnw6hvt/image/upload/v1765059827/elCronopio/pots-12_h4swi6.jpg"
-                  //   "https://res.cloudinary.com/dcvnw6hvt/image/upload/v1732922346/elCronopio/owsftbzp6mn5iuvkogrl.jpg"
+                  "https://res.cloudinary.com/dcvnw6hvt/image/upload/v1732922346/elCronopio/owsftbzp6mn5iuvkogrl.jpg"
                 }
                 alt={"A portrait photos of Eric Lucero"} // Texto alternativo
                 width={150} // Ancho de la imagen
@@ -48,6 +47,7 @@ export default async function About({ params }) {
                 style={{
                   width: "100%",
                   height: "auto",
+                  zIndex: 1000,
                 }}
               />
             </PhotoAvatar>

app/[locale]/layout.js

@@ -67,6 +67,12 @@ const NaviBar = nextDynamic(() =>
 export function generateStaticParams() {
   return [{ locale: "es" }, { locale: "en" }];
 }
+export const viewport = {
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#0077FF" }, // Blanco o gris claro
+    { media: "(prefers-color-scheme: dark)", color: "#FF3366" }, // Negro o tu gris oscuro
+  ],
+};
 
 export default async function LocaleLayout({ children, params }) {
   // Siempre en primera línea dentro de la función

app/_posts/algoritmo-genetico-sorteo.es.mdx

@@ -69,9 +69,10 @@ const CodeBlock = ({ language, value }) => {
       <Toolbar>
         <LanguageBadge>{language}</LanguageBadge>
         {/* <CopyToClipboard text={value} onCopy={handleCopy}> */}
-        <CopyButton $isCopy={copied}>
+        {/* TODO: Encontrar librería que funcione con Next 19 */}
+        {/* <CopyButton $isCopy={copied}>
           {copied ? <LuCopyCheck /> : <LuCopy />}
-        </CopyButton>
+        </CopyButton> */}
         {/* </CopyToClipboard> */}
       </Toolbar>
       <SyntaxHighlighter

app/components/CodeWrapper.js

@@ -89,7 +89,6 @@ const MdxComponents = {
     const captionSeparation = metastring.match(/caption=(.*)/);
     const caption = captionSeparation ? captionSeparation[1].trim() : null;
     const hasCaption = metastring.toLowerCase().includes("caption=");
-
     return (
       <MdImage>
         <Image
@@ -98,7 +97,7 @@ const MdxComponents = {
           height={0}
           sizes="100vw"
           style={{ width: "100%", height: "auto" }}
-          alt={alt.replace(/ *\{[^)]*\} */g, "")}
+          alt={caption}
           // objectFit="cover"
         />
         {hasCaption && <MdImageCaption>{caption}</MdImageCaption>}

app/components/MdCompos/MDXComponents.js

@@ -11,7 +11,7 @@ const Container = styled.div`
   width: 100%;
   max-width: 1400px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 2rem 1rem;
   /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; */
 `;
 
@@ -93,10 +93,11 @@ const GruposContainer = styled.div`
   display: grid;
   grid-template-columns: 1fr;
   gap: 2rem;
-
+  width: 100%;
   @media (min-width: 768px) {
     grid-template-columns: 1fr 1fr;
   }
+  border: 1px solid red;
 `;
 
 const ItinerarioSection = styled.div`

app/components/MdCompos/SorteoMundial.js

@@ -46,7 +46,7 @@ a {
     /* Citas y Bloques de Código */
     --quote-bg: #FFF3CD; /* Amarillo pálido para fondo de citas */
     --quote-fg: #6C757D; /* Gris oscuro para texto de citas */
-    --code-fg: #00FFE7; /* Rojo suave para palabras reservadas en código */
+    --code-fg: #FF3366; /* Rojo suave para palabras reservadas en código */
     --code-bg: #282C34; /* Fondo para bloques de código */
     /* Bordes */
     --primary-border: #0077FF; /* Azul para bordes */

app/themes/GlobalStyleWrapper.js

@@ -159,6 +159,7 @@ export const MdImageCaption = styled.p`
   margin: 5px 0;
   text-align: justify;
   max-width: 98%;
+  font-size: smaller;
   @media (min-width: 860px) {
     max-width: 80%;
   }

app/ui/MarkDownComponents.js

@@ -33,16 +33,21 @@ export const Article = styled.article`
     width: 70%;
     /* border: 2px dashed red; */
   }
-  @media (min-width: 1080px) {
-    width: 50%;
-  }
   @media (max-width: 728px) {
     min-width: 100%;
     padding: 5px;
     box-shadow: none;
     font-size: small;
     /* border: 2px solid orange; */
   }
+  @media (min-width: 1080px) {
+    width: 60%;
+    border: 2px solid cyan;
+  }
+  @media (min-width: 1380px) {
+    width: 70%;
+    border: 2px solid cyan;
+  }
 `;
 
 export const Title = styled.h1`