Add Corousel and Minor Homepage changes

Signed-off-by: Swastik Sharma <swastkk@gmail.com>
istenith · Jul 12, 2023 · 5e8d286 · 5e8d286
1 parent cd65b12
commit 5e8d286
Show file tree

Hide file tree

Showing 10 changed files with 8,863 additions and 8,722 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "react-icons": "^4.9.0",
     "react-markdown": "^8.0.7",
     "react-parallax": "^3.5.1",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.13.0",
     "react-scripts": "5.0.1",
     "remark-gfm": "^3.0.1",

diff --git a/public/home.css b/public/home.css
@@ -103,7 +103,7 @@
   } */
 
 .nith-text {
-  color: #129eeb;
+  color: var(--link-color);
 }
 
 .container {
@@ -465,3 +465,30 @@
     margin-bottom: 20px;
   }
 }
+
+
+/* Coursel CSS */
+.carousel-container {
+  width: 90%;
+  padding: 10px;
+}
+
+.carousel-wrapper {
+  background-color: var(--link-color);
+  border-radius: 10px;
+  padding: 2px;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.carousel-wrapper .carousel .slide {
+  border-radius: 10px;
+}
+
+.carousel-wrapper .carousel .slide img {
+  border-radius: 10px;
+  object-fit: cover;
+}
+
+.carousel .control-dots {
+  display: none; 
+}
diff --git a/public/index.html b/public/index.html
@@ -33,7 +33,7 @@
 https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js
 "></script> -->
 
-    <title>ISTE Website</title>
+    <title>ISTE-NITH</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/navbar.css b/public/navbar.css
@@ -4,7 +4,7 @@
   justify-content: space-between;
   align-items: center;
   height: 12vh;
-  background-color: var(--navbar-background);
+  /* background-color: var(--navbar-background); */
   padding: 0 20px;
   /* box-shadow: 0.2px 0.2px 20px black; */
 }

diff --git a/public/styles.css b/public/styles.css
@@ -43,9 +43,9 @@
 [data-theme="dark"] {
   --body-background: #1e1d1d;
   /* --body-background : #000; */
-  --footer-background: #222;
+  --footer-background: #2A2929;
   --body-darker-background: #555;
-  --navbar-background: #231616;
+  --navbar-background: #2A2929;
   --shadow-primary: #141313;
   --shadow-secondary: #141313;
 

diff --git a/src/components/footer.jsx b/src/components/footer.jsx
@@ -28,8 +28,8 @@ const footer = (currentThemeState) => {
           <div className="sb__footer-links-div box2">
             <p>
               <h4>Visit Us</h4>
-              <p>iste@nith.ac.in</p>
-              <p>marketinghead.iste@gmail.com</p>
+              <a href="mailto: iste@nith.ac.in">iste@nith.ac.in</a> <br />
+              <a href="mailto: teamiste@gmail.com">marketingteam.iste@gmail.com</a>
             </p>
           </div>
 

diff --git a/src/components/homePageComponents/carousel.jsx b/src/components/homePageComponents/carousel.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Carousel } from 'react-responsive-carousel';
+import 'react-responsive-carousel/lib/styles/carousel.min.css';
+
+import hultImage1 from "../../static/images/Hult_Images/Hult_01N.jpg";
+import hultImage2 from "../../static/images/Hult_Images/Hult_04N.jpg";
+import pahalImage1 from "../../static/images/Hult_Images/Hult_01N.jpg";
+import pahalImage2 from "../../static/images/pahal_events.jpg";
+import technexImage from "../../static/images/Technex 05.jpg";
+
+const ImageCarousel = () => {
+  const carouselImages = [
+    hultImage1,
+    hultImage2,
+    pahalImage1,
+    pahalImage2,
+    technexImage
+  ];
+
+
+    return (
+      <div className="carousel-container">
+        <div className="carousel-wrapper">
+          <Carousel
+            showArrows={false}
+            showThumbs={false}
+            showStatus={false}
+            autoPlay={true}
+            interval={3000}
+            infiniteLoop={true}
+          >
+            {carouselImages.map((image, index) => (
+              <div key={index}>
+                <img src={image} alt={`Carousel Image ${index + 1}`} />
+              </div>
+            ))}
+          </Carousel>
+        </div>
+      </div>
+    );
+  };
+
+  export default ImageCarousel;
+
diff --git a/src/components/particlesBackground/introBackground.jsx b/src/components/particlesBackground/introBackground.jsx
@@ -2,9 +2,7 @@ import React, { useEffect, useRef } from "react";
 import "particles.js";
 import LightLogo from "../../static/images/iste-logo-lightblue.png";
 import DarkLogo from "../../static/images/iste-logo-dark.png";
-
-import GraphicAnimation from "../graphicAnimation";
-import animationData from "../../static/svgs/intro-animation-light.json";
+import ImageCarousel from "../homePageComponents/carousel";
 
 const ParticlesComponent = ({ theme }) => {
   const particlesContainerRef = useRef(null);
@@ -140,7 +138,7 @@ const ParticlesComponent = ({ theme }) => {
             <div className="row">
               <div className="left-content">
                 <img
-                  src={theme === "dark" ? DarkLogo : LightLogo}
+                  src={theme === "light" ? LightLogo : DarkLogo }
                   alt=""
                   className="intro-logo"
                 />
@@ -157,7 +155,7 @@ const ParticlesComponent = ({ theme }) => {
                 </div>
               </div>
               <div className="right-content">
-                <GraphicAnimation animationData={animationData} />
+                <ImageCarousel  />
               </div>
             </div>
           </div>