From 09886141e4c293a3b833c8dd7b6febdc6c9bad77 Mon Sep 17 00:00:00 2001
From: Weile <weilez@umich.edu>
Date: Sun, 15 Sep 2024 17:11:20 -0400
Subject: [PATCH] redesign-community-image

---
 components/communityImages.jsx | 15 ++++++++-------
 config/communityImages.json    |  8 ++++----
 styles/globals.css             | 30 ++++++++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/components/communityImages.jsx b/components/communityImages.jsx
index 7cb0f2c..00165fc 100644
--- 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
index d652446..d361aae 100644
--- 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
index cd5abf2..4c2b3c7 100644
--- 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;