From 8d3d4d26b2508a7d52e863e29b146f7b50b15094 Mon Sep 17 00:00:00 2001
From: Erick Devv <111036821+ErickDevv@users.noreply.github.com>
Date: Sun, 17 Mar 2024 22:41:26 -0600
Subject: [PATCH] Fix the broken cards, and Add an animation to improve the
 design

---
 src/components/Events.css           |  63 -------------
 src/components/Events.tsx           |  53 +++++++----
 src/components/cssEvents/Events.css | 131 ++++++++++++++++++++++++++++
 3 files changed, 169 insertions(+), 78 deletions(-)
 delete mode 100644 src/components/Events.css
 create mode 100644 src/components/cssEvents/Events.css

diff --git a/src/components/Events.css b/src/components/Events.css
deleted file mode 100644
index af5dac9..0000000
--- a/src/components/Events.css
+++ /dev/null
@@ -1,63 +0,0 @@
-*
-{
-  font-family: "Cousine", monospace;
-}
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 50px;
-  gap: 70px;  
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-}
-
-.events {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;  
-}
-
-.events h2 {
-  text-transform: uppercase;
-  font-size: 35px;
-  color: #035b98;
-}
-
-.events .gray {
-  color: #868686;
-  font-size: 30px;
-}
-
-img {
-  width: 100%;
-}
-
-.swiper {
-  width: 340px;
-  height: 420px;
-  padding: 0% !important;
-  margin: 0% !important;
-}
-
-.swiper-slide {
-  display: flex !important;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-radius: 18px;
-  color: #fff;
-}
-
-.swiper-slide h1 {
-  font-size: 22px;
-}
-
-.swiper-slide p {
-  font-size: 18px;
-}
-
-.swiper-slide {
-  background-color: #00629b;
-}
diff --git a/src/components/Events.tsx b/src/components/Events.tsx
index 440d955..21fcc3d 100644
--- a/src/components/Events.tsx
+++ b/src/components/Events.tsx
@@ -1,19 +1,23 @@
-// import Swiper core and required modules
 import { EffectCards } from "swiper/modules";
 
 import Git from "../../public/Events/Git.jpeg";
 import WelcomeBack from "../../public/Events/WelcomeBack.jpeg";
 
-type Image = {
+type Card = {
   src: string;
   name: string;
   description?: string;
 };
 
-const images: Image[] = [
+const card: Card[] = [
   {
     src: Git.src,
-    name: "Git desde Cero",
+    name: "IEEE - ESTl Student Workshops",
+    description: "Taller: Git desde Cero",
+  },
+  {
+    src: WelcomeBack.src,
+    name: "Welcome Back",
     description: "",
   },
   {
@@ -23,25 +27,44 @@ const images: Image[] = [
   },
 ];
 
-import "./Events.css";
+import "./cssEvents/Events.css";
 
 import { Swiper, SwiperSlide } from "swiper/react";
 
-// Import Swiper styles
 import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
 import "swiper/css/scrollbar";
 
+const buildStyle = ({ animation }: { animation?: string }) => {
+  let style = { "--animation": animation } as React.CSSProperties;
+
+  return style;
+};
+
 export default function App() {
   return (
     <>
       <div className="container" id="Eventos">
-        <div className="events">
-          <h2 className="gray">Conferecias</h2>
-          <h2>Tallereres</h2>
-          <h2 className="gray">Competencias</h2>
-        </div>
+        <h2 className="events">
+          <span className="span-events" data-content="Conferecias">
+            Conferecias
+          </span>
+          <span
+            className="span-events"
+            data-content="Talleres"
+            style={buildStyle({ animation: "a2" })}
+          >
+            Talleres
+          </span>
+          <span
+            className="span-events"
+            data-content="Hackathon"
+            style={buildStyle({ animation: "a3" })}
+          >
+            Hackathon
+          </span>
+        </h2>
 
         <Swiper
           effect={"cards"}
@@ -49,11 +72,11 @@ export default function App() {
           modules={[EffectCards]}
           className="mySwiper"
         >
-          {images.map((image, index) => (
+          {card.map((Card, index) => (
             <SwiperSlide key={index}>
-              <h1>{image.name}</h1>
-              <p>{image.description}</p>
-              <img src={image.src} alt={image.name} />
+              <h1 className="eventName">{Card.name}</h1>
+              <p className="eventDescription">{Card.description}</p>
+              <img src={Card.src} alt={Card.name} />
             </SwiperSlide>
           ))}
         </Swiper>
diff --git a/src/components/cssEvents/Events.css b/src/components/cssEvents/Events.css
new file mode 100644
index 0000000..3106ef7
--- /dev/null
+++ b/src/components/cssEvents/Events.css
@@ -0,0 +1,131 @@
+* {
+  font-family: "Cousine", monospace;
+}
+
+.eventName {
+  text-align: center;
+  font-size: 2rem;
+  margin: 0 0 16px;
+}
+
+.eventDescription {
+  text-align: center;
+  font-size: 1.5rem;
+  margin: 0 0 16px;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 50px;
+  gap: 70px;
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+img {
+  width: 100%;
+}
+
+.swiper {
+  width: 340px;
+  height: 420px;
+  padding: 0% !important;
+  margin: 0% !important;
+}
+
+.swiper-slide {
+  display: flex !important;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 18px;
+  color: #fff;
+}
+
+.swiper-slide h1 {
+  font-size: 22px;
+}
+
+.swiper-slide p {
+  font-size: 18px;
+}
+
+.swiper-slide {
+  background-color: #00629b;
+}
+
+.events {
+  text-align: center;
+  font-size: 2rem;
+  margin: 0 0 16px;
+}
+
+.span-events {
+  color: rgb(75, 75, 75);
+  font-size: 2.8rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  display: block;
+  position: relative;
+}
+
+.span-events::before {
+  animation-name: var(--animation, a);
+  animation-duration: 8s;
+  animation-iteration-count: infinite;
+
+  content: attr(data-content);
+  background: #00629b;
+  position: absolute;
+  inset: 0;
+
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  opacity: 1;
+}
+
+@keyframes a {
+  0%,
+  16.667%,
+  100% {
+    opacity: 1;
+  }
+
+  33.333%,
+  83.333% {
+    opacity: 0;
+  }
+}
+
+@keyframes a2 {
+  0%,
+  100% {
+    opacity: 0;
+  }
+
+  33.333%,
+  50% {
+    opacity: 1;
+  }
+
+  16.667%,
+  66.667% {
+    opacity: 0;
+  }
+}
+
+@keyframes a3 {
+  0%,
+  50%,
+  100% {
+    opacity: 0;
+  }
+
+  66.667%,
+  83.333% {
+    opacity: 1;
+  }
+}