Renaissance 2K23 events...

client/.eslintrc

@@ -30,6 +30,7 @@
     "max-depth": ["error", 5], // This rule enforces a maximum depth that blocks can be nested.
     // "multiline-comment-style": ["error", "starred-block"], // This rule enforces a particular style for multiline comments.
     "no-else-return": ["error", { "allowElseIf": false }], // This rule disallows unnecessary blocks following if and else statements.
-    "no-empty": ["error", { "allowEmptyCatch": true }] // This rule disallows empty block statements.
+    "no-empty": ["error", { "allowEmptyCatch": true }], // This rule disallows empty block statements.
+    "prettier/prettier": ["error", { "endOfLine": "auto" }] // To remove errors while reloading the server
   }
 }

client/src/App.css

@@ -1,38 +1,3 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.app {
+  height: 100vh;
 }

client/src/App.js

@@ -1,23 +1,10 @@
-import logo from "./logo.svg";
 import "./App.css";
+import Events from "./components/Events/Events";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code className="underline">src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="app">
+      <Events />
     </div>
   );
 }

client/src/components/Events/Events.css

@@ -0,0 +1,100 @@
+#container-style {
+  height: 100%;
+}
+
+#carousel-boult {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: -7px;
+}
+
+#carousel-boult span {
+  width: 22px;
+  height: 10px;
+  margin-left: 7px;
+  border-radius: 10px;
+}
+
+#carousel-boult span:hover {
+  background-color: rgb(50, 50, 50);
+  cursor: pointer;
+}
+
+#Gallery {
+  -webkit-column-count: 2;
+  -moz-column-count: 2;
+  column-count: 2;
+  -webkit-column-width: 50%;
+  -moz-column-width: 50%;
+  column-width: 50%;
+}
+
+@media screen and (max-width: 640px) {
+  #Gallery {
+    -webkit-column-count: 2;
+    -moz-column-count: 2;
+    column-count: 2;
+    padding-bottom: 15px;
+  }
+  #photo-detail {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0px 10px;
+    margin-top: -13px;
+    padding-bottom: 60px;
+  }
+  #photo-body {
+    text-align: center;
+    margin-top: -15px;
+    padding: 0px 40px;
+  }
+  #photo-title {
+    font-size: 35px;
+    margin-top: -10px;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  #Gallery {
+    -webkit-column-count: 1;
+    -moz-column-count: 1;
+    column-count: 1;
+    -webkit-column-width: 100%;
+    -moz-column-width: 100%;
+    column-width: 100%;
+    padding-bottom: 10px;
+  }
+  #photo-detail {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0px 10px;
+    margin-top: -13px;
+    padding-bottom: 50px;
+  }
+  #photo-body {
+    text-align: center;
+    margin-top: -15px;
+    padding: 0px 15px;
+  }
+  #photo-title {
+    font-size: 25px;
+    margin-top: -15px;
+  }
+  #heading {
+    font-size: 20px;
+  }
+}
+
+#transparent-background {
+  width: 100%;
+  height: 100vh;
+  position: absolute;
+  z-index: 998;
+  top: 0;
+  left: 0;
+}

client/src/components/Events/Events.jsx

