stay_commerce-frontend 0.1.0

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

@@ -0,0 +1,223 @@
+.amenities-section {
+    padding-bottom: 2rem;
+    padding-top: 1.5rem;
+    width: 100%;
+   
+     border-radius: 0.75rem;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    
+    .amenities-header {
+      margin-bottom: 1.5rem;
+      padding-left:2rem;
+      padding-right:2rem;
+      
+      h2 {
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+      }
+      
+      span {
+        color: #6b7280;
+        font-size: 0.875rem;
+      }
+    }
+    
+    .divider {
+      width: 3.5rem;
+      border-bottom: 1px solid #e5e7eb;
+      margin: 1rem 0;
+    }
+    
+    .amenities-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1.5rem;
+      padding-left:2rem;
+      padding-right:2rem;
+      
+      .amenity-item {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        font-size: 0.975rem;
+        color: #4b5563;
+        flex: 0 0 calc(33.333% - 1rem);
+        
+        @media (max-width: 1024px) {
+          flex: 0 0 calc(50% - 0.75rem);
+        }
+        
+        @media (max-width: 640px) {
+          flex: 0 0 100%;
+        }
+        
+        .amenity-icon {
+            width: 20px;
+            height: 20px;
+            color: #4b5563; 
+            margin-right: 8px;
+          }
+      }
+    }
+    
+    .view-more {
+      margin-top: 1rem;
+      
+      .btn-secondary {
+        background-color: transparent;
+        border: 1px solid #d1d5db;
+        border-radius: 0.375rem;
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        
+        &:hover {
+          background-color: #f3f4f6;
+        }
+      }
+    }
+    
+    .modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.4);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 50;
+      
+      .modal-container {
+        background-color: white;
+        border-radius: 0.5rem;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        width: 100%;
+        max-width: 36rem;
+        max-height: 80vh;
+        display: flex;
+        flex-direction: column;
+        
+        .modal-header {
+          padding: 1rem 1.5rem;
+          border-bottom: 1px solid #e5e7eb;
+          position: relative;
+          
+          h3 {
+            font-size: 1.125rem;
+            font-weight: 500;
+            text-align: center;
+          }
+          
+          .close-button {
+            position: absolute;
+            left: 1rem;
+            top: 1rem;
+            background: transparent;
+            border: none;
+            font-size: 1.5rem;
+            cursor: pointer;
+            width: 2rem;
+            height: 2rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            
+            &:hover {
+              background-color: #f3f4f6;
+            }
+          }
+        }
+        
+        .modal-content {
+          padding: 1rem 2rem;
+          overflow-y: auto;
+          
+          .modal-amenity-item {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 0.75rem 0;
+            border-bottom: 1px solid #e5e7eb;
+            
+            &:last-child {
+              border-bottom: none;
+            }
+            
+            .amenity-image {
+              width: 2rem;
+              height: 2rem;
+              
+              img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                border-radius: 0.375rem;
+              }
+            }
+            
+            .amenity-icon {
+              font-size: 1.5rem;
+              color: #10b981;
+            }
+          }
+        }
+      }
+    }
+    
+    // Dark mode styles
+    &.dark-mode {
+      .amenities-header span {
+        color: #9ca3af;
+      }
+      
+      .divider {
+        border-bottom-color: #374151;
+      }
+      
+      .amenity-item {
+        color: #d1d5db;
+      }
+      
+      .btn-secondary {
+        border-color: #4b5563;
+        color: #e5e7eb;
+        
+        &:hover {
+          background-color: #374151;
+        }
+      }
+      
+      .modal-container {
+        background-color: #1f2937;
+        border: 1px solid #374151;
+        
+        .modal-header {
+          border-bottom-color: #374151;
+          
+          h3 {
+            color: #f3f4f6;
+          }
+          
+          .close-button {
+            color: #e5e7eb;
+            
+            &:hover {
+              background-color: #374151;
+            }
+          }
+        }
+        
+        .modal-content {
+          .modal-amenity-item {
+            border-bottom-color: #374151;
+            color: #d1d5db;
+          }
+        }
+      }
+    }
+  }

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

