iceholidays-frontend 0.3.0 → 0.4.0

data/app/assets/stylesheets/iceholidays/frontend/common.scss

@@ -0,0 +1,233 @@
+
+
+#headline{
+  //can change to container width
+  --side-padding: 10%;
+
+  &_banner{
+    // width: 1440px;
+    height: 352px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+
+  &_header{
+    padding: 20px var(--side-padding);
+    // width: 1440px;
+    // height: 106px;
+    top: 398px;
+    gap: 0px;
+    opacity: 0px;
+    background: linear-gradient(270deg, #AA853E 0%, #F9E298 33.5%, #FFF3A6 50%, #F9E298 65.5%, #E1B65B 100%),
+    linear-gradient(40.85deg, rgba(170, 133, 62, 0.5) -614.19%, rgba(249, 225, 151, 0.5) -547.57%);
+
+    h1{
+      // width: 314px;
+      // height: 68px;
+      margin: 0;
+
+      font-family: $font-default;
+      font-size: 45px;
+      font-weight: 400;
+      line-height: 67.5px;
+      letter-spacing: 0.05em;
+      text-align: left;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+      color: #5B4713;
+      text-transform: uppercase;
+    }
+
+    // .country-filter.ant-select{
+    //   line-height: 35px;
+    //   width: 170px;
+
+    //   .ant-select-selector{
+    //     padding: 3px 40px 3px 15px;
+    //     border-radius: 30px;
+    //     height: 36px;
+    //   }
+
+    //   .ant-select-selection-item{
+    //     font-family: $font-default;
+    //     font-size: 20px;
+    //     font-weight: 500;
+    //     line-height: 30px;
+    //     letter-spacing: 0.05em;
+    //     text-align: left;
+    //     text-underline-position: from-font;
+    //     text-decoration-skip-ink: none;
+    //     color: #836848;
+    //   }
+
+    //   .ant-select-arrow{
+    //     inset-inline-end: 20px;
+    //     color: #836848;
+    //   }
+    // }
+
+  }
+
+  .ant-breadcrumb{
+    padding: 10px var(--side-padding);
+  }
+}
+
+.date-selector{
+  background: #F5F5F5;
+  // width: Fixed (516px)px;
+  padding: 15px 24px;
+  border-radius: 10px;
+  display: inline-flex;
+  gap: 8px;
+  width: 100%;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+
+  span{
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 20px;
+    background: #FFFFFF;
+    font-family: $font-default;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0.05em;
+    text-align: center;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: #999999;
+    padding: 2px 8px 2px 8px;
+    cursor: pointer;
+  }
+
+  .show-all-dates{
+    font-family: $font-default;
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 16.5px;
+    text-align: right;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: $primary-color;
+    display: inline-flex;
+    gap: 5px;
+    cursor: pointer;
+  }
+}
+
+.postcards{
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 20px;
+}
+
+.postcard{
+  border-radius: 20px;
+  overflow: hidden;
+  width: 100%;
+
+  img{
+    width: 100%;
+    height: 230.5px;
+    gap: 0px;
+    opacity: 0px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    display: block;
+    object-fit: cover;
+    object-position: top center;
+    transition: transform 0.4s ease;
+    transform-origin: 50% 100%;
+
+    &:hover{
+      transform: scale(1.2);
+      width: 100%;
+    }
+  }
+
+  .details{
+    padding: 12px 20px 12px 20px;
+    gap: 0px;
+    border: 1px 0px 0px 0px;
+    justify-content: space-between;
+    align-items: center;
+    opacity: 0px;
+    background: $primary-color;
+    display: flex;;
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+  }
+  
+  .name{
+    font-family: $font-default;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 30px;
+    letter-spacing: 0.05em;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    text-transform: uppercase;
+    color: #FFFFFF;
+    }
+  
+  .tour-count{
+    font-family: $font-default;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 21px;
+    letter-spacing: 0.05em;
+    text-align: right;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: #FFFFFF;
+    cursor: pointer;
+  
+  
+    svg{
+      vertical-align: middle;
+    }
+  }
+}
+
+#ribbon-section{
+  background: #F7F4EB;
+  margin-top: 100px;
+  
+  &_header{
+    height: 138px;
+    text-align: center;
+    position: relative;
+    background-image: url('/iceholidays-assets/images/Layer_1.png');
+
+    h1{
+      font-family: $font-default;
+      font-size: 45px;
+      font-weight: 200;
+      line-height: 67.5px;
+      letter-spacing: 0.06em;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+      color: #5B4713;
+      text-transform: uppercase;
+    
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translate(-50%, 20px);
+      margin: 0;
+    }
+  }
+}
+
+.pre-wrap{
+  white-space: pre-wrap;       /* css-3 */
+  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+  white-space: -pre-wrap;      /* Opera 4-6 */
+  white-space: -o-pre-wrap;    /* Opera 7 */
+  word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}

data/app/assets/stylesheets/iceholidays/frontend/layout.scss

