stay_commerce-frontend 0.1.0

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

@@ -0,0 +1,480 @@
+// Define standard breakpoints
+$sm: 640px;
+$md: 768px;
+$lg: 1024px;
+$xl: 1280px;
+$xxl: 1536px;
+
+.listingSection {
+  &__wrap {
+    margin-top: 1.5rem 0;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
+    padding: 1rem;
+    border-radius: 0.5rem;
+    @media (min-width: $md) {
+      padding: 1.5rem;
+    }
+
+    &.space-y-10 {
+      margin-bottom: 1.5rem;
+
+      @media (min-width: $md) {
+        margin-bottom: 2.5rem;
+      }
+    }
+  }
+}
+
+.listingSectionSidebar {
+  &__wrap {
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
+    border-radius: 0.5rem;
+  }
+}
+
+hr {
+  height: 1px;
+  margin: 1.5rem 0;
+  background-color: #e5e7eb;
+  border: 0;
+
+  @media (min-width: $md) {
+    margin: 1rem 0;
+  }
+}
+
+.dark hr {
+  background-color: #374151;
+}
+
+.section-container {
+  width: 100%;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  margin-bottom: 20px;
+
+  @media (min-width: $lg) {
+    flex-direction: row;
+    gap: 2rem;
+    // padding: 3.5rem;
+  }
+
+  &.shared-property {
+    border: 1px solid rgba(209, 213, 219, 0.3);
+    border-radius: 30px;
+  }
+}
+
+.room-container {
+  width: 100%;
+
+  @media (max-width: 1023px) {
+    width: 100%;
+  }
+}
+
+.room-image-t {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  margin-bottom: 1rem;
+  width: 100%;
+  border-radius: 10px;
+  display: flex;
+  justify-content: space-between;
+  gap: 5px;
+
+  @media (min-width: $md) {
+    height: 250px;
+  }
+
+  @media (min-width: $lg) {
+    height: 300px;
+  }
+
+  img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+}
+
+.sidebar-container {
+  display: flex;
+  overflow: hidden;
+  padding: 1px;
+  justify-content: end;
+
+  @media (max-width: 1024px) {
+    width: 100%;
+  }
+}
+
+.section-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+
+  @media (min-width: $sm) {
+    font-size: 1.5rem;
+    margin-bottom: 1.25rem;
+  }
+
+  @media (min-width: $lg) {
+    font-size: 1.875rem;
+  }
+
+  @media (min-width: $xl) {
+    font-size: 1.8rem;
+  }
+}
+
+.room-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @media (min-width: $sm) {
+    font-size: 1.5rem;
+    // margin-bottom: 1.25rem;
+  }
+
+  @media (min-width: $lg) {
+    font-size: 1.875rem;
+  }
+
+  @media (min-width: $xl) {
+    font-size: 1.8rem;
+  }
+}
+
+.room-item-wrapper {
+  display: flex;
+  gap: 1.5rem;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  max-height: 370px;
+
+  @media (min-width: 768px) {
+    flex-wrap: nowrap;
+  }
+}
+
+.room-image {
+  flex: 1 1 250px;
+  max-width: 400px;
+
+  img {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    object-fit: cover;
+  }
+}
+
+.room-content {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+}
+
+.rooms-parents {
+  display: flex;
+  gap: 6px;
+  justify-content: space-between;
+  min-height: 62px;
+}
+
+.room-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  // margin-bottom: 1rem;
+}
+
+.room-features {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 0.875rem;
+  color: #4b5563;
+  justify-content: space-between;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  h2 {
+    margin: 0;
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+
+  .view-all-item {
+    .btn-primary {
+      font-size: 14px;
+      padding: 6px 12px;
+    }
+  }
+}
+
+.underline-divider {
+  width: 2.5rem;
+  border-bottom: 1px solid #e5e7eb;
+  margin-bottom: 1rem;
+
+  @media (min-width: $md) {
+    width: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+}
+
+.dark .underline-divider {
+  border-color: #374151;
+}
+.description {
+  line-break: anywhere;
+  color: #6b7280;
+}
+
+.amenities-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  font-size: 0.875rem;
+  color: #4b5563;
+
+  @media (min-width: $md) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.25rem;
+  }
+
+  @media (min-width: $xl) {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+  }
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  min-width: 900px;
+  gap: 5px;
+  overflow: hidden;
+
+  @media (min-width: $md) {
+    min-width: 90px;
+  }
+}
+
+.dark .amenities-grid {
+  color: #d1d5db;
+}
+
+.amenity-item {
+  display: flex;
+  align-items: center;
+
+  i,
+  svg {
+    font-size: 1.25rem;
+
+    @media (min-width: $md) {
+      font-size: 1.5rem;
+    }
+  }
+}
+
+.price-header {
+  font-size: 1.5rem;
+  font-weight: 600;
+
+  @media (min-width: $md) {
+    font-size: 1.875rem;
+  }
+}
+
+.price-period {
+  font-size: 0.875rem;
+  font-weight: 400;
+
+  @media (min-width: $md) {
+    font-size: 1rem;
+  }
+}
+
+.form-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-input-large {
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  border-radius: 20px;
+  background-color: white;
+
+  @media (min-width: $md) {
+    font-size: 1rem;
+    border-radius: 30px;
+  }
+}
+
+.form-group {
+  margin-bottom: 0.75rem;
+
+  @media (min-width: $md) {
+    margin-bottom: 1rem;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 0.375rem;
+
+    @media (min-width: $md) {
+      margin-bottom: 0.5rem;
+    }
+  }
+}
+
+.divider {
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.dark .divider {
+  border-color: #374151;
+}
+
+.price-breakdown {
+  display: flex;
+  flex-direction: column;
+}
+
+.price-row {
+  display: flex;
+  justify-content: space-between;
+  color: #4b5563;
+  font-size: 0.875rem;
+
+  @media (min-width: $md) {
+    font-size: 1rem;
+  }
+
+  &.total {
+    font-weight: 600;
+    color: #111827;
+  }
+
+  .dark & {
+    color: #d1d5db;
+
+    &.total {
+      color: #f9fafb;
+    }
+  }
+}
+
+.info-icon {
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  i {
+    font-size: 1.25rem;
+
+    @media (min-width: $md) {
+      font-size: 1.5rem;
+    }
+  }
+}
+
+.price-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+
+  .price {
+    font-size: 12px;
+    font-weight: bold;
+
+    .per-month {
+      font-size: 10px;
+      font-weight: normal;
+      color: #dbeafe;
+    }
+  }
+}
+
+.error-text {
+  color: #ef4444;
+  font-size: 0.75rem;
+}
+
+.badge-container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: baseline;
+  margin-bottom: 0.5rem;
+}
+
+.room-divider {
+  margin: 1rem 0;
+  border: none;
+  border-top: 1px solid #e5e7eb; // light gray
+}
+
+.underline-divider {
+  width: 60px;
+  height: 3px;
+  background-color: #2563eb; // a blue accent
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.amenities-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 1rem;
+}
+
+.amenity-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: #374151;
+}
+
+.desc-parents {
+  margin-top: 15px;
+}
+
+.price-parents {
+  margin-bottom: 15px;
+}
+
+.sub-heading {
+  font-weight: bold;
+}
+
+.amenities-style {
+  display: flex;
+  gap: 5px;
+  .amenity-item-style {
+    font-size: 14px;
+    background: #dbdbdb;
+    padding: 5px 15px;
+    display: inline-block;
+    border-radius: 30px;
+    margin: 10px 0;
+  }
+}

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

