added carousel

package.json

@@ -22,6 +22,7 @@
     "framer-motion": "^11.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-responsive-carousel": "^3.2.23",
     "three": "^0.160.0"
   },
   "devDependencies": {

src/App.jsx

@@ -22,7 +22,7 @@ function App() {
     >
       <Music />
       <Header />
-      <MidSection />  
+      <MidSection /> 
       <Reg />
       <Sponsers />
       <Footer />

src/Events/Events.jsx

@@ -8,6 +8,7 @@ const Events = () => {
       justify="center"
       align="center"
       mb="6"
+      mt="6"
       id="events"
       p="1"
       gap="6"

src/MidSection/MidSection.jsx

@@ -8,6 +8,7 @@ import xfinity from "../assets/xfinity-logo.png";
 import { CustomAnimation, LogoAnimation } from "../components/CustomAnimation";
 import { InstagramLogoIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
+import CarouselComponent from "../components/Carousel";
 
 const MidSection = () => {
   const [gdscEvent, setGdscEvent] = useState(false);
@@ -130,6 +131,7 @@ const MidSection = () => {
           </video>
         </CustomAnimation>
       </div>
+      <CarouselComponent />
       <Events />
     </>
   );

src/components/Carousel.jsx

@@ -0,0 +1,24 @@
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+import { Carousel } from "react-responsive-carousel";
+import katvr from "../assets/KATVR.jpeg";
+import pcgaming from "../assets/PCgaming.jpeg";
+import psgaming from "../assets/PSgaming.jpeg";
+import { Flex } from "@radix-ui/themes";
+import "./carousel.css";
+
+const CarouselComponent = () => {
+  return (
+    <Carousel autoPlay infiniteLoop showThumbs={false} showStatus={false}>
+      <div className="cimage">
+        <img src={katvr} />
+      </div>
+      <div className="cimage">
+        <img src={pcgaming} />
+      </div>
+      <div className="cimage">
+        <img src={psgaming} />
+      </div>
+    </Carousel>
+  );
+};
+export default CarouselComponent;

src/components/carousel.css

@@ -0,0 +1,26 @@
+.carousel-root .carousel .slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  max-width: 500px;
+}
+.cimage {
+  width: 90%;
+  height: 90%;
+  max-width: 400px;
+}
+.carousel .carousel-status {
+  bottom: 0;
+  left: 0;
+  right: 30px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  max-width: min-content;
+}
+.control-arrow {
+  color: #fff;
+  margin: 15px;
+  cursor: pointer;
+}

yarn.lock

@@ -1639,7 +1639,7 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-classnames@^2.3.2:
+classnames@^2.2.5, classnames@^2.3.2:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -2765,7 +2765,7 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prop-types@^15.6.0, prop-types@^15.8.1:
+prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -2799,6 +2799,13 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-easy-swipe@^0.0.21:
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz#ce9384d576f7a8529dc2ca377c1bf03920bac8eb"
+  integrity sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -2841,6 +2848,15 @@ react-remove-scroll@2.5.5:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-responsive-carousel@^3.2.23:
+  version "3.2.23"
+  resolved "https://registry.yarnpkg.com/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz#4c0016ff54603e604bb5c1f9e7ef2d1eda133f1d"
+  integrity sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.5.8"
+    react-easy-swipe "^0.0.21"
+
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"