stay_commerce-frontend 0.1.0

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

@@ -0,0 +1,275 @@
+.rooms-container {
+  padding: 1rem;
+}
+
+.rooms-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.rooms-subtitle {
+  color: #6b7280;
+  margin-bottom: 1.5rem;
+  display: block;
+}
+
+.room-section {
+  margin-bottom: 2rem;
+
+  &.room-section-bordered {
+    margin-top: 3rem;
+    padding-top: 2rem;
+    border-top: 1px solid #e5e7eb;
+  }
+}
+
+.room-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 1.5rem;
+}
+
+.form-item {
+  margin-bottom: 1rem;
+}
+
+.error-text {
+  color: #ef4444;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
+.currency-symbol {
+  position: absolute;
+  top: 50%;
+  left: 0.75rem;
+  transform: translateY(-50%);
+  color: #6b7280;
+}
+
+.price-input {
+  padding-left: 2rem;
+}
+
+.date-picker-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.25rem;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+  }
+}
+
+.description-textarea {
+  width: 100%;
+  height: 8rem;
+  padding: 0.75rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  resize: vertical;
+}
+
+.room-details-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.25rem;
+
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+  }
+}
+
+.section-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 1.25rem 0;
+}
+
+.checkbox-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.25rem;
+
+  @media (min-width: 640px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.image-upload-section {
+  margin-top: 1.25rem;
+}
+
+.image-upload-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.image-upload-content {
+  margin-top: 1.25rem;
+}
+
+.upload-container {
+  margin-top: 0.25rem;
+  display: flex;
+  justify-content: center;
+  padding: 1.5rem 1.5rem 1.5rem;
+  border: 2px dashed #d1d5db;
+  border-radius: 0.375rem;
+}
+
+.upload-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  text-align: center;
+}
+
+.upload-icon {
+  width: 3rem;
+  height: 3rem;
+  color: #9ca3af;
+}
+
+.upload-text {
+  display: flex;
+  font-size: 0.875rem;
+  color: #4b5563;
+}
+
+.upload-link {
+  cursor: pointer;
+  font-weight: 500;
+  color: #2563eb;
+
+  &:hover {
+    color: #1d4ed8;
+  }
+}
+
+.upload-info {
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.image-preview-container {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 0.75rem;
+}
+
+.common-input {
+  padding: 10px !important;
+  background-color: white !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+  height: 50px !important;
+  border: 1px solid #e5e7eb !important;
+  border-radius: 0.375rem !important;
+  font-size: 0.875rem !important;
+  color: #111827 !important;
+}
+
+.image-placeholder {
+  width: 120px;
+  height: 120px;
+  background-color: #d1d5db;
+  border-radius: 0.375rem;
+  animation: pulse 1.5s infinite;
+}
+
+.image-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.image-container {
+  width: 120px;
+  height: 120px;
+  position: relative;
+}
+
+.image {
+  border-radius: 0.375rem;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.nc-image {
+  width: 100% !important;
+  height: 100% !important;
+  border-radius: 0.375rem;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: all 0.3s ease-in-out;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+.remove-image-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background-color: white;
+  border: 1px solid #d1d5db;
+  border-radius: 9999px;
+  padding: 0.25rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  &:hover {
+    background-color: #f3f4f6;
+  }
+}
+
+.remove-image-icon {
+  width: 1rem;
+  height: 1rem;
+  color: #ef4444;
+}
+
+.room-actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1.25rem;
+}
+
+.action-button {
+  margin: 1.25rem 0;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,44 @@
+.nc-Select {
+    width: 100%;
+    font-size: 0.875rem; // text-sm
+    border-radius: 1rem; // rounded-2xl
+    border: 1px solid #e5e7eb; // light neutral
+    background-color: #ffffff;
+    padding: 0 2.5rem 0 1rem;
+    color: #111827; // dark text
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23111827' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); // Custom arrow
+  background-repeat: no-repeat;
+  background-position: right 1rem center; // Position arrow
+  background-size: 1rem;
+  
+    &:focus {
+      border-color: #93c5fd; // primary-300
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5); // ring
+    }
+  
+    &.small {
+      height: 2.25rem; // ~h-9
+    }
+  
+    &.medium {
+      height: 2.75rem; // ~h-11
+    }
+  
+    &.large {
+      height: 3.25rem; // ~h-13
+    }
+  
+    // Dark mode styles
+    @media (prefers-color-scheme: dark) {
+      background-color: #111827; // dark neutral
+      border-color: #374151;
+      color: #f9fafb;
+  
+      &:focus {
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); // primary-6000 opacity-25
+      }
+    }
+  }
+  

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

