stay_commerce-frontend 0.1.0

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

@@ -0,0 +1,302 @@
+// HotelCarousel.scss
+
+// Reset and base styles
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    
+  }
+  
+  .hotel-carousel-container {
+    width: 100%;
+    margin:  auto;
+    padding: 0 15px;
+    padding-bottom:2.5rem;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    border-radius: 0.75rem;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    margin-top:4rem;
+  }
+  
+  .section-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    color: #333;
+    padding-top:2rem;
+    
+  }
+  
+  // Hotel Card Styles
+  .hotel-card {
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    margin: 10px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    cursor: pointer;
+    height: 380px;
+    display: flex;
+    flex-direction: column;
+  
+    &:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+    }
+  
+    .card-image {
+      height: 180px;
+      width: 100%;
+      overflow: hidden;
+      
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 0.3s ease;
+      }
+  
+      &:hover img {
+        transform: scale(1.05);
+      }
+    }
+  
+    .card-content {
+      padding: 15px;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+  
+    .hotel-type {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+      font-size: 14px;
+      color: #555;
+  
+      .star {
+        color: #ffc107;
+        margin-left: 5px;
+        font-size: 16px;
+      }
+    }
+  
+    .hotel-name {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 8px;
+      color: #333;
+      line-height: 1.3;
+      flex-grow: 1;
+    }
+  
+    .hotel-rating {
+      font-size: 14px;
+      color: #0071c2;
+      margin-bottom: 8px;
+      font-weight: 500;
+    }
+  
+    .hotel-distance {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 15px;
+      display: flex;
+      align-items: center;
+  
+      .location-icon {
+        margin-right: 5px;
+        color: #555;
+      }
+    }
+  
+    .price-section {
+      margin-top: auto;
+      
+      .starting-from {
+        font-size: 12px;
+        color: #777;
+        margin-bottom: 2px;
+      }
+      
+      .price {
+        font-size: 18px;
+        font-weight: 700;
+        color: #333;
+      }
+    }
+  }
+  
+  // Custom Slick Carousel Styles
+  .carousel-wrapper {
+    position: relative;
+    margin: 0 auto 30px;
+    
+    // Fix for slick-list (the container for slides)
+    .slick-list {
+      overflow: hidden;
+      margin: 0 -10px;
+    }
+
+    .slick-track {
+      display: flex;
+      align-items: stretch;
+    }
+    
+    
+    // Fix for slick slide sizing
+    .slick-slide {
+      padding: 0 10px;
+      display: flex !important;
+      justify-content: center;
+      float: left;
+      align-items: center;
+
+      > div {
+        height: 100%;
+        width: 100%;
+        display: flex;
+      }
+    }
+    
+    .slick-slide[aria-hidden="true"] {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    .slick-arrow {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%); /* Center vertically */
+      z-index: 10;
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      display: flex !important;
+      align-items: center;
+      justify-content: center;
+      opacity: 1;
+      border: none;
+      text-indent: -9999px; 
+      overflow: hidden; 
+      cursor: pointer;
+      
+      &:before {
+        content: ''; 
+        color: #fff; 
+        font-size: 16px;
+        font-weight: bold;
+        opacity: 1;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+      
+      &:hover {
+        opacity: 1;
+      }
+      
+      &.slick-disabled {
+        opacity: 0.7;
+        cursor: not-allowed;
+      }
+    }
+    
+    .slick-prev {
+      left: -18px;
+      &:before {
+        content: '<'; 
+        font-family: Arial, sans-serif;
+        line-height: 1;
+      }
+    }
+    
+    .slick-next {
+      right: -18px;
+      &:before {
+        content: '>'; 
+        font-family: Arial, sans-serif;
+        line-height: 1;
+      }
+    }
+    
+    // Dots (pagination)
+    .slick-dots {
+      bottom: -30px;
+      
+      li {
+        margin: 0 4px;
+        
+        button:before {
+          font-size: 10px;
+          color: #ccc;
+          opacity: 1;
+        }
+        
+        &.slick-active button:before {
+          color: #0071c2;
+        }
+      }
+    }
+  
+    // Fix for slick initialization
+    .slick-initialized .slick-slide {
+      display: flex;
+      height: auto;
+    }
+  }
+  
+  // Additional styles to mimic the original card design
+  .hotel-card {
+    .hotel-type {
+      .star {
+        &:not(:first-child) {
+          margin-left: 1px;
+        }
+      }
+    }
+  }
+  
+  // Custom rating colors
+  .hotel-rating {
+    &:contains("Exceptional") {
+      color: #1a9f29;
+    }
+    
+    &:contains("Excellent") {
+      color: #1a9f29;
+    }
+    
+    &:contains("Very good") {
+      color: #17a2b8;
+    }
+    
+    &:contains("Good") {
+      color: #6f42c1;
+    }
+    
+    &:contains("Review score") {
+      color: #fd7e14;
+    }
+  }
+  
+  // Responsive adjustments
+  @media (max-width: 992px) {
+    .hotel-card {
+      height: 360px;
+    }
+  }
+  
+  @media (max-width: 576px) {
+    .hotel-carousel-container {
+      padding: 0 10px;
+    }
+    
+    .slick-arrow {
+      display: none !important;
+    }
+  }

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

@@ -0,0 +1,79 @@
+.reset-password {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background-color: #ffffff;
+    color: #1a202c;
+  
+    &__container {
+      width: 100%;
+      max-width: 400px;
+      background-color: #ffffff;
+      border-radius: 8px;
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+      padding: 2rem;
+    }
+  
+    &__title {
+      text-align: center;
+      font-size: 1.75rem;
+      color:  #db7c0b;
+      margin-bottom: 1.5rem;
+    }
+  
+    &__field {
+      margin-bottom: 1.25rem;
+      display: flex;
+      flex-direction: column;
+    }
+  
+    &__label {
+      display: block;
+      color:  #db7c0b;
+      margin-bottom: 0.5rem;
+    }
+  
+    &__input {
+      padding: 0.5rem 0.75rem;
+      border: 1px solid #d1d5db; 
+      border-radius: 0.375rem;
+      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
+      outline: none;
+      transition: border-color 0.2s;
+  
+      &:focus {
+        border-color: #db7c0b;
+        box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3);
+      }
+    }
+  
+    &__error {
+      color: #ef4444; 
+      font-size: 0.875rem;
+      margin-top: 0.25rem;
+    }
+  
+    &__button {
+      width: 100%;
+      background-color: #ea580c;
+      color: #ffffff;
+      padding: 0.5rem 1rem;
+      border-radius: 0.375rem;
+      transition: background-color 0.3s;
+      outline: none;
+      border: none;
+      font-weight: 500;
+      cursor: pointer;
+  
+      &:hover {
+        background-color: #c2410c;
+      }
+  
+      &:disabled {
+        background-color: #f97316; 
+        cursor: not-allowed;
+      }
+    }
+  }
+  

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

