stay_commerce-frontend 0.1.0

data/app/javascript/react/styles/listing.scss

@@ -0,0 +1,94 @@
+.listing {
+    text-align: center;
+    margin: 80px 0;
+  
+    h2 {
+      font-size: 2.5rem;
+      font-weight: bold;
+      margin: 70px 0 20px;
+    }
+  
+    p {
+      color: #64748b;
+      // margin-bottom: 80px;
+    }
+  
+    .room-listings {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      // gap: 20px;
+      max-width: 1200px;
+      margin: 0 auto;
+  
+      .room-card {
+        background-color: white;
+        padding: 15px;
+        text-align: center;
+        position: relative;
+  
+        .room-image-wrapper {
+          position: relative;
+          border-radius: 8px;
+          overflow: hidden;
+  
+          img {
+            width: 100%;
+            height: 270px;
+            object-fit: cover;
+            border-radius: 8px;
+            transition: all 0.5s ease-in-out;
+  
+            &:hover {
+              transform: scale(1.15);
+            }
+          }
+  
+          button {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: #ffd700;
+            color: white;
+            font-weight: bold;
+            padding: 10px 16px;
+            border-radius: 5px;
+            border: none;
+            cursor: pointer;
+            font-size: 14px;
+          }
+        }
+  
+        h3 {
+          font-size: 20px;
+          font-weight: bold;
+          margin: 12px 0;
+        }
+  
+        p {
+          color: #00bfff;
+          font-size: 25px;
+          font-weight: 600;
+  
+          span {
+            font-size: 16px;
+            color: #87ceeb;
+            margin-left: 5px;
+          }
+        }
+      }
+    }
+  }
+  
+
+  @media (max-width: 382px) {
+    .listing {
+      text-align: center;
+      margin: 80px 0;
+    
+      h2 {
+        font-size: 30px;
+        font-weight: bold;
+      }  
+  }
+}

data/app/javascript/react/styles/listingimagegallery.scss

@@ -0,0 +1,57 @@
+.image-gallery-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.9);
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow-y: auto;
+  padding: 2rem;
+}
+
+.image-gallery-content {
+  position: relative;
+  max-width: 1200px;
+  width: 100%;
+}
+
+.close-button {
+  position: absolute;
+  top: 2px;
+  right: -24px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  .close-icon {
+    width: 32px;
+    height: 32px;
+    color: white;
+  }
+}
+
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(300px, 1fr)
+  ); /* slightly larger min */
+  gap: 1.5rem; /* bigger gap for better spacing */
+  width: 100%;
+}
+
+.gallery-image-wrapper {
+  overflow: hidden;
+  border-radius: 10px;
+  background-color: white;
+  width: 100%;
+  height: 100%;
+}
+
+.gallery-image {
+  width: 100%;
+  height: 100%; /* fill the container */
+  object-fit: cover; /* crop nicely */
+  display: block;
+}