Fixed main page image carousel

Author: Ethjin8

components/Carousel.js

@@ -1,14 +1,15 @@
-import Image from 'next/legacy/image';
+// import Image from 'next/legacy/image';
 import { useState, useEffect } from 'react';
 
-// width of each img in px
+// width of each frame in px
 // needs to be updated if style.scss changes
-const IMAGE_WIDTH = 360;
+const FRAME_WIDTH = 450;
+// const FRAME_HEIGHT = 240;
 const ITEMS_PER_SECTION = 4;
 
 const Carousel = ({ images }) => {
   const [sections, setSections] = useState([]);
-  const sectionWidth = (IMAGE_WIDTH * ITEMS_PER_SECTION) / 2;
+  const sectionWidth = (FRAME_WIDTH * ITEMS_PER_SECTION) / 2;
 
   useEffect(() => {
     const numItems = images.length;
@@ -19,15 +20,17 @@ const Carousel = ({ images }) => {
         left: (i / ITEMS_PER_SECTION) * sectionWidth,
         width: sectionWidth,
         items: images.slice(i, i + ITEMS_PER_SECTION).map((item, index) => (
-          <a
-            href={item}
-            target="_blank"
-            rel="noreferrer noopener"
-            key={index}
-            tabIndex="-1"
-          >
-            <Image src={item} width={IMAGE_WIDTH} height={IMAGE_WIDTH} alt="" />
-          </a>
+          <div className="image-frame" key={index}>
+            <a
+              href={item}
+              target="_blank"
+              rel="noreferrer noopener"
+              tabIndex="-1"
+              className="image-link"
+            >
+              <img src={item} alt="" className="framed-image" />
+            </a>
+          </div>
         )),
       });
     }

styles/components/Carousel.scss

@@ -2,34 +2,80 @@
 
 #carousel {
   background: #FAFAFA;
-  height: 480px;
+  height: 660px;
   min-width: 100%;
   overflow: hidden;
   position: relative;
 
   #carousel-inner {
-    width: 1600px;
+    height: 100%;
   }
 
   .carousel-sect {
     background: linear-gradient(rgba(variables.$acm-black, 0.8), rgba(variables.$acm-black, 1));
     position: absolute;
     top: 0;
     width: 1600px;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
 
-    div {
-      background-size: cover;
-      display: inline-block;
-      height: 240px;
+    .image-frame {
+      width: 450px;
+      height: 330px;
       margin: 0;
-      opacity: 0.9;
-      padding: 0;
+      padding: 4px;
+      background: #ffffff;
+      border: 1px solid #d0d0d0;
+      box-shadow: 
+        0 2px 8px rgba(0, 0, 0, 0.1),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.8);
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
       transition: 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98);
-      vertical-align: top;
-      width: 360px;
+
+      // Photo frame texture effect
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
 
       &:hover {
-        opacity: 0.6;
+        transform: translateY(-4px);
+        box-shadow: 
+          0 6px 16px rgba(0, 0, 0, 0.15),
+          inset 0 0 0 1px rgba(255, 255, 255, 0.9);
+      }
+
+      .image-link {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+
+        .framed-image {
+          max-width: 100%;
+          max-height: 100%;
+          width: auto;
+          height: auto;
+          object-fit: contain;
+          display: block;
+          transition: 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98);
+        }
+      }
+
+      &:hover .framed-image {
+        transform: scale(1.05);
       }
     }
   }