@@ -0,0 +1,185 @@
+.reviews-container {
+    margin: 0 auto;
+    padding: 20px;
+    color: #333;
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  
+    h2 {
+      font-size: 24px;
+      font-weight: 600;
+      margin-bottom: 10px;
+    }
+  
+    .divider {
+      height: 1px;
+      background-color: #e0e0e0;
+      margin: 15px 0;
+    }
+  
+    .reviews-summary {
+      display: flex;
+      margin: 30px 0;
+      gap: 50px;
+  
+      @media (max-width: 768px) {
+        flex-direction: column;
+      }
+    }
+  
+    .rating-average {
+      text-align: center;
+      min-width: 150px;
+  
+      h1 {
+        font-size: 42px;
+        font-weight: 500;
+        margin: 0 0 5px;
+      }
+  
+      .stars {
+        margin-bottom: 10px;
+        
+        .star {
+          color: #FFD700;
+          font-size: 24px;
+        }
+      }
+  
+      p {
+        margin: 5px 0;
+        
+        &.review-count {
+          color: #666;
+          font-size: 0.9rem;
+        }
+      }
+    }
+  
+    .rating-bars {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  
+    .rating-bar {
+      display: flex;
+      align-items: center;
+      margin: 5px 0;
+      
+      .rating-number {
+        min-width: 40px;
+        text-align: center;
+        font-size: 0.9rem;
+      }
+      
+      .progress-container {
+        flex-grow: 1;
+        height: 8px;
+        background-color: #e0e0e0;
+        border-radius: 4px;
+        margin: 0 10px;
+        overflow: hidden;
+      }
+      
+      .progress-bar {
+        height: 100%;
+        background-color: #ffd700;
+        border-radius: 4px;
+      }
+      
+      .percentage {
+        min-width: 40px;
+        font-size: 0.9rem;
+        color: #666;
+      }
+    }
+  
+    .reviews-list {
+      margin-top: 20px;
+    }
+  
+    .review-item {
+      padding: 15px 0;
+      
+      .user-info {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+        
+        .profile-pic {
+          width: 48px;
+          height: 48px;
+          border-radius: 50%;
+          object-fit: cover;
+          margin-right: 15px;
+        }
+        
+        h3 {
+          margin: 0 0 5px;
+          font-size: 16px;
+          font-weight: 600;
+        }
+        
+        .rating-display {
+          display: flex;
+          align-items: center;
+          
+          .star {
+            color: #00cc66;
+            margin-right: 5px;
+          }
+          
+          .rating-value {
+            color: #00cc66;
+            font-weight: 500;
+          }
+        }
+      }
+      
+      .review-content {
+        margin: 0 0 10px;
+        line-height: 1.5;
+        color: #555;
+      }
+      
+      .show-more-btn {
+        background: none;
+        border: none;
+        color: #555;
+        cursor: pointer;
+        font-weight: 600;
+        padding: 0;
+        margin-bottom: 10px;
+        
+        &:hover {
+          color: #000;
+        }
+      }
+      
+      .review-divider {
+        height: 1px;
+        background-color: #e0e0e0;
+        margin-top: 10px;
+      }
+    }
+  }
+
+  button.show-more-btn, button.show-less-btn {
+    display: inline-block !important;
+    background-color: #f8f8f8 !important;
+    border: 1px solid #ddd !important;
+    border-radius: 4px !important;
+    color: #555 !important;
+    font-weight: 500 !important;
+    cursor: pointer !important;
+    transition: all 0.2s ease !important;
+    padding: 6px 14px !important;
+    font-size: 13px !important; 
+    
+    &:hover {
+      background-color: #e9e9e9 !important;
+      color: #333 !important;
+    }
+  }