@@ -0,0 +1,97 @@
+
+/* About Section */
+.about-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 0;
+  margin: 60px 0;
+  
+}
+
+.about-container {
+  display: flex;
+  max-width: 1100px;
+  width: 100%;
+  gap: 3rem;
+  align-items: center;
+}
+
+/* Left Content */
+.about-content {
+  flex: 1;
+}
+
+.about-content h2 {
+  font-size: 2.5rem;
+  font-weight: bold;
+  line-height: 1.3;
+  margin-bottom: 1rem;
+}
+
+.about-content p {
+  color: #666;
+  font-size: 1rem;
+  line-height: 1.6;
+  margin-bottom: 1.5rem;
+}
+
+.about-content button {
+  background-color: black;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background-color 0.3s ease;
+}
+
+.about-content button:hover {
+  background-color: #333;
+}
+
+/* Right Image */
+.about-image {
+  flex: 1;
+}
+
+.about-image img {
+  width: 100%;
+  height: 450px;
+  object-fit: cover;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+@media (max-width:990px){
+  .about-image img{
+  width: 100%;
+  height: 340px;
+  }
+}
+
+@media(max-width: 768px) {
+  .about-container {
+    flex-direction: column;
+  }
+  .about-section{
+    margin-top:20px;
+    padding:3px;
+    padding-bottom:65px;
+  }
+
+  .about-image img{
+  width: 100%;
+  height: 450px;
+  object-fit: cover;
+  }
+
+}
+
+@media (max-width: 382px) {
+.about-content h2 {
+  font-size: 30px;
+  font-weight: bold;
+  line-height: 1.3;
+  margin-bottom: 1rem;
+}
+}

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

@@ -0,0 +1,67 @@
+.account-info-container {
+  background: #fff;
+  border-radius: 8px;
+  align-items: center;
+}
+
+.avatar-section {
+  display: flex;
+
+  align-items: center;
+  margin-bottom: 30px;
+  position: relative;
+
+  .avatar {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  .file-input {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+  }
+}
+
+.account-form {
+  .grid-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    margin-bottom: 20px;
+
+    @media (max-width: 600px) {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+.submit-btn {
+  margin-top: 20px;
+  margin-left: auto;
+}
+
+// .submit-btn:disabled {
+//   background-color: #ccc;
+//   cursor: not-allowed;
+// }
+
+.avatar-wrapper {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.edit-overlay {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 5px;
+  border-radius: 50%;
+  font-size: 14px;
+}

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

@@ -0,0 +1,36 @@
+.account-title {
+  font-size: 1.875rem;
+  font-weight: bold;
+  color: #1f2937;
+  margin-bottom: 0.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    // color: #ffffff;
+  }
+}
+
+.account_deatils {
+  border: 1px solid #cbcaca;
+  border-radius: 10px;
+  padding: 40px;
+}
+
+.account-description {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin-bottom: 1rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: #9ca3af;
+  }
+}
+
+.divider {
+  width: 100%;
+  border-bottom: 1px solid #d1d5db;
+  margin-bottom: 1.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    border-color: #374151;
+  }
+}