From 4a926e2106385b870495eeabba35565c13249a1d Mon Sep 17 00:00:00 2001
From: EricVilleda <ericjared29@gmail.com>
Date: Fri, 22 Mar 2024 10:21:38 -0600
Subject: [PATCH] updateSoon

---
 src/components/Soon.astro       | 98 ---------------------------------
 src/components/Soon.tsx         | 75 +++++++++++++++++++++++++
 src/components/cssSoon/soon.css | 18 ++++++
 src/pages/index.astro           |  6 +-
 4 files changed, 96 insertions(+), 101 deletions(-)
 delete mode 100644 src/components/Soon.astro
 create mode 100644 src/components/Soon.tsx
 create mode 100644 src/components/cssSoon/soon.css

diff --git a/src/components/Soon.astro b/src/components/Soon.astro
deleted file mode 100644
index 1f50126..0000000
--- a/src/components/Soon.astro
+++ /dev/null
@@ -1,98 +0,0 @@
----
-import {Image} from 'astro:assets';
-import cw from '../../public/SoonEvents/cw.jpeg'
-import w1 from '../../public/SoonEvents/weekend1.jpeg'
-import w2 from '../../public/SoonEvents/weekend2.jpeg'
-import w3 from '../../public/SoonEvents/weekend3.jpeg'
-import w4 from '../../public/SoonEvents/weekend4.jpeg'
-import w5 from '../../public/SoonEvents/weekend5.jpeg'
-import w6 from '../../public/SoonEvents/weekend6.jpeg'
-import w7 from '../../public/SoonEvents/weekend7.jpeg'
----
-
-<section class="soon" id="Soon">
-    
-  <swiper-container class="mySwiper" pagination="true" effect="coverflow" grab-cursor="true" centered-slides="true"
-  slides-per-view="auto" coverflow-effect-rotate="50" coverflow-effect-stretch="0" coverflow-effect-depth="100"
-  coverflow-effect-modifier="1" coverflow-effect-slide-shadows="true">
-  <swiper-slide>
-    <Image src={cw} alt="cweekend">
-  </swiper-slide>
-  <swiper-slide>
-    <Image src={w1} alt="weekend1">
-  </swiper-slide>
-  <swiper-slide>
-    <Image src={w2} alt="weekend2">
-  </swiper-slide>
-  <swiper-slide>
-    <Image src={w3} alt="weekend3">
-  </swiper-slide>
-  <swiper-slide>
-    <Image src={w4} alt="weekend4">
-  </swiper-slide>
-  <swiper-slide>
-    <Image src={w5} alt="weekend5">
-  </swiper-slide>
-  <swiper-slide>
-    <Image src={w6} alt="weekend6">
-  </swiper-slide>
-  <swiper-slide>
-    <Image src={w7} alt="weekend7">
-  </swiper-slide>
-</swiper-container>
-<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
-
-</section>
-
-<style>
-
-.bt{
-  display: flex;
-  justify-content: center;
-  gap: 10rem;
-}
-
-.linkss {
-  width: 200px;
-  height: 50px;
-  text-decoration: none;
-  background: #035b98;
-  border: 2px solid #013d68;
-  border-radius: 10px;
-  text-align: center;
-  color: #ffff;
-  padding-top: 10px;
-}
-.linkss:hover {
-  background-color: #013d68;
-}
-
-.soon{
-    width: 100%;
-    height: auto;
-    background-size: cover;
-    padding-top: 3rem;
-}
-
-</style>
-<style>
-  swiper-container {
-    width: 100%;
-    padding-top: 4rem;
-    padding-bottom: 4rem;
-  }
-
-  swiper-slide {
-    background-position: center;
-    background-size: cover;
-    width: 400px;
-    height: auto;
-    margin-bottom: 80px;
-  }
-
-  swiper-slide img {
-    display: block;
-    width: 100%;
-    height: auto;
-  }
-</style>
\ No newline at end of file
diff --git a/src/components/Soon.tsx b/src/components/Soon.tsx
new file mode 100644
index 0000000..17f9e98
--- /dev/null
+++ b/src/components/Soon.tsx
@@ -0,0 +1,75 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/effect-coverflow";
+import "swiper/css/pagination";
+import "./cssSoon/soon.css";
+import { EffectCoverflow, Pagination } from "swiper/modules";
+import cw from "../../public/SoonEvents/cw.jpeg";
+import w1 from "../../public/SoonEvents/weekend1.jpeg";
+import w2 from "../../public/SoonEvents/weekend2.jpeg";
+import w3 from "../../public/SoonEvents/weekend3.jpeg";
+import w4 from "../../public/SoonEvents/weekend4.jpeg";
+import w5 from "../../public/SoonEvents/weekend5.jpeg";
+import w6 from "../../public/SoonEvents/weekend6.jpeg";
+import w7 from "../../public/SoonEvents/weekend7.jpeg";
+
+type Card = {
+  src: string;
+};
+
+const card: Card[] = [
+  {
+    src: cw.src,
+  },
+  {
+    src: w1.src,
+  },
+  {
+    src: w2.src,
+  },
+  {
+    src: w3.src,
+  },
+  {
+    src: w4.src,
+  },
+  {
+    src: w5.src,
+  },
+  {
+    src: w6.src,
+  },
+  {
+    src: w7.src,
+  },
+];
+
+export default function App() {
+  return (
+    <>
+      {" "}
+      <Swiper
+        effect={"coverflow"}
+        grabCursor={true}
+        centeredSlides={true}
+        slidesPerView={"auto"}
+        coverflowEffect={{
+          rotate: 50,
+          stretch: 0,
+          depth: 100,
+          modifier: 1,
+          slideShadows: true,
+        }}
+        pagination={true}
+        modules={[EffectCoverflow, Pagination]}
+        className="mySwiper1"
+      >
+        {card.map((Card, index) => (
+          <SwiperSlide key={index}>
+            <img src={Card.src} />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </>
+  );
+}
diff --git a/src/components/cssSoon/soon.css b/src/components/cssSoon/soon.css
new file mode 100644
index 0000000..417890f
--- /dev/null
+++ b/src/components/cssSoon/soon.css
@@ -0,0 +1,18 @@
+.swiper.mySwiper1 {
+  width: 100%;
+  padding-top: 50px;
+  padding-bottom: 50px;
+  height: 600px;
+}
+
+.swiper.mySwiper1 .swiper-slide {
+  background-position: center;
+  background-size: cover;
+  width: 500px;
+  height: 500px;
+}
+
+.swiper.mySwiper1 .swiper-slide img {
+  display: block;
+  width: 100%;
+}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 21913fe..f311a28 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,7 +2,7 @@
 import Layout from "../layouts/Layout.astro";
 import Events from "@components/Events";
 import Unete from "../components/Unete.astro";
-import Soon from "../components/Soon.astro";
+import Soon from "../components/Soon";
 import "../components/cssInicio/variables.css";
 import "../components/cssInicio/fondo.css";
 import "../components/cssInicio/navInicio.css";
@@ -17,9 +17,9 @@ import Titulos from "../components/Titulos.astro";
   <Titulos titulo="Evéntos" />
   <Events client:load />
   <Titulos titulo="Próximo" />
-  <Soon />
+  <Soon client:load />
   <Titulos titulo="Únete" />
   <Unete />
   <Titulos titulo="FAQ" />
   <Footer />
-</Layout>
+</Layout>
\ No newline at end of file