stay_commerce-frontend 0.1.0

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

@@ -0,0 +1,131 @@
+.modern-facilities-section {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  padding: 1rem 2rem;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.facilities-container {
+  max-width: 1200px;
+  width: 100%;
+  text-align: center;
+}
+
+.facilities-main-title {
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: #081976;
+  margin-bottom: 3rem;
+  letter-spacing: -0.02em;
+  text-transform: uppercase;
+}
+
+.facilities-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 2rem;
+  margin-bottom: 3rem;
+}
+
+.facility-card {
+  background: white;
+  border-radius: 12px;
+  padding: 2rem;
+  display: flex;
+  align-items: flex-start;
+  text-align: left;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  border: 1px solid #f1f3f4;
+  cursor: pointer;
+}
+
+.facility-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 30px rgba(39, 130, 248, 0.15);
+}
+
+.icon-container {
+  background: #081976;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 1.5rem;
+  flex-shrink: 0;
+}
+
+.facility-icon {
+  font-size: 1.5rem;
+  filter: brightness(0) invert(1);
+}
+
+.facility-content {
+  flex: 1;
+}
+
+.facility-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 0.5rem;
+  line-height: 1.3;
+}
+
+.facility-description {
+  font-size: 0.95rem;
+  color: #6c757d;
+  line-height: 1.6;
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .modern-facilities-section {
+    padding: 3rem 1rem;
+  }
+
+  .facilities-main-title {
+    font-size: 2rem;
+  }
+
+  .facilities-grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  .facility-card {
+    padding: 1.5rem;
+  }
+
+  .icon-container {
+    width: 50px;
+    height: 50px;
+    margin-right: 1rem;
+  }
+
+  .facility-icon {
+    font-size: 1.25rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .facilities-main-title {
+    font-size: 1.5rem;
+  }
+
+  .facility-card {
+    padding: 1.25rem;
+  }
+
+  .facility-title {
+    font-size: 1.1rem;
+  }
+
+  .facility-description {
+    font-size: 0.9rem;
+  }
+}

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

@@ -0,0 +1,137 @@
+// Variables
+$primary-color: #081976;
+
+.navbar {
+  background-color: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  position: fixed;
+  width: 100%;
+  z-index: 100;
+  top: 0;
+  height: 79px;
+}
+
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.navContent {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 79px;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.logospan {
+  font-size: 1.3rem;
+  font-weight: bold;
+}
+
+.navMenu {
+  display: flex;
+  gap: 1.7rem;
+  margin-top: 8px;
+  font-size: 0.4rem;
+  font-weight: 500;
+  margin-left: auto;
+}
+
+.navLink {
+  color: #898989;
+  text-decoration: none;
+  font-size: 16px;
+  transition: color 0.3s ease;
+  gap: 5px;
+  display: flex;
+  align-items: center;
+  .icon {
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+  }
+  .text {
+    font-size: 16px;
+  }
+  &:hover {
+    color: $primary-color;
+  }
+}
+
+.navLink.active {
+  color: $primary-color;
+}
+
+// .loginButton {
+//   background-color: #db7c0b;`
+//   color: white;
+//   padding: 0.5rem 1rem;
+//   border-radius: 5px;
+//   text-decoration: none;
+//   font-size: 0.8rem;
+//   font-weight: bold;
+//   transition: background-color 0.3s ease;
+//   margin-left: 1rem;
+// }
+
+// .loginButton:hover {
+//   background-color: #db7c0b;
+// }
+
+.authButtons {
+  display: flex;
+  gap: 0.8rem;
+  margin-left: auto;
+  align-items: center;
+}
+
+.loginButton {
+  border: 1px solid #a8a8a8;
+  color: rgb(55 65 81);
+  padding: 0.5rem 1rem;
+  border-radius: 28px;
+  text-decoration: none;
+  font-size: 0.8rem;
+  font-weight: bold;
+  transition: background-color 0.3s ease;
+}
+
+// .loginButton:hover {
+//     background-color: #e0a800;
+// }
+
+.signupButton {
+  border: 1px solid #a8a8a8;
+  color: rgb(55 65 81);
+  padding: 0.5rem 1rem;
+  border-radius: 28px;
+  text-decoration: none;
+  font-size: 0.8rem;
+  font-weight: bold;
+  transition: background-color 0.3s ease;
+}
+
+// .signupButton:hover {
+//     background-color: #e0a800;
+// }
+
+.logoutButton {
+  border: 1px solid #a8a8a8;
+  color: rgb(55 65 81);
+  // padding: 0.5rem 1rem !important;
+  border-radius: 28px;
+  text-decoration: none;
+  font-size: 0.8rem;
+  font-weight: bold;
+  transition: background-color 0.3s ease;
+  background: none !important;
+  font-family: Poppins, sans-serif, sans-serif;
+  width: 78.31px !important;
+  height: 36px !important;
+}

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

@@ -0,0 +1,22 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap');
+
+$pop: 'Poppins', sans-serif;
+$rop: sans-serif;
+
+:root {
+  --font-display: #{$rop};
+  --font-body: #{$pop};
+}
+
+html,
+body {
+  font-family: var(--font-body), sans-serif;
+  @apply antialiased;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-family: var(--font-display), sans-serif;
+}

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

@@ -0,0 +1,300 @@
+.footer {
+  background-color: #0a0b1d;
+  color: #ffffff;
+  padding: 6rem 0;
+  text-align: left;
+  width: 100%;
+  box-sizing: border-box;
+
+  &__container {
+    max-width: 1100px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 20px;
+    padding: 0 20px; 
+  }
+
+  &__section {
+    flex: 1;
+    min-width: 200px; 
+    margin-bottom: 20px;
+    
+    &--instafeed {
+      min-width: 150px;
+    }
+  }
+
+  &__title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 12px;
+  }
+
+  &__text {
+    font-size: 15px;
+    color: #777777;
+    line-height: 1.6;
+  }
+
+  &__list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    line-height: 1.8;
+
+    &-item {
+      font-size: 14px;
+      color: #777777;
+      cursor: pointer;
+      transition: color 0.2s ease; 
+
+      &:hover {
+        color: #ffcc00;
+      }
+    }
+  }
+
+  &__list--grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+  }
+
+  @media (max-width: 990px) {
+    &__list--grid {
+      grid-template-columns: repeat(2, 1fr);
+      max-width:200px;
+    }
+  }
+
+
+  @media (max-width: 570px) {
+    &__list--grid {
+      grid-template-columns: repeat(2, 1fr);
+      max-width:200px;
+    }
+  }
+
+  @media (max-width: 360px) {
+    &__list--grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &__newsletter {
+    display: flex;
+    border: 1px solid rgb(158, 157, 157);
+    overflow: hidden;
+    max-width: 280px;
+    margin-top: 20px;
+  }
+
+  &__input {
+    flex: 1;
+    padding: 13px;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    color: #ffffff;
+    font-size: 14px;
+
+    &::placeholder {
+      color: #777777;
+    }
+  }
+
+  &__button {
+    background-color: #ffcc00;
+    border: none;
+    padding: 10px 15px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    
+    &:hover {
+      background-color: #e6b800;
+    }
+  }
+
+  &__instafeed {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 8px;
+
+    &-img {
+      width: 100%;
+      aspect-ratio: 1/1;
+      object-fit: cover;
+      border-radius: 2px;
+    }
+  }
+
+  &__copyright {
+    text-align: center;
+    margin-top: 10px;
+    border-top: 1px solid #222;
+    padding-top: 20px;
+    font-size: 14px;
+    color:  #777777;
+    width: 100%;
+
+    .footer__highlight {
+      color: #ffcc00;
+    }
+
+    .footer__socials {
+      margin-top: 10px;
+      display: flex;
+      justify-content: center;
+      gap: 15px;
+
+      .footer__social-icon {
+        font-size: 16px;
+        cursor: pointer;
+        color:  #777777;
+        transition: color 0.2s ease;
+
+        &:hover {
+          color: #ffcc00;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 990px) {
+  .footer {
+    padding: 4rem 0;
+
+    &__container {
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      gap: 30px;
+    }
+
+    &__section {
+      flex-basis: calc(50% - 30px);
+      min-width: 0;
+    }
+
+    &__instafeed {
+      grid-template-columns: repeat(4, 1fr);
+      gap: 8px;
+
+      &-img {
+        width: 100%;
+        max-width: 55px;
+        height: auto;
+      }
+    }
+  }
+}
+
+@media (min-width: 990px) and (max-width: 1200px) {
+  .footer__input { 
+    width: 0px; 
+  }
+}
+
+@media (min-width: 570px) and (max-width: 990px) {
+  .footer {
+    &__instafeed {
+      grid-template-columns: repeat(4, 1fr); 
+      gap: 8px;
+      max-width: 240px; 
+
+      &-img {
+        max-width: 100%;
+      }
+    }
+    &__button {
+      
+      padding: 12px;
+    }
+
+    &__newsletter {
+      width:248px;
+    }
+
+  }
+}
+
+@media (max-width: 570px) {
+  .footer {
+    padding: 3rem 0;
+
+    &__container {
+      flex-direction: column;
+      align-items: center;
+      gap: 30px;
+    }
+
+    &__section {
+      flex-basis: 100%;
+      width: 100%;
+    }
+
+    &__button {
+      
+      padding: 12px;
+    }
+
+    &__instafeed {
+      grid-template-columns: repeat(3, 1fr);
+      gap: 8px;
+      max-width: 240px;
+
+      &-img {
+        max-width: 100%;
+      }
+    }
+
+    // &__list {
+    //   margin: 0 auto;
+    // }
+  }
+}
+
+@media (max-width: 360px) {
+  .footer {
+    &__instafeed {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}
+
+@media (min-width: 990px) and (max-width: 1200px) {
+  .footer__newsletter {
+    max-width: 200px; 
+  }
+
+  .footer__input { 
+    width: 100px; 
+    padding: 13px;
+  }
+
+  .footer__button {
+    padding: 8px 12px; 
+  }
+
+  .footer {
+    &__instafeed {
+      max-width: 200px; 
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+}
+
+@media (max-width:420px){
+  .footer__input { 
+    width: 100px; 
+    padding: 13px;
+  }
+
+  .footer__button {
+    padding: 8px 12px; 
+  }
+  
+}

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

@@ -0,0 +1,68 @@
+.request-password-reset {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background-color: #ffffff;
+    color: #1a1a1a;
+  
+    &__container {
+      width: 100%;
+      max-width: 400px;
+      background-color: #ffffff;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      padding: 2rem;
+    }
+  
+    &__title {
+      font-size: 24px;
+      color:  #db7c0b;
+      text-align: center;
+      margin-bottom: 1.5rem;
+    }
+  
+    &__subtitle {
+      text-align: center;
+      margin-bottom: 1.5rem;
+      color: #555555;
+      font-size: 14px;
+    }
+  
+    &__field {
+      margin-bottom: 1.5rem;
+      display: flex;
+      flex-direction: column;
+    }
+  
+    &__label {
+      color:  #db7c0b;
+      margin-bottom: 0.5rem;
+      font-weight: 600;
+    }
+  
+    &__input {
+      padding: 0.5rem 0.75rem;
+      border: 1px solid #cccccc;
+      border-radius: 4px;
+      font-size: 14px;
+      outline: none;
+      transition: border-color 0.3s;
+  
+      &:focus {
+        border-color:  #db7c0b;
+      }
+    }
+  
+    &__error {
+      color: #e3342f; 
+      font-size: 12px;
+      margin-top: 0.5rem;
+    }
+  
+    &__button {
+      width: 100%;
+      margin-top: 1rem;
+    }
+  }
+  

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

@@ -0,0 +1,39 @@
+.form-field {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  width: 100%;
+
+  label {
+    font-size: 0.9rem;
+    font-weight: 500;
+    margin-bottom: 5px;
+    color: #333;
+  }
+
+  .input {
+    padding: 15px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    background-color: white;
+    transition: border 0.3s ease;
+    outline: none;
+
+    &:focus {
+      border-color: #db7c0b;
+      box-shadow: 0 0 5px rgba(252, 185, 0, 0.5);
+    }
+  }
+
+  .textarea {
+    resize: vertical;
+  }
+
+  .error-text {
+    font-size: 0.8rem;
+    color: red;
+    margin-bottom: 0;
+    margin-top: 5px;
+  }
+}

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

@@ -0,0 +1,20 @@
+.form-item {
+    display: flex;
+    flex-direction: column;
+  
+    &__content {
+      margin-top: 0.25rem; // similar to mt-1
+    }
+  
+    &__desc {
+      display: block;
+      margin-top: 0.75rem; // similar to mt-3
+      font-size: 0.75rem; // text-xs
+      color: #6b7280; // neutral-500
+  
+      @media (prefers-color-scheme: dark) {
+        color: #9ca3af; // neutral-400
+      }
+    }
+  }
+