added ep creadores

src/app/creadores/CreatorCard.tsx

@@ -0,0 +1,26 @@
+import Image from "next/image";
+import "./creadores.css";
+
+interface props{
+    title:string;
+    img:string;
+    width:number;
+    height:number;
+}
+
+export default function CreatorCard({title,img,width,height}:props) {
+    return (
+        <div className="card">
+            <div className="imageWrapper">
+                <Image
+                    src={img}
+                    alt="IO"
+                    width={width}
+                    height={height}
+                    className="creators"
+                />
+            </div>
+            <h1 className="title">{title}</h1>
+        </div>
+    )
+}

src/app/creadores/creadores.css

@@ -0,0 +1,79 @@
+.mainContainer {
+  height: 100%;
+  width: 100%;
+  display: grid;
+  position: relative;
+  place-items: center;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+  align-items: end;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.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;
+    }
+}

src/app/creadores/page.tsx

@@ -0,0 +1,17 @@
+import "./creadores.css";
+import CreatorCard from "./CreatorCard";
+
+export default function Page() {
+    return (
+        <div className="mainContainer">
+            <div className="container">
+                <div className="img"></div>
+
+                <CreatorCard title="IO" img="/IO.png" width={150} height={200} />
+                <CreatorCard title="CarloSpak" img="/SPAK.png" width={160} height={100} />
+
+            </div>
+        </div>
+
+    );
+}