redesign-community-image

MichiganDataScienceTeam · Sep 15, 2024 · 0988614 · 0988614
1 parent 2845fb9
commit 0988614
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 11 deletions.
diff --git a/components/communityImages.jsx b/components/communityImages.jsx
@@ -1,4 +1,3 @@
-import Image from "next/image";
 import { useState } from "react";
 
 export default function CommunityImages({ images, basePath }) {
@@ -15,18 +14,21 @@ export default function CommunityImages({ images, basePath }) {
   };
 
   return (
-    <div className="items-center mx-auto max-w-6xl">
-      <div className="relative">
+    <div className="items-center mx-auto">
+      <div className="relative community-image-container">
         <button
           onClick={prevImage}
-          className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-500 text-white p-2 rounded"
+          className="absolute left-12 top-1/2 transform -translate-y-1/2 bg-gray-500 text-white p-2 rounded"
         >
           ❮
         </button>
+        <h1 className="community-image-headline gradient-text">
+          {images[currentIndex].name}
+        </h1>
         <div
           style={{
             margin: "auto",
-            width: "85%",
+            width: "70%",
             aspectRatio: 16 / 9,
           }}
         >
@@ -46,12 +48,11 @@ export default function CommunityImages({ images, basePath }) {
         </div>
         <button
           onClick={nextImage}
-          className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-500 text-white p-2 rounded"
+          className="absolute right-12 top-1/2 transform -translate-y-1/2 bg-gray-500 text-white p-2 rounded"
         >
           ❯
         </button>
       </div>
-      <p className="text-base mt-2">{images[currentIndex].name}</p>
     </div>
   );
 }
diff --git a/config/communityImages.json b/config/communityImages.json
@@ -1,18 +1,18 @@
 [
   {
-    "name": "",
+    "name": "Winter 2024 Project Expo",
     "image": "WN24_EXPO.JPG"
   },
   {
-    "name": "",
+    "name": "Winter 2024 Data Science Night",
     "image": "WN24_DSN.JPG"
   },
   {
-    "name": "",
+    "name": "Fall 2024 Mass Meeting 1",
     "image": "mass_meeting1.JPG"
   },
   {
-    "name": "",
+    "name": "Fall 2024 Mass Meeting 2",
     "image": "mass_meeting2.JPG"
   }
 ]
diff --git a/styles/globals.css b/styles/globals.css
@@ -206,6 +206,36 @@
   font-weight: bold;
 }
 
+.community-image-headline {
+  font-size: 2rem;
+  text-align: center;
+}
+
+.community-image-container {
+  background-color: rgb(21, 21, 21);
+  margin-bottom: 7%;
+  padding-top: 3%;
+  padding-bottom: 10%;
+  width: 100%;
+}
+.community-image-container::before,
+.community-image-container::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: linear-gradient(to right, #4f3168, #feb47b); /* Gradient colors */
+}
+
+.community-image-container::before {
+  top: 0; /* Position at the top */
+}
+
+.community-image-container::after {
+  bottom: 0; /* Position at the bottom */
+}
+
 /* Hover effect */
 .scroll-up-button:hover {
   background-color: #896ae4;