stay_commerce-frontend 0.1.0

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

@@ -0,0 +1,44 @@
+.button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 11px 20px;
+    font-size: 16px;
+    font-weight: 500;
+    text-decoration: none;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    cursor: pointer;
+    border: none;
+    outline: none;
+  }
+  
+  .button-default {
+    background-color: #f0f0f0;
+    color: #333;
+  }
+  
+  .button-default:hover {
+    background-color: #ddd;
+  }
+  
+  .button-third {
+    border: 1px solid #ccc;
+    background-color: white;
+    color: #333;
+  }
+  
+  .button-loading {
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
+  }
+  
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  

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

@@ -0,0 +1,32 @@
+.btn-primary {
+  background-color: #081976; // Equivalent to bg-primary-6000
+  color: #f8fafc; // Equivalent to text-neutral-50
+  padding: 12px 24px;
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 6px;
+  transition: background-color 0.3s ease-in-out;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  // justify-content: center;
+  // text-align: center;
+  text-align: center;
+
+  .book-now-btn:hover {
+    background: #e6a600;
+  }
+
+  &:disabled {
+    // background-color: #ccc;
+    cursor: not-allowed;
+  }
+}
+
+.book-now-btn {
+  width: 100% !important;
+  padding: 12px 24px;
+  font-size: 16px;
+  font-weight: 600;
+}

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

@@ -0,0 +1,37 @@
+.checkbox-wrapper {
+    display: flex;
+    font-size: 0.875rem; 
+    @media (min-width: 640px) {
+      font-size: 1rem; 
+    }
+  }
+  
+  .checkbox-input {
+    height: 1.5rem; 
+    width: 1.5rem;
+    background-color: white;
+    border: 1px solid #737373; 
+    border-radius: 0.25rem;
+    color: #3b82f6; 
+    accent-color: #3b82f6;
+  }
+  
+  .checkbox-label {
+    margin-left: 0.875rem; 
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    justify-content: center;
+  }
+  
+  .checkbox-text {
+    color: #111827; 
+  }
+  
+  .checkbox-subtext {
+    margin-top: 0.25rem;
+    font-size: 0.875rem;
+    font-weight: 300;
+    color: #6b7280; 
+  }
+  

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

@@ -0,0 +1,83 @@
+.common-layout {
+  max-width: 842px;
+  margin: auto;
+  padding: 2rem 1rem;
+  margin-top: 10rem;
+  margin-bottom: 5rem;
+
+  .steps-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding-bottom: 1.5rem;
+    gap: 0.5rem;
+    position: relative;
+    padding-top: 22px;
+    border-radius: 10px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+
+    .step {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+
+      .step-circle-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        position: relative;
+
+        .step-circle {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background-color: #d1d5db;
+          transition: background-color 0.3s ease-in-out;
+
+          &.active {
+            background-color: #081976;
+          }
+        }
+
+        .step-line {
+          position: absolute;
+          top: 50%;
+          left: 100%;
+          width: 60px;
+          height: 2px;
+          background-color: #d1d5db;
+          transition: background-color 0.3s ease-in-out;
+          transform: translateX(16%);
+
+          &.active {
+            background-color: #081976;
+          }
+        }
+      }
+      .step:not(:last-child) .step-line {
+        display: block;
+      }
+
+      .step-label {
+        margin-top: 0.5rem;
+        font-size: 0.8rem;
+        font-weight: 600;
+        color: #374151;
+        transition: color 0.3s ease-in-out;
+        text-align: center;
+        width: 80px;
+        text-decoration: none;
+
+        &.active {
+          color: #081976;
+        }
+      }
+    }
+  }
+
+  .content {
+    margin-top: 3rem;
+  }
+}

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

