iceholidays-frontend 0.1.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b78dc5fdcbe214d68962ce2ce9f6099cc55bc8258e89570b1def07e6c8ffd9fd
-  data.tar.gz: 117e36f9eebcc31369ce3cfb6703793526841973ba64e1a46194fe39ef4cbfdf
+  metadata.gz: 863654c2cf6a12a64a30d7ac313c3b3151e6772ba2f6fcfc6aa2160391dcc8bd
+  data.tar.gz: ec1f0394c55a0bc6a474ae0a96cbc5cca1e309d2e2f756437f7f615935f641f9
 SHA512:
-  metadata.gz: 880913e135020089f1fb88be031099e6da9d7a68d0cc4e04517902dd6fd6e67bca2fe6bf0e62e11b90606a4ae815218aac7f6b377843561bb61db5a7fb7627d7
-  data.tar.gz: ed682b76376c508c5bd07237458dd3cb3a2b1c75ddf889e6cab9f02dd7ac0bd0112136844f098ed430e15cb4fb9ccefeaf60d7a4bf3e8fa6efd5d825929cb25b
+  metadata.gz: 903ac5ecac661c1062d2547570706c1965e1a1ca0d260167f91158442d49f05a6ba4bd00e4127726e988519718582d0d48692d5b9007a223f5b82bbd83a10e89
+  data.tar.gz: d9818be7bb909eaeb97d3b5693654c0b7c145602681916cfcd3aeab7979ca8ef2c0e39e990b54127e92442a806424e408f568ffe728bc96fefd92c839dfa5093

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

@@ -14,7 +14,10 @@
  *= require_self
  */
 
- @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,200;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+ @import url("//fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,200;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+//  @import "font-awesome.css";
+
+ $font-default: Poppins, san-serif;
 
  .ant-tabs >.ant-tabs-nav{
   margin: 0;
@@ -40,7 +43,7 @@
 
     .ant-tabs-tab-btn {
       text-transform: uppercase;
-      font-family: Poppins;
+      font-family: $font-default;
       font-size: 20px;
       font-weight: 400;
       line-height: 30px;
@@ -66,7 +69,7 @@
 display: unset !important;
 width: 100% !important;
 }
-  
+
 
 [class~='ant-carousel'] {
   [class~='slick-dots'] {
@@ -94,12 +97,23 @@ width: 100% !important;
       }
     }
   }
+
+  .slick-prev,
+  .slick-next{
+    width: unset;
+    height: unset;
+
+    &::after{
+      display: none;
+    }
+  }
  
 }
-
+  
 body{
   margin: 0;
   background: #F2F2F2;
+  font-family: Poppins, sans-serif;
 }
 
 #header{
@@ -127,6 +141,15 @@ body{
 .nav-menu 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;
+
 }
 
 #left-menu{
@@ -142,7 +165,7 @@ body{
   left: 568px;
   gap: 0px;
   opacity: 0px;
-  z-index: 1;
+  z-index: 2;
 }
 
 #right-menu{
@@ -173,7 +196,7 @@ body{
 }
 
 #get-brochure span{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 14px;
   font-weight: 500;
   line-height: 21px;
@@ -193,23 +216,72 @@ body{
   position: absolute;
   display: flex;
   justify-content: center;
+  z-index: 1;
 }
 
 #search-bar-widget{
   width: 427px;
-  /* height: 84px; */
-  padding: 25px 0px 15px 0px;
+  height: 60px;
+  padding: 10px 0px 15px 0px;
   gap: 7px;
   opacity: 0px;
   background: #F7F4EB;