@@ -0,0 +1,87 @@
+@import "fixednavbar";
+@import "listing";
+@import "herosection";
+@import "facilities";
+@import "bookingform";
+@import "testimonial";
+@import "about";
+@import "normallisting";
+@import "speciallisting";
+@import "footer";
+@import "blog";
+@import "gallery";
+@import "contact";
+@import "header";
+@import "404error";
+@import "wrapper";
+@import "mobilemenu";
+@import "smallnav";
+@import "gallerymodallight";
+@import "fonts";
+@import "loginpage";
+@import "signuppage";
+@import "avatar";
+@import "socialauth";
+@import "avatardropdown";
+@import "formfield";
+@import "commonpage";
+@import "accountinfo";
+@import "accountpage";
+@import "mybooking";
+@import "staycard";
+@import "galleryslider";
+@import "button";
+@import "buttonprimary";
+@import "commonlayout";
+@import "description";
+@import "details";
+@import "images";
+@import "location";
+@import "unauthorized";
+@import "staycard2";
+@import "propertycard";
+@import "myproperty";
+@import "checkbox";
+@import "room";
+@import "select";
+@import "input";
+@import "formitem";
+@import "ncimage";
+@import "label";
+@import "customdatepicker";
+@import "forgetpassword";
+@import "resetpassword";
+@import "listingstaydetailpage";
+@import "amenitiesfeatures";
+@import "property-description";
+@import "reviews";
+@import "propertydetailscard";
+@import "listingimagegallery";
+@import "badge";
+@import "RenderSection";
+@import "ApartmentCard";
+@import "PropertiesPage";
+@import "BookingDetails";
+@import "Modal.scss";
+@import url("https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,100..900;1,100..900&display=swap");
+* {
+  font-family: "Asap", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}
+
+body {
+  background: white;
+  margin: 0px;
+}
+
+// application.scss (Rails or React version — wherever you import global styles)
+.Toastify__toast-container {
+  z-index: 99999 !important;
+}
+
+.Toastify__toast {
+  font-size: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+}

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

@@ -0,0 +1,39 @@
+.avatar-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.avatar-circle {
+  width: 40px;
+  height: 40px;
+  color: white;
+  background-color: #081976;
+  font-size: 18px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  text-transform: uppercase;
+  margin-left: 6px;
+}
+
+.avatar-image {
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.large-avatar {
+  width: 100px;
+  height: 100px;
+
+  .avatar-image,
+  .avatar-circle {
+    width: 100px;
+    height: 100px;
+    font-size: 32px;
+  }
+}

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

@@ -0,0 +1,57 @@
+.avatar-dropdown {
+    position: relative;
+    display: inline-block;
+  
+    .avatar-button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+    }
+  
+    .dropdown-menu {
+      position: absolute;
+      right: 0;
+      z-index: 10;
+      min-width: 200px;
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+    }
+  
+    .dropdown-content {
+      padding: 10px;
+      display: flex;
+      flex-direction: column;
+    }
+  
+    .dropdown-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px;
+      text-decoration: none;
+      color: #333;
+      font-size: 14px;
+      transition: background-color 0.2s;
+  
+      &:hover {
+        background: #f5f5f5;
+      }
+  
+      .icon {
+        width: 20px;
+        height: 20px;
+        color: #555;
+      }
+    }
+  
+    .dropdown-divider {
+      height: 1px;
+      background: #ddd;
+      margin: 8px 0;
+    }
+  }
+  

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

@@ -0,0 +1,90 @@
+.badge {
+    display: inline-flex;
+    padding: 0.25rem 0.625rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    transition: background-color 0.3s, color 0.3s;
+    text-decoration: none;
+  
+    &.pink-badge {
+      color: #be185d;
+      background-color: #fce7f3;
+  
+      &.hover:hover {
+        background-color: #be185d;
+        color: white;
+      }
+    }
+  
+    &.red-badge {
+      color: #b91c1c;
+      background-color: #fee2e2;
+  
+      &.hover:hover {
+        background-color: #b91c1c;
+        color: white;
+      }
+    }
+  
+    &.gray-badge {
+      color: #1f2937;
+      background-color: #f3f4f6;
+  
+      &.hover:hover {
+        background-color: #1f2937;
+        color: white;
+      }
+    }
+  
+    &.green-badge {
+      color: #065f46;
+      background-color: #d1fae5;
+  
+      &.hover:hover {
+        background-color: #065f46;
+        color: white;
+      }
+    }
+  
+    &.purple-badge {
+      color: #6b21a8;
+      background-color: #f3e8ff;
+  
+      &.hover:hover {
+        background-color: #6b21a8;
+        color: white;
+      }
+    }
+  
+    &.indigo-badge {
+      color: #3730a3;
+      background-color: #e0e7ff;
+  
+      &.hover:hover {
+        background-color: #3730a3;
+        color: white;
+      }
+    }
+  
+    &.yellow-badge {
+      color: #92400e;
+      background-color: #fef9c3;
+  
+      &.hover:hover {
+        background-color: #92400e;
+        color: white;
+      }
+    }
+  
+    &.blue-badge {
+      color: #1e40af;
+      background-color: #dbeafe;
+  
+      &.hover:hover {
+        background-color: #1e40af;
+        color: white;
+      }
+    }
+  }
+  

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