@@ -0,0 +1,188 @@
+
+#main-header{
+  position: relative;
+  background: linear-gradient(241.37deg, #D1AC6E -108.33%, #D1AC6E -14.72%, $secondary-color -2.73%, #B68B31 108.18%);
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  &>div{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+  
+  .nav-menu{
+    /* position: absolute; */
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+
+    a{
+      color: white;
+      text-transform: uppercase;
+      font-family: $font-default;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      letter-spacing: 0.05em;
+      text-align: left;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+      text-decoration: none;
+
+      &.active{
+        color: #5B4713;
+      }
+    
+    }
+  }
+  
+  #left-menu{
+    top: 13px;
+    left: 183px;
+    gap: 35px;
+    opacity: 0px;
+  }
+  
+  .logo{
+    width: 304px;
+    height: 66px;
+    left: 568px;
+    gap: 0px;
+    opacity: 0px;
+    z-index: 2;
+  }
+  
+  #right-menu{
+    top: 13px;
+    left: 877px;
+    gap: 35px;
+    opacity: 0px;
+  }
+  
+  #get-brochure{
+    position: absolute;
+    width: 152px;
+    /* height: 35px; */
+    top: 8px;
+    right: 20px;
+    
+    button{
+      padding: 7px 8px 7px 8px;
+      border-radius: 20px;
+      border: 1px solid;
+      background: linear-gradient(287.63deg, #D1AC6E -19.9%, #D1AC6E 10.87%, #F9E298 26.63%, #B68B31 93.91%);
+      border-image-source: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(42, 42, 42, 0.5) 100%);
+      box-shadow: 0px 3px 10px 0px #AA853E80;
+      box-shadow: 0px 4px 4px 0px #F9F6F31A inset;
+      text-align: center;
+      text-transform: uppercase;
+      font-family: $font-default;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 21px;
+      letter-spacing: 0.05em;
+      text-align: left;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+    }
+  }
+}
+
+#main-footer{
+  // width: 1440px;
+  height: 321px;
+  gap: 0px;
+  opacity: 0px;
+  background: linear-gradient(270deg, #AA853E 0%, $secondary-color 33.5%, #FFF3A6 50%, $secondary-color 65.5%, #E1B65B 100%),
+  linear-gradient(4.08deg, rgba(170, 133, 62, 0.5) -2.54%, rgba(249, 225, 151, 0.5) 7.02%);
+  position: relative;
+
+  &_links{
+    margin: auto;
+    height: 196px;
+    width: 70%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 38px 0;
+    position: relative;
+
+    &> div{
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+
+    a{
+      font-family: $font-default;
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 36px;
+      letter-spacing: 0.05em;
+      text-align: left;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+      color: #AA853E;
+      text-transform: uppercase;
+    }
+
+    div:has(> a+a){
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(4, 1fr);
+      column-gap: 34px;
+    }
+    
+    .link-group-title{
+      font-family: $font-default;
+      font-size: 15px;
+      font-weight: 400;
+      line-height: 22.5px;
+      letter-spacing: 0.05em;
+      text-align: left;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+      color: #5B4713;
+      height: 37px;
+      grid-row-start: 2 span;
+    }
+
+    hr{
+      width: 100%;
+      height: 0px;
+      top: 258.34px;
+      left: 0;
+      gap: 0px;
+      border: 1px 0px 0px 0px;
+      opacity: 0px;
+      border: 1px solid #DFB16380;
+      position: absolute;
+    }
+  }
+
+
+  #copyright{
+    height: 17px;
+    top: 282.28px;
+    left: 592px;
+    gap: 0px;
+    opacity: 0px;
+    position: absolute;
+  
+      span{
+        font-family: $font-default;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 16.93px;
+        letter-spacing: 0.05em;
+        text-align: left;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+        color: #AA853E;
+      }
+  }
+}

data/app/assets/stylesheets/iceholidays/frontend/utils/_antd_overrides.scss

@@ -0,0 +1,107 @@
+.ant-layout-content{
+  position: relative;
+}
+
+.ant-btn-variant-solid{
+  background-color: $primary-color;
+  color: #FFFFFF;
+  border-radius: 20px;
+
+  &:not(:disabled):not(.ant-btn-disabled):hover{
+    background-color: #AA853E;
+  }
+}
+
+.ant-btn-color-primary.ant-btn-variant-outlined{
+  border-color: $primary-color;
+  color: $primary-color;
+  border-radius: 20px;
+
+  &:not(:disabled):not(.ant-btn-disabled):hover{
+    --darkPrimaryColor: #AA853E;
+    border-color: var(--darkPrimaryColor);
+    color: var(--darkPrimaryColor);
+  }
+}
+
+.ant-btn-color-default.ant-btn-variant-filled{
+  color: $primary-color;
+}
+
+.ant-btn-color-primary {
+  box-shadow: 0 2px 0 rgb(220 176 98 / 10%);;
+}
+
+.ant-btn-sm{
+  font-size: 10px;
+}
+
+.ant-input-outlined,
+.ant-picker-outlined{
+  &:hover, &:focus{
+    border-color: $primary-color;
+  }
+
+  &:focus{
+    box-shadow: 0 2px 0 rgb(220 176 98 / 10%);
+  }
+}
+
+
+
+
+[class~='ant-carousel'] {
+  [class~='slick-dots'] {
+    bottom: 30px;
+
+    li {
+      width: 15px !important;
+
+      button{
+        width: 13px;
+        height: 13px;
+        border-radius: 100%;
+        background-color: transparent;
+        border: 1px solid #FFFFFF;
+        opacity: 1;
+      }
+
+      &.slick-active {
+        button {
+          width: 13px;
+          height: 13px;
+          border-radius: 100%;
+          background-color: white;
+        }
+      }
+    }
+  }
+
+  .slick-prev,
+  .slick-next{
+    width: unset;
+    height: unset;
+
+    &::after{
+      display: none;
+    }
+  }
+ 
+}
+
+a{
+  color: $primary-color;
+}
+
+.ant-select-outlined:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer):hover .ant-select-selector{
+  border-color: $primary-color;
+}
+
+.ant-select-item-option-selected:not(.ant-select-item-option-disabled):has(.country-filter_option){
+  color: $primary-color !important;
+  background-color: #FFFFFF;
+}
+
+.ant-select-item-option:not(.ant-select-item-option-selected):has(.country-filter_option){
+  color: #00000080;
+}