+
+  .ant-space{
+    justify-content: center;
+    width: 100%;
+  }
+
+  .ant-form-item{
+    margin: 0;
+
+    .ant-form-item-label{
+      padding-bottom: 3px;
+      
+      label{
+        font-family: Poppins;
+        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{
+    background: #AA853E;
+    border-radius: 20px;
+
+    span{
+      font-family: Poppins;
+      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;
+  }
 }
 
+
 .flip{
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
 }
 
-#cover{
+#homepage-banner{
   width: 1440px;
   height: 760px;
   gap: 0px;
@@ -217,6 +289,19 @@ body{
   opacity: 0px;
   /* position: relative; */
 
+
+
+[class~='ant-carousel'] {
+  .slick-prev{
+    inset-inline-start: 115px;
+  }
+  .slick-next{
+    inset-inline-end: 115px;
+  }
+ 
+}
+
+
 }
 
 #tagline{
@@ -231,7 +316,7 @@ body{
 }
 
 #tagline span{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 45px;
   font-weight: 600;
   line-height: 69px;
@@ -250,7 +335,7 @@ body{
 }
 
 #popular-destinations h1{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 45px;
   font-weight: 200;
   line-height: 67.5px;
@@ -263,7 +348,7 @@ body{
 
 
 .top-cities h2{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 30px;
   font-weight: 600;
   line-height: 45px;
@@ -283,22 +368,30 @@ body{
 
 .top-cities .city-cover{
   border-radius: 20px;
+  overflow: hidden;
 }
 
 .city-cover{
   width: 540px;
-}
-.city-cover 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;
 
+  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%;
+    }
+  }
+  
 }
 
 .top-cities .city-details{
@@ -317,7 +410,7 @@ body{
 }
 
 .city-details .city-name{
-  font-family: Poppins;
+  font-family: $font-default;
 font-size: 20px;
 font-weight: 400;
 line-height: 30px;
@@ -330,7 +423,7 @@ color: #FFFFFF;
 }
 
 .city-details .tour-count{
-  font-family: Poppins;
+  font-family: $font-default;
 font-size: 14px;
 font-weight: 400;
 line-height: 21px;
@@ -343,10 +436,6 @@ cursor: pointer;
 
 }
 
-.city-details .tour-count:hover{
-  text-decoration: underline;
-}
-
 .country-info {
   position: relative;
 
@@ -394,7 +483,7 @@ cursor: pointer;
 }
 
 #testimonial #testimonial-header>span{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 45px;
   font-weight: 200;
   line-height: 67.5px;
@@ -418,18 +507,29 @@ cursor: pointer;
   margin: auto;
   padding: 50px 170px 70px 170px;
   // gap: 20px;
+
+
+  [class~='ant-carousel'] {
+    .slick-prev,
+    .slick-next{
+      color: #959492;
+
+      &:hover{
+        color: #DFB163;
+      }
+    }
+  }
 }
 .testimonial{
-  width: 317.33px !important;
-height: 383px;
-padding: 10px 18px 20px 18px;
-gap: 15px;
-border-radius: 20px;
-opacity: 0px;
-background: #FFFFFF;
-box-shadow: 0px 5px 20px 0px #E1B65B33;
-text-align: center;
-display: grid !important;
+  height: 383px;
+  padding: 10px 18px 20px 18px;
+  // gap: 15px;
+  border-radius: 20px;
+  opacity: 0px;
+  background: #FFFFFF;
+  box-shadow: 0px 5px 20px 0px #E1B65B33;
+  text-align: center;
+  display: grid !important;
 }
 
 .stars-icon{
@@ -451,7 +551,7 @@ display: grid !important;
   background: linear-gradient(270deg, #F9E298 0%, #FFFDF5 117.76%);
   box-shadow: 0px 7px 16.7px 0px #E1B65B80;
   box-sizing: border-box;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   
   
@@ -462,7 +562,7 @@ height: 26.5px;
 
 }
 .itinerary-summary span{
-  font-family: Poppins;
+  font-family: $font-default;
 font-size: 12px;
 font-weight: 500;
 line-height: 18px;
@@ -470,12 +570,14 @@ text-align: left;
 text-underline-position: from-font;
 text-decoration-skip-ink: none;
 color: #AA853E;
+width: 100%;
+display: block;
 
 
 }
 
 .comment span{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 14px;
   font-style: italic;
   font-weight: 200;
@@ -486,19 +588,31 @@ color: #AA853E;
   
 }
 
-.customer-name span{
-  font-family: Poppins;
-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;
+.customer-name {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
 
+  .author-icon{
+    color: rgba(0, 0, 0, 0.8);
+    width: 20px;
+    height: 20px;
+  }
+  span{
+    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;
+  
+  }
 }
 .more-cities h2{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 30px;
   font-weight: 600;
   line-height: 45px;
@@ -514,7 +628,7 @@ text-decoration-skip-ink: none;
   gap: 10px;
 
   a{
-    font-family: Poppins;
+    font-family: $font-default;
     font-size: 18px;
     font-weight: 400;
     line-height: 27px;
@@ -567,7 +681,7 @@ text-decoration-skip-ink: none;
     }
 
     .city-name{
-      font-family: Poppins;
+      font-family: $font-default;
       font-size: 20px;
       font-weight: 400;
       line-height: 30px;
@@ -579,8 +693,8 @@ text-decoration-skip-ink: none;
     }
 
     .tour-count{
-      width: 40px;
-      font-family: Poppins;
+      width: 45px;
+      font-family: $font-default;
       font-size: 12px;
       font-weight: 400;
       line-height: 21px;
@@ -607,7 +721,7 @@ text-decoration-skip-ink: none;
 }
 
 #about-signature-tours h1{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 45px;
   font-weight: 200;
   line-height: 67.5px;
@@ -646,7 +760,7 @@ text-decoration-skip-ink: none;
 }
 
 #st-brand span{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 20px;
   font-weight: 400;
   line-height: 30px;
@@ -674,7 +788,7 @@ text-decoration-skip-ink: none;
 }
 
 #about-signature-tours p{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 18px;
   font-weight: 200;
   line-height: 27px;
@@ -703,7 +817,7 @@ text-decoration-skip-ink: none;
 }
 
 #footer .link-group-title{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 15px;
   font-weight: 400;
   line-height: 22.5px;
@@ -741,7 +855,7 @@ text-decoration-skip-ink: none;
 }
 
 #footer-links a{
-  font-family: Poppins;
+  font-family: $font-default;
 font-size: 18px;
 font-weight: 500;
 line-height: 36px;
@@ -776,7 +890,7 @@ opacity: 0px;
 position: absolute;
 }
 #copyright span{
-  font-family: Poppins;
+  font-family: $font-default;
   font-size: 14px;
   font-weight: 400;
   line-height: 16.93px;

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

@@ -1,6 +1,7 @@
 module Iceholidays
   module Frontend
     class ApplicationController < ::ApplicationController
+      skip_before_action :authenticate_user!
     end
   end
 end

data/app/javascript/react/components/Destinations.tsx

@@ -1,72 +1,71 @@
+import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tabs, TabsProps } from "antd";
 import React from "react";
 
 const countries = [
   {
     name: "Africa",
-    image: "africa.png",
-    image2: "africa2.png",
+    image: "iceholidays-assets/images/africa.png",
     topCities: [{
-      name: "Kenya", 
-      image: "kenya.png",
-      image2: "kenya2.png",
+      name: "Kenya",       
+      image: "iceholidays-assets/images/kenya.png",
     },
     {
-      name: "South Africa", 
-      image: "southafrica.png",
+      name: "South Africa",             
+      image: "iceholidays-assets/images/southafrica.png",
     },
     {
       name: "Tanzania", 
-      image: "tanzania.png",
+      image: "iceholidays-assets/images/tanzania.png",
     },
     {
-      name: "Uaganda",
-      image: "uganda.png",
+      name: "Uaganda",      
+      image: "iceholidays-assets/images/uganda.png",
     }]
   },
   {
-    name: "China",
-    image: "china.jpeg",
-    image2: "china2.png",
+    name: "China",    
+    image: "iceholidays-assets/images/china.png",
     topCities: [{
       name: "Chong Qing",
-      image: "chongqing.png",
+      image: "iceholidays-assets/images/china.png",
     },
     {
       name: "Guangzhou", 
-      image: "guangzhou.png",
+      image: "iceholidays-assets/images/guangzhou.png",
     },
     {
-      name: "Guilin", 
-      image: "guilin.png",
+      name: "Guilin",       
+      image: "iceholidays-assets/images/guilin.png",
     },
     {
-      name: "Hongkong", 
-      image: "hongkong.png",
+      name: "Hongkong",       
+      image: "iceholidays-assets/images/hongkong.png",
     }],
     moreCities: [
       "Leizhou", "Ningxia", "Qinghai", "Shanghai", "Tibet", "Xiamen", "Yunnan"
     ],
     tours: [
       {
-        name: "Harbin",
-        image: "harbin.png",
+        name: "Harbin",        
+        image: "iceholidays-assets/images/harbin.png",
       },
       {
-        name: "Inner Mongolia",
-        image: "inner_mongolia.png",
+        name: "Inner Mongolia",        
+        image: "iceholidays-assets/images/inner_mongolia.png",
       },
       {
-        name: "Jiangxi",
-        image: "jiangxi.png",
+        name: "Jiangxi",        
+        image: "iceholidays-assets/images/jiangxi.png",
       },
       {
-        name: "Kun Ming",
-        image: "kunming.png",
+        name: "Kun Ming",        
+        image: "iceholidays-assets/images/kunming.png",
       },
       {
-        name: "Silk Road",
-        image: "slikroad.png",
+        name: "Silk Road",        
+        image: "iceholidays-assets/images/slikroad.png",
       }
     ]
   },
@@ -100,11 +99,9 @@ function Destinations(){
           <div>
             <div className="country-info">
               <img className="country-image" 
-                src={`/dev-assets/iceholidays/frontend/${country.image}`}
-                onMouseOver={e => (e.currentTarget.src = `/dev-assets/iceholidays/frontend/${country.image2}`)}
-                onMouseOut={e => (e.currentTarget.src = `/dev-assets/iceholidays/frontend/${country.image}`)}/>
+                src={`${country.image}`} />
               <h1 className="country-name"> {country.name} </h1>
-              <img className="bottom-logo" src={"/dev-assets/iceholidays/frontend/Frame71.png"}></img>
+              <img className="bottom-logo" src="iceholidays-assets/images/Frame71.png"></img>
             </div>
             {
               country.topCities?.length && 
@@ -115,13 +112,10 @@ function Destinations(){
                     country.topCities?.map((city, index)=>{
                       return (
                         <div key={index} className="city-cover">
-                        <img 
-                          src={`/dev-assets/iceholidays/frontend/${city.image}`}
-                          onMouseOver={e => (e.currentTarget.src = `/dev-assets/iceholidays/frontend/${city.image2}`)}
-                          onMouseOut={e => (e.currentTarget.src = `/dev-assets/iceholidays/frontend/${city.image}`)}/>
+                        <img src={`${city.image}`}/>
                         <div className="city-details">
                           <span className="city-name">{city.name}</span>
-                          <span className="tour-count">1 Tour</span>
+                          <span className="tour-count">1 Tour <FontAwesomeIcon icon={faCaretRight}/> </span>
                         </div>
                       </div>
                       )
@@ -150,10 +144,10 @@ function Destinations(){
                 <div className="other-tours">  
                   {
                     country.tours?.map((tour, index)=>{
-                      return <div key={index} className={"tour-story"} style={{backgroundImage:`linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%), url("/dev-assets/iceholidays/frontend/${tour.image}")`}}>
+                      return <div key={index} className={"tour-story"} style={{backgroundImage:`linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%), url("${tour.image}")`}}>
                         <div className="tour-detail"> 
                           <span className="city-name"> {tour.name}  </span>
-                          <span className="tour-count"> 1 tour </span>
+                          <span className="tour-count"> 1 tour <FontAwesomeIcon icon={faCaretRight}/> </span>
                         </div>
                       </div>
                     })

data/app/javascript/react/components/Homepage.tsx

@@ -4,7 +4,6 @@ import Testimonials from "./Testimonials";
 import Destinations from "./Destinations";
 
 
-
 const Homepage = React.FC = () => (
   <div>
     <HomepageBanner/>