Merge pull request #13 from IEEE-ESTl/fixCards-AddAnimation

Fix the broken cards, and Add an animation to improve the design.

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,37 +27,56 @@ 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"}
           grabCursor={true}
           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>

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;
+  }
+}