@@ -0,0 +1,51 @@
+// Variables
+$primary-color: #db7c0b;
+
+.commonPageWrapper {
+  color: #1f2937;
+  margin-top: 80px;
+}
+
+.navbarWrapper {
+  border-bottom: 1px solid #d1d5db;
+  background-color: #ffffff;
+  padding-top: 62px;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.navLinks {
+  display: flex;
+  gap: 1.5rem;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.link {
+  display: block;
+  padding: 12px 0;
+  border-bottom: 2px solid transparent;
+  color: #6b7280;
+  text-decoration: none;
+  transition: border-color 0.3s, color 0.3s;
+
+  &:hover {
+    color: #111827;
+  }
+}
+
+.activeLink {
+  border-bottom: 2px solid #3b82f6;
+  color: #6b7280;
+  padding: 12px 0;
+  text-decoration: none;
+}
+
+.contentContainer {
+  padding: 20px;
+  padding: 20px;
+  border-radius: 8px;
+}

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

@@ -0,0 +1,173 @@
+/* contact.scss */
+
+.contact-hero {
+    background-size: cover;
+    background-position: center;
+    min-height: 50vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction:column;
+  
+    h1 {
+      color: white;
+      font-size: 2.5rem;
+      font-weight: bold;
+      margin-top: 22px;
+      margin-bottom:10px;
+    }
+
+    .breadcrumb {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 2px;
+      position: relative;
+      font-size:1rem;
+      color: white;
+    }
+    
+    .breadcrumb-link {
+      color: white;
+      text-decoration: none;
+      &:hover {
+        color: #FFC107;  
+      }
+    }
+    
+    .breadcrumb-separator {
+      color: white;
+      margin: 0 4px;
+      margin-bottom: 5px;
+      font-size:1.7rem;
+    }
+    
+    .breadcrumb-current {
+      color: white;
+    }
+  }
+  
+  .contact-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+  
+    .contact-map {
+      width: 100%;
+      height: 400px;
+      border: 1px solid #ccc;
+      margin-bottom:90px;
+      margin-top:90px;
+    }
+  
+    .contact-content {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+  
+      .contact-info {
+        flex: 1;
+  
+        .info-item {
+          display: flex;
+          align-items: flex-start;
+          .icon {
+            width: 40px;
+            font-size: 24px;
+            color: #f1c40f;
+            margin-right: 15px;
+            margin-top: 5px;
+          }
+  
+          h4 {
+            font-size: 17px;
+            margin-bottom: 5px;
+            margin-top:1px;
+            color:#222222;
+            font-weight:300;
+          }
+  
+          p {
+            color: #666;
+            margin-top:1px;
+            font-size: 14px;
+          }
+        }
+      }
+  
+      .contact-form {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 20px;
+        flex: 2;
+  
+        .form-left,
+        .form-right {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+  
+        .form-left {
+          width: calc(50% - 10px);
+  
+          input {
+            padding: 12px;
+            border: 1px solid #e6e6e6;
+            font-size: 12px;
+          }
+        }
+  
+        .form-right {
+          width: calc(50% - 10px);
+  
+          textarea {
+            height: 120px;
+            padding: 12px;
+            border: 1px solid #e6e6e6;
+            font-size: 12px;
+            resize: vertical;
+          }
+        }
+  
+        .form-button {
+          width: 100%;
+          text-align: right;
+  
+          button {
+            background-color: #f1c40f;
+            border: none;
+            color: white;
+            padding: 15px 35px;
+            font-size: 12px;
+            font-weight: bold;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+  
+  @media (max-width: 770px) {
+    .contact-container {
+      padding: 1rem;
+    
+      .contact-content {
+        flex-direction: column; 
+        gap: 20px;
+  
+        .contact-info {
+          width: 100%;
+        }
+  
+        .contact-form {
+          flex-direction: column; 
+          .form-left,
+          .form-right {
+            width: 100%; 
+          }
+        }
+      }
+    }
+  }
+  

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

@@ -0,0 +1,120 @@
+.react-datepicker__day--disabled {
+    position: relative; 
+    color: white !important;
+    background-color: #ccc6c6 !important; 
+    cursor: not-allowed; 
+    opacity: 1;
+    width:100%;
+    height:100%;
+    // font-weight: 800;
+    // background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2050%2050%22%20fill%3D%22none%22%20stroke%3D%22red%22%20stroke-width%3D%225%22%3E%3Cline%20x1%3D%2210%22%20y1%3D%2210%22%20x2%3D%2240%22%20y2%3D%2240%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%2240%22%20x2%3D%2240%22%20y2%3D%2210%22%2F%3E%3C%2Fsvg%3E');
+    background-size: cover;
+    border-radius: 25px;
+    // font-size: 20px;
+  }
+  
+  .react-datepicker__day--disabled::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px; 
+    color: red; 
+    pointer-events: none; 
+  }
+
+  .blue-date {
+    background-color: green !important;
+    color: white !important;
+    background-size: cover;
+    border-radius: 25px;
+    font-size: 20px;
+  }
+  
+  /* CustomDatePicker.scss */
+.start-date {
+  background-color: #4caf50 !important; /* Start date color (green) */
+  color: white !important;
+}
+
+.end-date {
+  background-color: #ff9800 !important; /* End date color (orange) */
+  color: white !important;
+}
+
+
+.blurred-date-picker {
+  background-color: rgba(0, 0, 0, 0.1); /* Light faded background */
+  filter: blur(2px); /* Add a blur effect */
+  cursor: not-allowed; /* Show the cursor as not-allowed */
+}
+
+.custom-datepicker .ant-picker-input input::placeholder {
+  color: var(--placeholder-color, #888); 
+}
+
+body.dark-mode .custom-datepicker .ant-picker-input input::placeholder {
+  color: var(--placeholder-dark-color, #aaa); 
+}
+
+.my-custom-datepicker .rainbow-date-picker__day--disabled {
+  position: relative; /* Ensure positioning for pseudo-element */
+  color: red; /* Change text color for visibility */
+}
+
+.my-custom-datepicker .rainbow-date-picker__day--disabled::after {
+  content: '❌'; /* Add a cross icon */
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.2em; /* Adjust size as needed */
+}
+
+.lcvIHF:focus {
+  background-color: inherit !important; 
+  outline: none; 
+  border: 1px solid inherit !important; 
+}
+
+.m_8fb7ebe7 {
+  background-color: inherit !important;
+  border: 1px solid rgb(80, 85, 95, 0.5) !important;
+  font-weight: 500 !important;
+  padding: 8px;
+}
+
+.dark .m_8fb7ebe7 {
+  background-color: rgba(var(--c-neutral-900), var(--tw-bg-opacity)) !important;
+  border: 1px solid rgba(80, 85, 95, 0.5) !important;
+}
+
+.m_88bacfd0 {
+  font-weight: 500;
+  padding-left:8px;
+  font-size:14px;
+  color:#52525B;
+
+}
+.dark .m_88bacfd0 {
+  color:inherit !important;
+
+}
+.m_8fdc1311{
+  margin-top:18px;
+}
+
+.m_6fa5e2aa{
+  font-weight: 500;
+  color:#52525B;
+  padding-left:8px;
+  
+}
+
+.dark .m_6fa5e2aa{
+  color:inherit !important; 
+}

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

@@ -0,0 +1,21 @@
+.description-container {
+  max-width: 800px;
+  margin: auto;
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+
+  .title {
+    font-size: 24px;
+    font-weight: bold;
+    padding-left: 1rem;
+  }
+}
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  gap: 1.5rem;
+}

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

@@ -0,0 +1,88 @@
+.additional-rules {
+  margin-top: 2rem;
+
+  h3 {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    color: #333;
+  }
+
+  .rules-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+  }
+
+  .rule-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #f7f7f7;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+
+    span {
+      font-size: 1rem;
+      color: #444;
+    }
+
+    .rule-actions {
+      display: flex;
+      gap: 0.5rem;
+
+      button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-size: 1.1rem;
+        transition: color 0.2s ease;
+
+        &:hover {
+          color: #007bff;
+        }
+
+        &:last-child:hover {
+          color: #dc3545;
+        }
+      }
+    }
+  }
+
+  .rule-input-group {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+
+    input {
+      flex: 1;
+      padding: 0.75rem 1rem;
+      border-radius: 8px;
+      border: 1px solid #ccc;
+      font-size: 1rem;
+      transition: border-color 0.2s;
+
+      &:focus {
+        border-color: #007bff;
+        outline: none;
+      }
+    }
+
+    button {
+      padding: 0.6rem 1.2rem;
+      font-size: 1rem;
+      border-radius: 8px;
+    }
+  }
+}
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+