added new view

app/Components/layout/ToastProvider.tsx

@@ -19,7 +19,7 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
             duration: 6000,
             style: {
               fontSize: "1.5rem",
-              backgroundColor: "#fee2e2dd",
+              backgroundColor: "#ffefefdd",
               color: "#000000ff",
               fontWeight: "600",
               padding: "1.5rem",
@@ -30,7 +30,7 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
             duration: 6000,
             style: {
               fontSize: "1.5rem",
-              backgroundColor: "#d1fae5dd",
+              backgroundColor: "#ecfef5dd",
               color: "#000000ff",
               fontWeight: "600",
               padding: "1.5rem",

app/creadores/creadores.css

@@ -0,0 +1,61 @@
+.imageWrapper {
+    position: relative;
+    animation: slideIn 1s ease-out forwards;
+    transform: translateX(-120px) rotate(12deg);
+    opacity: 0;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    animation: slideIn 1s ease-out forwards;
+    opacity: 0;
+}
+
+.card:hover .creators {
+    transform: rotateY(360deg) rotate(12deg) scale(1.05);
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
+}
+
+.creators {
+    object-fit: cover;
+    border-radius: 16px;
+    background-color: rgba(255, 255, 255, 0.6);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
+    transition: transform 1s ease, box-shadow 0.4s ease;
+}
+
+.imageWrapper:hover .creators {
+    transform: rotateY(180deg) rotate(24deg) scale(1.05);
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
+
+}
+
+@keyframes slideIn {
+    to {
+        transform: translateX(0) rotate(12deg);
+        opacity: 1;
+    }
+}
+
+.title {
+    margin-left: 40px;
+    font-size: 3rem;
+    font-weight: 600;
+    opacity: 0;
+    animation: fadeIn 1s ease forwards;
+    animation-delay: 0.5s;
+    color: #1E3A8A;
+}
+
+.card:hover .title {
+    transform: translateY(-5px);
+      color: #163172;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
+}

app/creadores/page.tsx

@@ -0,0 +1,39 @@
+import Image from "next/image";
+import "./creadores.css";
+
+export default function Page() {
+    return (
+        <div className="mainContainer">
+            <div className="container" style={{ display: "flex", justifyContent: "center", gap: "4rem" }}>
+                <div className="img"></div>
+
+                <div className="card">
+                    <div className="imageWrapper">
+                        <Image
+                            src="/IO.png"
+                            alt="IO"
+                            width={160}
+                            height={200}
+                            className="creators"
+                        />
+                    </div>
+                    <h1 className="title">IO</h1>
+                </div>
+
+                <div className="card">
+                    <div className="imageWrapper">
+                        <Image
+                            src="/SPAK.png"
+                            alt="Carlos Pak"
+                            width={160}
+                            height={100}
+                            className="creators"
+                        />
+                    </div>
+                    <h1 className="title">Carlos Pak</h1>
+                </div>
+            </div>
+        </div>
+
+    );
+}

app/layout.tsx

@@ -4,8 +4,8 @@ import { Inter } from "next/font/google";
 import Header from "./Components/layout/Header/Header";
 import Footer from "./Components/layout/Footer/Footer";
 
-import "./globals.css";
 import { ToastProvider } from "./Components/layout/ToastProvider";
+import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"], weight: ["400", "700"] });
 

middleware.ts

@@ -26,7 +26,7 @@ export const config = {
     "/Programas",
     "/Mensajes",
     "/Inscritos",
-    "/Inscripciones",
+    "/Inscripcion",
     "/InformacionEquipo",
     "/Impresiones",
     "/CambiarPass",