@@ -0,0 +1,193 @@
+import { useEffect, useState } from "react";
+import "./Events.css";
+import eventsData from "./eventsDB";
+
+const Events = () => {
+  const [currState, setCurrState] = useState(0);
+  const [index1, setIndex1] = useState(1);
+  const [index2, setIndex2] = useState(2);
+  const [index3, setIndex3] = useState(3);
+  const [index4, setIndex4] = useState(4);
+  const [color, setColor] = useState(0);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (currState === 7) setCurrState(0);
+      else setCurrState(currState + 1);
+      setColor((currState + 1) % 8);
+      // setIndex1((((currState + 1) % 8) + 1) % 8);
+      // setIndex2((index1 + 1) % 8);
+      // setIndex3((index2 + 1) % 8);
+      // setIndex4((index3 + 1) % 8);
+      setIndex1((((currState + 1) % 8) + 1) % 8);
+      setIndex2((((((currState + 1) % 8) + 1) % 8) + 1) % 8);
+      setIndex3((((((((currState + 1) % 8) + 1) % 8) + 1) % 8) + 1) % 8);
+      setIndex4(
+        (((((((((currState + 1) % 8) + 1) % 8) + 1) % 8) + 1) % 8) + 1) % 8
+      );
+    }, 8000);
+    return () => clearTimeout(timer);
+  });
+  const goToNext = (currState) => {
+    setCurrState(currState);
+    setColor(currState);
+    setIndex1((currState + 1) % 8);
+    setIndex2((((currState + 1) % 8) + 1) % 8);
+    setIndex3((((((currState + 1) % 8) + 1) % 8) + 1) % 8);
+    setIndex4((((((((currState + 1) % 8) + 1) % 8) + 1) % 8) + 1) % 8);
+  };
+
+  return (
+    <div className="bg-custom-dark" id="container-style">
+      <div id="description" className="bg-custom-dark sm:pb-6">
+        <div className="bg-custom-dark">
+          <h1
+            id="heading"
+            className="text-gray-300 text-center text-2xl pb-4 font-bold pt-12"
+          >
+            OUR EVENTS
+          </h1>
+        </div>
+        <div className="lg:flex lg:flex-row sm:flex sm:flex-col justify-center items-center xl:mx-44 lg:mx-20 sm:mx-10">
+          <div
+            id="photo-detail"
+            className="pt-10 lg:pl-10 pb-10 lg:w-1/2 sm:flex sm:flex-col sm:justify-center sm:items-center lg:block"
+          >
+            <div className="lg:pr-10">
+              <h1
+                id="photo-title"
+                className="sm:text-4xl lg:text-5xl text-gray-400 font-bold mb-8"
+              >
+                {eventsData[currState].title}
+              </h1>
+            </div>
+            <p
+              id="photo-body"
+              className=" text-gray-300 sm:px-10 md:px-20 lg:px-0 lg:pr-10 sm:text-center lg:text-left"
+            >
+              {eventsData[currState].body}
+            </p>
+            {/* <ArrowRightAltIcon className="ml-1" /> */}
+            <button className="bg-gray-300 mt-10 p-2 pl-3 w-40 text-left rounded-sm font-semibold flex justify-left items-center">
+              READ MORE
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6"
+                className="ml-1 w-7 h-6"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
+                />
+              </svg>
+            </button>
+          </div>
+          <div
+            id="photo-gallery"
+            className="pb-10 sm:pt-5 lg:pt-12 lg:pr-10 sm:px-10 lg:px-0 lg:w-1/2"
+          >
+            <div id="Gallery" className="w-full">
+              <div id="carousel-boult" className="Gallery mb-4">
+                {eventsData.map((events, currState) => (
+                  <span
+                    key={currState}
+                    className={
+                      currState === color ? "bg-gray-900" : "bg-gray-400"
+                    }
+                    onClick={() => goToNext(currState)}
+                  ></span>
+                ))}
+              </div>
+              <div className="relative">
+                <img
+                  className="mb-2"
+                  src={eventsData[currState].urlOne}
+                  alt=""
+                />
+                <div
+                  onClick={() => goToNext(index1)}
+                  className="absolute inset-0 hover:cursor-pointer bg-black bg-opacity-75 hover:bg-gray-900 transition ease-in-out duration-700"
+                >
+                  <div className="flex h-full items-center justify-center">
+                    <div className="text-gray-300 text-lg">
+                      {eventsData[index1].title}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="relative">
+                <img
+                  className="mb-2"
+                  src={eventsData[currState].urlTwo}
+                  alt=""
+                />
+                <div
+                  onClick={() => goToNext(index2)}
+                  className="absolute inset-0 hover:cursor-pointer bg-black bg-opacity-75 hover:bg-gray-900 transition ease-in-out duration-700"
+                >
+                  <div className="flex h-full items-center justify-center">
+                    <div className="text-gray-300 text-lg">
+                      {eventsData[index2].title}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="relative">
+                <img
+                  className="mb-2"
+                  src={eventsData[currState].urlThree}
+                  alt=""
+                />
+                <div
+                  onClick={() => goToNext(index3)}
+                  className="absolute inset-0 hover:cursor-pointer bg-black bg-opacity-75 hover:bg-gray-900 transition ease-in-out duration-700"
+                >
+                  <div className="flex h-full items-center justify-center">
+                    <div className="text-gray-300 text-lg">
+                      {eventsData[index3].title}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="relative">
+                <img
+                  className="mb-2"
+                  src={eventsData[currState].urlFour}
+                  alt=""
+                />
+                <div
+                  onClick={() => goToNext(index4)}
+                  className="absolute inset-0 hover:cursor-pointer bg-black bg-opacity-75 hover:bg-gray-900 transition ease-in-out duration-700"
+                >
+                  <div className="flex h-full items-center justify-center">
+                    <div className="text-gray-300 text-lg">
+                      {eventsData[index4].title}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div id="carousel-boult" className="Gallery mt-4">
+                {eventsData.map((events, currState) => (
+                  <span
+                    key={currState}
+                    className={
+                      currState === color ? "bg-gray-900" : "bg-gray-400"
+                    }
+                    onClick={() => goToNext(currState)}
+                  ></span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Events;