@@ -0,0 +1,132 @@
+.signup-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  position: relative;
+}
+
+/* Logo Styling */
+.logos {
+  position: absolute;
+  top: 30px;
+  left: 23px;
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #222;
+}
+
+.signup-card {
+  background: white;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  max-width: 430px;
+  width: 90%;
+  margin-top: 13rem;
+  margin-bottom: 7rem;
+}
+
+.sign-title {
+  margin-bottom: 2rem;
+}
+.sign-title h2 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  margin-top: 0px;
+}
+
+.social-login {
+  margin-top: 1rem;
+}
+
+.signup-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+
+label {
+  font-size: 0.9rem;
+  font-weight: 500;
+  margin-bottom: 5px;
+  color: #333;
+}
+
+.signup-button {
+  background: #081976;
+  color: white;
+  border: none;
+  padding: 15px;
+  font-size: 1rem;
+  border-radius: 6px;
+  cursor: pointer;
+  margin-top: 1rem;
+  font-weight: bold;
+}
+
+.login-text {
+  display: flex;
+  flex-direction: column;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+
+  a {
+    color: #081976;
+    font-size: 0.9rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .signup-card {
+    max-width: 350px;
+    padding: 1.5rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .signup-card {
+    max-width: 80%;
+    padding: 1.2rem;
+    margin-top: 8rem;
+  }
+
+  .sign-title h2 {
+    font-size: 2.5rem;
+  }
+  .signup-button {
+    padding: 12px;
+    font-size: 0.9rem;
+  }
+}
+
+.role-selection {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+  gap: 12px;
+}
+
+.role-button {
+  flex: 1;
+  padding: 10px;
+  border: 2px solid #081976;
+  border-radius: 6px;
+  text-align: center;
+  cursor: pointer;
+  font-weight: bold;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.role-button.active {
+  background: #081976;
+  color: white;
+}

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

@@ -0,0 +1,94 @@
+.navbar.small {
+    background-color: white;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    position: fixed;
+    top: 0;
+    z-index: 100;
+    width: 1100px;  
+    max-width: 100%; 
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 0px;
+    padding: 0px 10px;
+    transition: all 0.3s ease-in-out;
+  }
+  
+  .wrap {
+    padding: 0 15px;
+  }
+  
+  .navContentSmall {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 14px 0;
+  }
+  
+  .navContentSmall .logo .logospan {
+    font-size: 1.3rem;
+    font-weight: bold;
+    color: #333;
+  }
+  
+  .navMenu.smallMenu {
+    gap: 1.3rem;
+    margin-left: auto;
+    font-weight: 600;
+  }
+  
+  .navMenu.smallMenu .navLink {
+    text-decoration: none;
+    color: #333;
+    font-size: 0.8rem;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    padding: 5px 0;
+    transition: color 0.3s ease;
+  
+    &:hover,
+    &.active {
+      color: #03a9f4;
+    }
+  }
+  /* smallNavbar Responsive */
+
+
+  @media (max-width: 1200px) {
+    .navbar.small {
+      width: 900px;
+    }
+  }
+
+  @media (max-width: 990px) {
+    .navbar.small {
+      width: 700px;
+    }
+
+    .navContentSmall {
+       justify-content: space-between;
+    }
+  
+    .navMenu.smallMenu {
+      display: none;
+    }
+  }
+
+  
+  @media (max-width: 767px) {
+    .navbar.small {
+      width: 500px;
+    }
+  
+    .navContentSmall .logo .logospan {
+      font-size: 1.3rem;
+    }
+  }
+
+   
+  @media (max-width: 572px) {
+    .navbar.small {
+      width: 100%;
+      padding: 0px;
+    }
+}
+  

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

@@ -0,0 +1,62 @@
+.social-auth {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 16px;
+    width:100%;
+  
+    .social-button {
+      display:flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 45px;
+      width: 100%;
+      padding: 12px;
+      font-size: 16px;
+      font-weight: 500;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background-color 0.2s ease-in-out;
+  
+      img {
+        width: 20px;
+        height: 20px;
+      }
+  
+      &.google {
+        background-color: #fff;
+        border: 1px solid #ddd;
+        color: #333;
+  
+        &:hover {
+          background-color: #E0E0E0;
+        }
+      }
+  
+      &.facebook {
+        border: none;
+        background-color: #fff;
+        color: #333;
+        border: 1px solid #ddd;
+  
+        &:hover {
+          background-color:#E0E0E0 ;
+        }
+      }
+    }
+  }
+  
+  @media (max-width: 400px) {
+    .social-auth{
+    .social-button {
+      flex-direction: row;
+      gap: 10px; 
+      max-width:90%;
+      padding: 10px; 
+    }
+
+    .social-button img {
+      width: 18px; 
+      height: 18px;
+    }
+  }
+}

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

@@ -0,0 +1,94 @@
+// .special-listing {
+//     text-align: center;
+//     margin: 75px 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;
+//         height:39vh;
+  
+//         .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) {
+//   .special-listing {
+//     h2 {
+//       font-size: 30px;
+//       font-weight: bold;
+//       margin: 70px 0 20px;
+//     }
+//   }
+  
+// }