data/app/assets/stylesheets/iceholidays/frontend/utils/_variables.scss

@@ -0,0 +1,3 @@
+$font-default: Poppins, san-serif;
+$primary-color: #DCB062;
+$secondary-color: #F9E298;

data/app/assets/stylesheets/iceholidays/frontend/widgets/filter_pills.scss

@@ -0,0 +1,45 @@
+
+.filter-title{
+  font-family: $font-default;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.05em;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  color: #545047;
+}
+.filter-pill{
+  padding: 6px 13px 6px 13px;
+  border-radius: 10px;
+  background: linear-gradient(360deg, $primary-color 5.04%, #F9E298 99.13%);
+  color: #836848;
+  cursor: pointer;
+  text-align: center;
+  min-width: 150px;
+
+  // &.year{
+  //   min-width: 90px;
+  // }
+  
+  // &.month{
+  //   min-width: 150px;
+  // }
+
+  span{
+    font-family: $font-default;
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 27px;
+    letter-spacing: 0.05em;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+  }
+
+  &.selected{
+    background: #836848;
+    color: #FFFFFF;
+  }
+}

data/app/assets/stylesheets/iceholidays/frontend/widgets/search_bar.scss

@@ -0,0 +1,112 @@
+
+.ant-input{
+  field-sizing: content;
+}
+  
+
+#search-bar{
+  width: 100%;
+  height: auto;
+  filter: drop-shadow(0 3px 3px #00000026) drop-shadow(0 1px 1px #DFB16399);
+
+  img{
+    display: none;
+  }
+
+  #search-bar-widget{
+    width: 100%;
+    padding: 25px;
+    gap: 7px;
+    opacity: 0px;
+    background: #F7F4EB;
+    position: relative;  
+    
+    .ant-picker{
+      width: 100%;
+    }
+  
+    .ant-form-item{
+      margin-bottom: 10px;
+  
+      .ant-form-item-label{
+        padding-bottom: 3px;
+        
+        label{
+          font-family: $font-default;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 16.5px;
+          letter-spacing: 0.05em;
+          text-align: left;
+          text-underline-position: from-font;
+          text-decoration-skip-ink: none;
+        }
+      }
+    }
+  
+    .search-button{
+      width: 172px;
+      margin-top: 20px;
+  
+      span{
+        font-family: $font-default;
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 18px;
+        text-align: center;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+  
+      }
+    }
+  
+    .ant-picker .ant-picker-input span.ant-picker-suffix {
+      margin-left: 1px;
+      margin-right: 10px;
+      order: -1;
+      color: #AA853E;
+    }
+  }
+}
+
+
+@media only screen and (min-width: 769px) {
+  #search-bar{
+    top: 0;
+    left: 0;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    z-index: 1;
+
+    img{
+      display: block;
+      margin: 0 -1px; //to hide visible shadow line in between
+    }
+
+    #search-bar-widget{
+      width: auto;
+      padding: 15px;
+
+      .ant-space{
+        flex-direction: unset;
+        align-items: flex-end;
+      }
+  
+      .ant-form{
+        display: inline-flex;
+        gap: 7px;
+        height: 100%;
+      }
+
+      .ant-form-item{
+        margin-bottom: 0;
+      }
+
+      .search-button{
+        width: auto;
+        margin-bottom: 3px;
+      }
+    }
+  }
+}

data/app/controllers/iceholidays/frontend/site_controller.rb

@@ -3,6 +3,38 @@ module Iceholidays
     class SiteController < ApplicationController
       def index
       end
+
+      def listing
+        render :index
+      end
+
+      def show
+        render :index
+      end
+
+      def about_us
+        render :index
+      end
+
+      def countries
+        render :index
+      end
+
+      def blog
+        render :index
+      end
+
+      def show_blog
+        render :index
+      end
+
+      def contact_agents
+        render :index
+      end
+
+      def contact_us
+        render :index
+      end
     end
   end
 end