@@ -0,0 +1,100 @@
+
+.blog-section {
+  padding: 4rem 0;
+  text-align: center;
+
+  .title {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+  .subtitle {
+    color: #7a7a7a;
+    margin-bottom: 5rem;
+  }
+
+  .posts {
+    display: flex;
+    gap: 2rem;
+    justify-content: center;
+    flex-wrap: nowrap;
+    margin-bottom:3rem;
+  }
+
+  .post-card {
+    width: 350px;
+    border-radius: 8px;
+    overflow: hidden;
+    text-align: left;
+    transition: transform 0.9s ease-in-out;
+
+    .img-wrapper {
+      width: 350px;
+      height: 250px;
+      overflow: hidden;
+      border-radius: 4px;
+
+      .post-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 0.8s ease-in-out;
+      }
+
+      &:hover .post-image {
+        transform: scale(1.3) rotate(+7deg);
+      }
+    }
+
+    .post-content {
+
+      .tags {
+        margin: 1.75rem 0;
+
+        .tag {
+          display: inline-block;
+          padding: 0.25rem 1rem;
+          font-size: 0.85rem;
+          margin-right: 0.25rem;
+          border: 1px solid #e5e7eb;
+        }
+      }
+
+      .post-title {
+        font-size: 1.1rem;
+        font-weight: bold;
+        margin-bottom: 0.5rem;
+      }
+
+      .post-description {
+        font-size: 0.91rem;
+        color: #555;
+        margin-bottom: 0.5rem;
+      }
+
+      .post-date {
+        font-size: 1rem;
+        color: #000;
+      }
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .posts {
+      flex-wrap: wrap;
+    }
+  }
+}
+
+
+@media (max-width: 382px) {
+  .blog-section{
+  .title {
+    font-size: 30px;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+}
+}

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

@@ -0,0 +1,124 @@
+.booking-section {
+  position: relative;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+  padding: 2px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  border-radius: 20px;
+  margin: 40px auto;
+  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+
+  @media (max-width: 768px) {
+    margin-top: 100px;
+  }
+
+  .booking-table {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 1100px;
+    width: 100%;
+    padding: 25px 0px;
+
+    @media (max-width: 768px) {
+      flex-direction: column;
+      padding: 0 40px 40px;
+      max-width: 540px;
+    }
+  }
+
+  .booking-title {
+    color: #fff;
+    font-size: 24px;
+    font-weight: bold;
+    text-transform: uppercase;
+    line-height: 1.2;
+    text-align: center;
+    margin-bottom: 10px;
+
+    @media (max-width: 768px) {
+      width: 100%;
+      text-align: center;
+      margin-bottom: 15px;
+    }
+  }
+
+  .form-fields {
+    width: 100%;
+
+    .form-row {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 15px;
+      flex-wrap: wrap;
+
+      @media (max-width: 768px) {
+        flex-direction: column;
+      }
+    }
+  }
+
+  .input-group {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    border: 1px solid #555;
+    padding: 3px;
+    min-width: 150px;
+    border-radius: 5px;
+  }
+
+  .form-control {
+    width: 100%;
+    background: transparent;
+    border: none;
+    color: #777;
+    font-size: 14px;
+    padding: 8px;
+  }
+
+  .form-control:focus {
+    outline: none;
+    border-color: #081976;
+  }
+
+  select.form-control {
+    appearance: auto;
+  }
+
+  .book-now-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    min-width: 150px;
+    margin-top: 12px;
+
+    @media (min-width: 769px) {
+      margin-top: 0;
+    }
+  }
+
+  .book-now-btn {
+    background-color: #db7c0b;
+    width: 100%;
+    padding: 10px 20px;
+    font-weight: bold;
+    font-size: 16px;
+    border-radius: 0;
+    border: none;
+    cursor: pointer;
+    text-align: center;
+    transition: background-color 0.3s;
+  }
+
+  .book-now-btn:hover {
+    background: #e6a600;
+  }
+}