Merge pull request #96 from MichiganDataScienceTeam/redesign-community-image

Redesign community image

Author: Weile-Zheng

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>
   );
 }

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"
   }
 ]

pages/index.jsx

@@ -141,6 +141,7 @@ export default function Home({
     </Layout>
   );
 }
+
 function ProjectCard({ json, basePath }) {
   return (
     <Link
@@ -228,8 +229,7 @@ function Carousel({ projects, basePath }) {
   }
   return (
     <div className="bg-grey">
-      <Wave180 className="rotate-180"></Wave180>
-      <div className="container mx-auto py-4 relative overflow-hidden">
+      <div className="container mx-auto mt-16 mb-16 py-4 p-4 relative overflow-hidden">
         <h2 className="text-3xl text-center font-bold">Recent Projects</h2>
         <div
           className="flex gap-4 flex-row p-4 justify-center transition"
@@ -264,7 +264,6 @@ function Carousel({ projects, basePath }) {
           <Icon className="" name="arrow-right" />
         </button>
       </div>
-      <Wave></Wave>
     </div>
   );
 }

styles/globals.css

@@ -22,8 +22,8 @@
 .gradient-text {
   background: linear-gradient(
     90deg,
-    #896ae4,
-    #feb47b
+    #c0abfe,
+    #90f7df
   ); /* Adjust the gradient colors as needed */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -48,6 +48,9 @@
   }
 }
 
+.project-card-home {
+  background: linear-gradient(90deg, #c0abfe, #90f7df);
+}
 .markdown h1 {
   @apply text-4xl;
   @apply mb-4;
@@ -206,6 +209,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, #896ae4, #34c5a2); /* 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;
@@ -220,6 +253,11 @@ html {
   scroll-behavior: smooth;
 }
 
+footer {
+  border-top: 0.5px solid;
+  border-top-color: #cabbf6;
+  background-color: rgb(21, 21, 21);
+}
 /* Scroll to top when button is clicked */
 .scroll-up-button:target {
   scroll-behavior: auto;